@aquera/nile-elements 0.1.67-beta-2.3 → 0.1.67-beta-2.4

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-2.3",
+  "version": "0.1.67-beta-2.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -1,143 +1,134 @@
-// rte-styles.ts
+// FILE: src/components/rte-styles.ts
 import { css } from 'lit';
 
 export const styles = css`
-   
-   
-   .editor {all: revert;}
-
-  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;
-}
- 
-nile-rte-preview {
-  white-space: normal;
-  word-break: break-word;
-}
-
-
-.editor.single-line {
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-  border-radius: 8px;
-}
-
-
-
-
-
-
-      .toolbar, nile-rte-toolbar {
-        width:486px;  
-        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, .preview h1 {  all: revert; font-size:2em, display: block;
-font-size: 2em;
-margin-top: 0.67em;
-margin-bottom: 0.67em;
-margin-left: 0;
-margin-right: 0;
-font-weight: bold;  }
-      .editor h2, .preview 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; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;  
-  tab-size: 4;           
-  -moz-tab-size: 4; 
-  word-break: break-word; 
-     }
-      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }
-
-      nile-rte-preview.single-line {
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-      .rte-color-trigger {
-  display: inline-flex;
+  .editor { all: revert; }
+
+  nile-rich-text-editor {
+    position: relative;
+    display: block;
+    font-family: inherit;
+  }
+
+  /* --- Card 1: Toolbar + Editor --- */
+  .rte-container {
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #fff;
+    box-sizing: border-box;
+  }
+
+ /* Toolbar inside container */
+.rte-container nile-rte-toolbar {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  /* border: 1px solid var(--nile-color-border, #d9d9d9); */
-  border-radius: 6px;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid #e5e7eb;
   background: #fff;
-  cursor: pointer;
-  border:none;
- 
+  border-radius: 8px 8px 0 0;
 
-}
-nile-button.rte-color-trigger::part(base){
-  width:32px; height:32px; padding:0px 6px;
-}
-.rte-color-trigger .glyph-stack {
-  display: grid;               /* stack vertically */
-  grid-auto-rows: max-content; 
-  align-items: center;
-  justify-items: center;
-  line-height: 1;
+  width: 100%;            
+  box-sizing: border-box; 
 }
 
-.rte-color-trigger .glyph {
-  font-size: 14px;
-  line-height: 1;
-  margin-bottom: 2px;          
-}
 
-.rte-color-trigger .underline {
-  width: 18px;
-  height: 3px;
-  border-radius: 2px;
-  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;    /* overridden via JS */
-}
-nile-rte-toolbar-item  nile-button[data-active]::part(base) {
-  background-color: var(--nile-colors-primary-400);
+  .rte-container .editor {
+    min-height: 160px;
+    width: 100%;
+    padding: 12px;
+    background: #fff;
+    border-radius: 0 0 8px 8px;
+    outline: none;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-break: break-word;
+    box-sizing: border-box;
+    border-radius: 8px;
+  }
+
+  /* --- Card 2: Preview --- */
+ /* Preview card */
+nile-rte-preview {
+  display: block;
+  width: 100%;
+  margin-top: 16px;       
+  padding: 12px;
+  border: 1px dashed #e5e7eb;
+  border-radius: 8px;
+  background: #fafafa;
+  box-sizing: border-box;
+  word-wrap: break-word;
 }
 
-nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
-  background-color: var(--nile-colors-primary-500);  
-}
+
+  /* Toolbar button styling */
+  nile-rte-toolbar-item nile-button::part(base) {
+    width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    border: none;
+  }
+
+  nile-rte-toolbar-item > 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;
+  }
+
+  /* Heading normalization */
+  .editor p { margin: 1em 0; }
+  .editor h1, .preview h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+    font-weight: bold;
+  }
+  .editor h2, .preview h2 {
+    font-size: 1.5em;
+    margin: 0.83em 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; }
+
+  /* Single-line variant */
+  .editor.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 0px 12px 0px 12px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-preview.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    padding: 0px 12px 0px 12px;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-divider { 
+  margin: 0 4px;
+  display: inline-block;
+  height: 24px;
+  width: 1px;
+  background: #E6E9EB;
+  }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -43,7 +43,7 @@ const DEFAULT_ICONS: Record<string, string> = {
 @customElement('nile-rich-text-editor')
 export class NileRichTextEditor extends LitElement {
   protected createRenderRoot() { return this; }  
-  protected shouldUpdate() { return false; }    
+  // protected shouldUpdate() { return false; }    
 
  
   @property({ type: String }) value = '';
@@ -89,6 +89,8 @@ export class NileRichTextEditor extends LitElement {
 private bgColorInput: HTMLInputElement | null = null; 
 private colorSwatchEl: HTMLElement | null = null;   
 private bgSwatchEl: HTMLElement | null = null; 
+private containerEl: HTMLElement | null = null;
+
 
 
  
@@ -106,55 +108,61 @@ private bgSwatchEl: HTMLElement | null = null;
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.injectCss(styles.cssText);
+    this.ensureStructure();
 
-    
-    this.injectCss(styles.cssText);     
-    
-
-   
-    this.toolbarEl = this.querySelector('nile-rte-toolbar');
-    this.previewEl = this.querySelector('nile-rte-preview');
-    if (this.singleLineEditor) {
-      this.editorEl?.classList.add('single-line');
-      this.previewEl?.classList.add('single-line');
-    }
-   
-    this.ensureEditor();
-
- 
     if (this.value && !this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = this.value;
     }
     this.content = this.editorEl.innerHTML;
 
-   
     if (this.toolbarEl) this.wireAuthoredToolbar(this.toolbarEl);
-
- 
     this.mentionsEl = this.querySelector('nile-rte-mentions');
     if (this.mentionsEl) {
- 
       (this.mentionsEl as any).attach?.(this.editorEl, this as HTMLElement);
- 
       (this.mentionsEl as any).setExternalConfig?.(this.mentions);
     }
 
-    
     this.wireEditor();
-
- 
     this.updateToolbarState();
     this.syncPreview();
+  }
 
-   
-    document.addEventListener('selectionchange', this.onSelectionChange, true);
-    if (this.mentionsEl) {
-      this.mentionsEl.addEventListener('mention-selected', (e: any) => {
-        this.updateContentWithMention(e.detail);
-      });
+  private ensureStructure() {
+    this.toolbarEl = this.querySelector('nile-rte-toolbar');
+    this.previewEl = this.querySelector('nile-rte-preview');
+  
+    // container for toolbar + editor
+    this.containerEl = this.querySelector('.rte-container') as HTMLElement;
+    if (!this.containerEl) {
+      this.containerEl = document.createElement('div');
+      this.containerEl.className = 'rte-container';
+      this.appendChild(this.containerEl);
+    }
+  
+    // ensure editor
+    this.ensureEditor();
+  
+    // put toolbar + editor inside container
+    if (this.toolbarEl && this.toolbarEl.parentElement !== this.containerEl) {
+      this.containerEl.appendChild(this.toolbarEl);
+    }
+    if (this.editorEl.parentElement !== this.containerEl) {
+      this.containerEl.appendChild(this.editorEl);
+    }
+  
+    // 👉 move preview OUTSIDE container, right after it
+    if (this.previewEl) {
+      if (this.previewEl.parentElement !== this) {
+        this.appendChild(this.previewEl);
+      }
+      // ensure preview is placed AFTER container
+      if (this.previewEl.previousElementSibling !== this.containerEl) {
+        this.insertBefore(this.previewEl, this.containerEl.nextSibling);
+      }
     }
-    
   }
+  
 
   private updateContentWithMention(mentionDetail: any) {
     this.updateContent(); 
@@ -188,28 +196,17 @@ private bgSwatchEl: HTMLElement | null = null;
     }
   }
   
-
   private ensureEditor() {
     this.editorEl = this.querySelector('.editor') as HTMLElement;
     if (!this.editorEl) {
       const editor = document.createElement('article');
       editor.className = 'editor';
-      editor.setAttribute('contenteditable','true');
-      if (this.singleLineEditor) editor.classList.add('single-line');
-
-      if (this.toolbarEl?.nextSibling) {
-        this.insertBefore(editor, this.toolbarEl.nextSibling);
-      } else if (this.previewEl) {
-        this.insertBefore(editor, this.previewEl);
-      } else {
-        this.appendChild(editor);
-      }
+      editor.setAttribute('contenteditable', 'true');
       this.editorEl = editor;
     }
     if (!this.editorEl.innerHTML.trim()) {
       this.editorEl.innerHTML = '<p><br></p>';
     }
-    this.ensureAtLeastOneParagraph();
   }
 
  

package/vscode-html-custom-data.json

@@ -2953,7 +2953,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `mentions` - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `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` - ",
+      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `mentions` - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `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  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",