Mark down shortcuts for ``` does not work

[THPubs]

Hi,

For me, the code block does not get activated when I type ```js. Here's what's hapenning:

Screen.Recording.2024-01-09.at.10.10.26.PM.mov

Here's my code:

    <MDXEditor
      plugins={[
        headingsPlugin(),
        listsPlugin(),
        quotePlugin(),
        thematicBreakPlugin(),
        markdownShortcutPlugin(),
        linkPlugin(),
        codeBlockPlugin({ defaultCodeBlockLanguage: 'js' }),
        codeMirrorPlugin({
          codeBlockLanguages: { js: 'JavaScript', css: 'CSS', html: 'HTML' },
        }),
        tablePlugin({
          defaultColCount: 1,
          defaultRowCount: 1,
        }),
        toolbarPlugin({
          toolbarContents: () => (
            <>
              {' '}
              <UndoRedo />
              <BoldItalicUnderlineToggles />
              <InsertTable />
              <ConditionalContents
                options={[
                  {
                    when: (editor) => editor?.editorType === 'codeblock',
                    contents: () => <ChangeCodeMirrorLanguage />,
                  },
                  {
                    fallback: () => <InsertCodeBlock />,
                  },
                ]}
              />
            </>
          ),
        }),
      ]}
      {...props}
      ref={editorRef}
    />

This is a NextJS 14 project which use Typescript. To make things easier, I created a minimal reproduction of the issue: https://stackblitz.com/edit/nextjs-zmybjf?file=app%2Fglobals.css

[petyosi]

The markdown shortcut plugin enables certain features based on the active plugins it detects when it is initialized. I think it will work if you move it to the bottom of the plugin list. Let me know if this works for you (need to put it in the docs), it works fine in the live demo.

[THPubs]

Thanks a lot @petyosi ! It worked! That was the issue. When I moved the markdown shortcut plugin to the bottom, everything worked.

By the way, awesome plugin you have built here! I tried many editors yesterday before picking this up. This is the only plugin which was straightforward and easy to use.

[lucas-vitrus]

Hi,
I still haven't got that working, even after moving the shortcut plugin to the end.

return (
    <div style={{ width: "100%", textAlign: "left", padding: "12px" }}>
      <MDXEditor
        className={state.darkTheme ? "dark-theme dark-editor" : "light-theme"}
        ref={ref}
        markdown="# Instruction "
        plugins={[
          headingsPlugin(),
          codeBlockPlugin({
            defaultCodeBlockLanguage: "js",
          }),
          listsPlugin(),
          codeMirrorPlugin({
            codeBlockLanguages: { js: "JavaScript" },
          }),
          toolbarPlugin({
            toolbarContents: () => (
              <>
                <InsertCodeBlock />
              </>
            ),
          }),
          markdownShortcutPlugin(),
        ]}
      />
    </div>
  );
};

[petyosi]

@lucas-vitrus it works as expected here? https://codesandbox.io/p/sandbox/dark-voice-mxgxcp. you need to type three backticks, js, and then press space.

[gopal-virtual]

it breaks if you don't specify any language. It doesn't default to defaultCodeBlockLanguage.

[dogmatic69]

I have the same issue, triple backticks with no language is valid markdown, but errors if I use that even with the default.

Parsing of the following markdown structure failed: {"type":"code","name":"N/A"}.

You can fix the errors in source mode and switch to rich text mode when you are ready.

[lucas-vitrus]

Thank you @petyosi ! It was the space missing. It makes sense to use space for making sure the code id is ended.
Yet, having the capability of typing ```js [enter] as well would be interesting (low priority for sure ;) )

My current working component for future reference:

<MDXEditor
          className="dark-theme dark-editor"
          ref={ref}
          markdown={props.markdown as string}
          onChange={(markdown: string) => {
            props.onChangeMarkdown(markdown);
          }}
          plugins={[
            headingsPlugin(),
            codeBlockPlugin({
              defaultCodeBlockLanguage: "js",
            }),
            listsPlugin(),
            codeMirrorPlugin({
              codeBlockLanguages: {
                js: "JavaScript",
                css: "CSS",
                txt: "text",
                tsx: "TypeScript",
                ts: "TypeScript",
              },
            }),
            markdownShortcutPlugin(),
          ]}
        />

[MichaelCharles]

I think entering a code block after pressing enter is pretty standard for markdown editors. Look at anything such as Typora or Bear. I would greatly appreciate if you could add that functionality, or at least make it something we could toggle on.

I'd also like the ability to add a more... simple code block? For my needs I don't need syntax highlighting or language setting. However if I try to initialize this without a language it errors out.

Thanks. This is an awesome library.

[patrickbeck1337]

Can you please add a proper documentation for the plugin registration of code blocks. It is not clear in the docs that a codeBlockLanguages needs to be registered to make the codeBlockPlugin work in general.

Instead of starting with the sandpack implementation an example like:

...
    codeBlockPlugin(),
    codeMirrorPlugin({
      autoLoadLanguageSupport: true,
      codeBlockLanguages: {
        "js": "Javascript",
      },
    }),
...