@jvs-milkdown/crepe 1.2.5 → 1.2.8

package/lib/esm/index.js

@@ -1,18 +1,18 @@
 import { defaultsDeep } from 'lodash-es';
 import { languages } from '@codemirror/language-data';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { blockConfig, block, BlockProvider } from '@jvs-milkdown/kit/plugin/block';
 import { createSlice } from '@jvs-milkdown/kit/ctx';
+import { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $prose, $useKeymap, $inputRule, getMarkdown } from '@jvs-milkdown/kit/utils';
+import { defineComponent, shallowRef, ref, computed, createApp, watchEffect, watch, onUnmounted, h as h$1, Fragment, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { Icon } from '@jvs-milkdown/kit/component';
+import { blockConfig, block, BlockProvider } from '@jvs-milkdown/kit/plugin/block';
 import { commandsCtx, editorViewCtx, editorCtx, EditorStatus, schemaCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
 import { findNodeInSelection, findParent, nodeRule } from '@jvs-milkdown/kit/prose';
 import { NodeSelection, TextSelection, Plugin, PluginKey, EditorState, AllSelection } from '@jvs-milkdown/kit/prose/state';
-import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment, reactive, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
 import { slashFactory, SlashProvider } from '@jvs-milkdown/kit/plugin/slash';
-import { Icon } from '@jvs-milkdown/kit/component';
 import { paragraphSchema, clearTextInCurrentBlockCommand, setBlockTypeCommand, headingSchema, wrapInHeadingCommand, blockquoteSchema, wrapInBlockTypeCommand, hrSchema, addBlockTypeCommand, bulletListSchema, orderedListSchema, listItemSchema, liftListItemCommand, wrapInBulletListCommand, wrapInOrderedListCommand, codeBlockSchema, selectTextNearPosCommand, toggleStrongCommand, isMarkSelectedCommand, strongSchema, toggleEmphasisCommand, emphasisSchema, toggleInlineCodeCommand, inlineCodeSchema, linkSchema, commonmark } from '@jvs-milkdown/kit/preset/commonmark';
 import { createTable, toggleStrikethroughCommand, strikethroughSchema, mergeCellsCommand, gfm } from '@jvs-milkdown/kit/preset/gfm';
-import { $remark, $markAttr, $markSchema, $command, $ctx, $nodeSchema, $prose, $useKeymap, $inputRule, $view, getMarkdown } from '@jvs-milkdown/kit/utils';
 import { visit } from 'unist-util-visit';
 import { imageBlockSchema, imageBlockConfig, imageBlockComponent } from '@jvs-milkdown/kit/component/image-block';
 import { lift, toggleMark } from '@jvs-milkdown/kit/prose/commands';
@@ -69,7 +69,7 @@ const defaultFeatures = {
   ["block-edit" /* BlockEdit */]: true,
   ["placeholder" /* Placeholder */]: true,
   ["toolbar" /* Toolbar */]: true,
-  ["fixed-toolbar" /* FixedToolbar */]: false,
+  ["fixed-toolbar" /* FixedToolbar */]: true,
   ["code-mirror" /* CodeMirror */]: true,
   ["table" /* Table */]: true,
   ["latex" /* Latex */]: true,
@@ -627,10 +627,7 @@ const wordWrapIcon = `
 `;
 
 const cropIcon = `
-  <svg viewBox="0 0 1024 1024" height="24px" width="24px">
-    <path d="M192 128v128H128v64h192V128h-128z m0 0h64v128h-64V128z m512 0v128h192v64H640V128h64z m-512 640H128v-64h192v192h-128v-128z m0 128h64v-128h-64v128z m512 0v-128h192v64h-128v128h-64z m0 0h64v-128h-64v128z" fill="currentColor"/>
-    <path d="M256 256h512v512H256z" fill="none" stroke="currentColor" stroke-width="64"/>
-  </svg>
+  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7429" width="24px" height="24px"><path d="M279.296 46.592a46.592 46.592 0 1 0-93.1328 0v139.5712H46.592a46.592 46.592 0 1 0 0 93.1328h139.6224v512c0 25.7024 20.8384 46.5408 46.592 46.5408h512v139.6224a46.592 46.592 0 0 0 93.0816 0v-139.6224h139.6224a46.592 46.592 0 1 0 0-93.1328H279.296V46.592z m139.6224 139.5712a46.592 46.592 0 1 0 0 93.1328h325.7856v325.7856a46.592 46.592 0 0 0 93.1328 0V232.704a46.592 46.592 0 0 0-46.592-46.5408H418.9696z" fill="currentColor" p-id="7430"></path></svg>
 `;
 
 const borderIcon = `
@@ -639,6 +636,12 @@ const borderIcon = `
   </svg>
 `;
 
+const formatPainterIcon = `
+    <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+    <path d="M454.698667 302.506667H323.84q-23.04 0-41.6 13.824-18.517333 13.824-25.130667 35.968l-31.36 104.704q-10.112 33.621333 10.794667 61.738666 11.52 15.445333 27.221333 22.442667 0.853333 46.165333-0.810666 105.6-1.408 51.84-58.368 138.496-23.338667 35.413333-3.413334 72.96 20.053333 37.76 62.677334 37.76h477.994666q39.509333 0 69.077334-26.325333 29.738667-26.453333 34.090666-65.962667 10.24-93.738667 10.24-155.946667 0-57.088-8.618666-103.68 20.949333-6.058667 35.285333-25.344 20.864-28.117333 10.837333-61.738666l-31.36-104.704q-6.656-22.144-25.173333-35.968-18.517333-13.781333-41.6-13.781334h-130.858667V197.802667q0-28.885333-20.437333-49.365334Q622.933333 128 594.090667 128H524.373333q-28.842667 0-49.237333 20.48-20.437333 20.437333-20.437333 49.322667v104.746666z m68.992 41.728q0.682667-3.370667 0.682666-6.784V197.802667h69.717334V337.493333q0 3.413333 0.64 6.826667 0.682667 3.370667 2.005333 6.528 1.28 3.2 3.2 6.058667 1.92 2.816 4.352 5.248 2.389333 2.474667 5.248 4.352 2.901333 1.92 6.058667 3.242666 3.157333 1.322667 6.528 1.962667 3.328 0.682667 6.826666 0.682667h165.674667l31.36 104.746666H292.48l31.36-104.746666h165.717333q3.413333 0 6.826667-0.64 3.328-0.682667 6.528-2.005334 3.157333-1.322667 5.973333-3.242666 2.858667-1.877333 5.290667-4.352 2.432-2.432 4.309333-5.248 1.92-2.901333 3.242667-6.058667 1.322667-3.157333 1.962667-6.570667z m252.501333 202.666666q9.429333 43.648 9.429333 100.864 0 58.368-9.813333 148.352-1.450667 12.757333-11.093333 21.376-9.813333 8.704-22.826667 8.704h-100.309333q22.058667-81.493333 22.058666-174.592h-69.674666q0 94.421333-24.96 174.592h-121.514667q41.941333-81.450667 41.941333-174.592H419.754667q0 94.378667-52.992 174.592H263.808q-0.725333 0-1.109333-0.725333-0.469333-0.981333 0.042666-1.749333 67.968-103.253333 69.888-175.018667 1.536-56.533333 0.938667-101.802667H776.106667z" fill="currentColor" p-id="11997"></path>
+    </svg>
+`;
+
 const defaultConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: oneDark,
@@ -661,6 +664,7 @@ const zhCN = {
   "toolbar.heading": "\u6807\u9898",
   "toolbar.formatting": "\u683C\u5F0F",
   "toolbar.function": "\u529F\u80FD",
+  "toolbar.formatPainter": "\u683C\u5F0F\u5237",
   // menu bar
   "menuBar.file": "\u6587\u4EF6",
   "menuBar.edit": "\u7F16\u8F91",
@@ -814,6 +818,7 @@ const enUS = {
   "toolbar.heading": "Heading",
   "toolbar.formatting": "Formatting",
   "toolbar.function": "Function",
+  "toolbar.formatPainter": "Format Painter",
   "menuBar.file": "File",
   "menuBar.edit": "Edit",
   "menuBar.view": "View",
@@ -981,102 +986,493 @@ function crepeFeatureConfig(feature) {
   };
 }
 
-function isInCodeBlock(selection) {
-  const type = selection.$from.parent.type;
-  return type.name === "code_block";
-}
-function isInList(selection) {
-  var _a;
-  const type = (_a = selection.$from.node(selection.$from.depth - 1)) == null ? void 0 : _a.type;
-  return (type == null ? void 0 : type.name) === "list_item";
-}
+const attachmentConfig = $ctx(
+  {
+    onUpload: async (file) => {
+      return {
+        url: URL.createObjectURL(file),
+        name: file.name,
+        size: file.size
+      };
+    },
+    uploadButton: "Upload file",
+    uploadPlaceholderText: "or paste link",
+    downloadText: "Download"
+  },
+  "attachmentConfig"
+);
 
-var __typeError$6 = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
-var _groups, _getGroupInstance;
-class GroupBuilder {
-  constructor() {
-    __privateAdd$6(this, _groups, []);
-    this.clear = () => {
-      __privateSet$6(this, _groups, []);
-      return this;
-    };
-    __privateAdd$6(this, _getGroupInstance, (group) => {
-      const groupInstance = {
-        group,
-        addItem: (key, item) => {
-          const data = { ...item, key };
-          group.items.push(data);
-          return groupInstance;
-        },
-        clear: () => {
-          group.items = [];
-          return groupInstance;
+const ATTACHMENT_DATA_TYPE = "attachment-block";
+const attachmentSchema = $nodeSchema("attachment", () => {
+  return {
+    inline: false,
+    group: "block",
+    selectable: true,
+    draggable: true,
+    isolating: true,
+    marks: "",
+    atom: true,
+    priority: 100,
+    attrs: {
+      src: { default: "", validate: "string" },
+      name: { default: "", validate: "string" },
+      size: { default: 0, validate: "number" },
+      videoWidth: { default: 0, validate: "number" }
+    },
+    parseDOM: [
+      {
+        tag: `a[data-type="${ATTACHMENT_DATA_TYPE}"]`,
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement))
+            throw new TypeError("Expect dom to be HTMLElement");
+          return {
+            src: dom.getAttribute("href") || "",
+            name: dom.getAttribute("data-name") || "",
+            size: Number(dom.getAttribute("data-size") || 0),
+            videoWidth: Number(dom.getAttribute("data-video-width") || 0)
+          };
         }
-      };
-      return groupInstance;
+      }
+    ],
+    toDOM: (node) => [
+      "a",
+      {
+        "data-type": ATTACHMENT_DATA_TYPE,
+        href: node.attrs.src,
+        "data-name": node.attrs.name,
+        "data-size": String(node.attrs.size),
+        "data-video-width": String(node.attrs.videoWidth || 0),
+        class: "attachment"
+      },
+      node.attrs.name
+    ],
+    parseMarkdown: {
+      match: (node) => {
+        return node.type === "attachment";
+      },
+      runner: (state, node, type) => {
+        state.addNode(type, {
+          src: node.url,
+          name: node.name || "",
+          size: Number(node.size || 0)
+        });
+      }
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === "attachment",
+      runner: (state, node) => {
+        state.openNode("paragraph");
+        state.addNode(
+          "html",
+          void 0,
+          `<a href="${node.attrs.src}" data-size="${node.attrs.size}" data-name="${node.attrs.name}" data-video-width="${node.attrs.videoWidth || 0}" data-type="${ATTACHMENT_DATA_TYPE}" class="attachment">${node.attrs.name}</a>`
+        );
+        state.closeNode();
+      }
+    }
+  };
+});
+
+const downloadIcon = `<svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
+  <path d="M464.96 743.936L194.304 479.68c-4.928-4.8-10.24-9.408-14.592-14.656-20.736-24.768-21.376-45.76-2.368-63.424 17.664-16.384 43.328-16 65.472 4.8 49.088 46.144 96.64 93.824 144.896 140.8l69.376 67.52 11.968 11.392v-184.96c0-36.096-0.128-86.272-0.32-136.96-0.192-54.912-0.32-110.464-0.32-149.504l-0.064-9.28a208 208 0 0 1 0.704-26.56c3.52-31.168 19.328-46.592 45.248-45.76 25.344 0.832 41.088 16.96 42.688 48.576 1.28 24.384 1.024 48.896 0.768 73.408l-0.128 28.928c0 53.376 0.128 120.32 0.256 188.096 0.192 76.352 0.384 153.792 0.32 214.016 74.432-72.704 185.6-181.12 216.32-210.88 7.424-7.168 14.912-15.168 24-19.52 18.688-8.96 37.632-8.32 52.672 7.872 14.72 15.744 16.448 33.408 4.032 51.392-3.84 5.632-8.576 10.816-13.44 15.616-45.696 44.736-243.328 238.272-289.728 282.24a62.592 62.592 0 0 1-8.064 6.4 43.392 43.392 0 0 1-15.872 10.432c-20.544 7.616-37.504-0.512-51.968-14.848l-11.2-10.88z m430.784-39.744c24-0.576 42.176 14.4 43.328 41.6 1.728 40.832 2.944 82.176-1.088 122.816-5.312 54.144-51.52 89.792-114.752 91.008-50.112 0.896-100.224 0.704-150.4 0.512L608 960H434.944c-64.832 0.128-129.6 0.192-194.432-0.192-90.624-0.512-130.752-40.192-131.392-128.64l-0.192-18.56c-0.32-21.12-0.576-42.304 0.768-63.36 1.92-29.76 20.48-46.528 45.76-45.184 23.488 1.28 37.312 16.32 40.064 45.184 0.896 9.792 0.832 19.648 0.704 29.504l-0.064 11.52c0.384 76.544 7.36 83.392 88.128 83.456a163213.952 163213.952 0 0 0 351.68 0.064l43.968 0.128c36.096 0.128 72.192 0.256 108.288-0.448 52.672-1.024 64-12.864 65.152-64.32 0.192-7.68 0.128-15.488 0-23.232a414.72 414.72 0 0 1 0.704-38.208c2.24-27.712 17.92-42.944 41.664-43.52z" fill="currentColor"></path>
+</svg>`;
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+const MilkdownAttachmentBlock = defineComponent({
+  props: {
+    src: { type: Object, required: true },
+    name: { type: Object, required: true },
+    size: { type: Object, required: true },
+    videoWidth: { type: Object, required: true },
+    selected: { type: Object, required: true },
+    readonly: { type: Object, required: true },
+    setAttr: { type: Function, required: true },
+    config: { type: Object, required: true }
+  },
+  setup(props) {
+    const { src, name, size, videoWidth } = props;
+    const isUploading = shallowRef(false);
+    const fileInput = shallowRef(null);
+    const videoWrapperRef = ref(null);
+    const currentWidth = ref(0);
+    const isResizing = ref(false);
+    const isVideo = computed(() => {
+      return name.value && /\.(mp4|webm|ogg|mov|avi|mkv|flv|wmv|m4v|3gp|ts)$/i.test(name.value);
     });
-    this.addGroup = (key, label) => {
-      const items = [];
-      const group = {
-        key,
-        label,
-        items
-      };
-      __privateGet$6(this, _groups).push(group);
-      return __privateGet$6(this, _getGroupInstance).call(this, group);
+    let resizeDir = "";
+    let startX = 0;
+    let startWidth = 0;
+    const triggerUpload = () => {
+      var _a;
+      (_a = fileInput.value) == null ? void 0 : _a.click();
     };
-    this.getGroup = (key) => {
-      const group = __privateGet$6(this, _groups).find((group2) => group2.key === key);
-      if (!group) throw new Error(`Group with key ${key} not found`);
-      return __privateGet$6(this, _getGroupInstance).call(this, group);
+    const onFileChange = async (e) => {
+      var _a;
+      const target = e.target;
+      const file = (_a = target.files) == null ? void 0 : _a[0];
+      if (!file) return;
+      isUploading.value = true;
+      try {
+        const result = await props.config.onUpload(file);
+        props.setAttr("src", result.url);
+        props.setAttr("name", result.name);
+        props.setAttr("size", result.size);
+      } catch (err) {
+        console.error("Failed to upload file", err);
+      } finally {
+        isUploading.value = false;
+        target.value = "";
+      }
     };
-    this.build = () => {
-      return __privateGet$6(this, _groups);
+    const openLink = () => {
+      if (src.value) {
+        window.open(src.value, "_blank");
+      }
     };
-  }
-}
-_groups = new WeakMap();
-_getGroupInstance = new WeakMap();
-
-function keepAlive(..._args) {
-}
-
-const remarkTextColorPlugin = $remark(
-  "remarkTextColor",
-  () => function() {
-    const data = this.data();
-    function add(key, value) {
-      if (Array.isArray(data[key])) {
-        data[key].push(value);
-      } else {
-        data[key] = [value];
+    let activeHandle = null;
+    const onResizePointerMove = (e) => {
+      e.preventDefault();
+      const deltaX = e.clientX - startX;
+      let dw = 0;
+      if (resizeDir.includes("right")) {
+        dw = deltaX;
+      } else if (resizeDir.includes("left")) {
+        dw = -deltaX;
       }
-    }
-    add("toMarkdownExtensions", {
-      handlers: {
-        textColor: (node, _, state) => {
-          return `<span style="color:${node.color}">${state.containerPhrasing(node, state)}</span>`;
-        },
-        bgColor: (node, _, state) => {
-          return `<span style="background-color:${node.color}">${state.containerPhrasing(node, state)}</span>`;
+      let newWidth = startWidth + dw;
+      if (newWidth < 200) newWidth = 200;
+      const wrapper = videoWrapperRef.value;
+      if (wrapper) {
+        const parent = wrapper.closest(".milkdown-attachment-block-wrapper");
+        if (parent) {
+          const maxWidth = parent.getBoundingClientRect().width;
+          if (newWidth > maxWidth) newWidth = maxWidth;
         }
       }
-    });
-    return (ast) => {
-      visit(ast, (node, index, parent) => {
-        if ((node == null ? void 0 : node.type) === "html" && node.value.startsWith("<span") && parent && index != null) {
-          const hasTextColor = node.value.includes("color:") && !node.value.match(/background-color:\s*([^"';>]+)/);
-          const hasBgColor = node.value.includes("background-color:");
-          if (!hasTextColor && !hasBgColor) return;
-          let color = null;
-          let markType = null;
-          if (hasBgColor) {
+      currentWidth.value = newWidth;
+    };
+    const onResizePointerUp = (e) => {
+      if (activeHandle) {
+        activeHandle.releasePointerCapture(e.pointerId);
+        activeHandle.removeEventListener(
+          "pointermove",
+          onResizePointerMove
+        );
+        activeHandle.removeEventListener(
+          "pointerup",
+          onResizePointerUp
+        );
+        activeHandle = null;
+      }
+      isResizing.value = false;
+      if (currentWidth.value > 0) {
+        props.setAttr("videoWidth", Math.round(currentWidth.value));
+      }
+    };
+    const onResizePointerDown = (e, dir) => {
+      if (props.readonly.value) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir = dir;
+      startX = e.clientX;
+      isResizing.value = true;
+      const handle = e.currentTarget;
+      activeHandle = handle;
+      handle.setPointerCapture(e.pointerId);
+      const wrapper = videoWrapperRef.value;
+      if (wrapper) {
+        startWidth = wrapper.getBoundingClientRect().width;
+        currentWidth.value = startWidth;
+      }
+      handle.addEventListener("pointermove", onResizePointerMove);
+      handle.addEventListener("pointerup", onResizePointerUp);
+    };
+    return () => {
+      var _a;
+      if (!((_a = src.value) == null ? void 0 : _a.length)) {
+        return /* @__PURE__ */ h(
+          "div",
+          {
+            class: [
+              "milkdown-attachment-placeholder",
+              props.selected.value ? "selected" : ""
+            ]
+          },
+          /* @__PURE__ */ h("div", { class: "milkdown-attachment-uploader", onClick: triggerUpload }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }), /* @__PURE__ */ h("span", { class: "milkdown-attachment-upload-text" }, isUploading.value ? "Uploading..." : props.config.uploadButton), /* @__PURE__ */ h(
+            "input",
+            {
+              type: "file",
+              ref: fileInput,
+              onChange: onFileChange,
+              style: "display: none;"
+            }
+          ))
+        );
+      }
+      if (isVideo.value) {
+        const savedWidth = videoWidth.value;
+        const widthStyle = isResizing.value && currentWidth.value > 0 ? `${currentWidth.value}px` : savedWidth && savedWidth > 0 ? `${savedWidth}px` : "100%";
+        return /* @__PURE__ */ h(
+          "div",
+          {
+            ref: videoWrapperRef,
+            class: [
+              "milkdown-attachment-video-viewer",
+              props.selected.value ? "selected" : ""
+            ],
+            style: {
+              width: widthStyle,
+              margin: "0 auto",
+              position: "relative"
+            }
+          },
+          /* @__PURE__ */ h(
+            "video",
+            {
+              src: src.value,
+              controls: true,
+              style: "width: 100%; display: block; border-radius: 8px;",
+              onMousedown: (e) => e.stopPropagation()
+            }
+          ),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              class: "video-resize-handle top-left",
+              onPointerdown: (e) => onResizePointerDown(e, "top-left")
+            }
+          ),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              class: "video-resize-handle top-right",
+              onPointerdown: (e) => onResizePointerDown(e, "top-right")
+            }
+          ),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              class: "video-resize-handle bottom-left",
+              onPointerdown: (e) => onResizePointerDown(e, "bottom-left")
+            }
+          ),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              class: "video-resize-handle bottom-right",
+              onPointerdown: (e) => onResizePointerDown(e, "bottom-right")
+            }
+          )
+        );
+      }
+      return /* @__PURE__ */ h(
+        "div",
+        {
+          class: [
+            "milkdown-attachment-viewer",
+            props.selected.value ? "selected" : ""
+          ]
+        },
+        /* @__PURE__ */ h("div", { class: "milkdown-attachment-icon-wrapper" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-raw-icon-bg" }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }))),
+        /* @__PURE__ */ h("div", { class: "milkdown-attachment-info" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-name" }, name.value), /* @__PURE__ */ h("div", { class: "milkdown-attachment-size" }, (size.value || 0) > 0 ? formatBytes(size.value) : "")),
+        /* @__PURE__ */ h(
+          "div",
+          {
+            class: "milkdown-attachment-action",
+            onClick: openLink,
+            title: props.config.downloadText
+          },
+          /* @__PURE__ */ h(Icon, { icon: downloadIcon })
+        )
+      );
+    };
+  }
+});
+
+const attachmentView = $view(
+  attachmentSchema.node,
+  (ctx) => {
+    return (initialNode, view, getPos) => {
+      const src = ref(initialNode.attrs.src);
+      const name = ref(initialNode.attrs.name);
+      const size = ref(initialNode.attrs.size);
+      const videoWidth = ref(initialNode.attrs.videoWidth);
+      const selected = ref(false);
+      const readonly = ref(!view.editable);
+      const setAttr = (attr, value) => {
+        if (!view.editable) return;
+        const pos = getPos();
+        if (pos == null) return;
+        view.dispatch(view.state.tr.setNodeAttribute(pos, attr, value));
+      };
+      const config = ctx.get(attachmentConfig.key);
+      const app = createApp(MilkdownAttachmentBlock, {
+        src,
+        name,
+        size,
+        videoWidth,
+        selected,
+        readonly,
+        setAttr,
+        config
+      });
+      const dom = document.createElement("div");
+      dom.className = "milkdown-attachment-block-wrapper";
+      const disposeSelectedWatcher = watchEffect(() => {
+        if (selected.value) {
+          dom.classList.add("selected");
+        } else {
+          dom.classList.remove("selected");
+        }
+      });
+      const bindAttrs = (node) => {
+        src.value = node.attrs.src;
+        name.value = node.attrs.name;
+        size.value = node.attrs.size;
+        videoWidth.value = node.attrs.videoWidth;
+        readonly.value = !view.editable;
+      };
+      bindAttrs(initialNode);
+      app.mount(dom);
+      return {
+        dom,
+        update: (updatedNode) => {
+          if (updatedNode.type !== initialNode.type) return false;
+          bindAttrs(updatedNode);
+          return true;
+        },
+        selectNode: () => {
+          selected.value = true;
+        },
+        deselectNode: () => {
+          selected.value = false;
+        },
+        destroy: () => {
+          disposeSelectedWatcher();
+          app.unmount();
+          dom.remove();
+        }
+      };
+    };
+  }
+);
+
+const attachment = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.Attachment)).config((ctx) => {
+    ctx.update(attachmentConfig.key, (value) => {
+      var _a, _b, _c, _d;
+      return {
+        uploadButton: (_a = config == null ? void 0 : config.uploadButton) != null ? _a : i18n(ctx, "attachmentBlock.uploadButton"),
+        uploadPlaceholderText: (_b = config == null ? void 0 : config.uploadPlaceholderText) != null ? _b : i18n(ctx, "attachmentBlock.uploadPlaceholderText"),
+        downloadText: (_c = config == null ? void 0 : config.downloadText) != null ? _c : i18n(ctx, "attachmentBlock.download"),
+        onUpload: (_d = config == null ? void 0 : config.onUpload) != null ? _d : value.onUpload
+      };
+    });
+  }).use(attachmentConfig).use(attachmentSchema).use(attachmentView);
+};
+
+function isInCodeBlock(selection) {
+  const type = selection.$from.parent.type;
+  return type.name === "code_block";
+}
+function isInList(selection) {
+  var _a;
+  const type = (_a = selection.$from.node(selection.$from.depth - 1)) == null ? void 0 : _a.type;
+  return (type == null ? void 0 : type.name) === "list_item";
+}
+
+var __typeError$6 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
+var _groups, _getGroupInstance;
+class GroupBuilder {
+  constructor() {
+    __privateAdd$6(this, _groups, []);
+    this.clear = () => {
+      __privateSet$6(this, _groups, []);
+      return this;
+    };
+    __privateAdd$6(this, _getGroupInstance, (group) => {
+      const groupInstance = {
+        group,
+        addItem: (key, item) => {
+          const data = { ...item, key };
+          group.items.push(data);
+          return groupInstance;
+        },
+        clear: () => {
+          group.items = [];
+          return groupInstance;
+        }
+      };
+      return groupInstance;
+    });
+    this.addGroup = (key, label) => {
+      const items = [];
+      const group = {
+        key,
+        label,
+        items
+      };
+      __privateGet$6(this, _groups).push(group);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
+    };
+    this.getGroup = (key) => {
+      const group = __privateGet$6(this, _groups).find((group2) => group2.key === key);
+      if (!group) throw new Error(`Group with key ${key} not found`);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
+    };
+    this.build = () => {
+      return __privateGet$6(this, _groups);
+    };
+  }
+}
+_groups = new WeakMap();
+_getGroupInstance = new WeakMap();
+
+function keepAlive(..._args) {
+}
+
+const remarkTextColorPlugin = $remark(
+  "remarkTextColor",
+  () => 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: {
+        textColor: (node, _, state) => {
+          return `<span style="color:${node.color}">${state.containerPhrasing(node, state)}</span>`;
+        },
+        bgColor: (node, _, state) => {
+          return `<span style="background-color:${node.color}">${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 hasTextColor = node.value.includes("color:") && !node.value.match(/background-color:\s*([^"';>]+)/);
+          const hasBgColor = node.value.includes("background-color:");
+          if (!hasTextColor && !hasBgColor) return;
+          let color = null;
+          let markType = null;
+          if (hasBgColor) {
             const match = node.value.match(/background-color:\s*([^"';>]+)/);
             color = match ? match[1].trim() : null;
             markType = "bgColor";
@@ -1282,84 +1678,13 @@ const menuAPI = $ctx(
     },
     cancelHide: () => {
     },
-    isProgrammatic: () => false,
-    getPos: () => null,
-    isShow: () => false,
-    getMode: () => null
-  },
-  "menuAPICtx"
-);
-
-const ATTACHMENT_DATA_TYPE = "attachment-block";
-const attachmentSchema = $nodeSchema("attachment", () => {
-  return {
-    inline: false,
-    group: "block",
-    selectable: true,
-    draggable: true,
-    isolating: true,
-    marks: "",
-    atom: true,
-    priority: 100,
-    attrs: {
-      src: { default: "", validate: "string" },
-      name: { default: "", validate: "string" },
-      size: { default: 0, validate: "number" },
-      videoWidth: { default: 0, validate: "number" }
-    },
-    parseDOM: [
-      {
-        tag: `a[data-type="${ATTACHMENT_DATA_TYPE}"]`,
-        getAttrs: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw new TypeError("Expect dom to be HTMLElement");
-          return {
-            src: dom.getAttribute("href") || "",
-            name: dom.getAttribute("data-name") || "",
-            size: Number(dom.getAttribute("data-size") || 0),
-            videoWidth: Number(dom.getAttribute("data-video-width") || 0)
-          };
-        }
-      }
-    ],
-    toDOM: (node) => [
-      "a",
-      {
-        "data-type": ATTACHMENT_DATA_TYPE,
-        href: node.attrs.src,
-        "data-name": node.attrs.name,
-        "data-size": String(node.attrs.size),
-        "data-video-width": String(node.attrs.videoWidth || 0),
-        class: "attachment"
-      },
-      node.attrs.name
-    ],
-    parseMarkdown: {
-      match: (node) => {
-        return node.type === "attachment";
-      },
-      runner: (state, node, type) => {
-        state.addNode(type, {
-          src: node.url,
-          name: node.name || "",
-          size: Number(node.size || 0)
-        });
-      }
-    },
-    toMarkdown: {
-      match: (node) => node.type.name === "attachment",
-      runner: (state, node) => {
-        state.openNode("paragraph");
-        state.addNode(
-          "html",
-          void 0,
-          `<a href="${node.attrs.src}" data-size="${node.attrs.size}" data-name="${node.attrs.name}" data-video-width="${node.attrs.videoWidth || 0}" data-type="${ATTACHMENT_DATA_TYPE}" class="attachment">${node.attrs.name}</a>`
-        );
-        state.closeNode();
-      }
-    }
-  };
-});
+    isProgrammatic: () => false,
+    getPos: () => null,
+    isShow: () => false,
+    getMode: () => null
+  },
+  "menuAPICtx"
+);
 
 const mathInlineId = "math_inline";
 const mathInlineSchema = $nodeSchema(mathInlineId, () => ({
@@ -2156,7 +2481,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
-keepAlive(h);
+keepAlive(h$1);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -2498,11 +2823,11 @@ const Menu = defineComponent({
     });
     return () => {
       var _a, _b, _c;
-      show.value;
+      void show.value;
       const api = ctx.get(menuAPI.key);
       const showListMenu = (api == null ? void 0 : api.getMode()) === "list" || !(api == null ? void 0 : api.isProgrammatic()) || filter.value !== "";
       if (showListMenu) {
-        return /* @__PURE__ */ h("div", { ref: host, onPointerdown: (e) => e.preventDefault() }, /* @__PURE__ */ h("div", { class: "menu-groups", onPointermove: onPointerMove }, groupInfo.value.groups.map((group) => /* @__PURE__ */ h("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h("h6", null, group.label), /* @__PURE__ */ h("ul", null, group.items.map((item) => /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1("div", { ref: host, onPointerdown: (e) => e.preventDefault() }, /* @__PURE__ */ h$1("div", { class: "menu-groups", onPointermove: onPointerMove }, groupInfo.value.groups.map((group) => /* @__PURE__ */ h$1("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h$1("h6", null, group.label), /* @__PURE__ */ h$1("ul", null, group.items.map((item) => /* @__PURE__ */ h$1(
           "li",
           {
             key: item.key,
@@ -2545,9 +2870,9 @@ const Menu = defineComponent({
               runByIndex(item.index);
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: item.icon }),
-          /* @__PURE__ */ h("span", { style: item.key === "table" ? { flex: 1 } : {} }, item.label),
-          item.key === "table" ? /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(Icon, { icon: item.icon }),
+          /* @__PURE__ */ h$1("span", { style: item.key === "table" ? { flex: 1 } : {} }, item.label),
+          item.key === "table" ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2557,9 +2882,9 @@ const Menu = defineComponent({
                 transform: "rotate(-90deg)"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           ) : null
-        )))))), showTableMenu.value ? /* @__PURE__ */ h(
+        )))))), showTableMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -2582,7 +2907,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleTableLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2594,7 +2919,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2607,7 +2932,7 @@ const Menu = defineComponent({
             Array.from({ length: 9 }).map(
               (_, r) => Array.from({ length: 9 }).map((_2, c) => {
                 const isHovered = r < tableHoverIndices.value.r && c < tableHoverIndices.value.c;
-                return /* @__PURE__ */ h(
+                return /* @__PURE__ */ h$1(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -2636,7 +2961,7 @@ const Menu = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2649,7 +2974,7 @@ const Menu = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h(
+          ) : /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2819,7 +3144,7 @@ const Menu = defineComponent({
       const renderGridBtn = (key) => {
         const item = findItem(key);
         if (!item) return null;
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             title: item.label,
@@ -2840,11 +3165,11 @@ const Menu = defineComponent({
             },
             "data-index": item.index
           },
-          /* @__PURE__ */ h(Icon, { icon: item.icon })
+          /* @__PURE__ */ h$1(Icon, { icon: item.icon })
         );
       };
       const renderCustomRow = (iconHtml, label, hasArrow, onPointerEnter, onPointerLeave, onClick) => {
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             class: "custom-menu-row",
@@ -2860,12 +3185,12 @@ const Menu = defineComponent({
               onClick == null ? void 0 : onClick();
             }
           },
-          /* @__PURE__ */ h("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h(Icon, { icon: iconHtml }), /* @__PURE__ */ h("span", null, label)),
-          hasArrow ? /* @__PURE__ */ h(Icon, { icon: chevronDownIcon }) : null
+          /* @__PURE__ */ h$1("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h$1(Icon, { icon: iconHtml }), /* @__PURE__ */ h$1("span", null, label)),
+          hasArrow ? /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon }) : null
         );
       };
       const renderSubMenuItem = (iconHtml, label, isActive, onClick, disabled = false) => {
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -2883,7 +3208,7 @@ const Menu = defineComponent({
               if (!disabled) onClick();
             }
           },
-          /* @__PURE__ */ h("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h(Icon, { icon: iconHtml }), /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h$1(Icon, { icon: iconHtml }), /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -2892,18 +3217,18 @@ const Menu = defineComponent({
             },
             label
           )),
-          isActive ? /* @__PURE__ */ h("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h(Icon, { icon: confirmIcon })) : null
+          isActive ? /* @__PURE__ */ h$1("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })) : null
         );
       };
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           ref: host,
           onPointerdown: (e) => e.preventDefault(),
           class: "custom-block-menu"
         },
-        !isMedia ? /* @__PURE__ */ h("div", { class: "custom-grid-container" }, gridRows.map((rowKeys, rIndex) => /* @__PURE__ */ h("div", { class: "custom-grid-row", key: "row-" + rIndex }, rowKeys.map(renderGridBtn)))) : null,
-        showAlign ? /* @__PURE__ */ h("div", { class: "custom-divider" }) : null,
+        !isMedia ? /* @__PURE__ */ h$1("div", { class: "custom-grid-container" }, gridRows.map((rowKeys, rIndex) => /* @__PURE__ */ h$1("div", { class: "custom-grid-row", key: "row-" + rIndex }, rowKeys.map(renderGridBtn)))) : null,
+        showAlign ? /* @__PURE__ */ h$1("div", { class: "custom-divider" }) : null,
         showAlign && renderCustomRow(
           alignLeftIcon,
           i18n(ctx, "customMenu.indentAndAlign"),
@@ -2911,7 +3236,7 @@ const Menu = defineComponent({
           handleIndentAlignEnter,
           handleIndentAlignLeave
         ),
-        showIndentAlignMenu.value ? /* @__PURE__ */ h(
+        showIndentAlignMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -2948,7 +3273,7 @@ const Menu = defineComponent({
             currentAlign === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h("div", { class: "custom-divider" }),
+          /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
           renderSubMenuItem(
             indentIncreaseIcon,
             i18n(ctx, "customMenu.increaseIndent"),
@@ -2970,7 +3295,7 @@ const Menu = defineComponent({
           handleColorEnter,
           handleColorLeave
         ),
-        showColorMenu.value ? /* @__PURE__ */ h(
+        showColorMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -2994,7 +3319,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleColorLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -3005,7 +3330,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.textColor")
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -3014,7 +3339,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3044,7 +3369,7 @@ const Menu = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -3056,7 +3381,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.bgColor")
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -3065,7 +3390,7 @@ const Menu = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3089,7 +3414,7 @@ const Menu = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h(
+            color === "transparent" ? /* @__PURE__ */ h$1(
               "div",
               {
                 style: {
@@ -3113,7 +3438,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3136,7 +3461,7 @@ const Menu = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               onPointerdown: (e) => {
@@ -3163,7 +3488,7 @@ const Menu = defineComponent({
             i18n(ctx, "customMenu.restoreDefault")
           )
         ) : null,
-        !isMedia ? /* @__PURE__ */ h("div", { class: "custom-divider" }) : null,
+        !isMedia ? /* @__PURE__ */ h$1("div", { class: "custom-divider" }) : null,
         renderCustomRow(
           clearIcon,
           i18n(ctx, "customMenu.cut"),
@@ -3188,7 +3513,7 @@ const Menu = defineComponent({
           void 0,
           applyDelete
         ),
-        /* @__PURE__ */ h("div", { class: "custom-divider" }),
+        /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
         renderCustomRow(
           plusIcon,
           i18n(ctx, "customMenu.addBelow"),
@@ -3196,7 +3521,7 @@ const Menu = defineComponent({
           handleAddBelowEnter,
           handleAddBelowLeave
         ),
-        showAddBelowMenu.value ? /* @__PURE__ */ h(
+        showAddBelowMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3216,14 +3541,14 @@ const Menu = defineComponent({
             },
             onPointerleave: handleAddBelowLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "menu-groups",
               onPointermove: onPointerMove,
               style: { maxHeight: "300px", overflowY: "auto" }
             },
-            groupInfo.value.groups.map((group) => /* @__PURE__ */ h("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h("h6", null, group.label), /* @__PURE__ */ h("ul", null, group.items.map((item) => /* @__PURE__ */ h(
+            groupInfo.value.groups.map((group) => /* @__PURE__ */ h$1("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h$1("h6", null, group.label), /* @__PURE__ */ h$1("ul", null, group.items.map((item) => /* @__PURE__ */ h$1(
               "li",
               {
                 key: item.key,
@@ -3244,12 +3569,14 @@ const Menu = defineComponent({
                   var _a2;
                   e.preventDefault();
                   e.stopPropagation();
-                  (_a2 = host.value) == null ? void 0 : _a2.querySelectorAll(`[data-index="${item.index}"]`).forEach((el) => el.classList.remove("active"));
+                  (_a2 = host.value) == null ? void 0 : _a2.querySelectorAll(`[data-index="${item.index}"]`).forEach(
+                    (el) => el.classList.remove("active")
+                  );
                   runByIndexForAddBelow(item.index);
                 }
               },
-              /* @__PURE__ */ h(Icon, { icon: item.icon }),
-              /* @__PURE__ */ h("span", null, item.label)
+              /* @__PURE__ */ h$1(Icon, { icon: item.icon }),
+              /* @__PURE__ */ h$1("span", null, item.label)
             )))))
           )
         ) : null
@@ -3496,7 +3823,7 @@ function getBlockKey(node) {
   }
 }
 
-keepAlive(h, Fragment);
+keepAlive(h$1, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {
@@ -3544,7 +3871,7 @@ const BlockHandle = defineComponent({
     const addButton = ref();
     const menuButton = ref();
     return () => {
-      return /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
         "div",
         {
           ref: addButton,
@@ -3570,8 +3897,8 @@ const BlockHandle = defineComponent({
             props.onAdd(addButton.value);
           }
         },
-        /* @__PURE__ */ h(Icon, { icon: props.addIcon })
-      ), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(Icon, { icon: props.addIcon })
+      ), /* @__PURE__ */ h$1(
         "div",
         {
           ref: menuButton,
@@ -3589,14 +3916,14 @@ const BlockHandle = defineComponent({
             props.onLeaveMenu();
           }
         },
-        /* @__PURE__ */ h(Icon, { icon: props.state.icon })
-      ), /* @__PURE__ */ h("div", { class: "divider" }), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(Icon, { icon: props.state.icon })
+      ), /* @__PURE__ */ h$1("div", { class: "divider" }), /* @__PURE__ */ h$1(
         "div",
         {
           class: "operation-item drag-item",
           title: i18n(props.ctx, "handle.drag")
         },
-        /* @__PURE__ */ h(Icon, { icon: dragHandleIcon })
+        /* @__PURE__ */ h$1(Icon, { icon: dragHandleIcon })
       ));
     };
   }
@@ -4997,7 +5324,11 @@ const activeIconMap = {
   [dividerIcon]: dividerIconActive
   // [highLineCodeIcon]: highLineCodeIconActive,
 };
-keepAlive(h, Fragment);
+keepAlive(h$1, Fragment);
+const formatPainterStates = /* @__PURE__ */ new WeakMap();
+const formatPainterHandlers = /* @__PURE__ */ new WeakMap();
+const formatPainterIgnoreNext = /* @__PURE__ */ new WeakMap();
+const cursorStyleEls = /* @__PURE__ */ new WeakMap();
 const Toolbar = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -5028,6 +5359,184 @@ const Toolbar = defineComponent({
     const tableMenuPos = ref({ top: 0, left: 0 });
     const tableHoverIndices = ref({ r: 0, c: 0 });
     let hideTableTimer = null;
+    let formatPainterState = formatPainterStates.get(ctx);
+    if (!formatPainterState) {
+      formatPainterState = ref(null);
+      formatPainterStates.set(ctx, formatPainterState);
+    }
+    let formatPainterIgnore = formatPainterIgnoreNext.get(ctx);
+    if (!formatPainterIgnore) {
+      formatPainterIgnore = { value: false };
+      formatPainterIgnoreNext.set(ctx, formatPainterIgnore);
+    }
+    let formatPainterHandler = formatPainterHandlers.get(ctx);
+    if (!formatPainterHandler) {
+      formatPainterHandler = (ev) => {
+        if (!formatPainterState.value) return;
+        if (formatPainterIgnore.value) {
+          formatPainterIgnore.value = false;
+          return;
+        }
+        const currentView = ctx.get(editorViewCtx);
+        const targetElement = ev.target instanceof Element ? ev.target : ev.target.parentElement;
+        if (targetElement && targetElement.closest(".milkdown-toolbar, .milkdown-fixed-toolbar")) {
+          return;
+        }
+        setTimeout(() => {
+          if (!formatPainterState.value) return;
+          const { state: curState, dispatch } = currentView;
+          const { selection: curSelection, tr } = curState;
+          const {
+            marks: savedMarks,
+            align: savedAlign,
+            isPersistent
+          } = formatPainterState.value;
+          let applied = false;
+          if (!curSelection.empty) {
+            savedMarks.forEach((m) => {
+              tr.addMark(curSelection.from, curSelection.to, m);
+            });
+            if (savedAlign) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node, pos) => {
+                  if (node.type.name === "paragraph" || node.type.name === "heading") {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      align: savedAlign
+                    });
+                  }
+                }
+              );
+            }
+            dispatch(tr);
+            applied = true;
+          } else {
+            if (savedMarks.length > 0) {
+              const $pos = curSelection.$from;
+              if ($pos.parent.isTextblock) {
+                const text = $pos.parent.textContent;
+                const offset = $pos.parentOffset;
+                let start = offset;
+                let end = offset;
+                const isWordChar = (char) => !/[\s,.\-!?;:()[\]{}"'“”‘’，。！？；：（）【】《》、\n\r]/.test(
+                  char
+                );
+                while (start > 0 && isWordChar(text[start - 1])) start--;
+                while (end < text.length && isWordChar(text[end])) end++;
+                if (start < end) {
+                  savedMarks.forEach((m) => {
+                    tr.addMark($pos.start() + start, $pos.start() + end, m);
+                  });
+                }
+              }
+            }
+            if (savedAlign) {
+              const pos = curSelection.$from.before(curSelection.$from.depth);
+              const node = curState.doc.nodeAt(pos);
+              if (node && (node.type.name === "paragraph" || node.type.name === "heading")) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  align: savedAlign
+                });
+              }
+            }
+            tr.setStoredMarks(savedMarks);
+            dispatch(tr);
+            applied = true;
+          }
+          if (applied && !isPersistent) {
+            formatPainterState.value = null;
+            document.removeEventListener("pointerup", formatPainterHandler);
+          }
+        }, 50);
+      };
+      formatPainterHandlers.set(ctx, formatPainterHandler);
+    }
+    const toggleFormatPainter = (isPersistent) => {
+      const view = ctx.get(editorViewCtx);
+      const { state } = view;
+      const { selection } = state;
+      let marks = [];
+      if (selection.empty) {
+        marks = state.storedMarks ? [...state.storedMarks] : [...selection.$from.marks()];
+      } else {
+        let foundMarks = null;
+        state.doc.nodesBetween(selection.from, selection.to, (node) => {
+          if (foundMarks) return false;
+          if (node.isInline) {
+            foundMarks = [...node.marks];
+            return false;
+          }
+          return void 0;
+        });
+        marks = foundMarks || [];
+      }
+      let align = null;
+      let foundAlign = null;
+      state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (foundAlign) return false;
+        if (node.isBlock && (node.type.name === "paragraph" || node.type.name === "heading")) {
+          foundAlign = node.attrs.align || null;
+          return false;
+        }
+        return void 0;
+      });
+      if (!foundAlign) {
+        const parent = selection.$from.parent;
+        if (parent && (parent.type.name === "paragraph" || parent.type.name === "heading")) {
+          foundAlign = parent.attrs.align || null;
+        }
+      }
+      align = foundAlign;
+      formatPainterState.value = { marks, align, isPersistent };
+      document.removeEventListener("pointerup", formatPainterHandler);
+      setTimeout(() => {
+        document.addEventListener("pointerup", formatPainterHandler);
+      }, 0);
+    };
+    const handleFormatPainterClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (formatPainterState.value) {
+        formatPainterState.value = null;
+        document.removeEventListener("pointerup", formatPainterHandler);
+      } else {
+        formatPainterIgnore.value = true;
+        toggleFormatPainter(false);
+      }
+    };
+    const handleFormatPainterDblClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleFormatPainter(true);
+    };
+    watch(
+      () => formatPainterState.value,
+      (newVal) => {
+        if (newVal) {
+          let cursorStyleEl = cursorStyleEls.get(ctx);
+          if (!cursorStyleEl) {
+            cursorStyleEl = document.createElement("style");
+            const encodedSvg = encodeURIComponent(
+              formatPainterIcon.replace(/currentColor/g, "#363B4C")
+            );
+            cursorStyleEl.innerHTML = `.milkdown .ProseMirror, .milkdown .ProseMirror * { cursor: url("data:image/svg+xml;utf8,${encodedSvg}") 0 16, auto !important; }`;
+            document.head.appendChild(cursorStyleEl);
+            cursorStyleEls.set(ctx, cursorStyleEl);
+          }
+        } else {
+          const cursorStyleEl = cursorStyleEls.get(ctx);
+          if (cursorStyleEl) {
+            cursorStyleEl.remove();
+            cursorStyleEls.delete(ctx);
+          }
+        }
+      }
+    );
+    onUnmounted(() => {
+    });
     const toolbarContainerRef = ref(null);
     const overflowVisibleCount = ref(Infinity);
     const totalSectionCount = ref(Infinity);
@@ -5619,7 +6128,7 @@ const Toolbar = defineComponent({
       showFontSizeMenu.value = false;
     };
     const renderSubMenuItem = (iconHtml, label, isActive, onClick2, disabled = false) => {
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -5651,13 +6160,13 @@ const Toolbar = defineComponent({
             e.currentTarget.style.backgroundColor = "transparent";
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "custom-menu-row-left",
             style: { display: "flex", alignItems: "center", gap: "8px" }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -5669,7 +6178,7 @@ const Toolbar = defineComponent({
               innerHTML: iconHtml
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -5680,7 +6189,7 @@ const Toolbar = defineComponent({
             label
           )
         ),
-        isActive ? /* @__PURE__ */ h(
+        isActive ? /* @__PURE__ */ h$1(
           "span",
           {
             style: {
@@ -5689,7 +6198,7 @@ const Toolbar = defineComponent({
               color: "var(--crepe-color-primary)"
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+          /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
         ) : null
       );
     };
@@ -5713,7 +6222,7 @@ const Toolbar = defineComponent({
       );
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           ref: toolbarContainerRef,
@@ -5724,7 +6233,7 @@ const Toolbar = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -5734,26 +6243,69 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(0) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: activeBlockItem.value || textIcon
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: isSectionOverflowed(0) ? "none" : "flex",
+              flexShrink: 0
+            }
+          },
+          /* @__PURE__ */ h$1(
+            "button",
+            {
+              type: "button",
+              class: clsx(
+                "toolbar-item",
+                formatPainterState.value && "active"
+              ),
+              onPointerdown: (e) => {
+                e.preventDefault();
+                handleFormatPainterClick(e);
+              },
+              onDblclick: handleFormatPainterDblClick,
+              title: i18n(ctx, "toolbar.formatPainter") || "Format Painter",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: formatPainterState.value ? "var(--crepe-color-selected, var(--crepe-color-hover))" : void 0
+              }
+            },
+            /* @__PURE__ */ h$1(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  "--toolbar-icon-color": formatPainterState.value ? "var(--crepe-color-primary)" : "#363B4C"
+                },
+                innerHTML: formatPainterIcon
+              }
+            )
+          )
+        ),
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "divider",
@@ -5765,7 +6317,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item custom-font-family-item",
@@ -5775,12 +6327,12 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(2) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "50px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -5794,7 +6346,7 @@ const Toolbar = defineComponent({
             },
             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"
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -5804,10 +6356,10 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item custom-font-size-item",
@@ -5817,13 +6369,13 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "40px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -5833,10 +6385,10 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "divider",
@@ -5848,7 +6400,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -5858,26 +6410,26 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(5) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -5891,7 +6443,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               class: "milkdown-icon",
@@ -5904,12 +6456,12 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
         (() => {
@@ -5919,7 +6471,7 @@ const Toolbar = defineComponent({
               const idx = sectionIdx;
               sectionIdx++;
               const isTable = item.icon === tableIcon;
-              return /* @__PURE__ */ h(
+              return /* @__PURE__ */ h$1(
                 "div",
                 {
                   key: item.label,
@@ -5931,7 +6483,7 @@ const Toolbar = defineComponent({
                   onMouseenter: isTable ? handleTableEnter : void 0,
                   onMouseleave: isTable ? handleTableLeave : void 0
                 },
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ h$1(
                   "button",
                   {
                     type: "button",
@@ -5954,14 +6506,14 @@ const Toolbar = defineComponent({
                       justifyContent: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ h$1(
                     "span",
                     {
                       style: { display: "inline-flex", alignItems: "center" },
                       innerHTML: ctx && checkActive(item.active) ? activeIconMap[item.icon] || item.icon : item.icon
                     }
                   ),
-                  isTable ? /* @__PURE__ */ h(
+                  isTable ? /* @__PURE__ */ h$1(
                     "span",
                     {
                       style: {
@@ -5972,7 +6524,7 @@ const Toolbar = defineComponent({
                         opacity: 0.5
                       }
                     },
-                    /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+                    /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
                   ) : null
                 )
               );
@@ -5981,7 +6533,7 @@ const Toolbar = defineComponent({
             if (groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0) {
               sectionIdx++;
             }
-            return /* @__PURE__ */ h(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h(
+            return /* @__PURE__ */ h$1(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h$1(
               "div",
               {
                 class: "divider",
@@ -5993,7 +6545,7 @@ const Toolbar = defineComponent({
             ) : null);
           });
         })(),
-        hasOverflow ? /* @__PURE__ */ h(
+        hasOverflow ? /* @__PURE__ */ h$1(
           "div",
           {
             "data-overflow-button": "true",
@@ -6020,7 +6572,7 @@ const Toolbar = defineComponent({
               showOverflowMenu.value = true;
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
@@ -6028,7 +6580,7 @@ const Toolbar = defineComponent({
             }
           )
         ) : null,
-        showBlockMenu.value ? /* @__PURE__ */ h(
+        showBlockMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6053,7 +6605,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleBlockLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6110,7 +6662,7 @@ const Toolbar = defineComponent({
             );
           })
         ) : null,
-        showAlignMenu.value ? /* @__PURE__ */ h(
+        showAlignMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6133,7 +6685,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleAlignLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6164,7 +6716,7 @@ const Toolbar = defineComponent({
             currentAlignIndent.value.align === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6186,7 +6738,7 @@ const Toolbar = defineComponent({
             () => setIndent(-1),
             currentAlignIndent.value.indent <= 0
           ),
-          canMerge.value || canSplit.value ? /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+          canMerge.value || canSplit.value ? /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6206,7 +6758,7 @@ const Toolbar = defineComponent({
             onSplitCell
           )) : null
         ) : null,
-        showColorMenu.value ? /* @__PURE__ */ h(
+        showColorMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6230,7 +6782,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleColorLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6243,7 +6795,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6254,7 +6806,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.textColor") : "\u5B57\u4F53\u989C\u8272"
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -6263,7 +6815,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -6286,7 +6838,7 @@ const Toolbar = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6298,7 +6850,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.bgColor") : "\u80CC\u666F\u989C\u8272"
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -6307,7 +6859,7 @@ const Toolbar = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -6324,7 +6876,7 @@ const Toolbar = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h(
+            color === "transparent" ? /* @__PURE__ */ h$1(
               "div",
               {
                 style: {
@@ -6348,7 +6900,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -6364,7 +6916,7 @@ const Toolbar = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               onClick: clearColor,
@@ -6383,7 +6935,7 @@ const Toolbar = defineComponent({
             ctx ? i18n(ctx, "customMenu.restoreDefault") : "\u6062\u590D\u9ED8\u8BA4"
           )
         ) : null,
-        showFontFamilyMenu.value ? /* @__PURE__ */ h(
+        showFontFamilyMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6408,7 +6960,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontFamilyLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6469,7 +7021,7 @@ const Toolbar = defineComponent({
             }
           ].map((font) => {
             const supported = isFontSupported(font.value);
-            return /* @__PURE__ */ h(
+            return /* @__PURE__ */ h$1(
               "div",
               {
                 key: font.label,
@@ -6506,7 +7058,7 @@ const Toolbar = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -6516,7 +7068,7 @@ const Toolbar = defineComponent({
                 },
                 font.label
               ),
-              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h(
+              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -6525,12 +7077,12 @@ const Toolbar = defineComponent({
                     color: "var(--crepe-color-primary)"
                   }
                 },
-                /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+                /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
               ) : null
             );
           })
         ) : null,
-        showFontSizeMenu.value ? /* @__PURE__ */ h(
+        showFontSizeMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6555,7 +7107,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontSizeLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6580,7 +7132,7 @@ const Toolbar = defineComponent({
             { label: "28px", value: "28px" },
             { label: "32px", value: "32px" },
             { label: "36px", value: "36px" }
-          ].map((size) => /* @__PURE__ */ h(
+          ].map((size) => /* @__PURE__ */ h$1(
             "div",
             {
               key: size.label,
@@ -6611,7 +7163,7 @@ const Toolbar = defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "span",
               {
                 style: {
@@ -6621,7 +7173,7 @@ const Toolbar = defineComponent({
               },
               size.label
             ),
-            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h(
+            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h$1(
               "span",
               {
                 style: {
@@ -6630,11 +7182,11 @@ const Toolbar = defineComponent({
                   color: "var(--crepe-color-primary)"
                 }
               },
-              /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+              /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
             ) : null
           ))
         ) : null,
-        showTableMenu.value ? /* @__PURE__ */ h(
+        showTableMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6657,7 +7209,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleTableLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6670,7 +7222,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6682,7 +7234,7 @@ const Toolbar = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6695,7 +7247,7 @@ const Toolbar = defineComponent({
             Array.from({ length: 9 }).map(
               (_, r) => Array.from({ length: 9 }).map((_2, c) => {
                 const isHovered = r < tableHoverIndices.value.r && c < tableHoverIndices.value.c;
-                return /* @__PURE__ */ h(
+                return /* @__PURE__ */ h$1(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -6724,7 +7276,7 @@ const Toolbar = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6737,7 +7289,7 @@ const Toolbar = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h(
+          ) : /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6750,7 +7302,7 @@ const Toolbar = defineComponent({
             "0 x 0"
           )
         ) : null,
-        showOverflowMenu.value ? /* @__PURE__ */ h(
+        showOverflowMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "overflow-menu-popup",
@@ -6775,7 +7327,7 @@ const Toolbar = defineComponent({
           (() => {
             const cutoff = overflowVisibleCount.value;
             const items = [];
-            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave) => /* @__PURE__ */ h(
+            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave) => /* @__PURE__ */ h$1(
               "button",
               {
                 type: "button",
@@ -6798,14 +7350,14 @@ const Toolbar = defineComponent({
                   justifyContent: "center"
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: { display: "inline-flex", alignItems: "center" },
                   innerHTML: iconHtml
                 }
               ),
-              hasDropdown ? /* @__PURE__ */ h(
+              hasDropdown ? /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -6815,7 +7367,7 @@ const Toolbar = defineComponent({
                     opacity: 0.5
                   }
                 },
-                /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+                /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
               ) : null
             );
             if (0 >= cutoff) {
@@ -6895,7 +7447,7 @@ const Toolbar = defineComponent({
                       ctx && checkActive(item.active) ? activeIconMap[item.icon] || item.icon : item.icon,
                       item.label,
                       ctx ? checkActive(item.active) : false,
-                      isTable ? void 0 : (e) => {
+                      isTable ? void 0 : (_e) => {
                         item.onRun(ctx);
                         showOverflowMenu.value = false;
                       },
@@ -7161,7 +7713,9 @@ const MenuBar = defineComponent({
               boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
               cursor: "default"
             },
-            onClick: (e) => e.stopPropagation()
+            onClick: (e) => {
+              e.stopPropagation();
+            }
           },
           menuKeys.map((menuKey) => {
             const isHovered = activeSubmenu.value === menuKey;
@@ -7170,7 +7724,9 @@ const MenuBar = defineComponent({
               "div",
               {
                 key: menuKey,
-                onMouseenter: () => onMouseEnterItem(menuKey),
+                onMouseenter: () => {
+                  onMouseEnterItem(menuKey);
+                },
                 onMouseleave: () => {
                   if (hasSubmenu(menuKey)) {
                     activeSubmenu.value = null;
@@ -7591,7 +8147,7 @@ const labelStyle = {
   color: "var(--crepe-color-on-surface, #333)"
 };
 function renderGroup(ctx, group) {
-  return /* @__PURE__ */ h("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ h("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ h("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ h("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ h("span", { key: i, style: badgeStyle }, fmt(key))))))));
+  return /* @__PURE__ */ h$1("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ h$1("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ h$1("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ h$1("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ h$1("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ h$1("span", { key: i, style: badgeStyle }, fmt(key))))))));
 }
 const ShortcutHelpModal = defineComponent({
   props: {
@@ -7607,7 +8163,7 @@ const ShortcutHelpModal = defineComponent({
     };
     onMounted(() => document.addEventListener("keydown", onKeydown));
     onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
-    return () => /* @__PURE__ */ h(
+    return () => /* @__PURE__ */ h$1(
       "div",
       {
         style: {
@@ -7621,7 +8177,7 @@ const ShortcutHelpModal = defineComponent({
         },
         onClick: close
       },
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ h$1(
         "div",
         {
           style: {
@@ -7635,7 +8191,7 @@ const ShortcutHelpModal = defineComponent({
           },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -7647,7 +8203,7 @@ const ShortcutHelpModal = defineComponent({
               borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -7658,7 +8214,7 @@ const ShortcutHelpModal = defineComponent({
             },
             i18n(props.ctx, "shortcuts.title")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               type: "button",
@@ -7676,10 +8232,10 @@ const ShortcutHelpModal = defineComponent({
                 color: "var(--crepe-color-on-surface-variant, #666)"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: closeIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: closeIcon })
           )
         ),
-        /* @__PURE__ */ h("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h$1("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -7688,7 +8244,7 @@ const ShortcutHelpModal = defineComponent({
               backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           }
-        ), /* @__PURE__ */ h("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
+        ), /* @__PURE__ */ h$1("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
       )
     );
   }
@@ -7745,179 +8301,51 @@ const FixedToolbarComponent = defineComponent({
             width: "1px",
             minWidth: "1px",
             height: "20px",
-            flexShrink: 0,
-            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-          }
-        }
-      ),
-      /* @__PURE__ */ h(
-        "button",
-        {
-          type: "button",
-          class: "toolbar-shortcut-btn",
-          title: i18n(props.ctx, "shortcuts.title"),
-          onClick: () => {
-            showShortcuts.value = true;
-          }
-        },
-        /* @__PURE__ */ h(Icon, { icon: keyboardIcon })
-      ),
-      showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
-    );
-  }
-});
-
-function convertHeadingToParagraphIfNeeded(ctx) {
-  const commands = ctx.get(commandsCtx);
-  const view = ctx.get(editorViewCtx);
-  const heading = headingSchema.type(ctx);
-  const { from, to } = view.state.selection;
-  let hasHeading = false;
-  view.state.doc.nodesBetween(from, to, (node) => {
-    if (node.type === heading) hasHeading = true;
-  });
-  if (hasHeading) {
-    commands.call(setBlockTypeCommand.key, {
-      nodeType: paragraphSchema.type(ctx)
-    });
-  }
-}
-function buildDefaultFixedToolbar(builder, _config, ctx) {
-  const flags = ctx && useCrepeFeatures(ctx).get();
-  const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
-  const isImageBlockEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.ImageBlock);
-  const isTableEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Table);
-  const hasFunctionGroup = builder.build().some((g) => g.key === "function");
-  const embedGroup = hasFunctionGroup ? builder.getGroup("function") : builder.addGroup("embed", "Embed");
-  if (isImageBlockEnabled) {
-    embedGroup.addItem("image", {
-      label: ctx ? i18n(ctx, "menu.item.image") : "Image",
-      icon: imageIcon,
-      active: () => false,
-      onRun: (ctx2) => {
-        const commands = ctx2.get(commandsCtx);
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: imageBlockSchema.type(ctx2)
-        });
-      }
-    });
-  }
-  const isAttachmentEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Attachment);
-  if (isAttachmentEnabled) {
-    embedGroup.addItem("attachment", {
-      label: ctx ? i18n(ctx, "menu.item.attachment") : "Video or File",
-      icon: fileLinkIcon,
-      active: () => false,
-      onRun: (ctx2) => {
-        const commands = ctx2.get(commandsCtx);
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: attachmentSchema.type(ctx2)
-        });
-      }
-    });
-  }
-  embedGroup.addItem("code-block", {
-    label: ctx ? i18n(ctx, "menu.item.code") : "Code Block",
-    icon: codeIcon,
-    active: (ctx2) => {
-      var _a, _b;
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(view.state, codeBlockSchema.type(ctx2));
-      return result.hasNode && ((_b = (_a = result.target) == null ? void 0 : _a.attrs) == null ? void 0 : _b.language) !== "LaTex";
-    },
-    onRun: (ctx2) => {
-      const commands = ctx2.get(commandsCtx);
-      const view = ctx2.get(editorViewCtx);
-      const { state, dispatch } = view;
-      const { selection, tr } = state;
-      const { from, to } = selection;
-      let text = "";
-      let blockCount = 0;
-      state.doc.nodesBetween(from, to, (node) => {
-        if (node.isTextblock) {
-          text += (blockCount > 0 ? "\n" : "") + node.textContent;
-          blockCount++;
-        }
-      });
-      if (blockCount > 1) {
-        if (dispatch) {
-          const range = selection.$from.blockRange(selection.$to);
-          const codeBlock = codeBlockSchema.type(ctx2).createAndFill({}, text ? state.schema.text(text) : void 0);
-          if (range && codeBlock) {
-            tr.replaceWith(range.start, range.end, codeBlock);
-            dispatch(tr.scrollIntoView());
+            flexShrink: 0,
+            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
           }
         }
-        return;
-      }
-      commands.call(setBlockTypeCommand.key, {
-        nodeType: codeBlockSchema.type(ctx2)
-      });
-    }
-  });
-  if (isTableEnabled) {
-    embedGroup.addItem("table", {
-      label: ctx ? i18n(ctx, "menu.item.table") : "Table",
-      icon: tableIcon,
-      active: () => false,
-      onRun: (ctx2) => {
-        const commands = ctx2.get(commandsCtx);
-        const view = ctx2.get(editorViewCtx);
-        const { from } = view.state.selection;
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: createTable(ctx2, 3, 3)
-        });
-        commands.call(selectTextNearPosCommand.key, { pos: from });
-      }
-    });
+      ),
+      /* @__PURE__ */ h(
+        "button",
+        {
+          type: "button",
+          class: "toolbar-shortcut-btn",
+          title: i18n(props.ctx, "shortcuts.title"),
+          onClick: () => {
+            showShortcuts.value = true;
+          }
+        },
+        /* @__PURE__ */ h(Icon, { icon: keyboardIcon })
+      ),
+      showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+    );
   }
-  if (isLatexEnabled) {
-    embedGroup.addItem("math-block", {
-      label: ctx ? i18n(ctx, "menu.item.math") : "Math Block",
-      icon: functionsIcon,
-      active: (ctx2) => {
-        var _a, _b;
-        const view = ctx2.get(editorViewCtx);
-        const result = findNodeInSelection(
-          view.state,
-          codeBlockSchema.type(ctx2)
-        );
-        return result.hasNode && ((_b = (_a = result.target) == null ? void 0 : _a.attrs) == null ? void 0 : _b.language) === "LaTex";
-      },
-      onRun: (ctx2) => {
-        const commands = ctx2.get(commandsCtx);
-        commands.call(toggleLatexCommand.key);
-      }
+});
+
+function convertHeadingToParagraphIfNeeded(ctx) {
+  const commands = ctx.get(commandsCtx);
+  const view = ctx.get(editorViewCtx);
+  const heading = headingSchema.type(ctx);
+  const { from, to } = view.state.selection;
+  let hasHeading = false;
+  view.state.doc.nodesBetween(from, to, (node) => {
+    if (node.type === heading) hasHeading = true;
+  });
+  if (hasHeading) {
+    commands.call(setBlockTypeCommand.key, {
+      nodeType: paragraphSchema.type(ctx)
     });
   }
-  const blockGroup = builder.addGroup("block", "Block");
-  blockGroup.addItem("quote", {
-    label: ctx ? i18n(ctx, "menu.item.quote") : "Quote",
-    icon: quoteIcon,
-    active: (ctx2) => {
-      const view = ctx2.get(editorViewCtx);
-      const result = findNodeInSelection(
-        view.state,
-        blockquoteSchema.type(ctx2)
-      );
-      return result.hasNode;
-    },
-    onRun: (ctx2) => {
-      const view = ctx2.get(editorViewCtx);
-      const commands = ctx2.get(commandsCtx);
-      const isActive = findNodeInSelection(
-        view.state,
-        blockquoteSchema.type(ctx2)
-      ).hasNode;
-      if (isActive) {
-        lift(view.state, view.dispatch);
-      } else {
-        commands.call(wrapInBlockTypeCommand.key, {
-          nodeType: blockquoteSchema.type(ctx2)
-        });
-      }
-    }
-  }).addItem("divider", {
+}
+function buildDefaultFixedToolbar(builder, _config, ctx) {
+  const flags = ctx && useCrepeFeatures(ctx).get();
+  const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
+  const isImageBlockEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.ImageBlock);
+  const isTableEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Table);
+  const isAttachmentEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Attachment);
+  const listGroup = builder.addGroup("list", "List");
+  listGroup.addItem("divider", {
     label: ctx ? i18n(ctx, "menu.item.divider") : "Divider",
     icon: dividerIcon,
     active: () => false,
@@ -7925,9 +8353,7 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       const commands = ctx2.get(commandsCtx);
       commands.call(addBlockTypeCommand.key, { nodeType: hrSchema.type(ctx2) });
     }
-  });
-  const listGroup = blockGroup;
-  listGroup.addItem("bullet-list", {
+  }).addItem("bullet-list", {
     label: ctx ? i18n(ctx, "menu.item.bulletList") : "Bullet List",
     icon: bulletListIcon,
     active: (ctx2) => {
@@ -8131,27 +8557,195 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
         view.dispatch(tr);
         return;
       }
-      convertHeadingToParagraphIfNeeded(ctx2);
-      const result = wrapInList(bulletList)(view.state, (tr) => {
-        tr.doc.nodesBetween(
-          tr.mapping.map(from),
-          tr.mapping.map(to),
-          (node, pos) => {
-            if (node.type === listItem) {
-              tr.setNodeMarkup(pos, void 0, {
-                ...node.attrs,
-                checked: false,
-                listType: "bullet",
-                label: "\u2022"
-              });
-            }
-          }
-        );
-        view.dispatch(tr);
+      convertHeadingToParagraphIfNeeded(ctx2);
+      const result = wrapInList(bulletList)(view.state, (tr) => {
+        tr.doc.nodesBetween(
+          tr.mapping.map(from),
+          tr.mapping.map(to),
+          (node, pos) => {
+            if (node.type === listItem) {
+              tr.setNodeMarkup(pos, void 0, {
+                ...node.attrs,
+                checked: false,
+                listType: "bullet",
+                label: "\u2022"
+              });
+            }
+          }
+        );
+        view.dispatch(tr);
+      });
+      if (result) return;
+    }
+  });
+  const blockGroup = builder.addGroup("block", "Block");
+  if (isTableEnabled) {
+    blockGroup.addItem("table", {
+      label: ctx ? i18n(ctx, "menu.item.table") : "Table",
+      icon: tableIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        const view = ctx2.get(editorViewCtx);
+        const { from } = view.state.selection;
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: createTable(ctx2, 3, 3)
+        });
+        commands.call(selectTextNearPosCommand.key, { pos: from });
+      }
+    });
+  }
+  if (isImageBlockEnabled) {
+    blockGroup.addItem("image", {
+      label: ctx ? i18n(ctx, "menu.item.image") : "Image",
+      icon: imageIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: imageBlockSchema.type(ctx2)
+        });
+      }
+    });
+  }
+  blockGroup.addItem("quote", {
+    label: ctx ? i18n(ctx, "menu.item.quote") : "Quote",
+    icon: quoteIcon,
+    active: (ctx2) => {
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(
+        view.state,
+        blockquoteSchema.type(ctx2)
+      );
+      return result.hasNode;
+    },
+    onRun: (ctx2) => {
+      const view = ctx2.get(editorViewCtx);
+      const commands = ctx2.get(commandsCtx);
+      const isActive = findNodeInSelection(
+        view.state,
+        blockquoteSchema.type(ctx2)
+      ).hasNode;
+      if (isActive) {
+        lift(view.state, view.dispatch);
+      } else {
+        commands.call(wrapInBlockTypeCommand.key, {
+          nodeType: blockquoteSchema.type(ctx2)
+        });
+      }
+    }
+  }).addItem("highlight", {
+    label: ctx ? i18n(ctx, "menu.item.highlight") : "Highlight",
+    icon: 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);
+    }
+  }).addItem("code", {
+    label: ctx ? i18n(ctx, "menu.item.lineCode") : "Inline Code",
+    icon: 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);
+    }
+  }).addItem("link", {
+    label: ctx ? i18n(ctx, "menu.item.link") : "Link",
+    icon: 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);
+    }
+  });
+  if (isAttachmentEnabled) {
+    blockGroup.addItem("attachment", {
+      label: ctx ? i18n(ctx, "menu.item.attachment") : "Video or File",
+      icon: fileLinkIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: attachmentSchema.type(ctx2)
+        });
+      }
+    });
+  }
+  blockGroup.addItem("code-block", {
+    label: ctx ? i18n(ctx, "menu.item.code") : "Code Block",
+    icon: codeIcon,
+    active: (ctx2) => {
+      var _a, _b;
+      const view = ctx2.get(editorViewCtx);
+      const result = findNodeInSelection(view.state, codeBlockSchema.type(ctx2));
+      return result.hasNode && ((_b = (_a = result.target) == null ? void 0 : _a.attrs) == null ? void 0 : _b.language) !== "LaTex";
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const view = ctx2.get(editorViewCtx);
+      const { state, dispatch } = view;
+      const { selection, tr } = state;
+      const { from, to } = selection;
+      let text = "";
+      let blockCount = 0;
+      state.doc.nodesBetween(from, to, (node) => {
+        if (node.isTextblock) {
+          text += (blockCount > 0 ? "\n" : "") + node.textContent;
+          blockCount++;
+        }
+      });
+      if (blockCount > 1) {
+        if (dispatch) {
+          const range = selection.$from.blockRange(selection.$to);
+          const codeBlock = codeBlockSchema.type(ctx2).createAndFill({}, text ? state.schema.text(text) : void 0);
+          if (range && codeBlock) {
+            tr.replaceWith(range.start, range.end, codeBlock);
+            dispatch(tr.scrollIntoView());
+          }
+        }
+        return;
+      }
+      commands.call(setBlockTypeCommand.key, {
+        nodeType: codeBlockSchema.type(ctx2)
       });
-      if (result) return;
     }
   });
+  if (isLatexEnabled) {
+    blockGroup.addItem("math-block", {
+      label: ctx ? i18n(ctx, "menu.item.math") : "Math Block",
+      icon: functionsIcon,
+      active: (ctx2) => {
+        var _a, _b;
+        const view = ctx2.get(editorViewCtx);
+        const result = findNodeInSelection(
+          view.state,
+          codeBlockSchema.type(ctx2)
+        );
+        return result.hasNode && ((_b = (_a = result.target) == null ? void 0 : _a.attrs) == null ? void 0 : _b.language) === "LaTex";
+      },
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        commands.call(toggleLatexCommand.key);
+      }
+    });
+  }
+  return builder.build();
 }
 
 const DocumentHeader = defineComponent({
@@ -8767,7 +9361,8 @@ const OutlinePanel = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              "\u25BC"
+              "\uFFFD?",
+              " "
             ),
             /* @__PURE__ */ h(
               "span",
@@ -9175,7 +9770,7 @@ const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
 
 const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
 
-keepAlive(h);
+keepAlive(h$1);
 const LatexTooltip = defineComponent({
   props: {
     ctx: {
@@ -9211,7 +9806,7 @@ const LatexTooltip = defineComponent({
       }
     };
     return () => {
-      return /* @__PURE__ */ h("div", { class: "container container-large" }, /* @__PURE__ */ h("div", { class: "input-container" }, props.innerView ? /* @__PURE__ */ h("div", { ref: innerViewRef }) : null), /* @__PURE__ */ h("div", { class: "footer" }, /* @__PURE__ */ h("span", { class: "left" }, i18n(props.ctx, "latex.escToExit")), /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1("div", { class: "container container-large" }, /* @__PURE__ */ h$1("div", { class: "input-container" }, props.innerView ? /* @__PURE__ */ h$1("div", { ref: innerViewRef }) : null), /* @__PURE__ */ h$1("div", { class: "footer" }, /* @__PURE__ */ h$1("span", { class: "left" }, i18n(props.ctx, "latex.escToExit")), /* @__PURE__ */ h$1(
         "a",
         {
           class: "right",
@@ -9219,7 +9814,7 @@ const LatexTooltip = defineComponent({
           target: "_blank",
           style: "display: none;"
         },
-        /* @__PURE__ */ h(Icon, { icon: helpIcon }),
+        /* @__PURE__ */ h$1(Icon, { icon: helpIcon }),
         " ",
         i18n(props.ctx, "latex.helpDoc")
       )));
@@ -9497,547 +10092,228 @@ const linkTooltip = (editor, config) => {
         ...prev,
         linkIcon: (_a = config == null ? void 0 : config.linkIcon) != null ? _a : copyIcon,
         editButton: (_b = config == null ? void 0 : config.editButton) != null ? _b : editIcon,
-        removeButton: (_c = config == null ? void 0 : config.removeButton) != null ? _c : removeIcon,
-        confirmButton: (_d = config == null ? void 0 : config.confirmButton) != null ? _d : confirmIcon,
-        inputPlaceholder: (_e = config == null ? void 0 : config.inputPlaceholder) != null ? _e : i18n(ctx, "linkTooltip.pasteLink"),
-        onCopyLink: (_f = config == null ? void 0 : config.onCopyLink) != null ? _f : (() => {
-        })
-      };
-    });
-  }).use(linkTooltipPlugin);
-};
-
-function configureListItem(ctx, config) {
-  ctx.set(listItemBlockConfig.key, {
-    renderLabel: ({ label, listType, checked }) => {
-      var _a, _b, _c;
-      if (checked == null) {
-        if (listType === "bullet") return (_a = config == null ? void 0 : config.bulletIcon) != null ? _a : bulletIcon;
-        return label;
-      }
-      if (checked) return (_b = config == null ? void 0 : config.checkBoxCheckedIcon) != null ? _b : checkBoxCheckedIcon;
-      return (_c = config == null ? void 0 : config.checkBoxUncheckedIcon) != null ? _c : checkBoxUncheckedIcon;
-    }
-  });
-}
-const listItem = (editor, config) => {
-  editor.config(crepeFeatureConfig(CrepeFeature.ListItem)).config((ctx) => configureListItem(ctx, config)).use(listItemBlockComponent);
-};
-
-function isDocEmpty(doc) {
-  var _a;
-  return doc.childCount <= 1 && !((_a = doc.firstChild) == null ? void 0 : _a.content.size);
-}
-function createPlaceholderDecoration(state, placeholderText) {
-  const { selection } = state;
-  if (!selection.empty) return null;
-  const $pos = selection.$anchor;
-  const node = $pos.parent;
-  if (node.content.size > 0) return null;
-  const inTable = findParent((node2) => node2.type.name === "table")($pos);
-  if (inTable) return null;
-  const before = $pos.before();
-  return Decoration.node(before, before + node.nodeSize, {
-    class: "crepe-placeholder",
-    "data-placeholder": placeholderText
-  });
-}
-const placeholderConfig = $ctx(
-  {
-    mode: "doc"
-  },
-  "placeholderConfigCtx"
-);
-const placeholderPlugin = $prose((ctx) => {
-  return new Plugin({
-    key: new PluginKey("CREPE_PLACEHOLDER"),
-    props: {
-      decorations: (state) => {
-        var _a;
-        const crepe = useCrepe(ctx);
-        if (crepe.readonly) return DecorationSet.empty;
-        const config = ctx.get(placeholderConfig.key);
-        if (config.mode === "doc" && !isDocEmpty(state.doc)) return DecorationSet.empty;
-        if (isInCodeBlock(state.selection) || isInList(state.selection))
-          return DecorationSet.empty;
-        const placeholderText = (_a = config.text) != null ? _a : i18n(ctx, "placeholder.text");
-        const deco = createPlaceholderDecoration(state, placeholderText);
-        if (!deco) return DecorationSet.empty;
-        return DecorationSet.create(state.doc, [deco]);
-      }
-    }
-  });
-});
-const placeholder = (editor, config) => {
-  editor.config(crepeFeatureConfig(CrepeFeature.Placeholder)).config((ctx) => {
-    if (config) {
-      ctx.update(placeholderConfig.key, (prev) => {
-        return {
-          ...prev,
-          ...config
-        };
-      });
-    }
-  }).use(placeholderPlugin).use(placeholderConfig);
-};
-
-const table = (editor, config) => {
-  editor.config(crepeFeatureConfig(CrepeFeature.Table)).config((ctx) => {
-    ctx.update(tableBlockConfig.key, (defaultConfig) => ({
-      ...defaultConfig,
-      renderButton: (renderType) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-        switch (renderType) {
-          case "add_row":
-            return (_a = config == null ? void 0 : config.addRowIcon) != null ? _a : plusIcon;
-          case "add_col":
-            return (_b = config == null ? void 0 : config.addColIcon) != null ? _b : plusIcon;
-          case "delete_row":
-            return (_c = config == null ? void 0 : config.deleteRowIcon) != null ? _c : removeIcon;
-          case "delete_col":
-            return (_d = config == null ? void 0 : config.deleteColIcon) != null ? _d : removeIcon;
-          case "align_col_left":
-            return (_e = config == null ? void 0 : config.alignLeftIcon) != null ? _e : alignLeftIcon;
-          case "align_col_center":
-            return (_f = config == null ? void 0 : config.alignCenterIcon) != null ? _f : alignCenterIcon;
-          case "align_col_right":
-            return (_g = config == null ? void 0 : config.alignRightIcon) != null ? _g : alignRightIcon;
-          case "col_drag_handle":
-            return (_h = config == null ? void 0 : config.colDragHandleIcon) != null ? _h : dragHandleIcon;
-          case "row_drag_handle":
-            return (_i = config == null ? void 0 : config.rowDragHandleIcon) != null ? _i : dragHandleIcon;
-          case "merge_cells":
-            return (_j = config == null ? void 0 : config.mergeCellsIcon) != null ? _j : mergeCellIcon;
-          case "split_cell":
-            return (_k = config == null ? void 0 : config.splitCellIcon) != null ? _k : splitCellIcon;
-        }
-      }
-    }));
-  }).use(tableBlock);
-};
-
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-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;
-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, _show, ref(false));
-    __privateAdd$1(this, _mousePressed, false);
-    this.update = (view, prevState) => {
-      __privateGet$1(this, _tooltipProvider).update(view, prevState);
-      __privateGet$1(this, _selection).value = view.state.selection;
-    };
-    this.destroy = () => {
-      __privateGet$1(this, _tooltipProvider).destroy();
-      __privateGet$1(this, _app).unmount();
-      __privateGet$1(this, _content).remove();
-    };
-    this.hide = () => {
-      __privateGet$1(this, _tooltipProvider).hide();
-    };
-    const content = document.createElement("div");
-    content.className = "milkdown-toolbar";
-    __privateSet$1(this, _selection, shallowRef(view.state.selection));
-    const app = createApp(Toolbar, {
-      ctx,
-      hide: this.hide,
-      config,
-      selection: __privateGet$1(this, _selection),
-      show: __privateGet$1(this, _show)
-    });
-    app.mount(content);
-    __privateSet$1(this, _content, content);
-    __privateSet$1(this, _app, app);
-    view.dom.addEventListener("mousedown", () => {
-      __privateSet$1(this, _mousePressed, true);
-    });
-    view.dom.addEventListener("mouseup", () => {
-      __privateSet$1(this, _mousePressed, false);
-      setTimeout(() => {
-        this.update(view);
-      }, 0);
-    });
-    __privateSet$1(this, _tooltipProvider, new TooltipProvider({
-      content: __privateGet$1(this, _content),
-      debounce: 20,
-      offset: 10,
-      shouldShow: (view2) => {
-        if (__privateGet$1(this, _mousePressed)) return false;
-        const { doc, selection } = view2.state;
-        const { empty, from, to } = selection;
-        const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof TextSelection;
-        const isNotTextBlock = !(selection instanceof TextSelection) && !(selection instanceof AllSelection);
-        const activeElement = view2.dom.getRootNode().activeElement;
-        const isTooltipChildren = content.contains(activeElement);
-        const notHasFocus = !view2.hasFocus() && !isTooltipChildren;
-        const isReadonly = !view2.editable;
-        if (notHasFocus || isNotTextBlock || empty || isEmptyTextBlock || isReadonly)
-          return false;
-        return true;
-      }
-    }));
-    __privateGet$1(this, _tooltipProvider).onShow = () => {
-      __privateGet$1(this, _show).value = true;
-    };
-    __privateGet$1(this, _tooltipProvider).onHide = () => {
-      __privateGet$1(this, _show).value = false;
-    };
-    this.update(view);
-  }
-}
-_tooltipProvider = new WeakMap();
-_content = new WeakMap();
-_app = new WeakMap();
-_selection = new WeakMap();
-_show = new WeakMap();
-_mousePressed = new WeakMap();
-const toolbar = (editor, config) => {
-  editor.config(crepeFeatureConfig(CrepeFeature.Toolbar)).config((ctx) => {
-    ctx.set(toolbarTooltip.key, {
-      view: (view) => new ToolbarView(ctx, view, config)
-    });
-  }).config((ctx) => {
-    ctx.update(editorViewOptionsCtx, (prev) => {
-      const prevTransform = prev.transformPastedHTML;
-      return {
-        ...prev,
-        transformPastedHTML: (html, view) => {
-          if (prevTransform) html = prevTransform(html, view);
-          return stripFontFamilyFromExternalHTML(html);
-        }
+        removeButton: (_c = config == null ? void 0 : config.removeButton) != null ? _c : removeIcon,
+        confirmButton: (_d = config == null ? void 0 : config.confirmButton) != null ? _d : confirmIcon,
+        inputPlaceholder: (_e = config == null ? void 0 : config.inputPlaceholder) != null ? _e : i18n(ctx, "linkTooltip.pasteLink"),
+        onCopyLink: (_f = config == null ? void 0 : config.onCopyLink) != null ? _f : (() => {
+        })
       };
     });
-  }).use(underline).use(highlightMark).use(colorPlugins).use(fontPlugins).use(toolbarTooltip);
+  }).use(linkTooltipPlugin);
 };
 
-const attachmentConfig = $ctx(
-  {
-    onUpload: async (file) => {
-      return {
-        url: URL.createObjectURL(file),
-        name: file.name,
-        size: file.size
-      };
-    },
-    uploadButton: "Upload file",
-    uploadPlaceholderText: "or paste link",
-    downloadText: "Download"
-  },
-  "attachmentConfig"
-);
+function configureListItem(ctx, config) {
+  ctx.set(listItemBlockConfig.key, {
+    renderLabel: ({ label, listType, checked }) => {
+      var _a, _b, _c;
+      if (checked == null) {
+        if (listType === "bullet") return (_a = config == null ? void 0 : config.bulletIcon) != null ? _a : bulletIcon;
+        return label;
+      }
+      if (checked) return (_b = config == null ? void 0 : config.checkBoxCheckedIcon) != null ? _b : checkBoxCheckedIcon;
+      return (_c = config == null ? void 0 : config.checkBoxUncheckedIcon) != null ? _c : checkBoxUncheckedIcon;
+    }
+  });
+}
+const listItem = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.ListItem)).config((ctx) => configureListItem(ctx, config)).use(listItemBlockComponent);
+};
 
-const downloadIcon = `<svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
-  <path d="M464.96 743.936L194.304 479.68c-4.928-4.8-10.24-9.408-14.592-14.656-20.736-24.768-21.376-45.76-2.368-63.424 17.664-16.384 43.328-16 65.472 4.8 49.088 46.144 96.64 93.824 144.896 140.8l69.376 67.52 11.968 11.392v-184.96c0-36.096-0.128-86.272-0.32-136.96-0.192-54.912-0.32-110.464-0.32-149.504l-0.064-9.28a208 208 0 0 1 0.704-26.56c3.52-31.168 19.328-46.592 45.248-45.76 25.344 0.832 41.088 16.96 42.688 48.576 1.28 24.384 1.024 48.896 0.768 73.408l-0.128 28.928c0 53.376 0.128 120.32 0.256 188.096 0.192 76.352 0.384 153.792 0.32 214.016 74.432-72.704 185.6-181.12 216.32-210.88 7.424-7.168 14.912-15.168 24-19.52 18.688-8.96 37.632-8.32 52.672 7.872 14.72 15.744 16.448 33.408 4.032 51.392-3.84 5.632-8.576 10.816-13.44 15.616-45.696 44.736-243.328 238.272-289.728 282.24a62.592 62.592 0 0 1-8.064 6.4 43.392 43.392 0 0 1-15.872 10.432c-20.544 7.616-37.504-0.512-51.968-14.848l-11.2-10.88z m430.784-39.744c24-0.576 42.176 14.4 43.328 41.6 1.728 40.832 2.944 82.176-1.088 122.816-5.312 54.144-51.52 89.792-114.752 91.008-50.112 0.896-100.224 0.704-150.4 0.512L608 960H434.944c-64.832 0.128-129.6 0.192-194.432-0.192-90.624-0.512-130.752-40.192-131.392-128.64l-0.192-18.56c-0.32-21.12-0.576-42.304 0.768-63.36 1.92-29.76 20.48-46.528 45.76-45.184 23.488 1.28 37.312 16.32 40.064 45.184 0.896 9.792 0.832 19.648 0.704 29.504l-0.064 11.52c0.384 76.544 7.36 83.392 88.128 83.456a163213.952 163213.952 0 0 0 351.68 0.064l43.968 0.128c36.096 0.128 72.192 0.256 108.288-0.448 52.672-1.024 64-12.864 65.152-64.32 0.192-7.68 0.128-15.488 0-23.232a414.72 414.72 0 0 1 0.704-38.208c2.24-27.712 17.92-42.944 41.664-43.52z" fill="currentColor"></path>
-</svg>`;
-function formatBytes(bytes, decimals = 2) {
-  if (!+bytes) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+function isDocEmpty(doc) {
+  var _a;
+  return doc.childCount <= 1 && !((_a = doc.firstChild) == null ? void 0 : _a.content.size);
 }
-const MilkdownAttachmentBlock = defineComponent({
-  props: {
-    src: { type: Object, required: true },
-    name: { type: Object, required: true },
-    size: { type: Object, required: true },
-    videoWidth: { type: Object, required: true },
-    selected: { type: Object, required: true },
-    readonly: { type: Object, required: true },
-    setAttr: { type: Function, required: true },
-    config: { type: Object, required: true }
+function createPlaceholderDecoration(state, placeholderText) {
+  const { selection } = state;
+  if (!selection.empty) return null;
+  const $pos = selection.$anchor;
+  const node = $pos.parent;
+  if (node.content.size > 0) return null;
+  const inTable = findParent((node2) => node2.type.name === "table")($pos);
+  if (inTable) return null;
+  const before = $pos.before();
+  return Decoration.node(before, before + node.nodeSize, {
+    class: "crepe-placeholder",
+    "data-placeholder": placeholderText
+  });
+}
+const placeholderConfig = $ctx(
+  {
+    mode: "doc"
   },
-  setup(props) {
-    const { src, name, size, videoWidth } = props;
-    const isUploading = shallowRef(false);
-    const fileInput = shallowRef(null);
-    const videoWrapperRef = ref(null);
-    const currentWidth = ref(0);
-    const isResizing = ref(false);
-    const isVideo = computed(() => {
-      return name.value && /\.(mp4|webm|ogg|mov|avi|mkv|flv|wmv|m4v|3gp|ts)$/i.test(name.value);
-    });
-    let resizeDir = "";
-    let startX = 0;
-    let startWidth = 0;
-    const triggerUpload = () => {
-      var _a;
-      (_a = fileInput.value) == null ? void 0 : _a.click();
-    };
-    const onFileChange = async (e) => {
-      var _a;
-      const target = e.target;
-      const file = (_a = target.files) == null ? void 0 : _a[0];
-      if (!file) return;
-      isUploading.value = true;
-      try {
-        const result = await props.config.onUpload(file);
-        props.setAttr("src", result.url);
-        props.setAttr("name", result.name);
-        props.setAttr("size", result.size);
-      } catch (err) {
-        console.error("Failed to upload file", err);
-      } finally {
-        isUploading.value = false;
-        target.value = "";
-      }
-    };
-    const openLink = () => {
-      if (src.value) {
-        window.open(src.value, "_blank");
-      }
-    };
-    let activeHandle = null;
-    const onResizePointerMove = (e) => {
-      e.preventDefault();
-      const deltaX = e.clientX - startX;
-      let dw = 0;
-      if (resizeDir.includes("right")) {
-        dw = deltaX;
-      } else if (resizeDir.includes("left")) {
-        dw = -deltaX;
-      }
-      let newWidth = startWidth + dw;
-      if (newWidth < 200) newWidth = 200;
-      const wrapper = videoWrapperRef.value;
-      if (wrapper) {
-        const parent = wrapper.closest(".milkdown-attachment-block-wrapper");
-        if (parent) {
-          const maxWidth = parent.getBoundingClientRect().width;
-          if (newWidth > maxWidth) newWidth = maxWidth;
-        }
-      }
-      currentWidth.value = newWidth;
-    };
-    const onResizePointerUp = (e) => {
-      if (activeHandle) {
-        activeHandle.releasePointerCapture(e.pointerId);
-        activeHandle.removeEventListener(
-          "pointermove",
-          onResizePointerMove
-        );
-        activeHandle.removeEventListener(
-          "pointerup",
-          onResizePointerUp
-        );
-        activeHandle = null;
-      }
-      isResizing.value = false;
-      if (currentWidth.value > 0) {
-        props.setAttr("videoWidth", Math.round(currentWidth.value));
-      }
-    };
-    const onResizePointerDown = (e, dir) => {
-      if (props.readonly.value) return;
-      e.preventDefault();
-      e.stopPropagation();
-      resizeDir = dir;
-      startX = e.clientX;
-      isResizing.value = true;
-      const handle = e.currentTarget;
-      activeHandle = handle;
-      handle.setPointerCapture(e.pointerId);
-      const wrapper = videoWrapperRef.value;
-      if (wrapper) {
-        startWidth = wrapper.getBoundingClientRect().width;
-        currentWidth.value = startWidth;
-      }
-      handle.addEventListener("pointermove", onResizePointerMove);
-      handle.addEventListener("pointerup", onResizePointerUp);
-    };
-    return () => {
-      var _a;
-      if (!((_a = src.value) == null ? void 0 : _a.length)) {
-        return /* @__PURE__ */ h(
-          "div",
-          {
-            class: [
-              "milkdown-attachment-placeholder",
-              props.selected.value ? "selected" : ""
-            ]
-          },
-          /* @__PURE__ */ h("div", { class: "milkdown-attachment-uploader", onClick: triggerUpload }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }), /* @__PURE__ */ h("span", { class: "milkdown-attachment-upload-text" }, isUploading.value ? "Uploading..." : props.config.uploadButton), /* @__PURE__ */ h(
-            "input",
-            {
-              type: "file",
-              ref: fileInput,
-              onChange: onFileChange,
-              style: "display: none;"
-            }
-          ))
-        );
-      }
-      if (isVideo.value) {
-        const savedWidth = videoWidth.value;
-        const widthStyle = isResizing.value && currentWidth.value > 0 ? `${currentWidth.value}px` : savedWidth && savedWidth > 0 ? `${savedWidth}px` : "100%";
-        return /* @__PURE__ */ h(
-          "div",
-          {
-            ref: videoWrapperRef,
-            class: [
-              "milkdown-attachment-video-viewer",
-              props.selected.value ? "selected" : ""
-            ],
-            style: {
-              width: widthStyle,
-              margin: "0 auto",
-              position: "relative"
-            }
-          },
-          /* @__PURE__ */ h(
-            "video",
-            {
-              src: src.value,
-              controls: true,
-              style: "width: 100%; display: block; border-radius: 8px;",
-              onMousedown: (e) => e.stopPropagation()
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "video-resize-handle top-left",
-              onPointerdown: (e) => onResizePointerDown(e, "top-left")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "video-resize-handle top-right",
-              onPointerdown: (e) => onResizePointerDown(e, "top-right")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "video-resize-handle bottom-left",
-              onPointerdown: (e) => onResizePointerDown(e, "bottom-left")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "video-resize-handle bottom-right",
-              onPointerdown: (e) => onResizePointerDown(e, "bottom-right")
-            }
-          )
-        );
+  "placeholderConfigCtx"
+);
+const placeholderPlugin = $prose((ctx) => {
+  return new Plugin({
+    key: new PluginKey("CREPE_PLACEHOLDER"),
+    props: {
+      decorations: (state) => {
+        var _a;
+        const crepe = useCrepe(ctx);
+        if (crepe.readonly) return DecorationSet.empty;
+        const config = ctx.get(placeholderConfig.key);
+        if (config.mode === "doc" && !isDocEmpty(state.doc))
+          return DecorationSet.empty;
+        if (isInCodeBlock(state.selection) || isInList(state.selection))
+          return DecorationSet.empty;
+        const placeholderText = (_a = config.text) != null ? _a : i18n(ctx, "placeholder.text");
+        const deco = createPlaceholderDecoration(state, placeholderText);
+        if (!deco) return DecorationSet.empty;
+        return DecorationSet.create(state.doc, [deco]);
       }
-      return /* @__PURE__ */ h(
-        "div",
-        {
-          class: [
-            "milkdown-attachment-viewer",
-            props.selected.value ? "selected" : ""
-          ]
-        },
-        /* @__PURE__ */ h("div", { class: "milkdown-attachment-icon-wrapper" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-raw-icon-bg" }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }))),
-        /* @__PURE__ */ h("div", { class: "milkdown-attachment-info" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-name" }, name.value), /* @__PURE__ */ h("div", { class: "milkdown-attachment-size" }, (size.value || 0) > 0 ? formatBytes(size.value) : "")),
-        /* @__PURE__ */ h(
-          "div",
-          {
-            class: "milkdown-attachment-action",
-            onClick: openLink,
-            title: props.config.downloadText
-          },
-          /* @__PURE__ */ h(Icon, { icon: downloadIcon })
-        )
-      );
-    };
-  }
+    }
+  });
 });
-
-const attachmentView = $view(
-  attachmentSchema.node,
-  (ctx) => {
-    return (initialNode, view, getPos) => {
-      const src = ref(initialNode.attrs.src);
-      const name = ref(initialNode.attrs.name);
-      const size = ref(initialNode.attrs.size);
-      const videoWidth = ref(initialNode.attrs.videoWidth);
-      const selected = ref(false);
-      const readonly = ref(!view.editable);
-      const setAttr = (attr, value) => {
-        if (!view.editable) return;
-        const pos = getPos();
-        if (pos == null) return;
-        view.dispatch(view.state.tr.setNodeAttribute(pos, attr, value));
-      };
-      const config = ctx.get(attachmentConfig.key);
-      const app = createApp(MilkdownAttachmentBlock, {
-        src,
-        name,
-        size,
-        videoWidth,
-        selected,
-        readonly,
-        setAttr,
-        config
-      });
-      const dom = document.createElement("div");
-      dom.className = "milkdown-attachment-block-wrapper";
-      const disposeSelectedWatcher = watchEffect(() => {
-        if (selected.value) {
-          dom.classList.add("selected");
-        } else {
-          dom.classList.remove("selected");
-        }
+const placeholder = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.Placeholder)).config((ctx) => {
+    if (config) {
+      ctx.update(placeholderConfig.key, (prev) => {
+        return {
+          ...prev,
+          ...config
+        };
       });
-      const bindAttrs = (node) => {
-        src.value = node.attrs.src;
-        name.value = node.attrs.name;
-        size.value = node.attrs.size;
-        videoWidth.value = node.attrs.videoWidth;
-        readonly.value = !view.editable;
-      };
-      bindAttrs(initialNode);
-      app.mount(dom);
-      return {
-        dom,
-        update: (updatedNode) => {
-          if (updatedNode.type !== initialNode.type) return false;
-          bindAttrs(updatedNode);
-          return true;
-        },
-        selectNode: () => {
-          selected.value = true;
-        },
-        deselectNode: () => {
-          selected.value = false;
-        },
-        destroy: () => {
-          disposeSelectedWatcher();
-          app.unmount();
-          dom.remove();
+    }
+  }).use(placeholderPlugin).use(placeholderConfig);
+};
+
+const table = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.Table)).config((ctx) => {
+    ctx.update(tableBlockConfig.key, (defaultConfig) => ({
+      ...defaultConfig,
+      renderButton: (renderType) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+        switch (renderType) {
+          case "add_row":
+            return (_a = config == null ? void 0 : config.addRowIcon) != null ? _a : plusIcon;
+          case "add_col":
+            return (_b = config == null ? void 0 : config.addColIcon) != null ? _b : plusIcon;
+          case "delete_row":
+            return (_c = config == null ? void 0 : config.deleteRowIcon) != null ? _c : removeIcon;
+          case "delete_col":
+            return (_d = config == null ? void 0 : config.deleteColIcon) != null ? _d : removeIcon;
+          case "align_col_left":
+            return (_e = config == null ? void 0 : config.alignLeftIcon) != null ? _e : alignLeftIcon;
+          case "align_col_center":
+            return (_f = config == null ? void 0 : config.alignCenterIcon) != null ? _f : alignCenterIcon;
+          case "align_col_right":
+            return (_g = config == null ? void 0 : config.alignRightIcon) != null ? _g : alignRightIcon;
+          case "col_drag_handle":
+            return (_h = config == null ? void 0 : config.colDragHandleIcon) != null ? _h : dragHandleIcon;
+          case "row_drag_handle":
+            return (_i = config == null ? void 0 : config.rowDragHandleIcon) != null ? _i : dragHandleIcon;
+          case "merge_cells":
+            return (_j = config == null ? void 0 : config.mergeCellsIcon) != null ? _j : mergeCellIcon;
+          case "split_cell":
+            return (_k = config == null ? void 0 : config.splitCellIcon) != null ? _k : splitCellIcon;
         }
-      };
+      }
+    }));
+  }).use(tableBlock);
+};
+
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+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;
+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, _show, ref(false));
+    __privateAdd$1(this, _mousePressed, false);
+    this.update = (view, prevState) => {
+      __privateGet$1(this, _tooltipProvider).update(view, prevState);
+      __privateGet$1(this, _selection).value = view.state.selection;
+    };
+    this.destroy = () => {
+      __privateGet$1(this, _tooltipProvider).destroy();
+      __privateGet$1(this, _app).unmount();
+      __privateGet$1(this, _content).remove();
+    };
+    this.hide = () => {
+      __privateGet$1(this, _tooltipProvider).hide();
+    };
+    const content = document.createElement("div");
+    content.className = "milkdown-toolbar";
+    __privateSet$1(this, _selection, shallowRef(view.state.selection));
+    const app = createApp(Toolbar, {
+      ctx,
+      hide: this.hide,
+      config,
+      selection: __privateGet$1(this, _selection),
+      show: __privateGet$1(this, _show)
+    });
+    app.mount(content);
+    __privateSet$1(this, _content, content);
+    __privateSet$1(this, _app, app);
+    view.dom.addEventListener("mousedown", () => {
+      __privateSet$1(this, _mousePressed, true);
+    });
+    view.dom.addEventListener("mouseup", () => {
+      __privateSet$1(this, _mousePressed, false);
+      setTimeout(() => {
+        this.update(view);
+      }, 0);
+    });
+    __privateSet$1(this, _tooltipProvider, new TooltipProvider({
+      content: __privateGet$1(this, _content),
+      debounce: 20,
+      offset: 10,
+      shouldShow: (view2) => {
+        if (__privateGet$1(this, _mousePressed)) return false;
+        const { doc, selection } = view2.state;
+        const { empty, from, to } = selection;
+        const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof TextSelection;
+        const isNotTextBlock = !(selection instanceof TextSelection) && !(selection instanceof AllSelection);
+        const activeElement = view2.dom.getRootNode().activeElement;
+        const isTooltipChildren = content.contains(activeElement);
+        const notHasFocus = !view2.hasFocus() && !isTooltipChildren;
+        const isReadonly = !view2.editable;
+        if (notHasFocus || isNotTextBlock || empty || isEmptyTextBlock || isReadonly)
+          return false;
+        return true;
+      }
+    }));
+    __privateGet$1(this, _tooltipProvider).onShow = () => {
+      __privateGet$1(this, _show).value = true;
     };
+    __privateGet$1(this, _tooltipProvider).onHide = () => {
+      __privateGet$1(this, _show).value = false;
+    };
+    this.update(view);
   }
-);
-
-const attachment = (editor, config) => {
-  editor.config(crepeFeatureConfig(CrepeFeature.Attachment)).config((ctx) => {
-    ctx.update(attachmentConfig.key, (value) => {
-      var _a, _b, _c, _d;
+}
+_tooltipProvider = new WeakMap();
+_content = new WeakMap();
+_app = new WeakMap();
+_selection = new WeakMap();
+_show = new WeakMap();
+_mousePressed = new WeakMap();
+const toolbar = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.Toolbar)).config((ctx) => {
+    ctx.set(toolbarTooltip.key, {
+      view: (view) => new ToolbarView(ctx, view, config)
+    });
+  }).config((ctx) => {
+    ctx.update(editorViewOptionsCtx, (prev) => {
+      const prevTransform = prev.transformPastedHTML;
       return {
-        uploadButton: (_a = config == null ? void 0 : config.uploadButton) != null ? _a : i18n(ctx, "attachmentBlock.uploadButton"),
-        uploadPlaceholderText: (_b = config == null ? void 0 : config.uploadPlaceholderText) != null ? _b : i18n(ctx, "attachmentBlock.uploadPlaceholderText"),
-        downloadText: (_c = config == null ? void 0 : config.downloadText) != null ? _c : i18n(ctx, "attachmentBlock.download"),
-        onUpload: (_d = config == null ? void 0 : config.onUpload) != null ? _d : value.onUpload
+        ...prev,
+        transformPastedHTML: (html, view) => {
+          if (prevTransform) html = prevTransform(html, view);
+          return stripFontFamilyFromExternalHTML(html);
+        }
       };
     });
-  }).use(attachmentConfig).use(attachmentSchema).use(attachmentView);
+  }).use(underline).use(highlightMark).use(colorPlugins).use(fontPlugins).use(toolbarTooltip);
 };
 
 function loadFeature(feature, editor, config) {