Integrate prosemirror-math plugin.

[HT-Moh]

Discussed in https://github.com/outline/rich-markdown-editor/discussions/498

^{Originally posted by **HT-Moh** July 20, 2021} Hi how can I add the https://github.com/benrbray/prosemirror-math plugin to rich-markdown-editor according to the documentation I need a object to extension props ``` export default class Extension { options: Record; editor: Editor; constructor(options?: Record); bindEditor(editor: Editor): void; get type(): string; get name(): string; get plugins(): Plugin[]; keys(options: any): {}; inputRules(options: any): InputRule[]; commands(options: any): Record | Command; get defaultOptions(): {}; } ``` but I am not sure how can I create this object using `prosemirror-math` it there any example of how to use extension prop or better an example? Thanks

[HT-Moh]

Trying this

import { undo, redo } from 'prosemirror-history';
import { undoInputRule } from 'prosemirror-inputrules';
import {
  makeInlineMathInputRule,
  makeBlockMathInputRule,
  REGEX_INLINE_MATH_DOLLARS_ESCAPED,
  REGEX_BLOCK_MATH_DOLLARS,
  mathPlugin,
  mathBackspaceCmd,
  mathSelectPlugin,
} from '@benrbray/prosemirror-math';
import { Keymap, chainCommands } from 'prosemirror-commands';

import { Extension } from 'rich-markdown-editor';
import { DOMOutputSpec } from 'prosemirror-model';

export default class ProsemirrorMath extends Extension {
  // eslint-disable-next-line class-methods-use-this
  get name() {
    return 'prosemirror_math';
  }

  // eslint-disable-next-line class-methods-use-this
  // get schema() {
  //   return {
  //     group: 'inline math',
  //     content: 'text*', // important!
  //     inline: true, // important!
  //     atom: true, // important!
  //     toDOM: () => ['prosemirror_math', { class: 'math-node' }, 0],
  //     parseDOM: [
  //       {
  //         tag: 'prosemirror_math', // important!
  //       },
  //     ],
  //   };
  // }

  // eslint-disable-next-line class-methods-use-this
  get defaultOptions() {
    return {
      node: 'paragraph',
      notAfter: ['paragraph', 'heading'],
    };
  }

  // eslint-disable-next-line class-methods-use-this
  keys() {
    return {
      'Mod-z': undo,
      'Mod-y': redo,
      'Shift-Mod-z': redo,
      Backspace: chainCommands(mathBackspaceCmd, undoInputRule),
    };
  }

  // eslint-disable-next-line class-methods-use-this
  get plugins() {
    return [mathPlugin, mathSelectPlugin];
  }

  // eslint-disable-next-line class-methods-use-this
  get inputRules() {
    return [
      makeInlineMathInputRule(
        REGEX_INLINE_MATH_DOLLARS_ESCAPED,
        (() => {
          const type = this.editor.schema.nodes[this.name];
          if (type === undefined) {
            throw new Error(
              `error retrieving node type for extension ${this.name}`
            );
          }
          return type;
        })()
      ),
    ];
  }
}
`
I assume I need to add a node to the schema but I am not sure how.

_Originally posted by @HT-Moh in https://github.com/outline/rich-markdown-editor/discussions/498#discussioncomment-1025809_

[tommoor]

Hi, there is already a PR for this functionality – you can use it as a base or complete the PR if you like, I haven't had time to work on it:

https://github.com/outline/rich-markdown-editor/pull/434

[HT-Moh]

Hi, thanks I went through PR, but I am wondering if there a way to attach extension to the Editor without changing the library? What it's the use of the extension prop?,can be used to add this plugin?

[tommoor]

Yes, you could do the same thing but pass the extension into the editor with the extensions prop instead of hardcoding it in index.tsx

Going to close this issue as it's already covered by this one: https://github.com/outline/outline/issues/1038 – feel free to reply though

[HT-Moh]

Yes, you could do the same thing but pass the extension into the editor with the extensions prop instead of hardcoding it in index.tsx

Going to close this issue as it's already covered by this one: outline/outline#1038 – feel free to reply though

Yes, on the editor I am passing ProsemirrorMath to the extensions props already, but actually my problem is the node. How do I create a node and add it to the class ProsemirrorMath?

[tommoor]

Ah, I understand now. There isn't currently a way to register new markdown parsers from outside of the library – you'd have to either:

• fork the library
• contribute to that existing PR
• add the ability to register markdown parsers from the extensions class