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

package/dist/src/nile-richcodeeditor/nile-richcodeeditor.js

@@ -0,0 +1,203 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let NileRichcodeeditor = class NileRichcodeeditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.content = '';
+        this.currentAlign = '';
+    }
+    firstUpdated() {
+        this.editor.addEventListener('input', () => this.updateContent());
+        this.fileInput.addEventListener('change', e => this.handleImageUpload(e));
+    }
+    applyHeading(level) {
+        const parent = this.editor.parentNode;
+        if (!parent)
+            return;
+        this.revertToNormal();
+        const wrapper = document.createElement(`h${level}`);
+        parent.insertBefore(wrapper, this.editor);
+        wrapper.appendChild(this.editor);
+        this.updateContent();
+    }
+    applyList() {
+        const parent = this.editor.parentNode;
+        if (!parent)
+            return;
+        this.revertToNormal();
+        const ul = document.createElement('ul');
+        const li = document.createElement('li');
+        parent.insertBefore(ul, this.editor);
+        ul.appendChild(li);
+        li.appendChild(this.editor);
+        this.updateContent();
+    }
+    triggerImageUpload() {
+        this.fileInput.click();
+    }
+    handleImageUpload(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (file?.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                img.alt = file.name;
+                const sel = window.getSelection();
+                if (sel?.rangeCount) {
+                    const range = sel.getRangeAt(0);
+                    range.deleteContents();
+                    range.insertNode(img);
+                    range.setStartAfter(img);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+                else {
+                    this.editor.appendChild(img);
+                }
+                this.updateContent();
+            };
+            reader.readAsDataURL(file);
+        }
+        input.value = '';
+    }
+    applyAlign(alignment) {
+        this.currentAlign = alignment;
+        this.editor.style.textAlign = alignment;
+        this.updateContent();
+    }
+    revertToNormal() {
+        const parent = this.editor.parentNode;
+        if (!parent)
+            return;
+        const tag = parent.nodeName;
+        if (!['H1', 'H2', 'H3', 'UL'].includes(tag))
+            return;
+        const grand = parent.parentNode;
+        if (!grand)
+            return;
+        grand.insertBefore(this.editor, parent);
+        grand.removeChild(parent);
+        this.updateContent();
+    }
+    updateContent() {
+        const raw = this.editor.innerHTML;
+        const parent = this.editor.parentNode;
+        let htmlContent = '';
+        if (['H1', 'H2', 'H3'].includes(parent.nodeName)) {
+            const tag = parent.nodeName.toLowerCase();
+            const style = this.currentAlign ? ` style=\"text-align:${this.currentAlign}\"` : '';
+            htmlContent = `<${tag}${style}>${raw}</${tag}>`;
+        }
+        else if (parent.nodeName === 'UL') {
+            const wrapStart = this.currentAlign ? `<div style=\"text-align:${this.currentAlign}\">` : '';
+            const wrapEnd = this.currentAlign ? '</div>' : '';
+            htmlContent = `${wrapStart}<ul><li>${raw}</li></ul>${wrapEnd}`;
+        }
+        else {
+            htmlContent = this.currentAlign
+                ? `<div style=\"text-align:${this.currentAlign}\">${raw}</div>`
+                : raw;
+        }
+        this.content = htmlContent;
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        <button title="H1" @mousedown=${(e) => e.preventDefault()} @click=${() => this.applyHeading(1)}>H1</button>
+        <button title="H2" @click=${() => this.applyHeading(2)}>H2</button>
+        <button title="H3" @click=${() => this.applyHeading(3)}>H3</button>
+        <button title="Align Left" @click=${() => this.applyAlign('left')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="3" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="3" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Center" @click=${() => this.applyAlign('center')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="6" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="6" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Right" @click=${() => this.applyAlign('right')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="9" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="9" y="19" width="12" height="2"/></svg></button>
+        <button title="Image" @click=${() => this.triggerImageUpload()}><svg viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H6l2.5-4.5z"/></svg></button>
+        <button title="Normal" @click=${() => this.revertToNormal()}><svg viewBox="0 0 24 24"><text x="4" y="18" font-size="18">T</text></svg></button>
+      </div>
+      <input class="image-input" type="file" accept="image/*" />
+      <div class="editor" contenteditable="true"></div>
+      <div class="preview">${unsafeHTML(this.content)}</div>
+    `;
+    }
+};
+/**
+ * Component styles
+ */
+NileRichcodeeditor.styles = css `
+    :host {
+      display: block;
+      font-family: Arial, sans-serif;
+    }
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .toolbar button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      background: var(--toolbar-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+    .toolbar button:hover {
+      background: var(--toolbar-hover-bg, #e0e0e0);
+    }
+    .toolbar svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+    .editor {
+      min-height: 200px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      border-radius: 4px;
+      outline: none;
+    }
+    .editor img {
+      max-width: 100%;
+      height: auto;
+    }
+    .preview {
+      margin-top: 16px;
+      padding: 8px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      background: #fafafa;
+    }
+    input[type="file"] {
+      display: none;
+    }
+  `;
+__decorate([
+    query('.editor')
+], NileRichcodeeditor.prototype, "editor", void 0);
+__decorate([
+    query('.image-input')
+], NileRichcodeeditor.prototype, "fileInput", void 0);
+__decorate([
+    state()
+], NileRichcodeeditor.prototype, "content", void 0);
+__decorate([
+    state()
+], NileRichcodeeditor.prototype, "currentAlign", void 0);
+NileRichcodeeditor = __decorate([
+    customElement('nile-richcodeeditor')
+], NileRichcodeeditor);
+export { NileRichcodeeditor };
+//# sourceMappingURL=nile-richcodeeditor.js.map

package/dist/src/nile-richcodeeditor/nile-richcodeeditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-richcodeeditor.js","sourceRoot":"","sources":["../../../src/nile-richcodeeditor/nile-richcodeeditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport { customElement, state, query } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@customElement('nile-richcodeeditor')\nexport class NileRichcodeeditor extends LitElement {\n  /**\n   * Component styles\n   */\n  static styles: CSSResultGroup = css`\n    :host {\n      display: block;\n      font-family: Arial, sans-serif;\n    }\n    .toolbar {\n      display: flex;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .toolbar button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 4px;\n      width: 32px;\n      height: 32px;\n      cursor: pointer;\n      background: var(--toolbar-bg, #f0f0f0);\n      border: 1px solid #ccc;\n      border-radius: 3px;\n    }\n    .toolbar button:hover {\n      background: var(--toolbar-hover-bg, #e0e0e0);\n    }\n    .toolbar svg {\n      width: 16px;\n      height: 16px;\n      fill: currentColor;\n    }\n    .editor {\n      min-height: 200px;\n      border: 1px solid #ccc;\n      padding: 8px;\n      border-radius: 4px;\n      outline: none;\n    }\n    .editor img {\n      max-width: 100%;\n      height: auto;\n    }\n    .preview {\n      margin-top: 16px;\n      padding: 8px;\n      border: 1px solid #eee;\n      border-radius: 4px;\n      background: #fafafa;\n    }\n    input[type=\"file\"] {\n      display: none;\n    }\n  `;\n\n  @query('.editor') private editor!: HTMLElement;\n  @query('.image-input') private fileInput!: HTMLInputElement;\n  @state() private content = '';\n  @state() private currentAlign: 'left' | 'center' | 'right' | '' = '';\n\n  firstUpdated() {\n    this.editor.addEventListener('input', () => this.updateContent());\n    this.fileInput.addEventListener('change', e => this.handleImageUpload(e));\n  }\n\n  private applyHeading(level: number) {\n    const parent = this.editor.parentNode;\n    if (!parent) return;\n    this.revertToNormal();\n    const wrapper = document.createElement(`h${level}`);\n    parent.insertBefore(wrapper, this.editor);\n    wrapper.appendChild(this.editor);\n    this.updateContent();\n  }\n\n  private applyList() {\n    const parent = this.editor.parentNode;\n    if (!parent) return;\n    this.revertToNormal();\n    const ul = document.createElement('ul');\n    const li = document.createElement('li');\n    parent.insertBefore(ul, this.editor);\n    ul.appendChild(li);\n    li.appendChild(this.editor);\n    this.updateContent();\n  }\n\n  private triggerImageUpload() {\n    this.fileInput.click();\n  }\n\n  private handleImageUpload(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file?.type.startsWith('image/')) {\n      const reader = new FileReader();\n      reader.onload = () => {\n        const img = document.createElement('img');\n        img.src = reader.result as string;\n        img.alt = file.name;\n        const sel = window.getSelection();\n        if (sel?.rangeCount) {\n          const range = sel.getRangeAt(0);\n          range.deleteContents();\n          range.insertNode(img);\n          range.setStartAfter(img);\n          range.collapse(true);\n          sel.removeAllRanges();\n          sel.addRange(range);\n        } else {\n          this.editor.appendChild(img);\n        }\n        this.updateContent();\n      };\n      reader.readAsDataURL(file);\n    }\n    input.value = '';\n  }\n\n  private applyAlign(alignment: 'left' | 'center' | 'right') {\n    this.currentAlign = alignment;\n    this.editor.style.textAlign = alignment;\n    this.updateContent();\n  }\n\n  private revertToNormal() {\n    const parent = this.editor.parentNode as HTMLElement;\n    if (!parent) return;\n    const tag = parent.nodeName;\n    if (!['H1', 'H2', 'H3', 'UL'].includes(tag)) return;\n    const grand = parent.parentNode;\n    if (!grand) return;\n    grand.insertBefore(this.editor, parent);\n    grand.removeChild(parent);\n    this.updateContent();\n  }\n\n  private updateContent() {\n    const raw = this.editor.innerHTML;\n    const parent = this.editor.parentNode as HTMLElement;\n    let htmlContent = '';\n    if (['H1', 'H2', 'H3'].includes(parent.nodeName)) {\n      const tag = parent.nodeName.toLowerCase();\n      const style = this.currentAlign ? ` style=\\\"text-align:${this.currentAlign}\\\"` : '';\n      htmlContent = `<${tag}${style}>${raw}</${tag}>`;\n    } else if (parent.nodeName === 'UL') {\n      const wrapStart = this.currentAlign ? `<div style=\\\"text-align:${this.currentAlign}\\\">` : '';\n      const wrapEnd = this.currentAlign ? '</div>' : '';\n      htmlContent = `${wrapStart}<ul><li>${raw}</li></ul>${wrapEnd}`;\n    } else {\n      htmlContent = this.currentAlign\n        ? `<div style=\\\"text-align:${this.currentAlign}\\\">${raw}</div>`\n        : raw;\n    }\n    this.content = htmlContent;\n  }\n\n  render() {\n    return html`\n      <div class=\"toolbar\">\n        <button title=\"H1\" @mousedown=${(e: MouseEvent) => e.preventDefault()} @click=${() => this.applyHeading(1)}>H1</button>\n        <button title=\"H2\" @click=${() => this.applyHeading(2)}>H2</button>\n        <button title=\"H3\" @click=${() => this.applyHeading(3)}>H3</button>\n        <button title=\"Align Left\" @click=${() => this.applyAlign('left')}><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"2\"/><rect x=\"3\" y=\"9\" width=\"12\" height=\"2\"/><rect x=\"3\" y=\"14\" width=\"18\" height=\"2\"/><rect x=\"3\" y=\"19\" width=\"12\" height=\"2\"/></svg></button>\n        <button title=\"Align Center\" @click=${() => this.applyAlign('center')}><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"2\"/><rect x=\"6\" y=\"9\" width=\"12\" height=\"2\"/><rect x=\"3\" y=\"14\" width=\"18\" height=\"2\"/><rect x=\"6\" y=\"19\" width=\"12\" height=\"2\"/></svg></button>\n        <button title=\"Align Right\" @click=${() => this.applyAlign('right')}><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"2\"/><rect x=\"9\" y=\"9\" width=\"12\" height=\"2\"/><rect x=\"3\" y=\"14\" width=\"18\" height=\"2\"/><rect x=\"9\" y=\"19\" width=\"12\" height=\"2\"/></svg></button>\n        <button title=\"Image\" @click=${() => this.triggerImageUpload()}><svg viewBox=\"0 0 24 24\"><path d=\"M21 19V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H6l2.5-4.5z\"/></svg></button>\n        <button title=\"Normal\" @click=${() => this.revertToNormal()}><svg viewBox=\"0 0 24 24\"><text x=\"4\" y=\"18\" font-size=\"18\">T</text></svg></button>\n      </div>\n      <input class=\"image-input\" type=\"file\" accept=\"image/*\" />\n      <div class=\"editor\" contenteditable=\"true\"></div>\n      <div class=\"preview\">${unsafeHTML(this.content)}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'nile-richcodeeditor': NileRichcodeeditor; }\n}\n"]}

package/dist/src/nile-richeditor/index.d.ts

@@ -0,0 +1 @@
+export { NileRicheditor } from './nile-richeditor';

package/dist/src/nile-richeditor/index.js

@@ -0,0 +1,2 @@
+export { NileRicheditor } from './nile-richeditor';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-richeditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-richeditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { NileRicheditor } from './nile-richeditor';"]}

package/dist/src/nile-richeditor/nile-richeditor.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * Richeditor CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-richeditor/nile-richeditor.css.js

@@ -0,0 +1,17 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * Richeditor CSS
+ */
+export const styles = css `
+	:host {
+
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-richeditor.css.js.map

package/dist/src/nile-richeditor/nile-richeditor.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-richeditor.css.js","sourceRoot":"","sources":["../../../src/nile-richeditor/nile-richeditor.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Richeditor CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-richeditor/nile-richeditor.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
+export declare class NileRicheditor extends LitElement {
+    static styles: CSSResultGroup;
+    private editor;
+    private lastRange;
+    firstUpdated(): void;
+    private saveRange;
+    private restoreRange;
+    render(): TemplateResult;
+    private onBlockClick;
+    private onInlineClick;
+    private formatInline;
+    private formatBlock;
+    private getBlocksInRange;
+    private getBlockParent;
+    private replaceBlock;
+    private findParentTag;
+    private unwrap;
+}

package/dist/src/nile-richeditor/nile-richeditor.js

@@ -0,0 +1,234 @@
+import { __decorate } from "tslib";
+// src/components/nile-richeditor.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+let NileRicheditor = class NileRicheditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.lastRange = null;
+    }
+    firstUpdated() {
+        this.editor.addEventListener('mouseup', () => this.saveRange());
+        this.editor.addEventListener('keyup', () => this.saveRange());
+    }
+    saveRange() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return;
+        const anchor = sel.anchorNode;
+        if (anchor && this.editor.contains(anchor)) {
+            this.lastRange = range.cloneRange();
+        }
+    }
+    restoreRange() {
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        if (this.lastRange) {
+            sel.addRange(this.lastRange);
+        }
+        else {
+            const r = document.createRange();
+            r.selectNodeContents(this.editor);
+            r.collapse(false);
+            sel.addRange(r);
+        }
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        ${['h1', 'h2', 'h3'].map(tag => html `
+          <button
+            type="button"
+            @mousedown=${(e) => e.preventDefault()}
+            @click=${() => this.onBlockClick(tag)}
+          >${tag.toUpperCase()}</button>
+        `)}
+        ${[['strong', 'B'], ['em', 'I'], ['u', 'U']].map(([tag, label]) => html `
+          <button
+            type="button"
+            @mousedown=${(e) => e.preventDefault()}
+            @click=${() => this.onInlineClick(tag)}
+          ><${label}></${label}></button>
+        `)}
+      </div>
+      <div class="editor" contenteditable="true"></div>
+    `;
+    }
+    onBlockClick(tag) {
+        this.restoreRange();
+        this.editor.focus();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        this.formatBlock(tag);
+    }
+    onInlineClick(tag) {
+        this.restoreRange();
+        this.editor.focus();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        this.formatInline(tag);
+    }
+    formatInline(tag) {
+        const sel = window.getSelection();
+        const range = sel.getRangeAt(0);
+        if (range.collapsed) {
+            const w = document.createElement(tag);
+            w.innerHTML = '<br>';
+            range.insertNode(w);
+            sel.removeAllRanges();
+            const nr = document.createRange();
+            nr.selectNodeContents(w);
+            nr.collapse(true);
+            sel.addRange(nr);
+            return;
+        }
+        const existing = this.findParentTag(range.commonAncestorContainer, tag);
+        if (existing) {
+            this.unwrap(existing);
+        }
+        else {
+            const w = document.createElement(tag);
+            w.appendChild(range.extractContents());
+            range.insertNode(w);
+            sel.removeAllRanges();
+            const nr2 = document.createRange();
+            nr2.setStartAfter(w);
+            nr2.collapse(true);
+            sel.addRange(nr2);
+        }
+    }
+    formatBlock(tag) {
+        const sel = window.getSelection();
+        if (!sel.rangeCount)
+            return;
+        const range = sel.getRangeAt(0);
+        // Collapsed: toggle or insert
+        if (range.collapsed) {
+            const block = this.getBlockParent(range.startContainer);
+            if (block) {
+                this.replaceBlock(block, tag);
+            }
+            else {
+                const h = document.createElement(tag);
+                h.innerHTML = '<br>';
+                range.insertNode(h);
+                sel.collapse(h, 0);
+            }
+            return;
+        }
+        // Non-collapsed: apply to each intersecting block
+        const blocks = this.getBlocksInRange(range);
+        if (blocks.length === 0) {
+            const newBlock = document.createElement(tag);
+            newBlock.appendChild(range.extractContents());
+            range.insertNode(newBlock);
+            sel.removeAllRanges();
+            const nr = document.createRange();
+            nr.selectNodeContents(newBlock);
+            nr.collapse(false);
+            sel.addRange(nr);
+            return;
+        }
+        blocks.forEach(block => {
+            if (block.tagName.toLowerCase() === tag) {
+                this.replaceBlock(block, 'p');
+            }
+            else {
+                this.replaceBlock(block, tag);
+            }
+        });
+    }
+    getBlocksInRange(range) {
+        const blocks = [];
+        const walker = document.createTreeWalker(this.editor, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => {
+                if (!(node instanceof HTMLElement))
+                    return NodeFilter.FILTER_SKIP;
+                const tag = node.tagName.toLowerCase();
+                if (!['p', 'h1', 'h2', 'h3', 'blockquote', 'li'].includes(tag))
+                    return NodeFilter.FILTER_SKIP;
+                const nodeRange = document.createRange();
+                nodeRange.selectNodeContents(node);
+                if (range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0 &&
+                    range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_SKIP;
+            }
+        });
+        let current = walker.nextNode();
+        while (current) {
+            if (current instanceof HTMLElement) {
+                blocks.push(current);
+            }
+            current = walker.nextNode();
+        }
+        return blocks;
+    }
+    getBlockParent(node) {
+        let el = node;
+        while (el && el !== this.editor) {
+            if (el instanceof HTMLElement &&
+                ['P', 'H1', 'H2', 'H3', 'BLOCKQUOTE', 'LI'].includes(el.tagName))
+                return el;
+            el = el.parentNode;
+        }
+        return null;
+    }
+    replaceBlock(oldB, newTag) {
+        const nb = document.createElement(newTag);
+        while (oldB.firstChild)
+            nb.appendChild(oldB.firstChild);
+        oldB.replaceWith(nb);
+    }
+    findParentTag(node, tag) {
+        let el = node;
+        while (el && el !== this.editor) {
+            if (el instanceof HTMLElement && el.tagName.toLowerCase() === tag)
+                return el;
+            el = el.parentNode;
+        }
+        return null;
+    }
+    unwrap(el) {
+        const parent = el.parentNode;
+        while (el.firstChild)
+            parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+    }
+};
+NileRicheditor.styles = css `
+    :host { display: block; font-family: Arial, sans-serif; }
+    .toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
+    .toolbar button {
+      cursor: pointer;
+      padding: 4px 8px;
+      border: 1px solid #ccc;
+      background: var(--toolbar-bg, #f0f0f0);
+      border-radius: 3px;
+    }
+    .toolbar button:hover { background: var(--toolbar-hover-bg, #e0e0e0); }
+    .editor {
+      min-height: 150px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      border-radius: 4px;
+      outline: none;
+      user-select: text;
+    }
+  `;
+__decorate([
+    query('.editor')
+], NileRicheditor.prototype, "editor", void 0);
+NileRicheditor = __decorate([
+    customElement('nile-richeditor')
+], NileRicheditor);
+export { NileRicheditor };
+//# sourceMappingURL=nile-richeditor.js.map

package/dist/src/nile-richeditor/nile-richeditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-richeditor.js","sourceRoot":"","sources":["../../../src/nile-richeditor/nile-richeditor.ts"],"names":[],"mappings":"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","sourcesContent":["// src/components/nile-richeditor.ts\nimport { LitElement, html, css, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\n\n@customElement('nile-richeditor')\nexport class NileRicheditor extends LitElement {\n  static styles: CSSResultGroup = css`\n    :host { display: block; font-family: Arial, sans-serif; }\n    .toolbar { display: flex; gap: 8px; margin-bottom: 12px; }\n    .toolbar button {\n      cursor: pointer;\n      padding: 4px 8px;\n      border: 1px solid #ccc;\n      background: var(--toolbar-bg, #f0f0f0);\n      border-radius: 3px;\n    }\n    .toolbar button:hover { background: var(--toolbar-hover-bg, #e0e0e0); }\n    .editor {\n      min-height: 150px;\n      border: 1px solid #ccc;\n      padding: 8px;\n      border-radius: 4px;\n      outline: none;\n      user-select: text;\n    }\n  `;\n\n  @query('.editor') private editor!: HTMLElement;\n  private lastRange: Range | null = null;\n\n  firstUpdated() {\n    this.editor.addEventListener('mouseup', () => this.saveRange());\n    this.editor.addEventListener('keyup',   () => this.saveRange());\n  }\n\n  private saveRange() {\n    const sel = window.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n    const range = sel.getRangeAt(0);\n    if (range.collapsed) return;\n    const anchor = sel.anchorNode;\n    if (anchor && this.editor.contains(anchor)) {\n      this.lastRange = range.cloneRange();\n    }\n  }\n\n  private restoreRange() {\n    const sel = window.getSelection();\n    if (!sel) return;\n    sel.removeAllRanges();\n    if (this.lastRange) {\n      sel.addRange(this.lastRange);\n    } else {\n      const r = document.createRange();\n      r.selectNodeContents(this.editor);\n      r.collapse(false);\n      sel.addRange(r);\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"toolbar\">\n        ${['h1','h2','h3'].map(tag => html`\n          <button\n            type=\"button\"\n            @mousedown=${(e: MouseEvent) => e.preventDefault()}\n            @click=${() => this.onBlockClick(tag)}\n          >${tag.toUpperCase()}</button>\n        `)}\n        ${[['strong','B'],['em','I'],['u','U']].map(([tag,label]) => html`\n          <button\n            type=\"button\"\n            @mousedown=${(e: MouseEvent) => e.preventDefault()}\n            @click=${() => this.onInlineClick(tag)}\n          ><${label}></${label}></button>\n        `)}\n      </div>\n      <div class=\"editor\" contenteditable=\"true\"></div>\n    `;\n  }\n\n  private onBlockClick(tag: string) {\n    this.restoreRange();\n    this.editor.focus();\n    const sel = window.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n    this.formatBlock(tag);\n  }\n\n  private onInlineClick(tag: string) {\n    this.restoreRange();\n    this.editor.focus();\n    const sel = window.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n    this.formatInline(tag);\n  }\n\n  private formatInline(tag: string) {\n    const sel = window.getSelection()!;\n    const range = sel.getRangeAt(0);\n    if (range.collapsed) {\n      const w = document.createElement(tag);\n      w.innerHTML = '<br>';\n      range.insertNode(w);\n      sel.removeAllRanges();\n      const nr = document.createRange();\n      nr.selectNodeContents(w);\n      nr.collapse(true);\n      sel.addRange(nr);\n      return;\n    }\n    const existing = this.findParentTag(range.commonAncestorContainer, tag);\n    if (existing) {\n      this.unwrap(existing);\n    } else {\n      const w = document.createElement(tag);\n      w.appendChild(range.extractContents());\n      range.insertNode(w);\n      sel.removeAllRanges();\n      const nr2 = document.createRange();\n      nr2.setStartAfter(w);\n      nr2.collapse(true);\n      sel.addRange(nr2);\n    }\n  }\n\n  private formatBlock(tag: string) {\n    const sel = window.getSelection()!;\n    if (!sel.rangeCount) return;\n    const range = sel.getRangeAt(0);\n\n    // Collapsed: toggle or insert\n    if (range.collapsed) {\n      const block = this.getBlockParent(range.startContainer);\n      if (block) {\n        this.replaceBlock(block, tag);\n      } else {\n        const h = document.createElement(tag);\n        h.innerHTML = '<br>';\n        range.insertNode(h);\n        sel.collapse(h, 0);\n      }\n      return;\n    }\n\n    // Non-collapsed: apply to each intersecting block\n    const blocks = this.getBlocksInRange(range);\n    if (blocks.length === 0) {\n      const newBlock = document.createElement(tag);\n      newBlock.appendChild(range.extractContents());\n      range.insertNode(newBlock);\n      sel.removeAllRanges();\n      const nr = document.createRange();\n      nr.selectNodeContents(newBlock);\n      nr.collapse(false);\n      sel.addRange(nr);\n      return;\n    }\n\n    blocks.forEach(block => {\n      if (block.tagName.toLowerCase() === tag) {\n        this.replaceBlock(block, 'p');\n      } else {\n        this.replaceBlock(block, tag);\n      }\n    });\n  }\n\n  private getBlocksInRange(range: Range): HTMLElement[] {\n    const blocks: HTMLElement[] = [];\n    const walker = document.createTreeWalker(\n      this.editor,\n      NodeFilter.SHOW_ELEMENT,\n      {\n        acceptNode: (node: Node) => {\n          if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;\n          const tag = node.tagName.toLowerCase();\n          if (!['p','h1','h2','h3','blockquote','li'].includes(tag)) return NodeFilter.FILTER_SKIP;\n          const nodeRange = document.createRange();\n          nodeRange.selectNodeContents(node);\n          if (\n            range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0 &&\n            range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0\n          ) {\n            return NodeFilter.FILTER_ACCEPT;\n          }\n          return NodeFilter.FILTER_SKIP;\n        }\n      }\n    );\n\n    let current = walker.nextNode();\n    while (current) {\n      if (current instanceof HTMLElement) {\n        blocks.push(current);\n      }\n      current = walker.nextNode();\n    }\n    return blocks;\n  }\n\n  private getBlockParent(node: Node): HTMLElement | null {\n    let el: Node | null = node;\n    while (el && el !== this.editor) {\n      if (\n        el instanceof HTMLElement &&\n        ['P','H1','H2','H3','BLOCKQUOTE','LI'].includes(el.tagName)\n      ) return el;\n      el = el.parentNode;\n    }\n    return null;\n  }\n\n  private replaceBlock(oldB: HTMLElement, newTag: string) {\n    const nb = document.createElement(newTag);\n    while (oldB.firstChild) nb.appendChild(oldB.firstChild);\n    oldB.replaceWith(nb);\n  }\n\n  private findParentTag(node: Node, tag: string): HTMLElement | null {\n    let el: Node | null = node;\n    while (el && el !== this.editor) {\n      if (el instanceof HTMLElement && el.tagName.toLowerCase() === tag) return el;\n      el = el.parentNode;\n    }\n    return null;\n  }\n\n  private unwrap(el: HTMLElement) {\n    const parent = el.parentNode!;\n    while (el.firstChild) parent.insertBefore(el.firstChild, el);\n    parent.removeChild(el);\n  }\n}\n"]}

package/dist/src/nile-richtexteditor/index.d.ts

@@ -0,0 +1 @@
+export { NileRichtexteditor } from './nile-richtexteditor';

package/dist/src/nile-richtexteditor/index.js

@@ -0,0 +1,2 @@
+export { NileRichtexteditor } from './nile-richtexteditor';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-richtexteditor/index.js.map

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

package/dist/src/nile-richtexteditor/nile-richtexteditor.css.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Rich Text Editor
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;