@milkdown/preset-commonmark 5.3.0 → 5.3.4

package/lib/index.d.ts

@@ -1,34 +1 @@
-import { AtomList } from '@milkdown/utils';
-import { commonmarkPlugins } from './plugin';
-export * from './mark';
-export * from './node';
-export * from './supported-keys';
-export declare const commonmarkNodes: AtomList<(import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<"CodeFence", {
-    languageList?: string[] | undefined;
-}>> & import("@milkdown/core").MilkdownPlugin) | (import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("./node").ImageOptions>> & import("@milkdown/core").MilkdownPlugin)>;
-export { commonmarkPlugins };
-export declare const commonmark: AtomList<(import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<"CodeFence", {
-    languageList?: string[] | undefined;
-}>> & import("@milkdown/core").MilkdownPlugin) | (import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("./node").ImageOptions>> & import("@milkdown/core").MilkdownPlugin)>;
-export declare const commands: {
-    readonly ToggleInlineCode: import("@milkdown/core").CmdKey<undefined>;
-    readonly ToggleItalic: import("@milkdown/core").CmdKey<undefined>;
-    readonly ToggleLink: import("@milkdown/core").CmdKey<string>;
-    readonly ToggleBold: import("@milkdown/core").CmdKey<undefined>;
-    readonly ModifyLink: import("@milkdown/core").CmdKey<string>;
-    readonly ModifyImage: import("@milkdown/core").CmdKey<string>;
-    readonly WrapInBlockquote: import("@milkdown/core").CmdKey<undefined>;
-    readonly WrapInBulletList: import("@milkdown/core").CmdKey<undefined>;
-    readonly WrapInOrderedList: import("@milkdown/core").CmdKey<undefined>;
-    readonly TurnIntoCodeFence: import("@milkdown/core").CmdKey<undefined>;
-    readonly TurnIntoHeading: import("@milkdown/core").CmdKey<number>;
-    readonly TurnIntoText: import("@milkdown/core").CmdKey<undefined>;
-    readonly InsertHardbreak: import("@milkdown/core").CmdKey<undefined>;
-    readonly InsertHr: import("@milkdown/core").CmdKey<string>;
-    readonly InsertImage: import("@milkdown/core").CmdKey<string>;
-    readonly SplitListItem: import("@milkdown/core").CmdKey<undefined>;
-    readonly SinkListItem: import("@milkdown/core").CmdKey<undefined>;
-    readonly LiftListItem: import("@milkdown/core").CmdKey<undefined>;
-};
-export declare type Commands = typeof commands;
-//# sourceMappingURL=index.d.ts.map
+export * from './src/index'

package/lib/index.es.js

@@ -18,7 +18,6 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { createMark, createShortcut, createNode, createPlugin, AtomList } from "@milkdown/utils";
-import { css } from "@emotion/css";
 import { createCmdKey, createCmd, schemaCtx, themeToolCtx } 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";
@@ -45,7 +44,7 @@ const SupportedKeys = {
 const id$a = "code_inline";
 const ToggleInlineCode = createCmdKey();
 const codeInline = createMark((utils) => {
-  const style = utils.getStyle(({ palette, size, font }) => css`
+  const style = utils.getStyle(({ palette, size, font }, { css }) => css`
                 background-color: ${palette("neutral")};
                 color: ${palette("background")};
                 border-radius: ${size.radius};
@@ -56,7 +55,9 @@ const codeInline = createMark((utils) => {
   return {
     id: id$a,
     schema: () => ({
-      excludes: "_",
+      priority: 100,
+      code: true,
+      inclusive: false,
       parseDOM: [{ tag: "code" }],
       toDOM: (mark) => ["code", { class: utils.getClassName(mark.attrs, "code-inline", style) }],
       parseMarkdown: {
@@ -69,9 +70,8 @@ const codeInline = createMark((utils) => {
       },
       toMarkdown: {
         match: (mark) => mark.type.name === id$a,
-        runner: (state, _, node) => {
-          state.addNode("inlineCode", void 0, node.text || "");
-          return true;
+        runner: (state, mark, node) => {
+          state.withMark(mark, "inlineCode", node.text || "");
         }
       }
     }),
@@ -121,7 +121,7 @@ const ToggleLink = createCmdKey();
 const ModifyLink = createCmdKey();
 const id$8 = "link";
 const link = createMark((utils) => {
-  const style = utils.getStyle((themeTool) => {
+  const style = utils.getStyle((themeTool, { css }) => {
     const lineColor = themeTool.palette("line");
     return css`
             color: ${themeTool.palette("secondary")};
@@ -220,7 +220,7 @@ const link = createMark((utils) => {
 const id$7 = "strong";
 const ToggleBold = createCmdKey();
 const strong = createMark((utils) => {
-  const style = utils.getStyle(() => css`
+  const style = utils.getStyle((_, { css }) => css`
                 font-weight: 600;
             `);
   return {
@@ -261,7 +261,7 @@ const marks = [codeInline(), em(), strong(), link()];
 const id$6 = "blockquote";
 const WrapInBlockquote = createCmdKey();
 const blockquote = createNode((utils) => {
-  const style = utils.getStyle((themeTool) => css`
+  const style = utils.getStyle((themeTool, { css }) => css`
                 padding-left: 1.875rem;
                 line-height: 1.75rem;
                 border-left: 4px solid ${themeTool.palette("primary")};
@@ -326,7 +326,7 @@ const bulletList = createNode((utils) => {
     inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
     commands: (nodeType) => [createCmd(WrapInBulletList, () => wrapIn(nodeType))],
     shortcuts: {
-      [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, "Mod-Shift-8")
+      [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, "Mod-Alt-8")
     }
   };
 });
@@ -353,7 +353,7 @@ const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 const TurnIntoCodeFence = createCmdKey();
 const id$5 = "fence";
 const codeFence = createNode((utils, options) => {
-  const style = utils.getStyle(({ palette, mixin, size, font }) => {
+  const style = utils.getStyle(({ palette, mixin, size, font }, { css }) => {
     const { shadow, scrollbar, border } = mixin;
     const { lineWidth, radius } = size;
     return css`
@@ -388,7 +388,7 @@ const codeFence = createNode((utils, options) => {
                 height: 2.625rem;
                 align-items: center;
 
-                & > *:last-child {
+                & > .icon {
                     width: 2.625rem;
                     height: 100%;
                     display: flex;
@@ -489,12 +489,12 @@ const codeFence = createNode((utils, options) => {
       ],
       toDOM: (node) => {
         return [
-          "div",
+          "pre",
           {
             "data-language": node.attrs.language,
             class: utils.getClassName(node.attrs, "code-fence", style)
           },
-          ["pre", ["code", { spellCheck: "false" }, 0]]
+          ["code", { spellCheck: "false" }, 0]
         ];
       },
       parseMarkdown: {
@@ -547,7 +547,9 @@ const codeFence = createNode((utils, options) => {
       valueWrapper.className = "code-fence_value";
       const value = document.createElement("span");
       valueWrapper.appendChild(value);
-      valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon("downArrow"));
+      if (view.editable) {
+        valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon("downArrow"));
+      }
       select.className = "code-fence_select";
       select.addEventListener("mousedown", (e) => {
         e.preventDefault();
@@ -708,45 +710,70 @@ const hardbreak = createNode((utils) => {
 });
 const headingIndex = Array(6).fill(0).map((_, i) => i + 1);
 const TurnIntoHeading = createCmdKey();
-const heading = createNode((utils, options) => {
+const headingPluginKey = new PluginKey("MILKDOWN_PLUGIN_ID");
+const heading = createNode((utils) => {
   const id2 = "heading";
-  const headingMap = {
-    1: css`
-            font-size: 3rem;
-            line-height: 3.5rem;
-        `,
-    2: css`
-            font-size: 2.125rem;
-            line-height: 2.25rem;
-        `,
-    3: css`
-            font-size: 1.5rem;
-            line-height: 1.5rem;
-        `
-  };
-  const style = (level) => (options == null ? void 0 : options.headless) ? null : css`
-                  ${headingMap[level] || ""}
-                  margin: 2.5rem 0 !important;
-                  font-weight: 400;
-              `;
+  const style = (level) => utils.getStyle((_, { css }) => {
+    const headingMap = {
+      1: css`
+                    font-size: 3rem;
+                    line-height: 3.5rem;
+                `,
+      2: css`
+                    font-size: 2.5rem;
+                    line-height: 3rem;
+                `,
+      3: css`
+                    font-size: 2.125rem;
+                    line-height: 2.25rem;
+                `,
+      4: css`
+                    font-size: 1.75rem;
+                    line-height: 2rem;
+                `,
+      5: css`
+                    font-size: 1.5rem;
+                    line-height: 1.5rem;
+                `,
+      6: css`
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
+                `
+    };
+    return css`
+                ${headingMap[level] || ""}
+                margin: 2.5rem 0 !important;
+                font-weight: 400;
+            `;
+  });
   return {
     id: id2,
     schema: () => ({
       content: "inline*",
       group: "block",
+      defining: true,
       attrs: {
-        level: {
-          default: 1
-        },
         id: {
           default: ""
+        },
+        level: {
+          default: 1
         }
       },
-      parseDOM: headingIndex.map((x) => ({ tag: `h${x}`, attrs: { level: x } })),
+      parseDOM: headingIndex.map((x) => ({
+        tag: `h${x}`,
+        getAttrs: (node) => {
+          if (!(node instanceof HTMLElement)) {
+            throw new Error();
+          }
+          return { level: x, id: node.id };
+        }
+      })),
       toDOM: (node) => {
         return [
           `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))
           },
           0
@@ -781,13 +808,34 @@ const heading = createNode((utils, options) => {
       [SupportedKeys.H4]: createShortcut(TurnIntoHeading, "Mod-Alt-4", 4),
       [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;
+              }
+            });
+          }
+          return modified ? tr : null;
+        }
+      })
+    ]
   };
 });
 const id$4 = "hr";
 const InsertHr = createCmdKey();
 const hr = createNode((utils) => {
-  const style = utils.getStyle((themeTool) => css`
+  const style = utils.getStyle((themeTool, { css }) => css`
             height: ${themeTool.size.lineWidth};
             background-color: ${themeTool.palette("line")};
             border-width: 0;
@@ -852,7 +900,7 @@ const image = createNode((utils, options) => {
     failed: "Image loads failed"
   }, (_a = options == null ? void 0 : options.placeholder) != null ? _a : {});
   const isBlock = (_b = options == null ? void 0 : options.isBlock) != null ? _b : false;
-  const containerStyle = utils.getStyle((themeTool) => css`
+  const containerStyle = utils.getStyle((themeTool, { css }) => css`
                 display: inline-block;
                 position: relative;
                 text-align: center;
@@ -944,7 +992,7 @@ const image = createNode((utils, options) => {
                     }
                 }
             `);
-  const style = utils.getStyle(() => css`
+  const style = utils.getStyle((_, { css }) => css`
                 display: inline-block;
                 margin: 0 auto;
                 object-fit: contain;
@@ -970,7 +1018,7 @@ const image = createNode((utils, options) => {
         title: { default: null },
         failed: { default: false },
         loading: { default: true },
-        width: { default: 0 }
+        width: { default: null }
       },
       parseDOM: [
         {
@@ -985,7 +1033,7 @@ const image = createNode((utils, options) => {
               src: dom.getAttribute("src") || "",
               alt: dom.getAttribute("alt"),
               title: dom.getAttribute("title") || dom.getAttribute("alt"),
-              width: dom.getAttribute("width") || 0
+              width: dom.getAttribute("width")
             };
           }
         }
@@ -1076,8 +1124,11 @@ const image = createNode((utils, options) => {
         const img = document.createElement("img");
         img.src = src2;
         img.onerror = () => {
+          const pos = getPos();
+          if (!pos)
+            return;
           const { tr } = view.state;
-          const _tr = tr.setNodeMarkup(getPos(), nodeType, __spreadProps(__spreadValues({}, node.attrs), {
+          const _tr = tr.setNodeMarkup(pos, nodeType, __spreadProps(__spreadValues({}, node.attrs), {
             src: src2,
             loading: false,
             failed: true
@@ -1086,7 +1137,10 @@ const image = createNode((utils, options) => {
         };
         img.onload = () => {
           const { tr } = view.state;
-          const _tr = tr.setNodeMarkup(getPos(), nodeType, __spreadProps(__spreadValues({}, node.attrs), {
+          const pos = getPos();
+          if (!pos)
+            return;
+          const _tr = tr.setNodeMarkup(pos, nodeType, __spreadProps(__spreadValues({}, node.attrs), {
             width: img.width,
             src: src2,
             loading: false,
@@ -1099,7 +1153,9 @@ const image = createNode((utils, options) => {
       content.src = src;
       content.title = title || alt;
       content.alt = alt;
-      content.width = width;
+      if (width) {
+        content.width = width;
+      }
       if (src.length === 0) {
         container.classList.add("system", "empty");
         setIcon("image");
@@ -1115,7 +1171,9 @@ const image = createNode((utils, options) => {
           content.src = src2;
           content.alt = alt2;
           content.title = title2 || alt2;
-          content.width = width2;
+          if (width2) {
+            content.width = width2;
+          }
           if (loading2) {
             loadImage(src2);
             return true;
@@ -1149,7 +1207,7 @@ const SplitListItem = createCmdKey();
 const SinkListItem = createCmdKey();
 const LiftListItem = createCmdKey();
 const listItem = createNode((utils) => {
-  const style = utils.getStyle((themeTool) => css`
+  const style = utils.getStyle((themeTool, { css }) => css`
                 &,
                 & > * {
                     margin: 0.5rem 0;
@@ -1250,17 +1308,19 @@ const orderedList = createNode((utils) => ({
   ],
   commands: (nodeType) => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],
   shortcuts: {
-    [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, "Mod-Shift-7")
+    [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, "Mod-Alt-7")
   }
 }));
 const TurnIntoText = createCmdKey();
 const id = "paragraph";
-const paragraph = createNode((utils, options) => {
-  const style = (options == null ? void 0 : options.headless) ? null : css`
-              font-size: 1rem;
-              line-height: 1.5;
-              letter-spacing: 0.5px;
-          `;
+const paragraph = createNode((utils) => {
+  const style = utils.getStyle((_, { css }) => {
+    return css`
+            font-size: 1rem;
+            line-height: 1.5;
+            letter-spacing: 0.5px;
+        `;
+  });
   return {
     id,
     schema: () => ({
@@ -1385,5 +1445,5 @@ const commands = {
   SinkListItem,
   LiftListItem
 };
-export { InsertHardbreak, InsertHr, InsertImage, LiftListItem, ModifyImage, ModifyLink, SinkListItem, SplitListItem, SupportedKeys, ToggleBold, ToggleInlineCode, ToggleItalic, ToggleLink, TurnIntoCodeFence, TurnIntoHeading, TurnIntoText, WrapInBlockquote, WrapInBulletList, WrapInOrderedList, backtickInputRegex, blockquote, bulletList, codeFence, codeInline, commands, commonmark, commonmarkNodes, commonmarkPlugins, doc, em, hardbreak, heading, hr, image, link, listItem, marks, nodes, orderedList, paragraph, strong, text, tildeInputRegex };
+export { InsertHardbreak, InsertHr, InsertImage, LiftListItem, ModifyImage, ModifyLink, SinkListItem, SplitListItem, SupportedKeys, ToggleBold, ToggleInlineCode, ToggleItalic, ToggleLink, TurnIntoCodeFence, TurnIntoHeading, TurnIntoText, WrapInBlockquote, WrapInBulletList, WrapInOrderedList, backtickInputRegex, blockquote, bulletList, codeFence, codeInline, commands, commonmark, commonmarkNodes, commonmarkPlugins, doc, em, hardbreak, heading, headingPluginKey, hr, image, link, listItem, marks, nodes, orderedList, paragraph, strong, text, tildeInputRegex };
 //# sourceMappingURL=index.es.js.map