@jvs-milkdown/crepe 1.2.4 → 1.2.7

package/lib/cjs/index.js

@@ -3,18 +3,18 @@
 var lodashEs = require('lodash-es');
 var languageData = require('@codemirror/language-data');
 var themeOneDark = require('@codemirror/theme-one-dark');
-var block = require('@jvs-milkdown/kit/plugin/block');
 var ctx = require('@jvs-milkdown/kit/ctx');
+var utils = require('@jvs-milkdown/kit/utils');
+var vue = require('vue');
+var component = require('@jvs-milkdown/kit/component');
+var block = require('@jvs-milkdown/kit/plugin/block');
 var core = require('@jvs-milkdown/kit/core');
 var prose = require('@jvs-milkdown/kit/prose');
 var state = require('@jvs-milkdown/kit/prose/state');
-var vue = require('vue');
 var dom = require('@floating-ui/dom');
 var slash = require('@jvs-milkdown/kit/plugin/slash');
-var component = require('@jvs-milkdown/kit/component');
 var commonmark = require('@jvs-milkdown/kit/preset/commonmark');
 var gfm = require('@jvs-milkdown/kit/preset/gfm');
-var utils = require('@jvs-milkdown/kit/utils');
 var unistUtilVisit = require('unist-util-visit');
 var imageBlock$1 = require('@jvs-milkdown/kit/component/image-block');
 var commands = require('@jvs-milkdown/kit/prose/commands');
@@ -629,10 +629,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 = `
@@ -641,6 +638,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: themeOneDark.oneDark,
@@ -663,6 +666,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",
@@ -816,6 +820,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",
@@ -983,98 +988,489 @@ 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 = utils.$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 = utils.$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 = vue.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 = vue.shallowRef(false);
+    const fileInput = vue.shallowRef(null);
+    const videoWrapperRef = vue.ref(null);
+    const currentWidth = vue.ref(0);
+    const isResizing = vue.ref(false);
+    const isVideo = vue.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 = utils.$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) => {
-      unistUtilVisit.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:");
+      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(component.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(component.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(component.Icon, { icon: downloadIcon })
+        )
+      );
+    };
+  }
+});
+
+const attachmentView = utils.$view(
+  attachmentSchema.node,
+  (ctx) => {
+    return (initialNode, view, getPos) => {
+      const src = vue.ref(initialNode.attrs.src);
+      const name = vue.ref(initialNode.attrs.name);
+      const size = vue.ref(initialNode.attrs.size);
+      const videoWidth = vue.ref(initialNode.attrs.videoWidth);
+      const selected = vue.ref(false);
+      const readonly = vue.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 = vue.createApp(MilkdownAttachmentBlock, {
+        src,
+        name,
+        size,
+        videoWidth,
+        selected,
+        readonly,
+        setAttr,
+        config
+      });
+      const dom = document.createElement("div");
+      dom.className = "milkdown-attachment-block-wrapper";
+      const disposeSelectedWatcher = vue.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 = utils.$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) => {
+      unistUtilVisit.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;
@@ -1282,86 +1678,15 @@ const menuAPI = utils.$ctx(
     },
     onHoverDelayHide: () => {
     },
-    cancelHide: () => {
-    },
-    isProgrammatic: () => false,
-    getPos: () => null,
-    isShow: () => false,
-    getMode: () => null
-  },
-  "menuAPICtx"
-);
-
-const ATTACHMENT_DATA_TYPE = "attachment-block";
-const attachmentSchema = utils.$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();
-      }
-    }
-  };
-});
+    cancelHide: () => {
+    },
+    isProgrammatic: () => false,
+    getPos: () => null,
+    isShow: () => false,
+    getMode: () => null
+  },
+  "menuAPICtx"
+);
 
 const mathInlineId = "math_inline";
 const mathInlineSchema = utils.$nodeSchema(mathInlineId, () => ({
@@ -2500,7 +2825,7 @@ const Menu = vue.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) {
@@ -3246,7 +3571,9 @@ const Menu = vue.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);
                 }
               },
@@ -5000,6 +5327,10 @@ const activeIconMap = {
   // [highLineCodeIcon]: highLineCodeIconActive,
 };
 keepAlive(vue.h, vue.Fragment);
+const formatPainterStates = /* @__PURE__ */ new WeakMap();
+const formatPainterHandlers = /* @__PURE__ */ new WeakMap();
+const formatPainterIgnoreNext = /* @__PURE__ */ new WeakMap();
+const cursorStyleEls = /* @__PURE__ */ new WeakMap();
 const Toolbar = vue.defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -5030,6 +5361,184 @@ const Toolbar = vue.defineComponent({
     const tableMenuPos = vue.ref({ top: 0, left: 0 });
     const tableHoverIndices = vue.ref({ r: 0, c: 0 });
     let hideTableTimer = null;
+    let formatPainterState = formatPainterStates.get(ctx);
+    if (!formatPainterState) {
+      formatPainterState = vue.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(core.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(core.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);
+    };
+    vue.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);
+          }
+        }
+      }
+    );
+    vue.onUnmounted(() => {
+    });
     const toolbarContainerRef = vue.ref(null);
     const overflowVisibleCount = vue.ref(Infinity);
     const totalSectionCount = vue.ref(Infinity);
@@ -5736,7 +6245,7 @@ const Toolbar = vue.defineComponent({
               position: "relative",
               display: isSectionOverflowed(0) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
@@ -5755,6 +6264,49 @@ const Toolbar = vue.defineComponent({
             /* @__PURE__ */ vue.h(component.Icon, { icon: chevronDownIcon })
           )
         ),
+        /* @__PURE__ */ vue.h(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: isSectionOverflowed(0) ? "none" : "flex",
+              flexShrink: 0
+            }
+          },
+          /* @__PURE__ */ vue.h(
+            "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__ */ vue.h(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  "--toolbar-icon-color": formatPainterState.value ? "var(--crepe-color-primary)" : "#363B4C"
+                },
+                innerHTML: formatPainterIcon
+              }
+            )
+          )
+        ),
         /* @__PURE__ */ vue.h(
           "div",
           {
@@ -5777,7 +6329,7 @@ const Toolbar = vue.defineComponent({
               position: "relative",
               display: isSectionOverflowed(2) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "50px",
               flexShrink: 0
             }
@@ -5819,7 +6371,7 @@ const Toolbar = vue.defineComponent({
               position: "relative",
               display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "40px",
               flexShrink: 0
             }
@@ -5860,7 +6412,7 @@ const Toolbar = vue.defineComponent({
               position: "relative",
               display: isSectionOverflowed(5) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
@@ -6897,7 +7449,7 @@ const Toolbar = vue.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;
                       },
@@ -6979,7 +7531,7 @@ const ToggleSwitch = vue.defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    return () => /* @__PURE__ */ vue.h(
+    return () => /* @__PURE__ */ h(
       "div",
       {
         onClick: (e) => {
@@ -6996,7 +7548,7 @@ const ToggleSwitch = vue.defineComponent({
           transition: "background-color 0.2s"
         }
       },
-      /* @__PURE__ */ vue.h(
+      /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -7082,7 +7634,7 @@ const MenuBar = vue.defineComponent({
     const hasSubmenu = (key) => key === "view";
     return () => {
       const state = viewState.value;
-      return /* @__PURE__ */ vue.h(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-menu-bar",
@@ -7094,7 +7646,7 @@ const MenuBar = vue.defineComponent({
             position: "relative"
           }
         },
-        /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h(
           "div",
           {
             ref: buttonRef,
@@ -7117,7 +7669,7 @@ const MenuBar = vue.defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
             }
           },
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -7128,9 +7680,9 @@ const MenuBar = vue.defineComponent({
                 justifyContent: "center"
               }
             },
-            /* @__PURE__ */ vue.h(component.Icon, { icon: menuIcon })
+            /* @__PURE__ */ h(component.Icon, { icon: menuIcon })
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -7143,7 +7695,7 @@ const MenuBar = vue.defineComponent({
             "\u83DC\u5355"
           )
         ),
-        showMenu.value ? /* @__PURE__ */ vue.h(
+        showMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             ref: mainRef,
@@ -7163,16 +7715,20 @@ const MenuBar = vue.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;
             const label = i18n(props.ctx, `menuBar.${menuKey}`) || menuKey;
-            return /* @__PURE__ */ vue.h(
+            return /* @__PURE__ */ h(
               "div",
               {
                 key: menuKey,
-                onMouseenter: () => onMouseEnterItem(menuKey),
+                onMouseenter: () => {
+                  onMouseEnterItem(menuKey);
+                },
                 onMouseleave: () => {
                   if (hasSubmenu(menuKey)) {
                     activeSubmenu.value = null;
@@ -7188,7 +7744,7 @@ const MenuBar = vue.defineComponent({
                   backgroundColor: isHovered ? "var(--crepe-color-hover, #f5f5f5)" : "transparent"
                 }
               },
-              /* @__PURE__ */ vue.h(
+              /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7198,7 +7754,7 @@ const MenuBar = vue.defineComponent({
                 },
                 label
               ),
-              hasSubmenu(menuKey) ? /* @__PURE__ */ vue.h(
+              hasSubmenu(menuKey) ? /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7207,7 +7763,7 @@ const MenuBar = vue.defineComponent({
                     display: "flex"
                   }
                 },
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "svg",
                   {
                     width: "12",
@@ -7219,10 +7775,10 @@ const MenuBar = vue.defineComponent({
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round"
                   },
-                  /* @__PURE__ */ vue.h("polyline", { points: "9 18 15 12 9 6" })
+                  /* @__PURE__ */ h("polyline", { points: "9 18 15 12 9 6" })
                 )
               ) : null,
-              menuKey === "view" && isHovered ? /* @__PURE__ */ vue.h(
+              menuKey === "view" && isHovered ? /* @__PURE__ */ h(
                 "div",
                 {
                   style: {
@@ -7240,7 +7796,7 @@ const MenuBar = vue.defineComponent({
                     cursor: "default"
                   }
                 },
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7250,7 +7806,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -7260,7 +7816,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.title") || "\u6807\u9898"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.showTitle,
@@ -7268,7 +7824,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7278,7 +7834,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -7288,7 +7844,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.outline") || "\u5927\u7EB2"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.outlineVisible,
@@ -7296,7 +7852,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7306,7 +7862,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -7316,7 +7872,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.cover") || "\u5C01\u9762"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.showCover,
@@ -7332,7 +7888,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7342,7 +7898,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7352,7 +7908,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -7363,7 +7919,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.docBackground") || "\u6587\u6863\u80CC\u666F"
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7373,7 +7929,7 @@ const MenuBar = vue.defineComponent({
                       gap: "6px"
                     }
                   },
-                  bgColors.map((bg) => /* @__PURE__ */ vue.h(
+                  bgColors.map((bg) => /* @__PURE__ */ h(
                     "div",
                     {
                       key: bg.value || "default",
@@ -7395,7 +7951,7 @@ const MenuBar = vue.defineComponent({
                         justifyContent: "center"
                       }
                     },
-                    bg.value === null ? /* @__PURE__ */ vue.h(
+                    bg.value === null ? /* @__PURE__ */ h(
                       "div",
                       {
                         style: {
@@ -7408,7 +7964,7 @@ const MenuBar = vue.defineComponent({
                           borderRadius: "3px"
                         }
                       },
-                      /* @__PURE__ */ vue.h(
+                      /* @__PURE__ */ h(
                         "div",
                         {
                           style: {
@@ -7426,7 +7982,7 @@ const MenuBar = vue.defineComponent({
                     ) : null
                   ))
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7436,7 +7992,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7446,7 +8002,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -7457,7 +8013,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.editorWidth") || "\u5185\u5BB9\u5BBD\u5EA6"
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -7479,7 +8035,7 @@ const MenuBar = vue.defineComponent({
                       key: "full",
                       labelKey: "view.widthFull"
                     }
-                  ].map(({ key, labelKey }) => /* @__PURE__ */ vue.h(
+                  ].map(({ key, labelKey }) => /* @__PURE__ */ h(
                     "button",
                     {
                       key,
@@ -7706,7 +8262,7 @@ const FixedToolbarComponent = vue.defineComponent({
   },
   setup(props) {
     const showShortcuts = vue.ref(false);
-    return () => /* @__PURE__ */ vue.h(
+    return () => /* @__PURE__ */ h(
       "div",
       {
         style: {
@@ -7717,8 +8273,8 @@ const FixedToolbarComponent = vue.defineComponent({
           gap: "0px"
         }
       },
-      /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
-      /* @__PURE__ */ vue.h(
+      /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
+      /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -7729,7 +8285,7 @@ const FixedToolbarComponent = vue.defineComponent({
           }
         }
       ),
-      /* @__PURE__ */ vue.h(
+      /* @__PURE__ */ h(
         Toolbar,
         {
           ctx: props.ctx,
@@ -7737,189 +8293,61 @@ const FixedToolbarComponent = vue.defineComponent({
           show: props.show,
           selection: props.selection,
           config: props.config,
-          isFixed: true
-        }
-      ),
-      /* @__PURE__ */ vue.h(
-        "div",
-        {
-          style: {
-            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__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: "toolbar-shortcut-btn",
-          title: i18n(props.ctx, "shortcuts.title"),
-          onClick: () => {
-            showShortcuts.value = true;
-          }
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: keyboardIcon })
-      ),
-      showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
-    );
-  }
-});
-
-function convertHeadingToParagraphIfNeeded(ctx) {
-  const commands = ctx.get(core.commandsCtx);
-  const view = ctx.get(core.editorViewCtx);
-  const heading = commonmark.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(commonmark.setBlockTypeCommand.key, {
-      nodeType: commonmark.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(core.commandsCtx);
-        commands.call(commonmark.addBlockTypeCommand.key, {
-          nodeType: imageBlock$1.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(core.commandsCtx);
-        commands.call(commonmark.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(core.editorViewCtx);
-      const result = prose.findNodeInSelection(view.state, commonmark.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(core.commandsCtx);
-      const view = ctx2.get(core.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 = commonmark.codeBlockSchema.type(ctx2).createAndFill({}, text ? state.schema.text(text) : void 0);
-          if (range && codeBlock) {
-            tr.replaceWith(range.start, range.end, codeBlock);
-            dispatch(tr.scrollIntoView());
+          isFixed: true
+        }
+      ),
+      /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            width: "1px",
+            minWidth: "1px",
+            height: "20px",
+            flexShrink: 0,
+            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
           }
         }
-        return;
-      }
-      commands.call(commonmark.setBlockTypeCommand.key, {
-        nodeType: commonmark.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(core.commandsCtx);
-        const view = ctx2.get(core.editorViewCtx);
-        const { from } = view.state.selection;
-        commands.call(commonmark.addBlockTypeCommand.key, {
-          nodeType: gfm.createTable(ctx2, 3, 3)
-        });
-        commands.call(commonmark.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(component.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(core.editorViewCtx);
-        const result = prose.findNodeInSelection(
-          view.state,
-          commonmark.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(core.commandsCtx);
-        commands.call(toggleLatexCommand.key);
-      }
+});
+
+function convertHeadingToParagraphIfNeeded(ctx) {
+  const commands = ctx.get(core.commandsCtx);
+  const view = ctx.get(core.editorViewCtx);
+  const heading = commonmark.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(commonmark.setBlockTypeCommand.key, {
+      nodeType: commonmark.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(core.editorViewCtx);
-      const result = prose.findNodeInSelection(
-        view.state,
-        commonmark.blockquoteSchema.type(ctx2)
-      );
-      return result.hasNode;
-    },
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const commands$1 = ctx2.get(core.commandsCtx);
-      const isActive = prose.findNodeInSelection(
-        view.state,
-        commonmark.blockquoteSchema.type(ctx2)
-      ).hasNode;
-      if (isActive) {
-        commands.lift(view.state, view.dispatch);
-      } else {
-        commands$1.call(commonmark.wrapInBlockTypeCommand.key, {
-          nodeType: commonmark.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,
@@ -7927,9 +8355,7 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       const commands = ctx2.get(core.commandsCtx);
       commands.call(commonmark.addBlockTypeCommand.key, { nodeType: commonmark.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) => {
@@ -8154,6 +8580,174 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       if (result) return;
     }
   });
+  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(core.editorViewCtx);
+      const result = prose.findNodeInSelection(
+        view.state,
+        commonmark.blockquoteSchema.type(ctx2)
+      );
+      return result.hasNode;
+    },
+    onRun: (ctx2) => {
+      const view = ctx2.get(core.editorViewCtx);
+      const commands$1 = ctx2.get(core.commandsCtx);
+      const isActive = prose.findNodeInSelection(
+        view.state,
+        commonmark.blockquoteSchema.type(ctx2)
+      ).hasNode;
+      if (isActive) {
+        commands.lift(view.state, view.dispatch);
+      } else {
+        commands$1.call(commonmark.wrapInBlockTypeCommand.key, {
+          nodeType: commonmark.blockquoteSchema.type(ctx2)
+        });
+      }
+    }
+  }).addItem("highlight", {
+    label: ctx ? i18n(ctx, "menu.item.highlight") : "Highlight",
+    icon: highLineCodeIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(
+        commonmark.isMarkSelectedCommand.key,
+        highlightMarkSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(toggleHighlightMarkCommand.key);
+    }
+  }).addItem("code", {
+    label: ctx ? i18n(ctx, "menu.item.lineCode") : "Inline Code",
+    icon: linCodeIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(
+        commonmark.isMarkSelectedCommand.key,
+        commonmark.inlineCodeSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleInlineCodeCommand.key);
+    }
+  }).addItem("link", {
+    label: ctx ? i18n(ctx, "menu.item.link") : "Link",
+    icon: linkIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(commonmark.isMarkSelectedCommand.key, commonmark.linkSchema.type(ctx2));
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(linkTooltip$1.toggleLinkCommand.key);
+    }
+  });
+  if (isImageBlockEnabled) {
+    blockGroup.addItem("image", {
+      label: ctx ? i18n(ctx, "menu.item.image") : "Image",
+      icon: imageIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        commands.call(commonmark.addBlockTypeCommand.key, {
+          nodeType: imageBlock$1.imageBlockSchema.type(ctx2)
+        });
+      }
+    });
+  }
+  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(core.commandsCtx);
+        commands.call(commonmark.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(core.editorViewCtx);
+      const result = prose.findNodeInSelection(view.state, commonmark.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(core.commandsCtx);
+      const view = ctx2.get(core.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 = commonmark.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(commonmark.setBlockTypeCommand.key, {
+        nodeType: commonmark.codeBlockSchema.type(ctx2)
+      });
+    }
+  });
+  if (isTableEnabled) {
+    blockGroup.addItem("table", {
+      label: ctx ? i18n(ctx, "menu.item.table") : "Table",
+      icon: tableIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        const view = ctx2.get(core.editorViewCtx);
+        const { from } = view.state.selection;
+        commands.call(commonmark.addBlockTypeCommand.key, {
+          nodeType: gfm.createTable(ctx2, 3, 3)
+        });
+        commands.call(commonmark.selectTextNearPosCommand.key, { pos: from });
+      }
+    });
+  }
+  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(core.editorViewCtx);
+        const result = prose.findNodeInSelection(
+          view.state,
+          commonmark.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(core.commandsCtx);
+        commands.call(toggleLatexCommand.key);
+      }
+    });
+  }
+  return builder.build();
 }
 
 const DocumentHeader = vue.defineComponent({
@@ -8174,12 +8768,26 @@ const DocumentHeader = vue.defineComponent({
         titleTextareaRef.value.style.height = titleTextareaRef.value.scrollHeight + "px";
       }
     };
+    let resizeObserver = null;
+    vue.onMounted(() => {
+      setTimeout(adjustTitleHeight, 0);
+      if (titleTextareaRef.value) {
+        resizeObserver = new ResizeObserver(() => {
+          adjustTitleHeight();
+        });
+        resizeObserver.observe(titleTextareaRef.value);
+      }
+    });
+    vue.onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
     vue.watch(
       () => title.value,
       () => {
         setTimeout(adjustTitleHeight, 0);
-      },
-      { immediate: true }
+      }
     );
     vue.watch(
       () => viewState.value.showCover,
@@ -8218,13 +8826,13 @@ const DocumentHeader = vue.defineComponent({
       var _a, _b;
       const state = viewState.value;
       if (!state.showTitle && !state.showCover) return null;
-      return /* @__PURE__ */ vue.h(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-document-header",
           style: { width: "100%", display: "flex", flexDirection: "column" }
         },
-        state.showCover ? /* @__PURE__ */ vue.h(
+        state.showCover ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-document-cover",
@@ -8242,7 +8850,7 @@ const DocumentHeader = vue.defineComponent({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "img",
             {
               src: state.coverUrl,
@@ -8255,7 +8863,7 @@ const DocumentHeader = vue.defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -8272,7 +8880,7 @@ const DocumentHeader = vue.defineComponent({
                 background: "linear-gradient(transparent, rgba(0,0,0,0.7))"
               }
             },
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -8284,7 +8892,7 @@ const DocumentHeader = vue.defineComponent({
               },
               (lastUploadedUrl.value ? [lastUploadedUrl.value] : []).concat(
                 ((_b = (_a = props.config) == null ? void 0 : _a.defaultCoverImages) == null ? void 0 : _b.length) ? props.config.defaultCoverImages : builtInCoverImages
-              ).map((src, i) => /* @__PURE__ */ vue.h(
+              ).map((src, i) => /* @__PURE__ */ h(
                 "img",
                 {
                   key: i,
@@ -8314,7 +8922,7 @@ const DocumentHeader = vue.defineComponent({
                 }
               ))
             ),
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "div",
               {
                 onClick: () => {
@@ -8342,7 +8950,7 @@ const DocumentHeader = vue.defineComponent({
                   e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.2)";
                 }
               },
-              /* @__PURE__ */ vue.h(
+              /* @__PURE__ */ h(
                 "svg",
                 {
                   width: "14",
@@ -8354,14 +8962,14 @@ const DocumentHeader = vue.defineComponent({
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round"
                 },
-                /* @__PURE__ */ vue.h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                /* @__PURE__ */ vue.h("polyline", { points: "17 8 12 3 7 8" }),
-                /* @__PURE__ */ vue.h("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                /* @__PURE__ */ h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ h("polyline", { points: "17 8 12 3 7 8" }),
+                /* @__PURE__ */ h("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
               ),
               "\u4E0A\u4F20"
             )
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "input",
             {
               type: "file",
@@ -8372,7 +8980,7 @@ const DocumentHeader = vue.defineComponent({
             }
           )
         ) : null,
-        state.showTitle ? /* @__PURE__ */ vue.h(
+        state.showTitle ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-document-title-wrapper",
@@ -8383,14 +8991,18 @@ const DocumentHeader = vue.defineComponent({
               padding: `40px ${editorWidthMap[state.editorWidth] === "none" ? "80px" : "0"} 0`
             }
           },
-          /* @__PURE__ */ vue.h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
+          /* @__PURE__ */ h(
             "textarea",
             {
               ref: titleTextareaRef,
               class: "milkdown-document-title",
               placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
-              "v-model": title.value,
+              value: title.value,
+              onInput: (e) => {
+                title.value = e.target.value;
+                adjustTitleHeight();
+              },
               rows: 1,
               style: {
                 width: "100%",
@@ -8598,7 +9210,7 @@ const OutlinePanel = vue.defineComponent({
       const state = viewState.value;
       if (!state.outlineVisible) return null;
       const isLeft = state.outlinePosition === "left";
-      return /* @__PURE__ */ vue.h(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-outline-panel",
@@ -8619,7 +9231,7 @@ const OutlinePanel = vue.defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -8633,8 +9245,8 @@ const OutlinePanel = vue.defineComponent({
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ vue.h("span", null, i18n(props.ctx, "view.outline")),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h("span", null, i18n(props.ctx, "view.outline")),
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -8658,7 +9270,7 @@ const OutlinePanel = vue.defineComponent({
               },
               title: "\u5173\u95ED\u5927\u7EB2"
             },
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "svg",
               {
                 width: "16",
@@ -8670,12 +9282,12 @@ const OutlinePanel = vue.defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               },
-              /* @__PURE__ */ vue.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ vue.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              /* @__PURE__ */ h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             )
           )
         ),
-        /* @__PURE__ */ vue.h("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -8688,7 +9300,7 @@ const OutlinePanel = vue.defineComponent({
         ) : null, visibleItems.value.map(({ item, hasChildren: hasKids }) => {
           const isActive = activeId.value === item.id;
           const collapsed = collapsedIds.value.has(item.id);
-          return /* @__PURE__ */ vue.h(
+          return /* @__PURE__ */ h(
             "div",
             {
               key: item.id,
@@ -8721,7 +9333,7 @@ const OutlinePanel = vue.defineComponent({
                 }
               }
             },
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "span",
               {
                 onClick: (e) => {
@@ -8751,9 +9363,10 @@ const OutlinePanel = vue.defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              "\u25BC"
+              "\uFFFD?",
+              " "
             ),
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "span",
               {
                 title: item.text,
@@ -8766,7 +9379,7 @@ const OutlinePanel = vue.defineComponent({
             )
           );
         })),
-        /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h(
           "div",
           {
             onPointerdown: onPointerDown,
@@ -9477,551 +10090,232 @@ const linkTooltip = (editor, config) => {
   editor.config(crepeFeatureConfig(CrepeFeature.LinkTooltip)).config(linkTooltip$1.configureLinkTooltip).config((ctx) => {
     ctx.update(linkTooltip$1.linkTooltipConfig.key, (prev) => {
       var _a, _b, _c, _d, _e, _f;
-      return {
-        ...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(linkTooltip$1.linkTooltipPlugin);
-};
-
-function configureListItem(ctx, config) {
-  ctx.set(listItemBlock.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(listItemBlock.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 = prose.findParent((node2) => node2.type.name === "table")($pos);
-  if (inTable) return null;
-  const before = $pos.before();
-  return view$1.Decoration.node(before, before + node.nodeSize, {
-    class: "crepe-placeholder",
-    "data-placeholder": placeholderText
-  });
-}
-const placeholderConfig = utils.$ctx(
-  {
-    mode: "doc"
-  },
-  "placeholderConfigCtx"
-);
-const placeholderPlugin = utils.$prose((ctx) => {
-  return new state.Plugin({
-    key: new state.PluginKey("CREPE_PLACEHOLDER"),
-    props: {
-      decorations: (state) => {
-        var _a;
-        const crepe = useCrepe(ctx);
-        if (crepe.readonly) return view$1.DecorationSet.empty;
-        const config = ctx.get(placeholderConfig.key);
-        if (config.mode === "doc" && !isDocEmpty(state.doc)) return view$1.DecorationSet.empty;
-        if (isInCodeBlock(state.selection) || isInList(state.selection))
-          return view$1.DecorationSet.empty;
-        const placeholderText = (_a = config.text) != null ? _a : i18n(ctx, "placeholder.text");
-        const deco = createPlaceholderDecoration(state, placeholderText);
-        if (!deco) return view$1.DecorationSet.empty;
-        return view$1.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(tableBlock.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.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 = tooltip.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, vue.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, vue.shallowRef(view.state.selection));
-    const app = vue.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 tooltip.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 state.TextSelection;
-        const isNotTextBlock = !(selection instanceof state.TextSelection) && !(selection instanceof state.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(core.editorViewOptionsCtx, (prev) => {
-      const prevTransform = prev.transformPastedHTML;
-      return {
-        ...prev,
-        transformPastedHTML: (html, view) => {
-          if (prevTransform) html = prevTransform(html, view);
-          return stripFontFamilyFromExternalHTML(html);
-        }
+      return {
+        ...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(underline).use(highlightMark).use(colorPlugins).use(fontPlugins).use(toolbarTooltip);
+  }).use(linkTooltip$1.linkTooltipPlugin);
 };
 
-const attachmentConfig = utils.$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(listItemBlock.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(listItemBlock.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 = vue.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 = prose.findParent((node2) => node2.type.name === "table")($pos);
+  if (inTable) return null;
+  const before = $pos.before();
+  return view$1.Decoration.node(before, before + node.nodeSize, {
+    class: "crepe-placeholder",
+    "data-placeholder": placeholderText
+  });
+}
+const placeholderConfig = utils.$ctx(
+  {
+    mode: "doc"
   },
-  setup(props) {
-    const { src, name, size, videoWidth } = props;
-    const isUploading = vue.shallowRef(false);
-    const fileInput = vue.shallowRef(null);
-    const videoWrapperRef = vue.ref(null);
-    const currentWidth = vue.ref(0);
-    const isResizing = vue.ref(false);
-    const isVideo = vue.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__ */ vue.h(
-          "div",
-          {
-            class: [
-              "milkdown-attachment-placeholder",
-              props.selected.value ? "selected" : ""
-            ]
-          },
-          /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-uploader", onClick: triggerUpload }, /* @__PURE__ */ vue.h(component.Icon, { icon: fileLinkIcon }), /* @__PURE__ */ vue.h("span", { class: "milkdown-attachment-upload-text" }, isUploading.value ? "Uploading..." : props.config.uploadButton), /* @__PURE__ */ vue.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__ */ vue.h(
-          "div",
-          {
-            ref: videoWrapperRef,
-            class: [
-              "milkdown-attachment-video-viewer",
-              props.selected.value ? "selected" : ""
-            ],
-            style: {
-              width: widthStyle,
-              margin: "0 auto",
-              position: "relative"
-            }
-          },
-          /* @__PURE__ */ vue.h(
-            "video",
-            {
-              src: src.value,
-              controls: true,
-              style: "width: 100%; display: block; border-radius: 8px;",
-              onMousedown: (e) => e.stopPropagation()
-            }
-          ),
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: "video-resize-handle top-left",
-              onPointerdown: (e) => onResizePointerDown(e, "top-left")
-            }
-          ),
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: "video-resize-handle top-right",
-              onPointerdown: (e) => onResizePointerDown(e, "top-right")
-            }
-          ),
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: "video-resize-handle bottom-left",
-              onPointerdown: (e) => onResizePointerDown(e, "bottom-left")
-            }
-          ),
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: "video-resize-handle bottom-right",
-              onPointerdown: (e) => onResizePointerDown(e, "bottom-right")
-            }
-          )
-        );
+  "placeholderConfigCtx"
+);
+const placeholderPlugin = utils.$prose((ctx) => {
+  return new state.Plugin({
+    key: new state.PluginKey("CREPE_PLACEHOLDER"),
+    props: {
+      decorations: (state) => {
+        var _a;
+        const crepe = useCrepe(ctx);
+        if (crepe.readonly) return view$1.DecorationSet.empty;
+        const config = ctx.get(placeholderConfig.key);
+        if (config.mode === "doc" && !isDocEmpty(state.doc))
+          return view$1.DecorationSet.empty;
+        if (isInCodeBlock(state.selection) || isInList(state.selection))
+          return view$1.DecorationSet.empty;
+        const placeholderText = (_a = config.text) != null ? _a : i18n(ctx, "placeholder.text");
+        const deco = createPlaceholderDecoration(state, placeholderText);
+        if (!deco) return view$1.DecorationSet.empty;
+        return view$1.DecorationSet.create(state.doc, [deco]);
       }
-      return /* @__PURE__ */ vue.h(
-        "div",
-        {
-          class: [
-            "milkdown-attachment-viewer",
-            props.selected.value ? "selected" : ""
-          ]
-        },
-        /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-icon-wrapper" }, /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-raw-icon-bg" }, /* @__PURE__ */ vue.h(component.Icon, { icon: fileLinkIcon }))),
-        /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-info" }, /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-name" }, name.value), /* @__PURE__ */ vue.h("div", { class: "milkdown-attachment-size" }, (size.value || 0) > 0 ? formatBytes(size.value) : "")),
-        /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: "milkdown-attachment-action",
-            onClick: openLink,
-            title: props.config.downloadText
-          },
-          /* @__PURE__ */ vue.h(component.Icon, { icon: downloadIcon })
-        )
-      );
-    };
-  }
+    }
+  });
 });
-
-const attachmentView = utils.$view(
-  attachmentSchema.node,
-  (ctx) => {
-    return (initialNode, view, getPos) => {
-      const src = vue.ref(initialNode.attrs.src);
-      const name = vue.ref(initialNode.attrs.name);
-      const size = vue.ref(initialNode.attrs.size);
-      const videoWidth = vue.ref(initialNode.attrs.videoWidth);
-      const selected = vue.ref(false);
-      const readonly = vue.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 = vue.createApp(MilkdownAttachmentBlock, {
-        src,
-        name,
-        size,
-        videoWidth,
-        selected,
-        readonly,
-        setAttr,
-        config
-      });
-      const dom = document.createElement("div");
-      dom.className = "milkdown-attachment-block-wrapper";
-      const disposeSelectedWatcher = vue.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(tableBlock.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.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 = tooltip.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, vue.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, vue.shallowRef(view.state.selection));
+    const app = vue.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 tooltip.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 state.TextSelection;
+        const isNotTextBlock = !(selection instanceof state.TextSelection) && !(selection instanceof state.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(core.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) {