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

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

@@ -0,0 +1,591 @@
+var NileLightdomeditor_1;
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styles } from './nile-lightdomeditor.css';
+let NileLightdomeditor = NileLightdomeditor_1 = class NileLightdomeditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toolbar = '';
+        this.mentions = {};
+        // Mention-related state
+        this.mentionOpen = false;
+        this.mentionTrigger = null;
+        this.mentionQuery = '';
+        this.mentionSuggestions = [];
+        this.mentionFiltered = [];
+        this.mentionX = 0;
+        this.mentionY = 0;
+        this.previewHTML = '';
+        this.characterCount = 0;
+        this.wordCount = 0;
+        this.lastRange = null;
+    }
+    createRenderRoot() {
+        return this;
+    }
+    // Default toolbar layout matching the design
+    get parsedToolbar() {
+        if (this.toolbar) {
+            return this.toolbar.split(',').map(k => k.trim()).filter(k => Object.keys(this.constructor.TOOLBAR_CONFIG).includes(k));
+        }
+        // Default layout matching the design
+        return ['bold', 'italic', 'underline', 'font', 'fontsize', 'color', 'background', 'border', 'left', 'center', 'right', 'justify', 'ul', 'ol', 'heading', 'link', 'hr',]; //'quote', 'code', 'image', 
+    }
+    render() {
+        return html `
+  <style>
+    ${styles}
+  </style>
+
+    <input id="imageInput" type="file" accept="image/*" @change="${this.onImageSelected}" />
+
+    <div class="editor-container">
+      <div class="toolbar">
+        ${this.parsedToolbar.map(key => NileLightdomeditor_1.TOOLBAR_CONFIG[key](this))}
+      </div>
+      <div
+  class="editor"
+  contenteditable="true"
+  @keydown="${(e) => this.onKeyDown(e)}"
+  @keyup="${(e) => this.onKeyUp(e)}"
+  @input="${() => this.syncPreview()}"
+  @mouseup="${() => this.saveSelection()}"
+></div>
+
+     
+      ${this.mentionOpen ? html `
+        <ul class="mention-dropdown" style="top:${this.mentionY}px; left:${this.mentionX}px">
+          ${this.mentionFiltered.map(item => html `<li @mousedown=${() => this.selectMention(item)}>${item.label}</li>`)}
+          <!-- ${this.mentionFiltered.map(item => html `<li @mousedown=…>${item.label}</li>`)} -->
+
+        </ul>
+      ` : ''}
+      
+      <div class="status-bar">
+        <span>Characters: ${this.characterCount}</span>
+        <span>Words: ${this.wordCount}</span>
+      </div>
+    </div>
+
+    <h3>Preview</h3>
+    <div class="preview">
+      <div class="content">${unsafeHTML(this.previewHTML)}</div>
+    </div>
+  `;
+    }
+    onKeyUp(e) {
+        const key = e.key;
+        // always keep lastRange up to date
+        this.saveSelection();
+        // if we just typed a trigger and dropdown is closed, open it
+        if (!this.mentionOpen && this.mentions[key]) {
+            this.openMention(key);
+        }
+    }
+    onKeyDown(e) {
+        if (!this.mentionOpen)
+            return;
+        const key = e.key;
+        if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter') {
+            e.preventDefault();
+            if (key === 'Enter' && this.mentionFiltered.length) {
+                this.selectMention(this.mentionFiltered[0]);
+            }
+        }
+    }
+    openMention(trigger) {
+        this.saveSelection();
+        if (!this.lastRange)
+            return;
+        const caretRange = this.lastRange.cloneRange();
+        caretRange.collapse(false);
+        const rects = caretRange.getClientRects();
+        if (!rects.length) {
+            console.error('no caret rect; is the range in a text node?');
+            return;
+        }
+        const caretRect = rects[0];
+        const container = this.editor.closest('.editor-container');
+        const anchorRect = container
+            ? container.getBoundingClientRect()
+            : this.editor.getBoundingClientRect();
+        this.mentionX = caretRect.left - anchorRect.left + (this.editor.scrollLeft || 0);
+        this.mentionY = caretRect.bottom - anchorRect.top + (this.editor.scrollTop || 0);
+        this.mentionTrigger = trigger;
+        this.mentionSuggestions = this.mentions[trigger] || [];
+        this.mentionQuery = '';
+        this.updateMentionFiltered();
+        this.mentionOpen = true;
+    }
+    closeMention() {
+        this.mentionOpen = false;
+        this.mentionTrigger = null;
+    }
+    handleMention() {
+        if (!this.mentionOpen || !this.mentionTrigger)
+            return;
+        const sel = window.getSelection();
+        if (!sel || !sel.anchorNode)
+            return;
+        const text = sel.anchorNode.textContent || '';
+        const idx = text.lastIndexOf(this.mentionTrigger);
+        if (idx >= 0) {
+            this.mentionQuery = text.substring(idx + 1);
+            this.updateMentionFiltered();
+        }
+        else {
+            this.closeMention();
+        }
+    }
+    updateMentionFiltered() {
+        const q = this.mentionQuery.toLowerCase();
+        this.mentionFiltered = this.mentionSuggestions.filter(item => item.label.toLowerCase().startsWith(q));
+    }
+    selectMention(item) {
+        this.restoreSelection();
+        if (!this.lastRange || !this.mentionTrigger)
+            return;
+        let node = this.lastRange.startContainer;
+        let offset = this.lastRange.startOffset;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            const child = node.childNodes[offset];
+            if (child?.nodeType === Node.TEXT_NODE) {
+                node = child;
+                offset = 0;
+            }
+            else
+                return;
+        }
+        const textNode = node;
+        const text = textNode.textContent || '';
+        const atIndex = text.lastIndexOf(this.mentionTrigger, offset);
+        if (atIndex < 0)
+            return;
+        const endIndex = atIndex + 1 + this.mentionQuery.length;
+        const mentionRange = document.createRange();
+        mentionRange.setStart(textNode, atIndex);
+        mentionRange.setEnd(textNode, endIndex);
+        mentionRange.deleteContents();
+        const span = document.createElement('span');
+        span.classList.add('mention');
+        span.textContent = `${this.mentionTrigger}${item.key}`;
+        mentionRange.insertNode(span);
+        const spaceNode = document.createTextNode('\u00A0');
+        span.after(spaceNode);
+        const sel = window.getSelection();
+        const afterRange = document.createRange();
+        afterRange.setStartAfter(spaceNode);
+        afterRange.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(afterRange);
+        this.lastRange = afterRange.cloneRange();
+        this.closeMention();
+        this.syncPreview();
+    }
+    saveSelection() {
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount)
+            this.lastRange = sel.getRangeAt(0).cloneRange();
+    }
+    restoreSelection() {
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        if (this.lastRange)
+            sel?.addRange(this.lastRange);
+    }
+    format(tag) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const el = document.createElement(tag);
+        el.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(el);
+        this.afterEdit(el);
+    }
+    formatHeadingFromDropdown(tag) {
+        if (!tag)
+            return;
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        let node = this.lastRange.startContainer;
+        while (node && node !== this.editor && !(node instanceof HTMLElement && /^(H[1-6]|P|DIV)$/i.test(node.tagName))) {
+            node = node.parentNode;
+        }
+        if (node instanceof HTMLElement && node !== this.editor) {
+            const replacement = document.createElement(tag);
+            replacement.innerHTML = node.innerHTML;
+            node.replaceWith(replacement);
+            this.afterEdit(replacement);
+            return;
+        }
+        const el = document.createElement(tag);
+        el.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(el);
+        this.afterEdit(el);
+    }
+    formatAlign(alignment) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        let node = this.lastRange.startContainer;
+        while (node && node !== this.editor && !(node instanceof HTMLElement && getComputedStyle(node).display === 'block'))
+            node = node.parentNode;
+        if (node instanceof HTMLElement && node !== this.editor) {
+            node.style.textAlign = node.style.textAlign === alignment ? '' : alignment;
+            this.afterEdit(node);
+            return;
+        }
+        const wrapper = document.createElement('div');
+        wrapper.style.textAlign = alignment;
+        wrapper.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(wrapper);
+        this.afterEdit(wrapper);
+    }
+    formatList(type) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const list = document.createElement(type);
+        const frag = this.lastRange.extractContents();
+        const temp = document.createElement('div');
+        temp.appendChild(frag);
+        temp.childNodes.forEach(n => { const li = document.createElement('li'); li.appendChild(n); list.appendChild(li); });
+        this.lastRange.insertNode(list);
+        this.afterEdit(list);
+    }
+    promptLink() {
+        const url = prompt('Enter URL:', 'https://');
+        if (url)
+            this.formatLink(url);
+    }
+    formatColor(color) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const span = document.createElement('span');
+        span.style.color = color;
+        span.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(span);
+        this.afterEdit(span);
+        // Update color bar
+        const colorBar = this.querySelector('.color-bar');
+        if (colorBar)
+            colorBar.style.backgroundColor = color;
+    }
+    formatBackgroundColor(color) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const span = document.createElement('span');
+        span.style.backgroundColor = color;
+        span.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(span);
+        this.afterEdit(span);
+    }
+    formatLink(href) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const a = document.createElement('a');
+        a.href = href;
+        a.target = '_blank';
+        a.rel = 'noopener';
+        a.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(a);
+        this.afterEdit(a);
+    }
+    promptImage() { this.imageInput.value = ''; this.imageInput.click(); }
+    onImageSelected(e) {
+        const input = e.target;
+        if (input.files?.length) {
+            const reader = new FileReader();
+            reader.onload = () => this.formatImage(reader.result);
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+    formatImage(src) {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = 'Image';
+        this.lastRange.insertNode(img);
+        this.afterEdit(img);
+    }
+    formatFontFamily(font) {
+        if (!font)
+            return;
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const span = document.createElement('span');
+        span.style.fontFamily = font;
+        span.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(span);
+        this.afterEdit(span);
+    }
+    formatFontSize(size) {
+        if (!size)
+            return;
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const span = document.createElement('span');
+        span.style.fontSize = size;
+        span.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(span);
+        this.afterEdit(span);
+    }
+    toggleBorder() {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const span = document.createElement('span');
+        span.style.border = '1px solid #000';
+        span.style.padding = '2px';
+        span.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(span);
+        this.afterEdit(span);
+    }
+    insertHorizontalRule() {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const hr = document.createElement('hr');
+        this.lastRange.insertNode(hr);
+        this.afterEdit(hr);
+    }
+    formatQuote() {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const blockquote = document.createElement('blockquote');
+        blockquote.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(blockquote);
+        this.afterEdit(blockquote);
+    }
+    formatCode() {
+        this.restoreSelection();
+        if (!this.lastRange)
+            return;
+        const code = document.createElement('code');
+        code.appendChild(this.lastRange.extractContents());
+        this.lastRange.insertNode(code);
+        this.afterEdit(code);
+    }
+    afterEdit(node) {
+        const range = document.createRange();
+        range.setStartAfter(node);
+        range.collapse(true);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        this.saveSelection();
+        this.syncPreview();
+    }
+    updateCounts() {
+        const text = this.editor.textContent || '';
+        this.characterCount = text.length;
+        this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
+    }
+    syncPreview() {
+        this.previewHTML = this.editor.innerHTML;
+        this.updateCounts();
+        console.log('nile-lightdomeditor content-changed:', this.previewHTML);
+        this.dispatchEvent(new CustomEvent('content-changed', { detail: { html: this.previewHTML }, bubbles: true, composed: true }));
+    }
+};
+/**
+ * Map of toolbar keys to render functions with icons
+ * Each function receives the component instance to call instance methods
+ */
+NileLightdomeditor.TOOLBAR_CONFIG = {
+    bold: self => html `<button type="button" @click="${() => self.format('b')}" title="Bold" class="format-btn">
+      <strong>B</strong>
+    </button>`,
+    italic: self => html `<button type="button" @click="${() => self.format('i')}" title="Italic" class="format-btn">
+      <em>I</em>
+    </button>`,
+    underline: self => html `<button type="button" @click="${() => self.format('u')}" title="Underline" class="format-btn">
+      <u>U</u>
+    </button>`,
+    font: self => html `
+      <select @change="${(e) => self.formatFontFamily(e.target.value)}" class="font-select">
+        <option value="">Arial</option>
+        <option value="Arial, sans-serif">Arial</option>
+        <option value="'Times New Roman', serif">Times New Roman</option>
+        <option value="'Courier New', monospace">Courier New</option>
+        <option value="Georgia, serif">Georgia</option>
+        <option value="Verdana, sans-serif">Verdana</option>
+        <option value="'Comic Sans MS', cursive">Comic Sans MS</option>
+        <option value="Impact, sans-serif">Impact</option>
+      </select>`,
+    fontsize: self => html `
+      <select @change="${(e) => self.formatFontSize(e.target.value)}" class="fontsize-select">
+        <option value="8px">8px</option>
+        <option value="10px">10p</option>
+        <option value="12px">12p</option>
+        <option value="14px">14p</option>
+        <option value="16px">16p</option>
+        <option value="18px">18p</option>
+        <option value="24px">24p</option>
+        <option value="32px">32p</option>
+        <option value="48px">48p</option>
+        <option value="72px">72p</option>
+      </select>`,
+    color: self => html `
+      <label class="color-picker text-color" title="Text Color">
+        <span class="color-icon">T</span>
+        <div class="color-bar" style="background-color: #000;"></div>
+        <input type="color" @input="${(e) => self.formatColor(e.target.value)}" />
+      </label>`,
+    background: self => html `
+      <label class="color-picker highlight-color" title="Highlight Color">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38L5.04 7.34c-.39.39-.39 1.02 0 1.41l5.66 5.66c.39.39 1.02.39 1.41 0l3.54-3.54c.39-.39.39-1.02 0-1.41l-2.38-2.38L15.15 5.3l1.41 1.41-1.41 1.41 1.41 1.41-.39.39z"/>
+        </svg>
+        <input type="color" @input="${(e) => self.formatBackgroundColor(e.target.value)}" />
+      </label>`,
+    border: self => html `<button type="button" @click="${() => self.toggleBorder()}" title="Border" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3v18h18V3H3zm16 16H5V5h14v14z"/>
+      </svg>
+    </button>`,
+    heading: self => html `
+      <select @change="${(e) => self.formatHeadingFromDropdown(e.target.value)}" class="heading-select">
+        <option value="p">Normal</option>
+        <option value="h1">Heading 1</option>
+        <option value="h2">Heading 2</option>
+        <option value="h3">Heading 3</option>
+        <option value="h4">Heading 4</option>
+        <option value="h5">Heading 5</option>
+        <option value="h6">Heading 6</option>
+      </select>`,
+    left: self => html `<button type="button" @click="${() => self.formatAlign('left')}" title="Align Left" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm0 4h12v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2zm0 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    center: self => html `<button type="button" @click="${() => self.formatAlign('center')}" title="Align Center" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    right: self => html `<button type="button" @click="${() => self.formatAlign('right')}" title="Align Right" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm6 4h12v2H9V7zm-6 4h18v2H3v-2zm6 4h12v2H9v-2zm-6 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    justify: self => html `<button type="button" @click="${() => self.formatAlign('justify')}" title="Justify" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm0 4h18v2H3V7zm0 4h18v2H3v-2zm0 4h18v2H3v-2zm0 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    ul: self => html `<button type="button" @click="${() => self.formatList('ul')}" title="Bulleted List" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
+      </svg>
+    </button>`,
+    ol: self => html `<button type="button" @click="${() => self.formatList('ol')}" title="Numbered List" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
+      </svg>
+    </button>`,
+    link: self => html `<button type="button" @click="${() => self.promptLink()}" title="Insert Link" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
+      </svg>
+    </button>`,
+    // image: self => html`<button type="button" @click="${() => self.promptImage()}" title="Insert Image" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+    //   </svg>
+    // </button>`,
+    hr: self => html `<button type="button" @click="${() => self.insertHorizontalRule()}" title="Horizontal Rule" class="format-btn">
+      <span style="font-weight: bold;">—</span>
+    </button>`,
+    // quote: self => html`<button type="button" @click="${() => self.formatQuote()}" title="Quote" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+    //   </svg>
+    // </button>`,
+    // code: self => html`<button type="button" @click="${() => self.formatCode()}" title="Code" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+    //   </svg>
+    // </button>`,
+};
+__decorate([
+    property({ type: String })
+], NileLightdomeditor.prototype, "toolbar", void 0);
+__decorate([
+    property({
+        attribute: 'mentions',
+        converter: {
+            fromAttribute: (value) => {
+                try {
+                    const parsed = JSON.parse(value);
+                    const result = {};
+                    for (const trigger of Object.keys(parsed)) {
+                        const items = parsed[trigger];
+                        if (Array.isArray(items)) {
+                            result[trigger] = items
+                                .filter((i) => i && typeof i.key === 'string' && typeof i.label === 'string')
+                                .map((i) => ({ key: i.key, label: i.label }));
+                        }
+                    }
+                    return result;
+                }
+                catch {
+                    return {};
+                }
+            },
+            toAttribute: (value) => JSON.stringify(value)
+        }
+    })
+], NileLightdomeditor.prototype, "mentions", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionOpen", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionTrigger", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionQuery", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionSuggestions", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionFiltered", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionX", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "mentionY", void 0);
+__decorate([
+    query('.editor')
+], NileLightdomeditor.prototype, "editor", void 0);
+__decorate([
+    query('#imageInput')
+], NileLightdomeditor.prototype, "imageInput", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "previewHTML", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "characterCount", void 0);
+__decorate([
+    state()
+], NileLightdomeditor.prototype, "wordCount", void 0);
+NileLightdomeditor = NileLightdomeditor_1 = __decorate([
+    customElement('nile-lightdomeditor')
+], NileLightdomeditor);
+export { NileLightdomeditor };
+//# sourceMappingURL=nile-lightdomeditor.js.map