@mdxeditor/editor 2.3.5 → 2.3.7

package/dist/mdastUtilHtmlComment.js

@@ -0,0 +1,137 @@
+import { factorySpace } from "micromark-factory-space";
+import { markdownLineEnding } from "./node_modules/micromark-util-character/index.js";
+import { codes, types } from "micromark-util-symbol";
+function commentFromMarkdown(_options) {
+  return {
+    canContainEols: ["comment"],
+    enter: {
+      comment(_) {
+        this.buffer();
+      }
+    },
+    exit: {
+      comment(token) {
+        const text = this.resume();
+        if (_options == null ? void 0 : _options.ast) {
+          this.enter(
+            {
+              // @ts-expect-error: hush.
+              type: "comment",
+              value: "",
+              commentValue: text.slice(0, -2)
+            },
+            token
+          );
+          this.exit(token);
+        }
+      }
+    }
+  };
+}
+const tokenize = (effects, ok, nok) => {
+  return start;
+  function start(code) {
+    effects.enter("comment");
+    effects.consume(code);
+    return open;
+  }
+  function open(code) {
+    if (code === codes.exclamationMark) {
+      effects.consume(code);
+      return declarationOpen;
+    }
+    return nok(code);
+  }
+  function declarationOpen(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentOpen;
+    }
+    return nok(code);
+  }
+  function commentOpen(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentStart;
+    }
+    return nok(code);
+  }
+  function commentStart(code) {
+    if (code === codes.greaterThan) {
+      return nok(code);
+    }
+    if (markdownLineEnding(code)) {
+      return atLineEnding(code);
+    }
+    effects.enter(types.data);
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentStartDash;
+    }
+    return comment2(code);
+  }
+  function commentStartDash(code) {
+    if (code === codes.greaterThan) {
+      return nok(code);
+    }
+    return comment2(code);
+  }
+  function comment2(code) {
+    if (code === codes.eof) {
+      return nok(code);
+    }
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentClose;
+    }
+    if (markdownLineEnding(code)) {
+      effects.exit(types.data);
+      return atLineEnding(code);
+    }
+    effects.consume(code);
+    return comment2;
+  }
+  function atLineEnding(code) {
+    effects.enter(types.lineEnding);
+    effects.consume(code);
+    effects.exit(types.lineEnding);
+    return factorySpace(effects, afterPrefix, types.linePrefix);
+  }
+  function afterPrefix(code) {
+    if (markdownLineEnding(code)) {
+      return atLineEnding(code);
+    }
+    effects.enter(types.data);
+    return comment2(code);
+  }
+  function commentClose(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return end;
+    }
+    return comment2(code);
+  }
+  function end(code) {
+    if (code === codes.greaterThan) {
+      effects.exit(types.data);
+      effects.enter("commentEnd");
+      effects.consume(code);
+      effects.exit("commentEnd");
+      effects.exit("comment");
+      return ok(code);
+    }
+    if (code === codes.dash) {
+      effects.consume(code);
+      return end;
+    }
+    return comment2(code);
+  }
+};
+const comment = {
+  flow: { [60]: { tokenize, concrete: true } },
+  text: { [60]: { tokenize } }
+};
+export {
+  comment,
+  commentFromMarkdown
+};

package/dist/node_modules/micromark-util-character/index.js

@@ -0,0 +1,6 @@
+function markdownLineEnding(code) {
+  return code !== null && code < -2;
+}
+export {
+  markdownLineEnding
+};

package/dist/plugins/core/index.js

@@ -27,6 +27,7 @@ import { MdastParagraphVisitor } from "./MdastParagraphVisitor.js";
 import { MdastRootVisitor } from "./MdastRootVisitor.js";
 import { MdastTextVisitor } from "./MdastTextVisitor.js";
 import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
+import { commentFromMarkdown, comment } from "../../mdastUtilHtmlComment.js";
 const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
 const rootEditor$ = Cell(null);
 const activeEditor$ = Cell(null);
@@ -488,8 +489,8 @@ const corePlugin = realmPlugin({
     });
     if (!(params == null ? void 0 : params.suppressHtmlProcessing)) {
       r.pubIn({
-        [addMdastExtension$]: mdxJsxFromMarkdown(),
-        [addSyntaxExtension$]: [mdxJsx(), mdxMd()],
+        [addMdastExtension$]: [mdxJsxFromMarkdown(), commentFromMarkdown({ ast: false })],
+        [addSyntaxExtension$]: [mdxJsx(), mdxMd(), comment],
         [addToMarkdownExtension$]: mdxJsxToMarkdown(),
         [addImportVisitor$]: MdastHTMLVisitor
       });

package/dist/plugins/diff-source/DiffViewer.js

@@ -5,61 +5,73 @@ import { MergeView } from "@codemirror/merge";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { COMMON_STATE_CONFIG_EXTENSIONS } from "./SourceEditor.js";
-import { useCellValues, usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { useRealm, useCellValues, usePublisher, useCellValue } from "@mdxeditor/gurx";
+function setContent(view, content) {
+  if (view !== void 0) {
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: content } });
+  }
+}
 const DiffViewer = () => {
-  const [newText, oldText] = useCellValues(markdown$, diffMarkdown$);
-  const updateMarkdown = usePublisher(markdownSourceEditorValue$);
-  return /* @__PURE__ */ React__default.createElement(CmMergeView, { oldMarkdown: oldText, newMarkdown: newText, onUpdate: updateMarkdown });
-};
-const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
+  const realm = useRealm();
+  const [newMarkdown, oldMarkdown] = useCellValues(markdown$, diffMarkdown$);
+  const onUpdate = usePublisher(markdownSourceEditorValue$);
+  const elRef = React__default.useRef(null);
   const cmMergeViewRef = React__default.useRef(null);
   const cmExtensions = useCellValue(cmExtensions$);
   const triggerOnBlur = usePublisher(onBlur$);
-  const ref = React__default.useCallback(
-    (el) => {
+  React__default.useEffect(() => {
+    return realm.sub(diffMarkdown$, (newDiffMarkdown) => {
+      var _a;
+      setContent((_a = cmMergeViewRef.current) == null ? void 0 : _a.a, newDiffMarkdown);
+    });
+  }, [realm]);
+  React__default.useEffect(() => {
+    return realm.sub(markdown$, (newMarkdown2) => {
       var _a;
-      if (el !== null) {
-        cmMergeViewRef.current = new MergeView({
-          renderRevertControl: () => {
-            const el2 = document.createElement("button");
-            el2.classList.add("cm-merge-revert");
-            el2.appendChild(document.createTextNode("⮕"));
-            return el2;
-          },
-          parent: el,
-          orientation: "a-b",
-          revertControls: "a-to-b",
-          gutter: true,
-          a: {
-            doc: oldMarkdown,
-            extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
-          },
-          b: {
-            doc: newMarkdown,
-            extensions: [
-              ...cmExtensions,
-              ...COMMON_STATE_CONFIG_EXTENSIONS,
-              EditorView.updateListener.of(({ state }) => {
-                const md = state.doc.toString();
-                onUpdate(md);
-              }),
-              EditorView.focusChangeEffect.of((_, focused) => {
-                if (!focused) {
-                  triggerOnBlur(new FocusEvent("blur"));
-                }
-                return null;
-              })
-            ]
-          }
-        });
-      } else {
-        (_a = cmMergeViewRef.current) == null ? void 0 : _a.destroy();
-        cmMergeViewRef.current = null;
+      setContent((_a = cmMergeViewRef.current) == null ? void 0 : _a.b, newMarkdown2);
+    });
+  }, [realm]);
+  React__default.useEffect(() => {
+    cmMergeViewRef.current = new MergeView({
+      renderRevertControl: () => {
+        const el = document.createElement("button");
+        el.classList.add("cm-merge-revert");
+        el.appendChild(document.createTextNode("⮕"));
+        return el;
+      },
+      parent: elRef.current,
+      orientation: "a-b",
+      revertControls: "a-to-b",
+      gutter: true,
+      a: {
+        doc: oldMarkdown,
+        extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+      },
+      b: {
+        doc: newMarkdown,
+        extensions: [
+          ...cmExtensions,
+          ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorView.updateListener.of(({ state }) => {
+            const md = state.doc.toString();
+            onUpdate(md);
+          }),
+          EditorView.focusChangeEffect.of((_, focused) => {
+            if (!focused) {
+              triggerOnBlur(new FocusEvent("blur"));
+            }
+            return null;
+          })
+        ]
       }
-    },
-    [newMarkdown, oldMarkdown, onUpdate, cmExtensions, triggerOnBlur]
-  );
-  return /* @__PURE__ */ React__default.createElement("div", { ref });
+    });
+    return () => {
+      var _a;
+      (_a = cmMergeViewRef.current) == null ? void 0 : _a.destroy();
+      cmMergeViewRef.current = null;
+    };
+  }, [onUpdate, cmExtensions]);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: elRef });
 };
 export {
   DiffViewer

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -80,6 +80,8 @@
     "micromark-extension-mdx-jsx": "^3.0.0",
     "micromark-extension-mdx-md": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
+    "micromark-factory-space": "^2.0.0",
+    "micromark-util-symbol": "^2.0.0",
     "react-hook-form": "^7.44.2",
     "unidiff": "^1.0.2"
   },