@aquera/nile-elements 0.1.67-beta-2.3 → 0.1.67-beta-2.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/demo/index.html +2 -2
- package/dist/index.js +113 -122
- package/dist/nile-rich-text-editor/nile-rich-text-editor.cjs.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.cjs.js.map +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js.map +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.esm.js +121 -130
- package/dist/nile-rich-text-editor/nile-rich-text-editor.esm.js +1 -1
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js +120 -129
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map +1 -1
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.d.ts +2 -1
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js +32 -25
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts +121 -130
- package/src/nile-rich-text-editor/nile-rich-text-editor.ts +40 -43
- package/vscode-html-custom-data.json +1 -1
package/demo/index.html
CHANGED
@@ -11,11 +11,11 @@
|
|
11
11
|
.flex-container {
|
12
12
|
display: flex;
|
13
13
|
flex-direction: column;
|
14
|
-
max-width: 600px;
|
15
14
|
gap: 30px;
|
16
15
|
padding: 10px;
|
17
16
|
margin: 10px;
|
18
17
|
max-height: 100px;
|
18
|
+
width: 1200px;
|
19
19
|
}
|
20
20
|
|
21
21
|
nile-rte-mentions .mention {
|
@@ -46,7 +46,7 @@ h2{
|
|
46
46
|
|
47
47
|
<body>
|
48
48
|
<div class="flex-container">
|
49
|
-
<nile-rich-text-editor>
|
49
|
+
<nile-rich-text-editor >
|
50
50
|
|
51
51
|
<!-- <nile-rte-mentions mentioncolors='{
|
52
52
|
"@": "#eef2ff",
|
package/dist/index.js
CHANGED
@@ -13015,143 +13015,134 @@ class Xi{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
13015
13015
|
</div>
|
13016
13016
|
</nile-popover>
|
13017
13017
|
`}};function $p(e,t){for(;e&&e!==t;){if(e instanceof HTMLElement){const t=getComputedStyle(e).display;if(e.tagName.match(/^(P|DIV|H1|H2|H3|H4|H5|H6|LI)$/)||"block"===t||"list-item"===t)return e}e=e?.parentNode||null}return t}function Jp(e){const t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(!t)return"#000000";return`#${Number(t[1]).toString(16).padStart(2,"0")}${Number(t[2]).toString(16).padStart(2,"0")}${Number(t[3]).toString(16).padStart(2,"0")}`}function Hp(e,t,M){const i=document.createElement(t);M&&Object.entries(M).forEach((([e,t])=>i.setAttribute(e,t)));try{e.surroundContents(i)}catch{const t=e.extractContents();i.appendChild(t),e.insertNode(i)}}function Xp(e,t,M){const i=document.getSelection();if(!i||0===i.rangeCount)return;const N=i.getRangeAt(0),o={strong:["strong","b"],em:["em","i"],u:["u"],span:["span"]}[t]??[t];if(N.collapsed){const e=document.createElement(t);M&&Object.entries(M).forEach((([t,M])=>e.setAttribute(t,M))),e.appendChild(document.createTextNode("")),N.insertNode(e);const o=document.createRange();return o.setStart(e.firstChild,1),o.collapse(!0),i.removeAllRanges(),void i.addRange(o)}let n=N.startContainer,s=null;for(;n&&n!==e;){if(n instanceof HTMLElement&&o.includes(n.tagName.toLowerCase())){s=n;break}n=n.parentNode}s?function(e){const t=e.parentNode;if(t){for(;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}}(s):Hp(N,t,M)}function qp(e,t){const M=document.getSelection();if(!M||0===M.rangeCount)return;const i=$p(M.getRangeAt(0).startContainer,e);i&&(i.style.textAlign="justify"===t?"justify":t)}function Kp(e,t,M){for(;t&&t!==e;){if(t instanceof HTMLSpanElement&&t.hasAttribute(M))return t;t=t.parentNode}return null}function eS(e,t,M,i){const N=window.getSelection();if(!N||0===N.rangeCount)return;const o=N.getRangeAt(0);if(!e.contains(o.commonAncestorContainer))return;const n=o.cloneRange();if(n.collapsed){const o=Kp(e,n.startContainer,i);if(o)return o.style[t]=M,void MS(e,i,t);const s=document.createElement("span");s.setAttribute(i,"1"),s.style[t]=M,s.appendChild(document.createTextNode("")),n.insertNode(s);const r=document.createRange();return r.setStart(s.firstChild,1),r.collapse(!0),N.removeAllRanges(),N.addRange(r),void MS(e,i,t)}const s=Kp(e,n.startContainer,i),r=Kp(e,n.endContainer,i);if(s&&s===r){if(function(e,t){const M=document.createRange();return M.selectNodeContents(t),e.compareBoundaryPoints(Range.START_TO_START,M)<=0&&e.compareBoundaryPoints(Range.END_TO_END,M)>=0}(n,s))s.style[t]=M;else{const e=function(e,t,M,i,N){const o=e.style[i],n=document.createRange();n.setStart(e,0),n.setEnd(t.startContainer,t.startOffset);const s=document.createRange();s.setStart(t.endContainer,t.endOffset),s.setEnd(e,e.childNodes.length);const r=document.createDocumentFragment(),a=e=>{const t=document.createElement("span");return t.setAttribute(M,"1"),t.style[i]=e,t};if(tS(n)){const e=a(o);e.appendChild(n.cloneContents()),r.appendChild(e)}const l=a(N);if(l.appendChild(t.cloneContents()),r.appendChild(l),tS(s)){const e=a(o);e.appendChild(s.cloneContents()),r.appendChild(e)}return e.replaceWith(r),l}(s,n,i,t,M),N=window.getSelection(),o=document.createRange();o.selectNodeContents(e),N?.removeAllRanges(),N?.addRange(o)}return void MS(e,i,t)}const a=(()=>{let e=n.commonAncestorContainer;for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e})(),l=document.createTreeWalker(a||e,NodeFilter.SHOW_TEXT,{acceptNode:e=>{if(!e.nodeValue||!e.nodeValue.trim())return NodeFilter.FILTER_REJECT;const t=document.createRange();t.selectNodeContents(e);return n.compareBoundaryPoints(Range.END_TO_START,t)<0&&n.compareBoundaryPoints(Range.START_TO_END,t)>0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT}}),D=[];let u;for(;u=l.nextNode();)D.push(u);D.forEach((N=>{let o=0,s=N.length;N===n.startContainer&&(o=n.startOffset),N===n.endContainer&&(s=n.endOffset),o>0&&(N=N.splitText(o)),s<N.length&&N.splitText(s);const r=Kp(e,N,i);if(r)return void(r.style[t]=M);const a=document.createElement("span");a.setAttribute(i,"1"),a.style[t]=M;N.parentElement.replaceChild(a,N),a.appendChild(N)})),MS(e,i,t),N.removeAllRanges(),N.addRange(n)}function tS(e){if(e.collapsed)return!1;return(e.cloneContents().textContent||"").length>0}function MS(e,t,M){const i=Array.from(e.querySelectorAll(`span[${t}]`)),N=e=>e.style[M];i.forEach((e=>{Array.from(e.querySelectorAll(`span[${t}]`)).forEach((t=>{if(N(t)===N(e)){for(;t.firstChild;)e.insertBefore(t.firstChild,t);t.remove()}}));const M=e.previousSibling;if(M instanceof HTMLSpanElement&&M.hasAttribute(t)&&N(M)===N(e)){for(;e.firstChild;)M.appendChild(e.firstChild);return void e.remove()}const i=e.nextSibling;if(i instanceof HTMLSpanElement&&i.hasAttribute(t)&&N(i)===N(e)){for(;i.firstChild;)e.appendChild(i.firstChild);i.remove()}}))}e([ge({attribute:!1})],Fp.prototype,"editorEl",void 0),e([ge({type:String})],Fp.prototype,"placeholder",void 0),e([ce()],Fp.prototype,"linkValue",void 0),Fp=e([le("nile-rte-link")],Fp);const iS=n`
|
13018
|
-
|
13019
|
-
|
13020
|
-
.editor {all: revert;}
|
13018
|
+
.editor { all: revert; }
|
13021
13019
|
|
13022
|
-
nile-rich-text-editor {
|
13020
|
+
nile-rich-text-editor {
|
13021
|
+
position: relative;
|
13022
|
+
display: block;
|
13023
|
+
font-family: inherit;
|
13024
|
+
}
|
13023
13025
|
|
13024
|
-
|
13025
|
-
|
13026
|
-
|
13027
|
-
|
13028
|
-
|
13029
|
-
|
13030
|
-
|
13031
|
-
|
13032
|
-
white-space: normal;
|
13033
|
-
word-break: break-word;
|
13034
|
-
}
|
13026
|
+
/* --- Card 1: Toolbar + Editor --- */
|
13027
|
+
.rte-container {
|
13028
|
+
width: 100%;
|
13029
|
+
border: 1px solid #e5e7eb;
|
13030
|
+
border-radius: 8px;
|
13031
|
+
background: #fff;
|
13032
|
+
box-sizing: border-box;
|
13033
|
+
}
|
13035
13034
|
|
13035
|
+
/* Toolbar inside container */
|
13036
|
+
.rte-container nile-rte-toolbar {
|
13037
|
+
display: flex;
|
13038
|
+
align-items: center;
|
13039
|
+
gap: 6px;
|
13040
|
+
padding: 8px;
|
13041
|
+
border-bottom: 1px solid #e5e7eb;
|
13042
|
+
background: #fff;
|
13043
|
+
border-radius: 8px 8px 0 0;
|
13036
13044
|
|
13037
|
-
|
13038
|
-
|
13039
|
-
min-height: 50px;
|
13040
|
-
overflow-x: auto;
|
13041
|
-
white-space: nowrap;
|
13042
|
-
border-radius: 8px;
|
13045
|
+
width: 100%;
|
13046
|
+
box-sizing: border-box;
|
13043
13047
|
}
|
13044
13048
|
|
13045
13049
|
|
13050
|
+
.rte-container .editor {
|
13051
|
+
min-height: 160px;
|
13052
|
+
width: 100%;
|
13053
|
+
padding: 12px;
|
13054
|
+
background: #fff;
|
13055
|
+
border-radius: 0 0 8px 8px;
|
13056
|
+
outline: none;
|
13057
|
+
tab-size: 4;
|
13058
|
+
-moz-tab-size: 4;
|
13059
|
+
word-break: break-word;
|
13060
|
+
box-sizing: border-box;
|
13061
|
+
border-radius: 8px;
|
13062
|
+
}
|
13046
13063
|
|
13064
|
+
/* --- Card 2: Preview --- */
|
13065
|
+
/* Preview card */
|
13066
|
+
nile-rte-preview {
|
13067
|
+
display: block;
|
13068
|
+
width: 100%;
|
13069
|
+
margin-top: 16px;
|
13070
|
+
padding: 12px;
|
13071
|
+
border: 1px dashed #e5e7eb;
|
13072
|
+
border-radius: 8px;
|
13073
|
+
background: #fafafa;
|
13074
|
+
box-sizing: border-box;
|
13075
|
+
word-wrap: break-word;
|
13076
|
+
}
|
13047
13077
|
|
13048
13078
|
|
13079
|
+
/* Toolbar button styling */
|
13080
|
+
nile-rte-toolbar-item nile-button::part(base) {
|
13081
|
+
width: 32px;
|
13082
|
+
height: 32px;
|
13083
|
+
padding: 0px 6px;
|
13084
|
+
border: none;
|
13085
|
+
}
|
13049
13086
|
|
13050
|
-
|
13051
|
-
|
13052
|
-
|
13053
|
-
|
13054
|
-
|
13055
|
-
|
13056
|
-
|
13057
|
-
border:1px solid #e5e7eb; background:#fff; border-radius:6px;
|
13058
|
-
cursor:pointer;
|
13059
|
-
}
|
13060
|
-
|
13061
|
-
|
13062
|
-
/* Ensure clicks hit the button (not nested icon internals) */
|
13063
|
-
nile-rte-toolbar-item > button nile-icon { pointer-events:none; }
|
13064
|
-
|
13065
|
-
nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }
|
13066
|
-
nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
|
13067
|
-
nile-rte-color input[type="color"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }
|
13068
|
-
nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
|
13069
|
-
|
13070
|
-
.editor p { margin:1em 0; }
|
13071
|
-
.editor h1, .preview h1 { all: revert; font-size:2em, display: block;
|
13072
|
-
font-size: 2em;
|
13073
|
-
margin-top: 0.67em;
|
13074
|
-
margin-bottom: 0.67em;
|
13075
|
-
margin-left: 0;
|
13076
|
-
margin-right: 0;
|
13077
|
-
font-weight: bold; }
|
13078
|
-
.editor h2, .preview h2 { all: revert; display: block;
|
13079
|
-
font-size: 1.5em;
|
13080
|
-
margin-top: 0.83em;
|
13081
|
-
margin-bottom: 0.83em;
|
13082
|
-
margin-left: 0;
|
13083
|
-
margin-right: 0;
|
13084
|
-
font-weight: bold;}
|
13085
|
-
.editor h3 { font-size:1.17em }
|
13086
|
-
.editor h4 { font-size:1em }
|
13087
|
-
.editor h5 { font-size:0.83em }
|
13088
|
-
.editor h6 { font-size:0.67em }
|
13089
|
-
|
13090
|
-
.editor { min-height:160px; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;
|
13091
|
-
tab-size: 4;
|
13092
|
-
-moz-tab-size: 4;
|
13093
|
-
word-break: break-word;
|
13094
|
-
}
|
13095
|
-
nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }
|
13096
|
-
|
13097
|
-
nile-rte-preview.single-line {
|
13098
|
-
width: 478px;
|
13099
|
-
min-height: 50px;
|
13100
|
-
overflow-x: auto;
|
13101
|
-
white-space: nowrap;
|
13102
|
-
}
|
13103
|
-
|
13104
|
-
.rte-color-trigger {
|
13105
|
-
display: inline-flex;
|
13106
|
-
align-items: center;
|
13107
|
-
justify-content: center;
|
13108
|
-
/* border: 1px solid var(--nile-color-border, #d9d9d9); */
|
13109
|
-
border-radius: 6px;
|
13110
|
-
background: #fff;
|
13111
|
-
cursor: pointer;
|
13112
|
-
border:none;
|
13113
|
-
|
13087
|
+
nile-rte-toolbar-item > button,
|
13088
|
+
nile-rte-toolbar button {
|
13089
|
+
border: 1px solid #e5e7eb;
|
13090
|
+
background: #fff;
|
13091
|
+
border-radius: 6px;
|
13092
|
+
cursor: pointer;
|
13093
|
+
}
|
13114
13094
|
|
13115
|
-
}
|
13116
|
-
nile-button.rte-color-trigger::part(base){
|
13117
|
-
width:32px; height:32px; padding:0px 6px;
|
13118
|
-
}
|
13119
|
-
.rte-color-trigger .glyph-stack {
|
13120
|
-
display: grid; /* stack vertically */
|
13121
|
-
grid-auto-rows: max-content;
|
13122
|
-
align-items: center;
|
13123
|
-
justify-items: center;
|
13124
|
-
line-height: 1;
|
13125
|
-
}
|
13095
|
+
nile-rte-toolbar-item > button nile-icon { pointer-events: none; }
|
13126
13096
|
|
13127
|
-
|
13128
|
-
|
13129
|
-
|
13130
|
-
|
13131
|
-
}
|
13097
|
+
nile-rte-toolbar-item > button.active {
|
13098
|
+
border-color: #2563eb;
|
13099
|
+
background: #eff6ff;
|
13100
|
+
}
|
13132
13101
|
|
13133
|
-
|
13134
|
-
|
13135
|
-
|
13136
|
-
|
13137
|
-
|
13138
|
-
|
13139
|
-
|
13140
|
-
.
|
13141
|
-
|
13142
|
-
|
13143
|
-
|
13144
|
-
|
13145
|
-
|
13146
|
-
}
|
13147
|
-
|
13148
|
-
|
13149
|
-
}
|
13102
|
+
/* Heading normalization */
|
13103
|
+
.editor p { margin: 1em 0; }
|
13104
|
+
.editor h1, .preview h1 {
|
13105
|
+
font-size: 2em;
|
13106
|
+
margin: 0.67em 0;
|
13107
|
+
font-weight: bold;
|
13108
|
+
}
|
13109
|
+
.editor h2, .preview h2 {
|
13110
|
+
font-size: 1.5em;
|
13111
|
+
margin: 0.83em 0;
|
13112
|
+
font-weight: bold;
|
13113
|
+
}
|
13114
|
+
.editor h3 { font-size: 1.17em; }
|
13115
|
+
.editor h4 { font-size: 1em; }
|
13116
|
+
.editor h5 { font-size: 0.83em; }
|
13117
|
+
.editor h6 { font-size: 0.67em; }
|
13150
13118
|
|
13151
|
-
|
13152
|
-
|
13153
|
-
|
13154
|
-
`,NS={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let oS=class extends re{constructor(){super(...arguments),this.value="",this.singleLineEditor=!1,this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),Xp(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const M=t.getRangeAt(0);if(e.shiftKey){if(M.collapsed&&M.startContainer.nodeType===Node.TEXT_NODE){const e=M.startContainer,i=M.startOffset,N=e.data.slice(0,i),o=N.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==N.length){e.data=o+e.data.slice(i);const M=document.createRange();M.setStart(e,o.length),M.collapse(!0),t.removeAllRanges(),t.addRange(M),this.updateContent(),this.updateToolbarState()}}return}M.deleteContents();const i=document.createTextNode("\t");M.insertNode(i);const N=document.createRange();N.setStartAfter(i),N.collapse(!0),t.removeAllRanges(),t.addRange(N),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}shouldUpdate(){return!1}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(iS.cssText),this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.singleLineEditor&&(this.editorEl?.classList.add("single-line"),this.previewEl?.classList.add("single-line")),this.ensureEditor(),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),this.updateToolbarState(),this.syncPreview(),document.addEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.addEventListener("mention-selected",(e=>{this.updateContentWithMention(e.detail)}))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.singleLineEditor&&e.classList.add("single-line"),this.toolbarEl?.nextSibling?this.insertBefore(e,this.toolbarEl.nextSibling):this.previewEl?this.insertBefore(e,this.previewEl):this.appendChild(e),this.editorEl=e}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>"),this.ensureAtLeastOneParagraph()}unwrapMention(e,t=!0){const M=e.parentNode;if(!M)return;const i=t?(e.textContent??"").replace(/\u200B/g,""):"",N=document.createTextNode(i);M.insertBefore(N,e),M.removeChild(e);const o=document.createRange();o.setStartAfter(N),o.collapse(!0);const n=window.getSelection();n?.removeAllRanges(),n?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,M=t.getAttribute("data-mention-key"),i=t.getAttribute("data-mention-label"),N=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),n=!!M&&!!i&&o.length>0&&o.startsWith(N)&&o.includes(i);o&&n||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent()})),this.editorEl.addEventListener("mouseup",(()=>this.saveSelection())),this.editorEl.addEventListener("keyup",(()=>this.saveSelection())),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const M=e.getAttribute("name")||"",i=e.getAttribute("label")||M,N=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),N)t.innerHTML=`<nile-icon name="${N}" aria-label="${i}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const N=NS[M];N?t.innerHTML=`<nile-icon name="${N}" size="20" color="black" aria-label="${i}"></nile-icon>`:t.textContent=i||M,e.innerHTML=""}if(!t.isConnected){const M=document.createElement("nile-tooltip");M.setAttribute("content",i),M.appendChild(t),e.appendChild(M)}t.setAttribute("aria-label",i),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(M)));const n=this.buttonMap.get(M)??[];return n.push(t),void this.buttonMap.set(M,n)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:M}=e.detail;"backColor"===t?eS(this.editorEl,"backgroundColor",M,"data-rte-bg"):function(e,t){eS(e,"color",t,"data-rte-color")}(this.editorEl,M),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const M=e.detail;"heading"===t?function(e,t){const M=document.getSelection();if(!M||0===M.rangeCount)return;const i=$p(M.getRangeAt(0).startContainer,e);if(!i)return;if(i.tagName.toLowerCase()===t)return;const N=document.createElement(t);for(;i.firstChild;)N.appendChild(i.firstChild);i.replaceWith(N);const o=document.createRange();o.selectNodeContents(N),o.collapse(!0),M.removeAllRanges(),M.addRange(o)}(this.editorEl,M):"font"===t&&function(e,t){const M=document.getSelection();if(!M||0===M.rangeCount)return;const i=M.getRangeAt(0);if(i.collapsed){const e=document.createElement("span");e.style.fontFamily=t,e.appendChild(document.createTextNode("")),i.insertNode(e);const N=document.createRange();return N.setStart(e.firstChild,1),N.collapse(!0),M.removeAllRanges(),void M.addRange(N)}Hp(i,"span",{style:`font-family:${t}`})}(this.editorEl,M),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;qp(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),M=this.lastRange.extractContents(),i=document.createElement("div");i.appendChild(M),Array.from(i.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const M=document.createElement("li");M.appendChild(e),t.appendChild(M)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const M=window.getSelection();M?.removeAllRanges(),M?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":Xp(this.editorEl,"strong");break;case"italic":Xp(this.editorEl,"em");break;case"underline":Xp(this.editorEl,"u");break;case"left":qp(this.editorEl,"left");break;case"center":qp(this.editorEl,"center");break;case"right":qp(this.editorEl,"right");break;case"justify":qp(this.editorEl,"justify");break;case"ul":this.insertList("ul");break;case"ol":this.insertList("ol");break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const M=e.currentNode;M.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(M.tagName)&&t.push(M)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const M=this.buttonMap.get(e);if(M)for(const e of M)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const M=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,i=getComputedStyle(M),N=$p(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const M=getComputedStyle(e).fontWeight;if(parseInt(M,10)>=600)return!0}e=e.parentNode}return!1})(),n=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),r=!!M.closest("a"),a=N.style.textAlign||getComputedStyle(N).textAlign||"start",l="start"===a?"left":a,D=!!M.closest("li")&&M.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",n),this.setBtnActive("underline",s),this.setBtnActive("link",r),this.setBtnActive("left","left"===l&&!["center","right","justify"].includes(l)),this.setBtnActive("center","center"===l),this.setBtnActive("right","right"===l),this.setBtnActive("justify","justify"===l),this.setBtnActive("ul","ul"===D),this.setBtnActive("ol","ol"===D),this.headingSelect){const e=N.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(i.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=Jp(i.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(M).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=Jp(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=this.editorEl.cloneNode(!0),t=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),M=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),i=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align"];for(;t.nextNode()&&M.nextNode();){const e=t.currentNode,N=M.currentNode,o=window.getComputedStyle(e),n=i.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");n.trim()&&N.setAttribute("style",n)}this.content=e.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ge({type:String})],oS.prototype,"value",void 0),e([ge({type:Boolean,attribute:"singlelineeditor"})],oS.prototype,"singleLineEditor",void 0),e([ge({attribute:"mentions",converter:{fromAttribute:e=>{try{const t=JSON.parse(e),M={};for(const e of Object.keys(t)){const i=t[e];Array.isArray(i)&&(M[e]=i.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return M}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],oS.prototype,"mentions",void 0),e([ce()],oS.prototype,"content",void 0),oS=e([le("nile-rich-text-editor")],oS);
|
13119
|
+
/* Single-line variant */
|
13120
|
+
.editor.single-line {
|
13121
|
+
min-height: 50px;
|
13122
|
+
max-height: 50px;
|
13123
|
+
overflow-x: auto;
|
13124
|
+
white-space: nowrap;
|
13125
|
+
padding: 0px 12px 0px 12px;
|
13126
|
+
scrollbar-width: none;
|
13127
|
+
-ms-overflow-style: none;
|
13128
|
+
}
|
13129
|
+
nile-rte-preview.single-line {
|
13130
|
+
min-height: 50px;
|
13131
|
+
max-height: 50px;
|
13132
|
+
padding: 0px 12px 0px 12px;
|
13133
|
+
overflow-x: auto;
|
13134
|
+
white-space: nowrap;
|
13135
|
+
scrollbar-width: none;
|
13136
|
+
-ms-overflow-style: none;
|
13137
|
+
}
|
13138
|
+
nile-rte-divider {
|
13139
|
+
margin: 0 4px;
|
13140
|
+
display: inline-block;
|
13141
|
+
height: 24px;
|
13142
|
+
width: 1px;
|
13143
|
+
background: #E6E9EB;
|
13144
|
+
}
|
13145
|
+
`,NS={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let oS=class extends re{constructor(){super(...arguments),this.value="",this.singleLineEditor=!1,this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),Xp(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const M=t.getRangeAt(0);if(e.shiftKey){if(M.collapsed&&M.startContainer.nodeType===Node.TEXT_NODE){const e=M.startContainer,i=M.startOffset,N=e.data.slice(0,i),o=N.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==N.length){e.data=o+e.data.slice(i);const M=document.createRange();M.setStart(e,o.length),M.collapse(!0),t.removeAllRanges(),t.addRange(M),this.updateContent(),this.updateToolbarState()}}return}M.deleteContents();const i=document.createTextNode("\t");M.insertNode(i);const N=document.createRange();N.setStartAfter(i),N.collapse(!0),t.removeAllRanges(),t.addRange(N),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(iS.cssText),this.ensureStructure(),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const M=e.parentNode;if(!M)return;const i=t?(e.textContent??"").replace(/\u200B/g,""):"",N=document.createTextNode(i);M.insertBefore(N,e),M.removeChild(e);const o=document.createRange();o.setStartAfter(N),o.collapse(!0);const n=window.getSelection();n?.removeAllRanges(),n?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,M=t.getAttribute("data-mention-key"),i=t.getAttribute("data-mention-label"),N=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),n=!!M&&!!i&&o.length>0&&o.startsWith(N)&&o.includes(i);o&&n||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent()})),this.editorEl.addEventListener("mouseup",(()=>this.saveSelection())),this.editorEl.addEventListener("keyup",(()=>this.saveSelection())),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const M=e.getAttribute("name")||"",i=e.getAttribute("label")||M,N=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),N)t.innerHTML=`<nile-icon name="${N}" aria-label="${i}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const N=NS[M];N?t.innerHTML=`<nile-icon name="${N}" size="20" color="black" aria-label="${i}"></nile-icon>`:t.textContent=i||M,e.innerHTML=""}if(!t.isConnected){const M=document.createElement("nile-tooltip");M.setAttribute("content",i),M.appendChild(t),e.appendChild(M)}t.setAttribute("aria-label",i),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(M)));const n=this.buttonMap.get(M)??[];return n.push(t),void this.buttonMap.set(M,n)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:M}=e.detail;"backColor"===t?eS(this.editorEl,"backgroundColor",M,"data-rte-bg"):function(e,t){eS(e,"color",t,"data-rte-color")}(this.editorEl,M),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const M=e.detail;"heading"===t?function(e,t){const M=document.getSelection();if(!M||0===M.rangeCount)return;const i=$p(M.getRangeAt(0).startContainer,e);if(!i)return;if(i.tagName.toLowerCase()===t)return;const N=document.createElement(t);for(;i.firstChild;)N.appendChild(i.firstChild);i.replaceWith(N);const o=document.createRange();o.selectNodeContents(N),o.collapse(!0),M.removeAllRanges(),M.addRange(o)}(this.editorEl,M):"font"===t&&function(e,t){const M=document.getSelection();if(!M||0===M.rangeCount)return;const i=M.getRangeAt(0);if(i.collapsed){const e=document.createElement("span");e.style.fontFamily=t,e.appendChild(document.createTextNode("")),i.insertNode(e);const N=document.createRange();return N.setStart(e.firstChild,1),N.collapse(!0),M.removeAllRanges(),void M.addRange(N)}Hp(i,"span",{style:`font-family:${t}`})}(this.editorEl,M),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;qp(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),M=this.lastRange.extractContents(),i=document.createElement("div");i.appendChild(M),Array.from(i.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const M=document.createElement("li");M.appendChild(e),t.appendChild(M)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const M=window.getSelection();M?.removeAllRanges(),M?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":Xp(this.editorEl,"strong");break;case"italic":Xp(this.editorEl,"em");break;case"underline":Xp(this.editorEl,"u");break;case"left":qp(this.editorEl,"left");break;case"center":qp(this.editorEl,"center");break;case"right":qp(this.editorEl,"right");break;case"justify":qp(this.editorEl,"justify");break;case"ul":this.insertList("ul");break;case"ol":this.insertList("ol");break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const M=e.currentNode;M.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(M.tagName)&&t.push(M)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const M=this.buttonMap.get(e);if(M)for(const e of M)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const M=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,i=getComputedStyle(M),N=$p(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const M=getComputedStyle(e).fontWeight;if(parseInt(M,10)>=600)return!0}e=e.parentNode}return!1})(),n=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=M;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),r=!!M.closest("a"),a=N.style.textAlign||getComputedStyle(N).textAlign||"start",l="start"===a?"left":a,D=!!M.closest("li")&&M.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",n),this.setBtnActive("underline",s),this.setBtnActive("link",r),this.setBtnActive("left","left"===l&&!["center","right","justify"].includes(l)),this.setBtnActive("center","center"===l),this.setBtnActive("right","right"===l),this.setBtnActive("justify","justify"===l),this.setBtnActive("ul","ul"===D),this.setBtnActive("ol","ol"===D),this.headingSelect){const e=N.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(i.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=Jp(i.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(M).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=Jp(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=this.editorEl.cloneNode(!0),t=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),M=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),i=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align"];for(;t.nextNode()&&M.nextNode();){const e=t.currentNode,N=M.currentNode,o=window.getComputedStyle(e),n=i.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");n.trim()&&N.setAttribute("style",n)}this.content=e.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ge({type:String})],oS.prototype,"value",void 0),e([ge({type:Boolean,attribute:"singlelineeditor"})],oS.prototype,"singleLineEditor",void 0),e([ge({attribute:"mentions",converter:{fromAttribute:e=>{try{const t=JSON.parse(e),M={};for(const e of Object.keys(t)){const i=t[e];Array.isArray(i)&&(M[e]=i.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return M}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],oS.prototype,"mentions",void 0),e([ce()],oS.prototype,"content",void 0),oS=e([le("nile-rich-text-editor")],oS);
|
13155
13146
|
/**
|
13156
13147
|
* @license
|
13157
13148
|
* Copyright 2021 Google LLC
|
@@ -1,2 +1,2 @@
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-rte-toolbar.cjs.js","./nile-rte-toolbar-item.cjs.js","./nile-rte-select.cjs.js","./nile-rte-color.cjs.js","./nile-rte-divider.cjs.js","./nile-rte-preview.cjs.js","./nile-rte-mentions.cjs.js","./nile-rte-link.cjs.js","./utils.cjs.js","./nile-rich-text-editor.css.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,n,o,r,h,l,c,a,u,d,f,m,b,p;function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var n=0,F=function F(){};return{s:F,n:function(_n4){function n(){return _n4.apply(this,arguments);}n.toString=function(){return _n4.toString();};return n;}(function(){return n>=r.length?{done:!0}:{done:!1,value:r[n++]};}),e:function e(r){throw r;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var o,a=!0,u=!1;return{s:function s(){t=t.call(r);},n:function n(){var r=t.next();return a=r.done,r;},e:function e(r){u=!0,o=r;},f:function f(){try{a||null==t["return"]||t["return"]();}finally{if(u)throw o;}}};}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0;}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n;}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.LitElement;},function(_litDecoratorsJs){s=_litDecoratorsJs.property;e=_litDecoratorsJs.state;n=_litDecoratorsJs.customElement;},function(_nileRteToolbarCjsJs){},function(_nileRteToolbarItemCjsJs){},function(_nileRteSelectCjsJs){},function(_nileRteColorCjsJs){},function(_nileRteDividerCjsJs){},function(_nileRtePreviewCjsJs){},function(_nileRteMentionsCjsJs){},function(_nileRteLinkCjsJs){},function(_utilsCjsJs){o=_utilsCjsJs.t;r=_utilsCjsJs.s;h=_utilsCjsJs.a;l=_utilsCjsJs.b;c=_utilsCjsJs.c;a=_utilsCjsJs.d;u=_utilsCjsJs.n;d=_utilsCjsJs.e;f=_utilsCjsJs.r;},function(_nileRichTextEditorCssCjsJs){m=_nileRichTextEditorCssCjsJs.s;}],execute:function execute(){b={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};_export("N",p=/*#__PURE__*/function(_i){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.value="",_this.singleLineEditor=!1,_this.mentions={},_this.content="",_this.previewEl=null,_this.toolbarEl=null,_this.lastRange=null,_this.buttonMap=new Map(),_this.headingSelect=null,_this.fontSelect=null,_this.colorInput=null,_this.bgColorInput=null,_this.colorSwatchEl=null,_this.bgSwatchEl=null,_this.mentionsEl=null,_this.onEditorKeydown=function(t){if(_this.singleLineEditor&&"Enter"===t.key&&t.shiftKey)return void t.preventDefault();if(t.ctrlKey&&"i"===t.key.toLowerCase()&&(t.preventDefault(),o(_this.editorEl,"em"),_this.updateContent(),_this.updateToolbarState()),_this.singleLineEditor&&"Enter"===t.key)return void t.preventDefault();if("Tab"!==t.key)return;t.preventDefault(),_this.focusAndRestore();var i=window.getSelection();if(!i||0===i.rangeCount)return;var s=i.getRangeAt(0);if(t.shiftKey){if(s.collapsed&&s.startContainer.nodeType===Node.TEXT_NODE){var _t=s.startContainer,_e=s.startOffset,_n=_t.data.slice(0,_e),_o=_n.replace(/(\t|[ \u00a0]{2})$/,"");if(_o.length!==_n.length){_t.data=_o+_t.data.slice(_e);var _s=document.createRange();_s.setStart(_t,_o.length),_s.collapse(!0),i.removeAllRanges(),i.addRange(_s),_this.updateContent(),_this.updateToolbarState();}}return;}s.deleteContents();var e=document.createTextNode("\t");s.insertNode(e);var n=document.createRange();n.setStartAfter(e),n.collapse(!0),i.removeAllRanges(),i.addRange(n),_this.updateContent(),_this.updateToolbarState();},_this.onSelectionChange=function(){if(!_this.editorEl)return;var t=document.getSelection();if(!t||0===t.rangeCount)return;var i=t.getRangeAt(0);_this.editorEl.contains(i.commonAncestorContainer)&&(_this.lastRange=i.cloneRange(),_this.updateToolbarState());};return _this;}_inherits(p,_i);return _createClass(p,[{key:"createRenderRoot",value:function createRenderRoot(){return this;}},{key:"shouldUpdate",value:function shouldUpdate(){return!1;}},{key:"injectCss",value:function injectCss(t){if(this.querySelector("style[data-rte-style]"))return;var i=document.createElement("style");i.setAttribute("data-rte-style","true"),i.textContent=t,this.insertBefore(i,this.firstChild);}},{key:"connectedCallback",value:function connectedCallback(){var _this$editorEl,_this$previewEl,_this$mentionsEl$atta,_this$mentionsEl,_this$mentionsEl$setE,_this$mentionsEl2,_this2=this;_superPropGet(p,"connectedCallback",this,3)([]),this.injectCss(m.cssText),this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.singleLineEditor&&((_this$editorEl=this.editorEl)!==null&&_this$editorEl!==void 0&&_this$editorEl.classList.add("single-line"),(_this$previewEl=this.previewEl)!==null&&_this$previewEl!==void 0&&_this$previewEl.classList.add("single-line")),this.ensureEditor(),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&((_this$mentionsEl$atta=(_this$mentionsEl=this.mentionsEl).attach)!==null&&_this$mentionsEl$atta!==void 0&&_this$mentionsEl$atta.call(_this$mentionsEl,this.editorEl,this),(_this$mentionsEl$setE=(_this$mentionsEl2=this.mentionsEl).setExternalConfig)!==null&&_this$mentionsEl$setE!==void 0&&_this$mentionsEl$setE.call(_this$mentionsEl2,this.mentions)),this.wireEditor(),this.updateToolbarState(),this.syncPreview(),document.addEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.addEventListener("mention-selected",function(t){_this2.updateContentWithMention(t.detail);});}},{key:"updateContentWithMention",value:function updateContentWithMention(t){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:t},bubbles:!0,composed:!0}));}},{key:"disconnectedCallback",value:function disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),_superPropGet(p,"disconnectedCallback",this,3)([]);}},{key:"updated",value:function updated(t){t.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor));}},{key:"ensureEditor",value:function ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){var _this$toolbarEl;var _t2=document.createElement("article");_t2.className="editor",_t2.setAttribute("contenteditable","true"),this.singleLineEditor&&_t2.classList.add("single-line"),(_this$toolbarEl=this.toolbarEl)!==null&&_this$toolbarEl!==void 0&&_this$toolbarEl.nextSibling?this.insertBefore(_t2,this.toolbarEl.nextSibling):this.previewEl?this.insertBefore(_t2,this.previewEl):this.appendChild(_t2),this.editorEl=_t2;}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>"),this.ensureAtLeastOneParagraph();}},{key:"unwrapMention",value:function unwrapMention(t){var _t$textContent;var i=arguments.length>1&&arguments[1]!==undefined?arguments[1]:!0;var s=t.parentNode;if(!s)return;var e=i?((_t$textContent=t.textContent)!==null&&_t$textContent!==void 0?_t$textContent:"").replace(/\u200B/g,""):"",n=document.createTextNode(e);s.insertBefore(n,t),s.removeChild(t);var o=document.createRange();o.setStartAfter(n),o.collapse(!0);var r=window.getSelection();r!==null&&r!==void 0&&r.removeAllRanges(),r===null||r===void 0?void 0:r.addRange(o);}},{key:"scrubBrokenMentions",value:function scrubBrokenMentions(){var _this3=this;if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach(function(t){var _i$textContent;var i=t,s=i.getAttribute("data-mention-key"),e=i.getAttribute("data-mention-label"),n=i.getAttribute("data-mention-trigger")||"",o=((_i$textContent=i.textContent)!==null&&_i$textContent!==void 0?_i$textContent:"").replace(/\u200B/g,"").trim(),r=!!s&&!!e&&o.length>0&&o.startsWith(n)&&o.includes(e);o&&r||_this3.unwrapMention(i,!0);});}},{key:"wireEditor",value:function wireEditor(){var _this4=this;this.editorEl.addEventListener("input",function(){_this4.ensureAtLeastOneParagraph(),_this4.scrubBrokenMentions(),_this4.updateContent();}),this.editorEl.addEventListener("mouseup",function(){return _this4.saveSelection();}),this.editorEl.addEventListener("keyup",function(){return _this4.saveSelection();}),this.editorEl.addEventListener("keydown",this.onEditorKeydown);}},{key:"wireAuthoredToolbar",value:function wireAuthoredToolbar(t){var _this5=this;this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(t.children).forEach(function(t){var i=t.tagName.toLowerCase();if("nile-rte-select"!==i||"align"!==t.getAttribute("type")){if("nile-rte-link"===i)return t.editorEl=_this5.editorEl,void t.addEventListener("link-changed",function(){_this5.updateContent(),_this5.updateToolbarState();});if("nile-rte-toolbar-item"===i){var _this5$buttonMap$get;var _i2=t.querySelector(":scope > nile-button");var _s2=t.getAttribute("name")||"",_e2=t.getAttribute("label")||_s2,_n2=t.getAttribute("icon"),_o2=t.innerHTML.trim().length>0;if(_i2||(_i2=document.createElement("nile-button"),_i2.variant="tertiary",_i2.size="small"),_n2)_i2.innerHTML="<nile-icon name=\"".concat(_n2,"\" aria-label=\"").concat(_e2,"\"></nile-icon>"),t.innerHTML="";else if(_o2)_i2.innerHTML=t.innerHTML,t.innerHTML="";else{var _n3=b[_s2];_n3?_i2.innerHTML="<nile-icon name=\"".concat(_n3,"\" size=\"20\" color=\"black\" aria-label=\"").concat(_e2,"\"></nile-icon>"):_i2.textContent=_e2||_s2,t.innerHTML="";}if(!_i2.isConnected){var _s3=document.createElement("nile-tooltip");_s3.setAttribute("content",_e2),_s3.appendChild(_i2),t.appendChild(_s3);}_i2.setAttribute("aria-label",_e2),_i2.addEventListener("mousedown",function(t){return t.preventDefault();}),_i2.addEventListener("click",function(){return _this5.onToolbarCommand(_s2);});var _r=(_this5$buttonMap$get=_this5.buttonMap.get(_s2))!==null&&_this5$buttonMap$get!==void 0?_this5$buttonMap$get:[];return _r.push(_i2),void _this5.buttonMap.set(_s2,_r);}if("nile-rte-select"!==i)"nile-rte-color"!==i||t.addEventListener("change",function(t){_this5.focusAndRestore();var _t$detail=t.detail,i=_t$detail.mode,s=_t$detail.value;"backColor"===i?c(_this5.editorEl,s):a(_this5.editorEl,s),_this5.updateContent(),_this5.updateToolbarState();});else{var _i3=t.getAttribute("type")||"";t.addEventListener("change",function(t){_this5.focusAndRestore();var s=t.detail;"heading"===_i3?h(_this5.editorEl,s):"font"===_i3&&l(_this5.editorEl,s),_this5.updateContent(),_this5.updateToolbarState();});}}else t.addEventListener("change",function(t){_this5.focusAndRestore();var i=t.detail;r(_this5.editorEl,i),_this5.updateContent(),_this5.updateToolbarState();});});}},{key:"saveSelection",value:function saveSelection(){var t=window.getSelection();t&&t.rangeCount&&(this.lastRange=t.getRangeAt(0).cloneRange());}},{key:"restoreSelection",value:function restoreSelection(){if(!this.lastRange)return;var t=document.getSelection();t&&(t.removeAllRanges(),t.addRange(this.lastRange));}},{key:"focusAndRestore",value:function focusAndRestore(){var _this$editorEl2;(_this$editorEl2=this.editorEl)!==null&&_this$editorEl2!==void 0&&_this$editorEl2.focus(),this.restoreSelection();}},{key:"insertList",value:function insertList(t){if(this.restoreSelection(),!this.lastRange)return;var i=document.createElement(t),s=this.lastRange.extractContents(),e=document.createElement("div");e.appendChild(s),Array.from(e.childNodes).forEach(function(t){var _t$textContent2;if(t.nodeType===Node.TEXT_NODE&&!((_t$textContent2=t.textContent)!==null&&_t$textContent2!==void 0&&_t$textContent2.trim()))return;var s=document.createElement("li");s.appendChild(t),i.appendChild(s);}),this.lastRange.insertNode(i),this.afterListEdit(i);}},{key:"afterListEdit",value:function afterListEdit(t){var i=document.createRange();i.setStartAfter(t),i.collapse(!0);var s=window.getSelection();s!==null&&s!==void 0&&s.removeAllRanges(),s!==null&&s!==void 0&&s.addRange(i),this.saveSelection(),this.updateContent(),this.updateToolbarState();}},{key:"ensureAtLeastOneParagraph",value:function ensureAtLeastOneParagraph(){var _t$textContent3;var t=this.editorEl;if(!t)return;var i=""===((_t$textContent3=t.textContent)!==null&&_t$textContent3!==void 0?_t$textContent3:"").replace(/\u200B/g,"").trim();if(0===t.childNodes.length||i)return void(t.innerHTML="<p><br></p>");if(!t.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){var _i4=document.createElement("p");for(;t.firstChild;)_i4.appendChild(t.firstChild);return _i4.hasChildNodes()||_i4.appendChild(document.createElement("br")),void t.appendChild(_i4);}t.querySelectorAll("p").forEach(function(t){var _t$textContent4;""===((_t$textContent4=t.textContent)!==null&&_t$textContent4!==void 0?_t$textContent4:"").replace(/\u200B/g,"")&&(t.innerHTML.toLowerCase().includes("<br")||(t.innerHTML="<br>"));});}},{key:"onToolbarCommand",value:function onToolbarCommand(t){switch(this.focusAndRestore(),t){case"bold":o(this.editorEl,"strong");break;case"italic":o(this.editorEl,"em");break;case"underline":o(this.editorEl,"u");break;case"left":r(this.editorEl,"left");break;case"center":r(this.editorEl,"center");break;case"right":r(this.editorEl,"right");break;case"justify":r(this.editorEl,"justify");break;case"ul":this.insertList("ul");break;case"ol":this.insertList("ol");break;case"link":break;case"clear":var _t3=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),_i5=[];for(;_t3.nextNode();){var _s4=_t3.currentNode;_s4.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(_s4.tagName)&&_i5.push(_s4);}for(var _i7=0,_i6=_i5;_i7<_i6.length;_i7++){var _t4=_i6[_i7];for(;_t4.firstChild;){var _t4$parentNode;(_t4$parentNode=_t4.parentNode)===null||_t4$parentNode===void 0||_t4$parentNode.insertBefore(_t4.firstChild,_t4);}_t4.remove();}this.ensureAtLeastOneParagraph();}this.updateContent(),this.updateToolbarState();}},{key:"setBtnActive",value:function setBtnActive(t,i){var s=this.buttonMap.get(t);if(s){var _iterator=_createForOfIteratorHelper(s),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _t5=_step.value;_t5.toggleAttribute("data-active",!!i);}}catch(err){_iterator.e(err);}finally{_iterator.f();}}}},{key:"updateToolbarState",value:function updateToolbarState(){var _this6=this,_s$closest;if(!this.editorEl)return;var t=document.getSelection();if(!t||0===t.rangeCount)return;var i=t.getRangeAt(0);if(!this.editorEl.contains(i.commonAncestorContainer))return;var s=u(i.startContainer)||this.editorEl,e=getComputedStyle(s),n=d(i.startContainer,this.editorEl)||this.editorEl,o=function(){var t=s;for(;t&&t!==_this6.editorEl;){if(t instanceof HTMLElement){var _i8=t.tagName.toLowerCase();if("strong"===_i8||"b"===_i8)return!0;var _s5=getComputedStyle(t).fontWeight;if(parseInt(_s5,10)>=600)return!0;}t=t.parentNode;}return!1;}(),r=function(){var t=s;for(;t&&t!==_this6.editorEl;){if(t instanceof HTMLElement){var _i9=t.tagName.toLowerCase();if("em"===_i9||"i"===_i9)return!0;if("italic"===getComputedStyle(t).fontStyle)return!0;}t=t.parentNode;}return!1;}(),h=function(){var t=s;for(;t&&t!==_this6.editorEl;){if(t instanceof HTMLElement){var _i10=getComputedStyle(t).textDecorationLine;if(_i10&&_i10.includes("underline"))return!0;if("u"===t.tagName.toLowerCase())return!0;}t=t.parentNode;}return!1;}(),l=!!s.closest("a"),c=n.style.textAlign||getComputedStyle(n).textAlign||"start",a="start"===c?"left":c,m=!!s.closest("li")&&((_s$closest=s.closest("ul,ol"))===null||_s$closest===void 0?void 0:_s$closest.tagName.toLowerCase())||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",h),this.setBtnActive("link",l),this.setBtnActive("left","left"===a&&!["center","right","justify"].includes(a)),this.setBtnActive("center","center"===a),this.setBtnActive("right","right"===a),this.setBtnActive("justify","justify"===a),this.setBtnActive("ul","ul"===m),this.setBtnActive("ol","ol"===m),this.headingSelect){var _t6=n.tagName.toLowerCase(),_i11=["h1","h2","h3"].includes(_t6)?_t6:"p";this.headingSelect.value!==_i11&&(this.headingSelect.value=_i11);}if(this.fontSelect){var _t7=(e.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(_t7)for(var _i12=0,_Array$from=Array.from(this.fontSelect.options);_i12<_Array$from.length;_i12++){var _i13=_Array$from[_i12];if(_i13.value.toLowerCase()===_t7){this.fontSelect.value=_i13.value;break;}}}if(this.colorInput){var _t8=f(e.color);_t8&&this.colorInput.value.toLowerCase()!==_t8.toLowerCase()&&(this.colorInput.value=_t8),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value);}if(this.bgColorInput){var _t9=getComputedStyle(s).backgroundColor;if(_t9&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(_t9)){var _i14=f(_t9);_i14&&this.bgColorInput.value.toLowerCase()!==_i14.toLowerCase()&&(this.bgColorInput.value=_i14);}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value);}}},{key:"syncPreview",value:function syncPreview(){this.updateContent();}},{key:"updateContent",value:function updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();var t=this.editorEl.cloneNode(!0),i=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),s=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),e=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align"];var _loop=function _loop(){var t=i.currentNode,n=s.currentNode,o=window.getComputedStyle(t),r=e.map(function(t){return"".concat(t,":").concat(o.getPropertyValue(t));}).join(";");r.trim()&&n.setAttribute("style",r);};for(;i.nextNode()&&s.nextNode();){_loop();}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content},bubbles:!0,composed:!0}));}}]);}(i));t([s({type:String})],p.prototype,"value",void 0),t([s({type:Boolean,attribute:"singlelineeditor"})],p.prototype,"singleLineEditor",void 0),t([s({attribute:"mentions",converter:{fromAttribute:function fromAttribute(t){try{var _i15=JSON.parse(t),_s6={};for(var _i16=0,_Object$keys=Object.keys(_i15);_i16<_Object$keys.length;_i16++){var _t10=_Object$keys[_i16];var _e3=_i15[_t10];Array.isArray(_e3)&&(_s6[_t10]=_e3.filter(function(t){return t&&"string"==typeof t.key&&"string"==typeof t.label;}).map(function(t){return{key:t.key,label:t.label};}));}return _s6;}catch(_unused){return{};}},toAttribute:function toAttribute(t){return JSON.stringify(t);}}})],p.prototype,"mentions",void 0),t([e()],p.prototype,"content",void 0),_export("N",p=t([n("nile-rich-text-editor")],p));}};});
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-rte-toolbar.cjs.js","./nile-rte-toolbar-item.cjs.js","./nile-rte-select.cjs.js","./nile-rte-color.cjs.js","./nile-rte-divider.cjs.js","./nile-rte-preview.cjs.js","./nile-rte-mentions.cjs.js","./nile-rte-link.cjs.js","./utils.cjs.js","./nile-rich-text-editor.css.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,n,o,r,h,l,c,a,u,d,f,m,b,p;function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var n=0,F=function F(){};return{s:F,n:function(_n4){function n(){return _n4.apply(this,arguments);}n.toString=function(){return _n4.toString();};return n;}(function(){return n>=r.length?{done:!0}:{done:!1,value:r[n++]};}),e:function e(r){throw r;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var o,a=!0,u=!1;return{s:function s(){t=t.call(r);},n:function n(){var r=t.next();return a=r.done,r;},e:function e(r){u=!0,o=r;},f:function f(){try{a||null==t["return"]||t["return"]();}finally{if(u)throw o;}}};}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0;}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n;}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.LitElement;},function(_litDecoratorsJs){s=_litDecoratorsJs.property;e=_litDecoratorsJs.state;n=_litDecoratorsJs.customElement;},function(_nileRteToolbarCjsJs){},function(_nileRteToolbarItemCjsJs){},function(_nileRteSelectCjsJs){},function(_nileRteColorCjsJs){},function(_nileRteDividerCjsJs){},function(_nileRtePreviewCjsJs){},function(_nileRteMentionsCjsJs){},function(_nileRteLinkCjsJs){},function(_utilsCjsJs){o=_utilsCjsJs.t;r=_utilsCjsJs.s;h=_utilsCjsJs.a;l=_utilsCjsJs.b;c=_utilsCjsJs.c;a=_utilsCjsJs.d;u=_utilsCjsJs.n;d=_utilsCjsJs.e;f=_utilsCjsJs.r;},function(_nileRichTextEditorCssCjsJs){m=_nileRichTextEditorCssCjsJs.s;}],execute:function execute(){b={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};_export("N",p=/*#__PURE__*/function(_i){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.value="",_this.singleLineEditor=!1,_this.mentions={},_this.content="",_this.previewEl=null,_this.toolbarEl=null,_this.lastRange=null,_this.buttonMap=new Map(),_this.headingSelect=null,_this.fontSelect=null,_this.colorInput=null,_this.bgColorInput=null,_this.colorSwatchEl=null,_this.bgSwatchEl=null,_this.containerEl=null,_this.mentionsEl=null,_this.onEditorKeydown=function(t){if(_this.singleLineEditor&&"Enter"===t.key&&t.shiftKey)return void t.preventDefault();if(t.ctrlKey&&"i"===t.key.toLowerCase()&&(t.preventDefault(),o(_this.editorEl,"em"),_this.updateContent(),_this.updateToolbarState()),_this.singleLineEditor&&"Enter"===t.key)return void t.preventDefault();if("Tab"!==t.key)return;t.preventDefault(),_this.focusAndRestore();var i=window.getSelection();if(!i||0===i.rangeCount)return;var s=i.getRangeAt(0);if(t.shiftKey){if(s.collapsed&&s.startContainer.nodeType===Node.TEXT_NODE){var _t=s.startContainer,_e=s.startOffset,_n=_t.data.slice(0,_e),_o=_n.replace(/(\t|[ \u00a0]{2})$/,"");if(_o.length!==_n.length){_t.data=_o+_t.data.slice(_e);var _s=document.createRange();_s.setStart(_t,_o.length),_s.collapse(!0),i.removeAllRanges(),i.addRange(_s),_this.updateContent(),_this.updateToolbarState();}}return;}s.deleteContents();var e=document.createTextNode("\t");s.insertNode(e);var n=document.createRange();n.setStartAfter(e),n.collapse(!0),i.removeAllRanges(),i.addRange(n),_this.updateContent(),_this.updateToolbarState();},_this.onSelectionChange=function(){if(!_this.editorEl)return;var t=document.getSelection();if(!t||0===t.rangeCount)return;var i=t.getRangeAt(0);_this.editorEl.contains(i.commonAncestorContainer)&&(_this.lastRange=i.cloneRange(),_this.updateToolbarState());};return _this;}_inherits(p,_i);return _createClass(p,[{key:"createRenderRoot",value:function createRenderRoot(){return this;}},{key:"injectCss",value:function injectCss(t){if(this.querySelector("style[data-rte-style]"))return;var i=document.createElement("style");i.setAttribute("data-rte-style","true"),i.textContent=t,this.insertBefore(i,this.firstChild);}},{key:"connectedCallback",value:function connectedCallback(){var _this$mentionsEl$atta,_this$mentionsEl,_this$mentionsEl$setE,_this$mentionsEl2;_superPropGet(p,"connectedCallback",this,3)([]),this.injectCss(m.cssText),this.ensureStructure(),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&((_this$mentionsEl$atta=(_this$mentionsEl=this.mentionsEl).attach)!==null&&_this$mentionsEl$atta!==void 0&&_this$mentionsEl$atta.call(_this$mentionsEl,this.editorEl,this),(_this$mentionsEl$setE=(_this$mentionsEl2=this.mentionsEl).setExternalConfig)!==null&&_this$mentionsEl$setE!==void 0&&_this$mentionsEl$setE.call(_this$mentionsEl2,this.mentions)),this.wireEditor(),this.updateToolbarState(),this.syncPreview();}},{key:"ensureStructure",value:function ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling));}},{key:"updateContentWithMention",value:function updateContentWithMention(t){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:t},bubbles:!0,composed:!0}));}},{key:"disconnectedCallback",value:function disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),_superPropGet(p,"disconnectedCallback",this,3)([]);}},{key:"updated",value:function updated(t){t.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor));}},{key:"ensureEditor",value:function ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){var _t2=document.createElement("article");_t2.className="editor",_t2.setAttribute("contenteditable","true"),this.editorEl=_t2;}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>");}},{key:"unwrapMention",value:function unwrapMention(t){var _t$textContent;var i=arguments.length>1&&arguments[1]!==undefined?arguments[1]:!0;var s=t.parentNode;if(!s)return;var e=i?((_t$textContent=t.textContent)!==null&&_t$textContent!==void 0?_t$textContent:"").replace(/\u200B/g,""):"",n=document.createTextNode(e);s.insertBefore(n,t),s.removeChild(t);var o=document.createRange();o.setStartAfter(n),o.collapse(!0);var r=window.getSelection();r!==null&&r!==void 0&&r.removeAllRanges(),r===null||r===void 0?void 0:r.addRange(o);}},{key:"scrubBrokenMentions",value:function scrubBrokenMentions(){var _this2=this;if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach(function(t){var _i$textContent;var i=t,s=i.getAttribute("data-mention-key"),e=i.getAttribute("data-mention-label"),n=i.getAttribute("data-mention-trigger")||"",o=((_i$textContent=i.textContent)!==null&&_i$textContent!==void 0?_i$textContent:"").replace(/\u200B/g,"").trim(),r=!!s&&!!e&&o.length>0&&o.startsWith(n)&&o.includes(e);o&&r||_this2.unwrapMention(i,!0);});}},{key:"wireEditor",value:function wireEditor(){var _this3=this;this.editorEl.addEventListener("input",function(){_this3.ensureAtLeastOneParagraph(),_this3.scrubBrokenMentions(),_this3.updateContent();}),this.editorEl.addEventListener("mouseup",function(){return _this3.saveSelection();}),this.editorEl.addEventListener("keyup",function(){return _this3.saveSelection();}),this.editorEl.addEventListener("keydown",this.onEditorKeydown);}},{key:"wireAuthoredToolbar",value:function wireAuthoredToolbar(t){var _this4=this;this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(t.children).forEach(function(t){var i=t.tagName.toLowerCase();if("nile-rte-select"!==i||"align"!==t.getAttribute("type")){if("nile-rte-link"===i)return t.editorEl=_this4.editorEl,void t.addEventListener("link-changed",function(){_this4.updateContent(),_this4.updateToolbarState();});if("nile-rte-toolbar-item"===i){var _this4$buttonMap$get;var _i2=t.querySelector(":scope > nile-button");var _s2=t.getAttribute("name")||"",_e2=t.getAttribute("label")||_s2,_n2=t.getAttribute("icon"),_o2=t.innerHTML.trim().length>0;if(_i2||(_i2=document.createElement("nile-button"),_i2.variant="tertiary",_i2.size="small"),_n2)_i2.innerHTML="<nile-icon name=\"".concat(_n2,"\" aria-label=\"").concat(_e2,"\"></nile-icon>"),t.innerHTML="";else if(_o2)_i2.innerHTML=t.innerHTML,t.innerHTML="";else{var _n3=b[_s2];_n3?_i2.innerHTML="<nile-icon name=\"".concat(_n3,"\" size=\"20\" color=\"black\" aria-label=\"").concat(_e2,"\"></nile-icon>"):_i2.textContent=_e2||_s2,t.innerHTML="";}if(!_i2.isConnected){var _s3=document.createElement("nile-tooltip");_s3.setAttribute("content",_e2),_s3.appendChild(_i2),t.appendChild(_s3);}_i2.setAttribute("aria-label",_e2),_i2.addEventListener("mousedown",function(t){return t.preventDefault();}),_i2.addEventListener("click",function(){return _this4.onToolbarCommand(_s2);});var _r=(_this4$buttonMap$get=_this4.buttonMap.get(_s2))!==null&&_this4$buttonMap$get!==void 0?_this4$buttonMap$get:[];return _r.push(_i2),void _this4.buttonMap.set(_s2,_r);}if("nile-rte-select"!==i)"nile-rte-color"!==i||t.addEventListener("change",function(t){_this4.focusAndRestore();var _t$detail=t.detail,i=_t$detail.mode,s=_t$detail.value;"backColor"===i?c(_this4.editorEl,s):a(_this4.editorEl,s),_this4.updateContent(),_this4.updateToolbarState();});else{var _i3=t.getAttribute("type")||"";t.addEventListener("change",function(t){_this4.focusAndRestore();var s=t.detail;"heading"===_i3?h(_this4.editorEl,s):"font"===_i3&&l(_this4.editorEl,s),_this4.updateContent(),_this4.updateToolbarState();});}}else t.addEventListener("change",function(t){_this4.focusAndRestore();var i=t.detail;r(_this4.editorEl,i),_this4.updateContent(),_this4.updateToolbarState();});});}},{key:"saveSelection",value:function saveSelection(){var t=window.getSelection();t&&t.rangeCount&&(this.lastRange=t.getRangeAt(0).cloneRange());}},{key:"restoreSelection",value:function restoreSelection(){if(!this.lastRange)return;var t=document.getSelection();t&&(t.removeAllRanges(),t.addRange(this.lastRange));}},{key:"focusAndRestore",value:function focusAndRestore(){var _this$editorEl;(_this$editorEl=this.editorEl)!==null&&_this$editorEl!==void 0&&_this$editorEl.focus(),this.restoreSelection();}},{key:"insertList",value:function insertList(t){if(this.restoreSelection(),!this.lastRange)return;var i=document.createElement(t),s=this.lastRange.extractContents(),e=document.createElement("div");e.appendChild(s),Array.from(e.childNodes).forEach(function(t){var _t$textContent2;if(t.nodeType===Node.TEXT_NODE&&!((_t$textContent2=t.textContent)!==null&&_t$textContent2!==void 0&&_t$textContent2.trim()))return;var s=document.createElement("li");s.appendChild(t),i.appendChild(s);}),this.lastRange.insertNode(i),this.afterListEdit(i);}},{key:"afterListEdit",value:function afterListEdit(t){var i=document.createRange();i.setStartAfter(t),i.collapse(!0);var s=window.getSelection();s!==null&&s!==void 0&&s.removeAllRanges(),s!==null&&s!==void 0&&s.addRange(i),this.saveSelection(),this.updateContent(),this.updateToolbarState();}},{key:"ensureAtLeastOneParagraph",value:function ensureAtLeastOneParagraph(){var _t$textContent3;var t=this.editorEl;if(!t)return;var i=""===((_t$textContent3=t.textContent)!==null&&_t$textContent3!==void 0?_t$textContent3:"").replace(/\u200B/g,"").trim();if(0===t.childNodes.length||i)return void(t.innerHTML="<p><br></p>");if(!t.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){var _i4=document.createElement("p");for(;t.firstChild;)_i4.appendChild(t.firstChild);return _i4.hasChildNodes()||_i4.appendChild(document.createElement("br")),void t.appendChild(_i4);}t.querySelectorAll("p").forEach(function(t){var _t$textContent4;""===((_t$textContent4=t.textContent)!==null&&_t$textContent4!==void 0?_t$textContent4:"").replace(/\u200B/g,"")&&(t.innerHTML.toLowerCase().includes("<br")||(t.innerHTML="<br>"));});}},{key:"onToolbarCommand",value:function onToolbarCommand(t){switch(this.focusAndRestore(),t){case"bold":o(this.editorEl,"strong");break;case"italic":o(this.editorEl,"em");break;case"underline":o(this.editorEl,"u");break;case"left":r(this.editorEl,"left");break;case"center":r(this.editorEl,"center");break;case"right":r(this.editorEl,"right");break;case"justify":r(this.editorEl,"justify");break;case"ul":this.insertList("ul");break;case"ol":this.insertList("ol");break;case"link":break;case"clear":var _t3=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),_i5=[];for(;_t3.nextNode();){var _s4=_t3.currentNode;_s4.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(_s4.tagName)&&_i5.push(_s4);}for(var _i7=0,_i6=_i5;_i7<_i6.length;_i7++){var _t4=_i6[_i7];for(;_t4.firstChild;){var _t4$parentNode;(_t4$parentNode=_t4.parentNode)===null||_t4$parentNode===void 0||_t4$parentNode.insertBefore(_t4.firstChild,_t4);}_t4.remove();}this.ensureAtLeastOneParagraph();}this.updateContent(),this.updateToolbarState();}},{key:"setBtnActive",value:function setBtnActive(t,i){var s=this.buttonMap.get(t);if(s){var _iterator=_createForOfIteratorHelper(s),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _t5=_step.value;_t5.toggleAttribute("data-active",!!i);}}catch(err){_iterator.e(err);}finally{_iterator.f();}}}},{key:"updateToolbarState",value:function updateToolbarState(){var _this5=this,_s$closest;if(!this.editorEl)return;var t=document.getSelection();if(!t||0===t.rangeCount)return;var i=t.getRangeAt(0);if(!this.editorEl.contains(i.commonAncestorContainer))return;var s=u(i.startContainer)||this.editorEl,e=getComputedStyle(s),n=d(i.startContainer,this.editorEl)||this.editorEl,o=function(){var t=s;for(;t&&t!==_this5.editorEl;){if(t instanceof HTMLElement){var _i8=t.tagName.toLowerCase();if("strong"===_i8||"b"===_i8)return!0;var _s5=getComputedStyle(t).fontWeight;if(parseInt(_s5,10)>=600)return!0;}t=t.parentNode;}return!1;}(),r=function(){var t=s;for(;t&&t!==_this5.editorEl;){if(t instanceof HTMLElement){var _i9=t.tagName.toLowerCase();if("em"===_i9||"i"===_i9)return!0;if("italic"===getComputedStyle(t).fontStyle)return!0;}t=t.parentNode;}return!1;}(),h=function(){var t=s;for(;t&&t!==_this5.editorEl;){if(t instanceof HTMLElement){var _i10=getComputedStyle(t).textDecorationLine;if(_i10&&_i10.includes("underline"))return!0;if("u"===t.tagName.toLowerCase())return!0;}t=t.parentNode;}return!1;}(),l=!!s.closest("a"),c=n.style.textAlign||getComputedStyle(n).textAlign||"start",a="start"===c?"left":c,m=!!s.closest("li")&&((_s$closest=s.closest("ul,ol"))===null||_s$closest===void 0?void 0:_s$closest.tagName.toLowerCase())||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",h),this.setBtnActive("link",l),this.setBtnActive("left","left"===a&&!["center","right","justify"].includes(a)),this.setBtnActive("center","center"===a),this.setBtnActive("right","right"===a),this.setBtnActive("justify","justify"===a),this.setBtnActive("ul","ul"===m),this.setBtnActive("ol","ol"===m),this.headingSelect){var _t6=n.tagName.toLowerCase(),_i11=["h1","h2","h3"].includes(_t6)?_t6:"p";this.headingSelect.value!==_i11&&(this.headingSelect.value=_i11);}if(this.fontSelect){var _t7=(e.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(_t7)for(var _i12=0,_Array$from=Array.from(this.fontSelect.options);_i12<_Array$from.length;_i12++){var _i13=_Array$from[_i12];if(_i13.value.toLowerCase()===_t7){this.fontSelect.value=_i13.value;break;}}}if(this.colorInput){var _t8=f(e.color);_t8&&this.colorInput.value.toLowerCase()!==_t8.toLowerCase()&&(this.colorInput.value=_t8),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value);}if(this.bgColorInput){var _t9=getComputedStyle(s).backgroundColor;if(_t9&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(_t9)){var _i14=f(_t9);_i14&&this.bgColorInput.value.toLowerCase()!==_i14.toLowerCase()&&(this.bgColorInput.value=_i14);}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value);}}},{key:"syncPreview",value:function syncPreview(){this.updateContent();}},{key:"updateContent",value:function updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();var t=this.editorEl.cloneNode(!0),i=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),s=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),e=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align"];var _loop=function _loop(){var t=i.currentNode,n=s.currentNode,o=window.getComputedStyle(t),r=e.map(function(t){return"".concat(t,":").concat(o.getPropertyValue(t));}).join(";");r.trim()&&n.setAttribute("style",r);};for(;i.nextNode()&&s.nextNode();){_loop();}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content},bubbles:!0,composed:!0}));}}]);}(i));t([s({type:String})],p.prototype,"value",void 0),t([s({type:Boolean,attribute:"singlelineeditor"})],p.prototype,"singleLineEditor",void 0),t([s({attribute:"mentions",converter:{fromAttribute:function fromAttribute(t){try{var _i15=JSON.parse(t),_s6={};for(var _i16=0,_Object$keys=Object.keys(_i15);_i16<_Object$keys.length;_i16++){var _t10=_Object$keys[_i16];var _e3=_i15[_t10];Array.isArray(_e3)&&(_s6[_t10]=_e3.filter(function(t){return t&&"string"==typeof t.key&&"string"==typeof t.label;}).map(function(t){return{key:t.key,label:t.label};}));}return _s6;}catch(_unused){return{};}},toAttribute:function toAttribute(t){return JSON.stringify(t);}}})],p.prototype,"mentions",void 0),t([e()],p.prototype,"content",void 0),_export("N",p=t([n("nile-rich-text-editor")],p));}};});
|
2
2
|
//# sourceMappingURL=nile-rich-text-editor.cjs.js.map
|