How to use the prosemirror-view.EditorView function in prosemirror-view

createEditorView(node) {
        // Creates the editor-view from this.editorState. If an editor has been mounted
        // previously, this will contain the previous state of the editor.
        this.view = new EditorView(
            { mount: node },
            {
                state: this.state,
                dispatchTransaction: (transaction: Transaction) => {
                    if (!this.view) {
                        return
                    }

                    const nodes: Node[] = findChangedNodesFromTransaction(transaction)
                    if (validateNodes(nodes)) {
                        // go ahead and update the state now we know the transaction is good
                        const editorState = this.view.state.apply(transaction)
                        this.view.updateState(editorState)
                        if (transaction.docChanged) {
                            this.viewChange.emit(this)
                        }

schema: pubSchema,
			plugins: plugins,
			...config
		};

		const state = EditorState.create(stateConfig);

		const reactMenu = document.createElement('div');
		const editorView = document.createElement('div');
		editorView.className = 'pub-body';
		// place.appendChild(reactMenu);
		place.appendChild(editorView);

		this.menuElem = reactMenu;

		this.view = new EditorView(editorView, {
			state: state,
			dispatchTransaction: this._onAction,
			spellcheck: true,
			clipboardParser: markdownParser,
			clipboardSerializer: clipboardSerializer,
			// handleContextMenu: (evt, thing, thing2)=> {
			// 	console.log(evt, thing, thing2);
			// },
			transformPastedHTML: transformPastedHTML,
			handleDOMEvents: {
				dragstart: (view, evt) => {
					evt.preventDefault();
					return true;
				},
			},
			viewHandlers: {

// code{
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema, DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"

// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
})

window.view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
    plugins: exampleSetup({schema: mySchema})
  })
})
// }

this.state = new State(newEditState, "send")
        this.send(newEditState, sendable)
      } else if (action.requestDone) {
        this.state = new State(newEditState, "poll")
        this.poll()
      } else {
        this.state = new State(newEditState, this.state.comm)
      }
    }

    // Sync the editor with this.state.edit
    if (this.state.edit) {
      if (this.view)
        this.view.updateState(this.state.edit)
      else
        this.setView(new EditorView(document.querySelector("#editor"), {
          state: this.state.edit,
          dispatchTransaction: transaction => this.dispatch({type: "transaction", transaction})
        }))
    } else this.setView(null)
  }

createEditor() {
		/* Create the Editor State */
		const state = EditorState.create({
			doc: this.schema.nodeFromJSON(this.props.initialContent),
			schema: this.schema,
			plugins: this.plugins,
		});

		/* Create and editorView and mount it into the editorRef node */
		const editorView = new EditorView(
			{ mount: this.editorRef.current },
			{
				state: state,
				spellcheck: true,
				editable: () => {
					return !this.props.isReadOnly;
				},
				nodeViews: this.nodeViews,
				handleKeyDown: keydownHandler({
					/* Block Ctrl-S from launching the browser Save window */
					'Mod-s': () => {
						return true;
					},
					// TODO: We need something here that allows the dev to
					// disable certain keys when a inline-menu is open for example
				}),

}, {});

    console.log(`Register plugin hotkeys:`);
    console.log(pluginHotKeys);

    const state = EditorState.create({
      doc: DOMParser.fromSchema(customSchema).parse(domNode),
      schema: customSchema,
      plugins: [
        keymap(pluginHotKeys),
        keymap(customKeyMapConfig),
        keymap(baseKeymap),
      ]
    });

    this.view = new EditorView(this.options.container, {
      state,
      dispatchTransaction: (transaction) => {
        const pluginCancelTransaction = this.options.plugins.filter((plugin) => {
          return plugin.preTransactionHook;
        }).some((plugin) => {
          return plugin.preTransactionHook(transaction);
        });

        if (pluginCancelTransaction) {
          console.log(`plugin cancel transaction`);
          return;
        }

        console.log(`transaction applied`);
        const newState = this.view.state.apply(transaction);
        this.view.updateState(newState);

let state = EditorState.create({
  schema,
  plugins: exampleSetup({schema}).concat(trackPlugin, highlightPlugin)
}), view

let lastRendered = null

function dispatch(tr) {
  state = state.apply(tr)
  view.updateState(state)
  setDisabled(state)
  renderCommits(state, dispatch)
}

view = window.view = new EditorView(document.querySelector("#editor"), {state, dispatchTransaction: dispatch})

dispatch(state.tr.insertText("Type something, and then commit it."))
dispatch(state.tr.setMeta(trackPlugin, "Initial commit"))

function setDisabled(state) {
  let input = document.querySelector("#message")
  let button = document.querySelector("#commitbutton")
  input.disabled = button.disabled = trackPlugin.getState(state).uncommittedSteps.length == 0
}

function doCommit(message) {
  dispatch(state.tr.setMeta(trackPlugin, message))
}

function renderCommits(state, dispatch) {
  let curState = trackPlugin.getState(state)

start (value = '') {
    this.value = value

    this.state = EditorState.create({
      doc: defaultMarkdownParser.parse(value),
      plugins: exampleSetup({schema})
    })
    this.view = new EditorView(this.node, {
      state: this.state,
      dispatchTransaction: (txn) => {
        let nextState = this.view.state.apply(txn)
        this.view.updateState(nextState)
        this.dchanged(txn)
      }
    })
  }

useEffect(() => {
    const pluginList = getPluginList(
      `${plugins.options} history common`
    ).concat(addons);
    const state = buildEditorState(pluginList, defaultValue, viewProvider);
    view = new EditorView(editorRef.current, {
      state,
      dispatchTransaction: tr => {
        let editorState = view.state.apply(tr);

        addons.forEach(addon => {
          if (addon.dispatchTransactionCallback)
            editorState = addon.dispatchTransactionCallback(editorState, tr);
        });

        updateEditorState(view, editorState);
        updateViewListeners();
        const serializableState = view.state.toJSON();
        addons.forEach(addon => {
          const { name, getSerializableState } = addon;
          if (getSerializableState)
            serializableState[name] = getSerializableState();

componentDidMount() {
    const doc = schema.node('doc', null, [
      schema.node('paragraph', null, [
        schema.text('Before '),
        schema.node('mention', { type: 'user', id: 42, label: 'Some User' }),
        schema.text(' and after @abc @def @ghi @jkl @mno @pqr @stu @vwx @yz'),
      ]),
    ]);

    const state = EditorState.create({ doc, schema, plugins: plugins(this.setState) });
    const editor = new EditorView(this.editorEl, {
      state,
      dispatchTransaction: transaction => {
        const newState = this.state.editor.apply(transaction);

        this.setState({
          editor: newState,
        });

        editor.updateState(newState);
      },
    });

    this.setState({ editor: state });
  }