@milkdown/preset-gfm 5.5.0 → 6.0.0

package/lib/index.es.js

@@ -4,7 +4,7 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
@@ -19,10 +19,10 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { SupportedKeys as SupportedKeys$2, commonmark, commands as commands$1 } from "@milkdown/preset-commonmark";
 export { InsertHardbreak, InsertHr, InsertImage, LiftListItem, ModifyImage, ModifyLink, SinkListItem, SplitListItem, ToggleBold, ToggleInlineCode, ToggleItalic, ToggleLink, TurnIntoCodeFence, TurnIntoHeading, TurnIntoText, WrapInBlockquote, WrapInBulletList, WrapInOrderedList, blockquote, bulletList, codeFence, codeInline, commonmark, commonmarkNodes, commonmarkPlugins, doc, em, hardbreak, heading, hr, image, link, listItem, orderedList, paragraph, strong, text } from "@milkdown/preset-commonmark";
-import { $prose, createPlugin, createShortcut, createMark, createNode, AtomList, $remark } from "@milkdown/utils";
+import { $prose, createNode, createPlugin, createShortcut, createMark, AtomList, $remark } from "@milkdown/utils";
 import remarkGFM from "remark-gfm";
-import { inputRules, InputRule, isInTable, Selection, findParentNode, TableMap, tableNodeTypes, CellSelection, cloneTr, addColumnBefore, addColumnAfter, selectedRect, setCellAttr, deleteTable, deleteColumn, deleteRow, calculateNodePosition, Decoration, Plugin, PluginKey, DecorationSet, tableNodes, TextSelection, goToNextCell, columnResizing, tableEditing, markRule, toggleMark, wrappingInputRule, splitListItem, sinkListItem, liftListItem, wrapIn } from "@milkdown/prose";
-import { themeToolCtx, createCmdKey, schemaCtx, createCmd } from "@milkdown/core";
+import { inputRules, InputRule, PluginKey, NodeSelection, findSelectedNodeOfType, wrappingInputRule, Plugin, isInTable, Selection, findParentNode, TableMap, CellSelection, cloneTr, tableNodeTypes, addColumnBefore, addColumnAfter, selectedRect, setCellAttr, deleteTable, deleteColumn, deleteRow, calculateNodePosition, Decoration, DecorationSet, tableNodes, TextSelection, goToNextCell, columnResizing, tableEditing, markRule, toggleMark, splitListItem, sinkListItem, liftListItem, wrapIn } from "@milkdown/prose";
+import { createCmdKey, editorViewCtx, createCmd, commandsCtx, themeManagerCtx, ThemeIcon, ThemeBorder, ThemeShadow, getPalette, ThemeSize, schemaCtx } from "@milkdown/core";
 const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/;
 const proseUrlPlugin = () => inputRules({
   rules: [
@@ -36,6 +36,315 @@ const proseUrlPlugin = () => inputRules({
   ]
 });
 const urlPlugin = $prose(() => proseUrlPlugin());
+const getFootnoteRefId = (label) => `footnote-ref-${label}`;
+const getFootnoteDefId = (label) => `footnote-def-${label}`;
+const key$1 = new PluginKey("MILKDOWN_PLUGIN_FOOTNOTE_DEF_INPUT");
+const ModifyFootnoteDef = createCmdKey("ModifyFootnoteDef");
+const footnoteDefinition = createNode((utils) => {
+  const id2 = "footnote_definition";
+  const markdownId = "footnoteDefinition";
+  return {
+    id: id2,
+    schema: (ctx) => ({
+      group: "block",
+      content: "block+",
+      defining: true,
+      attrs: {
+        label: {
+          default: ""
+        }
+      },
+      parseDOM: [
+        {
+          tag: `div[data-type="${id2}"]`,
+          getAttrs: (dom) => {
+            if (!(dom instanceof HTMLElement)) {
+              throw new Error();
+            }
+            return {
+              label: dom.dataset["label"]
+            };
+          }
+        }
+      ],
+      toDOM: (node) => {
+        const label = node.attrs["label"];
+        const className = utils.getClassName(node.attrs, "footnote-definition");
+        const dt = document.createElement("dt");
+        dt.textContent = `[${label}]:`;
+        dt.onclick = () => {
+          const view = ctx.get(editorViewCtx);
+          const selection = NodeSelection.create(view.state.doc, view.state.selection.from - 2);
+          view.dispatch(view.state.tr.setSelection(selection));
+        };
+        const a = document.createElement("a");
+        a.href = `#${getFootnoteRefId(label)}`;
+        a.contentEditable = "false";
+        a.textContent = "\u21A9";
+        a.onmousedown = (e) => {
+          e.preventDefault();
+        };
+        return [
+          "div",
+          {
+            class: className,
+            "data-label": label,
+            "data-type": id2,
+            id: getFootnoteDefId(label)
+          },
+          ["div", { class: "footnote-definition_content" }, dt, ["dd", 0]],
+          ["div", { class: "footnote-definition_anchor" }, a]
+        ];
+      },
+      parseMarkdown: {
+        match: ({ type }) => type === markdownId,
+        runner: (state, node, type) => {
+          state.openNode(type, {
+            label: node["label"]
+          }).next(node.children).closeNode();
+        }
+      },
+      toMarkdown: {
+        match: (node) => node.type.name === id2,
+        runner: (state, node) => {
+          state.openNode(markdownId, void 0, {
+            label: node.attrs["label"],
+            identifier: node.attrs["label"]
+          }).next(node.content).closeNode();
+        }
+      }
+    }),
+    commands: (nodeType) => [
+      createCmd(ModifyFootnoteDef, (label = "") => (state, dispatch) => {
+        const node = findSelectedNodeOfType(state.selection, nodeType);
+        if (!node)
+          return false;
+        const { tr } = state;
+        const _tr = tr.setNodeMarkup(node.pos, void 0, __spreadProps(__spreadValues({}, node.node.attrs), { label }));
+        dispatch == null ? void 0 : dispatch(_tr.setSelection(NodeSelection.create(_tr.doc, node.pos)));
+        return true;
+      })
+    ],
+    inputRules: (nodeType) => [
+      wrappingInputRule(/(?:\[\^)([^:]+)(?::)$/, nodeType, (match) => {
+        var _a;
+        const label = (_a = match[1]) != null ? _a : "footnote";
+        return {
+          label
+        };
+      }, () => false)
+    ],
+    prosePlugins: (type, ctx) => {
+      return [
+        new Plugin({
+          key: key$1,
+          view: (editorView) => {
+            const inputChipRenderer = utils.themeManager.get("input-chip", {
+              width: "12em",
+              placeholder: "Input Footnote Label",
+              onUpdate: (value) => {
+                ctx.get(commandsCtx).call(ModifyFootnoteDef, value);
+              },
+              isBindMode: true
+            });
+            if (!inputChipRenderer)
+              return {};
+            const shouldDisplay = (view) => {
+              return Boolean(type && findSelectedNodeOfType(view.state.selection, type));
+            };
+            const getCurrentLabel = (view) => {
+              const result = findSelectedNodeOfType(view.state.selection, type);
+              if (!result)
+                return;
+              const value = result.node.attrs["label"];
+              return value;
+            };
+            const renderByView = (view) => {
+              if (!view.editable) {
+                return;
+              }
+              const display = shouldDisplay(view);
+              if (display) {
+                inputChipRenderer.show(view);
+                inputChipRenderer.update(getCurrentLabel(view));
+              } else {
+                inputChipRenderer.hide();
+              }
+            };
+            inputChipRenderer.init(editorView);
+            renderByView(editorView);
+            return {
+              update: (view, prevState) => {
+                const isEqualSelection = (prevState == null ? void 0 : prevState.doc.eq(view.state.doc)) && prevState.selection.eq(view.state.selection);
+                if (isEqualSelection)
+                  return;
+                renderByView(view);
+              },
+              destroy: () => {
+                inputChipRenderer.destroy();
+              }
+            };
+          }
+        })
+      ];
+    }
+  };
+});
+const ModifyFootnoteRef = createCmdKey("ModifyFootnoteRef");
+const key = new PluginKey("MILKDOWN_PLUGIN_FOOTNOTE_REF_INPUT");
+const footnoteReference = createNode((utils) => {
+  const id2 = "footnote_reference";
+  return {
+    id: id2,
+    schema: (ctx) => ({
+      group: "inline",
+      inline: true,
+      atom: true,
+      attrs: {
+        label: {
+          default: ""
+        }
+      },
+      parseDOM: [
+        {
+          tag: `sup[data-type="${id2}"]`,
+          getAttrs: (dom) => {
+            if (!(dom instanceof HTMLElement)) {
+              throw new Error();
+            }
+            return {
+              label: dom.dataset["label"]
+            };
+          }
+        }
+      ],
+      toDOM: (node) => {
+        const label = node.attrs["label"];
+        const a = document.createElement("a");
+        const href = `#${getFootnoteDefId(label)}`;
+        a.href = href;
+        a.textContent = `[${label}]`;
+        a.onclick = (e) => {
+          const view = ctx.get(editorViewCtx);
+          if (view.editable) {
+            e.preventDefault();
+          }
+        };
+        a.ondblclick = () => {
+          const view = ctx.get(editorViewCtx);
+          if (view.editable) {
+            window.location.href = href;
+          }
+        };
+        return [
+          "sup",
+          {
+            "data-label": label,
+            "data-type": id2,
+            id: getFootnoteRefId(label)
+          },
+          a
+        ];
+      },
+      parseMarkdown: {
+        match: ({ type }) => type === "footnoteReference",
+        runner: (state, node, type) => {
+          state.addNode(type, {
+            label: node["label"]
+          });
+        }
+      },
+      toMarkdown: {
+        match: (node) => node.type.name === id2,
+        runner: (state, node) => {
+          state.addNode("footnoteReference", void 0, void 0, {
+            label: node.attrs["label"],
+            identifier: node.attrs["label"]
+          });
+        }
+      }
+    }),
+    commands: (nodeType) => [
+      createCmd(ModifyFootnoteRef, (label = "") => (state, dispatch) => {
+        const node = findSelectedNodeOfType(state.selection, nodeType);
+        if (!node)
+          return false;
+        const { tr } = state;
+        const _tr = tr.setNodeMarkup(node.pos, void 0, __spreadProps(__spreadValues({}, node.node.attrs), { label }));
+        dispatch == null ? void 0 : dispatch(_tr.setSelection(NodeSelection.create(_tr.doc, node.pos)));
+        return true;
+      })
+    ],
+    inputRules: (nodeType) => [
+      new InputRule(/(?:\[\^)([^\]]+)(?:\])$/, (state, match, start, end) => {
+        const $start = state.doc.resolve(start);
+        const index = $start.index();
+        const $end = state.doc.resolve(end);
+        if (!$start.parent.canReplaceWith(index, $end.index(), nodeType)) {
+          return null;
+        }
+        const label = match[1];
+        return state.tr.replaceRangeWith(start, end, nodeType.create({
+          label
+        }));
+      })
+    ],
+    prosePlugins: (type, ctx) => {
+      const inputChipRenderer = utils.themeManager.get("input-chip", {
+        width: "12em",
+        placeholder: "Input Footnote Label",
+        onUpdate: (value) => {
+          ctx.get(commandsCtx).call(ModifyFootnoteRef, value);
+        },
+        isBindMode: true
+      });
+      if (!inputChipRenderer)
+        return [];
+      const shouldDisplay = (view) => {
+        return Boolean(type && findSelectedNodeOfType(view.state.selection, type));
+      };
+      const getCurrentLabel = (view) => {
+        const result = findSelectedNodeOfType(view.state.selection, type);
+        if (!result)
+          return;
+        const value = result.node.attrs["label"];
+        return value;
+      };
+      const renderByView = (view) => {
+        if (!view.editable) {
+          return;
+        }
+        const display = shouldDisplay(view);
+        if (display) {
+          inputChipRenderer.show(view);
+          inputChipRenderer.update(getCurrentLabel(view));
+        } else {
+          inputChipRenderer.hide();
+        }
+      };
+      return [
+        new Plugin({
+          key,
+          view: (editorView) => {
+            inputChipRenderer.init(editorView);
+            renderByView(editorView);
+            return {
+              update: (view, prevState) => {
+                const isEqualSelection = (prevState == null ? void 0 : prevState.doc.eq(view.state.doc)) && prevState.selection.eq(view.state.selection);
+                if (isEqualSelection)
+                  return;
+                renderByView(view);
+              },
+              destroy: () => {
+                inputChipRenderer.destroy();
+              }
+            };
+          }
+        })
+      ];
+    }
+  };
+});
 const exitTable = (node) => (state, dispatch) => {
   if (!isInTable(state)) {
     return false;
@@ -182,95 +491,87 @@ const calculateItem = (actions, view) => {
     item.$.classList.remove("hide");
   });
 };
-var Action;
-(function(Action2) {
-  Action2[Action2["AddColLeft"] = 0] = "AddColLeft";
-  Action2[Action2["AddColRight"] = 1] = "AddColRight";
-  Action2[Action2["AddRowTop"] = 2] = "AddRowTop";
-  Action2[Action2["AddRowBottom"] = 3] = "AddRowBottom";
-  Action2[Action2["AlignLeft"] = 4] = "AlignLeft";
-  Action2[Action2["AlignCenter"] = 5] = "AlignCenter";
-  Action2[Action2["AlignRight"] = 6] = "AlignRight";
-  Action2[Action2["Delete"] = 7] = "Delete";
-})(Action || (Action = {}));
-const createActions = (ctx) => ({
-  [0]: {
-    $: ctx.get(themeToolCtx).slots.icon("leftArrow"),
-    command: () => addColumnBefore,
-    disable: (view) => !getCellSelection(view).isColSelection()
-  },
-  [1]: {
-    $: ctx.get(themeToolCtx).slots.icon("rightArrow"),
-    command: () => addColumnAfter,
-    disable: (view) => !getCellSelection(view).isColSelection()
-  },
-  [2]: {
-    $: ctx.get(themeToolCtx).slots.icon("upArrow"),
-    command: () => (state, dispatch) => {
-      if (!isInTable(state))
-        return false;
-      if (dispatch) {
-        const rect = selectedRect(state);
-        dispatch(addRowWithAlignment(state.tr, rect, rect.top));
-      }
-      return true;
+const createActions = (ctx) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  return {
+    [0]: {
+      $: (_a = ctx.get(themeManagerCtx).get(ThemeIcon, "leftArrow")) == null ? void 0 : _a.dom,
+      command: () => addColumnBefore,
+      disable: (view) => !getCellSelection(view).isColSelection()
     },
-    disable: (view) => !getCellSelection(view).isRowSelection() || getCellSelection(view).$head.parent.type.name === "table_header"
-  },
-  [3]: {
-    $: ctx.get(themeToolCtx).slots.icon("downArrow"),
-    command: () => (state, dispatch) => {
-      if (!isInTable(state))
-        return false;
-      if (dispatch) {
-        const rect = selectedRect(state);
-        dispatch(addRowWithAlignment(state.tr, rect, rect.bottom));
-      }
-      return true;
+    [1]: {
+      $: (_b = ctx.get(themeManagerCtx).get(ThemeIcon, "rightArrow")) == null ? void 0 : _b.dom,
+      command: () => addColumnAfter,
+      disable: (view) => !getCellSelection(view).isColSelection()
     },
-    disable: (view) => !getCellSelection(view).isRowSelection()
-  },
-  [4]: {
-    $: ctx.get(themeToolCtx).slots.icon("alignLeft"),
-    command: () => setCellAttr("alignment", "left"),
-    disable: (view) => !getCellSelection(view).isColSelection()
-  },
-  [5]: {
-    $: ctx.get(themeToolCtx).slots.icon("alignCenter"),
-    command: () => setCellAttr("alignment", "center"),
-    disable: (view) => !getCellSelection(view).isColSelection()
-  },
-  [6]: {
-    $: ctx.get(themeToolCtx).slots.icon("alignRight"),
-    command: () => setCellAttr("alignment", "right"),
-    disable: (view) => !getCellSelection(view).isColSelection()
-  },
-  [7]: {
-    $: ctx.get(themeToolCtx).slots.icon("delete"),
-    command: (_, view) => {
-      const selection = getCellSelection(view);
-      const isCol = selection.isColSelection();
-      const isRow = selection.isRowSelection();
-      if (isCol && isRow) {
-        return deleteTable;
-      }
-      if (isCol) {
-        return deleteColumn;
-      }
-      return deleteRow;
+    [2]: {
+      $: (_c = ctx.get(themeManagerCtx).get(ThemeIcon, "upArrow")) == null ? void 0 : _c.dom,
+      command: () => (state, dispatch) => {
+        if (!isInTable(state))
+          return false;
+        if (dispatch) {
+          const rect = selectedRect(state);
+          dispatch(addRowWithAlignment(state.tr, rect, rect.top));
+        }
+        return true;
+      },
+      disable: (view) => !getCellSelection(view).isRowSelection() || getCellSelection(view).$head.parent.type.name === "table_header"
     },
-    disable: (view) => {
-      const selection = getCellSelection(view);
-      if (selection.isRowSelection()) {
-        if (selection.isColSelection()) {
+    [3]: {
+      $: (_d = ctx.get(themeManagerCtx).get(ThemeIcon, "downArrow")) == null ? void 0 : _d.dom,
+      command: () => (state, dispatch) => {
+        if (!isInTable(state))
           return false;
+        if (dispatch) {
+          const rect = selectedRect(state);
+          dispatch(addRowWithAlignment(state.tr, rect, rect.bottom));
         }
-        return isFirstRowSelected(selection);
+        return true;
+      },
+      disable: (view) => !getCellSelection(view).isRowSelection()
+    },
+    [4]: {
+      $: (_e = ctx.get(themeManagerCtx).get(ThemeIcon, "alignLeft")) == null ? void 0 : _e.dom,
+      command: () => setCellAttr("alignment", "left"),
+      disable: (view) => !getCellSelection(view).isColSelection()
+    },
+    [5]: {
+      $: (_f = ctx.get(themeManagerCtx).get(ThemeIcon, "alignCenter")) == null ? void 0 : _f.dom,
+      command: () => setCellAttr("alignment", "center"),
+      disable: (view) => !getCellSelection(view).isColSelection()
+    },
+    [6]: {
+      $: (_g = ctx.get(themeManagerCtx).get(ThemeIcon, "alignRight")) == null ? void 0 : _g.dom,
+      command: () => setCellAttr("alignment", "right"),
+      disable: (view) => !getCellSelection(view).isColSelection()
+    },
+    [7]: {
+      $: (_h = ctx.get(themeManagerCtx).get(ThemeIcon, "delete")) == null ? void 0 : _h.dom,
+      command: (_, view) => {
+        const selection = getCellSelection(view);
+        const isCol = selection.isColSelection();
+        const isRow = selection.isRowSelection();
+        if (isCol && isRow) {
+          return deleteTable;
+        }
+        if (isCol) {
+          return deleteColumn;
+        }
+        return deleteRow;
+      },
+      disable: (view) => {
+        const selection = getCellSelection(view);
+        if (selection.isRowSelection()) {
+          if (selection.isColSelection()) {
+            return false;
+          }
+          return isFirstRowSelected(selection);
+        }
+        return false;
       }
-      return false;
     }
-  }
-});
+  };
+};
 const calculatePosition = (view, dom) => {
   const { selection } = view.state;
   const isCol = selection.isColSelection();
@@ -288,61 +589,128 @@ const calculatePosition = (view, dom) => {
     return [top, left];
   });
 };
-var ToolTipPos;
-(function(ToolTipPos2) {
+var ToolTipPos = /* @__PURE__ */ ((ToolTipPos2) => {
   ToolTipPos2["Left"] = "Left";
   ToolTipPos2["Top"] = "Top";
   ToolTipPos2["Point"] = "Point";
-})(ToolTipPos || (ToolTipPos = {}));
-const injectStyle$1 = ({ size, mixin, palette }, { css }) => {
-  var _a, _b;
+  return ToolTipPos2;
+})(ToolTipPos || {});
+const injectStyle = (themeManager, { css, injectGlobal }) => {
+  const palette = getPalette(themeManager);
+  const radius = themeManager.get(ThemeSize, "radius");
+  const lineWidth = themeManager.get(ThemeSize, "lineWidth");
+  injectGlobal`
+        .milkdown {
+            .tableWrapper {
+                table {
+                    width: calc(100% - 2em) !important;
+                    margin: 1em 0 1em 1em !important;
+
+                    .milkdown-cell-left,
+                    .milkdown-cell-point,
+                    .milkdown-cell-top {
+                        position: absolute;
+
+                        &::after {
+                            cursor: pointer;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            height: 100%;
+                            width: 100%;
+                            display: block;
+                            transition: all 0.2s ease-in-out;
+                            background: ${palette("secondary", 0.12)};
+                            content: '';
+                        }
+
+                        &:hover::after {
+                            background: ${palette("secondary", 0.38)};
+                        }
+                    }
+
+                    .milkdown-cell-left {
+                        left: calc(-6px - 0.5em);
+                        top: 0;
+                        bottom: 0;
+                        width: 0.5em;
+                    }
+
+                    .milkdown-cell-top {
+                        left: 0;
+                        right: 0;
+                        top: calc(-6px - 0.5em);
+                        height: 0.5em;
+                    }
+
+                    .milkdown-cell-point {
+                        left: calc(-2px - 1em);
+                        top: calc(-2px - 1em);
+                        width: 1em;
+                        height: 1em;
+
+                        .icon {
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            left: 0;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        }
+    `;
   return css`
-    display: inline-flex;
-    cursor: pointer;
-    z-index: 2;
+        display: inline-flex;
+        cursor: pointer;
+        z-index: 2;
 
-    justify-content: space-evenly;
+        justify-content: space-evenly;
 
-    position: absolute;
+        position: absolute;
 
-    border-radius: ${size.radius};
+        border-radius: ${radius};
 
-    ${(_a = mixin.border) == null ? void 0 : _a.call(mixin)};
+        ${themeManager.get(ThemeBorder, void 0)};
+        ${themeManager.get(ThemeShadow, void 0)};
 
-    ${(_b = mixin.shadow) == null ? void 0 : _b.call(mixin)};
+        overflow: hidden;
+        background: ${palette("surface")};
 
-    overflow: hidden;
-    background: ${palette("surface")};
+        .icon {
+            position: relative;
+            color: ${palette("solid", 0.87)};
 
-    .icon {
-        position: relative;
-        color: ${palette("solid", 0.87)};
+            width: 2em;
+            line-height: 2em;
+            text-align: center;
+            transition: all 0.4s ease-in-out;
 
-        width: 3rem;
-        line-height: 3rem;
-        text-align: center;
-        transition: all 0.4s ease-in-out;
-        &:hover {
-            background-color: ${palette("secondary", 0.12)};
-        }
-        &.active {
-            color: ${palette("primary")};
+            &:hover {
+                background-color: ${palette("secondary", 0.12)};
+            }
+
+            &.active {
+                color: ${palette("primary")};
+            }
+
+            &:not(:last-child)::after {
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: ${lineWidth};
+                bottom: 0;
+                background: ${palette("line")};
+            }
         }
-        &:not(:last-child)::after {
-            content: '';
-            position: absolute;
-            right: 0px;
-            top: 0;
-            width: ${size.lineWidth};
-            bottom: 0;
-            background: ${palette("line")};
+
+        &.hide,
+        .hide {
+            display: none;
         }
-    }
-    &.hide,
-    .hide {
-        display: none;
-    }
-`;
+    `;
 };
 const calculateClassName = (pos) => {
   switch (pos) {
@@ -359,11 +727,12 @@ const calculateClassName = (pos) => {
   }
 };
 function createWidget(ctx, cell, pos, index = 0) {
-  const widget = Decoration.widget(cell.pos + 1, (view) => {
+  return Decoration.widget(cell.pos + 1, (view) => {
+    var _a;
     const div = document.createElement("div");
     div.classList.add(calculateClassName(pos));
     if (pos === ToolTipPos.Point) {
-      div.appendChild(ctx.get(themeToolCtx).slots.icon("select"));
+      div.appendChild((_a = ctx.get(themeManagerCtx).get(ThemeIcon, "select")) == null ? void 0 : _a.dom);
     }
     div.addEventListener("mousedown", (e) => {
       if (!view)
@@ -386,16 +755,8 @@ function createWidget(ctx, cell, pos, index = 0) {
     });
     return div;
   });
-  return widget;
 }
 const operatorPlugin = (ctx, utils) => {
-  const items = createActions(ctx);
-  const tooltip = document.createElement("div");
-  const style = utils.getStyle(injectStyle$1);
-  if (style) {
-    tooltip.classList.add(style);
-  }
-  tooltip.classList.add("table-tooltip", "hide");
   return new Plugin({
     key: new PluginKey("MILKDOWN_TABLE_OP"),
     props: {
@@ -420,6 +781,15 @@ const operatorPlugin = (ctx, utils) => {
     },
     view: (editorView) => {
       var _a;
+      const items = Object.fromEntries(Object.entries(createActions(ctx)).filter(([, value]) => value.$ != null));
+      const tooltip = document.createElement("div");
+      utils.themeManager.onFlush(() => {
+        const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
+        if (style) {
+          tooltip.classList.add(style);
+        }
+      });
+      tooltip.classList.add("table-tooltip", "hide");
       Object.values(items).forEach(({ $ }) => tooltip.appendChild($));
       (_a = editorView.dom.parentNode) == null ? void 0 : _a.appendChild(tooltip);
       const listener = (e) => {
@@ -476,172 +846,6 @@ const schema = tableNodes({
     }
   }
 });
-const proseTableStyle = ({ css }) => css`
-    /* copy from https://github.com/ProseMirror/prosemirror-tables/blob/master/style/tables.css */
-    .ProseMirror .tableWrapper {
-        overflow-x: auto;
-    }
-    .ProseMirror table {
-        border-collapse: collapse;
-        table-layout: fixed;
-        width: 100%;
-        overflow: hidden;
-    }
-    .ProseMirror td,
-    .ProseMirror th {
-        vertical-align: top;
-        box-sizing: border-box;
-        position: relative;
-    }
-    .ProseMirror .column-resize-handle {
-        position: absolute;
-        right: -2px;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        z-index: 20;
-        background-color: #adf;
-        pointer-events: none;
-    }
-    .ProseMirror.resize-cursor {
-        cursor: ew-resize;
-        cursor: col-resize;
-    }
-    /* Give selected cells a blue overlay */
-    .ProseMirror .selectedCell:after {
-        z-index: 2;
-        position: absolute;
-        content: '';
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: rgba(200, 200, 255, 0.4);
-        pointer-events: none;
-    }
-`;
-const injectStyle = (utils) => {
-  return utils.getStyle(({ size, palette, mixin }, emotion) => {
-    var _a, _b, _c;
-    const css = emotion.injectGlobal;
-    css`
-            ${proseTableStyle(emotion)}
-
-            .tableWrapper {
-                margin: 0 !important;
-
-                ${(_a = mixin.scrollbar) == null ? void 0 : _a.call(mixin, "x")};
-
-                width: 100%;
-
-                table {
-                    width: calc(100% - 2rem) !important;
-                    border-radius: ${size.radius};
-                    box-sizing: border-box;
-                    margin: 1rem 0 1rem 1rem !important;
-                    overflow: auto !important;
-                    * {
-                        margin: 0 !important;
-                        box-sizing: border-box;
-                        font-size: 1rem;
-                    }
-                    tr {
-                        ${(_b = mixin.border) == null ? void 0 : _b.call(mixin, "bottom")};
-                    }
-
-                    th {
-                        background: ${palette("background", 0.5)};
-                        font-weight: 400;
-                    }
-
-                    th,
-                    td {
-                        min-width: 100px;
-                        ${(_c = mixin.border) == null ? void 0 : _c.call(mixin)};
-                        text-align: left;
-                        position: relative;
-                        line-height: 3rem;
-                        box-sizing: border-box;
-                        height: 3rem;
-                    }
-
-                    .selectedCell {
-                        &::after {
-                            background: ${palette("secondary", 0.38)};
-                        }
-                        & ::selection {
-                            background: transparent;
-                        }
-                    }
-
-                    .column-resize-handle {
-                        background: ${palette("primary")};
-                        width: ${size.lineWidth};
-                    }
-
-                    th,
-                    td {
-                        padding: 0 1rem;
-                        p {
-                            line-height: unset !important;
-                        }
-                    }
-
-                    .milkdown-cell-left,
-                    .milkdown-cell-point,
-                    .milkdown-cell-top {
-                        position: absolute;
-
-                        &::after {
-                            cursor: pointer;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            height: 100%;
-                            width: 100%;
-                            display: block;
-                            transition: all 0.2s ease-in-out;
-                            background: ${palette("secondary", 0.12)};
-                            content: '';
-                        }
-                        &:hover::after {
-                            background: ${palette("secondary", 0.38)};
-                        }
-                    }
-
-                    .milkdown-cell-left {
-                        left: calc(-6px - 0.5rem);
-                        top: 0;
-                        bottom: 0;
-                        width: 0.5rem;
-                    }
-
-                    .milkdown-cell-top {
-                        left: 0;
-                        right: 0;
-                        top: calc(-6px - 0.5rem);
-                        height: 0.5rem;
-                    }
-
-                    .milkdown-cell-point {
-                        left: calc(-2px - 1rem);
-                        top: calc(-2px - 1rem);
-                        width: 1rem;
-                        height: 1rem;
-
-                        .icon {
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            left: 0;
-                            right: 0;
-                        }
-                    }
-                }
-            }
-        `;
-  });
-};
 const SupportedKeys$1 = {
   NextCell: "NextCell",
   PrevCell: "PrevCell",
@@ -652,7 +856,6 @@ const NextCell = createCmdKey("NextCell");
 const BreakTable = createCmdKey("BreakTable");
 const InsertTable = createCmdKey("InsertTable");
 const table = createPlugin((utils) => {
-  injectStyle(utils);
   return {
     schema: () => ({
       node: {
@@ -789,11 +992,8 @@ const SupportedKeys = __spreadProps(__spreadValues(__spreadValues({}, SupportedK
   TaskList: "TaskList"
 });
 const ToggleStrikeThrough = createCmdKey("ToggleStrikeThrough");
+const id = "strike_through";
 const strikeThrough = createMark((utils) => {
-  const id = "strike_through";
-  const style = utils.getStyle((themeTool, { css }) => css`
-                text-decoration-color: ${themeTool.palette("secondary")};
-            `);
   return {
     id,
     schema: () => ({
@@ -801,7 +1001,7 @@ const strikeThrough = createMark((utils) => {
         { tag: "del" },
         { style: "text-decoration", getAttrs: (value) => value === "line-through" }
       ],
-      toDOM: (mark) => ["del", { class: utils.getClassName(mark.attrs, "strike-through", style) }],
+      toDOM: (mark) => ["del", { class: utils.getClassName(mark.attrs, "strike-through") }],
       parseMarkdown: {
         match: (node) => node.type === "delete",
         runner: (state, node, markType) => {
@@ -832,56 +1032,10 @@ const SinkTaskListItem = createCmdKey("SinkTaskListItem");
 const LiftTaskListItem = createCmdKey("LiftTaskListItem");
 const TurnIntoTaskList = createCmdKey("TurnIntoTaskList");
 const taskListItem = createNode((utils) => {
-  const id = "task_list_item";
-  const style = utils.getStyle(({ palette, size }, { css }) => css`
-                list-style-type: none;
-                position: relative;
-
-                & > div {
-                    overflow: hidden;
-                    padding: 0 2px;
-                }
-
-                label {
-                    position: absolute;
-                    top: 0;
-                    left: -2rem;
-                    display: inline-block;
-                    width: 1.5rem;
-                    height: 1.5rem;
-                    margin: 0.5rem 0;
-                    input {
-                        visibility: hidden;
-                    }
-                }
-                label:before {
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    border-radius: ${size.radius};
-                }
-                label:hover:before {
-                    background: ${palette("background")};
-                }
-                &[data-checked='true'] {
-                    label {
-                        color: ${palette("primary")};
-                    }
-                }
-                &[data-checked='false'] {
-                    label {
-                        color: ${palette("solid", 0.87)};
-                    }
-                }
-                .paragraph {
-                    margin: 0.5rem 0;
-                }
-            `);
+  const id2 = "task_list_item";
   return {
-    id,
-    schema: () => ({
+    id: id2,
+    schema: (ctx) => ({
       group: "listItem",
       content: "paragraph block*",
       defining: true,
@@ -902,15 +1056,40 @@ const taskListItem = createNode((utils) => {
           }
         }
       ],
-      toDOM: (node) => [
-        "li",
-        {
-          "data-type": "task-item",
-          "data-checked": node.attrs["checked"] ? "true" : "false",
-          class: utils.getClassName(node.attrs, "task-list-item", style)
-        },
-        0
-      ],
+      toDOM: (node) => {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.checked = node.attrs["checked"];
+        checkbox.className = utils.getClassName(node.attrs, "task-list-item_checkbox");
+        checkbox.onchange = (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLInputElement))
+            return;
+          const view = ctx.get(editorViewCtx);
+          if (!view.editable) {
+            checkbox.checked = !checkbox.checked;
+            return;
+          }
+          const { top, left } = target.getBoundingClientRect();
+          const result = view.posAtCoords({ top, left });
+          if (!result)
+            return;
+          const { tr } = view.state;
+          view.dispatch(tr.setNodeMarkup(result.inside, void 0, {
+            checked: target.checked
+          }));
+        };
+        return [
+          "li",
+          {
+            "data-type": "task-item",
+            "data-checked": node.attrs["checked"] ? "true" : "false",
+            class: utils.getClassName(node.attrs, "task-list-item")
+          },
+          checkbox,
+          ["span", { class: utils.getClassName(node.attrs, "task-list-item_body") }, 0]
+        ];
+      },
       parseMarkdown: {
         match: ({ type, checked }) => {
           return type === "listItem" && checked !== null;
@@ -922,7 +1101,7 @@ const taskListItem = createNode((utils) => {
         }
       },
       toMarkdown: {
-        match: (node) => node.type.name === id,
+        match: (node) => node.type.name === id2,
         runner: (state, node) => {
           state.openNode("listItem", void 0, { checked: node.attrs["checked"] });
           state.next(node.content);
@@ -947,68 +1126,30 @@ const taskListItem = createNode((utils) => {
       [SupportedKeys.LiftListItem]: createShortcut(LiftTaskListItem, "Mod-["),
       [SupportedKeys.TaskList]: createShortcut(TurnIntoTaskList, "Mod-Alt-9")
     },
-    view: (ctx) => (node, view, getPos) => {
-      const createIcon = ctx.get(themeToolCtx).slots.icon;
-      const listItem2 = document.createElement("li");
-      const checkboxWrapper = document.createElement("label");
-      const checkboxStyler = document.createElement("span");
-      const checkbox = document.createElement("input");
-      const content = document.createElement("div");
-      let icon = createIcon("unchecked");
-      checkboxWrapper.appendChild(icon);
-      const setIcon = (name) => {
-        const nextIcon = createIcon(name);
-        checkboxWrapper.replaceChild(nextIcon, icon);
-        icon = nextIcon;
-      };
-      checkboxWrapper.contentEditable = "false";
-      checkbox.type = "checkbox";
-      const onChange = (event) => {
-        const target = event.target;
-        if (!(target instanceof HTMLInputElement))
-          return;
-        if (!view.editable) {
-          checkbox.checked = !checkbox.checked;
-          return;
+    view: () => (node, view, getPos) => {
+      let currNode = node;
+      const renderer = utils.themeManager.get("task-list-item", {
+        editable: () => view.editable,
+        onChange: (selected) => {
+          const { tr } = view.state;
+          view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
+            checked: selected
+          }));
         }
-        const { tr } = view.state;
-        view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
-          checked: target.checked
-        }));
-      };
-      checkbox.addEventListener("change", onChange);
-      listItem2.dataset["checked"] = node.attrs["checked"];
-      if (node.attrs["checked"]) {
-        checkbox.setAttribute("checked", "checked");
-      }
-      checkboxWrapper.append(checkbox, checkboxStyler);
-      listItem2.append(checkboxWrapper, content);
-      const attributes = {
-        "data-type": "task-item",
-        "data-checked": node.attrs["checked"] ? "true" : "false",
-        class: utils.getClassName(node.attrs, "task-list-item", style)
-      };
-      Object.entries(attributes).forEach(([key, value]) => {
-        listItem2.setAttribute(key, value);
       });
-      setIcon(node.attrs["checked"] ? "checked" : "unchecked");
+      if (!renderer)
+        return {};
+      const { dom, contentDOM, onUpdate } = renderer;
+      onUpdate(currNode);
       return {
-        dom: listItem2,
-        contentDOM: content,
+        dom,
+        contentDOM,
         update: (updatedNode) => {
-          if (updatedNode.type.name !== id)
+          if (updatedNode.type.name !== id2)
             return false;
-          listItem2.dataset["checked"] = updatedNode.attrs["checked"];
-          if (updatedNode.attrs["checked"]) {
-            checkbox.setAttribute("checked", "checked");
-          } else {
-            checkbox.removeAttribute("checked");
-          }
-          setIcon(updatedNode.attrs["checked"] ? "checked" : "unchecked");
+          currNode = updatedNode;
+          onUpdate(currNode);
           return true;
-        },
-        destroy: () => {
-          checkbox.removeEventListener("change", onChange);
         }
       };
     }
@@ -1020,7 +1161,9 @@ const gfm = AtomList.create([
   table(),
   urlPlugin,
   strikeThrough(),
-  taskListItem()
+  taskListItem(),
+  footnoteReference(),
+  footnoteDefinition()
 ]);
 const commands = __spreadProps(__spreadValues({}, commands$1), {
   ToggleStrikeThrough,
@@ -1029,5 +1172,5 @@ const commands = __spreadProps(__spreadValues({}, commands$1), {
   LiftTaskListItem,
   SplitTaskListItem
 });
-export { BreakTable, InsertTable, LiftTaskListItem, NextCell, PrevCell, SinkTaskListItem, SplitTaskListItem, SupportedKeys, ToggleStrikeThrough, TurnIntoTaskList, commands, createTable, gfm, strikeThrough, table, taskListItem };
+export { BreakTable, InsertTable, LiftTaskListItem, ModifyFootnoteDef, ModifyFootnoteRef, NextCell, PrevCell, SinkTaskListItem, SplitTaskListItem, SupportedKeys, ToggleStrikeThrough, TurnIntoTaskList, commands, createTable, footnoteDefinition, footnoteReference, gfm, strikeThrough, table, taskListItem };
 //# sourceMappingURL=index.es.js.map