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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-1.4",
+  "version": "0.1.67-beta-1.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -2,215 +2,111 @@
 import { css } from 'lit';
 
 export const styles = css`
- /* ---- SAFER RESET INSIDE THE EDITOR -------------------------------------- */
-.editor * {
-  all: revert;                 /* keep your reset… */
-  box-sizing: border-box;      /* …but preserve sane layout */
-  overflow-wrap: anywhere;     /* break long words/URLs */
-  word-break: break-word;
+  .editor * {
+  all: revert;
 }
 
-/* Let component & editor shrink inside flex/grid parents */
-nile-rich-text-editor,
-.editor {
-  display: block;
-  min-width: 0;
-  max-width: 100%;
-  font-family: inherit;
-}
-
-/* ---- TOOLBAR ------------------------------------------------------------- */
-nile-rte-toolbar,
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;             /* allow wrapping to next row */
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid #e5e7eb;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  background: #fff;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-/* allow children to shrink instead of forcing overflow */
-nile-rte-toolbar > *,
-.toolbar > * {
-  flex: 0 1 auto;
-  min-width: 0;
-}
+  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
 
-/* buttons */
+       
 nile-rte-toolbar-item > nile-button::part(base) {
-  width: 32px;
-  height: 32px;
-  padding: 0 6px;
+ 
+  width:32px; height:32px; padding:0px 6px;
   border: none;
 }
-
-nile-rte-toolbar-item > button,
-.toolbar button,
-nile-rte-toolbar button {
-  border: 1px solid #e5e7eb;
-  background: #fff;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-nile-rte-toolbar-item > button nile-icon { pointer-events: none; }
-
-nile-rte-toolbar-item > button.active {
-  border-color: #2563eb;
-  background: #eff6ff;
-}
-
-/* selects should be able to shrink on small screens */
-nile-rte-select select {
-  height: 32px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
-  min-width: 0;
-  max-width: 100%;
-}
-
-/* color input */
-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 AREA --------------------------------------------------------- */
-.editor {
-  min-height: 160px;
-  padding: 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 0 0 8px 8px;
-  background: #fff;
-  outline: none;
-  white-space: pre-wrap;
-  tab-size: 4;
-  -moz-tab-size: 4;
-  overflow-wrap: anywhere;
-  box-sizing: border-box;
-  width: 100%;
-}
-
  
-.editor p { margin: 1em 0; }
-.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 {
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-.editor h1 { font-size: 2em; margin: 0.67em 0; }
-.editor h2 { font-size: 1.5em; margin: 0.83em 0; }
-.editor h3 { font-size: 1.17em; margin: 1em 0; }
-.editor h4 { font-size: 1em;   margin: 1.33em 0; }
-.editor h5 { font-size: 0.83em; margin: 1.67em 0; }
-.editor h6 { font-size: 0.67em; margin: 2.33em 0; }
-
-/* Keep typical wide content inside the box */
-.editor img,
-.editor svg,
-.editor table,
-.editor pre,
-.editor code,
-.editor blockquote {
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-/* Make <pre> wrap on small screens */
-.editor pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
+ 
 
-/* Long links shouldn’t push layout */
-.editor a { word-break: break-all; }
-
-/* ---- PREVIEW ------------------------------------------------------------- */
-nile-rte-preview {
-  display: block;
-  margin-top: 10px;
-  padding: 10px;
-  border: 1px dashed #cbd5e1;
-  border-radius: 8px;
-  background: #fafafa;
-}
 
-/* ---- COLOR TRIGGER (unchanged) ------------------------------------------ */
-.rte-color-trigger {
+      .toolbar, nile-rte-toolbar {
+        display:flex; align-items:center; gap:6px; 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, all: revert; display: block;
+font-size: 2em;
+margin-top: 0.67em;
+margin-bottom: 0.67em;
+margin-left: 0;
+margin-right: 0;
+font-weight: bold;  }
+      .editor h2 { all: revert;	display: block;
+font-size: 1.5em;
+margin-top: 0.83em;
+margin-bottom: 0.83em;
+margin-left: 0;
+margin-right: 0;
+font-weight: bold;}
+      .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;   white-space: pre-wrap;
+  tab-size: 4;           
+  -moz-tab-size: 4;       }
+      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: 1px solid var(--nile-color-border, #d9d9d9); */
   border-radius: 6px;
   background: #fff;
   cursor: pointer;
+  border:none;
+ 
+
+}
+nile-button.rte-color-trigger::part(base){
+  width:32px; height:32px; padding:0px 6px;
 }
 .rte-color-trigger .glyph-stack {
-  display: grid;
-  grid-auto-rows: max-content;
+  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;
+  margin-bottom: 2px;          
 }
+
 .rte-color-trigger .underline {
   width: 18px;
   height: 3px;
   border-radius: 2px;
-  background: currentColor;
+  background: currentColor;    
 }
+
+ 
 .rte-color-trigger .swatch-box {
   width: 18px;
   height: 16px;
   border-radius: 4px;
   border: 1px solid rgba(0,0,0,0.35);
-  background: currentColor;
-}
-
-/* ---- RESPONSIVE TWEAKS --------------------------------------------------- */
-@media (max-width: 900px) {
-  nile-rte-toolbar { gap: 6px; padding: 6px; }
-  nile-rte-select select { max-width: 160px; }
-}
-
-@media (max-width: 600px) {
-  nile-rte-toolbar { gap: 4px; }
-  nile-rte-select select { max-width: 120px; }
-  /* optional fallback if wrapping still feels tight */
-  /* nile-rte-toolbar { overflow-x: auto; } */
+  background: currentColor;    /* overridden via JS */
 }
 
-@media (max-width: 420px) {
-  nile-rte-select select { max-width: 100px; }
-  nile-rte-divider { display: none; }
-}
-
-
 `;
 
 export default [styles];

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

@@ -33,8 +33,8 @@ const DEFAULT_ICONS: Record<string, string> = {
   center: 'format_align_middle',
   right: 'format_align_right',
   justify: 'format_align_justify',
-  ul: 'nile-ul',
-  ol: 'nile-ol',
+  ul: 'format_list_bulleted',
+  ol: 'format_list_numbered',
   clear: 'error',
 };
 
@@ -177,60 +177,6 @@ private bgSwatchEl: HTMLElement | null = null;
     this.ensureAtLeastOneParagraph();
   }
 
-  private onPaste = (e: ClipboardEvent) => {
-    const html = e.clipboardData?.getData('text/html');
-    if (!html) return; // let plain text/default paste happen
-  
-    e.preventDefault();
-    this.focusAndRestore();
-  
-    const div = document.createElement('div');
-    div.innerHTML = html;
-  
-    // strip layout-y attrs & styles
-    const walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT);
-    const layoutProps = new Set([
-      'width','height','max-width','min-width','margin','padding','position','left','right','top','bottom',
-      'float','display','border','line-height','white-space'
-    ]);
-  
-    while (walker.nextNode()) {
-      const el = walker.currentNode as HTMLElement;
-      // remove HTML width/height attributes that cause fixed sizing
-      el.removeAttribute('width');
-      el.removeAttribute('height');
-  
-      // prune style properties if present
-      if (el.hasAttribute('style')) {
-        const style = el.getAttribute('style') || '';
-        const kept = style.split(';').map(s => s.trim()).filter(Boolean).filter(rule => {
-          const prop = rule.split(':')[0]?.trim().toLowerCase();
-          return prop && !layoutProps.has(prop);
-        });
-        if (kept.length) el.setAttribute('style', kept.join('; ')); else el.removeAttribute('style');
-      }
-    }
-  
-    // insert sanitized fragment at the selection
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount) {
-      const range = sel.getRangeAt(0);
-      range.deleteContents();
-  
-      const frag = document.createDocumentFragment();
-      while (div.firstChild) frag.appendChild(div.firstChild);
-      range.insertNode(frag);
-  
-      // move caret after paste
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-  
-    this.ensureAtLeastOneParagraph();
-    this.updateContent();
-    this.updateToolbarState();
-  };
-  
   private wireEditor() {
     this.editorEl.addEventListener('input', () => { 
       this.ensureAtLeastOneParagraph();
@@ -238,9 +184,7 @@ private bgSwatchEl: HTMLElement | null = null;
     });
     this.editorEl.addEventListener('mouseup', () => this.saveSelection());
     this.editorEl.addEventListener('keyup', () => this.saveSelection());
-    this.editorEl.addEventListener('keydown', this.onEditorKeydown);  
-    this.editorEl.addEventListener('paste', this.onPaste);
- 
+    this.editorEl.addEventListener('keydown', this.onEditorKeydown);   
   }
   
  
@@ -411,28 +355,28 @@ private bgSwatchEl: HTMLElement | null = null;
               input.title = label;
               input.value = value;
             
-              // Build a custom trigger that shows the current color
-              let trigger = child.querySelector(':scope > button.rte-color-trigger') as HTMLButtonElement | null;
+              let trigger = child.querySelector(':scope > nile-button') as HTMLElement | null;
               if (!trigger) {
-                trigger = document.createElement('button');
-                trigger.type = 'button';
-                trigger.className = 'rte-color-trigger';
-                trigger.setAttribute('aria-label', label);
-            
+                const nb = document.createElement('nile-button');
+                (nb as any).variant = 'ghost';
+                nb.className = 'rte-color-trigger';
+                nb.setAttribute('aria-label', label);
+              
                 if (mode === 'background') {
-                  trigger.innerHTML = `
-                    <span class="swatch-box" aria-hidden="true"></span>
-                  `;
+                  nb.innerHTML = `<span class="swatch-box" aria-hidden="true"></span>`;
                 } else {
-                  trigger.innerHTML = `
-                     <span class="glyph-stack" aria-hidden="true">
-    <span class="glyph">A</span>
-    <span class="underline"></span>
-  </span>
+                  nb.innerHTML = `
+                    <span class="glyph-stack" aria-hidden="true">
+                      <span class="glyph">A</span>
+                      <span class="underline"></span>
+                    </span>
                   `;
                 }
-                child.appendChild(trigger);
+              
+                child.appendChild(nb);
+                trigger = nb;
               }
+              
             
               // Cache swatch elements to update later
               const underline = trigger.querySelector('.underline') as HTMLElement | null;
@@ -724,93 +668,63 @@ private ensureAtLeastOneParagraph() {
     this.updateContent();
   }
 
- // replace your existing updateContent() with this
-private updateContent() {
-  if (!this.editorEl) return;
-  this.ensureAtLeastOneParagraph();
-
-  const clone = this.editorEl.cloneNode(true) as HTMLElement;
-
-  const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
-  const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
-
-  while (origWalker.nextNode() && cloneWalker.nextNode()) {
-    const origEl = origWalker.currentNode as HTMLElement;
-    const cloneEl = cloneWalker.currentNode as HTMLElement;
-
-    // start clean
-    cloneEl.removeAttribute('style');
-
-    // rely on semantics for these; no inline styles
-    if (['B','STRONG','I','EM','U','H1','H2','H3','H4','H5','H6'].includes(cloneEl.tagName)) {
-      continue;
+  private updateContent() {
+    if (!this.editorEl) return;
+    this.ensureAtLeastOneParagraph();
+  
+ 
+    const clone = this.editorEl.cloneNode(true) as HTMLElement;
+  
+ 
+    const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
+    const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
+  
+ 
+    const importantProps = [
+      'font-weight',
+      'font-style',
+      'text-decoration',
+      'color',
+      'background-color',
+      'font-size',
+      'font-family',
+      'text-align',
+      'line-height',
+      'letter-spacing',
+      'white-space',
+      'vertical-align'
+    ];
+  
+    while (origWalker.nextNode() && cloneWalker.nextNode()) {
+      const origEl = origWalker.currentNode as HTMLElement;
+      const cloneEl = cloneWalker.currentNode as HTMLElement;
+      const computed = window.getComputedStyle(origEl);
+  
+ 
+      const cssText = importantProps
+        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
+        .join(';');
+  
+    
+      if (cssText.trim()) {
+        cloneEl.setAttribute('style', cssText);
+      }
     }
-
-    const cssText = this.collectMinimalInline(origEl);
-    if (cssText) cloneEl.setAttribute('style', cssText);
-  }
-
-  this.content = clone.innerHTML;
-  if (this.previewEl) this.previewEl.innerHTML = this.content;
-
-  this.dispatchEvent(new CustomEvent('content-changed', {
-    detail: { content: this.content },
-    bubbles: true,
-    composed: true
-  }));
-}
-private collectMinimalInline(el: HTMLElement): string {
-  const cs = getComputedStyle(el);
-  const ps = el.parentElement ? getComputedStyle(el.parentElement) : null;
-
-  const out: string[] = [];
-  const push = (prop: string, val?: string) => { if (val) out.push(`${prop}:${val}`); };
-
-  // 1) text-align on block-ish containers (only if changed)
-  if (['P','DIV','LI','TD','TH','BLOCKQUOTE','H1','H2','H3','H4','H5','H6'].includes(el.tagName)) {
-    const ta  = cs.textAlign;
-    const pta = ps?.textAlign || 'start';
-    if (ta !== pta && ta !== 'start') push('text-align', ta);
-  }
-
-  // 2) color (only if different from parent)
-  if (!ps || cs.color !== ps.color) push('color', cs.color);
-
-  // 3) background-color (only if not transparent)
-  const bg = cs.backgroundColor;
-  const isTransparent = /transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(bg);
-  if (!isTransparent) push('background-color', bg);
-
-  // 4) font-family (only if different from parent)
-  const ff  = this.normalizeFontFamily(cs.fontFamily);
-  const pff = this.normalizeFontFamily(ps?.fontFamily || '');
-  if (ff && ff !== pff) push('font-family', cs.fontFamily);
-
-  // 5) font-size (only if explicitly set / typical inline span use)
-  if (el.tagName === 'SPAN' || (el as HTMLElement).style.fontSize) {
-    const fs  = cs.fontSize;
-    const pfs = ps?.fontSize;
-    if (!pfs || fs !== pfs) push('font-size', fs);
-  }
-
-  // 6) list-style-type on UL/OL (only if non-default)
-  if (el.tagName === 'UL' || el.tagName === 'OL') {
-    const lst = cs.listStyleType;
-    const def = el.tagName === 'UL' ? 'disc' : 'decimal';
-    if (lst && lst !== def) push('list-style-type', lst);
+  
+  
+    this.content = clone.innerHTML;
+  
+ 
+    if (this.previewEl) this.previewEl.innerHTML = this.content;
+  
+ 
+    this.dispatchEvent(new CustomEvent('content-changed', {
+      detail: { content: this.content },
+      bubbles: true,
+      composed: true
+    }));
   }
-
-  // 7) text-decoration-line (keep only if not the default and not coming from <u>)
-  const tdl = cs.textDecorationLine;
-  if (tdl && tdl !== 'none' && el.tagName !== 'U') push('text-decoration-line', tdl);
-
-  return out.join(';');
-}
-
-private normalizeFontFamily(ff: string) {
-  return (ff || '').replace(/["']/g, '').split(',')[0].trim().toLowerCase();
-}
-
+