@qxs-bns/components-wc 0.0.26 → 0.0.27

package/lib/editor/blocksuite-editor.cjs

@@ -1,5 +1,37 @@
-"use strict";var e=require("@tiptap/core"),t=require("@tiptap/extension-blockquote"),i=require("@tiptap/extension-bold"),o=require("@tiptap/extension-bullet-list"),r=require("@tiptap/extension-code"),l=require("@tiptap/extension-document"),s=require("@tiptap/extension-heading"),n=require("@tiptap/extension-history"),a=require("@tiptap/extension-horizontal-rule"),d=require("@tiptap/extension-image"),c=require("@tiptap/extension-italic"),h=require("@tiptap/extension-link"),b=require("@tiptap/extension-list-item"),p=require("@tiptap/extension-ordered-list"),u=require("@tiptap/extension-paragraph"),g=require("@tiptap/extension-placeholder"),x=require("@tiptap/extension-strike"),m=require("@tiptap/extension-table"),v=require("@tiptap/extension-table-cell"),y=require("@tiptap/extension-table-header"),f=require("@tiptap/extension-table-row"),_=require("@tiptap/extension-text"),w=require("@tiptap/extension-text-align"),k=require("@tiptap/extension-underline"),C=require("lit"),M=require("lit/decorators.js"),T=require("../base/define.cjs"),$=Object.defineProperty,B=Object.getOwnPropertyDescriptor,q=(e,t,i,o)=>{for(var r,l=o>1?void 0:o?B(t,i):t,s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o?r(t,i,l):r(l))||l);return o&&l&&$(t,i,l),l};exports.QxsBlocksuiteEditor=class extends C.LitElement{constructor(){super(...arguments),this.content="",this["model-value"]="",this.placeholder="输入 / 唤出快捷命令",this["use-model"]="false",this.readonly="false",this.preview="false",this["custom-styles"]="",this._injectedStyleEl=null,this["upload-image"]=async e=>new Promise((t,i)=>{const o=new FileReader;o.onload=e=>t(e.target?.result),o.onerror=i,o.readAsDataURL(e)}),this._editor=null,this._pendingContent=null,this._tableRows=3,this._tableCols=3,this._hoverRow=0,this._hoverCol=0,this._tableDropdownOpen=!1,this._tableCellToolbar={x:0,y:0,visible:!1,cellRow:0,cellCol:0},this._imageToolbar={x:0,y:0,visible:!1},this._imageMoreMenuVisible=!1,this._hasSlashCommand=!1,this._isUpdating=!1,this._tableEdgeDetectionSetup=!1}_injectCustomStyles(){const e=this.shadowRoot;if(!e)return;if(this._injectedStyleEl&&(this._injectedStyleEl.remove(),this._injectedStyleEl=null),!this["custom-styles"])return;const t=document.createElement("style");t.textContent=this["custom-styles"],e.appendChild(t),this._injectedStyleEl=t}get _useModelValue(){return!0===this["use-model"]||"true"===this["use-model"]||""===this["use-model"]||this.hasAttribute("use-model")}get _readonlyValue(){return!1!==this.readonly&&"false"!==this.readonly}get _previewValue(){return!1!==this.preview&&"false"!==this.preview}_initEditor(){if(this._editor)return;const C=this.shadowRoot?.querySelector(".editor-content");if(!C)return void requestAnimationFrame(()=>this._initEditor());for(;C.firstChild;)C.removeChild(C.firstChild);const M=this._useModelValue,T=this.getAttribute("model-value")??this["model-value"],$=this.content,B=M?(this._pendingContent??T)||"<p></p>":(this._pendingContent??$)||"<p></p>",q=[l,u,_,i,c,k,x,r,s.configure({levels:[1,2,3]}),o,p,b,t,a,n,d.configure({inline:!1,allowBase64:!0}),h.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),w.configure({types:["heading","paragraph"]}),m.Table.configure({resizable:!0}),f.TableRow,v.TableCell,y.TableHeader,g.configure({placeholder:this.placeholder}),e.Extension.create({name:"clearMarksOnEnter",addKeyboardShortcuts(){return{Enter:()=>(this.editor.chain().focus().unsetAllMarks().clearNodes().run(),!1)}}})];this._editor=new e.Editor({element:C,extensions:q,editable:!this._readonlyValue,content:B}),this._pendingContent=null,this._editor.on("selectionUpdate",()=>{this._updateBubbleMenuPosition(),this._editor?.isActive("table")?this._showTableCellToolbar():this._hideTableCellToolbar();const e=this._editor;if(e){const{selection:t}=e.state,{$from:i}=t;if("image"===i.node(i.depth).type.name){const t=e.view.coordsAtPos(i.start()),o=this.shadowRoot?.querySelector(".editor-wrapper")?.getBoundingClientRect();if(o){const e=t.left-o.left+(t.right-t.left)/2,i=t.top-o.top-40;this._showImageToolbar({x:e,y:i})}}else this._hideImageToolbar()}}),this._editor.on("transaction",()=>{this._editor?.isActive("table")?this._showTableCellToolbar():this._hideTableCellToolbar(),this._checkSlashCommand(),this._setupTableEdgeDetection()}),this._editor.on("update",()=>{this._emitContentChange()})}_emitContentChange(){if(!this._editor)return;const e=this._editor.getHTML();this.dispatchEvent(new CustomEvent("content-change",{detail:e,bubbles:!0,composed:!0}))}_setupTableEdgeDetection(){const e=this.shadowRoot?.querySelector(".editor-content"),t=this.shadowRoot?.querySelector(".editor-wrapper");if(!e||this._tableEdgeDetectionSetup)return;this._tableEdgeDetectionSetup=!0;const i=()=>{this._editor?.chain().focus().run()};e.addEventListener("click",i),t?.addEventListener("click",i)}_checkSlashCommand(){if(!this._editor)return;const{selection:e}=this._editor.state,t=this._editor.state.doc.textBetween(Math.max(0,e.from-10),e.from," ");this._hasSlashCommand=t.endsWith("/")}firstUpdated(){this._injectCustomStyles(),this._initEditor()}updated(e){if(e.has("custom-styles")&&this._injectCustomStyles(),this._editor){if(e.has("content")||e.has("model-value")&&this._useModelValue){const e=this._useModelValue?this["model-value"]:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}e.has("readonly")&&this._editor.setEditable(!this._readonlyValue)}else e.has("content")&&(this._pendingContent=this.content),e.has("model-value")&&this._useModelValue&&(this._pendingContent=this["model-value"])}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}forceUpdate(){if(this.requestUpdate(),this._editor){const e=this._useModelValue?this["model-value"]:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}}_applyFormat(e){if(this._hasSlashCommand&&this._editor){const{selection:e}=this._editor.state;this._editor.chain().focus().deleteRange({from:e.from-1,to:e.from}).run(),this._hasSlashCommand=!1}e()}_toggleBold(){this._applyFormat(()=>this._editor?.chain().focus().toggleBold().run())}_toggleItalic(){this._applyFormat(()=>this._editor?.chain().focus().toggleItalic().run())}_toggleUnderline(){this._applyFormat(()=>this._editor?.chain().focus().toggleUnderline().run())}_toggleStrike(){this._applyFormat(()=>this._editor?.chain().focus().toggleStrike().run())}_toggleCode(){this._applyFormat(()=>this._editor?.chain().focus().toggleCode().run())}_setHeading(e){this._applyFormat(()=>this._editor?.chain().focus().toggleHeading({level:e}).run())}_setParagraph(){this._applyFormat(()=>this._editor?.chain().focus().setParagraph().run())}_toggleBulletList(){this._applyFormat(()=>this._editor?.chain().focus().toggleBulletList().run())}_toggleOrderedList(){this._applyFormat(()=>this._editor?.chain().focus().toggleOrderedList().run())}_toggleBlockquote(){this._applyFormat(()=>this._editor?.chain().focus().toggleBlockquote().run())}_setTextAlign(e){this._applyFormat(()=>this._editor?.chain().focus().setTextAlign(e).run())}_setLink(){const e=window.prompt("请输入链接地址：");e&&this._applyFormat(()=>this._editor?.chain().focus().setLink({href:e}).run())}_insertTable(e,t){this._editor?.chain().focus().insertTable({rows:e??this._tableRows,cols:t??this._tableCols,withHeaderRow:!0}).run()}async _handleImageUpload(e){const t=e.target,i=t.files?.[0];if(i)try{const e=await this["upload-image"](i);this._editor?.chain().focus().setImage({src:e}).run()}catch(e){}t.value=""}_triggerImageUpload(){const e=this.shadowRoot?.querySelector(".image-input");e?.click()}_insertTableByClick(e,t){if(this._hasSlashCommand&&this._editor){const{selection:e}=this._editor.state;this._editor.chain().focus().deleteRange({from:e.from-1,to:e.from}).run(),this._hasSlashCommand=!1}this._tableRows=e,this._tableCols=t,this._insertTable(e,t)}_showTableCellToolbar(){if(!this._editor?.isActive("table"))return;const{state:e}=this._editor,{selection:t}=e,i=this._editor.view.coordsAtPos(t.from),o=this.shadowRoot?.querySelector(".editor-wrapper");if(!o)return;const r=o.getBoundingClientRect(),l=this._getTableCellRow(),s=this._getTableCellCol();(0===l||0===s)&&requestAnimationFrame(()=>{this._tableCellToolbar={x:i.left-r.left,y:i.bottom-r.top+8,visible:!0,cellRow:l,cellCol:s}})}_getTableCellRow(){if(!this._editor)return 0;const{selection:e}=this._editor.state,t=this._editor.state.doc.resolve(e.from);for(let e=t.depth;e>0;e--){if("tableCell"===t.node(e).type.name)return t.index(e-1)}return 0}_getTableCellCol(){if(!this._editor)return 0;const{selection:e}=this._editor.state,t=this._editor.state.doc.resolve(e.from);for(let e=t.depth;e>0;e--){if("tableCell"===t.node(e).type.name)return t.index(e)}return 0}_hideTableCellToolbar(){requestAnimationFrame(()=>{this._tableCellToolbar={...this._tableCellToolbar,visible:!1}})}_addTableRowAbove(){this._editor?.chain().focus().addRowBefore().run(),this._hideTableCellToolbar()}_addTableRowBelow(){this._editor?.chain().focus().addRowAfter().run(),this._hideTableCellToolbar()}_addTableColumnLeft(){this._editor?.chain().focus().addColumnBefore().run(),this._hideTableCellToolbar()}_addTableColumnRight(){this._editor?.chain().focus().addColumnAfter().run(),this._hideTableCellToolbar()}_deleteTableRow(){this._editor?.chain().focus().deleteRow().run(),this._hideTableCellToolbar()}_deleteTableColumn(){this._editor?.chain().focus().deleteColumn().run(),this._hideTableCellToolbar()}_deleteTable(){this._editor?.chain().focus().deleteTable().run(),this._hideTableCellToolbar()}_showImageToolbar(e){requestAnimationFrame(()=>{this._imageToolbar={x:e.x,y:e.y,visible:!0},this._imageMoreMenuVisible=!1})}_hideImageToolbar(){requestAnimationFrame(()=>{this._imageToolbar={...this._imageToolbar,visible:!1},this._imageMoreMenuVisible=!1})}_toggleImageMoreMenu(){this._imageMoreMenuVisible=!this._imageMoreMenuVisible}_deleteImage(){this._editor?.chain().focus().deleteNode("image").run(),this._hideImageToolbar()}_insertImageAfter(){this._triggerImageUpload(),this._imageMoreMenuVisible=!1}_setImageAlignLeft(){const e=this._editor;if(e){const{selection:t}=e.state,i=t.from;e.chain().focus().setNodeSelection(i).run();const o=this.shadowRoot?.querySelector(".ProseMirror img.ProseMirror-selectednode");o&&(o.style.display="block",o.style.margin="0 auto 0 0")}this._imageMoreMenuVisible=!1}_setImageAlignCenter(){const e=this._editor;if(e){const{selection:t}=e.state,i=t.from;e.chain().focus().setNodeSelection(i).run();const o=this.shadowRoot?.querySelector(".ProseMirror img.ProseMirror-selectednode");o&&(o.style.display="block",o.style.margin="0 auto")}this._imageMoreMenuVisible=!1}_setImageAlignRight(){const e=this._editor;if(e){const{selection:t}=e.state,i=t.from;e.chain().focus().setNodeSelection(i).run();const o=this.shadowRoot?.querySelector(".ProseMirror img.ProseMirror-selectednode");o&&(o.style.display="block",o.style.margin="0 0 0 auto")}this._imageMoreMenuVisible=!1}_getTextLabel(){const e=this._editor;return e?e.isActive("heading",{level:1})?"标题 1":e.isActive("heading",{level:2})?"标题 2":e.isActive("heading",{level:3})?"标题 3":"正文":"正文"}_getAlignLabel(){const e=this._editor;return e?e.isActive({textAlign:"center"})?"居中":e.isActive({textAlign:"right"})?"右对齐":"左对齐":"对齐"}_updateBubbleMenuPosition(){requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".bubble-menu"),t=this.shadowRoot?.querySelector(".ProseMirror"),i=this.shadowRoot?.querySelector(".editor-wrapper");if(!e||!t||!i)return;const o=this._editor,r=o?.isActive("table")??!1,{selection:l}=o?.state??{selection:null};if(r&&l&&!l.empty&&o){const{from:t,to:i}=l,r=o.state.doc.resolve(t),s=o.state.doc.resolve(i);let n=!1;for(let e=r.depth;e>=0;e--)if("table"===r.node(e).type.name){n=!0;break}const a=r.node(r.depth),d=s.node(s.depth);if("table"!==a.type.name&&"table"!==d.type.name||(n=!0),n)return e.style.opacity="0",void(e.style.visibility="hidden")}if(l&&!l.empty);else if(!l||l.empty&&!this._hasSlashCommand)return e.style.opacity="0",void(e.style.visibility="hidden");const s=i.getBoundingClientRect(),n=e.getBoundingClientRect(),{from:a}=l,d=this._editor?.view.coordsAtPos(a);if(!d)return;let c=d.left-s.left,h=d.top-s.top-40;c+n.width>s.width&&(c=s.width-n.width-8),c<0&&(c=8),h<0&&(h=d.bottom-s.top+8),e.style.left=`${c}px`,e.style.top=`${h}px`,e.style.opacity="1",e.style.visibility="visible"})}render(){const e=this._editor;return C.html`
-      <div class="editor-wrapper ${e?"":"loading"} ${this._previewValue?"preview":""}">
+"use strict";var e=require("@tiptap/core"),t=require("@tiptap/extension-blockquote"),i=require("@tiptap/extension-bold"),o=require("@tiptap/extension-bullet-list"),r=require("@tiptap/extension-code"),s=require("@tiptap/extension-document"),l=require("@tiptap/extension-heading"),n=require("@tiptap/extension-history"),a=require("@tiptap/extension-horizontal-rule"),d=require("@tiptap/extension-image"),c=require("@tiptap/extension-italic"),h=require("@tiptap/extension-link"),b=require("@tiptap/extension-list-item"),p=require("@tiptap/extension-ordered-list"),u=require("@tiptap/extension-paragraph"),g=require("@tiptap/extension-placeholder"),x=require("@tiptap/extension-strike"),m=require("@tiptap/extension-table"),v=require("@tiptap/extension-table-cell"),y=require("@tiptap/extension-table-header"),_=require("@tiptap/extension-table-row"),f=require("@tiptap/extension-text"),w=require("@tiptap/extension-text-align"),k=require("@tiptap/extension-underline"),C=require("lit"),$=require("lit/decorators.js"),T=require("../base/define.cjs"),M=Object.defineProperty,A=Object.getOwnPropertyDescriptor,I=(e,t,i,o)=>{for(var r,s=o>1?void 0:o?A(t,i):t,l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o?r(t,i,s):r(s))||s);return o&&s&&M(t,i,s),s};const B="输入内容",S="输入 / 唤出快捷命令",L=e.Node.create({name:"taskList",group:"block list",content:"taskItem+",defining:!0,parseHTML:()=>[{tag:'ul[data-type="taskList"]'}],renderHTML(t){let{HTMLAttributes:i}=t;return["ul",e.mergeAttributes(i,{"data-type":"taskList"}),0]},addCommands(){return{toggleTaskList:()=>e=>{let{commands:t}=e;return t.toggleList(this.name,"taskItem")}}}}),R=e.Node.create({name:"taskItem",defining:!0,content:"paragraph block*",addAttributes:()=>({checked:{default:!1,parseHTML:e=>"true"===e.getAttribute("data-checked"),renderHTML:e=>({"data-checked":String(Boolean(e.checked))})}}),parseHTML:()=>[{tag:'li[data-type="taskItem"]'}],renderHTML(t){let{HTMLAttributes:i}=t;const o=Boolean(i.checked);return["li",e.mergeAttributes(i,{"data-type":"taskItem"}),["label",{contenteditable:"false"},["input",{type:"checkbox",checked:o?"checked":null}],["span"]],["div",0]]},addKeyboardShortcuts(){return{Enter:()=>this.editor.commands.splitListItem(this.name),Tab:()=>this.editor.commands.sinkListItem(this.name),"Shift-Tab":()=>this.editor.commands.liftListItem(this.name)}}}),E=d.extend({addAttributes(){return{...this.parent?.(),width:{default:null,parseHTML:e=>{const t=e.getAttribute("width"),i=Number(t);return Number.isFinite(i)&&i>0?i:null},renderHTML:e=>e.width?{width:String(e.width)}:{}},align:{default:"center",parseHTML:e=>e.getAttribute("data-align")||"center",renderHTML:e=>e.align?{"data-align":String(e.align)}:{}}}},renderHTML(t){let{HTMLAttributes:i}=t;const o=String(i.align||"center"),r=Number(i.width),s=["display:block","max-width:100%","height:auto",`margin:${"left"===o?"0 auto 0 0":"right"===o?"0 0 0 auto":"0 auto"}`,Number.isFinite(r)&&r>0?`width:${r}px`:"",i.style||""].filter(Boolean).join(";");return["img",e.mergeAttributes(this.options.HTMLAttributes,i,{style:s})]}});exports.QxsBlocksuiteEditor=class extends C.LitElement{constructor(){super(...arguments),this.content="",this["model-value"]="",this.placeholder=B,this["toolbar-mode"]="header",this["header-always-visible"]="false",this["use-model"]="false",this.readonly="false",this.preview="false",this["custom-styles"]="",this._injectedStyleEl=null,this["upload-image"]=async e=>new Promise((t,i)=>{const o=new FileReader;o.onload=e=>t(e.target?.result),o.onerror=i,o.readAsDataURL(e)}),this._editor=null,this._pendingContent=null,this._tableRows=3,this._tableCols=3,this._hoverRow=0,this._hoverCol=0,this._tableDropdownOpen=!1,this._tableCellToolbar={x:0,y:0,visible:!1,cellRow:0,cellCol:0},this._imageToolbar={x:0,y:0,visible:!1},this._isEditorFocused=!1,this._selectedImage=null,this._hasSlashCommand=!1,this._slashCommandRange=null,this._isUpdating=!1,this._pendingImageInsertPos=null,this._tableEdgeDetectionSetup=!1}_injectCustomStyles(){const e=this.shadowRoot;if(!e)return;if(this._injectedStyleEl&&(this._injectedStyleEl.remove(),this._injectedStyleEl=null),!this["custom-styles"])return;const t=document.createElement("style");t.textContent=this["custom-styles"],e.appendChild(t),this._injectedStyleEl=t}get _useModelValue(){return!0===this["use-model"]||"true"===this["use-model"]||""===this["use-model"]||this.hasAttribute("use-model")}get _readonlyValue(){return!1!==this.readonly&&"false"!==this.readonly}get _previewValue(){return!1!==this.preview&&"false"!==this.preview}get _isEditable(){return!this._readonlyValue&&!this._previewValue}get _toolbarModeValue(){return"header"===this["toolbar-mode"]?"header":"slash"}get _headerAlwaysVisibleValue(){return!0===this["header-always-visible"]||"true"===this["header-always-visible"]||""===this["header-always-visible"]||this.hasAttribute("header-always-visible")}get _resolvedPlaceholder(){return this.placeholder&&this.placeholder!==B&&this.placeholder!==S?this.placeholder:"header"===this._toolbarModeValue?B:S}_initEditor(){if(this._editor)return;const d=this.shadowRoot?.querySelector(".editor-content");if(!d)return void requestAnimationFrame(()=>this._initEditor());for(;d.firstChild;)d.removeChild(d.firstChild);const C=this._useModelValue,$=this.getAttribute("model-value")??this["model-value"],T=this.content,M=C?(this._pendingContent??$)||"<p></p>":(this._pendingContent??T)||"<p></p>",A=[s,u,f,i,c,k,x,r,l.configure({levels:[1,2,3]}),o,p,L,R,b,t,a,n,E.configure({inline:!1,allowBase64:!0}),h.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),w.configure({types:["heading","paragraph"]}),m.Table.configure({resizable:!0}),_.TableRow,v.TableCell,y.TableHeader,g.configure({placeholder:this._resolvedPlaceholder})];this._editor=new e.Editor({element:d,extensions:A,editable:this._isEditable,content:M}),this._pendingContent=null,this._editor.on("selectionUpdate",()=>{"slash"===this._toolbarModeValue&&this._updateBubbleMenuPosition(),this._editor?.isActive("table")?this._showTableCellToolbar():this._hideTableCellToolbar(),this._syncImageSelectionState()}),this._editor.on("transaction",()=>{this._editor?.isActive("table")?this._showTableCellToolbar():this._hideTableCellToolbar(),this._checkSlashCommand(),this._setupTableEdgeDetection(),this._syncImageSelectionState()}),this._editor.on("update",()=>{this._emitContentChange()})}_toggleTaskItemChecked(e){const t=e.target,i=this._editor;if(!(t instanceof HTMLInputElement&&"checkbox"===t.type&&i))return;const o=t.closest('li[data-type="taskItem"]');if(!o)return;e.preventDefault(),e.stopPropagation();const r=i.view.posAtDOM(o,0),s=Math.max(0,r-2),l=Math.min(i.state.doc.content.size,r+2);let n=null;if(i.state.doc.nodesBetween(s,l,(e,t)=>{if("taskItem"===e.type.name)return n=t,!1}),null===n)return;const a=i.state.doc.nodeAt(n);a&&"taskItem"===a.type.name&&i.view.dispatch(i.state.tr.setNodeMarkup(n,void 0,{...a.attrs,checked:!a.attrs.checked}))}_emitContentChange(){if(!this._editor)return;const e=this._editor.getHTML();this.dispatchEvent(new CustomEvent("content-change",{detail:e,bubbles:!0,composed:!0}))}_setupTableEdgeDetection(){const e=this.shadowRoot?.querySelector(".editor-content"),t=this.shadowRoot?.querySelector(".editor-wrapper");if(!e||this._tableEdgeDetectionSetup)return;this._tableEdgeDetectionSetup=!0;const i=e=>{this._toggleTaskItemChecked(e);const t=e.target;t instanceof Element&&t.closest(".editor-header, .bubble-menu, .table-cell-toolbar, .image-toolbar")||this._isEditable&&this._editor?.chain().focus().run()};e.addEventListener("click",i),t?.addEventListener("click",i)}_handleWrapperFocusIn(){this._isEditorFocused=!0}_handleWrapperFocusOut(e){const t=e.relatedTarget,i=this.shadowRoot?.querySelector(".editor-wrapper");t&&i?.contains(t)||(this._isEditorFocused=!1,this._tableDropdownOpen=!1)}_isHeaderVisible(){return"header"===this._toolbarModeValue&&!this._previewValue&&(this._headerAlwaysVisibleValue||this._isEditorFocused||this._tableDropdownOpen||Boolean(this._selectedImage))}_getImageSelection(){const e=this._editor,t=e?.state.selection;return e&&t?.node&&"image"===t.node.type?.name?{pos:t.from,attrs:t.node.attrs??{}}:null}_getImageMaxWidth(){const e=this.shadowRoot?.querySelector(".editor-content"),t=(e?.clientWidth??560)-32;return Math.max(24,Math.min(560,t))}async _getImageNaturalWidth(e){return await new Promise(t=>{const i=URL.createObjectURL(e),o=new window.Image;o.onload=()=>{const e=o.naturalWidth;URL.revokeObjectURL(i),t(Number.isFinite(e)&&e>0?e:null)},o.onerror=()=>{URL.revokeObjectURL(i),t(null)},o.src=i})}_syncImageSelectionState(){const e=this._getImageSelection();if(!e)return this._selectedImage=null,void("slash"===this._toolbarModeValue&&this._hideImageToolbar());const t=Number(e.attrs.width),i=String(e.attrs.align||"center");if(this._selectedImage={pos:e.pos,width:Number.isFinite(t)&&t>0?t:this._getImageMaxWidth(),align:i},"slash"!==this._toolbarModeValue)return void this._hideImageToolbar();const o=this._editor,r=this.shadowRoot?.querySelector(".editor-wrapper")?.getBoundingClientRect();if(!o||!r)return;const s=o.view.coordsAtPos(e.pos),l=s.left-r.left+(s.right-s.left)/2,n=s.top-r.top-40;this._showImageToolbar({x:l,y:n})}_clearSlashCommandText(){if(!this._editor||!this._slashCommandRange)return;const{from:e,to:t}=this._slashCommandRange;this._editor.chain().focus().deleteRange({from:e,to:t}).run(),this._hasSlashCommand=!1,this._slashCommandRange=null}_checkSlashCommand(){if(!this._editor)return;const{selection:e}=this._editor.state;if(!e.empty)return this._hasSlashCommand=!1,void(this._slashCommandRange=null);const{$from:t}=e,i=t.parent.textBetween(0,t.parentOffset," "," "),o=/(?:^|\s)(\/\S*)$/.exec(i);if(!o)return this._hasSlashCommand=!1,void(this._slashCommandRange=null);const r=o[1];this._hasSlashCommand=!0,this._slashCommandRange={from:e.from-r.length,to:e.from}}firstUpdated(){this._injectCustomStyles(),this._initEditor()}updated(e){if(e.has("custom-styles")&&this._injectCustomStyles(),this._editor){if(e.has("content")||e.has("model-value")&&this._useModelValue){const e=this._useModelValue?this["model-value"]:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}(e.has("readonly")||e.has("preview"))&&this._editor.setEditable(this._isEditable)}else e.has("content")&&(this._pendingContent=this.content),e.has("model-value")&&this._useModelValue&&(this._pendingContent=this["model-value"])}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}forceUpdate(){if(this.requestUpdate(),this._editor){const e=this._useModelValue?this["model-value"]:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}}_applyFormat(e){this._clearSlashCommandText(),e()}_toggleBold(){this._applyFormat(()=>this._editor?.chain().focus().toggleBold().run())}_toggleItalic(){this._applyFormat(()=>this._editor?.chain().focus().toggleItalic().run())}_toggleUnderline(){this._applyFormat(()=>this._editor?.chain().focus().toggleUnderline().run())}_toggleStrike(){this._applyFormat(()=>this._editor?.chain().focus().toggleStrike().run())}_toggleCode(){this._applyFormat(()=>this._editor?.chain().focus().toggleCode().run())}_setHeading(e){this._applyFormat(()=>this._editor?.chain().focus().toggleHeading({level:e}).run())}_setParagraph(){this._applyFormat(()=>this._editor?.chain().focus().setParagraph().run())}_toggleBulletList(){this._applyFormat(()=>this._editor?.chain().focus().toggleBulletList().run())}_toggleOrderedList(){this._applyFormat(()=>this._editor?.chain().focus().toggleOrderedList().run())}_toggleTaskList(){this._applyFormat(()=>this._editor?.chain().focus().toggleTaskList().run())}_toggleBlockquote(){this._applyFormat(()=>this._editor?.chain().focus().toggleBlockquote().run())}_setTextAlign(e){this._applyFormat(()=>this._editor?.chain().focus().setTextAlign(e).run())}_setLink(){const e=window.prompt("请输入链接地址：");e&&this._applyFormat(()=>this._editor?.chain().focus().setLink({href:e}).run())}_insertTable(e,t){this._editor?.chain().focus().insertTable({rows:e??this._tableRows,cols:t??this._tableCols,withHeaderRow:!0}).run()}async _handleImageUpload(e){const t=e.target,i=t.files?.[0];if(i)try{const e=await this._getImageNaturalWidth(i),t=await this["upload-image"](i),o=e?Math.min(e,this._getImageMaxWidth()):this._getImageMaxWidth();this._clearSlashCommandText();const r=this._pendingImageInsertPos;this._pendingImageInsertPos=null,null!==r?this._insertImageAt(r,{src:t,width:o,align:"center"}):this._editor?.chain().focus().setImage({src:t,width:o,align:"center"}).run()}catch(e){}t.value=""}_triggerImageUpload(){this._clearSlashCommandText();const e=this.shadowRoot?.querySelector(".image-input");e?.click()}_insertTableByClick(e,t){this._clearSlashCommandText(),this._tableRows=e,this._tableCols=t,this._insertTable(e,t)}_showTableCellToolbar(){if(!this._editor?.isActive("table"))return;const{state:e}=this._editor,{selection:t}=e,i=this._editor.view.coordsAtPos(t.from),o=this.shadowRoot?.querySelector(".editor-wrapper");if(!o)return;const r=o.getBoundingClientRect(),s=this._getTableCellRow(),l=this._getTableCellCol();(0===s||0===l)&&requestAnimationFrame(()=>{this._tableCellToolbar={x:i.left-r.left,y:i.bottom-r.top+8,visible:!0,cellRow:s,cellCol:l}})}_getTableCellRow(){if(!this._editor)return 0;const{selection:e}=this._editor.state,t=this._editor.state.doc.resolve(e.from);for(let e=t.depth;e>0;e--){if("tableCell"===t.node(e).type.name)return t.index(e-1)}return 0}_getTableCellCol(){if(!this._editor)return 0;const{selection:e}=this._editor.state,t=this._editor.state.doc.resolve(e.from);for(let e=t.depth;e>0;e--){if("tableCell"===t.node(e).type.name)return t.index(e)}return 0}_hideTableCellToolbar(){requestAnimationFrame(()=>{this._tableCellToolbar={...this._tableCellToolbar,visible:!1}})}_addTableRowAbove(){this._editor?.chain().focus().addRowBefore().run(),this._hideTableCellToolbar()}_addTableRowBelow(){this._editor?.chain().focus().addRowAfter().run(),this._hideTableCellToolbar()}_addTableColumnLeft(){this._editor?.chain().focus().addColumnBefore().run(),this._hideTableCellToolbar()}_addTableColumnRight(){this._editor?.chain().focus().addColumnAfter().run(),this._hideTableCellToolbar()}_deleteTableRow(){this._editor?.chain().focus().deleteRow().run(),this._hideTableCellToolbar()}_deleteTableColumn(){this._editor?.chain().focus().deleteColumn().run(),this._hideTableCellToolbar()}_deleteTable(){this._editor?.chain().focus().deleteTable().run(),this._hideTableCellToolbar()}_showImageToolbar(e){requestAnimationFrame(()=>{this._imageToolbar={x:e.x,y:e.y,visible:!0}})}_hideImageToolbar(){requestAnimationFrame(()=>{this._imageToolbar={...this._imageToolbar,visible:!1}})}_deleteImage(){const e=this._getSelectedImageNode();if(!e)return;const{editor:t,pos:i,node:o}=e;t.view.dispatch(t.state.tr.delete(i,i+o.nodeSize)),this._selectedImage=null,this._pendingImageInsertPos=null,this._hideImageToolbar()}_insertImageAfter(){const e=this._getSelectedImageNode();e?(this._pendingImageInsertPos=e.pos+e.node.nodeSize,this._triggerImageUpload()):this._triggerImageUpload()}_getSelectedImageNode(){const e=this._editor,t=this._selectedImage?.pos;if(!e||void 0===t)return null;const i=e.state.doc.nodeAt(t);return i&&"image"===i.type.name?{editor:e,pos:t,node:i}:null}_insertImageAt(e,t){const i=this._editor;if(!i)return;const o=Math.max(0,Math.min(e,i.state.doc.content.size));i.chain().insertContentAt(o,{type:"image",attrs:t}).setNodeSelection(o).run()}_updateSelectedImageAttributes(e){const t=this._getSelectedImageNode();if(!t)return;const{editor:i,pos:o,node:r}=t;i.view.dispatch(i.state.tr.setNodeMarkup(o,void 0,{...r.attrs,...e}))}_setImageWidth(e){const t=Math.max(24,Math.min(this._getImageMaxWidth(),Math.round(e)));this._updateSelectedImageAttributes({width:t})}_handleImageWidthInput(e){const t=e.target.value.trim();if(!t)return;const i=Number(t);Number.isFinite(i)&&this._setImageWidth(i)}_setImageAlignLeft(){this._updateSelectedImageAttributes({align:"left"})}_setImageAlignCenter(){this._updateSelectedImageAttributes({align:"center"})}_setImageAlignRight(){this._updateSelectedImageAttributes({align:"right"})}_getTextLabel(){const e=this._editor;return e?e.isActive("heading",{level:1})?"标题 1":e.isActive("heading",{level:2})?"标题 2":e.isActive("heading",{level:3})?"标题 3":"正文":"正文"}_getAlignLabel(){const e=this._editor;return e?e.isActive({textAlign:"center"})?"居中":e.isActive({textAlign:"right"})?"右对齐":"左对齐":"对齐"}_renderImageControls(){const e=this._selectedImage;return e?C.html`
+      <button class="bubble-btn danger" title="删除图片" @click=${this._deleteImage}>
+        <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+      </button>
+      <button class="bubble-btn" title="添加图片" @click=${this._insertImageAfter}>
+        <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </button>
+      <div class="bubble-divider"></div>
+      <button class="bubble-btn ${"left"===e.align?"is-active":""}" title="左对齐" @click=${this._setImageAlignLeft}>
+        <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+      </button>
+      <button class="bubble-btn ${"center"===e.align?"is-active":""}" title="居中" @click=${this._setImageAlignCenter}>
+        <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+      </button>
+      <button class="bubble-btn ${"right"===e.align?"is-active":""}" title="右对齐" @click=${this._setImageAlignRight}>
+        <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+      </button>
+      <div class="image-size-control">
+        <span class="image-size-label">宽度</span>
+        <input
+          class="image-size-range"
+          type="number"
+          min="${24}"
+          max="${this._getImageMaxWidth()}"
+          .value=${String(e.width)}
+          @input=${this._handleImageWidthInput}
+        />
+      </div>
+    `:""}_updateBubbleMenuPosition(){"slash"===this._toolbarModeValue&&requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".bubble-menu"),t=this.shadowRoot?.querySelector(".ProseMirror"),i=this.shadowRoot?.querySelector(".editor-wrapper");if(!e||!t||!i)return;const o=this._editor,r=o?.isActive("table")??!1,{selection:s}=o?.state??{selection:null};if(r&&s&&!s.empty&&o){const{from:t,to:i}=s,r=o.state.doc.resolve(t),l=o.state.doc.resolve(i);let n=!1;for(let e=r.depth;e>=0;e--)if("table"===r.node(e).type.name){n=!0;break}const a=r.node(r.depth),d=l.node(l.depth);if("table"!==a.type.name&&"table"!==d.type.name||(n=!0),n)return e.style.opacity="0",void(e.style.visibility="hidden")}if(s&&!s.empty);else if(!s||s.empty&&!this._hasSlashCommand)return e.style.opacity="0",void(e.style.visibility="hidden");const l=i.getBoundingClientRect(),n=e.getBoundingClientRect(),{from:a}=s,d=this._editor?.view.coordsAtPos(a);if(!d)return;let c=d.left-l.left,h=d.top-l.top-40;c+n.width>l.width&&(c=l.width-n.width-8),c<0&&(c=8),h<0&&(h=d.bottom-l.top+8),e.style.left=`${c}px`,e.style.top=`${h}px`,e.style.opacity="1",e.style.visibility="visible"})}render(){const e=this._editor;return C.html`
+      <div
+        class="editor-wrapper ${e?"":"loading"} ${this._previewValue?"preview":""}"
+        @focusin=${this._handleWrapperFocusIn}
+        @focusout=${this._handleWrapperFocusOut}
+      >
         ${e?"":C.html`
           <div class="loading-placeholder">
             <div class="loading-spinner"></div>
@@ -13,8 +45,150 @@
           @change=${this._handleImageUpload}
         />
 
+        ${this._previewValue||"header"!==this._toolbarModeValue?"":C.html`
+        <div class="editor-header ${this._isHeaderVisible()?"is-visible":""}">
+          <div class="editor-header__inner">
+            ${this._selectedImage?this._renderImageControls():C.html`
+                <button
+                  class="bubble-btn ${e?.isActive("bold")?"is-active":""}"
+                  @click=${this._toggleBold}
+                  title="加粗"
+                >
+                  <svg viewBox="0 0 24 24"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
+                </button>
+                <button
+                  class="bubble-btn ${e?.isActive("italic")?"is-active":""}"
+                  @click=${this._toggleItalic}
+                  title="斜体"
+                >
+                  <svg viewBox="0 0 24 24"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
+                </button>
+                <button
+                  class="bubble-btn ${e?.isActive("underline")?"is-active":""}"
+                  @click=${this._toggleUnderline}
+                  title="下划线"
+                >
+                  <svg viewBox="0 0 24 24"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
+                </button>
+                <button
+                  class="bubble-btn ${e?.isActive("strike")?"is-active":""}"
+                  @click=${this._toggleStrike}
+                  title="删除线"
+                >
+                  <svg viewBox="0 0 24 24"><path d="M17.3 4.9c-2.3-.6-4.4-1-6.2-.9-2.7 0-5.3.7-5.3 3.6 0 1.5 1.8 3.3 5.3 3.9h.2m8.2 3.2c.3.4.4.8.4 1.3 0 2.9-2.7 3.6-6.2 3.6-2.3 0-4.4-.3-6.2-.9M4 12h16"/></svg>
+                </button>
+
+                <div class="bubble-divider"></div>
+
+                <div class="bubble-dropdown">
+                  <button class="bubble-dropdown-btn">
+                    ${this._getTextLabel()}
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+                  </button>
+                  <div class="bubble-dropdown-menu">
+                    <button class="bubble-dropdown-item ${e?.isActive("heading")?"":"is-active"}" @click=${this._setParagraph}>正文</button>
+                    <button class="bubble-dropdown-item ${e?.isActive("heading",{level:1})?"is-active":""}" @click=${()=>this._setHeading(1)}>标题 1</button>
+                    <button class="bubble-dropdown-item ${e?.isActive("heading",{level:2})?"is-active":""}" @click=${()=>this._setHeading(2)}>标题 2</button>
+                    <button class="bubble-dropdown-item ${e?.isActive("heading",{level:3})?"is-active":""}" @click=${()=>this._setHeading(3)}>标题 3</button>
+                  </div>
+                </div>
+
+                <div class="bubble-divider"></div>
+
+                <div class="bubble-dropdown">
+                  <button class="bubble-dropdown-btn">
+                    ${this._getAlignLabel()}
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+                  </button>
+                  <div class="bubble-dropdown-menu">
+                    <button class="bubble-dropdown-item ${e?.isActive({textAlign:"left"})?"is-active":""}" @click=${()=>this._setTextAlign("left")}>
+                      <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+                      左对齐
+                    </button>
+                    <button class="bubble-dropdown-item ${e?.isActive({textAlign:"center"})?"is-active":""}" @click=${()=>this._setTextAlign("center")}>
+                      <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+                      居中
+                    </button>
+                    <button class="bubble-dropdown-item ${e?.isActive({textAlign:"right"})?"is-active":""}" @click=${()=>this._setTextAlign("right")}>
+                      <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+                      右对齐
+                    </button>
+                  </div>
+                </div>
+
+                <div class="bubble-divider"></div>
+
+                <button class="bubble-btn ${e?.isActive("code")?"is-active":""}" @click=${this._toggleCode} title="行内代码">
+                  <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                </button>
+                <button class="bubble-btn ${e?.isActive("link")?"is-active":""}" @click=${this._setLink} title="链接">
+                  <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                </button>
+                <button class="bubble-btn" @click=${this._triggerImageUpload} title="图片">
+                  <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                </button>
+
+                <div class="bubble-divider"></div>
+
+                <button class="bubble-btn ${e?.isActive("bulletList")?"is-active":""}" @click=${this._toggleBulletList} title="无序列表">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="9" y1="6" x2="20" y2="6"/>
+                    <line x1="9" y1="12" x2="20" y2="12"/>
+                    <line x1="9" y1="18" x2="20" y2="18"/>
+                    <circle cx="4" cy="6" r="0.5" fill="currentColor" stroke="none"/>
+                    <circle cx="4" cy="12" r="0.5" fill="currentColor" stroke="none"/>
+                    <circle cx="4" cy="18" r="0.5" fill="currentColor" stroke="none"/>
+                  </svg>
+                </button>
+                <button class="bubble-btn ${e?.isActive("orderedList")?"is-active":""}" @click=${this._toggleOrderedList} title="有序列表">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="10" y1="6" x2="21" y2="6"/>
+                    <line x1="10" y1="12" x2="21" y2="12"/>
+                    <line x1="10" y1="18" x2="21" y2="18"/>
+                    <path d="M4 6h1v4"/>
+                    <path d="M4 10h2"/>
+                    <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1.5"/>
+                  </svg>
+                </button>
+                <button class="bubble-btn ${e?.isActive("taskList")?"is-active":""}" @click=${this._toggleTaskList} title="待办列表">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="5" width="4" height="4" rx="1"/>
+                    <polyline points="4 7 5 8 6.5 6.5"/>
+                    <line x1="10" y1="7" x2="21" y2="7"/>
+                    <rect x="3" y="15" width="4" height="4" rx="1"/>
+                    <line x1="10" y1="17" x2="21" y2="17"/>
+                  </svg>
+                </button>
+                <button class="bubble-btn ${e?.isActive("blockquote")?"is-active":""}" @click=${this._toggleBlockquote} title="引用">
+                  <svg viewBox="0 0 24 24"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
+                </button>
+
+                <div class="bubble-divider"></div>
+
+                <div
+                  class="bubble-dropdown ${this._tableDropdownOpen?"is-open":""}"
+                  @mouseenter=${()=>{this._tableDropdownOpen=!0,this._hoverRow=0,this._hoverCol=0}}
+                  @mouseleave=${()=>this._tableDropdownOpen=!1}
+                >
+                  <button class="bubble-dropdown-btn" title="表格">
+                    <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+                  </button>
+                  <div class="bubble-dropdown-menu">
+                    <div class="table-grid-preview">
+                      ${this._renderTableGrid()}
+                    </div>
+                    <div class="table-size-hint">
+                      <span>${this._hoverRow>0?`${this._hoverRow} × ${this._hoverCol}`:`${this._tableRows} × ${this._tableCols}`}</span>
+                    </div>
+                  </div>
+                </div>
+              `}
+          </div>
+        </div>
+      `}
+
         <!-- Bubble Menu (悬浮操作栏) -->
-        ${this._previewValue?"":C.html`
+        ${this._previewValue||"slash"!==this._toolbarModeValue?"":C.html`
         <div class="bubble-menu">
           <!-- 文本格式 -->
           <button
@@ -175,6 +349,19 @@
               <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1.5"/>
             </svg>
           </button>
+          <button
+            class="bubble-btn ${e?.isActive("taskList")?"is-active":""}"
+            @click=${this._toggleTaskList}
+            title="待办列表"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="5" width="4" height="4" rx="1"/>
+              <polyline points="4 7 5 8 6.5 6.5"/>
+              <line x1="10" y1="7" x2="21" y2="7"/>
+              <rect x="3" y="15" width="4" height="4" rx="1"/>
+              <line x1="10" y1="17" x2="21" y2="17"/>
+            </svg>
+          </button>
 
           <!-- 引用 -->
           <button
@@ -208,7 +395,7 @@
         </div>
         `}
 
-        <div class="editor-content"></div>
+        <div class="editor-content" data-empty-hint=${this._resolvedPlaceholder}></div>
 
         <!-- Table Cell Toolbar -->
         ${this._tableCellToolbar.visible&&e?.isActive("table")?C.html`
@@ -250,40 +437,13 @@
           `:""}
 
         <!-- Image Toolbar -->
-        ${this._imageToolbar.visible?C.html`
+        ${"slash"===this._toolbarModeValue&&this._imageToolbar.visible?C.html`
           <div
             class="image-toolbar"
             style="left: ${this._imageToolbar.x}px; top: ${this._imageToolbar.y}px;"
             @mousedown=${e=>e.preventDefault()}
           >
-            <button class="image-toolbar-btn danger" title="删除图片" @click=${this._deleteImage}>
-              <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-            </button>
-            <button class="image-toolbar-btn" title="添加图片" @click=${this._insertImageAfter}>
-              <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-            </button>
-            <div class="image-toolbar-divider"></div>
-            <div style="position: relative;">
-              <button class="image-toolbar-btn" title="更多" @click=${this._toggleImageMoreMenu}>
-                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
-              </button>
-              ${this._imageMoreMenuVisible?C.html`
-                <div class="image-more-menu">
-                  <button class="image-more-menu-item" @click=${this._setImageAlignLeft}>
-                    <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
-                    左对齐
-                  </button>
-                  <button class="image-more-menu-item" @click=${this._setImageAlignCenter}>
-                    <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
-                    居中
-                  </button>
-                  <button class="image-more-menu-item" @click=${this._setImageAlignRight}>
-                    <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
-                    右对齐
-                  </button>
-                </div>
-                `:""}
-            </div>
+            ${this._renderImageControls()}
           </div>
           `:""}
       </div>
@@ -324,6 +484,34 @@
       min-height: unset;
     }
 
+    .editor-header {
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      padding: 0 16px;
+      border-bottom: 1px solid transparent;
+      transition:
+        max-height 0.24s ease,
+        opacity 0.18s ease,
+        padding 0.24s ease,
+        border-color 0.24s ease;
+    }
+
+    .editor-header.is-visible {
+      max-height: 132px;
+      opacity: 1;
+      overflow: visible;
+      padding: 10px 12px;
+      border-bottom-color: #eef1f5;
+    }
+
+    .editor-header__inner {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      overflow: visible;
+    }
+
     .editor-content {
       padding: 12px 16px;
       min-height: 80px;
@@ -331,7 +519,7 @@
     }
 
     .editor-content:empty::before {
-      content: '输入 / 唤出快捷命令';
+      content: attr(data-empty-hint);
       color: #c0c0c0;
       pointer-events: none;
       display: block;
@@ -445,6 +633,51 @@
       margin: 0;
     }
 
+    .ProseMirror ul[data-type="taskList"] {
+      padding-left: 0;
+      list-style: none;
+    }
+
+    .ProseMirror li[data-type="taskItem"] {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      list-style: none;
+      margin: 0.2em 0;
+    }
+
+    .ProseMirror li[data-type="taskItem"] > label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 28px;
+      flex: 0 0 18px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .ProseMirror li[data-type="taskItem"] > label > input {
+      width: 14px;
+      height: 14px;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    .ProseMirror li[data-type="taskItem"] > label > span {
+      display: none;
+    }
+
+    .ProseMirror li[data-type="taskItem"] > div {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .ProseMirror li[data-type="taskItem"][data-checked="true"] > div p {
+      color: #8a8f98;
+      text-decoration: line-through;
+    }
+
     .ProseMirror li {
       margin: 0.1em 0;
     }
@@ -637,6 +870,11 @@
       color: #fff;
     }
 
+    .bubble-btn.danger:hover {
+      background: #fef0f0;
+      color: #f56c6c;
+    }
+
     .bubble-btn svg {
       width: 16px;
       height: 16px;
@@ -785,6 +1023,37 @@
       color: #8c8c8c;
     }
 
+    .image-size-control {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding-left: 8px;
+      margin-left: 2px;
+      border-left: 1px solid #e3e3e3;
+      white-space: nowrap;
+    }
+
+    .image-size-label {
+      font-size: 12px;
+      color: #7a7f88;
+    }
+
+    .image-size-range {
+      width: 72px;
+      height: 26px;
+      padding: 0 8px;
+      border: 1px solid #d8dde6;
+      border-radius: 6px;
+      font-size: 12px;
+      color: #37352f;
+      background: #fff;
+      outline: none;
+    }
+
+    .image-size-range:focus {
+      border-color: var(--qxs-color-primary, #3D61E3);
+    }
+
     /* Image Toolbar */
     .image-toolbar {
       position: absolute;
@@ -888,5 +1157,5 @@
       outline: 2px solid var(--qxs-color-primary, #3D61E3);
       outline-offset: 2px;
     }
-  `,q([M.property({type:String,attribute:"content"})],exports.QxsBlocksuiteEditor.prototype,"content",2),q([M.property({type:String,attribute:"model-value"})],exports.QxsBlocksuiteEditor.prototype,"model-value",2),q([M.property({type:String,attribute:"placeholder"})],exports.QxsBlocksuiteEditor.prototype,"placeholder",2),q([M.property({type:String,attribute:"use-model"})],exports.QxsBlocksuiteEditor.prototype,"use-model",2),q([M.property({type:String,attribute:"readonly"})],exports.QxsBlocksuiteEditor.prototype,"readonly",2),q([M.property({type:String,attribute:"preview"})],exports.QxsBlocksuiteEditor.prototype,"preview",2),q([M.property({type:String,attribute:"custom-styles"})],exports.QxsBlocksuiteEditor.prototype,"custom-styles",2),q([M.property({type:Object,attribute:"upload-image"})],exports.QxsBlocksuiteEditor.prototype,"upload-image",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_editor",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_pendingContent",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_hoverRow",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_hoverCol",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_tableDropdownOpen",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_tableCellToolbar",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_imageToolbar",2),q([M.state()],exports.QxsBlocksuiteEditor.prototype,"_imageMoreMenuVisible",2),exports.QxsBlocksuiteEditor=q([T.safeCustomElement("qxs-blocksuite-editor")],exports.QxsBlocksuiteEditor);
+  `,I([$.property({type:String,attribute:"content"})],exports.QxsBlocksuiteEditor.prototype,"content",2),I([$.property({type:String,attribute:"model-value"})],exports.QxsBlocksuiteEditor.prototype,"model-value",2),I([$.property({type:String,attribute:"placeholder"})],exports.QxsBlocksuiteEditor.prototype,"placeholder",2),I([$.property({type:String,attribute:"toolbar-mode"})],exports.QxsBlocksuiteEditor.prototype,"toolbar-mode",2),I([$.property({type:String,attribute:"header-always-visible"})],exports.QxsBlocksuiteEditor.prototype,"header-always-visible",2),I([$.property({type:String,attribute:"use-model"})],exports.QxsBlocksuiteEditor.prototype,"use-model",2),I([$.property({type:String,attribute:"readonly"})],exports.QxsBlocksuiteEditor.prototype,"readonly",2),I([$.property({type:String,attribute:"preview"})],exports.QxsBlocksuiteEditor.prototype,"preview",2),I([$.property({type:String,attribute:"custom-styles"})],exports.QxsBlocksuiteEditor.prototype,"custom-styles",2),I([$.property({type:Object,attribute:"upload-image"})],exports.QxsBlocksuiteEditor.prototype,"upload-image",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_editor",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_pendingContent",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_hoverRow",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_hoverCol",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_tableDropdownOpen",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_tableCellToolbar",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_imageToolbar",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_isEditorFocused",2),I([$.state()],exports.QxsBlocksuiteEditor.prototype,"_selectedImage",2),exports.QxsBlocksuiteEditor=I([T.safeCustomElement("qxs-blocksuite-editor")],exports.QxsBlocksuiteEditor);
 //# sourceMappingURL=blocksuite-editor.cjs.map