Hey and thanks for the awesome library. Really blown away by how well it works out of the box!

I tested it with a few of my blog posts and I noticed 2 things that could be improved for the JSX components integration.

1. A toolbar button to add a new component (e.g. a dropdown that shows you all the components you configured via jsxComponentDescriptors)
2. If the component has nested text as children, make the hierarchy visible in the editor (e.g. by nesting the text or adding a background).

An example for the 2nd issue:

I have this component in Markdown:

<Callout>
  The principles are applicable to all areas of programming, even though the
  title says ‘frontend developers’ specifically.
</Callout>

and it resolves correctly in the editor. But you can't tell whether or not the text belongs to the Callout editor.

There is an issue with inserting images. After adding an image URL, you can insert the image by pressing Enter or Return. However, the blue button does not work.

Just found out about this. Is there a way for me to add a custom remark plugin that would process the markdown before rendering?

Hi, I came across a bug when using MDXEditor in a client component in NextJS that only appears in the production environment. When I put MDXEditor in a client component and used that client component in a server component, the following error shows up on the screen.

It's accompanied by errors in the console of the browser as well.

I was able to reproduce the error with a new and empty NextJS app created using create-next-app with the only changes being installing mdx-editor and adding a NextJS client component with MDXEditor and using the client component in a server component like below.

"use client";
import { MDXEditor } from "@mdxeditor/editor";

export default function Editor() {
  return <MDXEditor markdown="Hello world" />;
}

The error only appears in the production environment (visible in both in vercel when deployed and when previewing locally with next dev and next start.

I'm using

• @mdxeditor/editor 0.4.1
• react 18.2.0
• next 13.4.8

Do you know which options to view the markdown in read mode ?

This is probably due to the editor losing focus.

To reproduce, select cell contents, and press the inline code button.

When selecting all text in the editor using a keyboard shortcut (Ctrl / Cmd + A) and then trying to delete it using e.g. Backspace or Del does not delete all text.

Steps to reproduce

• Open https://mdxeditor.dev/editor/demo
• delete all text (for some reason, it works initially)
• type in a some text (the issue is especially prominent in long lines of text without linebreaks/paragraphs)
• select all text using Ctrl / Cmd + A
• try deleting the text with Backspace / Del

Current behaviour

Some text remains in the editor after trying to delete it

Expected behaviour

All text is deleted

In my testing, this occurs in the latest versions of Chrome and Firefox (macOS), however not in Safari.
Also, when selecting all text using the cursor, deleting works properly.

I'm having some issues trying to set-up the editor on Next.js. Whenever I try to add headingsPlugin() as a parameter I get the following error:

ReferenceError: crypto is not defined

I followed the docs related to typescript/nextjs but with no luck.

Here's my sample component:

import React from 'react';

import dynamic from 'next/dynamic';
import '@mdxeditor/editor/style.css';
import {headingsPlugin} from '@mdxeditor/editor';

const MDXEditor = dynamic(
	() => import('@mdxeditor/editor').then((mod) => mod.MDXEditor),
	{ssr: false}
);

interface Props {}
export const MarkdownEditor = (props: Props) => {
	return <MDXEditor markdown=' Hello world' plugins={[headingsPlugin()]} />;
};

Thanks for the great new library! I'm trying it out and finding that it produces a very large bundle size (3.6 MB in dev, ~2 MB in prod build using Rollup via Vite), even though I've only passed a few toolbar components to MDXEditor.

It looks like it's because ToolbarComponents is a single exported object, which seems to prevent tree-shaking and causes all components to get included in the build. Or am I missing a simple solution?

I'm looking to use this for a simple commenting box, so I'd definitely like to excluded the unneeded FrontMatterEditor, TableEditor, etc. code and their dependencies like CodeMirror and Acorn.js.

Do you think it makes sense to export the components individually? E.g. export { BoldItalicUnderlineButtons, LinkButton, ... };

Hey all,

Not sure if anyone else has run into this but with the newest version of CRA im getting the following error while loading the MDXEditor component.

There were also many warnings about missing mappings for react-diff-view package but you can safely ignore those.

Looks like the mdast package is not resolving the header. I am using mdast-util-from-markdown and mdast-util-gfm-table within my application for creating my own custom markdown viewer for a separate part of the application.

no MdastImportVisitor found for heading {"type":"heading","depth":1,"children":[{"type":"text","value":"Hello world","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":14,"offset":13}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":14,"offset":13}}}
    at visit (http://localhost:3000/static/js/bundle.js:125781:13)
    at http://localhost:3000/static/js/bundle.js:125771:41
    at Array.forEach (<anonymous>)
    at Object.visitChildren (http://localhost:3000/static/js/bundle.js:125771:24)
    at Object.visitNode (http://localhost:3000/static/js/bundle.js:126172:13)
    at visit (http://localhost:3000/static/js/bundle.js:125785:13)
    at importMdastTreeToLexical (http://localhost:3000/static/js/bundle.js:125810:3)
    at importMarkdownToLexical (http://localhost:3000/static/js/bundle.js:125755:3)
    at http://localhost:3000/static/js/bundle.js:126414:89
    at http://localhost:3000/static/js/bundle.js:12208:15

ERROR
no MdastImportVisitor found for heading {"type":"heading","depth":1,"children":[{"type":"text","value":"Hello world","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":14,"offset":13}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":14,"offset":13}}}
    at visit (http://localhost:3000/static/js/bundle.js:125781:13)
    at http://localhost:3000/static/js/bundle.js:125771:41
    at Array.forEach (<anonymous>)
    at Object.visitChildren (http://localhost:3000/static/js/bundle.js:125771:24)
    at Object.visitNode (http://localhost:3000/static/js/bundle.js:126172:13)
    at visit (http://localhost:3000/static/js/bundle.js:125785:13)
    at importMdastTreeToLexical (http://localhost:3000/static/js/bundle.js:125810:3)
    at importMarkdownToLexical (http://localhost:3000/static/js/bundle.js:125755:3)
    at http://localhost:3000/static/js/bundle.js:126414:89
    at http://localhost:3000/static/js/bundle.js:12208:15

ERROR
no MdastImportVisitor found for heading {"type":"heading","depth":1,"children":[{"type":"text","value":"Hello world","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":14,"offset":13}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":14,"offset":13}}}
    at visit (http://localhost:3000/static/js/bundle.js:125781:13)
    at http://localhost:3000/static/js/bundle.js:125771:41
    at Array.forEach (<anonymous>)
    at Object.visitChildren (http://localhost:3000/static/js/bundle.js:125771:24)
    at Object.visitNode (http://localhost:3000/static/js/bundle.js:126172:13)
    at visit (http://localhost:3000/static/js/bundle.js:125785:13)
    at importMdastTreeToLexical (http://localhost:3000/static/js/bundle.js:125810:3)
    at importMarkdownToLexical (http://localhost:3000/static/js/bundle.js:125755:3)
    at http://localhost:3000/static/js/bundle.js:126414:89
    at http://localhost:3000/static/js/bundle.js:12208:15

Thanks for the great MDX editor, Kudos to you!!

I was using the following setting codeBlockLanguages={{"java": "Java"}}, however the markdown editor still shows the default language select.

'use client';

import { MDXEditor } from '@/components/editor';

export default function EditorPage() {
  return (
    <>
      <div className="bg-white dark:bg-gray-900 min-h-screen">
        <div className="container mx-auto max-w-5xl px-0 md:px-4 my-4 md:my-8">
          <MDXEditor markdown="Hello **world**!" contentEditableClassName="prose max-w-none" codeBlockLanguages={{"java": "Java"}}/>
        </div>
      </div>
    </>
  );
}

What am I missing, I was using the latest version of MDXEditor, which was 0.9.0 now.

"@mdxeditor/editor": "^0.9.0",

Being able to functionally toggle focus on the input would be great.

This is more of a proposal. Could you add the source code for the docs into this repo? Firstly so we can contribute to the docs along with the package itself, but also for us to easily test changes in the package live.
Currently in order to test the package, I have to either spin up or clone the boilerplate for package usage, and manually link it in the package.json. We could kill two birds with one stone and have the docs double as a testing area for development on the package.

Hi, first of all, thanks for much for this repo, it's amazing! I tried using MDXEditor in my React project but couldn't figure out a way to style it. This is what it looks like when imported.

I'm using

• NextJS 13.4.8
• React 18.2.0
• tailwindcss 3.2.4
• mdx-editor 0.3.0

I'm using MDXEditor inside a client component in NextJS. This is how I'm setting it up:

<div>
  <MDXEditor
    markdown={markdown}
    onChange={(markdown) => {
      setMarkdown(markdown);
    }}
  />
</div>

Hi, really appreciate for your work so far, I have tried cloning from your Nextjs example repo and run it. And it seems that Rich Text mode doesn't render markdown correctly


From the image above you can see that the size of text "hello world" should be rendered as Header1, however it still was rendered as normal text. Additionally, bulleted list and numbered list are also not working in rich text mode but bolding, underlining and italic work fine.

To replicate the issue:

• clone this repo
• npm i
• npm run dev
• go to localhost:3000 and see how the "hello world" text is rendered

So far, I've tried different version of both nextjs (version 13.4.12 and 13.4.4) and @mdxeditor/editor(version 0.6.1 and 0.10.1) and different local computer (Macbook M2 Pro and Macbook M2 Air). Still, it yields the same result.

Am I missing any configuration for rendering markdown properly in Rich text mode ?
Or is it only happening on my local computer only ?

It would be nice to have access to the onBlur of internal input field.

When I hit cmd-a I expected to select all text in the editor. Instead, it just flasheed and lost my cursor position

Continuing the discussion from #10:

• Improve lazy loading of components that pull large external dependencies (CodeMirror, Sandpack)
• Make JSX handling optional (use dynamic import), a property like disableMdx, this would avoid Acorn
• Work around the @lexical/code reference, this will eliminate prism.
• See if markdown rendering in the TableEditor can be avoided, this will shave off the hast family of dependencies

Given the following sandpackConfig

const sandpackConfig = {
  defaultPreset: "default",
  presets: [
    {
      name: "default",
      meta: "live",
      label: "TypeScript",
      sandpackTemplate: "vanilla-ts",
      sandpackTheme: "light",
      snippetFileName: "/index.ts",
      snippetLanguage: "ts",
      initialSnippetContent: [
        'import "./styles.css";',
        'document.getElementById("app").innerHTML = `<h1>Hello world</h1>`;',
      ].join("\n"),
    },
  ],
  panes: {
    console: true,
    preview: false,
  },
};

I guess the need for the solution where we pass down the Sandpack Panels as components instead of just flags is surfacing, as this setting is something we'd have to change on the SandpackCodeEditor by adding showRunButton prop.

When pressing the key Ctrl, the LinkDialog shows up. I guess it is related to the following:

PS: The shortcuts don't work

What a great editor! Congratulation to for this great software.

Is checkbox support planed? Something that:

• test
• test2

Hello. It seems that deleting the last row of a table explicitly (instead of using the button to delete the whole table) creates an issue
TypeError: Cannot read properties of undefined (reading 'children')

To elaborate, clicking the highlighted delete button causes this issue:

Here is a screenshot of the console when I press that button:

I am using Next.js 12 (pages router). I added the editor and was able to make the text bold using CMD+B. I then added the BoldItalicUnderlineToggles to the toolbar. Now when I make something bold (using the shortcut or the toolbar button) my page freezes. Here is my code:

Page file:

const SomeTemplate = dynamic(() => import("../app/components/templates/SomeTemplate/SomeTemplate"), {
  ssr: false
})

const Editor = dynamic(() => import("../app/components/organisms/Editor/Editor"), {
  ssr: false
})

function EditorPage() {
  const {user, loading} = useUser({redirectTo: "/"})

  if (loading || !user?.isLoggedIn)
    return <Spinner />

  return (
    <SomeTemplate>
      <Editor />
    </SomeTemplate>
  )
}

export default EditorPage

The Editor file:

import '@mdxeditor/editor/style.css'
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { UndoRedo } from '@mdxeditor/editor/plugins/toolbar/components/UndoRedo'
import { BoldItalicUnderlineToggles } from '@mdxeditor/editor/plugins/toolbar/components/BoldItalicUnderlineToggles'
import { toolbarPlugin } from '@mdxeditor/editor/plugins/toolbar'

interface EditorProps {}

const Editor = ({}: EditorProps) => {
  return (
    <MDXEditor 
      markdown='Hello world'
      plugins={[toolbarPlugin({
        toolbarContents: () => ( <><UndoRedo /><BoldItalicUnderlineToggles /></>)
      })]}
    />
  );
};

export default Editor;

Is there something I am missing? I don't have any controlled logic to lead to an infinite loop. Why is adding BoldItalicUnderlineToggles breaks the working functionality?

I’m having some issues though with the display of dialogs when my MDXEditor is already inside a React component.

In the example shown below, when the user clicks the toolbar 'Link' button, the create link dialog is not shown, or is perhaps shown underneath the existing dialog.

import {  Dialog,  DialogContent,  DialogTitle } from "@mui/material";


      <Dialog>
        <DialogTitle>My Dialog</DialogTitle>
        <DialogContent 
            <MDXEditor
            plugins={[
                linkPlugin(),
                linkDialogPlugin({linkAutocompleteSuggestions: []}),

                toolbarPlugin({
                toolbarContents: () => (
                    <>
                    {" "}
                    <CreateLink />
                    </>
                )
                })
            ]}
            />

        </DialogContent>
      </Dialog>

I want to make a strikethrough button, but I can't. Because sources, as I found in the repo, don't provide these functions, etc.

And only one option is what I have, which is to fork and append it, but I don't want to.

Maybe you can provide any examples or improve the documentation about it?

Thanks.

If I highlight some text in the live demo, and then change the paragraph style. e.g. place my cursor/focus in a bit of "Heading 1" text and then click into the paragraph dropdown and change the style to another paragraph style, say "Caution" and then realize I didn't want to do that and hit undo (cmd+z) nothing happens. I must first click back into the editor text, and then I can cmd+z back from "Caution" to "Heading 1"

Let users drag and drop images or files, upload them and insert a link / or image.

This will need some backend handling to be processed correctly.

• Support multiple images being dropped
• Support multiple images being pasted
• Help article in the site for the backend support.

When I use cmd+A to select all characters then hit the backspace key, it doesn't delete all characters. If I then repeat this, it deletes 3 characters at a time.

Interestingly, it works fine in the following scenarios:

• if I right click and choose 'select all' from the dropdown, then press backspace
• when starting from a blank input, typing in the text and then pressing cmd + A then backspace

This is only an issue in my setup, not the live demo on mdxeditor.dev. Interestingly, it also works

I'm using v0.20.0 and am handling the markdown via a Redux state property (and passing a Redux action as the onChange handler). I've also tried only using setMarkdown/getMarkdown or only using the value and onChange props - the issue remains:

<div
  onFocus={handleFocus}
  onBlur={handleBlur}
>
  <MDXEditor
    ref={ref}
    markdown={value}
    styleName='markdown-input'
    onChange={onChangeValue}
    placeholder={placeholder}
    plugins={[
      listsPlugin(),
      toolbarPlugin({
        toolbarContents: () => (
          <>
            <BoldItalicUnderlineToggles />
            <ListsToggle />
          </>
        ),
      }),
    ]}
  />
</div>

Thanks for the help (and for building such an awesome library 🎉 )

Hi,
I've recently switched to react from angular and I'm giving this library a try and it is showing me this error no matter what I do. Can you help me with this?
Thanks

Even though it might be tricky, it would be great to support objects in frontmatter.

I have a few files that have the following frontmatter shape:

---
title: 3 Tips To Write Better Code As A Beginner Frontend Developer
category: 'Engineering'
cover:
  src: '/images/posts/3-tips-to-write-better-code-as-junior-developer/alex-kotliarskyi-ourQHRTE2IM-unsplash.jpg'
  alt: 'A person sitting in front of a laptop'
  caption: 'Photo by <a href="https://unsplash.com/@frantic">Alex Kotliarskyi</a> on Unsplash'
publishedAt: '2023/04/04'
---

The cover property gets resolved to [object Object] though.

Hello,
Thank you for developing great software.

I'm currently use mdx-editor to preview the markdown contents.
But I can not preview my custom components such as Heading, List components.

I would like to show my custom Heading on RitchText mode like below.

<MDXEditor
    components={
      h1: ({ children }) => <H1>{children}</H1>,
      h2: ({ children }) => <H2>{children}</H2>,
      ...
    }
/>

This similars to ReactMarkdown's syntax.

Is it possible to do something like this?

or...

<MDXEditor
    editorRef={ref}
    diffSourcePlugin({ viewMode: 'source' }),
/>

In this case, ref.current.?.getMarkdown() ?? '' returns always empty string.
viewMode: source is nice, but getMarkdown doesn't work.
I can preview by using other system like the ReactMarkdown If I can get markdown content.

If either of these is possible, my problem could be solved.

Thanks,

Hello,

I'm trying to set up the MDXEditor with useRef as shown in the "Basic usage" step in the docs section, but React throws warning in the console that app-index.js:31 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I've tried to wrap the MDXEditor in a forwardRef() but that doesn't seem to resolve the issue.

When I click the "Get markdown" button, it returns undefined in the console.

Code:

"use client";

import React, { forwardRef } from "react";
import "@mdxeditor/editor/style.css";
import dynamic from "next/dynamic";
import { headingsPlugin } from '@mdxeditor/editor/plugins/headings'
import { listsPlugin } from '@mdxeditor/editor/plugins/lists'
import { quotePlugin } from '@mdxeditor/editor/plugins/quote'
import { thematicBreakPlugin } from '@mdxeditor/editor/plugins/thematic-break'
import { UndoRedo } from '@mdxeditor/editor/plugins/toolbar/components/UndoRedo'
import { BoldItalicUnderlineToggles } from '@mdxeditor/editor/plugins/toolbar/components/BoldItalicUnderlineToggles'
import { toolbarPlugin } from '@mdxeditor/editor/plugins/toolbar'
import { MDXEditorMethods, MDXEditorProps } from "@mdxeditor/editor";

const DynamicMDXEditor = dynamic(
    () => import('@mdxeditor/editor').then((mod) => mod.MDXEditor), 
    { ssr: false }
)

const MDXEditor = forwardRef<MDXEditorMethods, MDXEditorProps>((props, ref) => {
    return <DynamicMDXEditor ref={ref} {...props} />;
});
  
export default function Editor() {
    const ref = React.useRef<MDXEditorMethods>(null)
    
    return (
        <>
            <button className="btn btn-primary" onClick={() => ref.current?.setMarkdown('new markdown')}>Set new markdown</button>
            <button className="btn btn-primary" onClick={() => console.log(ref.current?.getMarkdown())}>Get markdown</button>
            <MDXEditor 
                ref={ref}
                markdown='hello world'
                onChange={console.log}
                plugins={[
                    headingsPlugin(), 
                    listsPlugin(), 
                    quotePlugin(), 
                    thematicBreakPlugin(),
                    toolbarPlugin({
                        toolbarContents: () => (
                            <>
                                <UndoRedo />
                                <BoldItalicUnderlineToggles />
                            </>
                        )
                    })
                ]}
            />
        </>
    )
}

Appreciate any help and guidance on this. Cheers

hello we tried to find a solution to make it compatible
with vitejs and vite-plugin-ssr but nothing is working can anyone help us?

vikejs/vike#1084

Manpulating an image right now is hard, so people need to be extra careful where to insert it. The lexical playground features a reference implementation of an Image component.

Unlike the other formatting options in BoldItalicUnderlineToggles, underline is implemented via HTML. In my case, I'm explicitly excluding HTML from markdown which requires excluding underline.

Toggling through rich text / diff mode / plain text does not keep the current mode button active.

I'm importing the editor like this:
import { MDXEditor } from '@mdxeditor/editor';
and trying to use it in my component like this:

            <MDXEditor
              ref={mdEditor}
              onChange={(markdown) => {
                console.log(markdown);
              }}
            />

if I load the page with the component there, I get this error:

Error: Cannot find module 'path/to/file/node_modules/@lexical/react/LexicalComposer' imported from path/to/file/node_modules/@mdxeditor/editor/dist/index.js
Did you mean to import @lexical/react/LexicalComposer.js?

but if I comment it out, go to the page and uncomment it, then it works!!!

How can I fix the error?

Thanks

Version: "0.6.1"

Markdown supports directives, which are really nice ways to extend the capabilities of the content without resorting to JSX.

• Expose a property for registering custom directive editors
• Document with an example for an youtube video
• Expose enough utilities to build the right toolbar button
• Expose utilities for making a child editor for leaf directives

Using the column deletion button always removes the last column, instead of the selected column.

Can be re-produced on the demo as follows:

When I select a line of text within a block of several items in a list and toggle off lists (ordered or unordered) the entire block of lines are no longer formatted as a list.

I expect to just remove the list formatting from the single selected line.

(I found this in the live demo: https://mdxeditor.dev/editor/demo)

It is not possible to re-render the component when an internal state property changes. E.g.

import { MDXEditor } from '@mdxeditor/editor'
import { useState } from 'react'
import '@mdxeditor/editor/style.css'

export function Editor () {
  const [markdown, setMarkdown] = useState('...')
  return (
    <>
      <MDXEditor
        markdown={markdown}
        onChange={currentMarkdown => {
          if (currentMarkdown === ':emoji:') {
            setMarkdown('☺️')
          }
        }}
      />
    </>
  )
}

We are getting this console error thrown for certain existing data, which appears to be related to line breaks:

Error: no MdastImportVisitor found for break {"type":"break","position":{"start":{"line":1,"column":52,"offset":51},"end":{"line":2,"column":1,"offset":55}}}
    at Ft (importMarkdownToLexical.js:31:13)
    at importMarkdownToLexical.js:21:43
    at Array.forEach (<anonymous>)
    at At (importMarkdownToLexical.js:21:24)
    at Object.addAndStepInto (importMarkdownToLexical.js:45:13)
    at Object.visitNode (MdastParagraphVisitor.js:9:15)
    at Ft (importMarkdownToLexical.js:35:13)
    at importMarkdownToLexical.js:21:43
    at Array.forEach (<anonymous>)
    at Object.At [as visitChildren] (importMarkdownToLexical.js:21:24)
    at Object.visitNode (MdastRootVisitor.js:4:13)
    at Ft (importMarkdownToLexical.js:35:13)
    at W (importMarkdownToLexical.js:60:3)
    at ne (importMarkdownToLexical.js:13:3)
    at index.js:156:5
    at LexicalComposer.prod.js:8:445
    at Do (Lexical.prod.js:176:1)
    at $a (Lexical.prod.js:177:230)
    at wu.update (Lexical.prod.js:205:149)
    at l (LexicalComposer.prod.js:8:409)
    at LexicalComposer.prod.js:9:328
    at Object.useMemo (react-dom.production.min.js:184:189)
    at y.useMemo (react.production.min.js:25:208)
    at y.LexicalComposer (LexicalComposer.prod.js:9:72)
... stack trace continues but React-related only 

The data is coming from a Postgres database, which has the following content in a text field:

You have the right to a safe and healthy workplace!
You, your supervisors,  and the Co-op work together to make sure our spaces are safe for staff and customers.

I cannot replicate it by manually re-entering the string. Based on the error, I assume Lexical is somehow not happy with the line break, but afraid I cannot make any more progress.

Thanks for the help ❤️

I'm having issues importing tables as markdown or HTML. As markdown, it doesn't appear and as HTML, the editor crash.

I'm using pages/ in nextjs, and always getting this error, when i want to use plugins (such as heading etc.):

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\nabil\Documents\projects\fibonacciku\node_modules\@lexical\react\LexicalComposer' imported from C:\Users\nabil\Documents\projects\fibonacciku\node_modules\@mdxeditor\editor\dist\M
DXEditor.js
Did you mean to import @lexical/react/LexicalComposer.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:326:11)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  digest: undefined
}

as well:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\nabil\Documents\projects\fibonacciku\node_modules\@lexical\react\LexicalHistoryPlugin' imported from C:\Users\nabil\Documents\projects\fibonacciku\node_modules\@mdxeditor\editor\d
ist\plugins\core\index.js
Did you mean to import @lexical/react/LexicalHistoryPlugin.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:326:11)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  digest: undefined
}

I try to install lexical @lexical\react, but still get same error

My MdxEditor Component:

import "@mdxeditor/editor/style.css";
import dynamic from "next/dynamic";

export const MDXEditor = dynamic(
  // preferred way
  () => import("@mdxeditor/editor/MDXEditor").then((mod) => mod.MDXEditor),
  // legacy, larger bundle
  // () => import('@mdxeditor/editor').then((mod) => mod.MDXEditor),
  { ssr: false },
);

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      // using src directory
      "@/components/*": ["src/components/*"],
      "@/pages/*": ["src/pages/*"],
      "@/styles/*": ["src/styles/*"],
      "@/utils/*": ["src/utils/*"],
      "@/lib/*": ["src/lib/*"],
      "@/types/*": ["src/types/*"],
      "@/hooks/*": ["src/hooks/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

My Component that use MdxEditor:

import { MDXEditor } from "@/components/ui/Markdown/MdxEditor";
import { headingsPlugin } from "@mdxeditor/editor/plugins/headings";
import { listsPlugin } from "@mdxeditor/editor/plugins/lists";
import { quotePlugin } from "@mdxeditor/editor/plugins/quote";
import { thematicBreakPlugin } from "@mdxeditor/editor/plugins/thematic-break";

// other code

<MDXEditor
        markdown={data}
        className="prose bg-transparent rounded-lg"
        contentEditableClassName="prose"
        onChange={console.log}
        plugins={[
          headingsPlugin(),
          listsPlugin(),
          quotePlugin(),
          thematicBreakPlugin(),
        ]}
      />

Im not sure what is the wrong here. I did exactly like in your docs and your nextjs example

Hello, I am wondering if MDX supports LaTeX markdown for mathematics - if so I would appreciate documentation or a link to such documentation as I could not find it - if not the implemenation would not go unused.

Discussed in #50

const jsxComponentDescriptors: JsxComponentDescriptor[] = [
  {
    name: 'MyLeaf',
    kind: 'text', 

    // Leaving this undefined or null will not generate the import statement on top of the file
    source: undefined,

    props: [
      { name: 'foo', type: 'string' },
      { name: 'bar', type: 'string' }
    ],
    hasChildren: true,
    Editor: GenericJsxEditor
  },
]

It would be awesome to be able to set some rules for instance no links, no images etc... (not just in the toolbar, I mean to have some sort of validation function to enable/disable some markdown features)

Discussed in #45

Using the legacy React render mechanism freezes the editor, probably a loop in the state management.

Hi, firstly thanks for a new library.
This is a library we need. It looks very useful. I tried to import to a react project created from scratch but it doesn't work. I just apply the steps on the Getting Started for react but there were some errors related to the imported packages. Can you help me please?
Some errors are here:

'ERROR in ./node_modules/@mdxeditor/editor/dist/SandpackEditor-6510347a.js 13:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalTabIndentationPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalTabIndentationPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalTabIndentationPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SandpackEditor-6510347a.js 19:0-50
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRuleNode' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRuleNode.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRuleNode' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SandpackEditor-6510347a.js 32:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalHistoryPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHistoryPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHistoryPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SandpackEditor-6510347a.js 38:0-54
Module not found: Error: Can't resolve '@lexical/react/LexicalMarkdownShortcutPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalMarkdownShortcutPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalMarkdownShortcutPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 5:0-40
Module not found: Error: Can't resolve '@lexical/react/LexicalComposer' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposer.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 6:0-47
Module not found: Error: Can't resolve '@lexical/react/LexicalContentEditable' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalContentEditable.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalContentEditable' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 7:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalErrorBoundary' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalErrorBoundary.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalErrorBoundary' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 8:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRulePlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRulePlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRulePlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 9:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalLinkPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalLinkPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalLinkPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 10:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalListPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalListPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalListPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 11:0-46
Module not found: Error: Can't resolve '@lexical/react/LexicalRichTextPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalRichTextPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalRichTextPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 12:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalTabIndentationPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalTabIndentationPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalTabIndentationPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 18:0-50
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRuleNode' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRuleNode.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRuleNode' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 30:0-47
Module not found: Error: Can't resolve '@lexical/react/LexicalComposerContext' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposerContext.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposerContext' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 32:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalHistoryPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHistoryPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHistoryPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/SourceEditor-a95a4cc6.js 38:0-54
Module not found: Error: Can't resolve '@lexical/react/LexicalMarkdownShortcutPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalMarkdownShortcutPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalMarkdownShortcutPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 1:0-72
Module not found: Error: Can't resolve '@lexical/react/LexicalContentEditable' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalContentEditable.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalContentEditable' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 2:0-71
Module not found: Error: Can't resolve '@lexical/react/LexicalErrorBoundary' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalErrorBoundary.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalErrorBoundary' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 3:0-77
Module not found: Error: Can't resolve '@lexical/react/LexicalNestedComposer' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalNestedComposer.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalNestedComposer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 4:0-70
Module not found: Error: Can't resolve '@lexical/react/LexicalRichTextPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalRichTextPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalRichTextPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 16:0-40
Module not found: Error: Can't resolve '@lexical/react/LexicalComposer' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposer.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 17:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRulePlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRulePlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRulePlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 18:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalLinkPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalLinkPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalLinkPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 19:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalListPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalListPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalListPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 20:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalTabIndentationPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalTabIndentationPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalTabIndentationPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 24:0-50
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRuleNode' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRuleNode.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRuleNode' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 36:0-47
Module not found: Error: Can't resolve '@lexical/react/LexicalComposerContext' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposerContext.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposerContext' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 38:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalHistoryPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHistoryPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHistoryPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/TableEditor-92be617d.js 43:0-54
Module not found: Error: Can't resolve '@lexical/react/LexicalMarkdownShortcutPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalMarkdownShortcutPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalMarkdownShortcutPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 12:0-65
Module not found: Error: Can't resolve '@lexical/react/LexicalComposer' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposer.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 13:0-72
Module not found: Error: Can't resolve '@lexical/react/LexicalContentEditable' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalContentEditable.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalContentEditable' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 14:0-71
Module not found: Error: Can't resolve '@lexical/react/LexicalErrorBoundary' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalErrorBoundary.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalErrorBoundary' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 15:0-82
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRulePlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRulePlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRulePlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 16:0-62
Module not found: Error: Can't resolve '@lexical/react/LexicalLinkPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalLinkPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalLinkPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 17:0-62
Module not found: Error: Can't resolve '@lexical/react/LexicalListPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalListPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalListPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 18:0-70
Module not found: Error: Can't resolve '@lexical/react/LexicalRichTextPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalRichTextPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalRichTextPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 19:0-82
Module not found: Error: Can't resolve '@lexical/react/LexicalTabIndentationPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalTabIndentationPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalTabIndentationPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 27:0-160
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRuleNode' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRuleNode.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRuleNode' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 39:0-82
Module not found: Error: Can't resolve '@lexical/react/LexicalComposerContext' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposerContext.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposerContext' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 41:0-93
Module not found: Error: Can't resolve '@lexical/react/LexicalHistoryPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHistoryPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHistoryPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index-2fb34a7e.js 47:0-86
Module not found: Error: Can't resolve '@lexical/react/LexicalMarkdownShortcutPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalMarkdownShortcutPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalMarkdownShortcutPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 3:0-40
Module not found: Error: Can't resolve '@lexical/react/LexicalComposer' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposer.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 4:0-47
Module not found: Error: Can't resolve '@lexical/react/LexicalContentEditable' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalContentEditable.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalContentEditable' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 5:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalErrorBoundary' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalErrorBoundary.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalErrorBoundary' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 6:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRulePlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRulePlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRulePlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 7:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalLinkPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalLinkPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalLinkPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 8:0-42
Module not found: Error: Can't resolve '@lexical/react/LexicalListPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalListPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalListPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 9:0-46
Module not found: Error: Can't resolve '@lexical/react/LexicalRichTextPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalRichTextPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalRichTextPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 10:0-52
Module not found: Error: Can't resolve '@lexical/react/LexicalTabIndentationPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalTabIndentationPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalTabIndentationPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 16:0-50
Module not found: Error: Can't resolve '@lexical/react/LexicalHorizontalRuleNode' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHorizontalRuleNode.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHorizontalRuleNode' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 28:0-47
Module not found: Error: Can't resolve '@lexical/react/LexicalComposerContext' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalComposerContext.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalComposerContext' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 30:0-45
Module not found: Error: Can't resolve '@lexical/react/LexicalHistoryPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalHistoryPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalHistoryPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@mdxeditor/editor/dist/index.js 36:0-54
Module not found: Error: Can't resolve '@lexical/react/LexicalMarkdownShortcutPlugin' in '/Users/bunyamin/Documents/GitHub/blog/node_modules/@mdxeditor/editor/dist'
Did you mean 'LexicalMarkdownShortcutPlugin.js'?
BREAKING CHANGE: The request '@lexical/react/LexicalMarkdownShortcutPlugin' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 111 errors and 53 warnings`