@jvs-milkdown/crepe 1.2.29 → 1.2.30

package/lib/esm/index.js

@@ -4011,12 +4011,12 @@ var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Ca
 var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$3, _provider$1, _state, _app$3, _ctx$1, _syncIcon;
+var _content$3, _provider$1, _state$2, _app$3, _ctx$1, _syncIcon;
 class BlockHandleView {
   constructor(ctx, config) {
     __privateAdd$5(this, _content$3);
     __privateAdd$5(this, _provider$1);
-    __privateAdd$5(this, _state, reactive({ icon: textIcon }));
+    __privateAdd$5(this, _state$2, reactive({ icon: textIcon }));
     __privateAdd$5(this, _app$3);
     __privateAdd$5(this, _ctx$1);
     this.update = () => {
@@ -4041,17 +4041,17 @@ class BlockHandleView {
         __privateGet$5(this, _syncIcon).call(this, node);
       } else {
         __privateGet$5(this, _content$3).classList.remove("empty-block");
-        __privateGet$5(this, _state).icon = textIcon;
+        __privateGet$5(this, _state$2).icon = textIcon;
       }
     };
     __privateAdd$5(this, _syncIcon, (node) => {
       var _a;
       if (node.type.name.includes("image")) {
-        __privateGet$5(this, _state).icon = imageIcon;
+        __privateGet$5(this, _state$2).icon = imageIcon;
         return;
       }
       if (node.type.name.includes("attachment")) {
-        __privateGet$5(this, _state).icon = fileLinkIcon;
+        __privateGet$5(this, _state$2).icon = fileLinkIcon;
         return;
       }
       switch (node.type.name) {
@@ -4066,40 +4066,40 @@ class BlockHandleView {
             h5Icon,
             h6Icon
           ];
-          __privateGet$5(this, _state).icon = (_a = headingIcons[level]) != null ? _a : textIcon;
+          __privateGet$5(this, _state$2).icon = (_a = headingIcons[level]) != null ? _a : textIcon;
           break;
         }
         case "blockquote":
-          __privateGet$5(this, _state).icon = quoteIcon;
+          __privateGet$5(this, _state$2).icon = quoteIcon;
           break;
         case "code_block":
-          __privateGet$5(this, _state).icon = codeIcon;
+          __privateGet$5(this, _state$2).icon = codeIcon;
           break;
         case "math_display":
         case "math_inline":
-          __privateGet$5(this, _state).icon = functionsIcon;
+          __privateGet$5(this, _state$2).icon = functionsIcon;
           break;
         case "hr":
-          __privateGet$5(this, _state).icon = dividerIcon;
+          __privateGet$5(this, _state$2).icon = dividerIcon;
           break;
         case "table":
-          __privateGet$5(this, _state).icon = tableIcon;
+          __privateGet$5(this, _state$2).icon = tableIcon;
           break;
         case "list_item":
           if (node.attrs.checked != null) {
-            __privateGet$5(this, _state).icon = todoListIcon;
+            __privateGet$5(this, _state$2).icon = todoListIcon;
           } else {
-            __privateGet$5(this, _state).icon = bulletListIcon;
+            __privateGet$5(this, _state$2).icon = bulletListIcon;
           }
           break;
         case "bullet_list":
-          __privateGet$5(this, _state).icon = bulletListIcon;
+          __privateGet$5(this, _state$2).icon = bulletListIcon;
           break;
         case "ordered_list":
-          __privateGet$5(this, _state).icon = orderedListIcon;
+          __privateGet$5(this, _state$2).icon = orderedListIcon;
           break;
         default:
-          __privateGet$5(this, _state).icon = textIcon;
+          __privateGet$5(this, _state$2).icon = textIcon;
       }
     });
     this.destroy = () => {
@@ -4162,7 +4162,7 @@ class BlockHandleView {
       addIcon: (_a = config == null ? void 0 : config.handleAddIcon) != null ? _a : plusIcon,
       handleIcon: (_b = config == null ? void 0 : config.handleDragIcon) != null ? _b : menuIcon,
       ctx: __privateGet$5(this, _ctx$1),
-      state: __privateGet$5(this, _state)
+      state: __privateGet$5(this, _state$2)
     });
     app.mount(content);
     __privateSet$5(this, _app$3, app);
@@ -4219,7 +4219,7 @@ class BlockHandleView {
 }
 _content$3 = new WeakMap();
 _provider$1 = new WeakMap();
-_state = new WeakMap();
+_state$2 = new WeakMap();
 _app$3 = new WeakMap();
 _ctx$1 = new WeakMap();
 _syncIcon = new WeakMap();
@@ -4451,8 +4451,33 @@ const diffBlockFeature = (editor, config = {}) => {
   }).use(diffBlock);
 };
 
-const remarkHighlightMarkPlugin = $remark(
-  "remarkHighlightMark",
+const supportedFontsCache = /* @__PURE__ */ new Map();
+const isFontSupported = (fontFamily) => {
+  if (!fontFamily) return true;
+  const normalizedFont = fontFamily.replace(/['"]/g, "");
+  if (supportedFontsCache.has(normalizedFont)) {
+    return supportedFontsCache.get(normalizedFont);
+  }
+  if (typeof document === "undefined") return true;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) return true;
+  const text = "abcdefghijklmnopqrstuvwxyz0123456789";
+  const size = "72px";
+  context.font = `${size} monospace`;
+  const baseMono = context.measureText(text).width;
+  context.font = `${size} sans-serif`;
+  const baseSans = context.measureText(text).width;
+  context.font = `${size} "${normalizedFont}", monospace`;
+  const testMono = context.measureText(text).width;
+  context.font = `${size} "${normalizedFont}", sans-serif`;
+  const testSans = context.measureText(text).width;
+  const supported = testMono !== baseMono || testSans !== baseSans;
+  supportedFontsCache.set(normalizedFont, supported);
+  return supported;
+};
+const remarkFontPlugin = $remark(
+  "remarkFont",
   () => function() {
     const data = this.data();
     function add(key, value) {
@@ -4464,31 +4489,46 @@ const remarkHighlightMarkPlugin = $remark(
     }
     add("toMarkdownExtensions", {
       handlers: {
-        highlightMark: (node, _, state) => {
-          const idAttr = node.id ? ` data-id="${node.id}"` : "";
-          return `<mark${idAttr}>${state.containerPhrasing(node, state)}</mark>`;
+        fontFamily: (node, _, state) => {
+          return `<span style="font-family:${node.fontFamily}">${state.containerPhrasing(node, state)}</span>`;
+        },
+        fontSize: (node, _, state) => {
+          return `<span style="font-size:${node.fontSize}">${state.containerPhrasing(node, state)}</span>`;
         }
       }
     });
     return (ast) => {
       visit(ast, (node, index, parent) => {
-        if ((node == null ? void 0 : node.type) === "html" && node.value.startsWith("<mark") && parent && index != null) {
-          const idMatch = node.value.match(/data-id="([^"]+)"/);
-          const id = idMatch ? idMatch[1] : null;
+        if ((node == null ? void 0 : node.type) === "html" && node.value.startsWith("<span") && parent && index != null) {
+          const hasFontFamily = node.value.match(/font-family:\s*([^"';>]+)/);
+          const hasFontSize = node.value.match(/font-size:\s*([^"';>]+)/);
+          if (!hasFontFamily && !hasFontSize) return;
+          let fontFamily = null;
+          let fontSize = null;
+          let markType = null;
+          if (hasFontFamily) {
+            fontFamily = hasFontFamily[1].trim();
+            markType = "fontFamily";
+          } else if (hasFontSize) {
+            fontSize = hasFontSize[1].trim();
+            markType = "fontSize";
+          }
           const endIndex = parent.children.findIndex(
-            (n, i) => i > index && n.type === "html" && n.value === "</mark>"
+            (n, i) => i > index && n.type === "html" && n.value === "</span>"
           );
-          if (endIndex !== -1) {
+          if (endIndex !== -1 && markType && (fontFamily || fontSize)) {
             const children = parent.children.splice(
               index,
               endIndex - index + 1
             );
             const content = children.slice(1, -1);
-            parent.children.splice(index, 0, {
-              type: "highlightMark",
-              id,
+            const payload = {
+              type: markType,
               children: content
-            });
+            };
+            if (fontFamily) payload.fontFamily = fontFamily;
+            if (fontSize) payload.fontSize = fontSize;
+            parent.children.splice(index, 0, payload);
             return index + 1;
           }
         }
@@ -4497,377 +4537,236 @@ const remarkHighlightMarkPlugin = $remark(
     };
   }
 );
-const highlightMarkAttr = $markAttr("highlightMark");
-const highlightMarkSchema = $markSchema("highlightMark", (ctx) => ({
+const fontFamilyAttr = $markAttr("fontFamily");
+const fontFamilySchema = $markSchema("fontFamily", (_ctx) => ({
   inclusive: true,
   attrs: {
-    id: { default: null }
+    fontFamily: { default: null }
   },
   parseDOM: [
     {
-      tag: "mark",
-      getAttrs: (dom) => ({
-        id: dom.getAttribute("data-id") || null
-      })
+      tag: 'span[style*="font-family"]',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) return false;
+        const fontFamily = dom.style.fontFamily || null;
+        if (!isFontSupported(fontFamily)) return false;
+        return { fontFamily };
+      }
     }
   ],
   toDOM: (mark) => {
-    const attrs = { ...ctx.get(highlightMarkAttr.key)(mark) };
-    if (mark.attrs.id) {
-      attrs["data-id"] = mark.attrs.id;
+    return ["span", { style: `font-family: ${mark.attrs.fontFamily}` }, 0];
+  },
+  parseMarkdown: {
+    match: (node) => node.type === "fontFamily",
+    runner: (state, node, markType) => {
+      state.openMark(markType, { fontFamily: node.fontFamily });
+      state.next(node.children);
+      state.closeMark(markType);
     }
-    return ["mark", attrs, 0];
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === "fontFamily",
+    runner: (state, mark) => {
+      state.withMark(mark, "fontFamily", void 0, {
+        fontFamily: mark.attrs.fontFamily
+      });
+    }
+  }
+}));
+const fontSizeAttr = $markAttr("fontSize");
+const fontSizeSchema = $markSchema("fontSize", (_ctx) => ({
+  inclusive: true,
+  attrs: {
+    fontSize: { default: null }
+  },
+  parseDOM: [
+    {
+      tag: 'span[style*="font-size"]',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) return false;
+        return { fontSize: dom.style.fontSize || null };
+      }
+    }
+  ],
+  toDOM: (mark) => {
+    return ["span", { style: `font-size: ${mark.attrs.fontSize}` }, 0];
   },
   parseMarkdown: {
-    match: (node) => node.type === "highlightMark",
+    match: (node) => node.type === "fontSize",
     runner: (state, node, markType) => {
-      state.openMark(markType, { id: node.id });
+      state.openMark(markType, { fontSize: node.fontSize });
       state.next(node.children);
       state.closeMark(markType);
     }
   },
   toMarkdown: {
-    match: (mark) => mark.type.name === "highlightMark",
+    match: (mark) => mark.type.name === "fontSize",
     runner: (state, mark) => {
-      state.withMark(mark, "highlightMark", void 0, { id: mark.attrs.id });
+      state.withMark(mark, "fontSize", void 0, {
+        fontSize: mark.attrs.fontSize
+      });
     }
   }
 }));
-const toggleHighlightMarkCommand = $command(
-  "ToggleHighlightMark",
-  (ctx) => () => (state, dispatch) => {
-    const markType = highlightMarkSchema.type(ctx);
-    const { $cursor, ranges, $from, $to } = state.selection;
-    if (dispatch) {
-      let tr = state.tr;
-      const newId = Math.random().toString(36).substring(2, 9);
-      const creatMark = () => markType.create({ id: newId });
-      if ($cursor) {
-        const isEmptyBlock = $cursor.parent.content.size === 0;
-        if (isEmptyBlock) {
+const toggleFontFamilyCommand = $command(
+  "ToggleFontFamily",
+  (ctx) => (fontFamily) => {
+    return (state, dispatch) => {
+      const markType = fontFamilySchema.type(ctx);
+      const { $cursor, ranges } = state.selection;
+      if (dispatch) {
+        let tr = state.tr;
+        if ($cursor) {
           const marks = state.storedMarks || $cursor.marks();
           const currentMark = markType.isInSet(marks);
-          if (currentMark) {
+          if (currentMark && currentMark.attrs.fontFamily === fontFamily) {
             tr = tr.removeStoredMark(markType);
           } else {
-            const zwsp = "\u200B";
-            tr = tr.insertText(zwsp, $cursor.pos);
-            tr = tr.addMark($cursor.pos, $cursor.pos + 1, creatMark());
-            tr = tr.setSelection(TextSelection.create(tr.doc, $cursor.pos));
-          }
-        } else {
-          const start = $cursor.start();
-          const end = $cursor.end();
-          const hasMark = state.doc.rangeHasMark(start, end, markType);
-          if (hasMark) {
-            tr = tr.removeMark(start, end, markType);
-            if ($cursor.parent.content.size === 1 && $cursor.parent.textContent === "\u200B") {
-              tr = tr.delete(start, end);
-            }
-          } else {
-            tr = tr.addMark(start, end, creatMark());
-          }
-        }
-      } else {
-        let hasMark = false;
-        for (const range of ranges) {
-          const { $from: $from2, $to: $to2 } = range;
-          if (state.doc.rangeHasMark($from2.pos, $to2.pos, markType)) {
-            hasMark = true;
-            break;
-          }
-        }
-        if (hasMark) {
-          for (const range of ranges) {
-            const { $from: $from2, $to: $to2 } = range;
-            tr = tr.removeMark($from2.pos, $to2.pos, markType);
+            tr = tr.removeStoredMark(markType);
+            if (fontFamily)
+              tr = tr.addStoredMark(markType.create({ fontFamily }));
           }
         } else {
+          let hasSameFontFamily = false;
           for (const range of ranges) {
-            const { $from: $from2, $to: $to2 } = range;
-            tr = tr.removeMark($from2.pos, $to2.pos, markType);
-          }
-          let canFlatten = true;
-          let blockCount = 0;
-          state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-            if (node.isTextblock) {
-              blockCount++;
-            }
-            if (node.isBlock) {
-              const name = node.type.name;
-              if (name !== "paragraph" && name !== "doc" && name !== "blockquote") {
-                canFlatten = false;
-              }
-            }
-          });
-          if (canFlatten && blockCount > 1) {
-            const nodes = [];
+            const { $from, $to } = range;
             state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-              if (node.isTextblock) {
-                const hardbreakType = state.schema.nodes.hardbreak;
-                if (hardbreakType && nodes.length > 0) {
-                  nodes.push(hardbreakType.create());
+              if (node.isText) {
+                const mark = markType.isInSet(node.marks);
+                if (mark && mark.attrs.fontFamily === fontFamily) {
+                  hasSameFontFamily = true;
                 }
-                node.forEach((child) => nodes.push(child));
               }
             });
-            const paragraphType = state.schema.nodes.paragraph;
-            const range = $from.blockRange($to);
-            if (paragraphType && range) {
-              const p = paragraphType.create({}, nodes);
-              tr = tr.replaceWith(range.start, range.end, p);
+          }
+          for (const range of ranges) {
+            const { $from, $to } = range;
+            tr = tr.removeMark($from.pos, $to.pos, markType);
+            if (!hasSameFontFamily && fontFamily) {
               tr = tr.addMark(
-                range.start,
-                range.start + p.nodeSize,
-                creatMark()
+                $from.pos,
+                $to.pos,
+                markType.create({ fontFamily })
               );
             }
-          } else {
-            for (const range of ranges) {
-              const { $from: $from2, $to: $to2 } = range;
-              tr = tr.addMark($from2.pos, $to2.pos, creatMark());
-            }
           }
         }
+        dispatch(tr.scrollIntoView());
       }
-      dispatch(tr.scrollIntoView());
-    }
-    return true;
+      return true;
+    };
   }
 );
-const highlightMarkKeymap = $useKeymap("highlightMarkKeymap", {
-  ToggleHighlightMark: {
-    shortcuts: "Mod-Shift-h",
-    command: (ctx) => {
-      const commands = ctx.get(commandsCtx);
-      return () => commands.call(toggleHighlightMarkCommand.key);
-    }
-  },
-  HighlightMarkEnter: {
-    shortcuts: "Enter",
-    command: (ctx) => {
-      return (state, dispatch) => {
-        const markType = highlightMarkSchema.type(ctx);
-        const { $from, empty } = state.selection;
-        if (!empty) return false;
-        const marks = state.storedMarks || $from.marks();
-        if (!markType.isInSet(marks)) return false;
-        if (dispatch) {
-          const hardbreak = state.schema.nodes.hardbreak;
-          if (hardbreak) {
-            let tr = state.tr.replaceSelectionWith(hardbreak.create(), true);
-            dispatch(tr.scrollIntoView());
-          }
-        }
-        return true;
-      };
-    }
-  },
-  HighlightMarkArrowDown: {
-    shortcuts: "ArrowDown",
-    command: (ctx) => {
-      return (state, dispatch, view) => {
-        if (!view) return false;
-        const markType = highlightMarkSchema.type(ctx);
-        const { selection } = state;
-        const { $from, empty } = selection;
-        if (!empty) return false;
-        const isTextblock = $from.parent.isTextblock;
-        if (!isTextblock) return false;
-        let hasNodeAfter = false;
-        state.doc.nodesBetween(
-          $from.after(),
-          state.doc.content.size,
-          (node) => {
-            if (node.isTextblock) hasNodeAfter = true;
-          }
-        );
-        if (hasNodeAfter) return false;
-        let hasHighlight = false;
-        if ($from.parent.content.size === 0) {
-          const marks = state.storedMarks || $from.marks();
-          if (markType.isInSet(marks)) {
-            hasHighlight = true;
-          }
-        } else if ($from.parent.content.size === 1 && $from.parent.textContent === "\u200B") {
-          const child = $from.parent.child(0);
-          if (child.marks.some((m) => m.type === markType)) {
-            hasHighlight = true;
+const toggleFontSizeCommand = $command(
+  "ToggleFontSize",
+  (ctx) => (fontSize) => {
+    return (state, dispatch) => {
+      const markType = fontSizeSchema.type(ctx);
+      const { $cursor, ranges } = state.selection;
+      if (dispatch) {
+        let tr = state.tr;
+        if ($cursor) {
+          const marks = state.storedMarks || $cursor.marks();
+          const currentMark = markType.isInSet(marks);
+          if (currentMark && currentMark.attrs.fontSize === fontSize) {
+            tr = tr.removeStoredMark(markType);
+          } else {
+            tr = tr.removeStoredMark(markType);
+            if (fontSize) tr = tr.addStoredMark(markType.create({ fontSize }));
           }
         } else {
-          $from.parent.descendants((node) => {
-            if (node.isText && node.marks.some((m) => m.type === markType)) {
-              hasHighlight = true;
-            }
-          });
-        }
-        if (!hasHighlight) return false;
-        if (!view.endOfTextblock("down")) return false;
-        const paragraphType = state.schema.nodes.paragraph;
-        if (!paragraphType) return false;
-        if (dispatch) {
-          const p = paragraphType.create();
-          const insertPos = state.doc.content.size;
-          let tr = state.tr.insert(insertPos, p);
-          const newPos = insertPos + 1;
-          tr = tr.setSelection(TextSelection.create(tr.doc, newPos));
-          tr = tr.removeStoredMark(markType);
-          dispatch(tr.scrollIntoView());
-        }
-        return true;
-      };
-    }
-  },
-  HighlightMarkBackspace: {
-    shortcuts: "Backspace",
-    command: (ctx) => {
-      return (state, dispatch) => {
-        const markType = highlightMarkSchema.type(ctx);
-        const { selection } = state;
-        const { $from, empty } = selection;
-        if (!empty) return false;
-        const isTextblock = $from.parent.isTextblock;
-        if (!isTextblock) return false;
-        if ($from.parentOffset === 0) {
-          const prevBlockPos = $from.before() - 1;
-          if (prevBlockPos > 0) {
-            const $prev = state.doc.resolve(prevBlockPos);
-            const prevBlock = $prev.parent;
-            if (prevBlock && prevBlock.isTextblock) {
-              let prevHasHighlight = false;
-              prevBlock.descendants((node) => {
-                if (node.marks.some((m) => m.type === markType)) {
-                  prevHasHighlight = true;
-                }
-              });
-              if (prevHasHighlight) {
-                if (dispatch) {
-                  let tr = state.tr;
-                  tr = tr.delete($prev.start() - 1, $prev.end() + 1);
-                  dispatch(tr.scrollIntoView());
+          let hasSameFontSize = false;
+          for (const range of ranges) {
+            const { $from, $to } = range;
+            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+              if (node.isText) {
+                const mark = markType.isInSet(node.marks);
+                if (mark && mark.attrs.fontSize === fontSize) {
+                  hasSameFontSize = true;
                 }
-                return true;
               }
-            }
-          }
-        }
-        let hasHighlight = false;
-        let isPlaceholder = false;
-        if ($from.parent.content.size === 0) {
-          const marks = state.storedMarks || $from.marks();
-          if (markType.isInSet(marks)) {
-            hasHighlight = true;
-          }
-        } else if ($from.parent.content.size === 1 && $from.parent.textContent === "\u200B") {
-          const child = $from.parent.child(0);
-          if (child.marks.some((m) => m.type === markType)) {
-            hasHighlight = true;
-            isPlaceholder = true;
+            });
           }
-        }
-        if (hasHighlight) {
-          if (dispatch) {
-            let tr = state.tr;
-            if (isPlaceholder) {
-              const start = $from.start();
-              const end = $from.end();
-              tr = tr.delete(start, end);
+          for (const range of ranges) {
+            const { $from, $to } = range;
+            tr = tr.removeMark($from.pos, $to.pos, markType);
+            if (!hasSameFontSize && fontSize) {
+              tr = tr.addMark(
+                $from.pos,
+                $to.pos,
+                markType.create({ fontSize })
+              );
             }
-            tr = tr.removeStoredMark(markType);
-            dispatch(tr.scrollIntoView());
           }
-          return true;
         }
-        return false;
-      };
-    }
+        dispatch(tr.scrollIntoView());
+      }
+      return true;
+    };
   }
-});
-const highlightEmptyBlockPlugin = $prose((ctx) => {
-  return new Plugin({
-    key: new PluginKey("highlightEmptyBlock"),
-    props: {
-      decorations(state) {
-        const markType = highlightMarkSchema.type(ctx);
-        const decorations = [];
-        state.doc.descendants((node, pos) => {
-          if (node.isTextblock) {
-            if (node.content.size === 1 && node.textContent === "\u200B") {
-              const child = node.child(0);
-              if (child.marks.some((m) => m.type === markType)) {
-                decorations.push(
-                  Decoration.node(pos, pos + node.nodeSize, {
-                    class: "crepe-placeholder crepe-highlight-empty",
-                    "data-placeholder": "\u8BF7\u8F93\u5165\u5185\u5BB9"
-                  })
-                );
-              }
-            }
-          }
-        });
-        const { selection } = state;
-        const { $from, empty } = selection;
-        if (empty && $from.parent.isTextblock && $from.parent.content.size === 0) {
-          const marks = state.storedMarks || $from.marks();
-          if (markType.isInSet(marks)) {
-            const start = $from.start() - 1;
-            decorations.push(
-              Decoration.node(start, start + $from.parent.nodeSize, {
-                class: "crepe-placeholder crepe-highlight-empty",
-                "data-placeholder": "\u8BF7\u8F93\u5165\u5185\u5BB9"
-              })
-            );
-          }
-        }
-        return DecorationSet.create(state.doc, decorations);
+);
+function stripFontFamilyFromExternalHTML(html) {
+  if (html.includes("data-pm-slice")) return html;
+  try {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const styledElements = template.content.querySelectorAll(
+      '[style*="font-family"]'
+    );
+    styledElements.forEach((el) => {
+      if (el instanceof HTMLElement) {
+        el.style.removeProperty("font-family");
       }
-    },
-    appendTransaction(transactions, _oldState, newState) {
-      const markType = highlightMarkSchema.type(ctx);
-      if (!transactions.some((t) => t.docChanged)) return null;
-      const { empty, $from } = newState.selection;
-      if (!empty || !$from.parent.isTextblock) return null;
-      if ($from.parent.content.size !== 0) return null;
-      const marks = newState.storedMarks || $from.marks();
-      if (!markType.isInSet(marks)) return null;
-      const id = Math.random().toString(36).substring(2, 9);
-      const mark = markType.create({ id });
-      return newState.tr.insert($from.pos, newState.schema.text("\u200B", [mark]));
-    }
-  });
-});
-const highlightMark = [
-  highlightMarkAttr,
-  highlightMarkSchema,
-  toggleHighlightMarkCommand,
-  highlightMarkKeymap,
-  remarkHighlightMarkPlugin,
-  highlightEmptyBlockPlugin
-];
-
-const remarkUnderlinePlugin = $remark(
-  "remarkUnderline",
-  () => function() {
-    const data = this.data();
-    function add(key, value) {
-      if (Array.isArray(data[key])) {
-        data[key].push(value);
-      } else {
-        data[key] = [value];
+    });
+    const fontElements = template.content.querySelectorAll("font[face]");
+    fontElements.forEach((el) => {
+      if (el instanceof HTMLElement) {
+        el.removeAttribute("face");
+      }
+    });
+    html = template.innerHTML;
+    template.remove();
+  } catch (e) {
+  }
+  return html;
+}
+const fontPlugins = [
+  fontFamilyAttr,
+  fontFamilySchema,
+  toggleFontFamilyCommand,
+  fontSizeAttr,
+  fontSizeSchema,
+  toggleFontSizeCommand,
+  remarkFontPlugin
+];
+
+const remarkHighlightMarkPlugin = $remark(
+  "remarkHighlightMark",
+  () => function() {
+    const data = this.data();
+    function add(key, value) {
+      if (Array.isArray(data[key])) {
+        data[key].push(value);
+      } else {
+        data[key] = [value];
       }
     }
     add("toMarkdownExtensions", {
       handlers: {
-        underline: (node, _, state) => {
-          return `<u>${state.containerPhrasing(node, state)}</u>`;
+        highlightMark: (node, _, state) => {
+          const idAttr = node.id ? ` data-id="${node.id}"` : "";
+          return `<mark${idAttr}>${state.containerPhrasing(node, state)}</mark>`;
         }
       }
     });
     return (ast) => {
       visit(ast, (node, index, parent) => {
-        if ((node == null ? void 0 : node.type) === "html" && node.value === "<u>" && parent && index != null) {
+        if ((node == null ? void 0 : node.type) === "html" && node.value.startsWith("<mark") && parent && index != null) {
+          const idMatch = node.value.match(/data-id="([^"]+)"/);
+          const id = idMatch ? idMatch[1] : null;
           const endIndex = parent.children.findIndex(
-            (n, i) => i > index && n.type === "html" && n.value === "</u>"
+            (n, i) => i > index && n.type === "html" && n.value === "</mark>"
           );
           if (endIndex !== -1) {
             const children = parent.children.splice(
@@ -4876,7 +4775,8 @@ const remarkUnderlinePlugin = $remark(
             );
             const content = children.slice(1, -1);
             parent.children.splice(index, 0, {
-              type: "underline",
+              type: "highlightMark",
+              id,
               children: content
             });
             return index + 1;
@@ -4887,606 +4787,706 @@ const remarkUnderlinePlugin = $remark(
     };
   }
 );
-const underlineAttr = $markAttr("underline");
-const underlineSchema = $markSchema("underline", (ctx) => ({
+const highlightMarkAttr = $markAttr("highlightMark");
+const highlightMarkSchema = $markSchema("highlightMark", (ctx) => ({
   inclusive: true,
+  attrs: {
+    id: { default: null }
+  },
   parseDOM: [
-    { tag: "u" },
     {
-      style: "text-decoration",
-      getAttrs: (value) => value === "underline" ? null : false
+      tag: "mark",
+      getAttrs: (dom) => ({
+        id: dom.getAttribute("data-id") || null
+      })
     }
   ],
-  toDOM: (mark) => ["u", ctx.get(underlineAttr.key)(mark), 0],
+  toDOM: (mark) => {
+    const attrs = { ...ctx.get(highlightMarkAttr.key)(mark) };
+    if (mark.attrs.id) {
+      attrs["data-id"] = mark.attrs.id;
+    }
+    return ["mark", attrs, 0];
+  },
   parseMarkdown: {
-    match: (node) => node.type === "underline",
+    match: (node) => node.type === "highlightMark",
     runner: (state, node, markType) => {
-      state.openMark(markType);
+      state.openMark(markType, { id: node.id });
       state.next(node.children);
       state.closeMark(markType);
     }
   },
   toMarkdown: {
-    match: (mark) => mark.type.name === "underline",
+    match: (mark) => mark.type.name === "highlightMark",
     runner: (state, mark) => {
-      state.withMark(mark, "underline");
+      state.withMark(mark, "highlightMark", void 0, { id: mark.attrs.id });
     }
   }
 }));
-const toggleUnderlineCommand = $command(
-  "ToggleUnderline",
-  (ctx) => () => toggleMark(underlineSchema.type(ctx))
+const toggleHighlightMarkCommand = $command(
+  "ToggleHighlightMark",
+  (ctx) => () => (state, dispatch) => {
+    const markType = highlightMarkSchema.type(ctx);
+    const { $cursor, ranges, $from, $to } = state.selection;
+    if (dispatch) {
+      let tr = state.tr;
+      const newId = Math.random().toString(36).substring(2, 9);
+      const creatMark = () => markType.create({ id: newId });
+      if ($cursor) {
+        const isEmptyBlock = $cursor.parent.content.size === 0;
+        if (isEmptyBlock) {
+          const marks = state.storedMarks || $cursor.marks();
+          const currentMark = markType.isInSet(marks);
+          if (currentMark) {
+            tr = tr.removeStoredMark(markType);
+          } else {
+            const zwsp = "\u200B";
+            tr = tr.insertText(zwsp, $cursor.pos);
+            tr = tr.addMark($cursor.pos, $cursor.pos + 1, creatMark());
+            tr = tr.setSelection(TextSelection.create(tr.doc, $cursor.pos));
+          }
+        } else {
+          const start = $cursor.start();
+          const end = $cursor.end();
+          const hasMark = state.doc.rangeHasMark(start, end, markType);
+          if (hasMark) {
+            tr = tr.removeMark(start, end, markType);
+            if ($cursor.parent.content.size === 1 && $cursor.parent.textContent === "\u200B") {
+              tr = tr.delete(start, end);
+            }
+          } else {
+            tr = tr.addMark(start, end, creatMark());
+          }
+        }
+      } else {
+        let hasMark = false;
+        for (const range of ranges) {
+          const { $from: $from2, $to: $to2 } = range;
+          if (state.doc.rangeHasMark($from2.pos, $to2.pos, markType)) {
+            hasMark = true;
+            break;
+          }
+        }
+        if (hasMark) {
+          for (const range of ranges) {
+            const { $from: $from2, $to: $to2 } = range;
+            tr = tr.removeMark($from2.pos, $to2.pos, markType);
+          }
+        } else {
+          for (const range of ranges) {
+            const { $from: $from2, $to: $to2 } = range;
+            tr = tr.removeMark($from2.pos, $to2.pos, markType);
+          }
+          let canFlatten = true;
+          let blockCount = 0;
+          state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+            if (node.isTextblock) {
+              blockCount++;
+            }
+            if (node.isBlock) {
+              const name = node.type.name;
+              if (name !== "paragraph" && name !== "doc" && name !== "blockquote") {
+                canFlatten = false;
+              }
+            }
+          });
+          if (canFlatten && blockCount > 1) {
+            const nodes = [];
+            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+              if (node.isTextblock) {
+                const hardbreakType = state.schema.nodes.hardbreak;
+                if (hardbreakType && nodes.length > 0) {
+                  nodes.push(hardbreakType.create());
+                }
+                node.forEach((child) => nodes.push(child));
+              }
+            });
+            const paragraphType = state.schema.nodes.paragraph;
+            const range = $from.blockRange($to);
+            if (paragraphType && range) {
+              const p = paragraphType.create({}, nodes);
+              tr = tr.replaceWith(range.start, range.end, p);
+              tr = tr.addMark(
+                range.start,
+                range.start + p.nodeSize,
+                creatMark()
+              );
+            }
+          } else {
+            for (const range of ranges) {
+              const { $from: $from2, $to: $to2 } = range;
+              tr = tr.addMark($from2.pos, $to2.pos, creatMark());
+            }
+          }
+        }
+      }
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  }
 );
-const underlineKeymap = $useKeymap("underlineKeymap", {
-  ToggleUnderline: {
-    shortcuts: "Mod-u",
+const highlightMarkKeymap = $useKeymap("highlightMarkKeymap", {
+  ToggleHighlightMark: {
+    shortcuts: "Mod-Shift-h",
     command: (ctx) => {
       const commands = ctx.get(commandsCtx);
-      return () => commands.call(toggleUnderlineCommand.key);
-    }
-  }
-});
-const underline = [
-  underlineAttr,
-  underlineSchema,
-  toggleUnderlineCommand,
-  underlineKeymap,
-  remarkUnderlinePlugin
-];
-
-const listeners = /* @__PURE__ */ new Set();
-let _popupCount = 0;
-function getIsAnyPopupOpen() {
-  return _popupCount > 0;
-}
-function addPopupChangeListener(fn) {
-  listeners.add(fn);
-  return () => listeners.delete(fn);
-}
-function incrementPopupCount() {
-  const wasZero = _popupCount === 0;
-  _popupCount++;
-  if (wasZero) {
-    listeners.forEach((fn) => fn());
-  }
-}
-function decrementPopupCount() {
-  _popupCount = Math.max(0, _popupCount - 1);
-  if (_popupCount === 0) {
-    listeners.forEach((fn) => fn());
-  }
-}
-function resetPopupCount() {
-  _popupCount = 0;
-  listeners.forEach((fn) => fn());
-}
-
-function getGroups(config, ctx) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const groupBuilder = new GroupBuilder();
-  groupBuilder.addGroup("heading", ctx ? i18n(ctx, "toolbar.heading") : "Heading").addItem("h1", {
-    label: ctx ? i18n(ctx, "menu.item.h1") : "Heading 1",
-    icon: (_a = config == null ? void 0 : config.h1Icon) != null ? _a : h1Icon,
-    active: (ctx2) => {
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 1;
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 1;
-      if (isActive) {
-        commands.call(setBlockTypeCommand.key, {
-          nodeType: paragraphSchema.type(ctx2)
-        });
-      } else {
-        commands.call(wrapInHeadingCommand.key, 1);
-      }
+      return () => commands.call(toggleHighlightMarkCommand.key);
     }
-  }).addItem("h2", {
-    label: ctx ? i18n(ctx, "menu.item.h2") : "Heading 2",
-    icon: (_b = config == null ? void 0 : config.h2Icon) != null ? _b : h2Icon,
-    active: (ctx2) => {
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 2;
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 2;
-      if (isActive) {
-        commands.call(setBlockTypeCommand.key, {
-          nodeType: paragraphSchema.type(ctx2)
+  },
+  HighlightMarkEnter: {
+    shortcuts: "Enter",
+    command: (ctx) => {
+      return (state, dispatch) => {
+        const markType = highlightMarkSchema.type(ctx);
+        const { $from, empty } = state.selection;
+        if (!empty) return false;
+        const marks = state.storedMarks || $from.marks();
+        if (!markType.isInSet(marks)) return false;
+        if (dispatch) {
+          const hardbreak = state.schema.nodes.hardbreak;
+          if (hardbreak) {
+            let tr = state.tr.replaceSelectionWith(hardbreak.create(), true);
+            dispatch(tr.scrollIntoView());
+          }
+        }
+        return true;
+      };
+    }
+  },
+  HighlightMarkArrowDown: {
+    shortcuts: "ArrowDown",
+    command: (ctx) => {
+      return (state, dispatch, view) => {
+        if (!view) return false;
+        const markType = highlightMarkSchema.type(ctx);
+        const { selection } = state;
+        const { $from, empty } = selection;
+        if (!empty) return false;
+        const isTextblock = $from.parent.isTextblock;
+        if (!isTextblock) return false;
+        let hasNodeAfter = false;
+        state.doc.nodesBetween(
+          $from.after(),
+          state.doc.content.size,
+          (node) => {
+            if (node.isTextblock) hasNodeAfter = true;
+          }
+        );
+        if (hasNodeAfter) return false;
+        let hasHighlight = false;
+        if ($from.parent.content.size === 0) {
+          const marks = state.storedMarks || $from.marks();
+          if (markType.isInSet(marks)) {
+            hasHighlight = true;
+          }
+        } else if ($from.parent.content.size === 1 && $from.parent.textContent === "\u200B") {
+          const child = $from.parent.child(0);
+          if (child.marks.some((m) => m.type === markType)) {
+            hasHighlight = true;
+          }
+        } else {
+          $from.parent.descendants((node) => {
+            if (node.isText && node.marks.some((m) => m.type === markType)) {
+              hasHighlight = true;
+            }
+          });
+        }
+        if (!hasHighlight) return false;
+        if (!view.endOfTextblock("down")) return false;
+        const paragraphType = state.schema.nodes.paragraph;
+        if (!paragraphType) return false;
+        if (dispatch) {
+          const p = paragraphType.create();
+          const insertPos = state.doc.content.size;
+          let tr = state.tr.insert(insertPos, p);
+          const newPos = insertPos + 1;
+          tr = tr.setSelection(TextSelection.create(tr.doc, newPos));
+          tr = tr.removeStoredMark(markType);
+          dispatch(tr.scrollIntoView());
+        }
+        return true;
+      };
+    }
+  },
+  HighlightMarkBackspace: {
+    shortcuts: "Backspace",
+    command: (ctx) => {
+      return (state, dispatch) => {
+        const markType = highlightMarkSchema.type(ctx);
+        const { selection } = state;
+        const { $from, empty } = selection;
+        if (!empty) return false;
+        const isTextblock = $from.parent.isTextblock;
+        if (!isTextblock) return false;
+        if ($from.parentOffset === 0) {
+          const prevBlockPos = $from.before() - 1;
+          if (prevBlockPos > 0) {
+            const $prev = state.doc.resolve(prevBlockPos);
+            const prevBlock = $prev.parent;
+            if (prevBlock && prevBlock.isTextblock) {
+              let prevHasHighlight = false;
+              prevBlock.descendants((node) => {
+                if (node.marks.some((m) => m.type === markType)) {
+                  prevHasHighlight = true;
+                }
+              });
+              if (prevHasHighlight) {
+                if (dispatch) {
+                  let tr = state.tr;
+                  tr = tr.delete($prev.start() - 1, $prev.end() + 1);
+                  dispatch(tr.scrollIntoView());
+                }
+                return true;
+              }
+            }
+          }
+        }
+        let hasHighlight = false;
+        let isPlaceholder = false;
+        if ($from.parent.content.size === 0) {
+          const marks = state.storedMarks || $from.marks();
+          if (markType.isInSet(marks)) {
+            hasHighlight = true;
+          }
+        } else if ($from.parent.content.size === 1 && $from.parent.textContent === "\u200B") {
+          const child = $from.parent.child(0);
+          if (child.marks.some((m) => m.type === markType)) {
+            hasHighlight = true;
+            isPlaceholder = true;
+          }
+        }
+        if (hasHighlight) {
+          if (dispatch) {
+            let tr = state.tr;
+            if (isPlaceholder) {
+              const start = $from.start();
+              const end = $from.end();
+              tr = tr.delete(start, end);
+            }
+            tr = tr.removeStoredMark(markType);
+            dispatch(tr.scrollIntoView());
+          }
+          return true;
+        }
+        return false;
+      };
+    }
+  }
+});
+const highlightEmptyBlockPlugin = $prose((ctx) => {
+  return new Plugin({
+    key: new PluginKey("highlightEmptyBlock"),
+    props: {
+      decorations(state) {
+        const markType = highlightMarkSchema.type(ctx);
+        const decorations = [];
+        state.doc.descendants((node, pos) => {
+          if (node.isTextblock) {
+            if (node.content.size === 1 && node.textContent === "\u200B") {
+              const child = node.child(0);
+              if (child.marks.some((m) => m.type === markType)) {
+                decorations.push(
+                  Decoration.node(pos, pos + node.nodeSize, {
+                    class: "crepe-placeholder crepe-highlight-empty",
+                    "data-placeholder": "\u8BF7\u8F93\u5165\u5185\u5BB9"
+                  })
+                );
+              }
+            }
+          }
         });
+        const { selection } = state;
+        const { $from, empty } = selection;
+        if (empty && $from.parent.isTextblock && $from.parent.content.size === 0) {
+          const marks = state.storedMarks || $from.marks();
+          if (markType.isInSet(marks)) {
+            const start = $from.start() - 1;
+            decorations.push(
+              Decoration.node(start, start + $from.parent.nodeSize, {
+                class: "crepe-placeholder crepe-highlight-empty",
+                "data-placeholder": "\u8BF7\u8F93\u5165\u5185\u5BB9"
+              })
+            );
+          }
+        }
+        return DecorationSet.create(state.doc, decorations);
+      }
+    },
+    appendTransaction(transactions, _oldState, newState) {
+      const markType = highlightMarkSchema.type(ctx);
+      if (!transactions.some((t) => t.docChanged)) return null;
+      const { empty, $from } = newState.selection;
+      if (!empty || !$from.parent.isTextblock) return null;
+      if ($from.parent.content.size !== 0) return null;
+      const marks = newState.storedMarks || $from.marks();
+      if (!markType.isInSet(marks)) return null;
+      const id = Math.random().toString(36).substring(2, 9);
+      const mark = markType.create({ id });
+      return newState.tr.insert($from.pos, newState.schema.text("\u200B", [mark]));
+    }
+  });
+});
+const highlightMark = [
+  highlightMarkAttr,
+  highlightMarkSchema,
+  toggleHighlightMarkCommand,
+  highlightMarkKeymap,
+  remarkHighlightMarkPlugin,
+  highlightEmptyBlockPlugin
+];
+
+const remarkUnderlinePlugin = $remark(
+  "remarkUnderline",
+  () => function() {
+    const data = this.data();
+    function add(key, value) {
+      if (Array.isArray(data[key])) {
+        data[key].push(value);
       } else {
-        commands.call(wrapInHeadingCommand.key, 2);
+        data[key] = [value];
       }
     }
-  }).addItem("h3", {
-    label: ctx ? i18n(ctx, "menu.item.h3") : "Heading 3",
-    icon: (_c = config == null ? void 0 : config.h3Icon) != null ? _c : h3Icon,
+    add("toMarkdownExtensions", {
+      handlers: {
+        underline: (node, _, state) => {
+          return `<u>${state.containerPhrasing(node, state)}</u>`;
+        }
+      }
+    });
+    return (ast) => {
+      visit(ast, (node, index, parent) => {
+        if ((node == null ? void 0 : node.type) === "html" && node.value === "<u>" && parent && index != null) {
+          const endIndex = parent.children.findIndex(
+            (n, i) => i > index && n.type === "html" && n.value === "</u>"
+          );
+          if (endIndex !== -1) {
+            const children = parent.children.splice(
+              index,
+              endIndex - index + 1
+            );
+            const content = children.slice(1, -1);
+            parent.children.splice(index, 0, {
+              type: "underline",
+              children: content
+            });
+            return index + 1;
+          }
+        }
+        return;
+      });
+    };
+  }
+);
+const underlineAttr = $markAttr("underline");
+const underlineSchema = $markSchema("underline", (ctx) => ({
+  inclusive: true,
+  parseDOM: [
+    { tag: "u" },
+    {
+      style: "text-decoration",
+      getAttrs: (value) => value === "underline" ? null : false
+    }
+  ],
+  toDOM: (mark) => ["u", ctx.get(underlineAttr.key)(mark), 0],
+  parseMarkdown: {
+    match: (node) => node.type === "underline",
+    runner: (state, node, markType) => {
+      state.openMark(markType);
+      state.next(node.children);
+      state.closeMark(markType);
+    }
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === "underline",
+    runner: (state, mark) => {
+      state.withMark(mark, "underline");
+    }
+  }
+}));
+const toggleUnderlineCommand = $command(
+  "ToggleUnderline",
+  (ctx) => () => toggleMark(underlineSchema.type(ctx))
+);
+const underlineKeymap = $useKeymap("underlineKeymap", {
+  ToggleUnderline: {
+    shortcuts: "Mod-u",
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx);
+      return () => commands.call(toggleUnderlineCommand.key);
+    }
+  }
+});
+const underline = [
+  underlineAttr,
+  underlineSchema,
+  toggleUnderlineCommand,
+  underlineKeymap,
+  remarkUnderlinePlugin
+];
+
+const listeners = /* @__PURE__ */ new Set();
+let _popupCount = 0;
+function getIsAnyPopupOpen() {
+  return _popupCount > 0;
+}
+function addPopupChangeListener(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function incrementPopupCount() {
+  const wasZero = _popupCount === 0;
+  _popupCount++;
+  if (wasZero) {
+    listeners.forEach((fn) => fn());
+  }
+}
+function decrementPopupCount() {
+  _popupCount = Math.max(0, _popupCount - 1);
+  if (_popupCount === 0) {
+    listeners.forEach((fn) => fn());
+  }
+}
+function resetPopupCount() {
+  _popupCount = 0;
+  listeners.forEach((fn) => fn());
+}
+
+function getGroups(config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const groupBuilder = new GroupBuilder();
+  groupBuilder.addGroup("heading", ctx ? i18n(ctx, "toolbar.heading") : "Heading").addItem("h1", {
+    label: ctx ? i18n(ctx, "menu.item.h1") : "Heading 1",
+    icon: (_a = config == null ? void 0 : config.h1Icon) != null ? _a : h1Icon,
     active: (ctx2) => {
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 3;
+      return result.hasNode && !!result.target && result.target.attrs.level === 1;
     },
     onRun: (ctx2) => {
       const commands = ctx2.get(commandsCtx);
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 3;
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 1;
       if (isActive) {
         commands.call(setBlockTypeCommand.key, {
           nodeType: paragraphSchema.type(ctx2)
         });
       } else {
-        commands.call(wrapInHeadingCommand.key, 3);
+        commands.call(wrapInHeadingCommand.key, 1);
       }
     }
-  }).addItem("h4", {
-    label: ctx ? i18n(ctx, "menu.item.h4") : "Heading 4",
-    icon: (_d = config == null ? void 0 : config.h4Icon) != null ? _d : h4Icon,
+  }).addItem("h2", {
+    label: ctx ? i18n(ctx, "menu.item.h2") : "Heading 2",
+    icon: (_b = config == null ? void 0 : config.h2Icon) != null ? _b : h2Icon,
     active: (ctx2) => {
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 4;
+      return result.hasNode && !!result.target && result.target.attrs.level === 2;
     },
     onRun: (ctx2) => {
       const commands = ctx2.get(commandsCtx);
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 4;
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 2;
       if (isActive) {
         commands.call(setBlockTypeCommand.key, {
           nodeType: paragraphSchema.type(ctx2)
         });
       } else {
-        commands.call(wrapInHeadingCommand.key, 4);
+        commands.call(wrapInHeadingCommand.key, 2);
       }
     }
-  }).addItem("h5", {
-    label: ctx ? i18n(ctx, "menu.item.h5") : "Heading 5",
-    icon: (_e = config == null ? void 0 : config.h5Icon) != null ? _e : h5Icon,
+  }).addItem("h3", {
+    label: ctx ? i18n(ctx, "menu.item.h3") : "Heading 3",
+    icon: (_c = config == null ? void 0 : config.h3Icon) != null ? _c : h3Icon,
     active: (ctx2) => {
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 5;
+      return result.hasNode && !!result.target && result.target.attrs.level === 3;
     },
     onRun: (ctx2) => {
       const commands = ctx2.get(commandsCtx);
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 5;
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 3;
       if (isActive) {
         commands.call(setBlockTypeCommand.key, {
           nodeType: paragraphSchema.type(ctx2)
         });
       } else {
-        commands.call(wrapInHeadingCommand.key, 5);
+        commands.call(wrapInHeadingCommand.key, 3);
       }
     }
-  }).addItem("h6", {
-    label: ctx ? i18n(ctx, "menu.item.h6") : "Heading 6",
-    icon: (_f = config == null ? void 0 : config.h6Icon) != null ? _f : h6Icon,
+  }).addItem("h4", {
+    label: ctx ? i18n(ctx, "menu.item.h4") : "Heading 4",
+    icon: (_d = config == null ? void 0 : config.h4Icon) != null ? _d : h4Icon,
     active: (ctx2) => {
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      return result.hasNode && !!result.target && result.target.attrs.level === 6;
+      return result.hasNode && !!result.target && result.target.attrs.level === 4;
     },
     onRun: (ctx2) => {
       const commands = ctx2.get(commandsCtx);
       const view = ctx2.get(editorViewCtx);
       const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
-      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 6;
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 4;
       if (isActive) {
         commands.call(setBlockTypeCommand.key, {
           nodeType: paragraphSchema.type(ctx2)
         });
       } else {
-        commands.call(wrapInHeadingCommand.key, 6);
+        commands.call(wrapInHeadingCommand.key, 4);
       }
     }
-  });
-  groupBuilder.addGroup(
-    "formatting",
-    ctx ? i18n(ctx, "toolbar.formatting") : "Formatting"
-  ).addItem("bold", {
-    label: ctx ? i18n(ctx, "menu.item.bold") : "Bold",
-    icon: (_g = config == null ? void 0 : config.boldIcon) != null ? _g : boldIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(isMarkSelectedCommand.key, strongSchema.type(ctx2));
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleStrongCommand.key);
-    }
-  }).addItem("italic", {
-    label: ctx ? i18n(ctx, "menu.item.italic") : "Italic",
-    icon: (_h = config == null ? void 0 : config.italicIcon) != null ? _h : italicIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(
-        isMarkSelectedCommand.key,
-        emphasisSchema.type(ctx2)
-      );
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleEmphasisCommand.key);
-    }
-  }).addItem("strikethrough", {
-    label: ctx ? i18n(ctx, "menu.item.strikethrough") : "Strikethrough",
-    icon: (_i = config == null ? void 0 : config.strikethroughIcon) != null ? _i : strikethroughIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(
-        isMarkSelectedCommand.key,
-        strikethroughSchema.type(ctx2)
-      );
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleStrikethroughCommand.key);
-    }
-  }).addItem("underline", {
-    label: ctx ? i18n(ctx, "menu.item.underline") : "Underline",
-    icon: (_j = config == null ? void 0 : config.underlineIcon) != null ? _j : underlineIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(
-        isMarkSelectedCommand.key,
-        underlineSchema.type(ctx2)
-      );
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleUnderlineCommand.key);
-    }
-  });
-  const functionGroup = groupBuilder.addGroup(
-    "function",
-    ctx ? i18n(ctx, "toolbar.function") : "Function"
-  );
-  functionGroup.addItem("highlight", {
-    label: ctx ? i18n(ctx, "menu.item.highlight") : "Highlight",
-    icon: (_k = config == null ? void 0 : config.highlightIcon) != null ? _k : highLineCodeIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(
-        isMarkSelectedCommand.key,
-        highlightMarkSchema.type(ctx2)
-      );
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleHighlightMarkCommand.key);
-    }
-  });
-  functionGroup.addItem("code", {
-    label: ctx ? i18n(ctx, "menu.item.lineCode") : "Inline Code",
-    icon: (_l = config == null ? void 0 : config.codeIcon) != null ? _l : linCodeIcon,
-    active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(
-        isMarkSelectedCommand.key,
-        inlineCodeSchema.type(ctx2)
-      );
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      commands.call(toggleInlineCodeCommand.key);
-    }
-  });
-  functionGroup.addItem("link", {
-    label: ctx ? i18n(ctx, "menu.item.link") : "Link",
-    icon: (_m = config == null ? void 0 : config.linkIcon) != null ? _m : linkIcon,
+  }).addItem("h5", {
+    label: ctx ? i18n(ctx, "menu.item.h5") : "Heading 5",
+    icon: (_e = config == null ? void 0 : config.h5Icon) != null ? _e : h5Icon,
     active: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      return commands.call(isMarkSelectedCommand.key, linkSchema.type(ctx2));
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
+      return result.hasNode && !!result.target && result.target.attrs.level === 5;
     },
     onRun: (ctx2) => {
       const commands = ctx2.get(commandsCtx);
-      commands.call(toggleLinkCommand.key);
-    }
-  });
-  (_n = config == null ? void 0 : config.buildToolbar) == null ? void 0 : _n.call(config, groupBuilder);
-  return groupBuilder.build();
-}
-
-const supportedFontsCache = /* @__PURE__ */ new Map();
-const isFontSupported = (fontFamily) => {
-  if (!fontFamily) return true;
-  const normalizedFont = fontFamily.replace(/['"]/g, "");
-  if (supportedFontsCache.has(normalizedFont)) {
-    return supportedFontsCache.get(normalizedFont);
-  }
-  if (typeof document === "undefined") return true;
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  if (!context) return true;
-  const text = "abcdefghijklmnopqrstuvwxyz0123456789";
-  const size = "72px";
-  context.font = `${size} monospace`;
-  const baseMono = context.measureText(text).width;
-  context.font = `${size} sans-serif`;
-  const baseSans = context.measureText(text).width;
-  context.font = `${size} "${normalizedFont}", monospace`;
-  const testMono = context.measureText(text).width;
-  context.font = `${size} "${normalizedFont}", sans-serif`;
-  const testSans = context.measureText(text).width;
-  const supported = testMono !== baseMono || testSans !== baseSans;
-  supportedFontsCache.set(normalizedFont, supported);
-  return supported;
-};
-const remarkFontPlugin = $remark(
-  "remarkFont",
-  () => function() {
-    const data = this.data();
-    function add(key, value) {
-      if (Array.isArray(data[key])) {
-        data[key].push(value);
-      } else {
-        data[key] = [value];
-      }
-    }
-    add("toMarkdownExtensions", {
-      handlers: {
-        fontFamily: (node, _, state) => {
-          return `<span style="font-family:${node.fontFamily}">${state.containerPhrasing(node, state)}</span>`;
-        },
-        fontSize: (node, _, state) => {
-          return `<span style="font-size:${node.fontSize}">${state.containerPhrasing(node, state)}</span>`;
-        }
-      }
-    });
-    return (ast) => {
-      visit(ast, (node, index, parent) => {
-        if ((node == null ? void 0 : node.type) === "html" && node.value.startsWith("<span") && parent && index != null) {
-          const hasFontFamily = node.value.match(/font-family:\s*([^"';>]+)/);
-          const hasFontSize = node.value.match(/font-size:\s*([^"';>]+)/);
-          if (!hasFontFamily && !hasFontSize) return;
-          let fontFamily = null;
-          let fontSize = null;
-          let markType = null;
-          if (hasFontFamily) {
-            fontFamily = hasFontFamily[1].trim();
-            markType = "fontFamily";
-          } else if (hasFontSize) {
-            fontSize = hasFontSize[1].trim();
-            markType = "fontSize";
-          }
-          const endIndex = parent.children.findIndex(
-            (n, i) => i > index && n.type === "html" && n.value === "</span>"
-          );
-          if (endIndex !== -1 && markType && (fontFamily || fontSize)) {
-            const children = parent.children.splice(
-              index,
-              endIndex - index + 1
-            );
-            const content = children.slice(1, -1);
-            const payload = {
-              type: markType,
-              children: content
-            };
-            if (fontFamily) payload.fontFamily = fontFamily;
-            if (fontSize) payload.fontSize = fontSize;
-            parent.children.splice(index, 0, payload);
-            return index + 1;
-          }
-        }
-        return;
-      });
-    };
-  }
-);
-const fontFamilyAttr = $markAttr("fontFamily");
-const fontFamilySchema = $markSchema("fontFamily", (_ctx) => ({
-  inclusive: true,
-  attrs: {
-    fontFamily: { default: null }
-  },
-  parseDOM: [
-    {
-      tag: 'span[style*="font-family"]',
-      getAttrs: (dom) => {
-        if (!(dom instanceof HTMLElement)) return false;
-        const fontFamily = dom.style.fontFamily || null;
-        if (!isFontSupported(fontFamily)) return false;
-        return { fontFamily };
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 5;
+      if (isActive) {
+        commands.call(setBlockTypeCommand.key, {
+          nodeType: paragraphSchema.type(ctx2)
+        });
+      } else {
+        commands.call(wrapInHeadingCommand.key, 5);
       }
     }
-  ],
-  toDOM: (mark) => {
-    return ["span", { style: `font-family: ${mark.attrs.fontFamily}` }, 0];
-  },
-  parseMarkdown: {
-    match: (node) => node.type === "fontFamily",
-    runner: (state, node, markType) => {
-      state.openMark(markType, { fontFamily: node.fontFamily });
-      state.next(node.children);
-      state.closeMark(markType);
+  }).addItem("h6", {
+    label: ctx ? i18n(ctx, "menu.item.h6") : "Heading 6",
+    icon: (_f = config == null ? void 0 : config.h6Icon) != null ? _f : h6Icon,
+    active: (ctx2) => {
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
+      return result.hasNode && !!result.target && result.target.attrs.level === 6;
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(view.state, headingSchema.type(ctx2));
+      const isActive = result.hasNode && !!result.target && result.target.attrs.level === 6;
+      if (isActive) {
+        commands.call(setBlockTypeCommand.key, {
+          nodeType: paragraphSchema.type(ctx2)
+        });
+      } else {
+        commands.call(wrapInHeadingCommand.key, 6);
+      }
     }
-  },
-  toMarkdown: {
-    match: (mark) => mark.type.name === "fontFamily",
-    runner: (state, mark) => {
-      state.withMark(mark, "fontFamily", void 0, {
-        fontFamily: mark.attrs.fontFamily
-      });
+  });
+  groupBuilder.addGroup(
+    "formatting",
+    ctx ? i18n(ctx, "toolbar.formatting") : "Formatting"
+  ).addItem("bold", {
+    label: ctx ? i18n(ctx, "menu.item.bold") : "Bold",
+    icon: (_g = config == null ? void 0 : config.boldIcon) != null ? _g : boldIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(isMarkSelectedCommand.key, strongSchema.type(ctx2));
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleStrongCommand.key);
     }
-  }
-}));
-const fontSizeAttr = $markAttr("fontSize");
-const fontSizeSchema = $markSchema("fontSize", (_ctx) => ({
-  inclusive: true,
-  attrs: {
-    fontSize: { default: null }
-  },
-  parseDOM: [
-    {
-      tag: 'span[style*="font-size"]',
-      getAttrs: (dom) => {
-        if (!(dom instanceof HTMLElement)) return false;
-        return { fontSize: dom.style.fontSize || null };
-      }
+  }).addItem("italic", {
+    label: ctx ? i18n(ctx, "menu.item.italic") : "Italic",
+    icon: (_h = config == null ? void 0 : config.italicIcon) != null ? _h : italicIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(
+        isMarkSelectedCommand.key,
+        emphasisSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleEmphasisCommand.key);
     }
-  ],
-  toDOM: (mark) => {
-    return ["span", { style: `font-size: ${mark.attrs.fontSize}` }, 0];
-  },
-  parseMarkdown: {
-    match: (node) => node.type === "fontSize",
-    runner: (state, node, markType) => {
-      state.openMark(markType, { fontSize: node.fontSize });
-      state.next(node.children);
-      state.closeMark(markType);
+  }).addItem("strikethrough", {
+    label: ctx ? i18n(ctx, "menu.item.strikethrough") : "Strikethrough",
+    icon: (_i = config == null ? void 0 : config.strikethroughIcon) != null ? _i : strikethroughIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(
+        isMarkSelectedCommand.key,
+        strikethroughSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleStrikethroughCommand.key);
     }
-  },
-  toMarkdown: {
-    match: (mark) => mark.type.name === "fontSize",
-    runner: (state, mark) => {
-      state.withMark(mark, "fontSize", void 0, {
-        fontSize: mark.attrs.fontSize
-      });
+  }).addItem("underline", {
+    label: ctx ? i18n(ctx, "menu.item.underline") : "Underline",
+    icon: (_j = config == null ? void 0 : config.underlineIcon) != null ? _j : underlineIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(
+        isMarkSelectedCommand.key,
+        underlineSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleUnderlineCommand.key);
     }
-  }
-}));
-const toggleFontFamilyCommand = $command(
-  "ToggleFontFamily",
-  (ctx) => (fontFamily) => {
-    return (state, dispatch) => {
-      const markType = fontFamilySchema.type(ctx);
-      const { $cursor, ranges } = state.selection;
-      if (dispatch) {
-        let tr = state.tr;
-        if ($cursor) {
-          const marks = state.storedMarks || $cursor.marks();
-          const currentMark = markType.isInSet(marks);
-          if (currentMark && currentMark.attrs.fontFamily === fontFamily) {
-            tr = tr.removeStoredMark(markType);
-          } else {
-            tr = tr.removeStoredMark(markType);
-            if (fontFamily)
-              tr = tr.addStoredMark(markType.create({ fontFamily }));
-          }
-        } else {
-          let hasSameFontFamily = false;
-          for (const range of ranges) {
-            const { $from, $to } = range;
-            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-              if (node.isText) {
-                const mark = markType.isInSet(node.marks);
-                if (mark && mark.attrs.fontFamily === fontFamily) {
-                  hasSameFontFamily = true;
-                }
-              }
-            });
-          }
-          for (const range of ranges) {
-            const { $from, $to } = range;
-            tr = tr.removeMark($from.pos, $to.pos, markType);
-            if (!hasSameFontFamily && fontFamily) {
-              tr = tr.addMark(
-                $from.pos,
-                $to.pos,
-                markType.create({ fontFamily })
-              );
-            }
-          }
-        }
-        dispatch(tr.scrollIntoView());
-      }
-      return true;
-    };
-  }
-);
-const toggleFontSizeCommand = $command(
-  "ToggleFontSize",
-  (ctx) => (fontSize) => {
-    return (state, dispatch) => {
-      const markType = fontSizeSchema.type(ctx);
-      const { $cursor, ranges } = state.selection;
-      if (dispatch) {
-        let tr = state.tr;
-        if ($cursor) {
-          const marks = state.storedMarks || $cursor.marks();
-          const currentMark = markType.isInSet(marks);
-          if (currentMark && currentMark.attrs.fontSize === fontSize) {
-            tr = tr.removeStoredMark(markType);
-          } else {
-            tr = tr.removeStoredMark(markType);
-            if (fontSize) tr = tr.addStoredMark(markType.create({ fontSize }));
-          }
-        } else {
-          let hasSameFontSize = false;
-          for (const range of ranges) {
-            const { $from, $to } = range;
-            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-              if (node.isText) {
-                const mark = markType.isInSet(node.marks);
-                if (mark && mark.attrs.fontSize === fontSize) {
-                  hasSameFontSize = true;
-                }
-              }
-            });
-          }
-          for (const range of ranges) {
-            const { $from, $to } = range;
-            tr = tr.removeMark($from.pos, $to.pos, markType);
-            if (!hasSameFontSize && fontSize) {
-              tr = tr.addMark(
-                $from.pos,
-                $to.pos,
-                markType.create({ fontSize })
-              );
-            }
-          }
-        }
-        dispatch(tr.scrollIntoView());
-      }
-      return true;
-    };
-  }
-);
-function stripFontFamilyFromExternalHTML(html) {
-  if (html.includes("data-pm-slice")) return html;
-  try {
-    const template = document.createElement("template");
-    template.innerHTML = html;
-    const styledElements = template.content.querySelectorAll(
-      '[style*="font-family"]'
-    );
-    styledElements.forEach((el) => {
-      if (el instanceof HTMLElement) {
-        el.style.removeProperty("font-family");
-      }
-    });
-    const fontElements = template.content.querySelectorAll("font[face]");
-    fontElements.forEach((el) => {
-      if (el instanceof HTMLElement) {
-        el.removeAttribute("face");
-      }
-    });
-    html = template.innerHTML;
-    template.remove();
-  } catch (e) {
-  }
-  return html;
+  });
+  const functionGroup = groupBuilder.addGroup(
+    "function",
+    ctx ? i18n(ctx, "toolbar.function") : "Function"
+  );
+  functionGroup.addItem("highlight", {
+    label: ctx ? i18n(ctx, "menu.item.highlight") : "Highlight",
+    icon: (_k = config == null ? void 0 : config.highlightIcon) != null ? _k : highLineCodeIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(
+        isMarkSelectedCommand.key,
+        highlightMarkSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleHighlightMarkCommand.key);
+    }
+  });
+  functionGroup.addItem("code", {
+    label: ctx ? i18n(ctx, "menu.item.lineCode") : "Inline Code",
+    icon: (_l = config == null ? void 0 : config.codeIcon) != null ? _l : linCodeIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(
+        isMarkSelectedCommand.key,
+        inlineCodeSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleInlineCodeCommand.key);
+    }
+  });
+  functionGroup.addItem("link", {
+    label: ctx ? i18n(ctx, "menu.item.link") : "Link",
+    icon: (_m = config == null ? void 0 : config.linkIcon) != null ? _m : linkIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      return commands.call(isMarkSelectedCommand.key, linkSchema.type(ctx2));
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleLinkCommand.key);
+    }
+  });
+  (_n = config == null ? void 0 : config.buildToolbar) == null ? void 0 : _n.call(config, groupBuilder);
+  return groupBuilder.build();
 }
-const fontPlugins = [
-  fontFamilyAttr,
-  fontFamilySchema,
-  toggleFontFamilyCommand,
-  fontSizeAttr,
-  fontSizeSchema,
-  toggleFontSizeCommand,
-  remarkFontPlugin
-];
 
 const activeIconMap = {
   [boldIcon]: boldIconActive,
@@ -5519,7 +5519,7 @@ const Toolbar = defineComponent({
     ctx: { type: Object, required: true },
     hide: { type: Function, required: true },
     show: { type: Object, required: true },
-    selection: { type: Object, required: true },
+    state: { type: Object, required: true },
     config: { type: Object, required: false },
     isFixed: { type: Boolean, required: false }
   },
@@ -6121,17 +6121,17 @@ const Toolbar = defineComponent({
       if (ctx) fn(ctx);
     };
     function checkActive(checker) {
-      var _a;
-      keepAlive(props.selection.value);
-      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      var _a, _b;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
+      const status = (_b = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _b.status;
       if (status !== EditorStatus.Created) return false;
       return checker(ctx);
     }
     const blockGroups = computed(() => getGroups$1("", void 0, ctx));
     const activeBlockItem = computed(() => {
-      var _a;
-      keepAlive(props.selection.value);
-      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      var _a, _b;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
+      const status = (_b = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _b.status;
       if (status !== EditorStatus.Created) return null;
       const view = ctx.get(editorViewCtx);
       const { $from } = view.state.selection;
@@ -6169,9 +6169,9 @@ const Toolbar = defineComponent({
       return targetIcon;
     });
     const currentAlignIndent = computed(() => {
-      var _a;
-      keepAlive(props.selection.value);
-      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      var _a, _b;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
+      const status = (_b = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _b.status;
       if (status !== EditorStatus.Created) return { align: "left", indent: 0 };
       const view = ctx.get(editorViewCtx);
       let align = "left";
@@ -6241,13 +6241,15 @@ const Toolbar = defineComponent({
       }
     };
     const canMerge = computed(() => {
-      keepAlive(props.selection.value);
+      var _a;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
       const view = ctx == null ? void 0 : ctx.get(editorViewCtx);
       if (!view) return false;
       return mergeCells(view.state);
     });
     const canSplit = computed(() => {
-      keepAlive(props.selection.value);
+      var _a;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
       const view = ctx == null ? void 0 : ctx.get(editorViewCtx);
       if (!view) return false;
       return splitCell(view.state);
@@ -6307,16 +6309,16 @@ const Toolbar = defineComponent({
       showAlignMenu.value = false;
     };
     const currentColorState = computed(() => {
-      var _a;
-      keepAlive(props.selection.value);
-      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      var _a, _b;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
+      const status = (_b = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _b.status;
       if (status !== EditorStatus.Created)
         return { textColor: null, bgColor: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
       const schema = ctx.get(schemaCtx);
-      const tcHasMark = schema.marks[textColorSchema.id];
-      const bcHasMark = schema.marks[bgColorSchema.id];
+      const tcHasMark = schema.marks["textColor"];
+      const bcHasMark = schema.marks["bgColor"];
       if (!tcHasMark || !bcHasMark) return { textColor: null, bgColor: null };
       const tcType = textColorSchema.type(ctx);
       const bcType = bgColorSchema.type(ctx);
@@ -6363,8 +6365,8 @@ const Toolbar = defineComponent({
       const { tr } = state;
       const { from, to, empty } = state.selection;
       const schema = ctx.get(schemaCtx);
-      const tcHasMark = schema.marks[textColorSchema.id];
-      const bcHasMark = schema.marks[bgColorSchema.id];
+      const tcHasMark = schema.marks["textColor"];
+      const bcHasMark = schema.marks["bgColor"];
       if (!tcHasMark || !bcHasMark) return;
       const textColorType = textColorSchema.type(ctx);
       const bgColorType = bgColorSchema.type(ctx);
@@ -6380,29 +6382,37 @@ const Toolbar = defineComponent({
       showColorMenu.value = false;
     };
     const currentFontState = computed(() => {
-      var _a;
-      keepAlive(props.selection.value);
-      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      var _a, _b;
+      keepAlive(props.state, (_a = props.state) == null ? void 0 : _a.value);
+      const status = (_b = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _b.status;
       if (status !== EditorStatus.Created)
         return { fontFamily: null, fontSize: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
       const schema = ctx.get(schemaCtx);
-      const ffHasMark = schema.marks[fontFamilySchema.id];
-      const fsHasMark = schema.marks[fontSizeSchema.id];
-      if (!ffHasMark || !fsHasMark) return { fontFamily: null, fontSize: null };
+      const ffHasMark = schema.marks["fontFamily"];
+      const fsHasMark = schema.marks["fontSize"];
+      if (!ffHasMark || !fsHasMark) {
+        return { fontFamily: null, fontSize: null };
+      }
       const ffType = fontFamilySchema.type(ctx);
       const fsType = fontSizeSchema.type(ctx);
       const { $cursor, ranges } = state.selection;
+      let result = {
+        fontFamily: null,
+        fontSize: null
+      };
       if ($cursor) {
         let fontFamily = null;
         let fontSize = null;
         const marks = state.storedMarks || $cursor.marks();
         for (const mark of marks) {
-          if (mark.type === ffType) fontFamily = mark.attrs.fontFamily;
-          if (mark.type === fsType) fontSize = mark.attrs.fontSize;
+          if (mark.type === ffType)
+            fontFamily = mark.attrs.fontFamily || null;
+          if (mark.type === fsType)
+            fontSize = mark.attrs.fontSize || null;
         }
-        return { fontFamily, fontSize };
+        result = { fontFamily, fontSize };
       } else {
         const fontFamilies = /* @__PURE__ */ new Set();
         const fontSizes = /* @__PURE__ */ new Set();
@@ -6412,15 +6422,20 @@ const Toolbar = defineComponent({
             if (node.isText) {
               const ffMark = ffType.isInSet(node.marks);
               const fsMark = fsType.isInSet(node.marks);
-              fontFamilies.add(ffMark ? ffMark.attrs.fontFamily : null);
-              fontSizes.add(fsMark ? fsMark.attrs.fontSize : null);
+              fontFamilies.add(
+                ffMark ? ffMark.attrs.fontFamily : null
+              );
+              fontSizes.add(
+                fsMark ? fsMark.attrs.fontSize : null
+              );
             }
           });
         }
         const fontFamily = fontFamilies.size === 1 ? Array.from(fontFamilies)[0] : "mixed";
         const fontSize = fontSizes.size === 1 ? Array.from(fontSizes)[0] : "mixed";
-        return { fontFamily, fontSize };
+        result = { fontFamily, fontSize };
       }
+      return result;
     });
     const setFontFamily = (fontFamily) => {
       const commands = ctx.get(commandsCtx);
@@ -6651,7 +6666,11 @@ const Toolbar = defineComponent({
                 color: "#363B4C"
               }
             },
-            currentFontState.value.fontFamily && currentFontState.value.fontFamily !== "mixed" ? currentFontState.value.fontFamily.split(",")[0].replace(/['"]/g, "") || (ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4") : ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4"
+            (() => {
+              const fontState = currentFontState.value;
+              const fontFamily = fontState == null ? void 0 : fontState.fontFamily;
+              return fontFamily && fontFamily !== "mixed" ? fontFamily.split(",")[0].replace(/['"]/g, "") || (ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4") : ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4";
+            })()
           ),
           /* @__PURE__ */ h(
             "span",
@@ -6681,7 +6700,10 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
+          /* @__PURE__ */ h("span", { style: { fontSize: "13px", color: "#363B4C" } }, (() => {
+            const fs = currentFontState.value.fontSize;
+            return fs && fs !== "mixed" ? fs : "16px";
+          })()),
           /* @__PURE__ */ h(
             "span",
             {
@@ -7829,7 +7851,8 @@ const createViewMenuState = () => reactive({
   showTitle: false,
   showCover: false,
   coverUrl: "",
-  editorWidth: "default"
+  editorWidth: "default",
+  fixedToolbarVisible: true
 });
 const viewMenuStateCtx = $ctx(createViewMenuState(), "viewMenuStateCtx");
 
@@ -8580,7 +8603,7 @@ const FixedToolbarComponent = defineComponent({
     ctx: { type: Object, required: true },
     hide: { type: Function, required: true },
     show: { type: Object, required: true },
-    selection: { type: Object, required: true },
+    state: { type: Object, required: true },
     config: { type: Object, required: false },
     canUndo: { type: Object, required: true },
     canRedo: { type: Object, required: true }
@@ -8601,140 +8624,234 @@ const FixedToolbarComponent = defineComponent({
       });
     });
     return () => {
-      var _a, _b, _c, _d;
-      props.selection.value;
-      const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_a = props.canUndo) == null ? void 0 : _a.value) || false;
-      const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_b = props.canRedo) == null ? void 0 : _b.value) || false;
+      var _a, _b, _c, _d, _e;
+      ((_a = props.state) == null ? void 0 : _a.value) || props.state;
+      const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_b = props.canUndo) == null ? void 0 : _b.value) || false;
+      const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_c = props.canRedo) == null ? void 0 : _c.value) || false;
+      const viewState = props.ctx.get(viewMenuStateCtx.key);
+      const maxWidth = editorWidthMap[viewState.editorWidth];
+      const isFull = maxWidth === "none";
+      if (!viewState.fixedToolbarVisible) {
+        return /* @__PURE__ */ h(
+          "button",
+          {
+            type: "button",
+            class: "fixed-toolbar-expand-btn",
+            title: "\u5C55\u5F00\u5DE5\u5177\u680F",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              viewState.fixedToolbarVisible = true;
+            },
+            style: {
+              position: "absolute",
+              top: "0",
+              right: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "32px",
+              height: "24px",
+              border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))",
+              borderTop: "none",
+              background: "var(--crepe-color-surface, #ffffff)",
+              cursor: "pointer",
+              borderRadius: "0 0 6px 6px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.06)",
+              color: "var(--crepe-color-on-surface, #363b4c)",
+              pointerEvents: "auto",
+              zIndex: 200
+            }
+          },
+          /* @__PURE__ */ h(
+            "span",
+            {
+              style: { display: "inline-flex", alignItems: "center" },
+              innerHTML: chevronDownIcon
+            }
+          )
+        );
+      }
       return /* @__PURE__ */ h(
         "div",
         {
           style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
             display: "flex",
             alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            gap: "0px",
-            minWidth: "0",
-            overflow: "hidden"
+            justifyContent: "center"
           }
         },
-        ((_c = props.config) == null ? void 0 : _c.showMenuBar) !== false && [
-          /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              style: {
-                width: "1px",
-                minWidth: "1px",
-                height: "20px",
-                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-              }
+        /* @__PURE__ */ h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              maxWidth: isFull ? "100%" : maxWidth,
+              margin: isFull ? "0" : "0 auto",
+              gap: "0px",
+              minWidth: "0",
+              overflow: "hidden"
             }
-          )
-        ],
-        ((_d = props.config) == null ? void 0 : _d.showHistory) !== false && [
-          /* @__PURE__ */ h(
-            "button",
-            {
-              type: "button",
-              class: ["toolbar-item", !canUndo && "disabled"],
-              disabled: !canUndo,
-              title: "\u64A4\u9500",
-              onPointerdown: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              },
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (canUndo) {
-                  props.ctx.get(commandsCtx).call("Undo");
-                }
-              },
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: "none",
-                background: "transparent",
-                cursor: canUndo ? "pointer" : "default",
-                padding: "6px",
-                borderRadius: "4px",
-                color: canUndo ? "#363b4c" : "#c0c4cc",
-                "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
-              }
-            },
+          },
+          ((_d = props.config) == null ? void 0 : _d.showMenuBar) !== false && [
+            /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
             /* @__PURE__ */ h(
-              "span",
+              "div",
               {
-                style: { display: "inline-flex", alignItems: "center" },
-                innerHTML: undoIcon
+                style: {
+                  width: "1px",
+                  minWidth: "1px",
+                  height: "20px",
+                  backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+                }
               }
             )
-          ),
-          /* @__PURE__ */ h(
-            "button",
-            {
-              type: "button",
-              class: ["toolbar-item", !canRedo && "disabled"],
-              disabled: !canRedo,
-              title: "\u6062\u590D",
-              onPointerdown: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
+          ],
+          ((_e = props.config) == null ? void 0 : _e.showHistory) !== false && [
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                class: ["toolbar-item", !canUndo && "disabled"],
+                disabled: !canUndo,
+                title: "\u64A4\u9500",
+                onPointerdown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (canUndo) {
+                    props.ctx.get(commandsCtx).call("Undo");
+                  }
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  border: "none",
+                  background: "transparent",
+                  cursor: canUndo ? "pointer" : "default",
+                  padding: "6px",
+                  borderRadius: "4px",
+                  color: canUndo ? "#363b4c" : "#c0c4cc",
+                  "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
+                }
               },
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (canRedo) {
-                  props.ctx.get(commandsCtx).call("Redo");
+              /* @__PURE__ */ h(
+                "span",
+                {
+                  style: { display: "inline-flex", alignItems: "center" },
+                  innerHTML: undoIcon
+                }
+              )
+            ),
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                class: ["toolbar-item", !canRedo && "disabled"],
+                disabled: !canRedo,
+                title: "\u6062\u590D",
+                onPointerdown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (canRedo) {
+                    props.ctx.get(commandsCtx).call("Redo");
+                  }
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  border: "none",
+                  background: "transparent",
+                  cursor: canRedo ? "pointer" : "default",
+                  padding: "6px",
+                  borderRadius: "4px",
+                  color: canRedo ? "#363b4c" : "#c0c4cc",
+                  "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
                 }
               },
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: "none",
-                background: "transparent",
-                cursor: canRedo ? "pointer" : "default",
-                padding: "6px",
-                borderRadius: "4px",
-                color: canRedo ? "#363b4c" : "#c0c4cc",
-                "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
-              }
-            },
+              /* @__PURE__ */ h(
+                "span",
+                {
+                  style: { display: "inline-flex", alignItems: "center" },
+                  innerHTML: redoIcon
+                }
+              )
+            ),
             /* @__PURE__ */ h(
-              "span",
+              "div",
               {
-                style: { display: "inline-flex", alignItems: "center" },
-                innerHTML: redoIcon
+                style: {
+                  width: "1px",
+                  minWidth: "1px",
+                  height: "20px",
+                  backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+                }
               }
             )
+          ],
+          /* @__PURE__ */ h(
+            Toolbar,
+            {
+              ctx: props.ctx,
+              hide: props.hide,
+              show: props.show,
+              state: props.state,
+              config: props.config,
+              isFixed: true
+            }
           ),
+          showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+        ),
+        /* @__PURE__ */ h(
+          "button",
+          {
+            type: "button",
+            class: "toolbar-item collapse-btn",
+            title: "\u6298\u53E0\u5DE5\u5177\u680F",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              viewState.fixedToolbarVisible = false;
+            },
+            style: {
+              position: "absolute",
+              top: "6px",
+              right: "32px",
+              margin: "0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "auto",
+              zIndex: 200
+            }
+          },
           /* @__PURE__ */ h(
-            "div",
+            "span",
             {
               style: {
-                width: "1px",
-                minWidth: "1px",
-                height: "20px",
-                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-              }
+                display: "inline-flex",
+                alignItems: "center",
+                transform: "rotate(180deg)"
+              },
+              innerHTML: chevronDownIcon
             }
           )
-        ],
-        /* @__PURE__ */ h(
-          Toolbar,
-          {
-            ctx: props.ctx,
-            hide: props.hide,
-            show: props.show,
-            selection: props.selection,
-            config: props.config,
-            isFixed: true
-          }
-        ),
-        showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+        )
       );
     };
   }
@@ -10252,7 +10369,7 @@ const OutlinePanel = defineComponent({
             width: `${state.outlineWidth}px`,
             minWidth: "200px",
             maxWidth: "400px",
-            backgroundColor: state.documentBackground || "var(--crepe-color-background)",
+            backgroundColor: "transparent",
             borderRight: isLeft ? "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))" : "none",
             borderLeft: !isLeft ? "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))" : "none",
             boxSizing: "border-box",
@@ -10453,7 +10570,7 @@ var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Ca
 var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _canUndo, _canRedo, _resizeObserver$1, _updateOutlineGeometry, _scrollContainers$1, _onDblClick, _view$1, _editorContainer;
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _state$1, _show$1, _canUndo, _canRedo, _resizeObserver$1, _updateOutlineGeometry, _scrollContainers$1, _onDblClick, _view$1, _editorContainer;
 const fixedToolbarConfig = $ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -10468,7 +10585,7 @@ class FixedToolbarView {
     __privateAdd$4(this, _outlineContent);
     __privateAdd$4(this, _outlineApp);
     __privateAdd$4(this, _watcher);
-    __privateAdd$4(this, _selection$1);
+    __privateAdd$4(this, _state$1);
     __privateAdd$4(this, _show$1, ref(true));
     __privateAdd$4(this, _canUndo, ref(false));
     __privateAdd$4(this, _canRedo, ref(false));
@@ -10479,7 +10596,7 @@ class FixedToolbarView {
     __privateAdd$4(this, _view$1);
     __privateAdd$4(this, _editorContainer);
     this.update = (view) => {
-      __privateGet$4(this, _selection$1).value = view.state.selection;
+      __privateGet$4(this, _state$1).value = view.state;
       try {
         __privateGet$4(this, _canUndo).value = undo(view.state);
         __privateGet$4(this, _canRedo).value = redo(view.state);
@@ -10523,6 +10640,10 @@ class FixedToolbarView {
     if ((config == null ? void 0 : config.coverUrl) !== void 0) viewState.coverUrl = config.coverUrl;
     if ((config == null ? void 0 : config.editorWidth) !== void 0)
       viewState.editorWidth = config.editorWidth;
+    if ((config == null ? void 0 : config.showFloatingToolbar) !== void 0)
+      viewState.fixedToolbarVisible = config.showFloatingToolbar;
+    if ((config == null ? void 0 : config.fixedToolbarVisible) !== void 0)
+      viewState.fixedToolbarVisible = config.fixedToolbarVisible;
     if (config == null ? void 0 : config.useLocalStorage) {
       try {
         const stored = localStorage.getItem("jvs-milkdown-data");
@@ -10544,6 +10665,10 @@ class FixedToolbarView {
             viewState.coverUrl = parsed.coverUrl;
           if (parsed.editorWidth !== void 0)
             viewState.editorWidth = parsed.editorWidth;
+          if (parsed.showFloatingToolbar !== void 0)
+            viewState.fixedToolbarVisible = parsed.showFloatingToolbar;
+          if (parsed.fixedToolbarVisible !== void 0)
+            viewState.fixedToolbarVisible = parsed.fixedToolbarVisible;
         }
       } catch (e) {
         console.error("Error loading view state from localStorage:", e);
@@ -10566,7 +10691,8 @@ class FixedToolbarView {
               showTitle: newState.showTitle,
               showCover: newState.showCover,
               coverUrl: newState.coverUrl,
-              editorWidth: newState.editorWidth
+              editorWidth: newState.editorWidth,
+              fixedToolbarVisible: newState.fixedToolbarVisible
             };
             localStorage.setItem("jvs-milkdown-data", JSON.stringify(merged));
           } catch (e) {
@@ -10578,14 +10704,14 @@ class FixedToolbarView {
     }
     const content = document.createElement("div");
     content.className = "milkdown-fixed-toolbar";
-    __privateSet$4(this, _selection$1, shallowRef(view.state.selection));
+    __privateSet$4(this, _state$1, shallowRef(view.state));
     const app = createApp(FixedToolbarComponent, {
       ctx,
       hide: () => {
       },
       // No-op for fixed toolbar
       config,
-      selection: __privateGet$4(this, _selection$1),
+      state: __privateGet$4(this, _state$1),
       show: __privateGet$4(this, _show$1),
       canUndo: __privateGet$4(this, _canUndo),
       canRedo: __privateGet$4(this, _canRedo)
@@ -10729,13 +10855,20 @@ class FixedToolbarView {
           viewState2.outlineWidth,
           viewState2.documentBackground,
           viewState2.showCover,
-          viewState2.editorWidth
+          viewState2.editorWidth,
+          viewState2.fixedToolbarVisible
         ],
         () => {
+          if (viewState2.fixedToolbarVisible === false) {
+            __privateGet$4(this, _content$2).classList.add("collapsed");
+          } else {
+            __privateGet$4(this, _content$2).classList.remove("collapsed");
+          }
+          root.style.backgroundColor = "";
           if (viewState2.documentBackground) {
-            root.style.backgroundColor = viewState2.documentBackground;
+            __privateGet$4(this, _view$1).dom.style.backgroundColor = viewState2.documentBackground;
           } else {
-            root.style.backgroundColor = "";
+            __privateGet$4(this, _view$1).dom.style.backgroundColor = "";
           }
           root.style.paddingLeft = "0";
           root.style.paddingRight = "0";
@@ -10758,7 +10891,7 @@ class FixedToolbarView {
           }
           const maxWidth = editorWidthMap[viewState2.editorWidth];
           const isFull = maxWidth === "none";
-          const px = isFull ? "80px" : "0";
+          const px = isFull ? "80px" : "10px";
           __privateGet$4(this, _view$1).dom.style.maxWidth = maxWidth;
           __privateGet$4(this, _view$1).dom.style.width = isFull ? "100%" : maxWidth;
           __privateGet$4(this, _view$1).dom.style.margin = isFull ? "0" : "0 auto";
@@ -10788,7 +10921,7 @@ _headerApp = new WeakMap();
 _outlineContent = new WeakMap();
 _outlineApp = new WeakMap();
 _watcher = new WeakMap();
-_selection$1 = new WeakMap();
+_state$1 = new WeakMap();
 _show$1 = new WeakMap();
 _canUndo = new WeakMap();
 _canRedo = new WeakMap();
@@ -10820,7 +10953,7 @@ const fixedToolbar = (editor, config) => {
       ...prev,
       ...mergedConfig
     }));
-  }).use(viewMenuStateCtx).use(fixedToolbarConfig).use(underline).use(highlightMark).use(fixedToolbarPlugin);
+  }).use(viewMenuStateCtx).use(fixedToolbarConfig).use(underline).use(highlightMark).use(colorPlugins).use(fontPlugins).use(fixedToolbarPlugin);
 };
 
 const imageBlock = (editor, config) => {
@@ -12310,21 +12443,21 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show, _mousePressed, _removePopupListener, _onDocumentMouseUp;
+var _tooltipProvider, _content, _app, _state, _show, _mousePressed, _removePopupListener, _onDocumentMouseUp;
 const toolbarTooltip = tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
     __privateAdd$1(this, _tooltipProvider);
     __privateAdd$1(this, _content);
     __privateAdd$1(this, _app);
-    __privateAdd$1(this, _selection);
+    __privateAdd$1(this, _state);
     __privateAdd$1(this, _show, ref(false));
     __privateAdd$1(this, _mousePressed, false);
     __privateAdd$1(this, _removePopupListener);
     __privateAdd$1(this, _onDocumentMouseUp);
     this.update = (view, prevState) => {
       __privateGet$1(this, _tooltipProvider).update(view, prevState);
-      __privateGet$1(this, _selection).value = view.state.selection;
+      __privateGet$1(this, _state).value = view.state;
     };
     this.destroy = () => {
       var _a;
@@ -12341,12 +12474,12 @@ class ToolbarView {
     };
     const content = document.createElement("div");
     content.className = "milkdown-toolbar";
-    __privateSet$1(this, _selection, shallowRef(view.state.selection));
+    __privateSet$1(this, _state, shallowRef(view.state));
     const app = createApp(Toolbar, {
       ctx,
       hide: this.hide,
       config,
-      selection: __privateGet$1(this, _selection),
+      state: __privateGet$1(this, _state),
       show: __privateGet$1(this, _show)
     });
     app.mount(content);
@@ -12410,7 +12543,7 @@ class ToolbarView {
 _tooltipProvider = new WeakMap();
 _content = new WeakMap();
 _app = new WeakMap();
-_selection = new WeakMap();
+_state = new WeakMap();
 _show = new WeakMap();
 _mousePressed = new WeakMap();
 _removePopupListener = new WeakMap();