Can preset-commonmark and preset-gfm be used together?

[sytolk]

How can I have custom component for node using preset-gfm instead of preset-commonmark? Maybe documentation its need to be changed here: https://github.com/Saul-Mirone/milkdown/blob/main/gh-pages/pages/integrations/react/index.md#custom-component-for-node

Discussed in https://github.com/Saul-Mirone/milkdown/discussions/410

^{Originally posted by **KevynTang** March 5, 2022} I used to think the `preset-commonmark` and `preset-gfm` are complement to each other, I use both of them before. But after trying upgrading them from `5.3.0` to `5.5.0`, I got this error: ``` RangeError: Adding different instances of a keyed plugin (MILKDOWN_PLUGIN_ID$) at state.js:50:15 at Array.forEach () at new Configuration2 (state.js:48:26) at Function.create3 [as create] (state.js:184:19) at editor-state.ts:65:35 at async Promise.all (index 54) at async _Editor.create (editor.ts:86:35) ``` So now I have to choose to keep `preset-commonmark` **or** `preset-gfm`, I wonder is it not a bug? Is that mean the two plugins are confilct to each other?

[sytolk]

After update to v.5.5.0 I have TypeScript error here:

TypeScript error in /Users/sytolk/IdeaProjects/tagspaces/extensions/md-editor/src/MilkdownEditor.tsx(134,36):
Type '() => (ctx: Ctx) => ViewFactory' is not assignable to type '(ctx: Ctx) => ViewFactory'.
  Type '(ctx: Ctx) => ViewFactory' is not assignable to type 'ViewFactory'.
    Types of parameters 'ctx' and 'atom' are incompatible.
      Type 'ProsemirrorNode<any> | Mark<any>' is not assignable to type 'Ctx'.
        Type 'ProsemirrorNode<any>' is missing the following properties from type 'Ctx': #private, use, useByName, get, and 6 more.  TS2322

    132 |         const nodes = commonmark
    133 |           // .configure(paragraph, { view: renderReact(TSParagraph) })
  > 134 |           .configure(link, { view: () => renderReact(TSLink) })
        |                                    ^
    135 |           .configure(image, { view: () => renderReact(TSImage) });
    136 |         return createEditor(
    137 |           root,

source code

  const editor = useEditor(
      (root, renderReact) => {
        const nodes = commonmark
          // .configure(paragraph, { view: renderReact(TSParagraph) })
          .configure(link, { view: () => renderReact(TSLink) })
          .configure(image, { view: () => renderReact(TSImage) });
        return createEditor(
          root,
          md,
          readOnly,
          setEditorReady,
          nodes,
          onChange
        );
      },
      [readOnly, md, onChange]
    );

[sytolk]

If I comment my custom nodes nevermind included from @milkdown/preset-gfm or @milkdown/commonmark

import { commonmark, image, link } from '@milkdown/preset-gfm';

//.configure(link, { view: () => renderReact(TSLink) })
//.configure(image, { view: () => renderReact(TSImage) });

I have the same error in Discussion RangeError: Adding different instances of a keyed plugin (MILKDOWN_PLUGIN_ID$)

btw preset-gfm have peer dependency preset-commonmark

"node_modules/@milkdown/preset-gfm": {
      "version": "5.5.0",
      "peerDependencies": {
        "@milkdown/core": "^5.4.0",
        "@milkdown/preset-commonmark": "^5.4.0",
        "@milkdown/prose": "^5.4.0"
      }
    },

[Saul-Mirone]

You can view the examples here: https://github.com/Saul-Mirone/milkdown/tree/main/examples/react

Could you please provide source code of the createEditor function?

[sytolk]

React example have dependency to @milkdown/preset-commonmark only https://github.com/Saul-Mirone/milkdown/blob/main/examples/react/package.json#L15 The error RangeError: Adding different instances of a keyed plugin (MILKDOWN_PLUGIN_ID$) appears after adding @milkdown/preset-gfm

This is my createEditor function: https://github.com/tagspaces/tagspaces-extensions/blob/main/md-editor/src/editor.ts#L33

It works with milkdown v.5.1.1 the error appears with milkdown v.5.5.0 https://github.com/tagspaces/tagspaces-extensions/blob/main/md-editor/package.json#L44

[sytolk]

The error appears after adding .use(commonmark) or .use(gfm) in editor: https://github.com/tagspaces/tagspaces-extensions/blob/main/md-editor/src/editor.ts#L49

[Saul-Mirone]

You should remove .use(commonmark). The commonmark.configure(...) will return a configured commonmark node list so you're repeating import them

[sytolk]

Yes it works now but I need to remove .use(gfm) too..

[sytolk]

@Saul-Mirone the question is: can I have gfm support in milkdown like this: https://github.com/Saul-Mirone/milkdown/tree/main/packages/preset-gfm#example-usage

with custom style: https://github.com/Saul-Mirone/milkdown/tree/main/packages/preset-gfm#custom-style

in custom style example .use(gfm) is missing

[Saul-Mirone]

You can have custom style for gfm just same as commonmark.

And, gfm is a super set of commonmark, so what you need is const nodes = gfm.configure(...), and just use(nodes), you don't need to reuse commonmark or gfm after that, because nodes is a extended gfm list and it already includes commonmark.