@aquera/nile-elements 0.1.67-beta-2.2 → 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.2",
+  "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,133 +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;
-}
-
-
-
-      .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; }
-
-      .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);
-}
-
-nile-rte-toolbar-item > nile-button[data-active]::part(base):hover {
-  background-color: var(--nile-colors-primary-500);  
+  .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;
 }
 
 
-
+  /* 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

@@ -21,10 +21,11 @@ import {styles} from './nile-rich-text-editor.css';
 
 type MentionsConfig = Record<string, { key: string; label: string }[]>;
 
-/**
- * Map commands → default icon names from your <nile-icon> set.
- * Adjust values to match the real names you have.
- */
+
+
+ 
+
+   
 const DEFAULT_ICONS: Record<string, string> = {
   bold: 'format_bold',
   italic: 'format_italic',
@@ -42,12 +43,13 @@ 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; }    
 
-  /** Initial HTML content */
+ 
   @property({ type: String }) value = '';
+  @property({ type: Boolean, attribute: 'singlelineeditor' })singleLineEditor = false;
 
-  /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+ 
   @property({
     attribute: 'mentions',
     converter: {
@@ -71,7 +73,7 @@ export class NileRichTextEditor extends LitElement {
   })
   mentions: MentionsConfig = {};
 
-  // ----- internal state (no Lit render) -----
+ 
   @state() private content = '';
   private editorEl!: HTMLElement;
   private previewEl: HTMLElement | null = null;
@@ -79,7 +81,7 @@ export class NileRichTextEditor extends LitElement {
 
   private lastRange: Range | null = null;
 
-  // map for button active reflections
+ 
   private buttonMap = new Map<string, HTMLElement[]>();
   private headingSelect: HTMLSelectElement | null = null;
   private fontSelect: HTMLSelectElement | null = null;
@@ -87,9 +89,11 @@ 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;
 
 
-  // Mentions controller (child)
+
+ 
   private mentionsEl: HTMLElement | null = null;
 
   
@@ -104,52 +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');
-
-   
-    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(); 
@@ -172,30 +185,30 @@ private bgSwatchEl: HTMLElement | null = null;
     }
     super.disconnectedCallback();
   }
-
- 
- 
-
+  protected updated(changed: Map<string, any>) {
+    if (changed.has('singleLineEditor')) {
+      if (this.editorEl) {
+        this.editorEl.classList.toggle('single-line', this.singleLineEditor);
+      }
+      if (this.previewEl) {
+        this.previewEl.classList.toggle('single-line', this.singleLineEditor);
+      }
+    }
+  }
+  
   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.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();
   }
+
  
   
   private unwrapMention(span: HTMLElement, preserveText = true) {
@@ -251,6 +264,22 @@ private bgSwatchEl: HTMLElement | null = null;
   
  
   private onEditorKeydown = (e: KeyboardEvent) => {
+    if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
+      e.preventDefault();
+      return; 
+    }
+    if (e.ctrlKey && e.key.toLowerCase() === 'i') {
+      e.preventDefault();
+      toggleInlineTag(this.editorEl, 'em');
+      this.updateContent();
+      this.updateToolbarState();
+    }
+    
+    
+    if (this.singleLineEditor && e.key === 'Enter' ) {
+      e.preventDefault();
+      return; 
+    }
     if (e.key !== 'Tab') return;
   
     e.preventDefault();
@@ -365,8 +394,14 @@ private bgSwatchEl: HTMLElement | null = null;
           child.innerHTML = '';
         }
       
-        // Mount it
-        if (!btn.isConnected) child.appendChild(btn);
+   // Mount button inside tooltip
+if (!btn.isConnected) {
+  const tooltip = document.createElement('nile-tooltip');
+  tooltip.setAttribute('content', label); 
+  tooltip.appendChild(btn);
+  child.appendChild(tooltip);
+}
+
       
         // Interactions
         btn.setAttribute('aria-label', label);

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

@@ -129,10 +129,11 @@ export class NileRteSelect extends LitElement {
         box-shadow: none;
       }
   nile-button.rte-align-trigger::part(base) {
- 
 
   border: none;
 }
+
+ 
     `;
     this.insertBefore(style, this.firstChild);
   }
@@ -159,7 +160,9 @@ export class NileRteSelect extends LitElement {
                 class="rte-align-item"
                 ?active=${o.value === this.selectedValue}
                 @click=${() => this.onSelect(o.value)}>
-                <nile-icon name="${o.icon}"></nile-icon>
+                <nile-tooltip hoist content="${o.label}">
+                  <nile-icon name="${o.icon}"></nile-icon>
+                </nile-tooltip>
               </nile-menu-item>
             `)}
           </nile-menu>
@@ -167,7 +170,6 @@ export class NileRteSelect extends LitElement {
       `;
     }
 
-    // ► Font: show labels, preview fonts in items and trigger
     if (this.type === 'font') {
       const triggerText = current?.label || this.label || 'Font';
       return html`

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

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('nile-rte-toolbar')
 export class NileRteToolbar extends LitElement {
-  protected createRenderRoot() { return this; }     // Light DOM
-  protected shouldUpdate() { return false; }        // inert, keep children
+  protected createRenderRoot() { return this; }     
+  protected shouldUpdate() { return false; }      
 }
 declare global { interface HTMLElementTagNameMap { 'nile-rte-toolbar': NileRteToolbar; } }

package/vscode-html-custom-data.json

@@ -2953,15 +2953,20 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; mention: any; }>`} - \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` - ",
+      "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",
-          "description": "`value` {`string`} - Initial HTML content\n\nProperty: value\n\nDefault: "
+          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: "
+        },
+        {
+          "name": "singlelineeditor",
+          "description": "`singlelineeditor` {`boolean`} - \n\nProperty: singleLineEditor\n\nDefault: false",
+          "valueSet": "v"
         },
         {
           "name": "mentions",
-          "description": "`mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperty: mentions\n\nDefault: [object Object]"
+          "description": "`mentions` - \n\nProperty: mentions\n\nDefault: [object Object]"
         },
         {
           "name": "oncontent-changed",