@aquera/nile-elements 0.1.67-beta-2.3 → 0.1.67-beta-2.4

package/dist/nile-rich-text-editor/nile-rich-text-editor.esm.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as i}from"lit";import{property as e,state as s,customElement as n}from"lit/decorators.js";import"./nile-rte-toolbar.esm.js";import"./nile-rte-toolbar-item.esm.js";import"./nile-rte-select.esm.js";import"./nile-rte-color.esm.js";import"./nile-rte-divider.esm.js";import"./nile-rte-preview.esm.js";import"./nile-rte-mentions.esm.js";import"./nile-rte-link.esm.js";import{t as o,s as r,a as h,b as l,c,d as a,n as u,e as d,r as f}from"./utils.esm.js";import{s as m}from"./nile-rich-text-editor.css.esm.js";const 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"};let p=class extends i{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=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();const i=window.getSelection();if(!i||0===i.rangeCount)return;const e=i.getRangeAt(0);if(t.shiftKey){if(e.collapsed&&e.startContainer.nodeType===Node.TEXT_NODE){const t=e.startContainer,s=e.startOffset,n=t.data.slice(0,s),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){t.data=o+t.data.slice(s);const e=document.createRange();e.setStart(t,o.length),e.collapse(!0),i.removeAllRanges(),i.addRange(e),this.updateContent(),this.updateToolbarState()}}return}e.deleteContents();const s=document.createTextNode("\t");e.insertNode(s);const n=document.createRange();n.setStartAfter(s),n.collapse(!0),i.removeAllRanges(),i.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const t=document.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);this.editorEl.contains(i.commonAncestorContainer)&&(this.lastRange=i.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}shouldUpdate(){return!1}injectCss(t){if(this.querySelector("style[data-rte-style]"))return;const i=document.createElement("style");i.setAttribute("data-rte-style","true"),i.textContent=t,this.insertBefore(i,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(m.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",(t=>{this.updateContentWithMention(t.detail)}))}updateContentWithMention(t){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:t},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}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))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const t=document.createElement("article");t.className="editor",t.setAttribute("contenteditable","true"),this.singleLineEditor&&t.classList.add("single-line"),this.toolbarEl?.nextSibling?this.insertBefore(t,this.toolbarEl.nextSibling):this.previewEl?this.insertBefore(t,this.previewEl):this.appendChild(t),this.editorEl=t}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>"),this.ensureAtLeastOneParagraph()}unwrapMention(t,i=!0){const e=t.parentNode;if(!e)return;const s=i?(t.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(s);e.insertBefore(n,t),e.removeChild(t);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((t=>{const i=t,e=i.getAttribute("data-mention-key"),s=i.getAttribute("data-mention-label"),n=i.getAttribute("data-mention-trigger")||"",o=(i.textContent??"").replace(/\u200B/g,"").trim(),r=!!e&&!!s&&o.length>0&&o.startsWith(n)&&o.includes(s);o&&r||this.unwrapMention(i,!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(t){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(t.children).forEach((t=>{const i=t.tagName.toLowerCase();if("nile-rte-select"!==i||"align"!==t.getAttribute("type")){if("nile-rte-link"===i)return t.editorEl=this.editorEl,void t.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===i){let i=t.querySelector(":scope > nile-button");const e=t.getAttribute("name")||"",s=t.getAttribute("label")||e,n=t.getAttribute("icon"),o=t.innerHTML.trim().length>0;if(i||(i=document.createElement("nile-button"),i.variant="tertiary",i.size="small"),n)i.innerHTML=`<nile-icon name="${n}" aria-label="${s}"></nile-icon>`,t.innerHTML="";else if(o)i.innerHTML=t.innerHTML,t.innerHTML="";else{const n=b[e];n?i.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${s}"></nile-icon>`:i.textContent=s||e,t.innerHTML=""}if(!i.isConnected){const e=document.createElement("nile-tooltip");e.setAttribute("content",s),e.appendChild(i),t.appendChild(e)}i.setAttribute("aria-label",s),i.addEventListener("mousedown",(t=>t.preventDefault())),i.addEventListener("click",(()=>this.onToolbarCommand(e)));const r=this.buttonMap.get(e)??[];return r.push(i),void this.buttonMap.set(e,r)}if("nile-rte-select"!==i)"nile-rte-color"!==i||t.addEventListener("change",(t=>{this.focusAndRestore();const{mode:i,value:e}=t.detail;"backColor"===i?c(this.editorEl,e):a(this.editorEl,e),this.updateContent(),this.updateToolbarState()}));else{const i=t.getAttribute("type")||"";t.addEventListener("change",(t=>{this.focusAndRestore();const e=t.detail;"heading"===i?h(this.editorEl,e):"font"===i&&l(this.editorEl,e),this.updateContent(),this.updateToolbarState()}))}}else t.addEventListener("change",(t=>{this.focusAndRestore();const i=t.detail;r(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const t=window.getSelection();t&&t.rangeCount&&(this.lastRange=t.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const t=document.getSelection();t&&(t.removeAllRanges(),t.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}insertList(t){if(this.restoreSelection(),!this.lastRange)return;const i=document.createElement(t),e=this.lastRange.extractContents(),s=document.createElement("div");s.appendChild(e),Array.from(s.childNodes).forEach((t=>{if(t.nodeType===Node.TEXT_NODE&&!t.textContent?.trim())return;const e=document.createElement("li");e.appendChild(t),i.appendChild(e)})),this.lastRange.insertNode(i),this.afterListEdit(i)}afterListEdit(t){const i=document.createRange();i.setStartAfter(t),i.collapse(!0);const e=window.getSelection();e?.removeAllRanges(),e?.addRange(i),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const t=this.editorEl;if(!t)return;const i=""===(t.textContent??"").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")){const i=document.createElement("p");for(;t.firstChild;)i.appendChild(t.firstChild);return i.hasChildNodes()||i.appendChild(document.createElement("br")),void t.appendChild(i)}t.querySelectorAll("p").forEach((t=>{""===(t.textContent??"").replace(/\u200B/g,"")&&(t.innerHTML.toLowerCase().includes("<br")||(t.innerHTML="<br>"))}))}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":const t=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=[];for(;t.nextNode();){const e=t.currentNode;e.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(e.tagName)&&i.push(e)}for(const t of i){for(;t.firstChild;)t.parentNode?.insertBefore(t.firstChild,t);t.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(t,i){const e=this.buttonMap.get(t);if(e)for(const t of e)t.toggleAttribute("data-active",!!i)}updateToolbarState(){if(!this.editorEl)return;const t=document.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(!this.editorEl.contains(i.commonAncestorContainer))return;const e=u(i.startContainer)||this.editorEl,s=getComputedStyle(e),n=d(i.startContainer,this.editorEl)||this.editorEl,o=(()=>{let t=e;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=t.tagName.toLowerCase();if("strong"===i||"b"===i)return!0;const e=getComputedStyle(t).fontWeight;if(parseInt(e,10)>=600)return!0}t=t.parentNode}return!1})(),r=(()=>{let t=e;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=t.tagName.toLowerCase();if("em"===i||"i"===i)return!0;if("italic"===getComputedStyle(t).fontStyle)return!0}t=t.parentNode}return!1})(),h=(()=>{let t=e;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=getComputedStyle(t).textDecorationLine;if(i&&i.includes("underline"))return!0;if("u"===t.tagName.toLowerCase())return!0}t=t.parentNode}return!1})(),l=!!e.closest("a"),c=n.style.textAlign||getComputedStyle(n).textAlign||"start",a="start"===c?"left":c,m=!!e.closest("li")&&e.closest("ul,ol")?.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){const t=n.tagName.toLowerCase(),i=["h1","h2","h3"].includes(t)?t:"p";this.headingSelect.value!==i&&(this.headingSelect.value=i)}if(this.fontSelect){const t=(s.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(t)for(const i of Array.from(this.fontSelect.options))if(i.value.toLowerCase()===t){this.fontSelect.value=i.value;break}}if(this.colorInput){const t=f(s.color);t&&this.colorInput.value.toLowerCase()!==t.toLowerCase()&&(this.colorInput.value=t),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const t=getComputedStyle(e).backgroundColor;if(t&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(t)){const i=f(t);i&&this.bgColorInput.value.toLowerCase()!==i.toLowerCase()&&(this.bgColorInput.value=i)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const t=this.editorEl.cloneNode(!0),i=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),e=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),s=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align"];for(;i.nextNode()&&e.nextNode();){const t=i.currentNode,n=e.currentNode,o=window.getComputedStyle(t),r=s.map((t=>`${t}:${o.getPropertyValue(t)}`)).join(";");r.trim()&&n.setAttribute("style",r)}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}))}};t([e({type:String})],p.prototype,"value",void 0),t([e({type:Boolean,attribute:"singlelineeditor"})],p.prototype,"singleLineEditor",void 0),t([e({attribute:"mentions",converter:{fromAttribute:t=>{try{const i=JSON.parse(t),e={};for(const t of Object.keys(i)){const s=i[t];Array.isArray(s)&&(e[t]=s.filter((t=>t&&"string"==typeof t.key&&"string"==typeof t.label)).map((t=>({key:t.key,label:t.label}))))}return e}catch{return{}}},toAttribute:t=>JSON.stringify(t)}})],p.prototype,"mentions",void 0),t([s()],p.prototype,"content",void 0),p=t([n("nile-rich-text-editor")],p);export{p as N};
+import{__decorate as t}from"tslib";import{LitElement as i}from"lit";import{property as s,state as e,customElement as n}from"lit/decorators.js";import"./nile-rte-toolbar.esm.js";import"./nile-rte-toolbar-item.esm.js";import"./nile-rte-select.esm.js";import"./nile-rte-color.esm.js";import"./nile-rte-divider.esm.js";import"./nile-rte-preview.esm.js";import"./nile-rte-mentions.esm.js";import"./nile-rte-link.esm.js";import{t as o,s as r,a as h,b as l,c,d as a,n as u,e as d,r as f}from"./utils.esm.js";import{s as m}from"./nile-rich-text-editor.css.esm.js";const 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"};let p=class extends i{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=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();const i=window.getSelection();if(!i||0===i.rangeCount)return;const s=i.getRangeAt(0);if(t.shiftKey){if(s.collapsed&&s.startContainer.nodeType===Node.TEXT_NODE){const 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);const s=document.createRange();s.setStart(t,o.length),s.collapse(!0),i.removeAllRanges(),i.addRange(s),this.updateContent(),this.updateToolbarState()}}return}s.deleteContents();const e=document.createTextNode("\t");s.insertNode(e);const n=document.createRange();n.setStartAfter(e),n.collapse(!0),i.removeAllRanges(),i.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const t=document.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);this.editorEl.contains(i.commonAncestorContainer)&&(this.lastRange=i.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(t){if(this.querySelector("style[data-rte-style]"))return;const i=document.createElement("style");i.setAttribute("data-rte-style","true"),i.textContent=t,this.insertBefore(i,this.firstChild)}connectedCallback(){super.connectedCallback(),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.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(t){this.updateContent(),this.dispatchEvent(new CustomEvent("content-changed",{detail:{content:this.content,mention:t},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange,!0),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}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))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const t=document.createElement("article");t.className="editor",t.setAttribute("contenteditable","true"),this.editorEl=t}this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(t,i=!0){const s=t.parentNode;if(!s)return;const e=i?(t.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(e);s.insertBefore(n,t),s.removeChild(t);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((t=>{const i=t,s=i.getAttribute("data-mention-key"),e=i.getAttribute("data-mention-label"),n=i.getAttribute("data-mention-trigger")||"",o=(i.textContent??"").replace(/\u200B/g,"").trim(),r=!!s&&!!e&&o.length>0&&o.startsWith(n)&&o.includes(e);o&&r||this.unwrapMention(i,!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(t){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(t.children).forEach((t=>{const i=t.tagName.toLowerCase();if("nile-rte-select"!==i||"align"!==t.getAttribute("type")){if("nile-rte-link"===i)return t.editorEl=this.editorEl,void t.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===i){let i=t.querySelector(":scope > nile-button");const s=t.getAttribute("name")||"",e=t.getAttribute("label")||s,n=t.getAttribute("icon"),o=t.innerHTML.trim().length>0;if(i||(i=document.createElement("nile-button"),i.variant="tertiary",i.size="small"),n)i.innerHTML=`<nile-icon name="${n}" aria-label="${e}"></nile-icon>`,t.innerHTML="";else if(o)i.innerHTML=t.innerHTML,t.innerHTML="";else{const n=b[s];n?i.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${e}"></nile-icon>`:i.textContent=e||s,t.innerHTML=""}if(!i.isConnected){const s=document.createElement("nile-tooltip");s.setAttribute("content",e),s.appendChild(i),t.appendChild(s)}i.setAttribute("aria-label",e),i.addEventListener("mousedown",(t=>t.preventDefault())),i.addEventListener("click",(()=>this.onToolbarCommand(s)));const r=this.buttonMap.get(s)??[];return r.push(i),void this.buttonMap.set(s,r)}if("nile-rte-select"!==i)"nile-rte-color"!==i||t.addEventListener("change",(t=>{this.focusAndRestore();const{mode:i,value:s}=t.detail;"backColor"===i?c(this.editorEl,s):a(this.editorEl,s),this.updateContent(),this.updateToolbarState()}));else{const i=t.getAttribute("type")||"";t.addEventListener("change",(t=>{this.focusAndRestore();const s=t.detail;"heading"===i?h(this.editorEl,s):"font"===i&&l(this.editorEl,s),this.updateContent(),this.updateToolbarState()}))}}else t.addEventListener("change",(t=>{this.focusAndRestore();const i=t.detail;r(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const t=window.getSelection();t&&t.rangeCount&&(this.lastRange=t.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const t=document.getSelection();t&&(t.removeAllRanges(),t.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}insertList(t){if(this.restoreSelection(),!this.lastRange)return;const i=document.createElement(t),s=this.lastRange.extractContents(),e=document.createElement("div");e.appendChild(s),Array.from(e.childNodes).forEach((t=>{if(t.nodeType===Node.TEXT_NODE&&!t.textContent?.trim())return;const s=document.createElement("li");s.appendChild(t),i.appendChild(s)})),this.lastRange.insertNode(i),this.afterListEdit(i)}afterListEdit(t){const i=document.createRange();i.setStartAfter(t),i.collapse(!0);const s=window.getSelection();s?.removeAllRanges(),s?.addRange(i),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const t=this.editorEl;if(!t)return;const i=""===(t.textContent??"").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")){const i=document.createElement("p");for(;t.firstChild;)i.appendChild(t.firstChild);return i.hasChildNodes()||i.appendChild(document.createElement("br")),void t.appendChild(i)}t.querySelectorAll("p").forEach((t=>{""===(t.textContent??"").replace(/\u200B/g,"")&&(t.innerHTML.toLowerCase().includes("<br")||(t.innerHTML="<br>"))}))}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":const t=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=[];for(;t.nextNode();){const s=t.currentNode;s.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(s.tagName)&&i.push(s)}for(const t of i){for(;t.firstChild;)t.parentNode?.insertBefore(t.firstChild,t);t.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(t,i){const s=this.buttonMap.get(t);if(s)for(const t of s)t.toggleAttribute("data-active",!!i)}updateToolbarState(){if(!this.editorEl)return;const t=document.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(!this.editorEl.contains(i.commonAncestorContainer))return;const s=u(i.startContainer)||this.editorEl,e=getComputedStyle(s),n=d(i.startContainer,this.editorEl)||this.editorEl,o=(()=>{let t=s;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=t.tagName.toLowerCase();if("strong"===i||"b"===i)return!0;const s=getComputedStyle(t).fontWeight;if(parseInt(s,10)>=600)return!0}t=t.parentNode}return!1})(),r=(()=>{let t=s;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=t.tagName.toLowerCase();if("em"===i||"i"===i)return!0;if("italic"===getComputedStyle(t).fontStyle)return!0}t=t.parentNode}return!1})(),h=(()=>{let t=s;for(;t&&t!==this.editorEl;){if(t instanceof HTMLElement){const i=getComputedStyle(t).textDecorationLine;if(i&&i.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("ul,ol")?.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){const t=n.tagName.toLowerCase(),i=["h1","h2","h3"].includes(t)?t:"p";this.headingSelect.value!==i&&(this.headingSelect.value=i)}if(this.fontSelect){const t=(e.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(t)for(const i of Array.from(this.fontSelect.options))if(i.value.toLowerCase()===t){this.fontSelect.value=i.value;break}}if(this.colorInput){const t=f(e.color);t&&this.colorInput.value.toLowerCase()!==t.toLowerCase()&&(this.colorInput.value=t),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const t=getComputedStyle(s).backgroundColor;if(t&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(t)){const i=f(t);i&&this.bgColorInput.value.toLowerCase()!==i.toLowerCase()&&(this.bgColorInput.value=i)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const 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"];for(;i.nextNode()&&s.nextNode();){const t=i.currentNode,n=s.currentNode,o=window.getComputedStyle(t),r=e.map((t=>`${t}:${o.getPropertyValue(t)}`)).join(";");r.trim()&&n.setAttribute("style",r)}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}))}};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:t=>{try{const i=JSON.parse(t),s={};for(const t of Object.keys(i)){const e=i[t];Array.isArray(e)&&(s[t]=e.filter((t=>t&&"string"==typeof t.key&&"string"==typeof t.label)).map((t=>({key:t.key,label:t.label}))))}return s}catch{return{}}},toAttribute:t=>JSON.stringify(t)}})],p.prototype,"mentions",void 0),t([e()],p.prototype,"content",void 0),p=t([n("nile-rich-text-editor")],p);export{p as N};

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js

@@ -1,142 +1,133 @@
-// rte-styles.ts
+// FILE: src/components/rte-styles.ts
 import { css } from 'lit';
 export const styles = css `
-   
-   
-   .editor {all: revert;}
-
-  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
-
-       
-nile-rte-toolbar-item  nile-button::part(base) {
- 
-  width:32px; height:32px; padding:0px 6px;
-  border: none;
-}
- 
-nile-rte-preview {
-  white-space: normal;
-  word-break: break-word;
-}
-
-
-.editor.single-line {
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-  border-radius: 8px;
-}
-
-
-
-
-
-
-      .toolbar, nile-rte-toolbar {
-        width:486px;  
-        display:flex; align-items:center; gap:6px; padding:8px; 
-        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
-      }
-
-      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {
-        border:1px solid #e5e7eb; background:#fff; border-radius:6px;
-        cursor:pointer;
-      }
-
-  
-      /* Ensure clicks hit the button (not nested icon internals) */
-      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }
-
-      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }
-      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
-      nile-rte-color input[type="color"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }
-      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
-
-       .editor p { margin:1em 0; }
-      .editor h1, .preview h1 {  all: revert; font-size:2em, display: block;
-font-size: 2em;
-margin-top: 0.67em;
-margin-bottom: 0.67em;
-margin-left: 0;
-margin-right: 0;
-font-weight: bold;  }
-      .editor h2, .preview h2 { all: revert;	display: block;
-font-size: 1.5em;
-margin-top: 0.83em;
-margin-bottom: 0.83em;
-margin-left: 0;
-margin-right: 0;
-font-weight: bold;}
-      .editor h3 { font-size:1.17em  }
-      .editor h4 { font-size:1em  }
-      .editor h5 { font-size:0.83em  }
-      .editor h6 { font-size:0.67em  }
-
-      .editor {   min-height:160px; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;  
-  tab-size: 4;           
-  -moz-tab-size: 4; 
-  word-break: break-word; 
-     }
-      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }
-
-      nile-rte-preview.single-line {
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-      .rte-color-trigger {
-  display: inline-flex;
+  .editor { all: revert; }
+
+  nile-rich-text-editor {
+    position: relative;
+    display: block;
+    font-family: inherit;
+  }
+
+  /* --- Card 1: Toolbar + Editor --- */
+  .rte-container {
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #fff;
+    box-sizing: border-box;
+  }
+
+ /* Toolbar inside container */
+.rte-container nile-rte-toolbar {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  /* border: 1px solid var(--nile-color-border, #d9d9d9); */
-  border-radius: 6px;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid #e5e7eb;
   background: #fff;
-  cursor: pointer;
-  border:none;
- 
+  border-radius: 8px 8px 0 0;
 
-}
-nile-button.rte-color-trigger::part(base){
-  width:32px; height:32px; padding:0px 6px;
-}
-.rte-color-trigger .glyph-stack {
-  display: grid;               /* stack vertically */
-  grid-auto-rows: max-content; 
-  align-items: center;
-  justify-items: center;
-  line-height: 1;
+  width: 100%;            
+  box-sizing: border-box; 
 }
 
-.rte-color-trigger .glyph {
-  font-size: 14px;
-  line-height: 1;
-  margin-bottom: 2px;          
-}
 
-.rte-color-trigger .underline {
-  width: 18px;
-  height: 3px;
-  border-radius: 2px;
-  background: currentColor;    
-}
- 
-.rte-color-trigger .swatch-box {
-  width: 18px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,0.35);
-  background: currentColor;    /* overridden via JS */
-}
-nile-rte-toolbar-item  nile-button[data-active]::part(base) {
-  background-color: var(--nile-colors-primary-400);
+  .rte-container .editor {
+    min-height: 160px;
+    width: 100%;
+    padding: 12px;
+    background: #fff;
+    border-radius: 0 0 8px 8px;
+    outline: none;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-break: break-word;
+    box-sizing: border-box;
+    border-radius: 8px;
+  }
+
+  /* --- Card 2: Preview --- */
+ /* Preview card */
+nile-rte-preview {
+  display: block;
+  width: 100%;
+  margin-top: 16px;       
+  padding: 12px;
+  border: 1px dashed #e5e7eb;
+  border-radius: 8px;
+  background: #fafafa;
+  box-sizing: border-box;
+  word-wrap: break-word;
 }
 
-nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
-  background-color: var(--nile-colors-primary-500);  
-}
+
+  /* Toolbar button styling */
+  nile-rte-toolbar-item nile-button::part(base) {
+    width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    border: none;
+  }
+
+  nile-rte-toolbar-item > button,
+  nile-rte-toolbar button {
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  nile-rte-toolbar-item > button nile-icon { pointer-events: none; }
+
+  nile-rte-toolbar-item > button.active {
+    border-color: #2563eb;
+    background: #eff6ff;
+  }
+
+  /* Heading normalization */
+  .editor p { margin: 1em 0; }
+  .editor h1, .preview h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+    font-weight: bold;
+  }
+  .editor h2, .preview h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+    font-weight: bold;
+  }
+  .editor h3 { font-size: 1.17em; }
+  .editor h4 { font-size: 1em; }
+  .editor h5 { font-size: 0.83em; }
+  .editor h6 { font-size: 0.67em; }
+
+  /* Single-line variant */
+  .editor.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 0px 12px 0px 12px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-preview.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    padding: 0px 12px 0px 12px;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-divider { 
+  margin: 0 4px;
+  display: inline-block;
+  height: 24px;
+  width: 1px;
+  background: #E6E9EB;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-rich-text-editor.css.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-rich-text-editor.css.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.css.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n   \n   \n   .editor {all: revert;}\n\n  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }\n\n       \nnile-rte-toolbar-item  nile-button::part(base) {\n \n  width:32px; height:32px; padding:0px 6px;\n  border: none;\n}\n \nnile-rte-preview {\n  white-space: normal;\n  word-break: break-word;\n}\n\n\n.editor.single-line {\n  width: 478px;\n  min-height: 50px;\n  overflow-x: auto;\n  white-space: nowrap;\n  border-radius: 8px;\n}\n\n\n\n\n\n\n      .toolbar, nile-rte-toolbar {\n        width:486px;  \n        display:flex; align-items:center; gap:6px; padding:8px; \n        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;\n      }\n\n      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {\n        border:1px solid #e5e7eb; background:#fff; border-radius:6px;\n        cursor:pointer;\n      }\n\n  \n      /* Ensure clicks hit the button (not nested icon internals) */\n      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }\n\n      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }\n      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }\n      nile-rte-color input[type=\"color\"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }\n      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }\n\n       .editor p { margin:1em 0; }\n      .editor h1, .preview h1 {  all: revert; font-size:2em, display: block;\nfont-size: 2em;\nmargin-top: 0.67em;\nmargin-bottom: 0.67em;\nmargin-left: 0;\nmargin-right: 0;\nfont-weight: bold;  }\n      .editor h2, .preview h2 { all: revert;\tdisplay: block;\nfont-size: 1.5em;\nmargin-top: 0.83em;\nmargin-bottom: 0.83em;\nmargin-left: 0;\nmargin-right: 0;\nfont-weight: bold;}\n      .editor h3 { font-size:1.17em  }\n      .editor h4 { font-size:1em  }\n      .editor h5 { font-size:0.83em  }\n      .editor h6 { font-size:0.67em  }\n\n      .editor {   min-height:160px; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;  \n  tab-size: 4;           \n  -moz-tab-size: 4; \n  word-break: break-word; \n     }\n      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }\n\n      nile-rte-preview.single-line {\n  width: 478px;\n  min-height: 50px;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n\n      .rte-color-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* border: 1px solid var(--nile-color-border, #d9d9d9); */\n  border-radius: 6px;\n  background: #fff;\n  cursor: pointer;\n  border:none;\n \n\n}\nnile-button.rte-color-trigger::part(base){\n  width:32px; height:32px; padding:0px 6px;\n}\n.rte-color-trigger .glyph-stack {\n  display: grid;               /* stack vertically */\n  grid-auto-rows: max-content; \n  align-items: center;\n  justify-items: center;\n  line-height: 1;\n}\n\n.rte-color-trigger .glyph {\n  font-size: 14px;\n  line-height: 1;\n  margin-bottom: 2px;          \n}\n\n.rte-color-trigger .underline {\n  width: 18px;\n  height: 3px;\n  border-radius: 2px;\n  background: currentColor;    \n}\n \n.rte-color-trigger .swatch-box {\n  width: 18px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1px solid rgba(0,0,0,0.35);\n  background: currentColor;    /* overridden via JS */\n}\nnile-rte-toolbar-item  nile-button[data-active]::part(base) {\n  background-color: var(--nile-colors-primary-400);\n}\n\nnile-rte-toolbar-item nile-button[data-active]::part(base):hover {\n  background-color: var(--nile-colors-primary-500);  \n}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-rich-text-editor.css.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.css.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// FILE: src/components/rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n  .editor { all: revert; }\n\n  nile-rich-text-editor {\n    position: relative;\n    display: block;\n    font-family: inherit;\n  }\n\n  /* --- Card 1: Toolbar + Editor --- */\n  .rte-container {\n    width: 100%;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n /* Toolbar inside container */\n.rte-container nile-rte-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px;\n  border-bottom: 1px solid #e5e7eb;\n  background: #fff;\n  border-radius: 8px 8px 0 0;\n\n  width: 100%;            \n  box-sizing: border-box; \n}\n\n\n  .rte-container .editor {\n    min-height: 160px;\n    width: 100%;\n    padding: 12px;\n    background: #fff;\n    border-radius: 0 0 8px 8px;\n    outline: none;\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    box-sizing: border-box;\n    border-radius: 8px;\n  }\n\n  /* --- Card 2: Preview --- */\n /* Preview card */\nnile-rte-preview {\n  display: block;\n  width: 100%;\n  margin-top: 16px;       \n  padding: 12px;\n  border: 1px dashed #e5e7eb;\n  border-radius: 8px;\n  background: #fafafa;\n  box-sizing: border-box;\n  word-wrap: break-word;\n}\n\n\n  /* Toolbar button styling */\n  nile-rte-toolbar-item nile-button::part(base) {\n    width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    border: none;\n  }\n\n  nile-rte-toolbar-item > button,\n  nile-rte-toolbar button {\n    border: 1px solid #e5e7eb;\n    background: #fff;\n    border-radius: 6px;\n    cursor: pointer;\n  }\n\n  nile-rte-toolbar-item > button nile-icon { pointer-events: none; }\n\n  nile-rte-toolbar-item > button.active {\n    border-color: #2563eb;\n    background: #eff6ff;\n  }\n\n  /* Heading normalization */\n  .editor p { margin: 1em 0; }\n  .editor h1, .preview h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n    font-weight: bold;\n  }\n  .editor h2, .preview h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n    font-weight: bold;\n  }\n  .editor h3 { font-size: 1.17em; }\n  .editor h4 { font-size: 1em; }\n  .editor h5 { font-size: 0.83em; }\n  .editor h6 { font-size: 0.67em; }\n\n  /* Single-line variant */\n  .editor.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    overflow-x: auto;\n    white-space: nowrap;\n    padding: 0px 12px 0px 12px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-preview.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    padding: 0px 12px 0px 12px;\n    overflow-x: auto;\n    white-space: nowrap;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-divider { \n  margin: 0 4px;\n  display: inline-block;\n  height: 24px;\n  width: 1px;\n  background: #E6E9EB;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.d.ts

@@ -13,7 +13,6 @@ type MentionsConfig = Record<string, {
 }[]>;
 export declare class NileRichTextEditor extends LitElement {
     protected createRenderRoot(): this;
-    protected shouldUpdate(): boolean;
     value: string;
     singleLineEditor: boolean;
     mentions: MentionsConfig;
@@ -29,9 +28,11 @@ export declare class NileRichTextEditor extends LitElement {
     private bgColorInput;
     private colorSwatchEl;
     private bgSwatchEl;
+    private containerEl;
     private mentionsEl;
     private injectCss;
     connectedCallback(): void;
+    private ensureStructure;
     private updateContentWithMention;
     disconnectedCallback(): void;
     protected updated(changed: Map<string, any>): void;

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js

@@ -28,6 +28,7 @@ const DEFAULT_ICONS = {
 let NileRichTextEditor = class NileRichTextEditor extends LitElement {
     constructor() {
         super(...arguments);
+        // protected shouldUpdate() { return false; }    
         this.value = '';
         this.singleLineEditor = false;
         this.mentions = {};
@@ -42,6 +43,7 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         this.bgColorInput = null;
         this.colorSwatchEl = null;
         this.bgSwatchEl = null;
+        this.containerEl = null;
         this.mentionsEl = null;
         this.onEditorKeydown = (e) => {
             if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
@@ -110,7 +112,6 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         };
     }
     createRenderRoot() { return this; }
-    shouldUpdate() { return false; }
     injectCss(cssText) {
         if (this.querySelector('style[data-rte-style]'))
             return;
@@ -122,13 +123,7 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.injectCss(styles.cssText);
-        this.toolbarEl = this.querySelector('nile-rte-toolbar');
-        this.previewEl = this.querySelector('nile-rte-preview');
-        if (this.singleLineEditor) {
-            this.editorEl?.classList.add('single-line');
-            this.previewEl?.classList.add('single-line');
-        }
-        this.ensureEditor();
+        this.ensureStructure();
         if (this.value && !this.editorEl.innerHTML.trim()) {
             this.editorEl.innerHTML = this.value;
         }
@@ -143,11 +138,35 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         this.wireEditor();
         this.updateToolbarState();
         this.syncPreview();
-        document.addEventListener('selectionchange', this.onSelectionChange, true);
-        if (this.mentionsEl) {
-            this.mentionsEl.addEventListener('mention-selected', (e) => {
-                this.updateContentWithMention(e.detail);
-            });
+    }
+    ensureStructure() {
+        this.toolbarEl = this.querySelector('nile-rte-toolbar');
+        this.previewEl = this.querySelector('nile-rte-preview');
+        // container for toolbar + editor
+        this.containerEl = this.querySelector('.rte-container');
+        if (!this.containerEl) {
+            this.containerEl = document.createElement('div');
+            this.containerEl.className = 'rte-container';
+            this.appendChild(this.containerEl);
+        }
+        // ensure editor
+        this.ensureEditor();
+        // put toolbar + editor inside container
+        if (this.toolbarEl && this.toolbarEl.parentElement !== this.containerEl) {
+            this.containerEl.appendChild(this.toolbarEl);
+        }
+        if (this.editorEl.parentElement !== this.containerEl) {
+            this.containerEl.appendChild(this.editorEl);
+        }
+        // 👉 move preview OUTSIDE container, right after it
+        if (this.previewEl) {
+            if (this.previewEl.parentElement !== this) {
+                this.appendChild(this.previewEl);
+            }
+            // ensure preview is placed AFTER container
+            if (this.previewEl.previousElementSibling !== this.containerEl) {
+                this.insertBefore(this.previewEl, this.containerEl.nextSibling);
+            }
         }
     }
     updateContentWithMention(mentionDetail) {
@@ -184,23 +203,11 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
             const editor = document.createElement('article');
             editor.className = 'editor';
             editor.setAttribute('contenteditable', 'true');
-            if (this.singleLineEditor)
-                editor.classList.add('single-line');
-            if (this.toolbarEl?.nextSibling) {
-                this.insertBefore(editor, this.toolbarEl.nextSibling);
-            }
-            else if (this.previewEl) {
-                this.insertBefore(editor, this.previewEl);
-            }
-            else {
-                this.appendChild(editor);
-            }
             this.editorEl = editor;
         }
         if (!this.editorEl.innerHTML.trim()) {
             this.editorEl.innerHTML = '<p><br></p>';
         }
-        this.ensureAtLeastOneParagraph();
     }
     unwrapMention(span, preserveText = true) {
         const parent = span.parentNode;