@qxs-bns/components-wc 0.0.16 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/editor/blocksuite-editor.mjs +14 -68
- package/es/editor/blocksuite-editor.mjs.map +1 -1
- package/es/subject/list.mjs.map +1 -1
- package/es/subject/single.mjs.map +1 -1
- package/lib/editor/blocksuite-editor.cjs +3 -57
- package/lib/editor/blocksuite-editor.cjs.map +1 -1
- package/lib/subject/list.cjs.map +1 -1
- package/lib/subject/single.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/extension-blockquote";import o from"@tiptap/extension-bold";import r from"@tiptap/extension-bullet-list";import l from"@tiptap/extension-code";import s from"@tiptap/extension-document";import n from"@tiptap/extension-heading";import a from"@tiptap/extension-history";import d from"@tiptap/extension-horizontal-rule";import c from"@tiptap/extension-image";import h from"@tiptap/extension-italic";import p from"@tiptap/extension-link";import b from"@tiptap/extension-list-item";import u from"@tiptap/extension-ordered-list";import g from"@tiptap/extension-paragraph";import m from"@tiptap/extension-strike";import{Table as x}from"@tiptap/extension-table";import{TableCell as v}from"@tiptap/extension-table-cell";import{TableHeader as f}from"@tiptap/extension-table-header";import{TableRow as y}from"@tiptap/extension-table-row";import _ from"@tiptap/extension-text";import w from"@tiptap/extension-text-align";import k from"@tiptap/extension-underline";import C from"@tiptap/extension-placeholder";import{css as M,LitElement as T,html as A}from"lit";import{property as $}from"../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.mjs";import{state as S}from"../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.mjs";import{safeCustomElement as R}from"../base/define.mjs";var B=Object.defineProperty,P=Object.getOwnPropertyDescriptor,E=(e,t,i,o)=>{for(var r,l=o>1?void 0:o?P(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&&B(t,i,l),l};let q=class extends T{constructor(){super(...arguments),this.content="",this.modelValue="",this.useModelAttr="false",this.autoSyncAttr="true",this.readonlyAttr="false",this.previewAttr="false",this.isEditAttr="false",this.customStylesAttr="",this._injectedStyleEl=null,this.uploadImage=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._tableEdgeHover={type:null,index:0,position:{x:0,y:0}},this._imageToolbar={x:0,y:0,visible:!1},this._imageMoreMenuVisible=!1,this._hasSlashCommand=!1,this._tableEdgeDetectionSetup=!1}get customStyles(){return this.customStylesAttr}set customStyles(e){this.customStylesAttr=e}_injectCustomStyles(){const e=this.shadowRoot;if(!e)return;if(this._injectedStyleEl&&(this._injectedStyleEl.remove(),this._injectedStyleEl=null),!this.customStylesAttr)return;const t=document.createElement("style");t.textContent=this.customStylesAttr,e.appendChild(t),this._injectedStyleEl=t}get useModel(){return"true"===this.useModelAttr||""===this.useModelAttr||this.hasAttribute("use-model")}set useModel(e){this.useModelAttr=String(e)}get autoSync(){return"false"!==this.autoSyncAttr}set autoSync(e){this.autoSyncAttr=String(e)}get readonly(){return"false"!==this.readonlyAttr}set readonly(e){this.readonlyAttr=String(e)}get preview(){return"false"!==this.previewAttr}set preview(e){this.previewAttr=String(e)}get isEdit(){return"true"===this.isEditAttr}set isEdit(e){this.isEditAttr=String(e)}_initEditor(){if(this._editor)return;const M=this.shadowRoot?.querySelector(".editor-content");if(!M)return void requestAnimationFrame(()=>this._initEditor());for(;M.firstChild;)M.removeChild(M.firstChild);const T=this.useModel||this.hasAttribute("use-model"),A=this.getAttribute("model-value")??this.modelValue,$=this.content,S=T?(this._pendingContent??A)||"<p></p>":(this._pendingContent??$)||"<p></p>",R=[s,g,_,o,h,k,m,l,n.configure({levels:[1,2,3]}),r,u,b,i,d,a,c.configure({inline:!1,allowBase64:!0}),p.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),w.configure({types:["heading","paragraph"]}),x.configure({resizable:!0}),y,v,f,C.configure({placeholder:"输入 / 唤出快捷命令"}),e.create({name:"clearMarksOnEnter",addKeyboardShortcuts(){return{Enter:()=>(this.editor.chain().focus().unsetAllMarks().clearNodes().run(),!1)}}})];this._editor=new t({element:M,extensions:R,editable:!this.readonly,content:S}),this._pendingContent=null,this._editor.on("selectionUpdate",()=>{this.requestUpdate(),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.requestUpdate(),this._editor?.isActive("table")?this._showTableCellToolbar():this._hideTableCellToolbar(),this._checkSlashCommand(),this._setupTableEdgeDetection(),this._emitContentChange()}),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})),this.autoSync&&(this.modelValue=e)}_setupTableEdgeDetection(){const e=this.shadowRoot?.querySelector(".editor-content"),t=this.shadowRoot?.querySelector(".editor-wrapper");if(!e||this._tableEdgeDetectionSetup)return;this._tableEdgeDetectionSetup=!0,e.addEventListener("mousemove",e=>{this._handleTableEdgeMouseMove(e)}),e.addEventListener("mouseleave",()=>{this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}}});const i=()=>{this._editor?.chain().focus().run()};e.addEventListener("click",i),t?.addEventListener("click",i)}_handleTableEdgeMouseMove(e){if(!this._editor?.isActive("table"))return this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}},void this.requestUpdate();const t=e.target.closest("table");if(!t)return this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}},void this.requestUpdate();const i=t.getBoundingClientRect(),o=this.shadowRoot?.querySelector(".editor-wrapper");if(!o)return;const r=o.getBoundingClientRect(),l=e.clientX-r.left,s=e.clientY-r.top,n=10,a=i.height/t.rows.length;for(let o=0;o<t.rows.length;o++){const t=i.top+o*a,s=t+a;if(e.clientY>=t-n&&e.clientY<=t+n)return this._tableEdgeHover={type:"row",index:o,position:{x:l,y:t-r.top}},void this.requestUpdate();if(e.clientY>=s-n&&e.clientY<=s+n)return this._tableEdgeHover={type:"row",index:o+1,position:{x:l,y:s-r.top}},void this.requestUpdate()}const d=i.width/t.rows[0]?.cells.length||1;for(let o=0;o<(t.rows[0]?.cells.length||0);o++){const t=i.left+o*d,l=t+d;if(e.clientX>=t-n&&e.clientX<=t+n)return this._tableEdgeHover={type:"col",index:o,position:{x:t-r.left,y:s}},void this.requestUpdate();if(e.clientX>=l-n&&e.clientX<=l+n)return this._tableEdgeHover={type:"col",index:o+1,position:{x:l-r.left,y:s}},void this.requestUpdate()}this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}},this.requestUpdate()}_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("customStylesAttr")&&this._injectCustomStyles(),this._editor){if(e.has("content")||e.has("modelValue")&&this.useModel){const e=this.useModel?this.modelValue:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}e.has("readonly")&&this._editor.setEditable(!this.readonly)}else e.has("content")&&(this._pendingContent=this.content),e.has("modelValue")&&this.useModel&&(this._pendingContent=this.modelValue)}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}forceUpdate(){if(this.requestUpdate(),this._editor){const e=this.useModel?this.modelValue:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}}forceSync(){this.forceUpdate()}_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())}_unsetLink(){this._applyFormat(()=>this._editor?.chain().focus().unsetLink().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.uploadImage(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)}_insertHorizontalRule(){this._editor?.chain().focus().setHorizontalRule().run()}_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)&&(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(){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){this._imageToolbar={x:e.x,y:e.y,visible:!0},this._imageMoreMenuVisible=!1}_hideImageToolbar(){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}_updateImageToolbarPosition(){requestAnimationFrame(()=>{const e=this._editor;if(!e)return;const{selection:t}=e.state,{$from:i}=t;if("image"===i.node(i.depth).type.name?i.node(i.depth):null){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()})}_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 A`
|
|
1
|
+
import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/extension-blockquote";import o from"@tiptap/extension-bold";import r from"@tiptap/extension-bullet-list";import l from"@tiptap/extension-code";import s from"@tiptap/extension-document";import n from"@tiptap/extension-heading";import a from"@tiptap/extension-history";import d from"@tiptap/extension-horizontal-rule";import c from"@tiptap/extension-image";import h from"@tiptap/extension-italic";import b from"@tiptap/extension-link";import p from"@tiptap/extension-list-item";import u from"@tiptap/extension-ordered-list";import g from"@tiptap/extension-paragraph";import m from"@tiptap/extension-strike";import{Table as x}from"@tiptap/extension-table";import{TableCell as v}from"@tiptap/extension-table-cell";import{TableHeader as f}from"@tiptap/extension-table-header";import{TableRow as y}from"@tiptap/extension-table-row";import _ from"@tiptap/extension-text";import w from"@tiptap/extension-text-align";import k from"@tiptap/extension-underline";import C from"@tiptap/extension-placeholder";import{css as M,LitElement as T,html as $}from"lit";import{property as A}from"../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.mjs";import{state as S}from"../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.mjs";import{safeCustomElement as R}from"../base/define.mjs";var B=Object.defineProperty,P=Object.getOwnPropertyDescriptor,q=(e,t,i,o)=>{for(var r,l=o>1?void 0:o?P(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&&B(t,i,l),l};let I=class extends T{constructor(){super(...arguments),this.content="",this.modelValue="",this.useModelAttr="false",this.readonlyAttr="false",this.previewAttr="false",this.customStylesAttr="",this._injectedStyleEl=null,this.uploadImage=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._tableEdgeDetectionSetup=!1}_injectCustomStyles(){const e=this.shadowRoot;if(!e)return;if(this._injectedStyleEl&&(this._injectedStyleEl.remove(),this._injectedStyleEl=null),!this.customStylesAttr)return;const t=document.createElement("style");t.textContent=this.customStylesAttr,e.appendChild(t),this._injectedStyleEl=t}get useModel(){return"true"===this.useModelAttr||""===this.useModelAttr||this.hasAttribute("use-model")}set useModel(e){this.useModelAttr=String(e)}get readonly(){return"false"!==this.readonlyAttr}set readonly(e){this.readonlyAttr=String(e)}get preview(){return"false"!==this.previewAttr}set preview(e){this.previewAttr=String(e)}_initEditor(){if(this._editor)return;const M=this.shadowRoot?.querySelector(".editor-content");if(!M)return void requestAnimationFrame(()=>this._initEditor());for(;M.firstChild;)M.removeChild(M.firstChild);const T=this.useModel||this.hasAttribute("use-model"),$=this.getAttribute("model-value")??this.modelValue,A=this.content,S=T?(this._pendingContent??$)||"<p></p>":(this._pendingContent??A)||"<p></p>",R=[s,g,_,o,h,k,m,l,n.configure({levels:[1,2,3]}),r,u,p,i,d,a,c.configure({inline:!1,allowBase64:!0}),b.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),w.configure({types:["heading","paragraph"]}),x.configure({resizable:!0}),y,v,f,C.configure({placeholder:"输入 / 唤出快捷命令"}),e.create({name:"clearMarksOnEnter",addKeyboardShortcuts(){return{Enter:()=>(this.editor.chain().focus().unsetAllMarks().clearNodes().run(),!1)}}})];this._editor=new t({element:M,extensions:R,editable:!this.readonly,content:S}),this._pendingContent=null,this._editor.on("selectionUpdate",()=>{this.requestUpdate(),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.requestUpdate(),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("customStylesAttr")&&this._injectCustomStyles(),this._editor){if(e.has("content")||e.has("modelValue")&&this.useModel){const e=this.useModel?this.modelValue:this.content;e!==this._editor.getHTML()&&this._editor.commands.setContent(e||"<p></p>")}e.has("readonly")&&this._editor.setEditable(!this.readonly)}else e.has("content")&&(this._pendingContent=this.content),e.has("modelValue")&&this.useModel&&(this._pendingContent=this.modelValue)}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}forceUpdate(){if(this.requestUpdate(),this._editor){const e=this.useModel?this.modelValue: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.uploadImage(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)&&(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(){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){this._imageToolbar={x:e.x,y:e.y,visible:!0},this._imageMoreMenuVisible=!1}_hideImageToolbar(){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 $`
|
|
2
2
|
<div class="editor-wrapper ${e?"":"loading"} ${this.preview?"preview":""}">
|
|
3
|
-
${e?""
|
|
3
|
+
${e?"":$`
|
|
4
4
|
<div class="loading-placeholder">
|
|
5
5
|
<div class="loading-spinner"></div>
|
|
6
6
|
<span>编辑器加载中...</span>
|
|
@@ -14,7 +14,7 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
14
14
|
/>
|
|
15
15
|
|
|
16
16
|
<!-- Bubble Menu (悬浮操作栏) -->
|
|
17
|
-
${this.preview?""
|
|
17
|
+
${this.preview?"":$`
|
|
18
18
|
<div class="bubble-menu">
|
|
19
19
|
<!-- 文本格式 -->
|
|
20
20
|
<button
|
|
@@ -211,13 +211,13 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
211
211
|
<div class="editor-content"></div>
|
|
212
212
|
|
|
213
213
|
<!-- Table Cell Toolbar -->
|
|
214
|
-
${this._tableCellToolbar.visible&&e?.isActive("table")
|
|
214
|
+
${this._tableCellToolbar.visible&&e?.isActive("table")?$`
|
|
215
215
|
<div
|
|
216
216
|
class="table-cell-toolbar"
|
|
217
217
|
style="left: ${this._tableCellToolbar.x}px; top: ${this._tableCellToolbar.y}px;"
|
|
218
218
|
@mousedown=${e=>e.preventDefault()}
|
|
219
219
|
>
|
|
220
|
-
${0===this._tableCellToolbar.cellRow
|
|
220
|
+
${0===this._tableCellToolbar.cellRow?$`
|
|
221
221
|
<button class="table-cell-toolbar-btn" title="上方添加行" @click=${this._addTableRowAbove}>
|
|
222
222
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="4" y="8" width="16" height="8" rx="1"/><line x1="12" y1="3" x2="12" y2="7"/><line x1="10" y1="5" x2="14" y2="5"/></svg>
|
|
223
223
|
</button>
|
|
@@ -228,8 +228,8 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
228
228
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="4" y="8" width="16" height="8" rx="1"/><line x1="9" y1="10" x2="9" y2="14"/><line x1="15" y1="10" x2="15" y2="14"/></svg>
|
|
229
229
|
</button>
|
|
230
230
|
`:""}
|
|
231
|
-
${0===this._tableCellToolbar.cellCol
|
|
232
|
-
${0!==this._tableCellToolbar.cellRow
|
|
231
|
+
${0===this._tableCellToolbar.cellCol?$`
|
|
232
|
+
${0!==this._tableCellToolbar.cellRow?$`<div style="width:1px;height:20px;background:#e3e3e3;margin:0 4px;"></div>`:""}
|
|
233
233
|
<button class="table-cell-toolbar-btn" title="左侧添加列" @click=${this._addTableColumnLeft}>
|
|
234
234
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="8" y="4" width="8" height="16" rx="1"/><line x1="3" y1="12" x2="7" y2="12"/><line x1="5" y1="10" x2="5" y2="14"/></svg>
|
|
235
235
|
</button>
|
|
@@ -240,7 +240,7 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
240
240
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="8" y="4" width="8" height="16" rx="1"/><line x1="10" y1="9" x2="14" y2="9"/><line x1="10" y1="15" x2="14" y2="15"/></svg>
|
|
241
241
|
</button>
|
|
242
242
|
`:""}
|
|
243
|
-
${0===this._tableCellToolbar.cellRow&&0===this._tableCellToolbar.cellCol
|
|
243
|
+
${0===this._tableCellToolbar.cellRow&&0===this._tableCellToolbar.cellCol?$`
|
|
244
244
|
<div style="width:1px;height:20px;background:#e3e3e3;margin:0 4px;"></div>
|
|
245
245
|
<button class="table-cell-toolbar-btn danger" title="删除表格" @click=${this._deleteTable}>
|
|
246
246
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><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>
|
|
@@ -250,7 +250,7 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
250
250
|
`:""}
|
|
251
251
|
|
|
252
252
|
<!-- Image Toolbar -->
|
|
253
|
-
${this._imageToolbar.visible
|
|
253
|
+
${this._imageToolbar.visible?$`
|
|
254
254
|
<div
|
|
255
255
|
class="image-toolbar"
|
|
256
256
|
style="left: ${this._imageToolbar.x}px; top: ${this._imageToolbar.y}px;"
|
|
@@ -267,7 +267,7 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
267
267
|
<button class="image-toolbar-btn" title="更多" @click=${this._toggleImageMoreMenu}>
|
|
268
268
|
<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>
|
|
269
269
|
</button>
|
|
270
|
-
${this._imageMoreMenuVisible
|
|
270
|
+
${this._imageMoreMenuVisible?$`
|
|
271
271
|
<div class="image-more-menu">
|
|
272
272
|
<button class="image-more-menu-item" @click=${this._setImageAlignLeft}>
|
|
273
273
|
<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>
|
|
@@ -287,14 +287,14 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
287
287
|
</div>
|
|
288
288
|
`:""}
|
|
289
289
|
</div>
|
|
290
|
-
`}_renderTableGrid(){const e=[];for(let t=0;t<100;t++){const i=Math.floor(t/10)+1,o=t%10+1,r=this._hoverRow>0&&i<=this._hoverRow&&o<=this._hoverCol;e.push(
|
|
290
|
+
`}_renderTableGrid(){const e=[];for(let t=0;t<100;t++){const i=Math.floor(t/10)+1,o=t%10+1,r=this._hoverRow>0&&i<=this._hoverRow&&o<=this._hoverCol;e.push($`
|
|
291
291
|
<div
|
|
292
292
|
class="table-cell ${r?"selected":""}"
|
|
293
293
|
@click=${()=>{this._insertTableByClick(i,o),this._tableDropdownOpen=!1}}
|
|
294
294
|
@mouseenter=${()=>{this._hoverRow=i,this._hoverCol=o}}
|
|
295
295
|
@mouseleave=${()=>{this._hoverRow=0,this._hoverCol=0}}
|
|
296
296
|
></div>
|
|
297
|
-
`)}return e}};function
|
|
297
|
+
`)}return e}};function E(){}I.styles=M`
|
|
298
298
|
:host {
|
|
299
299
|
display: block;
|
|
300
300
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
|
|
@@ -319,12 +319,6 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
319
319
|
background: transparent;
|
|
320
320
|
}
|
|
321
321
|
|
|
322
|
-
.editor-wrapper.is-edit {
|
|
323
|
-
border: 1px solid #dcdfe6;
|
|
324
|
-
border-radius: 3px;
|
|
325
|
-
background: #fff;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
322
|
.editor-wrapper.preview .editor-content {
|
|
329
323
|
padding: 8px 12px;
|
|
330
324
|
min-height: unset;
|
|
@@ -594,49 +588,7 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
594
588
|
color: #f56c6c;
|
|
595
589
|
}
|
|
596
590
|
|
|
597
|
-
/*
|
|
598
|
-
.table-edge-add {
|
|
599
|
-
position: absolute;
|
|
600
|
-
z-index: 40;
|
|
601
|
-
display: none;
|
|
602
|
-
width: 20px;
|
|
603
|
-
height: 20px;
|
|
604
|
-
align-items: center;
|
|
605
|
-
justify-content: center;
|
|
606
|
-
background: #fff;
|
|
607
|
-
border: 1px solid #e3e3e3;
|
|
608
|
-
border-radius: 4px;
|
|
609
|
-
cursor: pointer;
|
|
610
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
611
|
-
color: #606266;
|
|
612
|
-
transition: all 0.15s;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.table-edge-add:hover {
|
|
616
|
-
background: #ecf5ff;
|
|
617
|
-
border-color: var(--qxs-color-primary, #3D61E3);
|
|
618
|
-
color: var(--qxs-color-primary, #3D61E3);
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
.table-edge-add.visible {
|
|
622
|
-
display: flex;
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
.table-edge-add-row {
|
|
626
|
-
width: 100%;
|
|
627
|
-
height: 8px;
|
|
628
|
-
left: 0;
|
|
629
|
-
border-radius: 0 0 4px 4px;
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
.table-edge-add-col {
|
|
633
|
-
height: 100%;
|
|
634
|
-
width: 8px;
|
|
635
|
-
top: 0;
|
|
636
|
-
border-radius: 0 4px 4px 0;
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
/* Bubble Menu - 企业级风格 */
|
|
591
|
+
/* Bubble Menu */
|
|
640
592
|
.bubble-menu {
|
|
641
593
|
position: absolute;
|
|
642
594
|
display: flex;
|
|
@@ -661,12 +613,6 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
661
613
|
transform: translateY(0);
|
|
662
614
|
}
|
|
663
615
|
|
|
664
|
-
.bubble-menu.is-visible {
|
|
665
|
-
opacity: 1;
|
|
666
|
-
visibility: visible;
|
|
667
|
-
transform: translateY(0);
|
|
668
|
-
}
|
|
669
|
-
|
|
670
616
|
.bubble-btn {
|
|
671
617
|
display: flex;
|
|
672
618
|
align-items: center;
|
|
@@ -942,5 +888,5 @@ import{Extension as e,Editor as t}from"@tiptap/core";import i from"@tiptap/exten
|
|
|
942
888
|
outline: 2px solid var(--qxs-color-primary, #3D61E3);
|
|
943
889
|
outline-offset: 2px;
|
|
944
890
|
}
|
|
945
|
-
`,
|
|
891
|
+
`,q([A({type:String,attribute:"content"})],I.prototype,"content",2),q([A({type:String,attribute:"model-value"})],I.prototype,"modelValue",2),q([A({type:String,attribute:"use-model"})],I.prototype,"useModelAttr",2),q([A({type:String,attribute:"readonly"})],I.prototype,"readonlyAttr",2),q([A({type:String,attribute:"preview"})],I.prototype,"previewAttr",2),q([A({type:String,attribute:"custom-styles"})],I.prototype,"customStylesAttr",2),q([A({type:Object,attribute:"upload-image"})],I.prototype,"uploadImage",2),q([S()],I.prototype,"_editor",2),q([S()],I.prototype,"_pendingContent",2),q([S()],I.prototype,"_hoverRow",2),q([S()],I.prototype,"_hoverCol",2),q([S()],I.prototype,"_tableDropdownOpen",2),q([S()],I.prototype,"_tableCellToolbar",2),q([S()],I.prototype,"_imageToolbar",2),q([S()],I.prototype,"_imageMoreMenuVisible",2),q([S()],I.prototype,"_hasSlashCommand",2),I=q([R("qxs-blocksuite-editor")],I);export{I as QxsBlocksuiteEditor,E as register};
|
|
946
892
|
//# sourceMappingURL=blocksuite-editor.mjs.map
|