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

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.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -9,7 +9,7 @@ export const styles = css`
   nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
 
        
-nile-rte-toolbar-item > nile-button::part(base) {
+nile-rte-toolbar-item  nile-button::part(base) {
  
   width:32px; height:32px; padding:0px 6px;
   border: none;
@@ -21,9 +21,20 @@ nile-rte-preview {
 }
 
 
+.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;
@@ -70,6 +81,13 @@ font-weight: bold;}
      }
       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;
   align-items: center;
@@ -105,7 +123,6 @@ nile-button.rte-color-trigger::part(base){
   border-radius: 2px;
   background: currentColor;    
 }
-
  
 .rte-color-trigger .swatch-box {
   width: 18px;
@@ -114,20 +131,13 @@ nile-button.rte-color-trigger::part(base){
   border: 1px solid rgba(0,0,0,0.35);
   background: currentColor;    /* overridden via JS */
 }
-
- 
-
- 
-nile-rte-toolbar-item > nile-button[data-active]::part(base) {
+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 {
+nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
   background-color: var(--nile-colors-primary-500);  
 }
-
-
-
 `;
 
 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',
@@ -44,10 +45,11 @@ export class NileRichTextEditor extends LitElement {
   protected createRenderRoot() { return this; }  
   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;
@@ -89,7 +91,7 @@ private colorSwatchEl: HTMLElement | null = null;
 private bgSwatchEl: HTMLElement | null = null; 
 
 
-  // Mentions controller (child)
+ 
   private mentionsEl: HTMLElement | null = null;
 
   
@@ -112,7 +114,10 @@ private bgSwatchEl: HTMLElement | null = null;
    
     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();
 
@@ -172,9 +177,17 @@ 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;
@@ -182,6 +195,8 @@ private bgSwatchEl: HTMLElement | null = null;
       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) {
@@ -196,6 +211,7 @@ private bgSwatchEl: HTMLElement | null = null;
     }
     this.ensureAtLeastOneParagraph();
   }
+
  
   
   private unwrapMention(span: HTMLElement, preserveText = true) {
@@ -251,6 +267,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 +397,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  * `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",