@milkdown/preset-commonmark 5.3.2 → 5.4.0

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,8 +18,7 @@ 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 { 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 = {
@@ -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};
@@ -122,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")};
@@ -221,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 {
@@ -262,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")};
@@ -354,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`
@@ -457,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")};
             }
         `;
   });
@@ -711,27 +713,42 @@ 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: () => ({
@@ -739,15 +756,27 @@ const heading = createNode((utils, options) => {
       group: "block",
       defining: true,
       attrs: {
+        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
@@ -782,13 +811,65 @@ 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, 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.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);
+                walkThrough(view.state, (tr) => view.dispatch(tr));
+                return false;
+              }
+            }
+          },
+          appendTransaction: (transactions, _, nextState) => {
+            let tr = null;
+            if (transactions.some((transaction) => transaction.docChanged)) {
+              walkThrough(nextState, (t) => {
+                tr = t;
+              });
+            }
+            return tr;
+          }
+        })
+      ];
     }
   };
 });
 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;
@@ -853,7 +934,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;
@@ -945,7 +1026,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;
@@ -1077,8 +1158,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
@@ -1087,7 +1171,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,
@@ -1154,7 +1241,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;
@@ -1260,12 +1347,14 @@ const orderedList = createNode((utils) => ({
 }));
 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: () => ({
@@ -1390,5 +1479,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