@qxs-bns/components-wc 0.0.2 → 0.0.4
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 +26 -20
- package/es/editor/blocksuite-editor.mjs.map +1 -1
- package/es/index.mjs +1 -1
- package/es/subject/blank-fill.mjs +6 -5
- package/es/subject/blank-fill.mjs.map +1 -1
- package/es/subject/list.mjs +19 -10
- package/es/subject/list.mjs.map +1 -1
- package/es/subject/rich-text.mjs +4 -4
- package/es/subject/rich-text.mjs.map +1 -1
- package/es/subject/scale.mjs +5 -4
- package/es/subject/scale.mjs.map +1 -1
- package/es/subject/single.mjs +8 -7
- package/es/subject/single.mjs.map +1 -1
- package/es/subject/text-fill.mjs +4 -3
- package/es/subject/text-fill.mjs.map +1 -1
- package/lib/editor/blocksuite-editor.cjs +25 -19
- package/lib/editor/blocksuite-editor.cjs.map +1 -1
- package/lib/index.cjs +1 -1
- package/lib/subject/blank-fill.cjs +6 -5
- package/lib/subject/blank-fill.cjs.map +1 -1
- package/lib/subject/list.cjs +18 -9
- package/lib/subject/list.cjs.map +1 -1
- package/lib/subject/rich-text.cjs +3 -3
- package/lib/subject/rich-text.cjs.map +1 -1
- package/lib/subject/scale.cjs +6 -5
- package/lib/subject/scale.cjs.map +1 -1
- package/lib/subject/single.cjs +7 -6
- package/lib/subject/single.cjs.map +1 -1
- package/lib/subject/text-fill.cjs +35 -34
- package/lib/subject/text-fill.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote";import i from"@tiptap/extension-bold";import o from"@tiptap/extension-bullet-list";import r from"@tiptap/extension-code";import l from"@tiptap/extension-document";import s from"@tiptap/extension-heading";import n from"@tiptap/extension-history";import a from"@tiptap/extension-horizontal-rule";import d from"@tiptap/extension-image";import c from"@tiptap/extension-italic";import b from"@tiptap/extension-link";import p from"@tiptap/extension-list-item";import h from"@tiptap/extension-ordered-list";import g from"@tiptap/extension-paragraph";import u from"@tiptap/extension-strike";import{Table as x}from"@tiptap/extension-table";import{TableCell as m}from"@tiptap/extension-table-cell";import{TableHeader as v}from"@tiptap/extension-table-header";import{TableRow as f}from"@tiptap/extension-table-row";import _ from"@tiptap/extension-text";import y from"@tiptap/extension-text-align";import w from"@tiptap/extension-underline";import k from"../node_modules/.pnpm/@tiptap_extension-placeholder@3.20.5_@tiptap_extensions@3.20.5_@tiptap_core@3.20.5_@tiptap_pm@3.20.5__@tiptap_pm@3.20.5_/node_modules/@tiptap/extension-placeholder/dist/index.mjs";import{css as C,LitElement as T,html as M}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 A}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,S=(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.readonly=!1,this.preview=!1,this._editor=null,this._pendingContent=null,this._tableRows=3,this._tableCols=3,this._hoverRow=0,this._hoverCol=0,this._tableDropdownOpen=!1,this._isLoading=!0,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}_initEditor(){if(this._editor)return;const C=this.shadowRoot?.querySelector(".editor-content");if(!C)return void requestAnimationFrame(()=>this._initEditor());this._isLoading=!1;const T=[l,g,_,i,c,w,u,r,s.configure({levels:[1,2,3]}),o,h,p,t,a,n,d.configure({inline:!1,allowBase64:!0}),b.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),y.configure({types:["heading","paragraph"]}),x.configure({resizable:!0}),f,m,v,k.configure({placeholder:"输入 / 唤出快捷命令"})];this._editor=new e({element:C,extensions:T,content:(this._pendingContent??this.content)||"<p></p>",editable:!this.readonly}),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()})}_setupTableEdgeDetection(){const e=this.shadowRoot?.querySelector(".editor-content");e&&!this._tableEdgeDetectionSetup&&(this._tableEdgeDetectionSetup=!0,e.addEventListener("mousemove",e=>{this._handleTableEdgeMouseMove(e)}),e.addEventListener("mouseleave",()=>{this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}}}),e.addEventListener("click",e=>{const t=e.target;if("IMG"===t.tagName){const e=this._editor?.view.posAtDOM(t,0);void 0!==e&&this._editor?.chain().focus().setNodeSelection(e).run()}}))}_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._initEditor()}updated(e){if(this._editor)return e.has("content")&&this._editor.commands.setContent(this.content||"<p></p>"),void(e.has("readonly")&&this._editor.setEditable(!this.readonly));e.has("content")&&(this._pendingContent=this.content);const t=this.shadowRoot?.querySelector(".editor-content");t&&!this._editor&&this._initEditor()}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}_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()}_handleImageUpload(e){const t=e.target,i=t.files?.[0];if(i){const e=new FileReader;e.onload=e=>{const t=e.target?.result;this._editor?.chain().focus().setImage({src:t}).run()},e.readAsDataURL(i)}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,b=d.top-s.top-40;c+n.width>s.width&&(c=s.width-n.width-8),c<0&&(c=8),b<0&&(b=d.bottom-s.top+8),e.style.left=`${c}px`,e.style.top=`${b}px`,e.style.opacity="1",e.style.visibility="visible"})}render(){const e=this._editor;return M`
|
|
1
|
+
import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote";import i from"@tiptap/extension-bold";import o from"@tiptap/extension-bullet-list";import r from"@tiptap/extension-code";import l from"@tiptap/extension-document";import s from"@tiptap/extension-heading";import n from"@tiptap/extension-history";import a from"@tiptap/extension-horizontal-rule";import d from"@tiptap/extension-image";import c from"@tiptap/extension-italic";import p from"@tiptap/extension-link";import b from"@tiptap/extension-list-item";import h from"@tiptap/extension-ordered-list";import g from"@tiptap/extension-paragraph";import u from"@tiptap/extension-strike";import{Table as x}from"@tiptap/extension-table";import{TableCell as m}from"@tiptap/extension-table-cell";import{TableHeader as v}from"@tiptap/extension-table-header";import{TableRow as f}from"@tiptap/extension-table-row";import y from"@tiptap/extension-text";import _ from"@tiptap/extension-text-align";import w from"@tiptap/extension-underline";import k from"../node_modules/.pnpm/@tiptap_extension-placeholder@3.20.5_@tiptap_extensions@3.20.5_@tiptap_core@3.20.5_@tiptap_pm@3.20.5__@tiptap_pm@3.20.5_/node_modules/@tiptap/extension-placeholder/dist/index.mjs";import{css as C,LitElement as T,html as M}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 A}from"../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.mjs";import{safeCustomElement as B}from"../base/define.mjs";var R=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&&R(t,i,l),l};let E=class extends T{constructor(){super(...arguments),this.content="",this.readonly=!1,this.preview=!1,this.isEdit=!1,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._isLoading=!0,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}_initEditor(){if(this._editor)return;const C=this.shadowRoot?.querySelector(".editor-content");if(!C)return void requestAnimationFrame(()=>this._initEditor());this._isLoading=!1;const T=[l,g,y,i,c,w,u,r,s.configure({levels:[1,2,3]}),o,h,b,t,a,n,d.configure({inline:!1,allowBase64:!0}),p.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),_.configure({types:["heading","paragraph"]}),x.configure({resizable:!0}),f,m,v,k.configure({placeholder:"输入 / 唤出快捷命令"})];this._editor=new e({element:C,extensions:T,content:(this._pendingContent??this.content)||"<p></p>",editable:!this.readonly}),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()})}_setupTableEdgeDetection(){const e=this.shadowRoot?.querySelector(".editor-content");e&&!this._tableEdgeDetectionSetup&&(this._tableEdgeDetectionSetup=!0,e.addEventListener("mousemove",e=>{this._handleTableEdgeMouseMove(e)}),e.addEventListener("mouseleave",()=>{this._tableEdgeHover={type:null,index:0,position:{x:0,y:0}}}),e.addEventListener("click",e=>{const t=e.target;if("IMG"===t.tagName){const e=this._editor?.view.posAtDOM(t,0);void 0!==e&&this._editor?.chain().focus().setNodeSelection(e).run()}}))}_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._initEditor()}updated(e){if(this._editor)return e.has("content")&&this._editor.commands.setContent(this.content||"<p></p>"),void(e.has("readonly")&&this._editor.setEditable(!this.readonly));e.has("content")&&(this._pendingContent=this.content);const t=this.shadowRoot?.querySelector(".editor-content");t&&!this._editor&&this._initEditor()}disconnectedCallback(){super.disconnectedCallback(),this._editor?.destroy(),this._editor=null}getContent(){return this._editor?.getHTML()??""}_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,p=d.top-s.top-40;c+n.width>s.width&&(c=s.width-n.width-8),c<0&&(c=8),p<0&&(p=d.bottom-s.top+8),e.style.left=`${c}px`,e.style.top=`${p}px`,e.style.opacity="1",e.style.visibility="visible"})}render(){const e=this._editor;return M`
|
|
2
2
|
<div class="editor-wrapper ${this._isLoading?"loading":""} ${this.preview?"preview":""}">
|
|
3
3
|
${this._isLoading?M`
|
|
4
4
|
<div class="loading-placeholder">
|
|
@@ -294,7 +294,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
294
294
|
@mouseenter=${()=>{this._hoverRow=i,this._hoverCol=o}}
|
|
295
295
|
@mouseleave=${()=>{this._hoverRow=0,this._hoverCol=0}}
|
|
296
296
|
></div>
|
|
297
|
-
`)}return e}};
|
|
297
|
+
`)}return e}};E.styles=C`
|
|
298
298
|
:host {
|
|
299
299
|
display: block;
|
|
300
300
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
|
|
@@ -303,14 +303,14 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
303
303
|
.editor-wrapper {
|
|
304
304
|
border: 1px solid #e3e3e3;
|
|
305
305
|
border-radius: 12px;
|
|
306
|
-
background:
|
|
306
|
+
background: #fff;
|
|
307
307
|
overflow: visible;
|
|
308
308
|
position: relative;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
.editor-wrapper:focus-within {
|
|
312
|
-
border-color: #
|
|
313
|
-
box-shadow: 0 0 0 2px rgba(
|
|
312
|
+
border-color: var(--qxs-color-primary, #3D61E3);
|
|
313
|
+
box-shadow: 0 0 0 2px rgba(61, 97, 227, 0.1);
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
.editor-wrapper.preview {
|
|
@@ -319,14 +319,20 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
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
|
+
|
|
322
328
|
.editor-wrapper.preview .editor-content {
|
|
323
329
|
padding: 8px 12px;
|
|
324
330
|
min-height: unset;
|
|
325
331
|
}
|
|
326
332
|
|
|
327
333
|
.editor-content {
|
|
328
|
-
padding: 16px
|
|
329
|
-
min-height:
|
|
334
|
+
padding: 12px 16px;
|
|
335
|
+
min-height: 80px;
|
|
330
336
|
cursor: text;
|
|
331
337
|
}
|
|
332
338
|
|
|
@@ -372,7 +378,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
372
378
|
width: 24px;
|
|
373
379
|
height: 24px;
|
|
374
380
|
border: 2px solid #e3e3e3;
|
|
375
|
-
border-top-color: #
|
|
381
|
+
border-top-color: var(--qxs-color-primary, #3D61E3);
|
|
376
382
|
border-radius: 50%;
|
|
377
383
|
animation: spin 0.8s linear infinite;
|
|
378
384
|
}
|
|
@@ -506,13 +512,13 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
506
512
|
}
|
|
507
513
|
|
|
508
514
|
.ProseMirror a {
|
|
509
|
-
color: #
|
|
515
|
+
color: var(--qxs-color-primary, #3D61E3);
|
|
510
516
|
text-decoration: underline;
|
|
511
517
|
cursor: pointer;
|
|
512
518
|
}
|
|
513
519
|
|
|
514
520
|
.ProseMirror img.ProseMirror-selectednode {
|
|
515
|
-
outline: 2px solid #
|
|
521
|
+
outline: 2px solid var(--qxs-color-primary, #3D61E3);
|
|
516
522
|
}
|
|
517
523
|
|
|
518
524
|
/* Table styles */
|
|
@@ -571,7 +577,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
571
577
|
|
|
572
578
|
.table-cell-toolbar-btn:hover {
|
|
573
579
|
background: #ecf5ff;
|
|
574
|
-
color: #
|
|
580
|
+
color: var(--qxs-color-primary, #3D61E3);
|
|
575
581
|
}
|
|
576
582
|
|
|
577
583
|
.table-cell-toolbar-btn.danger:hover {
|
|
@@ -599,8 +605,8 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
599
605
|
|
|
600
606
|
.table-edge-add:hover {
|
|
601
607
|
background: #ecf5ff;
|
|
602
|
-
border-color: #
|
|
603
|
-
color: #
|
|
608
|
+
border-color: var(--qxs-color-primary, #3D61E3);
|
|
609
|
+
color: var(--qxs-color-primary, #3D61E3);
|
|
604
610
|
}
|
|
605
611
|
|
|
606
612
|
.table-edge-add.visible {
|
|
@@ -672,7 +678,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
672
678
|
}
|
|
673
679
|
|
|
674
680
|
.bubble-btn.is-active {
|
|
675
|
-
background: #
|
|
681
|
+
background: var(--qxs-color-primary, #3D61E3);
|
|
676
682
|
color: #fff;
|
|
677
683
|
}
|
|
678
684
|
|
|
@@ -774,7 +780,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
774
780
|
}
|
|
775
781
|
|
|
776
782
|
.bubble-dropdown-item.is-active {
|
|
777
|
-
background: #
|
|
783
|
+
background: var(--qxs-color-primary, #3D61E3);
|
|
778
784
|
color: #fff;
|
|
779
785
|
}
|
|
780
786
|
|
|
@@ -809,7 +815,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
809
815
|
|
|
810
816
|
.table-grid-preview .table-cell:hover {
|
|
811
817
|
background: rgba(30, 150, 252, 0.3);
|
|
812
|
-
border-color: #
|
|
818
|
+
border-color: var(--qxs-color-primary, #3D61E3);
|
|
813
819
|
}
|
|
814
820
|
|
|
815
821
|
.table-grid-preview .table-cell.selected {
|
|
@@ -855,7 +861,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
855
861
|
|
|
856
862
|
.image-toolbar-btn:hover {
|
|
857
863
|
background: #f5f5f5;
|
|
858
|
-
color: #
|
|
864
|
+
color: var(--qxs-color-primary, #3D61E3);
|
|
859
865
|
}
|
|
860
866
|
|
|
861
867
|
.image-toolbar-btn.danger:hover {
|
|
@@ -911,7 +917,7 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
911
917
|
|
|
912
918
|
.image-more-menu-item:hover {
|
|
913
919
|
background: #f5f5f5;
|
|
914
|
-
color: #
|
|
920
|
+
color: var(--qxs-color-primary, #3D61E3);
|
|
915
921
|
}
|
|
916
922
|
|
|
917
923
|
.image-more-menu-item svg {
|
|
@@ -924,8 +930,8 @@ import{Editor as e}from"@tiptap/core";import t from"@tiptap/extension-blockquote
|
|
|
924
930
|
|
|
925
931
|
/* Selected Image */
|
|
926
932
|
.ProseMirror img.selected {
|
|
927
|
-
outline: 2px solid #
|
|
933
|
+
outline: 2px solid var(--qxs-color-primary, #3D61E3);
|
|
928
934
|
outline-offset: 2px;
|
|
929
935
|
}
|
|
930
|
-
`,
|
|
936
|
+
`,q([$({type:String,attribute:"content"})],E.prototype,"content",2),q([$({type:Boolean,attribute:"readonly"})],E.prototype,"readonly",2),q([$({type:Boolean,attribute:"preview"})],E.prototype,"preview",2),q([$({type:Boolean,attribute:"is-edit"})],E.prototype,"isEdit",2),q([$({type:Object,attribute:"upload-image"})],E.prototype,"uploadImage",2),q([A()],E.prototype,"_pendingContent",2),q([A()],E.prototype,"_hoverRow",2),q([A()],E.prototype,"_hoverCol",2),q([A()],E.prototype,"_tableDropdownOpen",2),q([A()],E.prototype,"_isLoading",2),q([A()],E.prototype,"_tableCellToolbar",2),q([A()],E.prototype,"_tableEdgeHover",2),q([A()],E.prototype,"_imageToolbar",2),q([A()],E.prototype,"_imageMoreMenuVisible",2),q([A()],E.prototype,"_hasSlashCommand",2),E=q([B("qxs-blocksuite-editor")],E);export{E as QxsBlocksuiteEditor};
|
|
931
937
|
//# sourceMappingURL=blocksuite-editor.mjs.map
|