MDXEditor v2 is here! Here's how you can upgrade

[petyosi]

MDXEditor has a new major version with several breaking changes and dependency upgrades. The public API has not changed much, though - unless you have written custom plugins, you might not be affected by it.

If you're upgrading from v1, read the upgrade summary in the docs, and if something does not work, post a comment here with a runnable reproduction.

[Haschtl]

Thanks for the update!

I think the docs need some update, e.g. the docs for directives:
const insertDirective = directivesPluginHooks.usePublisher('insertDirective') doesn't work anymore, because the hooks are not exported (at least I couldn't find it)

My solution now is this:

import {
    insertDirective$,
    usePublisher
} from '@mdxeditor/editor';

const MyComponent = () => {
   const insertDirective = usePublisher(insertDirective$)
   ...
}

[petyosi]

@Haschtl - thanks! pushed a commit that fixes the docs. The plugin specific hooks are no longer necessary, you can just use the gurx ones.

[jdross]

really nice work! Excited to play with the plugins at some point, just a basic user for now

[Erns]

FYI, for anyone that is attempting to run unit tests locally via Vitest, I had to make this adjustment in my vitest.config.ts file to get the tests to work:

export default defineConfig({
	plugins: [react()],
	test: {
		...
		server: {
			deps: {
				inline: ["@mdxeditor/editor", "@mdxeditor/gurx"],
			},
		},
	},
});

[zasuh]

Where can I find the useEmitterValues hook now?

[petyosi]

Where can I find the useEmitterValues hook now?

It's called useCellValues.

[zasuh]

Specifically asking because I am disabling the underline keyboard shortcut in my editor. How can I access rootEditor using useCellValues?

const BoldItalicToggles = () => {
  const [theLexicalEditor] = useCellValues('rootEditor');

  useEffect(
    () =>
      theLexicalEditor?.registerCommand(
        FORMAT_TEXT_COMMAND,
        (payload) => {
          if (payload === 'underline') {
            return true;
          }
          return false;
        },
        COMMAND_PRIORITY_CRITICAL,
      ),
    [theLexicalEditor],
  );

  return (
    <>
      <UndoRedo />
      <BoldItalicUnderlineToggles />
    </>
  );
};

[petyosi]

The new hooks accept cell and signal references instead of strings. In your case, you can import rootEditor$ from the package and do something like this useCellValues(rootEditor$).

There's also the singular variant, which is a bit faster - useCellValue.

[zasuh]

@petyosi I'm using Next.js with pages router, on GH Actions when trying to build the app I get the following errors:

[petyosi]

@petyosi I'm using Next.js with pages router, on GH Actions when trying to build the app I get the following errors:

Sorry, none of that looks familiar. Can you replicate in a sandbox?

[rajsonietraveli]

FYI, for anyone that is attempting to run unit tests locally via Vitest, I had to make this adjustment in my vitest.config.ts file to get the tests to work:

export default defineConfig({
plugins: [react()],
test: {
...
server: {
deps: {
inline: ["@mdxeditor/editor", "@mdxeditor/gurx"],
},
},
},
});

I tried to add this in my vite.config.ts file but got the error of

Error: require() of ES Module /Users/projects/node_modules/@mdxeditor/editor/dist/index.js from /Users/projects/temp/packages/components/dist/index.cjs not supported.

Any way to bypass this? @Erns