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

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js

@@ -1,132 +1,133 @@
-// 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];
 //# sourceMappingURL=nile-rich-text-editor.css.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-rich-text-editor.css.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.css.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n   \n   \n   .editor {all: revert;}\n\n  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }\n\n       \nnile-rte-toolbar-item > nile-button::part(base) {\n \n  width:32px; height:32px; padding:0px 6px;\n  border: none;\n}\n \nnile-rte-preview {\n  white-space: normal;\n  word-break: break-word;\n}\n\n\n\n      .toolbar, nile-rte-toolbar {\n        \n        width:486px;  \n        display:flex; align-items:center; gap:6px; padding:8px; \n        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;\n      }\n\n      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {\n        border:1px solid #e5e7eb; background:#fff; border-radius:6px;\n        cursor:pointer;\n      }\n\n  \n      /* Ensure clicks hit the button (not nested icon internals) */\n      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }\n\n      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }\n      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }\n      nile-rte-color input[type=\"color\"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }\n      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }\n\n       .editor p { margin:1em 0; }\n      .editor h1, .preview h1 {  all: revert; font-size:2em, display: block;\nfont-size: 2em;\nmargin-top: 0.67em;\nmargin-bottom: 0.67em;\nmargin-left: 0;\nmargin-right: 0;\nfont-weight: bold;  }\n      .editor h2, .preview h2 { all: revert;\tdisplay: block;\nfont-size: 1.5em;\nmargin-top: 0.83em;\nmargin-bottom: 0.83em;\nmargin-left: 0;\nmargin-right: 0;\nfont-weight: bold;}\n      .editor h3 { font-size:1.17em  }\n      .editor h4 { font-size:1em  }\n      .editor h5 { font-size:0.83em  }\n      .editor h6 { font-size:0.67em  }\n\n      .editor {   min-height:160px; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;  \n  tab-size: 4;           \n  -moz-tab-size: 4; \n  word-break: break-word; \n     }\n      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }\n\n      .rte-color-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* border: 1px solid var(--nile-color-border, #d9d9d9); */\n  border-radius: 6px;\n  background: #fff;\n  cursor: pointer;\n  border:none;\n \n\n}\nnile-button.rte-color-trigger::part(base){\n  width:32px; height:32px; padding:0px 6px;\n}\n.rte-color-trigger .glyph-stack {\n  display: grid;               /* stack vertically */\n  grid-auto-rows: max-content; \n  align-items: center;\n  justify-items: center;\n  line-height: 1;\n}\n\n.rte-color-trigger .glyph {\n  font-size: 14px;\n  line-height: 1;\n  margin-bottom: 2px;          \n}\n\n.rte-color-trigger .underline {\n  width: 18px;\n  height: 3px;\n  border-radius: 2px;\n  background: currentColor;    \n}\n\n \n.rte-color-trigger .swatch-box {\n  width: 18px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1px solid rgba(0,0,0,0.35);\n  background: currentColor;    /* overridden via JS */\n}\n\n \n\n \nnile-rte-toolbar-item > nile-button[data-active]::part(base) {\n  background-color: var(--nile-colors-primary-400);\n}\n\nnile-rte-toolbar-item > nile-button[data-active]::part(base):hover {\n  background-color: var(--nile-colors-primary-500);  \n}\n\n\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-rich-text-editor.css.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.css.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// FILE: src/components/rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n  .editor { all: revert; }\n\n  nile-rich-text-editor {\n    position: relative;\n    display: block;\n    font-family: inherit;\n  }\n\n  /* --- Card 1: Toolbar + Editor --- */\n  .rte-container {\n    width: 100%;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n /* Toolbar inside container */\n.rte-container nile-rte-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px;\n  border-bottom: 1px solid #e5e7eb;\n  background: #fff;\n  border-radius: 8px 8px 0 0;\n\n  width: 100%;            \n  box-sizing: border-box; \n}\n\n\n  .rte-container .editor {\n    min-height: 160px;\n    width: 100%;\n    padding: 12px;\n    background: #fff;\n    border-radius: 0 0 8px 8px;\n    outline: none;\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    box-sizing: border-box;\n    border-radius: 8px;\n  }\n\n  /* --- Card 2: Preview --- */\n /* Preview card */\nnile-rte-preview {\n  display: block;\n  width: 100%;\n  margin-top: 16px;       \n  padding: 12px;\n  border: 1px dashed #e5e7eb;\n  border-radius: 8px;\n  background: #fafafa;\n  box-sizing: border-box;\n  word-wrap: break-word;\n}\n\n\n  /* Toolbar button styling */\n  nile-rte-toolbar-item nile-button::part(base) {\n    width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    border: none;\n  }\n\n  nile-rte-toolbar-item > button,\n  nile-rte-toolbar button {\n    border: 1px solid #e5e7eb;\n    background: #fff;\n    border-radius: 6px;\n    cursor: pointer;\n  }\n\n  nile-rte-toolbar-item > button nile-icon { pointer-events: none; }\n\n  nile-rte-toolbar-item > button.active {\n    border-color: #2563eb;\n    background: #eff6ff;\n  }\n\n  /* Heading normalization */\n  .editor p { margin: 1em 0; }\n  .editor h1, .preview h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n    font-weight: bold;\n  }\n  .editor h2, .preview h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n    font-weight: bold;\n  }\n  .editor h3 { font-size: 1.17em; }\n  .editor h4 { font-size: 1em; }\n  .editor h5 { font-size: 0.83em; }\n  .editor h6 { font-size: 0.67em; }\n\n  /* Single-line variant */\n  .editor.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    overflow-x: auto;\n    white-space: nowrap;\n    padding: 0px 12px 0px 12px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-preview.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    padding: 0px 12px 0px 12px;\n    overflow-x: auto;\n    white-space: nowrap;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-divider { \n  margin: 0 4px;\n  display: inline-block;\n  height: 24px;\n  width: 1px;\n  background: #E6E9EB;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -13,10 +13,8 @@ type MentionsConfig = Record<string, {
 }[]>;
 export declare class NileRichTextEditor extends LitElement {
     protected createRenderRoot(): this;
-    protected shouldUpdate(): boolean;
-    /** Initial HTML content */
     value: string;
-    /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+    singleLineEditor: boolean;
     mentions: MentionsConfig;
     private content;
     private editorEl;
@@ -30,11 +28,14 @@ export declare class NileRichTextEditor extends LitElement {
     private bgColorInput;
     private colorSwatchEl;
     private bgSwatchEl;
+    private containerEl;
     private mentionsEl;
     private injectCss;
     connectedCallback(): void;
+    private ensureStructure;
     private updateContentWithMention;
     disconnectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
     private ensureEditor;
     private unwrapMention;
     private scrubBrokenMentions;

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js

@@ -12,10 +12,6 @@ import './nile-rte-mentions';
 import './nile-rte-link';
 import { closestBlock, nearestElement, rgbToHex, toggleInlineTag, setBlockTag, setAlignment, setFontFamily, setForeColor, setBackColor, } from './utils';
 import { styles } from './nile-rich-text-editor.css';
-/**
- * Map commands → default icon names from your <nile-icon> set.
- * Adjust values to match the real names you have.
- */
 const DEFAULT_ICONS = {
     bold: 'format_bold',
     italic: 'format_italic',
@@ -32,16 +28,14 @@ const DEFAULT_ICONS = {
 let NileRichTextEditor = class NileRichTextEditor extends LitElement {
     constructor() {
         super(...arguments);
-        /** Initial HTML content */
+        // protected shouldUpdate() { return false; }    
         this.value = '';
-        /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+        this.singleLineEditor = false;
         this.mentions = {};
-        // ----- internal state (no Lit render) -----
         this.content = '';
         this.previewEl = null;
         this.toolbarEl = null;
         this.lastRange = null;
-        // map for button active reflections
         this.buttonMap = new Map();
         this.headingSelect = null;
         this.fontSelect = null;
@@ -49,9 +43,23 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         this.bgColorInput = null;
         this.colorSwatchEl = null;
         this.bgSwatchEl = null;
-        // Mentions controller (child)
+        this.containerEl = null;
         this.mentionsEl = null;
         this.onEditorKeydown = (e) => {
+            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();
@@ -104,7 +112,6 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         };
     }
     createRenderRoot() { return this; }
-    shouldUpdate() { return false; }
     injectCss(cssText) {
         if (this.querySelector('style[data-rte-style]'))
             return;
@@ -116,9 +123,7 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.injectCss(styles.cssText);
-        this.toolbarEl = this.querySelector('nile-rte-toolbar');
-        this.previewEl = this.querySelector('nile-rte-preview');
-        this.ensureEditor();
+        this.ensureStructure();
         if (this.value && !this.editorEl.innerHTML.trim()) {
             this.editorEl.innerHTML = this.value;
         }
@@ -133,11 +138,35 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         this.wireEditor();
         this.updateToolbarState();
         this.syncPreview();
-        document.addEventListener('selectionchange', this.onSelectionChange, true);
-        if (this.mentionsEl) {
-            this.mentionsEl.addEventListener('mention-selected', (e) => {
-                this.updateContentWithMention(e.detail);
-            });
+    }
+    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');
+        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);
+            }
         }
     }
     updateContentWithMention(mentionDetail) {
@@ -158,27 +187,27 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
         }
         super.disconnectedCallback();
     }
+    updated(changed) {
+        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);
+            }
+        }
+    }
     ensureEditor() {
         this.editorEl = this.querySelector('.editor');
         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);
-            }
             this.editorEl = editor;
         }
         if (!this.editorEl.innerHTML.trim()) {
             this.editorEl.innerHTML = '<p><br></p>';
         }
-        this.ensureAtLeastOneParagraph();
     }
     unwrapMention(span, preserveText = true) {
         const parent = span.parentNode;
@@ -277,9 +306,13 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
                     btn.innerHTML = child.innerHTML;
                     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);
                 btn.addEventListener('mousedown', e => e.preventDefault());
@@ -621,6 +654,9 @@ let NileRichTextEditor = class NileRichTextEditor extends LitElement {
 __decorate([
     property({ type: String })
 ], NileRichTextEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'singlelineeditor' })
+], NileRichTextEditor.prototype, "singleLineEditor", void 0);
 __decorate([
     property({
         attribute: 'mentions',