@mdxeditor/editor 2.20.5 → 3.0.0-alpha.1

package/dist/index.d.ts

@@ -66,7 +66,6 @@ import { ReactNode } from 'react';
 import { Realm } from '@mdxeditor/gurx';
 import { RootNode } from 'lexical';
 import { SandpackProvider } from '@codesandbox/sandpack-react';
-import { SandpackThemeProp } from '@codesandbox/sandpack-react/types';
 import { SerializedElementNode } from 'lexical';
 import { SerializedLexicalNode } from 'lexical';
 import { Spread } from 'lexical';
@@ -536,8 +535,21 @@ export declare const codeBlockPlugin: (params?: {
     defaultCodeBlockLanguage?: string | undefined;
 } | undefined) => RealmPlugin;
 
+/**
+ * Whether or not to try to dynamically load the code block language support.
+ * Disable if you want to manually pass the supported languages.
+ * @group CodeMirror
+ */
+export declare const codeMirrorAutoLoadLanguageSupport$: NodeRef<boolean>;
+
 export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => React_2.JSX.Element;
 
+/**
+ * The code mirror extensions for the coemirror code block editor.
+ * @group CodeMirror
+ */
+export declare const codeMirrorExtensions$: NodeRef<Extension_2[]>;
+
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
  * @group CodeMirror
@@ -545,20 +557,17 @@ export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter
 export declare const codeMirrorPlugin: (params?: {
     codeBlockLanguages: Record<string, string>;
     /**
-     * The theme of CodeMirrorEditor
+     * Optional, additional CodeMirror extensions to load in the diff/source mode.
+     */
+    codeMirrorExtensions?: Extension_2[] | undefined;
+    /**
+     * Whether or not to try to dynamically load the code block language support.
+     * Disable if you want to manually pass the supported languages.
+     * @group CodeMirror
      */
-    theme?: SandpackThemeProp | undefined;
+    autoLoadLanguageSupport?: boolean | undefined;
 } | undefined) => RealmPlugin;
 
-/**
- * The theme CodeMirrorEditor used.
- * It can be "light" | "dark" | "auto",
- * or the theme in "@codesandbox/sandpack-themes" package,
- * or you can also custom one,
- * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
- */
-export declare const codeMirrorTheme$: NodeRef<SandpackThemeProp>;
-
 /**
  * A toolbar component that lets the user toggle code formatting.
  * Use for inline `code` elements (like variables, methods, etc).
@@ -566,6 +575,8 @@ export declare const codeMirrorTheme$: NodeRef<SandpackThemeProp>;
  */
 export declare const CodeToggle: React_2.FC;
 
+export declare const COMMON_STATE_CONFIG_EXTENSIONS: Extension_2[];
+
 /**
  * Performs left to right composition of two functions.
  * @group Utils

package/dist/index.js

@@ -16,8 +16,8 @@ import { maxLengthPlugin } from "./plugins/maxlength/index.js";
 import { insertJsx$, isMdastJsxNode, jsxPlugin } from "./plugins/jsx/index.js";
 import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
 import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
-import { codeBlockLanguages$, codeMirrorPlugin, codeMirrorTheme$, insertCodeMirror$ } from "./plugins/codemirror/index.js";
-import { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
+import { codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
+import { COMMON_STATE_CONFIG_EXTENSIONS, CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
 import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
 import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
@@ -85,6 +85,7 @@ export {
   ButtonOrDropdownButton,
   ButtonWithTooltip,
   CAN_USE_DOM,
+  COMMON_STATE_CONFIG_EXTENSIONS,
   ChangeAdmonitionType,
   ChangeCodeMirrorLanguage,
   CodeBlockNode,
@@ -165,8 +166,9 @@ export {
   codeBlockEditorDescriptors$,
   codeBlockLanguages$,
   codeBlockPlugin,
+  codeMirrorAutoLoadLanguageSupport$,
+  codeMirrorExtensions$,
   codeMirrorPlugin,
-  codeMirrorTheme$,
   compose,
   composerChildren$,
   contentEditableClassName$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -97,33 +97,30 @@ class CodeBlockNode extends DecoratorNode {
 }
 const CodeBlockEditorContext = React__default.createContext(null);
 const CodeBlockEditorContextProvider = ({ parentEditor, lexicalNode, children }) => {
-  return /* @__PURE__ */ React__default.createElement(
-    CodeBlockEditorContext.Provider,
-    {
-      value: {
-        lexicalNode,
-        setCode: (code) => {
-          parentEditor.update(() => {
-            lexicalNode.setCode(code);
-            setTimeout(() => {
-              parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
-            }, 0);
-          });
-        },
-        setLanguage: (language) => {
-          parentEditor.update(() => {
-            lexicalNode.setLanguage(language);
-          });
-        },
-        setMeta: (meta) => {
-          parentEditor.update(() => {
-            lexicalNode.setMeta(meta);
-          });
-        }
+  const contextValue = React__default.useMemo(() => {
+    return {
+      lexicalNode,
+      setCode: (code) => {
+        parentEditor.update(() => {
+          lexicalNode.setCode(code);
+          setTimeout(() => {
+            parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
+          }, 0);
+        });
+      },
+      setLanguage: (language) => {
+        parentEditor.update(() => {
+          lexicalNode.setLanguage(language);
+        });
+      },
+      setMeta: (meta) => {
+        parentEditor.update(() => {
+          lexicalNode.setMeta(meta);
+        });
       }
-    },
-    children
-  );
+    };
+  }, [lexicalNode, parentEditor]);
+  return /* @__PURE__ */ React__default.createElement(CodeBlockEditorContext.Provider, { value: contextValue }, children);
 };
 function useCodeBlockEditorContext() {
   const context = React__default.useContext(CodeBlockEditorContext);

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -1,44 +1,79 @@
-import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
 import React__default from "react";
 import styles from "../../styles/ui.module.css.js";
 import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { readOnly$ } from "../core/index.js";
-import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
 import { useCellValues } from "@mdxeditor/gurx";
-import { codeMirrorTheme$ } from "./index.js";
+import { EditorState } from "@codemirror/state";
+import { lineNumbers, EditorView } from "@codemirror/view";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "codemirror";
+import { languages } from "@codemirror/language-data";
+import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
+import { codeMirrorExtensions$ } from "./index.js";
+const COMMON_STATE_CONFIG_EXTENSIONS = [];
 const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
-  const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", "jsx", focusEmitter);
-  const [readOnly, theme] = useCellValues(readOnly$, codeMirrorTheme$);
+  const [readOnly, codeMirrorExtensions] = useCellValues(readOnly$, codeMirrorExtensions$);
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", language, focusEmitter);
   const { setCode } = useCodeBlockEditorContext();
+  const editorViewRef = React__default.useRef(null);
+  const elRef = React__default.useRef(null);
+  const setCodeRef = React__default.useRef(setCode);
+  setCodeRef.current = setCode;
+  codeMirrorRef.current = {
+    getCodemirror: () => editorViewRef.current
+  };
   React__default.useEffect(() => {
-    var _a, _b;
-    (_b = (_a = codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.dom.addEventListener("paste", (e) => {
-      e.stopPropagation();
-    });
-  }, [codeMirrorRef, language]);
+    void (async () => {
+      const extensions = [
+        ...codeMirrorExtensions,
+        basicSetup,
+        basicLight,
+        lineNumbers(),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of(({ state }) => {
+          setCodeRef.current(state.doc.toString());
+        })
+      ];
+      if (readOnly) {
+        extensions.push(EditorState.readOnly.of(true));
+      }
+      if (language !== "") {
+        const languageData = languages.find((l) => {
+          return l.name === language || l.alias.includes(language) || l.extensions.includes(language);
+        });
+        if (languageData) {
+          try {
+            const languageSupport = await languageData.load();
+            extensions.push(languageSupport.extension);
+          } catch (e) {
+            console.warn("failed to load language support for", language);
+          }
+        }
+      }
+      elRef.current.innerHTML = "";
+      editorViewRef.current = new EditorView({
+        parent: elRef.current,
+        state: EditorState.create({ doc: code, extensions })
+      });
+    })();
+    return () => {
+      var _a;
+      (_a = editorViewRef.current) == null ? void 0 : _a.destroy();
+      editorViewRef.current = null;
+    };
+  }, [readOnly, language]);
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles.sandpackWrapper,
+      className: styles.codeMirrorWrapper,
       onKeyDown: (e) => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ React__default.createElement(SandpackProvider, { theme }, /* @__PURE__ */ React__default.createElement(
-      CodeEditor,
-      {
-        readOnly,
-        showLineNumbers: true,
-        initMode: "immediate",
-        key: language,
-        filePath: `file.${language || "txt"}`,
-        code,
-        onCodeUpdate: setCode,
-        ref: codeMirrorRef
-      }
-    ))
+    /* @__PURE__ */ React__default.createElement("div", { ref: elRef })
   );
 };
 export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
   CodeMirrorEditor
 };

package/dist/plugins/codemirror/index.js

@@ -24,19 +24,22 @@ const insertCodeMirror$ = Signal((r) => {
     insertCodeBlock$
   );
 });
-const codeMirrorTheme$ = Cell("auto");
+const codeMirrorExtensions$ = Cell([]);
+const codeMirrorAutoLoadLanguageSupport$ = Cell(true);
 const codeMirrorPlugin = realmPlugin({
   update(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
-      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto"
+      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
+      [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   },
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
-      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto",
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {})
+      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {}),
+      [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   }
 });
@@ -51,7 +54,8 @@ function buildCodeBlockDescriptor(codeBlockLanguages) {
 }
 export {
   codeBlockLanguages$,
+  codeMirrorAutoLoadLanguageSupport$,
+  codeMirrorExtensions$,
   codeMirrorPlugin,
-  codeMirrorTheme$,
   insertCodeMirror$
 };

package/dist/plugins/core/index.js

@@ -4,7 +4,7 @@ import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
 import { Cell, withLatestFrom, Signal, filter, map, useCellValue, scan } from "@mdxeditor/gurx";
-import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, $createParagraphNode, ParagraphNode, TextNode, createEditor } from "lexical";
+import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, ParagraphNode, TextNode, createEditor } from "lexical";
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
 import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
@@ -251,6 +251,15 @@ const createRootEditorSubscription$ = Appender(rootEditorSubscriptions$, (r, sig
         }
         let theNewMarkdownValue;
         editorState.read(() => {
+          const lastChild = $getRoot().getLastChild();
+          if (lastChild instanceof DecoratorNode) {
+            rootEditor.update(
+              () => {
+                $getRoot().append($createParagraphNode());
+              },
+              { discrete: true }
+            );
+          }
           theNewMarkdownValue = exportMarkdownFromLexical({
             root: $getRoot(),
             visitors: r.getValue(exportVisitors$),

package/dist/plugins/sandpack/useCodeMirrorRef.js

@@ -76,7 +76,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
       var _a, _b, _c, _d;
       (_b = (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM) == null ? void 0 : _b.addEventListener("focus", onFocusHandler);
       (_d = (_c = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _c.contentDOM) == null ? void 0 : _d.addEventListener("keydown", onKeyDownHandler);
-    }, 100);
+    }, 300);
     return () => {
       var _a, _b;
       (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM.removeEventListener("focus", onFocusHandler);