@milkdown/preset-commonmark 5.3.4 → 5.5.0

package/lib/index.es.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { createMark, createShortcut, createNode, createPlugin, AtomList } from "@milkdown/utils";
-import { createCmdKey, createCmd, schemaCtx, themeToolCtx } from "@milkdown/core";
+import { createCmdKey, createCmd, schemaCtx, themeToolCtx, editorViewCtx } from "@milkdown/core";
 import { markRule, toggleMark, TextSelection, InputRule, wrappingInputRule, wrapIn, textblockTypeInputRule, setBlockType, Plugin, PluginKey, ReplaceStep, AddMarkStep, Selection, findSelectedNodeOfType, splitListItem, sinkListItem, liftListItem } from "@milkdown/prose";
 import links from "remark-inline-links";
 const SupportedKeys = {
@@ -42,7 +42,7 @@ const SupportedKeys = {
   LiftListItem: "LiftListItem"
 };
 const id$a = "code_inline";
-const ToggleInlineCode = createCmdKey();
+const ToggleInlineCode = createCmdKey("ToggleInlineCode");
 const codeInline = createMark((utils) => {
   const style = utils.getStyle(({ palette, size, font }, { css }) => css`
                 background-color: ${palette("neutral")};
@@ -64,7 +64,7 @@ const codeInline = createMark((utils) => {
         match: (node) => node.type === "inlineCode",
         runner: (state, node, markType) => {
           state.openMark(markType);
-          state.addText(node.value);
+          state.addText(node["value"]);
           state.closeMark(markType);
         }
       },
@@ -83,7 +83,7 @@ const codeInline = createMark((utils) => {
   };
 });
 const id$9 = "em";
-const ToggleItalic = createCmdKey();
+const ToggleItalic = createCmdKey("ToggleItalic");
 const em = createMark((utils) => ({
   id: id$9,
   schema: () => ({
@@ -117,8 +117,8 @@ const em = createMark((utils) => ({
     [SupportedKeys.Em]: createShortcut(ToggleItalic, "Mod-i")
   }
 }));
-const ToggleLink = createCmdKey();
-const ModifyLink = createCmdKey();
+const ToggleLink = createCmdKey("ToggleLink");
+const ModifyLink = createCmdKey("ModifyLink");
 const id$8 = "link";
 const link = createMark((utils) => {
   const style = utils.getStyle((themeTool, { css }) => {
@@ -157,8 +157,8 @@ const link = createMark((utils) => {
       parseMarkdown: {
         match: (node) => node.type === "link",
         runner: (state, node, markType) => {
-          const url = node.url;
-          const title = node.title;
+          const url = node["url"];
+          const title = node["title"];
           state.openMark(markType, { href: url, title });
           state.next(node.children);
           state.closeMark(markType);
@@ -168,8 +168,8 @@ const link = createMark((utils) => {
         match: (mark) => mark.type.name === id$8,
         runner: (state, mark) => {
           state.withMark(mark, "link", void 0, {
-            title: mark.attrs.title,
-            url: mark.attrs.href
+            title: mark.attrs["title"],
+            url: mark.attrs["href"]
           });
         }
       }
@@ -218,7 +218,7 @@ const link = createMark((utils) => {
   };
 });
 const id$7 = "strong";
-const ToggleBold = createCmdKey();
+const ToggleBold = createCmdKey("ToggleBold");
 const strong = createMark((utils) => {
   const style = utils.getStyle((_, { css }) => css`
                 font-weight: 600;
@@ -259,7 +259,7 @@ const strong = createMark((utils) => {
 });
 const marks = [codeInline(), em(), strong(), link()];
 const id$6 = "blockquote";
-const WrapInBlockquote = createCmdKey();
+const WrapInBlockquote = createCmdKey("WrapInBlockquote");
 const blockquote = createNode((utils) => {
   const style = utils.getStyle((themeTool, { css }) => css`
                 padding-left: 1.875rem;
@@ -298,7 +298,7 @@ const blockquote = createNode((utils) => {
     }
   };
 });
-const WrapInBulletList = createCmdKey();
+const WrapInBulletList = createCmdKey("WrapInBulletList");
 const bulletList = createNode((utils) => {
   const id2 = "bullet_list";
   return {
@@ -350,7 +350,7 @@ const languageOptions = [
 ];
 const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
 const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
-const TurnIntoCodeFence = createCmdKey();
+const TurnIntoCodeFence = createCmdKey("TurnIntoCodeFence");
 const id$5 = "fence";
 const codeFence = createNode((utils, options) => {
   const style = utils.getStyle(({ palette, mixin, size, font }, { css }) => {
@@ -456,6 +456,9 @@ const codeFence = createNode((utils, options) => {
             pre {
                 font-family: ${font.code};
                 margin: 0 1.2rem !important;
+                white-space: pre;
+                overflow: auto;
+                ${scrollbar("x")};
             }
         `;
   });
@@ -483,7 +486,7 @@ const codeFence = createNode((utils, options) => {
             if (!(dom instanceof HTMLElement)) {
               throw new Error("Parse DOM error.");
             }
-            return { language: dom.dataset.language };
+            return { language: dom.dataset["language"] };
           }
         }
       ],
@@ -491,7 +494,7 @@ const codeFence = createNode((utils, options) => {
         return [
           "pre",
           {
-            "data-language": node.attrs.language,
+            "data-language": node.attrs["language"],
             class: utils.getClassName(node.attrs, "code-fence", style)
           },
           ["code", { spellCheck: "false" }, 0]
@@ -500,8 +503,8 @@ const codeFence = createNode((utils, options) => {
       parseMarkdown: {
         match: ({ type }) => type === "code",
         runner: (state, node, type) => {
-          const language = node.lang;
-          const value = node.value;
+          const language = node["lang"];
+          const value = node["value"];
           state.openNode(type, { language });
           if (value) {
             state.addText(value);
@@ -514,7 +517,7 @@ const codeFence = createNode((utils, options) => {
         runner: (state, node) => {
           var _a;
           state.addNode("code", void 0, ((_a = node.content.firstChild) == null ? void 0 : _a.text) || "", {
-            lang: node.attrs.language
+            lang: node.attrs["language"]
           });
         }
       }
@@ -562,7 +565,7 @@ const codeFence = createNode((utils, options) => {
         const { tr } = view.state;
         view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
           fold: true,
-          language: el.dataset.value
+          language: el.dataset["value"]
         }));
       });
       valueWrapper.addEventListener("mousedown", (e) => {
@@ -573,16 +576,16 @@ const codeFence = createNode((utils, options) => {
         const { tr } = view.state;
         view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
           fold: false,
-          language: container.dataset.language
+          language: container.dataset["language"]
         }));
       });
       document.addEventListener("mousedown", () => {
-        if (!view.editable || select.dataset.fold === "true")
+        if (!view.editable || select.dataset["fold"] === "true")
           return;
         const { tr } = view.state;
         view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
           fold: true,
-          language: container.dataset.language
+          language: container.dataset["language"]
         }));
       });
       ((options == null ? void 0 : options.languageList) || languageOptions).forEach((lang) => {
@@ -603,19 +606,19 @@ const codeFence = createNode((utils, options) => {
       codeContent.style.whiteSpace = "inherit";
       container.append(selectWrapper, pre);
       container.setAttribute("class", utils.getClassName(node.attrs, "code-fence", style));
-      container.setAttribute("data-language", node.attrs.language);
-      value.innerText = node.attrs.language || "--";
-      select.setAttribute("data-fold", node.attrs.fold ? "true" : "false");
+      container.setAttribute("data-language", node.attrs["language"]);
+      value.innerText = node.attrs["language"] || "--";
+      select.setAttribute("data-fold", node.attrs["fold"] ? "true" : "false");
       return {
         dom: container,
         contentDOM: codeContent,
         update: (updatedNode) => {
           if (updatedNode.type.name !== id$5)
             return false;
-          const lang = updatedNode.attrs.language;
-          container.dataset.language = lang;
+          const lang = updatedNode.attrs["language"];
+          container.dataset["language"] = lang;
           value.innerText = lang || "--";
-          select.setAttribute("data-fold", updatedNode.attrs.fold ? "true" : "false");
+          select.setAttribute("data-fold", updatedNode.attrs["fold"] ? "true" : "false");
           return true;
         }
       };
@@ -643,7 +646,7 @@ const doc = createNode(() => {
     })
   };
 });
-const InsertHardbreak = createCmdKey();
+const InsertHardbreak = createCmdKey("InsertHardbreak");
 const hardbreak = createNode((utils) => {
   return {
     id: "hardbreak",
@@ -677,11 +680,13 @@ const hardbreak = createNode((utils) => {
     },
     prosePlugins: (type) => [
       new Plugin({
-        key: new PluginKey("hardbreak-marks"),
+        key: new PluginKey("MILKDOWN_PLUGIN_HARDBREAK_MARKS"),
         appendTransaction: (trs, _oldState, newState) => {
           if (!trs.length)
             return;
           const [tr] = trs;
+          if (!tr)
+            return;
           const [step] = tr.steps;
           const isInsertHr = tr.getMeta("hardbreak");
           if (isInsertHr) {
@@ -709,7 +714,7 @@ const hardbreak = createNode((utils) => {
   };
 });
 const headingIndex = Array(6).fill(0).map((_, i) => i + 1);
-const TurnIntoHeading = createCmdKey();
+const TurnIntoHeading = createCmdKey("TurnIntoHeading");
 const headingPluginKey = new PluginKey("MILKDOWN_PLUGIN_ID");
 const heading = createNode((utils) => {
   const id2 = "heading";
@@ -771,10 +776,10 @@ const heading = createNode((utils) => {
       })),
       toDOM: (node) => {
         return [
-          `h${node.attrs.level}`,
+          `h${node.attrs["level"]}`,
           {
-            id: node.attrs.id || node.textContent.split(" ").join("-").toLocaleLowerCase(),
-            class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level))
+            id: node.attrs["id"] || node.textContent.split(" ").join("-").toLocaleLowerCase(),
+            class: utils.getClassName(node.attrs, `heading h${node.attrs["level"]}`, style(node.attrs["level"]))
           },
           0
         ];
@@ -782,7 +787,7 @@ const heading = createNode((utils) => {
       parseMarkdown: {
         match: ({ type }) => type === id2,
         runner: (state, node, type) => {
-          const depth = node.depth;
+          const depth = node["depth"];
           state.openNode(type, { level: depth });
           state.next(node.children);
           state.closeNode();
@@ -791,7 +796,7 @@ const heading = createNode((utils) => {
       toMarkdown: {
         match: (node) => node.type.name === id2,
         runner: (state, node) => {
-          state.openNode("heading", void 0, { depth: node.attrs.level });
+          state.openNode("heading", void 0, { depth: node.attrs["level"] });
           state.next(node.content);
           state.closeNode();
         }
@@ -809,31 +814,64 @@ const heading = createNode((utils) => {
       [SupportedKeys.H5]: createShortcut(TurnIntoHeading, "Mod-Alt-5", 5),
       [SupportedKeys.H6]: createShortcut(TurnIntoHeading, "Mod-Alt-6", 6)
     },
-    prosePlugins: (type) => [
-      new Plugin({
-        key: headingPluginKey,
-        appendTransaction: (transactions, _, nextState) => {
-          const tr = nextState.tr;
-          let modified = false;
-          if (transactions.some((transaction) => transaction.docChanged)) {
-            nextState.doc.descendants((node, pos) => {
-              if (node.type === type) {
-                const attrs = node.attrs;
-                tr.setNodeMarkup(pos, void 0, __spreadProps(__spreadValues({}, attrs), {
-                  id: node.textContent.split(" ").join("-").toLocaleLowerCase()
-                }));
-                modified = true;
+    prosePlugins: (type, ctx) => {
+      let lock = false;
+      const createId = (node) => {
+        return node.textContent.replace(/[\p{P}\p{S}]/gu, "").replace(/\s/g, "").trim();
+      };
+      const walkThrough = (state, callback) => {
+        const tr = state.tr;
+        state.doc.descendants((node, pos) => {
+          if (node.type === type && !lock) {
+            if (node.textContent.trim().length === 0) {
+              return;
+            }
+            const attrs = node.attrs;
+            const id22 = createId(node);
+            if (attrs["id"] !== id22) {
+              tr.setMeta(headingPluginKey, true).setNodeMarkup(pos, void 0, __spreadProps(__spreadValues({}, attrs), {
+                id: id22
+              }));
+            }
+          }
+        });
+        callback(tr);
+      };
+      return [
+        new Plugin({
+          key: headingPluginKey,
+          props: {
+            handleDOMEvents: {
+              compositionstart: () => {
+                lock = true;
+                return false;
+              },
+              compositionend: () => {
+                lock = false;
+                const view = ctx.get(editorViewCtx);
+                setTimeout(() => {
+                  walkThrough(view.state, (tr) => view.dispatch(tr));
+                }, 0);
+                return false;
               }
-            });
+            }
+          },
+          appendTransaction: (transactions, _, nextState) => {
+            let tr = null;
+            if (transactions.every((transaction) => !transaction.getMeta(headingPluginKey)) && transactions.some((transaction) => transaction.docChanged)) {
+              walkThrough(nextState, (t) => {
+                tr = t;
+              });
+            }
+            return tr;
           }
-          return modified ? tr : null;
-        }
-      })
-    ]
+        })
+      ];
+    }
   };
 });
 const id$4 = "hr";
-const InsertHr = createCmdKey();
+const InsertHr = createCmdKey("InsertHr");
 const hr = createNode((utils) => {
   const style = utils.getStyle((themeTool, { css }) => css`
             height: ${themeTool.size.lineWidth};
@@ -889,8 +927,8 @@ const hr = createNode((utils) => {
     ]
   };
 });
-const ModifyImage = createCmdKey();
-const InsertImage = createCmdKey();
+const ModifyImage = createCmdKey("ModifyImage");
+const InsertImage = createCmdKey("InsertImage");
 const id$3 = "image";
 const image = createNode((utils, options) => {
   var _a, _b;
@@ -1042,16 +1080,16 @@ const image = createNode((utils, options) => {
         return [
           "img",
           __spreadProps(__spreadValues({}, node.attrs), {
-            class: utils.getClassName(node.attrs, id$3, node.attrs.failed ? "failed" : "", node.attrs.loading ? "loading" : "", style)
+            class: utils.getClassName(node.attrs, id$3, node.attrs["failed"] ? "failed" : "", node.attrs["loading"] ? "loading" : "", style)
           })
         ];
       },
       parseMarkdown: {
         match: ({ type }) => type === id$3,
         runner: (state, node, type) => {
-          const url = node.url;
-          const alt = node.alt;
-          const title = node.title;
+          const url = node["url"];
+          const alt = node["alt"];
+          const title = node["title"];
           state.addNode(type, {
             src: url,
             alt,
@@ -1063,9 +1101,9 @@ const image = createNode((utils, options) => {
         match: (node) => node.type.name === id$3,
         runner: (state, node) => {
           state.addNode("image", void 0, void 0, {
-            title: node.attrs.title,
-            url: node.attrs.src,
-            alt: node.attrs.alt
+            title: node.attrs["title"],
+            url: node.attrs["src"],
+            alt: node.attrs["alt"]
           });
         }
       }
@@ -1203,9 +1241,9 @@ const image = createNode((utils, options) => {
   };
 });
 const id$2 = "list_item";
-const SplitListItem = createCmdKey();
-const SinkListItem = createCmdKey();
-const LiftListItem = createCmdKey();
+const SplitListItem = createCmdKey("SplitListItem");
+const SinkListItem = createCmdKey("SinkListItem");
+const LiftListItem = createCmdKey("LiftListItem");
 const listItem = createNode((utils) => {
   const style = utils.getStyle((themeTool, { css }) => css`
                 &,
@@ -1258,7 +1296,7 @@ const listItem = createNode((utils) => {
     }
   };
 });
-const WrapInOrderedList = createCmdKey();
+const WrapInOrderedList = createCmdKey("WrapInOrderedList");
 const id$1 = "ordered_list";
 const orderedList = createNode((utils) => ({
   id: id$1,
@@ -1283,7 +1321,7 @@ const orderedList = createNode((utils) => ({
     ],
     toDOM: (node) => [
       "ol",
-      __spreadProps(__spreadValues({}, node.attrs.order === 1 ? {} : node.attrs.order), {
+      __spreadProps(__spreadValues({}, node.attrs["order"] === 1 ? {} : node.attrs["order"]), {
         class: utils.getClassName(node.attrs, "ordered-list")
       }),
       0
@@ -1304,14 +1342,14 @@ const orderedList = createNode((utils) => ({
     }
   }),
   inputRules: (nodeType) => [
-    wrappingInputRule(/^(\d+)\.\s$/, nodeType, (match) => ({ order: Number(match[1]) }), (match, node) => node.childCount + node.attrs.order === Number(match[1]))
+    wrappingInputRule(/^(\d+)\.\s$/, nodeType, (match) => ({ order: Number(match[1]) }), (match, node) => node.childCount + node.attrs["order"] === Number(match[1]))
   ],
   commands: (nodeType) => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],
   shortcuts: {
     [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, "Mod-Alt-7")
   }
 }));
-const TurnIntoText = createCmdKey();
+const TurnIntoText = createCmdKey("TurnIntoText");
 const id = "paragraph";
 const paragraph = createNode((utils) => {
   const style = utils.getStyle((_, { css }) => {
@@ -1335,7 +1373,7 @@ const paragraph = createNode((utils) => {
           if (node.children) {
             state.next(node.children);
           } else {
-            state.addText(node.value);
+            state.addText(node["value"]);
           }
           state.closeNode();
         }
@@ -1362,7 +1400,7 @@ const text = createNode(() => ({
     parseMarkdown: {
       match: ({ type }) => type === "text",
       runner: (state, node) => {
-        state.addText(node.value);
+        state.addText(node["value"]);
       }
     },
     toMarkdown: {
@@ -1395,10 +1433,16 @@ function flatMapWithDepth(ast, fn) {
     if (isParent(node)) {
       const out = [];
       for (let i = 0, n = node.children.length; i < n; i++) {
-        const xs = transform(node.children[i], i, node);
-        if (xs) {
-          for (let j = 0, m = xs.length; j < m; j++) {
-            out.push(xs[j]);
+        const nthChild = node.children[i];
+        if (nthChild) {
+          const xs = transform(nthChild, i, node);
+          if (xs) {
+            for (let j = 0, m = xs.length; j < m; j++) {
+              const item = xs[j];
+              if (item) {
+                out.push(item);
+              }
+            }
           }
         }
       }