@aquera/nile-elements 0.1.67-beta-1.6 → 0.1.67-beta-1.7

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

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let NileRteLink = class NileRteLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = 'https://';
+        this.linkValue = '';
+        this.selectionRange = null;
+    }
+    createRenderRoot() { return this; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.injectCss(`
+      nile-rte-link nile-button.rte-link-trigger::part(base) {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: none;
+        border-radius: 6px;
+      }
+      .link-popup {
+        display: flex;
+        gap: 6px;
+        padding: 6px 8px;
+        align-items: center;
+        background: white;
+      }
+      .link-input {
+        flex: 1;
+        padding: 6px 8px;
+        font-size: 14px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+        nile-popover.rte-link-popover::part(popover) {
+        min-width: 250px;
+        height: 44px;
+        padding: 0px;
+        gap: 0px;
+      }
+    `);
+    }
+    injectCss(cssText) {
+        if (this.querySelector('style[data-rte-link-style]'))
+            return;
+        const style = document.createElement('style');
+        style.setAttribute('data-rte-link-style', 'true');
+        style.textContent = cssText;
+        this.insertBefore(style, this.firstChild);
+    }
+    onOpen() {
+        if (!this.editorEl)
+            return;
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        this.selectionRange = sel.getRangeAt(0).cloneRange();
+        // Pre-fill with existing href if selection inside <a>
+        let n = sel.anchorNode;
+        let a = null;
+        while (n && n !== this.editorEl) {
+            if (n instanceof HTMLAnchorElement) {
+                a = n;
+                break;
+            }
+            n = n.parentNode;
+        }
+        this.linkValue = a?.href || '';
+        setTimeout(() => {
+            this.querySelector('.link-input')?.focus();
+        }, 0);
+    }
+    onApply() {
+        if (!this.editorEl || !this.selectionRange)
+            return;
+        const url = this.linkValue.trim();
+        if (!url)
+            return;
+        const sel = document.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        sel.addRange(this.selectionRange);
+        // Check for existing <a>
+        let n = this.selectionRange.startContainer;
+        let a = null;
+        while (n && n !== this.editorEl) {
+            if (n instanceof HTMLAnchorElement) {
+                a = n;
+                break;
+            }
+            n = n.parentNode;
+        }
+        if (a) {
+            a.href = url;
+        }
+        else {
+            const link = document.createElement('a');
+            link.href = url;
+            if (this.selectionRange.collapsed) {
+                link.textContent = url;
+                this.selectionRange.insertNode(link);
+            }
+            else {
+                try {
+                    this.selectionRange.surroundContents(link);
+                }
+                catch {
+                    const frag = this.selectionRange.extractContents();
+                    link.appendChild(frag);
+                    this.selectionRange.insertNode(link);
+                }
+            }
+        }
+        this.emit(url);
+        // Close the popover by toggling `open`
+        const pop = this.querySelector('nile-popover');
+        if (pop)
+            pop.isShow = false;
+    }
+    emit(href) {
+        this.dispatchEvent(new CustomEvent('link-changed', {
+            detail: { href },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+      <nile-popover placement="bottom-start"  class="rte-link-popover" distance="10" .arrow=${false}>
+        <nile-button class="rte-link-trigger" slot="anchor" variant="tertiary" size="small" @click=${() => this.onOpen()}>
+          <nile-icon name="link_2" aria-label="Insert/Edit Link"></nile-icon>
+        </nile-button>
+
+        <div class="link-popup">
+          <input
+            class="link-input"
+            type="text"
+            placeholder="Type or paste link here"
+            .value=${this.linkValue}
+            @input=${(e) => this.linkValue = e.target.value}
+            @keydown=${(e) => {
+            if (e.key === 'Enter')
+                this.onApply();
+            if (e.key === 'Escape') {
+                const pop = this.querySelector('nile-popover');
+                if (pop)
+                    pop.isShow = false;
+            }
+        }}
+          />
+          <nile-button @click=${() => this.onApply()}>Apply</nile-button>
+        </div>
+      </nile-popover>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], NileRteLink.prototype, "editorEl", void 0);
+__decorate([
+    property({ type: String })
+], NileRteLink.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], NileRteLink.prototype, "linkValue", void 0);
+NileRteLink = __decorate([
+    customElement('nile-rte-link')
+], NileRteLink);
+export { NileRteLink };
+//# sourceMappingURL=nile-rte-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rte-link.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rte-link.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n@customElement('nile-rte-link')\nexport class NileRteLink extends LitElement {\n  protected createRenderRoot() { return this; }\n\n  @property({ attribute: false }) editorEl!: HTMLElement;\n  @property({ type: String }) placeholder = 'https://';\n\n  @state() private linkValue = '';\n  private selectionRange: Range | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.injectCss(`\n      nile-rte-link nile-button.rte-link-trigger::part(base) {\n        width: 32px;\n        height: 32px;\n        padding: 0;\n        border: none;\n        border-radius: 6px;\n      }\n      .link-popup {\n        display: flex;\n        gap: 6px;\n        padding: 6px 8px;\n        align-items: center;\n        background: white;\n      }\n      .link-input {\n        flex: 1;\n        padding: 6px 8px;\n        font-size: 14px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n      }\n        nile-popover.rte-link-popover::part(popover) {\n        min-width: 250px;\n        height: 44px;\n        padding: 0px;\n        gap: 0px;\n      }\n    `);\n  }\n\n  private injectCss(cssText: string) {\n    if (this.querySelector('style[data-rte-link-style]')) return;\n    const style = document.createElement('style');\n    style.setAttribute('data-rte-link-style', 'true');\n    style.textContent = cssText;\n    this.insertBefore(style, this.firstChild);\n  }\n\n  private onOpen() {\n    if (!this.editorEl) return;\n    const sel = document.getSelection();\n    if (!sel || sel.rangeCount === 0) return;\n\n    this.selectionRange = sel.getRangeAt(0).cloneRange();\n\n    // Pre-fill with existing href if selection inside <a>\n    let n: Node | null = sel.anchorNode;\n    let a: HTMLAnchorElement | null = null;\n    while (n && n !== this.editorEl) {\n      if (n instanceof HTMLAnchorElement) { a = n; break; }\n      n = n.parentNode;\n    }\n    this.linkValue = a?.href || '';\n\n    setTimeout(() => {\n      this.querySelector<HTMLInputElement>('.link-input')?.focus();\n    }, 0);\n  }\n\n  private onApply() {\n    if (!this.editorEl || !this.selectionRange) return;\n    const url = this.linkValue.trim();\n    if (!url) return;\n\n    const sel = document.getSelection();\n    if (!sel) return;\n    sel.removeAllRanges();\n    sel.addRange(this.selectionRange);\n\n    // Check for existing <a>\n    let n: Node | null = this.selectionRange.startContainer;\n    let a: HTMLAnchorElement | null = null;\n    while (n && n !== this.editorEl) {\n      if (n instanceof HTMLAnchorElement) { a = n; break; }\n      n = n.parentNode;\n    }\n\n    if (a) {\n      a.href = url;\n    } else {\n      const link = document.createElement('a');\n      link.href = url;\n      if (this.selectionRange.collapsed) {\n        link.textContent = url;\n        this.selectionRange.insertNode(link);\n      } else {\n        try {\n          this.selectionRange.surroundContents(link);\n        } catch {\n          const frag = this.selectionRange.extractContents();\n          link.appendChild(frag);\n          this.selectionRange.insertNode(link);\n        }\n      }\n    }\n\n    this.emit(url);\n\n    // Close the popover by toggling `open`\n    const pop = this.querySelector('nile-popover');\n    if (pop) (pop as any).isShow = false;\n  }\n\n  private emit(href: string) {\n    this.dispatchEvent(new CustomEvent('link-changed', {\n      detail: { href },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  render() {\n    return html`\n      <nile-popover placement=\"bottom-start\"  class=\"rte-link-popover\" distance=\"10\" .arrow=${false}>\n        <nile-button class=\"rte-link-trigger\" slot=\"anchor\" variant=\"tertiary\" size=\"small\" @click=${() => this.onOpen()}>\n          <nile-icon name=\"link_2\" aria-label=\"Insert/Edit Link\"></nile-icon>\n        </nile-button>\n\n        <div class=\"link-popup\">\n          <input\n            class=\"link-input\"\n            type=\"text\"\n            placeholder=\"Type or paste link here\"\n            .value=${this.linkValue}\n            @input=${(e: any) => this.linkValue = e.target.value}\n            @keydown=${(e: KeyboardEvent) => {\n              if (e.key === 'Enter') this.onApply();\n              if (e.key === 'Escape') {\n                const pop = this.querySelector('nile-popover');\n                if (pop) (pop as any).isShow = false;\n              }\n            }}\n          />\n          <nile-button @click=${() => this.onApply()}>Apply</nile-button>\n        </div>\n      </nile-popover>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-rte-link': NileRteLink;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export declare function sanitizeContent(editorEl: HTMLElement): HTMLElement;

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

@@ -0,0 +1,40 @@
+// sanitize.ts
+export function sanitizeContent(editorEl) {
+    const clone = editorEl.cloneNode(true);
+    // Disallowed tags
+    clone.querySelectorAll('font, o\\:p, script, style').forEach(n => n.remove());
+    // Clean empty spans
+    clone.querySelectorAll('span').forEach(span => {
+        if (!span.getAttributeNames().length) {
+            while (span.firstChild)
+                span.parentNode?.insertBefore(span.firstChild, span);
+            span.remove();
+        }
+    });
+    const allowed = [
+        'font-weight', 'font-style', 'text-decoration', 'text-transform',
+        'font-size', 'line-height', 'font-family', 'color', 'background-color',
+        'text-align', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom',
+        'list-style-type'
+    ];
+    // Walk over elements and embed computed styles
+    const walker = document.createTreeWalker(editorEl, NodeFilter.SHOW_ELEMENT);
+    const targetWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
+    while (walker.nextNode() && targetWalker.nextNode()) {
+        const srcEl = walker.currentNode;
+        const dstEl = targetWalker.currentNode;
+        const comp = getComputedStyle(srcEl);
+        const safe = [];
+        allowed.forEach(prop => {
+            const val = comp.getPropertyValue(prop);
+            if (val && val !== 'normal' && val !== 'initial' && val !== 'none' && val !== '0px') {
+                safe.push(`${prop}:${val}`);
+            }
+        });
+        if (safe.length) {
+            dstEl.setAttribute('style', safe.join(';'));
+        }
+    }
+    return clone;
+}
+//# sourceMappingURL=sanatize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sanatize.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/sanatize.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,MAAM,UAAU,eAAe,CAAC,QAAqB;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;IAEtD,kBAAkB;IAClB,KAAK,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAE9E,oBAAoB;IACpB,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC5C,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAC7E,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG;QACd,aAAa,EAAC,YAAY,EAAC,iBAAiB,EAAC,gBAAgB;QAC7D,WAAW,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,kBAAkB;QAClE,YAAY,EAAC,aAAa,EAAC,cAAc,EAAC,YAAY,EAAC,eAAe;QACtE,iBAAiB;KAClB,CAAC;IAEF,+CAA+C;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5E,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/E,OAAO,MAAM,CAAC,QAAQ,EAAE,IAAI,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,WAA0B,CAAC;QAChD,MAAM,KAAK,GAAG,YAAY,CAAC,WAA0B,CAAC;QAEtD,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,IAAI,GAAa,EAAE,CAAC;QAE1B,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACrB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACxC,IAAI,GAAG,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;gBACpF,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// sanitize.ts\nexport function sanitizeContent(editorEl: HTMLElement): HTMLElement {\n    const clone = editorEl.cloneNode(true) as HTMLElement;\n  \n    // Disallowed tags\n    clone.querySelectorAll('font, o\\\\:p, script, style').forEach(n => n.remove());\n  \n    // Clean empty spans\n    clone.querySelectorAll('span').forEach(span => {\n      if (!span.getAttributeNames().length) {\n        while (span.firstChild) span.parentNode?.insertBefore(span.firstChild, span);\n        span.remove();\n      }\n    });\n  \n    const allowed = [\n      'font-weight','font-style','text-decoration','text-transform',\n      'font-size','line-height','font-family','color','background-color',\n      'text-align','margin-left','margin-right','margin-top','margin-bottom',\n      'list-style-type'\n    ];\n  \n    // Walk over elements and embed computed styles\n    const walker = document.createTreeWalker(editorEl, NodeFilter.SHOW_ELEMENT);\n    const targetWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);\n  \n    while (walker.nextNode() && targetWalker.nextNode()) {\n      const srcEl = walker.currentNode as HTMLElement;\n      const dstEl = targetWalker.currentNode as HTMLElement;\n  \n      const comp = getComputedStyle(srcEl);\n      const safe: string[] = [];\n  \n      allowed.forEach(prop => {\n        const val = comp.getPropertyValue(prop);\n        if (val && val !== 'normal' && val !== 'initial' && val !== 'none' && val !== '0px') {\n          safe.push(`${prop}:${val}`);\n        }\n      });\n  \n      if (safe.length) {\n        dstEl.setAttribute('style', safe.join(';'));\n      }\n    }\n  \n    return clone;\n  }\n  "]}