@aquera/nile-elements 0.1.64 → 0.1.65-beta-1.0

package/dist/src/nile-prosemirror-poc/nile-prosemirror-poc.js

@@ -0,0 +1,190 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import NileElement from '../internal/nile-element';
+let NileProsemirrorPoc = class NileProsemirrorPoc extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.htmlContent = '';
+        this.lastRange = null;
+        this.headingStyles = {
+            1: 'font-size:40px; margin:0.67em 0;',
+            2: 'font-size:35px; margin:0.75em 0;',
+            3: 'font-size:22px; margin:0.83em 0;'
+        };
+        this.saveSelection = () => {
+            const sel = this.editor.ownerDocument.getSelection();
+            if (sel && sel.rangeCount) {
+                this.lastRange = sel.getRangeAt(0).cloneRange();
+            }
+        };
+    }
+    firstUpdated() {
+        this.editor.addEventListener('mouseup', this.saveSelection);
+        this.editor.addEventListener('keyup', this.saveSelection);
+        this.editor.addEventListener('input', () => this.updatePreview());
+        this.updatePreview();
+    }
+    restoreSelection() {
+        if (!this.lastRange)
+            return;
+        const sel = this.editor.ownerDocument.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(this.lastRange);
+    }
+    updatePreview() {
+        this.htmlContent = this.editor.innerHTML;
+        this.dispatchEvent(new CustomEvent('content-changed', {
+            detail: { html: this.htmlContent },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        // helper to wire mousedown with preventDefault + saveSelection
+        const prepButton = (fn) => (e) => {
+            e.preventDefault();
+            this.saveSelection();
+            fn();
+        };
+        return html `
+      <div class="toolbar">
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.formatHeading(1)}>H1</button>
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.formatHeading(2)}>H2</button>
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.formatHeading(3)}>H3</button>
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.wrapSelection('strong')}>Bold</button>
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.wrapSelection('em')}>Italic</button>
+        <button @mousedown=${prepButton(() => { })} @click=${() => this.wrapSelection('u')}>Underline</button>
+        <button @mousedown=${(e) => { e.preventDefault(); }} @click=${() => this.openFilePicker()}>Insert Image</button>
+        <input id="fileInput" class="hidden-file-input" type="file" accept="image/*"
+          @change=${this.onFileSelected}/>
+      </div>
+
+      <div id="editor" class="editor" contenteditable="true"></div>
+      <div class="preview">${unsafeHTML(this.htmlContent)}</div>
+    `;
+    }
+    formatHeading(level) {
+        this.editor.focus();
+        requestAnimationFrame(() => {
+            this.restoreSelection();
+            const sel = this.editor.ownerDocument.getSelection();
+            if (!sel || !sel.rangeCount)
+                return;
+            const range = sel.getRangeAt(0);
+            // ✋ only proceed if the selection is inside our editor
+            if (!this.editor.contains(range.commonAncestorContainer)) {
+                console.warn('Selection not inside editor – skipping formatHeading');
+                return;
+            }
+            // extract, wrap, insert
+            const content = range.extractContents();
+            const heading = document.createElement(`h${level}`);
+            heading.setAttribute('style', this.headingStyles[level]);
+            heading.appendChild(content);
+            range.insertNode(heading);
+            // collapse cursor after new heading
+            const after = document.createRange();
+            after.setStartAfter(heading);
+            after.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(after);
+            this.updatePreview();
+            this.editor.focus();
+        });
+    }
+    wrapSelection(tag) {
+        this.editor.focus();
+        requestAnimationFrame(() => {
+            this.restoreSelection();
+            const sel = this.editor.ownerDocument.getSelection();
+            if (!sel || !sel.rangeCount)
+                return;
+            const range = sel.getRangeAt(0);
+            // guard against out‑of‑editor insertion
+            if (!this.editor.contains(range.commonAncestorContainer)) {
+                console.warn('Selection not inside editor – skipping wrapSelection');
+                return;
+            }
+            const content = range.extractContents();
+            const wrapper = document.createElement(tag);
+            wrapper.appendChild(content);
+            range.insertNode(wrapper);
+            // place caret just after the wrapper
+            const newRange = document.createRange();
+            newRange.setStartAfter(wrapper);
+            newRange.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(newRange);
+            this.updatePreview();
+            this.editor.focus();
+        });
+    }
+    openFilePicker() {
+        this.fileInput.click();
+    }
+    onFileSelected(e) {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            const img = document.createElement('img');
+            img.src = reader.result;
+            this.editor.focus();
+            requestAnimationFrame(() => {
+                this.restoreSelection();
+                const sel = this.editor.ownerDocument.getSelection();
+                if (sel && sel.rangeCount) {
+                    sel.getRangeAt(0).insertNode(img);
+                }
+                else {
+                    this.editor.appendChild(img);
+                }
+                this.updatePreview();
+            });
+        };
+        reader.readAsDataURL(file);
+    }
+};
+NileProsemirrorPoc.styles = css `
+    :host { display: block; font-family: sans-serif; }
+    .toolbar { margin-bottom: 8px; }
+    .toolbar button {
+      margin-right: 6px;
+      padding: 4px 8px;
+      font-size: 0.9em;
+    }
+    .editor {
+      min-height: 150px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      border-radius: 4px;
+      outline: none;
+    }
+    .editor h1, .editor h2, .editor h3 { margin: 0; }
+    .preview {
+      margin-top: 16px;
+      padding: 8px;
+      border: 1px dashed #aaa;
+      background: #fafafa;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    .hidden-file-input { display: none; }
+  `;
+__decorate([
+    query('#editor')
+], NileProsemirrorPoc.prototype, "editor", void 0);
+__decorate([
+    query('#fileInput')
+], NileProsemirrorPoc.prototype, "fileInput", void 0);
+__decorate([
+    state()
+], NileProsemirrorPoc.prototype, "htmlContent", void 0);
+NileProsemirrorPoc = __decorate([
+    customElement('nile-prosemirror-poc')
+], NileProsemirrorPoc);
+export { NileProsemirrorPoc };
+//# sourceMappingURL=nile-prosemirror-poc.js.map

package/dist/src/nile-prosemirror-poc/nile-prosemirror-poc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-prosemirror-poc.js","sourceRoot":"","sources":["../../../src/nile-prosemirror-poc/nile-prosemirror-poc.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QA8BY,gBAAW,GAAG,EAAE,CAAC;QAE1B,cAAS,GAAiB,IAAI,CAAC;QAC/B,kBAAa,GAA0B;YAC7C,CAAC,EAAE,kCAAkC;YACrC,CAAC,EAAE,kCAAkC;YACrC,CAAC,EAAE,kCAAkC;SACtC,CAAC;QASM,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;YACrD,IAAI,GAAG,IAAI,GAAG,CAAC,UAAU,EAAE,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;IAuIJ,CAAC;IAnJC,YAAY;QACV,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAK,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAI,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IASO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAG,CAAC;QACtD,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACpD,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,+DAA+D;QAC/D,MAAM,UAAU,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,CAAC,CAAa,EAAE,EAAE;YACvD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,EAAE,EAAE,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,IAAI,CAAA;;6BAEc,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;6BAC1D,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;6BAC1D,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;6BAC1D,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;6BACjE,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;6BAC7D,UAAU,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;6BAC5D,CAAC,CAAa,EAAE,EAAE,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;;oBAEzF,IAAI,CAAC,cAAc;;;;6BAIV,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;KACpD,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;YACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU;gBAAE,OAAO;YAEpC,MAAM,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YAEhC,uDAAuD;YACvD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,CAAC;gBACzD,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;gBACrE,OAAO;YACT,CAAC;YAED,wBAAwB;YACxB,MAAM,OAAO,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;YACpD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;YACzD,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC7B,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAE1B,oCAAoC;YACpC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;YACrC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC7B,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACrB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAEpB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,GAAsB;QAC1C,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;YACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU;gBAAE,OAAO;YAEpC,MAAM,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YAEhC,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,CAAC;gBACzD,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;gBACrE,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC7B,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAE1B,qCAAqC;YACrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;YACxC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACxB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAEvB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,IAAI,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAChC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,MAAgB,CAAC;YAClC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;gBACrD,IAAI,GAAG,IAAI,GAAG,CAAC,UAAU,EAAE,CAAC;oBAC1B,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;gBACpC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;gBAC/B,CAAC;gBACD,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QACF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;;AAxLM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,AAzBY,CAyBX;AAEwB;IAAzB,KAAK,CAAC,SAAS,CAAC;kDAA8B;AAClB;IAA5B,KAAK,CAAC,YAAY,CAAC;qDAAsC;AACzC;IAAhB,KAAK,EAAE;uDAA0B;AA9BvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA0L9B","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport NileElement from '../internal/nile-element';\n\n@customElement('nile-prosemirror-poc')\nexport class NileProsemirrorPoc extends NileElement {\n  static styles = css`\n    :host { display: block; font-family: sans-serif; }\n    .toolbar { margin-bottom: 8px; }\n    .toolbar button {\n      margin-right: 6px;\n      padding: 4px 8px;\n      font-size: 0.9em;\n    }\n    .editor {\n      min-height: 150px;\n      border: 1px solid #ccc;\n      padding: 8px;\n      border-radius: 4px;\n      outline: none;\n    }\n    .editor h1, .editor h2, .editor h3 { margin: 0; }\n    .preview {\n      margin-top: 16px;\n      padding: 8px;\n      border: 1px dashed #aaa;\n      background: #fafafa;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n    .hidden-file-input { display: none; }\n  `;\n\n  @query('#editor') private editor!: HTMLElement;\n  @query('#fileInput') private fileInput!: HTMLInputElement;\n  @state() private htmlContent = '';\n\n  private lastRange: Range | null = null;\n  private headingStyles: Record<number,string> = {\n    1: 'font-size:40px; margin:0.67em 0;',\n    2: 'font-size:35px; margin:0.75em 0;',\n    3: 'font-size:22px; margin:0.83em 0;'\n  };\n\n  firstUpdated() {\n    this.editor.addEventListener('mouseup',  this.saveSelection);\n    this.editor.addEventListener('keyup',    this.saveSelection);\n    this.editor.addEventListener('input',   () => this.updatePreview());\n    this.updatePreview();\n  }\n\n  private saveSelection = () => {\n    const sel = this.editor.ownerDocument.getSelection();\n    if (sel && sel.rangeCount) {\n      this.lastRange = sel.getRangeAt(0).cloneRange();\n    }\n  };\n\n  private restoreSelection() {\n    if (!this.lastRange) return;\n    const sel = this.editor.ownerDocument.getSelection()!;\n    sel.removeAllRanges();\n    sel.addRange(this.lastRange);\n  }\n\n  private updatePreview() {\n    this.htmlContent = this.editor.innerHTML;\n    this.dispatchEvent(new CustomEvent('content-changed', {\n      detail: { html: this.htmlContent },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  render(): TemplateResult {\n    // helper to wire mousedown with preventDefault + saveSelection\n    const prepButton = (fn: () => void) => (e: MouseEvent) => {\n      e.preventDefault();\n      this.saveSelection();\n      fn();\n    };\n\n    return html`\n      <div class=\"toolbar\">\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.formatHeading(1)}>H1</button>\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.formatHeading(2)}>H2</button>\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.formatHeading(3)}>H3</button>\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.wrapSelection('strong')}>Bold</button>\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.wrapSelection('em')}>Italic</button>\n        <button @mousedown=${prepButton(() => {})} @click=${() => this.wrapSelection('u')}>Underline</button>\n        <button @mousedown=${(e: MouseEvent) => { e.preventDefault(); }} @click=${() => this.openFilePicker()}>Insert Image</button>\n        <input id=\"fileInput\" class=\"hidden-file-input\" type=\"file\" accept=\"image/*\"\n          @change=${this.onFileSelected}/>\n      </div>\n\n      <div id=\"editor\" class=\"editor\" contenteditable=\"true\"></div>\n      <div class=\"preview\">${unsafeHTML(this.htmlContent)}</div>\n    `;\n  }\n\n  private formatHeading(level: 1|2|3) {\n    this.editor.focus();\n    requestAnimationFrame(() => {\n      this.restoreSelection();\n      const sel = this.editor.ownerDocument.getSelection();\n      if (!sel || !sel.rangeCount) return;\n\n      const range = sel.getRangeAt(0);\n\n      // ✋ only proceed if the selection is inside our editor\n      if (!this.editor.contains(range.commonAncestorContainer)) {\n        console.warn('Selection not inside editor – skipping formatHeading');\n        return;\n      }\n\n      // extract, wrap, insert\n      const content = range.extractContents();\n      const heading = document.createElement(`h${level}`);\n      heading.setAttribute('style', this.headingStyles[level]);\n      heading.appendChild(content);\n      range.insertNode(heading);\n\n      // collapse cursor after new heading\n      const after = document.createRange();\n      after.setStartAfter(heading);\n      after.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(after);\n\n      this.updatePreview();\n      this.editor.focus();\n    });\n  }\n\n  private wrapSelection(tag: 'strong'|'em'|'u') {\n    this.editor.focus();\n    requestAnimationFrame(() => {\n      this.restoreSelection();\n      const sel = this.editor.ownerDocument.getSelection();\n      if (!sel || !sel.rangeCount) return;\n\n      const range = sel.getRangeAt(0);\n\n      // guard against out‑of‑editor insertion\n      if (!this.editor.contains(range.commonAncestorContainer)) {\n        console.warn('Selection not inside editor – skipping wrapSelection');\n        return;\n      }\n\n      const content = range.extractContents();\n      const wrapper = document.createElement(tag);\n      wrapper.appendChild(content);\n      range.insertNode(wrapper);\n\n      // place caret just after the wrapper\n      const newRange = document.createRange();\n      newRange.setStartAfter(wrapper);\n      newRange.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(newRange);\n\n      this.updatePreview();\n      this.editor.focus();\n    });\n  }\n\n  private openFilePicker() {\n    this.fileInput.click();\n  }\n\n  private onFileSelected(e: Event) {\n    const file = (e.target as HTMLInputElement).files?.[0];\n    if (!file) return;\n    const reader = new FileReader();\n    reader.onload = () => {\n      const img = document.createElement('img');\n      img.src = reader.result as string;\n      this.editor.focus();\n      requestAnimationFrame(() => {\n        this.restoreSelection();\n        const sel = this.editor.ownerDocument.getSelection();\n        if (sel && sel.rangeCount) {\n          sel.getRangeAt(0).insertNode(img);\n        } else {\n          this.editor.appendChild(img);\n        }\n        this.updatePreview();\n      });\n    };\n    reader.readAsDataURL(file);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-prosemirror-poc': NileProsemirrorPoc;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { NileRichTextEditor } from './nile-rich-text-editor';

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

@@ -0,0 +1,2 @@
+export { NileRichTextEditor } from './nile-rich-text-editor';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { NileRichTextEditor } from './nile-rich-text-editor';"]}

package/dist/src/{nile-slider/nile-slider.css.d.ts → nile-rich-text-editor/nile-rich-text-editor.css.d.ts}

@@ -1,6 +1,3 @@
-/**
-* Slider CSS
-*/
 export declare const styles: import("lit").CSSResult;
 declare const _default: import("lit").CSSResult[];
 export default _default;

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

@@ -0,0 +1,91 @@
+// rte-styles.ts
+import { css } from 'lit';
+export const styles = css `
+  /* Host positioning for overlays */
+  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;
+}
+ 
+ 
+
+
+      .toolbar, nile-rte-toolbar {
+        display:flex; align-items:center; gap:8px; 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 { font-size:2em   }
+      .editor h2 { font-size:1.5em  }
+      .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; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none; }
+      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+
+      .rte-color-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nile-color-border, #d9d9d9);
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.rte-color-trigger .glyph-stack {
+  display: grid;               /* stack vertically */
+  grid-auto-rows: max-content; 
+  align-items: center;
+  justify-items: center;
+  line-height: 1;
+}
+
+.rte-color-trigger .glyph {
+  font-size: 14px;
+  line-height: 1;
+  margin-bottom: 2px;          /* little breathing space above underline */
+}
+
+.rte-color-trigger .underline {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;    /* we override via JS with backgroundColor */
+}
+
+/* (unchanged) highlight square */
+.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 */
+}
+
+`;
+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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n  /* Host positioning for overlays */\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 \n \n\n\n      .toolbar, nile-rte-toolbar {\n        display:flex; align-items:center; gap:8px; 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 { font-size:2em   }\n      .editor h2 { font-size:1.5em  }\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; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none; }\n      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }\n\n      .rte-color-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--nile-color-border, #d9d9d9);\n  border-radius: 6px;\n  background: #fff;\n  cursor: pointer;\n}\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;          /* little breathing space above underline */\n}\n\n.rte-color-trigger .underline {\n  width: 18px;\n  height: 3px;\n  border-radius: 2px;\n  background: currentColor;    /* we override via JS with backgroundColor */\n}\n\n/* (unchanged) highlight square */\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}\n\n`;\n\nexport default [styles];"]}

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

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+import './nile-rte-toolbar';
+import './nile-rte-toolbar-item';
+import './nile-rte-select';
+import './nile-rte-color';
+import './nile-rte-divider';
+import './nile-rte-preview';
+import './nile-rte-mentions';
+type MentionsConfig = Record<string, {
+    key: string;
+    label: string;
+}[]>;
+export declare class NileRichTextEditor extends LitElement {
+    protected createRenderRoot(): this;
+    protected shouldUpdate(): boolean;
+    /** Initial HTML content */
+    value: string;
+    /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+    mentions: MentionsConfig;
+    private content;
+    private editorEl;
+    private previewEl;
+    private toolbarEl;
+    private lastRange;
+    private buttonMap;
+    private headingSelect;
+    private fontSelect;
+    private colorInput;
+    private bgColorInput;
+    private colorSwatchEl;
+    private bgSwatchEl;
+    private mentionsEl;
+    private injectCss;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureEditor;
+    private wireEditor;
+    private wireAuthoredToolbar;
+    private onSelectionChange;
+    private saveSelection;
+    private restoreSelection;
+    private focusAndRestore;
+    private insertList;
+    private afterListEdit;
+    private ensureAtLeastOneParagraph;
+    private onToolbarCommand;
+    private setBtnActive;
+    private updateToolbarState;
+    private syncPreview;
+    private updateContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rich-text-editor': NileRichTextEditor;
+    }
+}
+export {};