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

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.5",
   "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,160 +2,67 @@
 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: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, 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;
@@ -166,51 +73,37 @@ nile-rte-preview {
   background: #fff;
   cursor: pointer;
 }
+
 .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;          /* little breathing space above underline */
 }
+
 .rte-color-trigger .underline {
   width: 18px;
   height: 3px;
   border-radius: 2px;
-  background: currentColor;
+  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;
-}
-
-/* ---- RESPONSIVE TWEAKS --------------------------------------------------- */
-@media (max-width: 900px) {
-  nile-rte-toolbar { gap: 6px; padding: 6px; }
-  nile-rte-select select { max-width: 160px; }
+  background: currentColor;    /* overridden via JS */
 }
 
-@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; } */
-}
-
-@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

@@ -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);   
   }
   
  
@@ -724,93 +668,43 @@ 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();
+  
+    // Clone content for safe manipulation
+    const clone = this.editorEl.cloneNode(true) as HTMLElement;
+  
+    // Walk the original DOM and the clone in parallel
+    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;
+      const computed = window.getComputedStyle(origEl);
+  
+      // Dump *all* computed styles into a single inline style attribute
+      const cssText = Array.from(computed)
+        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
+        .join(';');
+  
+      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);
+  
+    // Store the fully inlined HTML
+    this.content = clone.innerHTML;
+  
+    // Live preview updates
+    if (this.previewEl) this.previewEl.innerHTML = this.content;
+  
+    // Emit event with full inline styles
+    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();
-}
-
   
   
   

package/vscode-html-custom-data.json

@@ -2953,7 +2953,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperties:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onPaste` - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
+      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperties:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",