@milkdown/preset-gfm 5.5.0 → 6.0.0-next.0

package/lib/index.es.js

@@ -21,8 +21,8 @@ import { SupportedKeys as SupportedKeys$2, commonmark, commands as commands$1 }
 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 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, isInTable, Selection, findParentNode, TableMap, CellSelection, cloneTr, tableNodeTypes, 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 { themeManagerCtx, ThemeIcon, getPalette, ThemeSize, ThemeBorder, ThemeShadow, createCmdKey, schemaCtx, createCmd, editorViewCtx } 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: [
@@ -182,95 +182,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 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 isFirstRowSelected(selection);
+        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 +280,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 +418,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,15 +446,16 @@ 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);
-  }
+  utils.themeManager.onFlush(() => {
+    const style = utils.getStyle(injectStyle);
+    if (style) {
+      tooltip.classList.add(style);
+    }
+  });
   tooltip.classList.add("table-tooltip", "hide");
   return new Plugin({
     key: new PluginKey("MILKDOWN_TABLE_OP"),
@@ -476,172 +537,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 +547,6 @@ const NextCell = createCmdKey("NextCell");
 const BreakTable = createCmdKey("BreakTable");
 const InsertTable = createCmdKey("InsertTable");
 const table = createPlugin((utils) => {
-  injectStyle(utils);
   return {
     schema: () => ({
       node: {
@@ -789,11 +683,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 +692,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 +723,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 +747,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 +792,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 +817,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);
         }
       };
     }