@qxs-bns/components-wc 0.0.27 → 0.0.28
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 +145 -15
- package/es/editor/blocksuite-editor.mjs.map +1 -1
- package/es/subject/blank-fill.mjs +6 -3
- package/es/subject/blank-fill.mjs.map +1 -1
- package/es/subject/scale.mjs +11 -7
- package/es/subject/scale.mjs.map +1 -1
- package/es/subject/single.mjs +8 -5
- package/es/subject/single.mjs.map +1 -1
- package/es/subject/text-fill.mjs +33 -30
- package/es/subject/text-fill.mjs.map +1 -1
- package/lib/editor/blocksuite-editor.cjs +132 -2
- package/lib/editor/blocksuite-editor.cjs.map +1 -1
- package/lib/subject/blank-fill.cjs +3 -0
- package/lib/subject/blank-fill.cjs.map +1 -1
- package/lib/subject/scale.cjs +7 -3
- package/lib/subject/scale.cjs.map +1 -1
- package/lib/subject/single.cjs +3 -0
- package/lib/subject/single.cjs.map +1 -1
- package/lib/subject/text-fill.cjs +3 -0
- package/lib/subject/text-fill.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o from"@tiptap/extension-blockquote";import r from"@tiptap/extension-bold";import s from"@tiptap/extension-bullet-list";import l from"@tiptap/extension-code";import n from"@tiptap/extension-document";import a from"@tiptap/extension-heading";import d from"@tiptap/extension-history";import c from"@tiptap/extension-horizontal-rule";import h from"@tiptap/extension-image";import b from"@tiptap/extension-italic";import p from"@tiptap/extension-link";import u from"@tiptap/extension-list-item";import g from"@tiptap/extension-ordered-list";import m from"@tiptap/extension-paragraph";import x from"@tiptap/extension-placeholder";import v from"@tiptap/extension-strike";import{Table as y}from"@tiptap/extension-table";import{TableCell as _}from"@tiptap/extension-table-cell";import{TableHeader as f}from"@tiptap/extension-table-header";import{TableRow as w}from"@tiptap/extension-table-row";import k from"@tiptap/extension-text";import C from"@tiptap/extension-text-align";import $ from"@tiptap/extension-underline";import{css as M,LitElement as T,html as A}from"lit";import{property as I,state as S}from"lit/decorators.js";import{safeCustomElement as B}from"../base/define.mjs";var L=Object.defineProperty,R=Object.getOwnPropertyDescriptor,P=(e,t,i,o)=>{for(var r,s=o>1?void 0:o?R(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&&L(t,i,s),s};const V="输入内容",E="输入 / 唤出快捷命令",H=e.create({name:"taskList",group:"block list",content:"taskItem+",defining:!0,parseHTML:()=>[{tag:'ul[data-type="taskList"]'}],renderHTML(e){let{HTMLAttributes:i}=e;return["ul",t(i,{"data-type":"taskList"}),0]},addCommands(){return{toggleTaskList:()=>e=>{let{commands:t}=e;return t.toggleList(this.name,"taskItem")}}}}),z=e.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(e){let{HTMLAttributes:i}=e;const o=Boolean(i.checked);return["li",t(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)}}}),q=h.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(e){let{HTMLAttributes:i}=e;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",t(this.options.HTMLAttributes,i,{style:s})]}});let F=class extends T{constructor(){super(...arguments),this.content="",this["model-value"]="",this.placeholder=V,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!==V&&this.placeholder!==E?this.placeholder:"header"===this._toolbarModeValue?V:E}_initEditor(){if(this._editor)return;const e=this.shadowRoot?.querySelector(".editor-content");if(!e)return void requestAnimationFrame(()=>this._initEditor());for(;e.firstChild;)e.removeChild(e.firstChild);const t=this._useModelValue,h=this.getAttribute("model-value")??this["model-value"],M=this.content,T=t?(this._pendingContent??h)||"<p></p>":(this._pendingContent??M)||"<p></p>",A=[n,m,k,r,b,$,v,l,a.configure({levels:[1,2,3]}),s,g,H,z,u,o,c,d,q.configure({inline:!1,allowBase64:!0}),p.configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),C.configure({types:["heading","paragraph"]}),y.configure({resizable:!0}),w,_,f,x.configure({placeholder:this._resolvedPlaceholder})];this._editor=new i({element:e,extensions:A,editable:this._isEditable,content:T}),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?A`
|
|
1
|
+
import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o from"@tiptap/extension-blockquote";import r from"@tiptap/extension-bold";import l from"@tiptap/extension-bullet-list";import s from"@tiptap/extension-code";import n from"@tiptap/extension-document";import a from"@tiptap/extension-heading";import d from"@tiptap/extension-history";import c from"@tiptap/extension-horizontal-rule";import h from"@tiptap/extension-image";import b from"@tiptap/extension-italic";import p from"@tiptap/extension-link";import u from"@tiptap/extension-list-item";import g from"@tiptap/extension-ordered-list";import m from"@tiptap/extension-paragraph";import x from"@tiptap/extension-placeholder";import v from"@tiptap/extension-strike";import{Table as _}from"@tiptap/extension-table";import{TableCell as y}from"@tiptap/extension-table-cell";import{TableHeader as f}from"@tiptap/extension-table-header";import{TableRow as k}from"@tiptap/extension-table-row";import w from"@tiptap/extension-text";import C from"@tiptap/extension-text-align";import T from"@tiptap/extension-underline";import{css as $,LitElement as M,html as L}from"lit";import{property as I,state as A}from"lit/decorators.js";import{safeCustomElement as S}from"../base/define.mjs";var B=Object.defineProperty,R=Object.getOwnPropertyDescriptor,E=(e,t,i,o)=>{for(var r,l=o>1?void 0:o?R(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};const P="输入内容",z="输入 / 唤出快捷命令",q=e.create({name:"taskList",group:"block list",content:"taskItem+",defining:!0,parseHTML:()=>[{tag:'ul[data-type="taskList"]'}],renderHTML(e){let{HTMLAttributes:i}=e;return["ul",t(i,{"data-type":"taskList"}),0]},addCommands(){return{toggleTaskList:()=>e=>{let{commands:t}=e;return t.toggleList(this.name,"taskItem")}}}}),V=e.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(e){let{HTMLAttributes:i}=e;const o=Boolean(i.checked);return["li",t(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)}}}),H=h.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(e){let{HTMLAttributes:i}=e;const o=Number(i.width),r=["max-width:100%","height:auto",Number.isFinite(o)&&o>0?`width:${o}px`:"",i.style||""].filter(Boolean).join(";");return["img",t(this.options.HTMLAttributes,i,{style:r})]}});let F=class extends M{constructor(){super(...arguments),this.content="",this["model-value"]="",this.placeholder=P,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._linkEditor={x:0,y:0,visible:!1,url:"",label:""},this._isEditorFocused=!1,this._selectedImage=null,this._hasSlashCommand=!1,this._slashCommandRange=null,this._isUpdating=!1,this._pendingImageInsertPos=null,this._linkSelection=null,this._preserveFocusOnInternalClick=!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}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!==P&&this.placeholder!==z?this.placeholder:"header"===this._toolbarModeValue?P:z}_initEditor(){if(this._editor)return;const e=this.shadowRoot?.querySelector(".editor-content");if(!e)return void requestAnimationFrame(()=>this._initEditor());for(;e.firstChild;)e.removeChild(e.firstChild);const t=this._useModelValue,h=this.getAttribute("model-value")??this["model-value"],$=this.content,M=t?(this._pendingContent??h)||"<p></p>":(this._pendingContent??$)||"<p></p>",L=[n,m,w,r,b,T,v,s,a.configure({levels:[1,2,3]}),l,g,q,V,u,o,c,d,H.configure({inline:!1,allowBase64:!0}),p.extend({inclusive:!1}).configure({openOnClick:!1,HTMLAttributes:{rel:"noopener noreferrer"}}),C.configure({types:["heading","paragraph"]}),_.configure({resizable:!0}),k,y,f,x.configure({placeholder:this._resolvedPlaceholder})];this._editor=new i({element:e,extensions:L,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),l=Math.max(0,r-2),s=Math.min(i.state.doc.content.size,r+2);let n=null;if(i.state.doc.nodesBetween(l,s,(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, .link-editor")||this._isEditable&&this._editor?.chain().focus().run()};e.addEventListener("click",i),t?.addEventListener("click",i)}_handleWrapperFocusIn(){this._preserveFocusOnInternalClick=!1,this._isEditorFocused=!0}_handleWrapperMouseDown(e){const t=e.target;this._isEditable&&t instanceof Element&&!t.closest(".editor-header, .bubble-menu, .table-cell-toolbar, .image-toolbar, .link-editor")&&(this._preserveFocusOnInternalClick=!0,requestAnimationFrame(()=>{this._preserveFocusOnInternalClick=!1}))}_handleWrapperFocusOut(e){const t=e.relatedTarget,i=this.shadowRoot?.querySelector(".editor-wrapper");this._preserveFocusOnInternalClick||t&&i?.contains(t)||(this._isEditorFocused=!1,this._tableDropdownOpen=!1,this._closeLinkEditor())}_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 l=o.view.coordsAtPos(e.pos),s=l.left-r.left+(l.right-l.left)/2,n=l.top-r.top-40;this._showImageToolbar({x:s,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()}_getSlashCommandContext(){const e=this._editor,t=this._slashCommandRange;if(!e||!t)return null;return{lineFrom:e.state.doc.resolve(t.from).start(),lineTo:t.from}}_applySlashLineMark(e,t){const i=this._editor,o=this._getSlashCommandContext();return!(!i||!o)&&(this._clearSlashCommandText(),o.lineFrom<o.lineTo&&e(i.chain().focus().setTextSelection({from:o.lineFrom,to:o.lineTo})).run(),t(i.chain().focus().setTextSelection({from:o.lineTo,to:o.lineTo})).run(),!0)}_applyToolbarLineMark(e,t){const i=this._editor;if(!i)return!1;const{selection:o}=i.state,r=o.empty?(()=>{const e=i.state.doc.resolve(o.from);return{from:e.start(),to:e.end()}})():{from:o.from,to:o.to};return!(r.from>=r.to)&&(e(i.chain().focus().setTextSelection(r)).run(),t(i.chain().focus().setTextSelection({from:r.to,to:r.to})).run(),!0)}_applySlashLineBlock(e){const t=this._editor,i=this._getSlashCommandContext();return!(!t||!i)&&(this._clearSlashCommandText(),e(t.chain().focus().setTextSelection({from:i.lineFrom,to:i.lineTo})).run(),!0)}_toggleBold(){this._applySlashLineMark(e=>e.setBold(),e=>e.unsetBold())||this._applyToolbarLineMark(e=>e.toggleBold(),e=>e.unsetBold())}_toggleItalic(){this._applySlashLineMark(e=>e.setItalic(),e=>e.unsetItalic())||this._applyToolbarLineMark(e=>e.toggleItalic(),e=>e.unsetItalic())}_toggleUnderline(){this._applySlashLineMark(e=>e.setUnderline(),e=>e.unsetUnderline())||this._applyToolbarLineMark(e=>e.toggleUnderline(),e=>e.unsetUnderline())}_toggleStrike(){this._applySlashLineMark(e=>e.setStrike(),e=>e.unsetStrike())||this._applyToolbarLineMark(e=>e.toggleStrike(),e=>e.unsetStrike())}_toggleCode(){this._applySlashLineMark(e=>e.setCode(),e=>e.unsetCode())||this._applyToolbarLineMark(e=>e.toggleCode(),e=>e.unsetCode())}_setHeading(e){this._applySlashLineBlock(t=>t.setHeading({level:e}))||this._applyFormat(()=>this._editor?.chain().focus().toggleHeading({level:e}).run())}_setParagraph(){this._applySlashLineBlock(e=>e.setParagraph())||this._applyFormat(()=>this._editor?.chain().focus().setParagraph().run())}_toggleBulletList(){this._applySlashLineBlock(e=>e.toggleBulletList())||this._applyFormat(()=>this._editor?.chain().focus().toggleBulletList().run())}_toggleOrderedList(){this._applySlashLineBlock(e=>e.toggleOrderedList())||this._applyFormat(()=>this._editor?.chain().focus().toggleOrderedList().run())}_toggleTaskList(){this._applySlashLineBlock(e=>e.toggleTaskList())||this._applyFormat(()=>this._editor?.chain().focus().toggleTaskList().run())}_toggleBlockquote(){this._applySlashLineBlock(e=>e.toggleBlockquote())||this._applyFormat(()=>this._editor?.chain().focus().toggleBlockquote().run())}_setTextAlign(e){this._applySlashLineBlock(t=>t.setTextAlign(e))||this._applyFormat(()=>this._editor?.chain().focus().setTextAlign(e).run())}_normalizeLinkUrl(e){const t=e.trim();return t?/^(https?:\/\/|mailto:|tel:|#|\/)/i.test(t)?t:`https://${t}`:""}_getLinkLabelFromRange(e){const t=this._editor;return!t||!e||e.from>=e.to?"":t.state.doc.textBetween(e.from,e.to,"")}_getLinkTargetRange(){const e=this._editor;if(!e)return null;const{selection:t}=e.state;if(!t.empty)return{from:t.from,to:t.to};if(e.isActive("link"))return e.chain().focus().extendMarkRange("link").run(),{from:e.state.selection.from,to:e.state.selection.to};const i=e.state.doc.resolve(t.from);return{from:i.start(),to:i.end()}}_setLink(e){const t=this._editor,i=this.shadowRoot?.querySelector(".editor-wrapper"),o=e.currentTarget instanceof HTMLElement?e.currentTarget:null;if(!t||!i||!o)return;const r=this._getLinkTargetRange();this._linkSelection=r;const l=i.getBoundingClientRect(),s=o.getBoundingClientRect(),n=Math.max(12,l.width-332),a=Math.min(Math.max(12,s.left-l.left),n),d=s.bottom-l.top+8,c=String(t.getAttributes("link").href||""),h=this._getLinkLabelFromRange(r);this._linkEditor={x:a,y:d,visible:!0,url:c,label:h},this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector('.link-editor__input[data-field="url"]');e?.focus(),e?.select()})}_closeLinkEditor(){this._linkEditor={...this._linkEditor,visible:!1}}_handleLinkEditorInput(e){const t=e.target,i="label"===t.dataset.field?"label":"url";this._linkEditor={...this._linkEditor,[i]:t.value}}_applyLink(){const e=this._editor,t=this._normalizeLinkUrl(this._linkEditor.url),i=this._linkEditor.label.trim()||t;if(!e||!t)return;this._clearSlashCommandText();const o=this._linkSelection??this._getLinkTargetRange()??e.state.selection,r=o.from+i.length;e.chain().focus().insertContentAt({from:o.from,to:o.to},{type:"text",text:i,marks:[{type:"link",attrs:{href:t}}]}).setTextSelection({from:r,to:r}).run(),this._closeLinkEditor()}_removeLink(){const e=this._editor;if(!e)return;const t=this._linkSelection??e.state.selection;let i=e.chain().focus();t.from!==t.to&&(i=i.setTextSelection(t)),i.extendMarkRange("link").unsetLink().run(),this._closeLinkEditor()}_handleLinkEditorKeydown(e){if("Enter"===e.key)return e.preventDefault(),void this._applyLink();"Escape"===e.key&&(e.preventDefault(),this._closeLinkEditor())}_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(),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}})}_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?L`
|
|
2
2
|
<button class="bubble-btn danger" title="删除图片" @click=${this._deleteImage}>
|
|
3
3
|
<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>
|
|
4
4
|
</button>
|
|
@@ -26,13 +26,14 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
26
26
|
@input=${this._handleImageWidthInput}
|
|
27
27
|
/>
|
|
28
28
|
</div>
|
|
29
|
-
`:""}_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:
|
|
29
|
+
`:""}_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: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 L`
|
|
30
30
|
<div
|
|
31
31
|
class="editor-wrapper ${e?"":"loading"} ${this._previewValue?"preview":""}"
|
|
32
|
+
@mousedown=${this._handleWrapperMouseDown}
|
|
32
33
|
@focusin=${this._handleWrapperFocusIn}
|
|
33
34
|
@focusout=${this._handleWrapperFocusOut}
|
|
34
35
|
>
|
|
35
|
-
${e?"":
|
|
36
|
+
${e?"":L`
|
|
36
37
|
<div class="loading-placeholder">
|
|
37
38
|
<div class="loading-spinner"></div>
|
|
38
39
|
<span>编辑器加载中...</span>
|
|
@@ -45,10 +46,10 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
45
46
|
@change=${this._handleImageUpload}
|
|
46
47
|
/>
|
|
47
48
|
|
|
48
|
-
${this._previewValue||"header"!==this._toolbarModeValue?"":
|
|
49
|
+
${this._previewValue||"header"!==this._toolbarModeValue?"":L`
|
|
49
50
|
<div class="editor-header ${this._isHeaderVisible()?"is-visible":""}">
|
|
50
51
|
<div class="editor-header__inner">
|
|
51
|
-
${this._selectedImage?this._renderImageControls():
|
|
52
|
+
${this._selectedImage?this._renderImageControls():L`
|
|
52
53
|
<button
|
|
53
54
|
class="bubble-btn ${e?.isActive("bold")?"is-active":""}"
|
|
54
55
|
@click=${this._toggleBold}
|
|
@@ -188,7 +189,7 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
188
189
|
`}
|
|
189
190
|
|
|
190
191
|
<!-- Bubble Menu (悬浮操作栏) -->
|
|
191
|
-
${this._previewValue||"slash"!==this._toolbarModeValue?"":
|
|
192
|
+
${this._previewValue||"slash"!==this._toolbarModeValue?"":L`
|
|
192
193
|
<div class="bubble-menu">
|
|
193
194
|
<!-- 文本格式 -->
|
|
194
195
|
<button
|
|
@@ -397,14 +398,53 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
397
398
|
|
|
398
399
|
<div class="editor-content" data-empty-hint=${this._resolvedPlaceholder}></div>
|
|
399
400
|
|
|
401
|
+
${this._linkEditor.visible?L`
|
|
402
|
+
<div
|
|
403
|
+
class="link-editor"
|
|
404
|
+
style="left: ${this._linkEditor.x}px; top: ${this._linkEditor.y}px;"
|
|
405
|
+
@mousedown=${e=>e.stopPropagation()}
|
|
406
|
+
@click=${e=>e.stopPropagation()}
|
|
407
|
+
>
|
|
408
|
+
<div class="link-editor__field">
|
|
409
|
+
<span class="link-editor__label">链接地址</span>
|
|
410
|
+
<input
|
|
411
|
+
class="link-editor__input"
|
|
412
|
+
data-field="url"
|
|
413
|
+
type="text"
|
|
414
|
+
placeholder="输入或粘贴链接"
|
|
415
|
+
.value=${this._linkEditor.url}
|
|
416
|
+
@input=${this._handleLinkEditorInput}
|
|
417
|
+
@keydown=${this._handleLinkEditorKeydown}
|
|
418
|
+
/>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="link-editor__field">
|
|
421
|
+
<span class="link-editor__label">链接名字</span>
|
|
422
|
+
<input
|
|
423
|
+
class="link-editor__input"
|
|
424
|
+
data-field="label"
|
|
425
|
+
type="text"
|
|
426
|
+
placeholder="输入展示名称"
|
|
427
|
+
.value=${this._linkEditor.label}
|
|
428
|
+
@input=${this._handleLinkEditorInput}
|
|
429
|
+
@keydown=${this._handleLinkEditorKeydown}
|
|
430
|
+
/>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="link-editor__actions">
|
|
433
|
+
<button class="link-editor__action primary" title="应用链接" @click=${this._applyLink}>应用</button>
|
|
434
|
+
<button class="link-editor__action" title="取消链接编辑" @click=${this._closeLinkEditor}>取消</button>
|
|
435
|
+
${e?.isActive("link")||this._linkEditor.url?L`<button class="link-editor__action danger" title="移除链接" @click=${this._removeLink}>移除</button>`:""}
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
`:""}
|
|
439
|
+
|
|
400
440
|
<!-- Table Cell Toolbar -->
|
|
401
|
-
${this._tableCellToolbar.visible&&e?.isActive("table")?
|
|
441
|
+
${this._tableCellToolbar.visible&&e?.isActive("table")?L`
|
|
402
442
|
<div
|
|
403
443
|
class="table-cell-toolbar"
|
|
404
444
|
style="left: ${this._tableCellToolbar.x}px; top: ${this._tableCellToolbar.y}px;"
|
|
405
445
|
@mousedown=${e=>e.preventDefault()}
|
|
406
446
|
>
|
|
407
|
-
${0===this._tableCellToolbar.cellRow?
|
|
447
|
+
${0===this._tableCellToolbar.cellRow?L`
|
|
408
448
|
<button class="table-cell-toolbar-btn" title="上方添加行" @click=${this._addTableRowAbove}>
|
|
409
449
|
<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>
|
|
410
450
|
</button>
|
|
@@ -415,8 +455,8 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
415
455
|
<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>
|
|
416
456
|
</button>
|
|
417
457
|
`:""}
|
|
418
|
-
${0===this._tableCellToolbar.cellCol?
|
|
419
|
-
${0!==this._tableCellToolbar.cellRow?
|
|
458
|
+
${0===this._tableCellToolbar.cellCol?L`
|
|
459
|
+
${0!==this._tableCellToolbar.cellRow?L`<div style="width:1px;height:20px;background:#e3e3e3;margin:0 4px;"></div>`:""}
|
|
420
460
|
<button class="table-cell-toolbar-btn" title="左侧添加列" @click=${this._addTableColumnLeft}>
|
|
421
461
|
<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>
|
|
422
462
|
</button>
|
|
@@ -427,7 +467,7 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
427
467
|
<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>
|
|
428
468
|
</button>
|
|
429
469
|
`:""}
|
|
430
|
-
${0===this._tableCellToolbar.cellRow&&0===this._tableCellToolbar.cellCol?
|
|
470
|
+
${0===this._tableCellToolbar.cellRow&&0===this._tableCellToolbar.cellCol?L`
|
|
431
471
|
<div style="width:1px;height:20px;background:#e3e3e3;margin:0 4px;"></div>
|
|
432
472
|
<button class="table-cell-toolbar-btn danger" title="删除表格" @click=${this._deleteTable}>
|
|
433
473
|
<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>
|
|
@@ -437,7 +477,7 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
437
477
|
`:""}
|
|
438
478
|
|
|
439
479
|
<!-- Image Toolbar -->
|
|
440
|
-
${"slash"===this._toolbarModeValue&&this._imageToolbar.visible?
|
|
480
|
+
${"slash"===this._toolbarModeValue&&this._imageToolbar.visible?L`
|
|
441
481
|
<div
|
|
442
482
|
class="image-toolbar"
|
|
443
483
|
style="left: ${this._imageToolbar.x}px; top: ${this._imageToolbar.y}px;"
|
|
@@ -447,14 +487,14 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
447
487
|
</div>
|
|
448
488
|
`:""}
|
|
449
489
|
</div>
|
|
450
|
-
`}_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(
|
|
490
|
+
`}_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(L`
|
|
451
491
|
<div
|
|
452
492
|
class="table-cell ${r?"selected":""}"
|
|
453
493
|
@click=${()=>{this._insertTableByClick(i,o),this._tableDropdownOpen=!1}}
|
|
454
494
|
@mouseenter=${()=>{this._hoverRow=i,this._hoverCol=o}}
|
|
455
495
|
@mouseleave=${()=>{this._hoverRow=0,this._hoverCol=0}}
|
|
456
496
|
></div>
|
|
457
|
-
`)}return e}};F.styles
|
|
497
|
+
`)}return e}};F.styles=$`
|
|
458
498
|
:host {
|
|
459
499
|
display: block;
|
|
460
500
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
|
|
@@ -747,6 +787,21 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
747
787
|
border-radius: 8px;
|
|
748
788
|
}
|
|
749
789
|
|
|
790
|
+
.ProseMirror img[data-align="left"] {
|
|
791
|
+
display: block !important;
|
|
792
|
+
margin: 0 auto 0 0 !important;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.ProseMirror img[data-align="center"] {
|
|
796
|
+
display: block !important;
|
|
797
|
+
margin: 0 auto !important;
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
.ProseMirror img[data-align="right"] {
|
|
801
|
+
display: block !important;
|
|
802
|
+
margin: 0 0 0 auto !important;
|
|
803
|
+
}
|
|
804
|
+
|
|
750
805
|
.ProseMirror a {
|
|
751
806
|
color: var(--qxs-color-primary, #3D61E3);
|
|
752
807
|
text-decoration: underline;
|
|
@@ -1054,6 +1109,81 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
1054
1109
|
border-color: var(--qxs-color-primary, #3D61E3);
|
|
1055
1110
|
}
|
|
1056
1111
|
|
|
1112
|
+
.link-editor {
|
|
1113
|
+
position: absolute;
|
|
1114
|
+
z-index: 120;
|
|
1115
|
+
display: grid;
|
|
1116
|
+
gap: 8px;
|
|
1117
|
+
min-width: 320px;
|
|
1118
|
+
padding: 10px;
|
|
1119
|
+
background: #fff;
|
|
1120
|
+
border: 1px solid #e3e3e3;
|
|
1121
|
+
border-radius: 10px;
|
|
1122
|
+
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.link-editor__field {
|
|
1126
|
+
display: grid;
|
|
1127
|
+
gap: 4px;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.link-editor__label {
|
|
1131
|
+
font-size: 12px;
|
|
1132
|
+
color: #6b7280;
|
|
1133
|
+
line-height: 1;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.link-editor__input {
|
|
1137
|
+
min-width: 0;
|
|
1138
|
+
height: 32px;
|
|
1139
|
+
padding: 0 10px;
|
|
1140
|
+
border: 1px solid #d8dde6;
|
|
1141
|
+
border-radius: 8px;
|
|
1142
|
+
outline: none;
|
|
1143
|
+
font-size: 13px;
|
|
1144
|
+
color: #37352f;
|
|
1145
|
+
background: #fff;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
.link-editor__input:focus {
|
|
1149
|
+
border-color: var(--qxs-color-primary, #3D61E3);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.link-editor__actions {
|
|
1153
|
+
display: flex;
|
|
1154
|
+
align-items: center;
|
|
1155
|
+
gap: 8px;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.link-editor__action {
|
|
1159
|
+
height: 32px;
|
|
1160
|
+
padding: 0 12px;
|
|
1161
|
+
border: 1px solid #d8dde6;
|
|
1162
|
+
border-radius: 8px;
|
|
1163
|
+
background: #fff;
|
|
1164
|
+
color: #4b5563;
|
|
1165
|
+
font-size: 12px;
|
|
1166
|
+
font-family: inherit;
|
|
1167
|
+
cursor: pointer;
|
|
1168
|
+
transition: all 0.15s ease;
|
|
1169
|
+
white-space: nowrap;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
.link-editor__action:hover {
|
|
1173
|
+
border-color: #c3cad5;
|
|
1174
|
+
background: #f8fafc;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
.link-editor__action.primary {
|
|
1178
|
+
border-color: var(--qxs-color-primary, #3D61E3);
|
|
1179
|
+
background: var(--qxs-color-primary, #3D61E3);
|
|
1180
|
+
color: #fff;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.link-editor__action.danger {
|
|
1184
|
+
color: #f56c6c;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1057
1187
|
/* Image Toolbar */
|
|
1058
1188
|
.image-toolbar {
|
|
1059
1189
|
position: absolute;
|
|
@@ -1157,5 +1287,5 @@ import{Node as e,mergeAttributes as t,Editor as i}from"@tiptap/core";import o fr
|
|
|
1157
1287
|
outline: 2px solid var(--qxs-color-primary, #3D61E3);
|
|
1158
1288
|
outline-offset: 2px;
|
|
1159
1289
|
}
|
|
1160
|
-
`,
|
|
1290
|
+
`,E([I({type:String,attribute:"content"})],F.prototype,"content",2),E([I({type:String,attribute:"model-value"})],F.prototype,"model-value",2),E([I({type:String,attribute:"placeholder"})],F.prototype,"placeholder",2),E([I({type:String,attribute:"toolbar-mode"})],F.prototype,"toolbar-mode",2),E([I({type:String,attribute:"header-always-visible"})],F.prototype,"header-always-visible",2),E([I({type:String,attribute:"use-model"})],F.prototype,"use-model",2),E([I({type:String,attribute:"readonly"})],F.prototype,"readonly",2),E([I({type:String,attribute:"preview"})],F.prototype,"preview",2),E([I({type:String,attribute:"custom-styles"})],F.prototype,"custom-styles",2),E([I({type:Object,attribute:"upload-image"})],F.prototype,"upload-image",2),E([A()],F.prototype,"_editor",2),E([A()],F.prototype,"_pendingContent",2),E([A()],F.prototype,"_hoverRow",2),E([A()],F.prototype,"_hoverCol",2),E([A()],F.prototype,"_tableDropdownOpen",2),E([A()],F.prototype,"_tableCellToolbar",2),E([A()],F.prototype,"_imageToolbar",2),E([A()],F.prototype,"_linkEditor",2),E([A()],F.prototype,"_isEditorFocused",2),E([A()],F.prototype,"_selectedImage",2),F=E([S("qxs-blocksuite-editor")],F);export{F as QxsBlocksuiteEditor};
|
|
1161
1291
|
//# sourceMappingURL=blocksuite-editor.mjs.map
|