@aquera/nile-elements 0.1.64-beta-1.1 → 0.1.64

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

@@ -1,179 +0,0 @@
-// src/nile-rich-text-editor/utils.ts
-export function closestBlock(node: Node | null, root: HTMLElement): HTMLElement | null {
-    while (node && node !== root) {
-      if (node instanceof HTMLElement) {
-        const display = getComputedStyle(node).display;
-        if (node.tagName.match(/^(P|DIV|H1|H2|H3|H4|H5|H6|LI)$/) || display === 'block' || display === 'list-item') {
-          return node;
-        }
-      }
-      node = node?.parentNode || null;
-    }
-    return root;
-  }
-  
-  export function nearestElement(n: Node | null): HTMLElement | null {
-    while (n && !(n instanceof HTMLElement)) n = n.parentNode as Node | null;
-    return n as HTMLElement | null;
-  }
-  
-  export function rgbToHex(rgb: string): string {
-    const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
-    if (!m) return '#000000';
-    const r = Number(m[1]).toString(16).padStart(2,'0');
-    const g = Number(m[2]).toString(16).padStart(2,'0');
-    const b = Number(m[3]).toString(16).padStart(2,'0');
-    return `#${r}${g}${b}`;
-  }
-  
-  export function unwrap(node: HTMLElement) {
-    const p = node.parentNode; if (!p) return;
-    while (node.firstChild) p.insertBefore(node.firstChild, node);
-    p.removeChild(node);
-  }
-  
-  export function surroundInline(range: Range, tag: string, attrs?: Record<string,string>) {
-    const wrap = document.createElement(tag);
-    if (attrs) Object.entries(attrs).forEach(([k,v]) => wrap.setAttribute(k, v));
-    try { range.surroundContents(wrap); }
-    catch {
-      const frag = range.extractContents();
-      wrap.appendChild(frag);
-      range.insertNode(wrap);
-    }
-  }
-  
-  export function toggleInlineTag(root: HTMLElement, tag: 'strong'|'em'|'u'|'span', attrs?: Record<string,string>) {
-    const sel = document.getSelection();
-    if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-  
-    if (range.collapsed) {
-      const elm = document.createElement(tag);
-      if (attrs) Object.entries(attrs).forEach(([k,v]) => elm.setAttribute(k,v));
-      elm.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(elm);
-      const r = document.createRange();
-      r.setStart(elm.firstChild!, 1);
-      r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-  
-    let n: Node | null = range.startContainer;
-    let target: HTMLElement | null = null;
-    while (n && n !== root) {
-      if (n instanceof HTMLElement && n.tagName.toLowerCase() === tag) { target = n; break; }
-      n = n.parentNode;
-    }
-    if (target) unwrap(target); else surroundInline(range, tag, attrs);
-  }
-  
-  export function setBlockTag(root: HTMLElement, tag: 'p'|'h1'|'h2'|'h3') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-    if (block.tagName.toLowerCase() === tag) return;
-    const nb = document.createElement(tag);
-    while (block.firstChild) nb.appendChild(block.firstChild);
-    block.replaceWith(nb);
-    const r = document.createRange(); r.selectNodeContents(nb); r.collapse(true);
-    sel.removeAllRanges(); sel.addRange(r);
-  }
-  
-  export function setAlignment(root: HTMLElement, align: 'left'|'center'|'right'|'justify') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-    block.style.textAlign = align === 'justify' ? 'justify' : align;
-  }
-  
-  export function setFontFamily(root: HTMLElement, family: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    if (range.collapsed) {
-      const span = document.createElement('span');
-      span.style.fontFamily = family;
-      span.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(span);
-      const r = document.createRange(); r.setStart(span.firstChild!, 1); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-    surroundInline(range, 'span', { style: `font-family:${family}` });
-  }
-  
-  export function setForeColor(root: HTMLElement, color: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    if (range.collapsed) {
-      const span = document.createElement('span');
-      span.style.color = color;
-      span.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(span);
-      const r = document.createRange(); r.setStart(span.firstChild!, 1); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-    surroundInline(range, 'span', { style: `color:${color}` });
-  }
-  
-  export function toggleList(root: HTMLElement, kind: 'ul'|'ol') {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    const block = closestBlock(range.startContainer, root); if (!block) return;
-  
-    let li = block.closest('li');
-    if (li) {
-      const list = li.closest('ul,ol') as HTMLElement | null;
-      if (!list) return;
-      if (list.tagName.toLowerCase() === kind) {
-        const parent = list.parentElement!;
-        const frag = document.createDocumentFragment();
-        for (const child of Array.from(list.children)) {
-          if (child.tagName.toLowerCase() === 'li') {
-            const p = document.createElement('p');
-            while (child.firstChild) p.appendChild(child.firstChild);
-            frag.appendChild(p);
-          }
-        }
-        parent.replaceChild(frag, list);
-      } else {
-        const newList = document.createElement(kind);
-        while (list.firstChild) newList.appendChild(list.firstChild);
-        list.replaceWith(newList);
-      }
-      return;
-    }
-  
-    const list = document.createElement(kind);
-    const item = document.createElement('li'); list.appendChild(item);
-    while (block.firstChild) item.appendChild(block.firstChild);
-    block.replaceWith(list);
-  }
-  
-  export function insertOrEditLink(root: HTMLElement, href?: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-  
-    let n: Node | null = range.startContainer;
-    let a: HTMLAnchorElement | null = null;
-    while (n && n !== root) { if (n instanceof HTMLAnchorElement) { a = n; break; } n = n.parentNode; }
-  
-    const url = href ?? (typeof window !== 'undefined' ? window.prompt('Enter URL', a?.href || 'https://') || '' : '');
-    if (!url) return;
-  
-    if (a) { a.href = url; return; }
-  
-    if (range.collapsed) {
-      const link = document.createElement('a'); link.href = url; link.textContent = url; range.insertNode(link);
-      const r = document.createRange(); r.setStartAfter(link); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
-      return;
-    }
-  
-    const link = document.createElement('a'); link.href = url;
-    try { range.surroundContents(link); }
-    catch { const frag = range.extractContents(); link.appendChild(frag); range.insertNode(link); }
-  }
-  

package/src/nile-richcodeeditor/index.ts

@@ -1 +0,0 @@
-export { NileRichcodeeditor } from './nile-richcodeeditor';

package/src/nile-richcodeeditor/nile-richcodeeditor.css.ts

@@ -1,19 +0,0 @@
-/**
-* 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';
-
-/**
- * Richcodeeditor CSS
- */
-export const styles = css`
-	:host {
-
-	}
-`;
-
-export default [styles];

package/src/nile-richcodeeditor/nile-richcodeeditor.ts

@@ -1,192 +0,0 @@
-import { LitElement, html, css, CSSResultGroup } 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.
- */
-@customElement('nile-richcodeeditor')
-export class NileRichcodeeditor extends LitElement {
-  /**
-   * Component styles
-   */
-  static styles: CSSResultGroup = 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;
-    }
-  `;
-
-  @query('.editor') private editor!: HTMLElement;
-  @query('.image-input') private fileInput!: HTMLInputElement;
-  @state() private content = '';
-  @state() private currentAlign: 'left' | 'center' | 'right' | '' = '';
-
-  firstUpdated() {
-    this.editor.addEventListener('input', () => this.updateContent());
-    this.fileInput.addEventListener('change', e => this.handleImageUpload(e));
-  }
-
-  private applyHeading(level: number) {
-    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();
-  }
-
-  private 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();
-  }
-
-  private triggerImageUpload() {
-    this.fileInput.click();
-  }
-
-  private handleImageUpload(event: Event) {
-    const input = event.target as HTMLInputElement;
-    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 as string;
-        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 = '';
-  }
-
-  private applyAlign(alignment: 'left' | 'center' | 'right') {
-    this.currentAlign = alignment;
-    this.editor.style.textAlign = alignment;
-    this.updateContent();
-  }
-
-  private revertToNormal() {
-    const parent = this.editor.parentNode as HTMLElement;
-    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();
-  }
-
-  private updateContent() {
-    const raw = this.editor.innerHTML;
-    const parent = this.editor.parentNode as HTMLElement;
-    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: MouseEvent) => 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>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap { 'nile-richcodeeditor': NileRichcodeeditor; }
-}