How to use the prosemirror-model.DOMSerializer.fromSchema function in prosemirror-model

);
      const boundNodeViews = {};
      const schema = getSchema(editorState);
      const {nodes} = schema;

      Object.keys(effectiveNodeViews).forEach(nodeName => {
        const nodeView = effectiveNodeViews[nodeName];
        // Only valid and supported node views should be used.
        if (nodes[nodeName]) {
          boundNodeViews[nodeName] = bindNodeView(nodeView);
        }
      });

      // Reference: http://prosemirror.net/examples/basic/
      const view = (this._editorView = new CustomEditorView(editorNode, {
        clipboardSerializer: DOMSerializer.fromSchema(schema),
        dispatchTransaction,
        editable: this._isEditable,
        nodeViews: boundNodeViews,
        state: editorState || EDITOR_EMPTY_STATE,
        transformPastedHTML,
        handleDOMEvents,
      }));

      view.runtime = runtime;
      view.placeholder = placeholder;
      view.readOnly = !!readOnly;
      view.disabled = !!disabled;
      view.updateState(editorState || EDITOR_EMPTY_STATE);

      // Expose the view to CZIProseMirror so developer could debug it.
      registerEditorView(this._id, view);

dispatchTransaction: (transaction: Transaction) => {
      const { state, transactions } = ed.state.applyTransaction(transaction);
      ed.updateState(state);

      if (transactions.some((tr: Transaction) => tr.docChanged)) {
        const serializer = DOMSerializer.fromSchema(basicSchema);
        const outputHtml = serializer.serializeFragment(state.doc.content);
        // to format the outputHtml as an html string rather than a document fragment, we are creating a temporary div, adding it as a child, then using innerHTML which returns an html string
        const tmp = document.createElement('div');
        tmp.appendChild(outputHtml);
        if (input.onChange) {
          input.onChange(tmp.innerHTML);
        }
      }
    }
  });

const customSchema = new Schema({
  nodes,
  marks: {
    ...marks,
    highlight: {
      inclusive: false,
      parseDOM: [{tag: 'highlight'}],
      toDOM: function toDOM() {
        return ['highlight', 0];
      }
    }
  },
});

const serializer = DOMSerializer.fromSchema(customSchema);

@Component({
  templateUrl: './sarapose.component.html',
  // encapsulation: ViewEncapsulation.None,
  styles: [`
      ::ng-deep highlight {
          background-color: red;
      }

      ::ng-deep .ProseMirror p {
          padding: 10px;
          font-size: 18px;
      }

      pre {
          background: #e1e1e1;

// register user custom marks
        ...this.options.marks.reduce((result, markConfig) => {
          result[markConfig.name] = {
            inclusive: false,
            parseDOM: [{tag: markConfig.tag}],
            toDOM: function toDOM() {
              return [markConfig.tag, 0];
            }
          };

          return result;
        }, {})
      },
    });

    const serializer = DOMSerializer.fromSchema(customSchema);

    const domNode = document.createElement('div');
    domNode.innerHTML = 'Some initial text';

    // register user custom hotkeys
    const customKeyMapConfig = this.options.marks.filter((markConfig) => {
      return markConfig.hotKey;
    }).reduce((result, markConfig) => {
      result[markConfig.hotKey] = (state, dispatch) => {
        const tr = this.view.state.tr;
        const {from, to} = state.selection;

        const mark = state.doc.type.schema.marks[markConfig.name].create();
        tr.addMark(from, to, mark);

        dispatch(tr);

function getSerializer(view) {
  return view.someProp("domSerializer") || DOMSerializer.fromSchema(view.state.schema)
}

export const toDOM = ({ node, schema, doc }: FromNodeParams): DocumentFragment => {
  const fragment = isDocNode(node, schema) ? node.content : Fragment.from(node);
  return DOMSerializer.fromSchema(schema).serializeFragment(fragment, { document: doc });
};

export function createHistoryEntry(prevState, editorState) {
  const serializer = DOMSerializer.fromSchema(editorState.schema);
  const selection = editorState.selection;
  const domFragment = serializer.serializeFragment(selection.content().content);

  let selectionContent = [];
  if (domFragment) {
    let child = domFragment.firstChild;
    while (child) {
      selectionContent.push(child.outerHTML);
      child = child.nextSibling;
    }
  }

  return {
    state: editorState,
    timestamp: Date.now(),
    diff:

getHTML() {
			const div = document.createElement('div')
			const fragment = DOMSerializer
				.fromSchema(this.schema)
				.serializeFragment(this.state.doc.content)

			div.appendChild(fragment)

			return div.innerHTML
		},