@aquera/nile-elements 0.1.65-beta-1.0 → 0.1.66-beta-1.1

package/src/nile-lightdomeditor/nile-lightdomeditor.ts

@@ -1,523 +0,0 @@
-import { LitElement, html, TemplateResult } 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';
-
-/**
- * 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.
- */
-
-export interface MentionItem {
-  key: string;
-  label: string;
-}
-
-/**
- * Map of trigger characters to arrays of MentionItem
- */
-export type MentionsConfig = Record<string, MentionItem[]>;
-
-@customElement('nile-lightdomeditor')
-export class NileLightdomeditor extends LitElement {
-  
-  protected createRenderRoot() {
-    return this;
-  }
- 
-  @property({ type: String })
-  toolbar: string = '';
-
-  @property({
-    attribute: 'mentions',
-    converter: {
-      fromAttribute: (value: string): MentionsConfig => {
-        try {
-          const parsed = JSON.parse(value);
-          const result: MentionsConfig = {};
-          for (const trigger of Object.keys(parsed)) {
-            const items = parsed[trigger];
-            if (Array.isArray(items)) {
-              result[trigger] = items
-                .filter((i: any) => i && typeof i.key === 'string' && typeof i.label === 'string')
-                .map((i: any) => ({ key: i.key, label: i.label }));
-            }
-          }
-          return result;
-        } catch {
-          return {};
-        }
-      },
-      toAttribute: (value: MentionsConfig): string => JSON.stringify(value)
-    }
-  })
-  mentions: MentionsConfig = {};
-
-
-    // Mention-related state
-    @state() private mentionOpen = false;
-    @state() private mentionTrigger: string | null = null;
-    @state() private mentionQuery = '';
-    @state() private mentionSuggestions: MentionItem[] = [];
-    @state() private mentionFiltered: MentionItem[] = [];
-    @state() private mentionX = 0;
-    @state() private mentionY = 0;
-
- 
-
-  @query('.editor') private editor!: HTMLElement;
-  @query('#imageInput') private imageInput!: HTMLInputElement;
-  @state() private previewHTML = '';
-  @state() private characterCount = 0;
-  @state() private wordCount = 0;
-  private lastRange: Range | null = null;
-
-  /**
-   * Map of toolbar keys to render functions with icons
-   * Each function receives the component instance to call instance methods
-   */
-  private static TOOLBAR_CONFIG: Record<string, (self: NileLightdomeditor) => TemplateResult> = {
-    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: Event) => self.formatFontFamily((e.target as HTMLSelectElement).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: Event) => self.formatFontSize((e.target as HTMLSelectElement).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: Event) => self.formatColor((e.target as HTMLInputElement).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: Event) => self.formatBackgroundColor((e.target as HTMLInputElement).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: Event) => self.formatHeadingFromDropdown((e.target as HTMLSelectElement).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>`,
-  };
-
-  // Default toolbar layout matching the design
-  private get parsedToolbar(): string[] {
-    if (this.toolbar) {
-      return this.toolbar.split(',').map(k => k.trim()).filter(k => 
-        Object.keys((this.constructor as typeof NileLightdomeditor).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.TOOLBAR_CONFIG[key](this))}
-      </div>
-      <div
-  class="editor"
-  contenteditable="true"
-  @keydown="${(e: KeyboardEvent) => this.onKeyDown(e)}"
-  @keyup="${(e: KeyboardEvent) => 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>
-  `;
-}
-
-
-private onKeyUp(e: KeyboardEvent) {
-  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);
-  }
-}
-
-
-
-private onKeyDown(e: KeyboardEvent) {
-  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]);
-    }
-  }
-}
-
-
-private openMention(trigger: string) {
-  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') as HTMLElement;
-  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;
-}
-
-
-
-
-
-
-
-
-private closeMention() {
-  this.mentionOpen = false;
-  this.mentionTrigger = null;
-}
-
-private 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();
-  }
-}
-
-private updateMentionFiltered() {
-  const q = this.mentionQuery.toLowerCase();
-  this.mentionFiltered = this.mentionSuggestions.filter(item =>
-    item.label.toLowerCase().startsWith(q)
-  );
-}
-
-private selectMention(item: MentionItem) {
-  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 as Text;
-  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();
-}
-
-private saveSelection() {
-  const sel = window.getSelection(); if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();
-}
-
-private restoreSelection() {
-  const sel = window.getSelection(); sel?.removeAllRanges(); if (this.lastRange) sel?.addRange(this.lastRange);
-}
-
-  private format(tag: 'b' | 'i' | 'u') {
-    this.restoreSelection(); if (!this.lastRange) return;
-    const el = document.createElement(tag); el.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(el); this.afterEdit(el);
-  }
-
-  private formatHeadingFromDropdown(tag: string) {
-    if (!tag) return;
-    this.restoreSelection(); if (!this.lastRange) return;
-    
-    let node: Node | null = 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);
-  }
-
-  private formatAlign(alignment: 'left' | 'center' | 'right' | 'justify') {
-    this.restoreSelection(); if (!this.lastRange) return;
-    let node: Node | null = 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);
-  }
-
-  private formatList(type: 'ul' | 'ol') {
-    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);
-  }
-
-  private promptLink() {
-    const url = prompt('Enter URL:', 'https://'); if (url) this.formatLink(url);
-  }
-
-  private formatColor(color: string) {
-    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') as HTMLElement;
-    if (colorBar) colorBar.style.backgroundColor = color;
-  }
-
-  private formatBackgroundColor(color: string) {
-    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);
-  }
-
-  private formatLink(href: string) {
-    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);
-  }
-
-  private promptImage() { this.imageInput.value = ''; this.imageInput.click(); }
-
-  private onImageSelected(e: Event) {
-    const input = e.target as HTMLInputElement;
-    if (input.files?.length) {
-      const reader = new FileReader(); reader.onload = () => this.formatImage(reader.result as string);
-      reader.readAsDataURL(input.files[0]);
-    }
-  }
-
-  private formatImage(src: string) {
-    this.restoreSelection(); if (!this.lastRange) return;
-    const img = document.createElement('img'); img.src = src; img.alt = 'Image';
-    this.lastRange.insertNode(img); this.afterEdit(img);
-  }
-
-  private formatFontFamily(font: string) {
-    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);
-  }
-
-  private formatFontSize(size: string) {
-    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);
-  }
-
-  private 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);
-  }
-
-  private insertHorizontalRule() {
-    this.restoreSelection(); if (!this.lastRange) return;
-    const hr = document.createElement('hr');
-    this.lastRange.insertNode(hr); this.afterEdit(hr);
-  }
-
-  private formatQuote() {
-    this.restoreSelection(); if (!this.lastRange) return;
-    const blockquote = document.createElement('blockquote');
-    blockquote.appendChild(this.lastRange.extractContents());
-    this.lastRange.insertNode(blockquote); this.afterEdit(blockquote);
-  }
-
-  private formatCode() {
-    this.restoreSelection(); if (!this.lastRange) return;
-    const code = document.createElement('code');
-    code.appendChild(this.lastRange.extractContents());
-    this.lastRange.insertNode(code); this.afterEdit(code);
-  }
-
- 
-
-  private afterEdit(node: Node) {
-    const range = document.createRange(); range.setStartAfter(node); range.collapse(true);
-    const sel = window.getSelection(); sel?.removeAllRanges(); sel?.addRange(range);
-    this.saveSelection(); this.syncPreview();
-  }
-
-  private updateCounts() {
-    const text = this.editor.textContent || '';
-    this.characterCount = text.length;
-    this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
-  }
-
-  private 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 }));
-  }
-}
-
-declare global { interface HTMLElementTagNameMap { 'nile-lightdomeditor': NileLightdomeditor; } }

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

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

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -1,92 +0,0 @@
-// 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];