@milkdown/preset-commonmark 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))
@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { createMark, createShortcut, createNode, createPlugin, AtomList } from "@milkdown/utils";
-import { createCmdKey, createCmd, schemaCtx, themeToolCtx, 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 { createCmdKey, createCmd, schemaCtx, commandsCtx, editorViewCtx } from "@milkdown/core";
+import { markRule, toggleMark, PluginKey, TextSelection, InputRule, Plugin, wrappingInputRule, wrapIn, Fragment, textblockTypeInputRule, setBlockType, ReplaceStep, AddMarkStep, Selection, findSelectedNodeOfType, splitListItem, sinkListItem, liftListItem } from "@milkdown/prose";
 import links from "remark-inline-links";
 const SupportedKeys = {
   HardBreak: "HardBreak",
@@ -44,14 +44,6 @@ const SupportedKeys = {
 const id$a = "code_inline";
 const ToggleInlineCode = createCmdKey("ToggleInlineCode");
 const codeInline = createMark((utils) => {
-  const style = utils.getStyle(({ palette, size, font }, { css }) => css`
-                background-color: ${palette("neutral")};
-                color: ${palette("background")};
-                border-radius: ${size.radius};
-                font-weight: 500;
-                font-family: ${font.code};
-                padding: 0 0.2rem;
-            `);
   return {
     id: id$a,
     schema: () => ({
@@ -59,7 +51,7 @@ const codeInline = createMark((utils) => {
       code: true,
       inclusive: false,
       parseDOM: [{ tag: "code" }],
-      toDOM: (mark) => ["code", { class: utils.getClassName(mark.attrs, "code-inline", style) }],
+      toDOM: (mark) => ["code", { class: utils.getClassName(mark.attrs, "code-inline") }],
       parseMarkdown: {
         match: (node) => node.type === "inlineCode",
         runner: (state, node, markType) => {
@@ -117,23 +109,11 @@ const em = createMark((utils) => ({
     [SupportedKeys.Em]: createShortcut(ToggleItalic, "Mod-i")
   }
 }));
+const key$1 = new PluginKey("MILKDOWN_PLUGIN_LINK_INPUT");
 const ToggleLink = createCmdKey("ToggleLink");
 const ModifyLink = createCmdKey("ModifyLink");
 const id$8 = "link";
-const link = createMark((utils) => {
-  const style = utils.getStyle((themeTool, { css }) => {
-    const lineColor = themeTool.palette("line");
-    return css`
-            color: ${themeTool.palette("secondary")};
-            cursor: pointer;
-            transition: all 0.4s ease-in-out;
-            font-weight: 500;
-            &:hover {
-                background-color: ${lineColor};
-                box-shadow: 0 0.2rem ${lineColor}, 0 -0.2rem ${lineColor};
-            }
-        `;
-  });
+const link = createMark((utils, options) => {
   return {
     id: id$8,
     schema: () => ({
@@ -153,7 +133,7 @@ const link = createMark((utils) => {
           }
         }
       ],
-      toDOM: (mark) => ["a", __spreadProps(__spreadValues({}, mark.attrs), { class: utils.getClassName(mark.attrs, id$8, style) })],
+      toDOM: (mark) => ["a", __spreadProps(__spreadValues({}, mark.attrs), { class: utils.getClassName(mark.attrs, id$8) })],
       parseMarkdown: {
         match: (node) => node.type === "link",
         runner: (state, node, markType) => {
@@ -214,15 +194,80 @@ const link = createMark((utils) => {
         }
         return tr;
       })
-    ]
+    ],
+    prosePlugins: (type, ctx) => {
+      return [
+        new Plugin({
+          key: key$1,
+          view: (editorView) => {
+            var _a, _b, _c;
+            const inputChipRenderer = utils.themeManager.get("input-chip", {
+              placeholder: (_b = (_a = options == null ? void 0 : options.input) == null ? void 0 : _a.placeholder) != null ? _b : "Input Web Link",
+              buttonText: (_c = options == null ? void 0 : options.input) == null ? void 0 : _c.buttonText,
+              onUpdate: (value) => {
+                ctx.get(commandsCtx).call(ModifyLink, value);
+              }
+            });
+            if (!inputChipRenderer)
+              return {};
+            const shouldDisplay = (view) => {
+              const { selection, doc: doc2 } = view.state;
+              const { from, to } = selection;
+              return selection.empty && selection instanceof TextSelection && doc2.rangeHasMark(from, from === to ? to + 1 : to, type);
+            };
+            const getCurrentLink = (view) => {
+              const { selection } = view.state;
+              let node;
+              const { from, to } = selection;
+              view.state.doc.nodesBetween(from, from === to ? to + 1 : to, (n) => {
+                if (type.isInSet(n.marks)) {
+                  node = n;
+                  return false;
+                }
+                return;
+              });
+              if (!node)
+                return;
+              const mark = node.marks.find((m) => m.type === type);
+              if (!mark)
+                return;
+              const value = mark.attrs["href"];
+              return value;
+            };
+            const renderByView = (view) => {
+              if (!view.editable) {
+                return;
+              }
+              const display = shouldDisplay(view);
+              if (display) {
+                inputChipRenderer.show(view);
+                inputChipRenderer.update(getCurrentLink(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 id$7 = "strong";
 const ToggleBold = createCmdKey("ToggleBold");
 const strong = createMark((utils) => {
-  const style = utils.getStyle((_, { css }) => css`
-                font-weight: 600;
-            `);
   return {
     id: id$7,
     schema: () => ({
@@ -231,7 +276,7 @@ const strong = createMark((utils) => {
         { tag: "strong" },
         { style: "font-style", getAttrs: (value) => value === "bold" }
       ],
-      toDOM: (mark) => ["strong", { class: utils.getClassName(mark.attrs, id$7, style) }],
+      toDOM: (mark) => ["strong", { class: utils.getClassName(mark.attrs, id$7) }],
       parseMarkdown: {
         match: (node) => node.type === "strong",
         runner: (state, node, markType) => {
@@ -261,15 +306,6 @@ const marks = [codeInline(), em(), strong(), link()];
 const id$6 = "blockquote";
 const WrapInBlockquote = createCmdKey("WrapInBlockquote");
 const blockquote = createNode((utils) => {
-  const style = utils.getStyle((themeTool, { css }) => css`
-                padding-left: 1.875rem;
-                line-height: 1.75rem;
-                border-left: 4px solid ${themeTool.palette("primary")};
-                * {
-                    font-size: 1rem;
-                    line-height: 1.5rem;
-                }
-            `);
   return {
     id: id$6,
     schema: () => ({
@@ -277,7 +313,7 @@ const blockquote = createNode((utils) => {
       group: "block",
       defining: true,
       parseDOM: [{ tag: "blockquote" }],
-      toDOM: (node) => ["blockquote", { class: utils.getClassName(node.attrs, id$6, style) }, 0],
+      toDOM: (node) => ["blockquote", { class: utils.getClassName(node.attrs, id$6) }, 0],
       parseMarkdown: {
         match: ({ type }) => type === id$6,
         runner: (state, node, type) => {
@@ -353,118 +389,10 @@ const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 const TurnIntoCodeFence = createCmdKey("TurnIntoCodeFence");
 const id$5 = "fence";
 const codeFence = createNode((utils, options) => {
-  const style = utils.getStyle(({ palette, mixin, size, font }, { css }) => {
-    const { shadow, scrollbar, border } = mixin;
-    const { lineWidth, radius } = size;
-    return css`
-            background-color: ${palette("background")};
-            color: ${palette("neutral")};
-            font-size: 0.85rem;
-            padding: 1.2rem 0.4rem 1.4rem;
-            border-radius: ${radius};
-            font-family: ${font.typography};
-
-            * {
-                margin: 0;
-            }
-
-            .code-fence_select-wrapper {
-                position: relative;
-            }
-
-            .code-fence_value {
-                width: 10.25rem;
-                box-sizing: border-box;
-                border-radius: ${size.radius};
-                margin: 0 1.2rem 1.2rem;
-                ${border()};
-                ${shadow()};
-                cursor: pointer;
-                background-color: ${palette("surface")};
-                position: relative;
-                display: flex;
-                color: ${palette("neutral", 0.87)};
-                letter-spacing: 0.5px;
-                height: 2.625rem;
-                align-items: center;
-
-                & > .icon {
-                    width: 2.625rem;
-                    height: 100%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    color: ${palette("solid", 0.87)};
-                    border-left: ${lineWidth} solid ${palette("line")};
-
-                    text-align: center;
-                    transition: all 0.2s ease-in-out;
-                    &:hover {
-                        background: ${palette("background")};
-                        color: ${palette("primary")};
-                    }
-                }
-
-                > span:first-child {
-                    padding-left: 1rem;
-                    flex: 1;
-                    font-weight: 500;
-                }
-            }
-
-            .code-fence_select-option {
-                list-style: none;
-                line-height: 2rem;
-                padding-left: 1rem;
-                cursor: pointer;
-                :hover {
-                    background: ${palette("secondary", 0.12)};
-                    color: ${palette("primary")};
-                }
-            }
-
-            .code-fence_select {
-                &[data-fold='true'] {
-                    display: none;
-                }
-
-                font-weight: 500;
-                position: absolute;
-                z-index: 1;
-                top: 2.625rem;
-                box-sizing: border-box;
-                left: 1.2rem;
-                padding: 0.5rem 0;
-                max-height: 16.75rem;
-                width: 10.25rem;
-                ${border()};
-                ${shadow()};
-                background-color: ${palette("surface")};
-                border-top: none;
-                overflow-y: auto;
-                display: flex;
-                flex-direction: column;
-
-                ${scrollbar("y")}
-            }
-
-            code {
-                line-height: 1.5;
-                font-family: ${font.code};
-            }
-
-            pre {
-                font-family: ${font.code};
-                margin: 0 1.2rem !important;
-                white-space: pre;
-                overflow: auto;
-                ${scrollbar("x")};
-            }
-        `;
-  });
+  const languageList = (options == null ? void 0 : options.languageList) || languageOptions;
   return {
     id: id$5,
-    schema: () => ({
+    schema: (ctx) => ({
       content: "text*",
       group: "block",
       marks: "",
@@ -479,6 +407,25 @@ const codeFence = createNode((utils, options) => {
         }
       },
       parseDOM: [
+        {
+          tag: "div.code-fence-container",
+          preserveWhitespace: "full",
+          getAttrs: (dom) => {
+            var _a;
+            if (!(dom instanceof HTMLElement)) {
+              throw new Error("Parse DOM error.");
+            }
+            return { language: (_a = dom.querySelector("pre")) == null ? void 0 : _a.dataset["language"] };
+          },
+          getContent: (dom, schema) => {
+            var _a, _b;
+            if (!(dom instanceof HTMLElement)) {
+              throw new Error("Parse DOM error.");
+            }
+            const textNode = schema.text((_b = (_a = dom.querySelector("pre")) == null ? void 0 : _a.textContent) != null ? _b : "");
+            return Fragment.from(textNode);
+          }
+        },
         {
           tag: "pre",
           preserveWhitespace: "full",
@@ -491,13 +438,49 @@ const codeFence = createNode((utils, options) => {
         }
       ],
       toDOM: (node) => {
+        const select = document.createElement("select");
+        languageList.forEach((lang) => {
+          const option = document.createElement("option");
+          option.value = lang;
+          option.innerText = !lang ? "--" : lang;
+          if (lang === node.attrs["language"]) {
+            option.selected = true;
+          }
+          select.appendChild(option);
+        });
+        select.onchange = (e) => {
+          const target = e.target;
+          if (!(target instanceof HTMLSelectElement)) {
+            return;
+          }
+          const view = ctx.get(editorViewCtx);
+          if (!view.editable) {
+            target.value = node.attrs["language"];
+            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, __spreadProps(__spreadValues({}, node.attrs), {
+            language: target.value
+          })));
+        };
         return [
-          "pre",
+          "div",
           {
-            "data-language": node.attrs["language"],
-            class: utils.getClassName(node.attrs, "code-fence", style)
+            class: "code-fence-container"
           },
-          ["code", { spellCheck: "false" }, 0]
+          select,
+          [
+            "pre",
+            {
+              "data-language": node.attrs["language"],
+              class: utils.getClassName(node.attrs, "code-fence")
+            },
+            ["code", { spellCheck: "false" }, 0]
+          ]
         ];
       },
       parseMarkdown: {
@@ -540,87 +523,49 @@ const codeFence = createNode((utils, options) => {
     shortcuts: {
       [SupportedKeys.CodeFence]: createShortcut(TurnIntoCodeFence, "Mod-Alt-c")
     },
-    view: (ctx) => (node, view, getPos) => {
-      const container = document.createElement("div");
-      const selectWrapper = document.createElement("div");
-      const select = document.createElement("ul");
-      const pre = document.createElement("pre");
-      const code = document.createElement("code");
-      const valueWrapper = document.createElement("div");
-      valueWrapper.className = "code-fence_value";
-      const value = document.createElement("span");
-      valueWrapper.appendChild(value);
-      if (view.editable) {
-        valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon("downArrow"));
-      }
-      select.className = "code-fence_select";
-      select.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!view.editable)
-          return;
-        const el = e.target;
-        if (!(el instanceof HTMLLIElement))
-          return;
+    view: () => (node, view, getPos) => {
+      let currNode = node;
+      const onSelectLanguage = (language) => {
         const { tr } = view.state;
         view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
           fold: true,
-          language: el.dataset["value"]
+          language
         }));
-      });
-      valueWrapper.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!view.editable)
-          return;
+      };
+      const onBlur = () => {
         const { tr } = view.state;
-        view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
-          fold: false,
-          language: container.dataset["language"]
-        }));
-      });
-      document.addEventListener("mousedown", () => {
-        if (!view.editable || select.dataset["fold"] === "true")
-          return;
+        view.dispatch(tr.setNodeMarkup(getPos(), void 0, __spreadProps(__spreadValues({}, currNode.attrs), {
+          fold: true
+        })));
+      };
+      const onFocus = () => {
         const { tr } = view.state;
-        view.dispatch(tr.setNodeMarkup(getPos(), void 0, {
-          fold: true,
-          language: container.dataset["language"]
-        }));
-      });
-      ((options == null ? void 0 : options.languageList) || languageOptions).forEach((lang) => {
-        const option = document.createElement("li");
-        option.className = "code-fence_select-option";
-        option.innerText = lang || "--";
-        select.appendChild(option);
-        option.setAttribute("data-value", lang);
+        view.dispatch(tr.setNodeMarkup(getPos(), void 0, __spreadProps(__spreadValues({}, currNode.attrs), {
+          fold: false
+        })));
+      };
+      const renderer = utils.themeManager.get("code-fence", {
+        onBlur,
+        onFocus,
+        onSelectLanguage,
+        editable: () => view.editable,
+        languageList
       });
-      code.spellcheck = false;
-      selectWrapper.className = "code-fence_select-wrapper";
-      selectWrapper.contentEditable = "false";
-      selectWrapper.append(valueWrapper);
-      selectWrapper.append(select);
-      pre.append(code);
-      const codeContent = document.createElement("div");
-      code.append(codeContent);
-      codeContent.style.whiteSpace = "inherit";
-      container.append(selectWrapper, pre);
-      container.setAttribute("class", utils.getClassName(node.attrs, "code-fence", style));
-      container.setAttribute("data-language", node.attrs["language"]);
-      value.innerText = node.attrs["language"] || "--";
-      select.setAttribute("data-fold", node.attrs["fold"] ? "true" : "false");
+      if (!renderer)
+        return {};
+      const { dom, contentDOM, onUpdate, onDestroy } = renderer;
+      onUpdate(currNode);
       return {
-        dom: container,
-        contentDOM: codeContent,
+        dom,
+        contentDOM,
         update: (updatedNode) => {
           if (updatedNode.type.name !== id$5)
             return false;
-          const lang = updatedNode.attrs["language"];
-          container.dataset["language"] = lang;
-          value.innerText = lang || "--";
-          select.setAttribute("data-fold", updatedNode.attrs["fold"] ? "true" : "false");
+          currNode = updatedNode;
+          onUpdate(currNode);
           return true;
-        }
+        },
+        destroy: onDestroy
       };
     }
   };
@@ -718,39 +663,6 @@ const TurnIntoHeading = createCmdKey("TurnIntoHeading");
 const headingPluginKey = new PluginKey("MILKDOWN_PLUGIN_ID");
 const heading = createNode((utils) => {
   const id2 = "heading";
-  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: () => ({
@@ -779,7 +691,7 @@ const heading = createNode((utils) => {
           `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"]))
+            class: utils.getClassName(node.attrs, `heading h${node.attrs["level"]}`)
           },
           0
         ];
@@ -873,17 +785,12 @@ const heading = createNode((utils) => {
 const id$4 = "hr";
 const InsertHr = createCmdKey("InsertHr");
 const hr = createNode((utils) => {
-  const style = utils.getStyle((themeTool, { css }) => css`
-            height: ${themeTool.size.lineWidth};
-            background-color: ${themeTool.palette("line")};
-            border-width: 0;
-        `);
   return {
     id: id$4,
     schema: () => ({
       group: "block",
       parseDOM: [{ tag: "hr" }],
-      toDOM: (node) => ["hr", { class: utils.getClassName(node.attrs, id$4, style) }],
+      toDOM: (node) => ["hr", { class: utils.getClassName(node.attrs, id$4) }],
       parseMarkdown: {
         match: ({ type }) => type === "thematicBreak",
         runner: (state, _, type) => {
@@ -930,115 +837,8 @@ const hr = createNode((utils) => {
 const ModifyImage = createCmdKey("ModifyImage");
 const InsertImage = createCmdKey("InsertImage");
 const id$3 = "image";
+const key = new PluginKey("MILKDOWN_PLUGIN_IMAGE_INPUT");
 const image = createNode((utils, options) => {
-  var _a, _b;
-  const placeholder = __spreadValues({
-    loading: "Loading...",
-    empty: "Add an Image",
-    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 }) => css`
-                display: inline-block;
-                position: relative;
-                text-align: center;
-                font-size: 0;
-                vertical-align: text-bottom;
-                line-height: 1;
-
-                ${isBlock ? `
-                width: 100%;
-                margin: 0 auto;
-                ` : ""}
-
-                &.ProseMirror-selectednode::after {
-                    content: '';
-                    background: ${themeTool.palette("secondary", 0.38)};
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                }
-
-                img {
-                    max-width: 100%;
-                    height: auto;
-                    object-fit: contain;
-                    margin: 0 2px;
-                }
-                .icon,
-                .placeholder {
-                    display: none;
-                }
-
-                &.system {
-                    width: 100%;
-                    padding: 0 2rem;
-
-                    img {
-                        width: 0;
-                        height: 0;
-                        display: none;
-                    }
-
-                    .icon,
-                    .placeholder {
-                        display: inline;
-                    }
-
-                    box-sizing: border-box;
-                    height: 3rem;
-                    background-color: ${themeTool.palette("background")};
-                    border-radius: ${themeTool.size.radius};
-                    display: inline-flex;
-                    gap: 2rem;
-                    justify-content: flex-start;
-                    align-items: center;
-                    .placeholder {
-                        margin: 0;
-                        line-height: 1;
-                        &::before {
-                            content: '';
-                            font-size: 0.875rem;
-                            color: ${themeTool.palette("neutral", 0.6)};
-                        }
-                    }
-                }
-
-                &.loading {
-                    .placeholder {
-                        &::before {
-                            content: '${placeholder.loading}';
-                        }
-                    }
-                }
-
-                &.empty {
-                    .placeholder {
-                        &::before {
-                            content: '${placeholder.empty}';
-                        }
-                    }
-                }
-
-                &.failed {
-                    .placeholder {
-                        &::before {
-                            content: '${placeholder.failed}';
-                        }
-                    }
-                }
-            `);
-  const style = utils.getStyle((_, { css }) => css`
-                display: inline-block;
-                margin: 0 auto;
-                object-fit: contain;
-                width: 100%;
-                position: relative;
-                height: auto;
-                text-align: center;
-            `);
   return {
     id: "image",
     schema: () => ({
@@ -1053,10 +853,7 @@ const image = createNode((utils, options) => {
       attrs: {
         src: { default: "" },
         alt: { default: null },
-        title: { default: null },
-        failed: { default: false },
-        loading: { default: true },
-        width: { default: null }
+        title: { default: null }
       },
       parseDOM: [
         {
@@ -1066,8 +863,6 @@ const image = createNode((utils, options) => {
               throw new Error();
             }
             return {
-              failed: dom.classList.contains("failed"),
-              loading: dom.classList.contains("loading"),
               src: dom.getAttribute("src") || "",
               alt: dom.getAttribute("alt"),
               title: dom.getAttribute("title") || dom.getAttribute("alt"),
@@ -1080,7 +875,7 @@ const image = createNode((utils, options) => {
         return [
           "img",
           __spreadProps(__spreadValues({}, node.attrs), {
-            class: utils.getClassName(node.attrs, id$3, node.attrs["failed"] ? "failed" : "", node.attrs["loading"] ? "loading" : "", style)
+            class: utils.getClassName(node.attrs, id$3)
           })
         ];
       },
@@ -1140,103 +935,90 @@ const image = createNode((utils, options) => {
         return tr;
       })
     ],
-    view: (ctx) => (node, view, getPos) => {
-      const nodeType = node.type;
-      const createIcon = ctx.get(themeToolCtx).slots.icon;
-      const container = document.createElement("span");
-      container.className = utils.getClassName(node.attrs, id$3, containerStyle);
-      const content = document.createElement("img");
-      container.append(content);
-      let icon = createIcon("image");
-      const placeholder2 = document.createElement("span");
-      placeholder2.classList.add("placeholder");
-      container.append(icon, placeholder2);
-      const setIcon = (name) => {
-        const nextIcon = createIcon(name);
-        container.replaceChild(nextIcon, icon);
-        icon = nextIcon;
-      };
-      const loadImage = (src2) => {
-        container.classList.add("system", "loading");
-        setIcon("loading");
-        const img = document.createElement("img");
-        img.src = src2;
-        img.onerror = () => {
-          const pos = getPos();
-          if (!pos)
-            return;
-          const { tr } = view.state;
-          const _tr = tr.setNodeMarkup(pos, nodeType, __spreadProps(__spreadValues({}, node.attrs), {
-            src: src2,
-            loading: false,
-            failed: true
-          }));
-          view.dispatch(_tr);
-        };
-        img.onload = () => {
-          const { tr } = view.state;
-          const pos = getPos();
-          if (!pos)
-            return;
-          const _tr = tr.setNodeMarkup(pos, nodeType, __spreadProps(__spreadValues({}, node.attrs), {
-            width: img.width,
-            src: src2,
-            loading: false,
-            failed: false
-          }));
-          view.dispatch(_tr);
-        };
-      };
-      const { src, loading, title, alt, width } = node.attrs;
-      content.src = src;
-      content.title = title || alt;
-      content.alt = alt;
-      if (width) {
-        content.width = width;
-      }
-      if (src.length === 0) {
-        container.classList.add("system", "empty");
-        setIcon("image");
-      } else if (loading) {
-        loadImage(src);
+    view: () => (node) => {
+      var _a, _b;
+      let currNode = node;
+      const placeholder = (_a = options == null ? void 0 : options.placeholder) != null ? _a : "Add an Image";
+      const isBlock = (_b = options == null ? void 0 : options.isBlock) != null ? _b : false;
+      const renderer = utils.themeManager.get("image", {
+        placeholder,
+        isBlock
+      });
+      if (!renderer) {
+        return {};
       }
+      const { dom, onUpdate } = renderer;
+      onUpdate(currNode);
       return {
-        dom: container,
+        dom,
         update: (updatedNode) => {
           if (updatedNode.type.name !== id$3)
             return false;
-          const { src: src2, alt: alt2, title: title2, loading: loading2, failed, width: width2 } = updatedNode.attrs;
-          content.src = src2;
-          content.alt = alt2;
-          content.title = title2 || alt2;
-          if (width2) {
-            content.width = width2;
-          }
-          if (loading2) {
-            loadImage(src2);
-            return true;
-          }
-          if (failed) {
-            container.classList.remove("loading", "empty");
-            container.classList.add("system", "failed");
-            setIcon("brokenImage");
-            return true;
-          }
-          if (src2.length > 0) {
-            container.classList.remove("system", "empty", "loading");
-            return true;
-          }
-          container.classList.add("system", "empty");
-          setIcon("image");
+          currNode = updatedNode;
+          onUpdate(currNode);
           return true;
         },
         selectNode: () => {
-          container.classList.add("ProseMirror-selectednode");
+          dom.classList.add("ProseMirror-selectednode");
         },
         deselectNode: () => {
-          container.classList.remove("ProseMirror-selectednode");
+          dom.classList.remove("ProseMirror-selectednode");
         }
       };
+    },
+    prosePlugins: (type, ctx) => {
+      return [
+        new Plugin({
+          key,
+          view: (editorView) => {
+            var _a, _b, _c;
+            const inputChipRenderer = utils.themeManager.get("input-chip", {
+              placeholder: (_b = (_a = options == null ? void 0 : options.input) == null ? void 0 : _a.placeholder) != null ? _b : "Input Image Link",
+              buttonText: (_c = options == null ? void 0 : options.input) == null ? void 0 : _c.buttonText,
+              onUpdate: (value) => {
+                ctx.get(commandsCtx).call(ModifyImage, value);
+              }
+            });
+            if (!inputChipRenderer)
+              return {};
+            const shouldDisplay = (view) => {
+              return Boolean(type && findSelectedNodeOfType(view.state.selection, type));
+            };
+            const getCurrentLink = (view) => {
+              const result = findSelectedNodeOfType(view.state.selection, type);
+              if (!result)
+                return;
+              const value = result.node.attrs["src"];
+              return value;
+            };
+            const renderByView = (view) => {
+              if (!view.editable) {
+                return;
+              }
+              const display = shouldDisplay(view);
+              if (display) {
+                inputChipRenderer.show(view);
+                inputChipRenderer.update(getCurrentLink(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();
+              }
+            };
+          }
+        })
+      ];
     }
   };
 });
@@ -1244,58 +1026,43 @@ const id$2 = "list_item";
 const SplitListItem = createCmdKey("SplitListItem");
 const SinkListItem = createCmdKey("SinkListItem");
 const LiftListItem = createCmdKey("LiftListItem");
-const listItem = createNode((utils) => {
-  const style = utils.getStyle((themeTool, { css }) => css`
-                &,
-                & > * {
-                    margin: 0.5rem 0;
-                }
-
-                &,
-                li {
-                    &::marker {
-                        color: ${themeTool.palette("primary")};
-                    }
-                }
-            `);
-  return {
-    id: id$2,
-    schema: () => ({
-      group: "listItem",
-      content: "paragraph block*",
-      defining: true,
-      parseDOM: [{ tag: "li" }],
-      toDOM: (node) => ["li", { class: utils.getClassName(node.attrs, "list-item", style) }, 0],
-      parseMarkdown: {
-        match: ({ type, checked }) => type === "listItem" && checked === null,
-        runner: (state, node, type) => {
-          state.openNode(type);
-          state.next(node.children);
-          state.closeNode();
-        }
-      },
-      toMarkdown: {
-        match: (node) => node.type.name === id$2,
-        runner: (state, node) => {
-          state.openNode("listItem");
-          state.next(node.content);
-          state.closeNode();
-        }
+const listItem = createNode((utils) => ({
+  id: id$2,
+  schema: () => ({
+    group: "listItem",
+    content: "paragraph block*",
+    defining: true,
+    parseDOM: [{ tag: "li" }],
+    toDOM: (node) => ["li", { class: utils.getClassName(node.attrs, "list-item") }, 0],
+    parseMarkdown: {
+      match: ({ type, checked }) => type === "listItem" && checked === null,
+      runner: (state, node, type) => {
+        state.openNode(type);
+        state.next(node.children);
+        state.closeNode();
+      }
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === id$2,
+      runner: (state, node) => {
+        state.openNode("listItem");
+        state.next(node.content);
+        state.closeNode();
       }
-    }),
-    inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
-    commands: (nodeType) => [
-      createCmd(SplitListItem, () => splitListItem(nodeType)),
-      createCmd(SinkListItem, () => sinkListItem(nodeType)),
-      createCmd(LiftListItem, () => liftListItem(nodeType))
-    ],
-    shortcuts: {
-      [SupportedKeys.NextListItem]: createShortcut(SplitListItem, "Enter"),
-      [SupportedKeys.SinkListItem]: createShortcut(SinkListItem, "Mod-]"),
-      [SupportedKeys.LiftListItem]: createShortcut(LiftListItem, "Mod-[")
     }
-  };
-});
+  }),
+  inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
+  commands: (nodeType) => [
+    createCmd(SplitListItem, () => splitListItem(nodeType)),
+    createCmd(SinkListItem, () => sinkListItem(nodeType)),
+    createCmd(LiftListItem, () => liftListItem(nodeType))
+  ],
+  shortcuts: {
+    [SupportedKeys.NextListItem]: createShortcut(SplitListItem, "Enter"),
+    [SupportedKeys.SinkListItem]: createShortcut(SinkListItem, "Mod-]"),
+    [SupportedKeys.LiftListItem]: createShortcut(LiftListItem, "Mod-[")
+  }
+}));
 const WrapInOrderedList = createCmdKey("WrapInOrderedList");
 const id$1 = "ordered_list";
 const orderedList = createNode((utils) => ({
@@ -1352,20 +1119,13 @@ const orderedList = createNode((utils) => ({
 const TurnIntoText = createCmdKey("TurnIntoText");
 const id = "paragraph";
 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: () => ({
       content: "inline*",
       group: "block",
       parseDOM: [{ tag: "p" }],
-      toDOM: (node) => ["p", { class: utils.getClassName(node.attrs, id, style) }, 0],
+      toDOM: (node) => ["p", { class: utils.getClassName(node.attrs, id) }, 0],
       parseMarkdown: {
         match: (node) => node.type === "paragraph",
         runner: (state, node, type) => {