@aquera/nile-elements 0.1.67-beta-1.6 → 0.1.67-beta-1.7

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

package/src/nile-icon/icons/svg/format_clear.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy43MDM1NSA1LjM4MTI5TDcuMDM5MzcgNC43MTcxMUw3LjU5NjIgMy4zNzI2N0g1LjY2Nzc3TDQuNzk0NTYgMi40OTkyN0gxMi4zNDI3VjMuMzY4NjFIOC41NTkxTDcuNzAzNTUgNS4zODEyOVpNMTIuNTAwMiAxM0w2Ljg2OTcxIDcuMzU1ODRMNS4yMzk5OSAxMS4xOTExSDQuMjg1MjFMNi4yMDk1OSA2LjY5NTg5TDEgMS40OTk4MkwxLjQ5OTgxIDFMMTMgMTIuNTAwNEwxMi41MDAyIDEzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/format_list_bulleted.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4yMTE2MyAxMS44NzkyVjExLjEyODZIMTNWMTEuODc5Mkg1LjIxMTYzWk01LjIxMTYzIDcuMzc1MzJWNi42MjQ2OEgxM1Y3LjM3NTMySDUuMjExNjNaTTUuMjExNjMgMi44NzE0M1YyLjEyMDc5SDEzVjIuODcxNDNINS4yMTE2M1pNMS45OTUyNSAxMi41QzEuNzIxNSAxMi41IDEuNDg3MTkgMTIuNDAyNSAxLjI5MjMxIDEyLjIwNzRDMS4wOTc0NCAxMi4wMTIzIDEgMTEuNzc3OCAxIDExLjUwMzlDMSAxMS4yMyAxLjA5NzQ0IDEwLjk5NTUgMS4yOTIzMSAxMC44MDAzQzEuNDg3MTkgMTAuNjA1MyAxLjcyMTUgMTAuNTA3OCAxLjk5NTI1IDEwLjUwNzhDMi4yNjg4OCAxMC41MDc4IDIuNTAzMTMgMTAuNjA1MyAyLjY5OCAxMC44MDAzQzIuODkyODggMTAuOTk1NSAyLjk5MDMxIDExLjIzIDIuOTkwMzEgMTEuNTAzOUMyLjk5MDMxIDExLjc3NzggMi44OTI4OCAxMi4wMTIzIDIuNjk4IDEyLjIwNzRDMi41MDMxMyAxMi40MDI1IDIuMjY4ODggMTIuNSAxLjk5NTI1IDEyLjVaTTEuOTk1MjUgNy45OTYxMUMxLjcyMTUgNy45OTYxMSAxLjQ4NzE5IDcuODk4NTkgMS4yOTIzMSA3LjcwMzU0QzEuMDk3NDQgNy41MDgzOCAxIDcuMjczODYgMSA3QzEgNi43MjYxNCAxLjA5NzQ0IDYuNDkxNjIgMS4yOTIzMSA2LjI5NjQ1QzEuNDg3MTkgNi4xMDE0MSAxLjcyMTUgNi4wMDM4OSAxLjk5NTI1IDYuMDAzODlDMi4yNjg4OCA2LjAwMzg5IDIuNTAzMTMgNi4xMDE0MSAyLjY5OCA2LjI5NjQ1QzIuODkyODggNi40OTE2MiAyLjk5MDMxIDYuNzI2MTQgMi45OTAzMSA3QzIuOTkwMzEgNy4yNzM4NiAyLjg5Mjg4IDcuNTA4MzggMi42OTggNy43MDM1NEMyLjUwMzEzIDcuODk4NTkgMi4yNjg4OCA3Ljk5NjExIDEuOTk1MjUgNy45OTYxMVpNMS45OTUyNSAzLjQ5MjIyQzEuNzIxNSAzLjQ5MjIyIDEuNDg3MTkgMy4zOTQ3IDEuMjkyMzEgMy4xOTk2NkMxLjA5NzQ0IDMuMDA0NDkgMSAyLjc2OTk3IDEgMi40OTYxMUMxIDIuMjIyMjUgMS4wOTc0NCAxLjk4NzczIDEuMjkyMzEgMS43OTI1N0MxLjQ4NzE5IDEuNTk3NTIgMS43MjE1IDEuNSAxLjk5NTI1IDEuNUMyLjI2ODg4IDEuNSAyLjUwMzEzIDEuNTk3NTIgMi42OTggMS43OTI1N0MyLjg5Mjg4IDEuOTg3NzMgMi45OTAzMSAyLjIyMjI1IDIuOTkwMzEgMi40OTYxMUMyLjk5MDMxIDIuNzY5OTcgMi44OTI4OCAzLjAwNDQ5IDIuNjk4IDMuMTk5NjZDMi41MDMxMyAzLjM5NDcgMi4yNjg4OCAzLjQ5MjIyIDEuOTk1MjUgMy40OTIyMloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/format_list_numbered.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS41IDEzVjEyLjQxMDNIMy4yMTg3NVYxMS41SDIuMTg3NVYxMC45MTAzSDMuMjE4NzVWMTBIMS41VjkuNDEwMzNIMy4zNTA5MkMzLjQ4NTc5IDkuNDEwMzMgMy41OTg4MiA5LjQ1NDU2IDMuNjkwMDMgOS41NDNDMy43ODEyNCA5LjYzMTQ0IDMuODI2ODQgOS43NDEwNiAzLjgyNjg0IDkuODcxODNWMTAuNzk0OEMzLjgyNjg0IDEwLjkyNTYgMy43ODEyNCAxMS4wMzUyIDMuNjkwMDMgMTEuMTIzN0MzLjU5ODgyIDExLjIxMjEgMy40ODU3OSAxMS4yNTYzIDMuMzUwOTIgMTEuMjU2M0MzLjQ4NTc5IDExLjI1NjMgMy41OTg4MiAxMS4zMDA2IDMuNjkwMDMgMTEuMzg5MkMzLjc4MTI0IDExLjQ3NzYgMy44MjY4NCAxMS41ODcyIDMuODI2ODQgMTEuNzE4VjEyLjUzODVDMy44MjY4NCAxMi42NjkzIDMuNzgxMjQgMTIuNzc4OSAzLjY5MDAzIDEyLjg2NzNDMy41OTg4MiAxMi45NTU4IDMuNDg1NzkgMTMgMy4zNTA5MiAxM0gxLjVaTTEuNSA4Ljc5NDgzVjcuMTY2NjdDMS41IDcuMDM1ODkgMS41NDU2IDYuOTI2MjggMS42MzY4MSA2LjgzNzgzQzEuNzI4MDIgNi43NDkzOSAxLjg0MTA2IDYuNzA1MTcgMS45NzU5MiA2LjcwNTE3SDMuMjE4NzVWNS43OTQ4M0gxLjVWNS4yMDUxN0gzLjM1MDkyQzMuNDg1NzkgNS4yMDUxNyAzLjU5ODgyIDUuMjQ5MzkgMy42OTAwMyA1LjMzNzgzQzMuNzgxMjQgNS40MjYyOCAzLjgyNjg0IDUuNTM1ODkgMy44MjY4NCA1LjY2NjY3VjYuODMzMzNDMy44MjY4NCA2Ljk2NDExIDMuNzgxMjQgNy4wNzM3MiAzLjY5MDAzIDcuMTYyMTdDMy41OTg4MiA3LjI1MDYxIDMuNDg1NzkgNy4yOTQ4MyAzLjM1MDkyIDcuMjk0ODNIMi4xMDgwOVY4LjIwNTE3SDMuODI2ODRWOC43OTQ4M0gxLjVaTTIuNTMxMjUgNC41ODk2N1YxLjU4OTY3SDEuNVYxSDMuMTM5MzRWNC41ODk2N0gyLjUzMTI1Wk01LjM2MDY2IDExLjMzMzNWMTAuNjY2N0gxMi41VjExLjMzMzNINS4zNjA2NlpNNS4zNjA2NiA3LjMzMzMzVjYuNjY2NjdIMTIuNVY3LjMzMzMzSDUuMzYwNjZaTTUuMzYwNjYgMy4zMzMzM1YyLjY2NjY3SDEyLjVWMy4zMzMzM0g1LjM2MDY2WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -176,7 +176,10 @@ export { default as format_align_left } from './format_align_left';
 export { default as format_align_middle } from './format_align_middle';
 export { default as format_align_right } from './format_align_right';
 export { default as format_bold } from './format_bold';
+export { default as format_clear } from './format_clear';
 export { default as format_italic } from './format_italic';
+export { default as format_list_bulleted } from './format_list_bulleted';
+export { default as format_list_numbered } from './format_list_numbered';
 export { default as format_underline } from './format_underline';
 export { default as frequency } from './frequency';
 export { default as fullunion } from './full-union';

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

@@ -2,9 +2,7 @@
 import { css } from 'lit';
 
 export const styles = css`
-  .editor * {
-  all: revert;
-}
+   
 
   nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
 
@@ -38,14 +36,14 @@ nile-rte-toolbar-item > nile-button::part(base) {
       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;
+      .editor h1, .preview 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;
+      .editor h2, .preview h2 { all: revert;	display: block;
 font-size: 1.5em;
 margin-top: 0.83em;
 margin-bottom: 0.83em;

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

@@ -9,11 +9,12 @@ import './nile-rte-color';
 import './nile-rte-divider';
 import './nile-rte-preview';
 import './nile-rte-mentions';
+import './nile-rte-link';
 
 import {
   closestBlock, nearestElement, rgbToHex,
   toggleInlineTag, setBlockTag, setAlignment,
-  setFontFamily, setForeColor,  insertOrEditLink, setBackColor
+  setFontFamily, setForeColor, setBackColor, 
 } from './utils';
 
 import {styles} from './nile-rich-text-editor.css';  
@@ -35,7 +36,7 @@ const DEFAULT_ICONS: Record<string, string> = {
   justify: 'format_align_justify',
   ul: 'format_list_bulleted',
   ol: 'format_list_numbered',
-  clear: 'error',
+  clear: 'format_clear',
 };
 
 @customElement('nile-rich-text-editor')
@@ -259,7 +260,16 @@ private bgSwatchEl: HTMLElement | null = null;
         });
         return;
       }
-  
+      if (tag === 'nile-rte-link') {
+        (child as any).editorEl = this.editorEl;
+        child.addEventListener('link-changed', () => {
+          this.updateContent();
+          this.updateToolbarState();
+        });
+        return;
+      }
+      
+      
 
       if (tag === 'nile-rte-toolbar-item') {
        
@@ -327,97 +337,33 @@ private bgSwatchEl: HTMLElement | null = null;
                   setFontFamily(this.editorEl, val);
                 }
         
-                // update the editor content & toolbar UI
+ 
                 this.updateContent();
                 this.updateToolbarState();
               });
 
-                  // nothing else to inject into the DOM
+            
                 return;
              }
      
 
              if (tag === 'nile-rte-color') {
-              const label = child.getAttribute('label') ?? 'Text color';
-              const value = child.getAttribute('value') ?? '#000000';
-              const mode  = child.getAttribute('mode')  ?? 'text'; // 'text' | 'background'
-            
-              // Create/attach the hidden color input
-              let input = child.querySelector(':scope > input[type="color"]') as HTMLInputElement | null;
-              if (!input) {
-                input = document.createElement('input');
-                input.type = 'color';
-                input.style.position = 'absolute';
-                input.style.opacity = '0';
-                input.style.pointerEvents = 'none'; // we'll click it programmatically
-                child.appendChild(input);
-              }
-              input.title = label;
-              input.value = value;
-            
-              let trigger = child.querySelector(':scope > nile-button') as HTMLElement | null;
-              if (!trigger) {
-                const nb = document.createElement('nile-button');
-                (nb as any).variant = 'ghost';
-                nb.className = 'rte-color-trigger';
-                nb.setAttribute('aria-label', label);
-              
-                if (mode === 'background') {
-                  nb.innerHTML = `<span class="swatch-box" aria-hidden="true"></span>`;
-                } else {
-                  nb.innerHTML = `
-                    <span class="glyph-stack" aria-hidden="true">
-                      <span class="glyph">A</span>
-                      <span class="underline"></span>
-                    </span>
-                  `;
-                }
-              
-                child.appendChild(nb);
-                trigger = nb;
-              }
-              
-            
-              // Cache swatch elements to update later
-              const underline = trigger.querySelector('.underline') as HTMLElement | null;
-              const square    = trigger.querySelector('.swatch-box') as HTMLElement | null;
-            
-              if (mode === 'background') {
-                this.bgColorInput  = input;
-                this.bgSwatchEl    = square;
-                if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input.value;
-              } else {
-                this.colorInput    = input;
-                this.colorSwatchEl = underline;
-                if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input.value;
-              }
-            
-              // Open native picker on trigger click
-              trigger.addEventListener('click', (e) => {
-                e.preventDefault();
-                // Keep selection before opening the picker
+              child.addEventListener('change', (e: any) => {
                 this.focusAndRestore();
-                input!.click();
-              });
+                const { mode, value } = e.detail;
             
-              // When the user picks a color, apply it + update swatch
-              input.addEventListener('input', () => {
-                this.focusAndRestore();
-                if (mode === 'background') {
-                  setBackColor(this.editorEl, input!.value);
-                  if (this.bgSwatchEl) this.bgSwatchEl.style.backgroundColor = input!.value;
+                if (mode === 'backColor') {
+                  setBackColor(this.editorEl, value);
                 } else {
-                  setForeColor(this.editorEl, input!.value);
-                  if (this.colorSwatchEl) this.colorSwatchEl.style.backgroundColor = input!.value;
+                  setForeColor(this.editorEl, value);
                 }
+            
                 this.updateContent();
                 this.updateToolbarState();
               });
-            
-              // Prevent losing selection when interacting
-              trigger.addEventListener('mousedown', e => e.preventDefault());
-              input.addEventListener('mousedown',  e => e.preventDefault());
+              return;
             }
+            
     });
   }
   private onSelectionChange = () => {
@@ -441,12 +387,12 @@ private bgSwatchEl: HTMLElement | null = null;
   }
   private focusAndRestore() { this.editorEl?.focus(); this.restoreSelection(); }
 
-  /*────────────────────────  LIST HELPERS  ────────────────────────*/
+ 
 private insertList(type: 'ul' | 'ol') {
   this.restoreSelection();
   if (!this.lastRange) return;
 
-  // build <ul>/<ol>
+ 
   const list = document.createElement(type);
 
   // grab the selected fragment
@@ -526,7 +472,7 @@ private ensureAtLeastOneParagraph() {
       case 'justify': setAlignment(this.editorEl, 'justify'); break;
       case 'ul': this.insertList('ul'); break;
       case 'ol': this.insertList('ol'); break;
-      case 'link': insertOrEditLink(this.editorEl); break;
+      case 'link':  break;
       case 'clear':
   const walker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
   const toUnwrap: HTMLElement[] = [];

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

@@ -1,14 +1,190 @@
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 
 @customElement('nile-rte-color')
 export class NileRteColor extends LitElement {
   protected createRenderRoot() { return this; }
-  protected shouldUpdate() { return false; }
 
-  /** 'foreColor' (reserved for future: 'backColor') */
-  @property({ type: String }) type = 'foreColor';
+  /** Whether this is text color or background color */
+  @property({ type: String }) mode: 'foreColor' | 'backColor' = 'foreColor';
   @property({ type: String }) label = 'Text Color';
   @property({ type: String }) value = '#000000';
+
+  /** Default palette, user can override via property or attribute */
+  @property({ type: Array })
+  palette: string[] = [
+    '#000000','#444444','#666666','#999999','#cccccc','#eeeeee','#ffffff',
+    '#d32f2f','#f44336','#ff9800','#ffeb3b','#4caf50','#2196f3','#3f51b5','#9c27b0',
+    '#03a9f4','#00bcd4','#009688','#8bc34a','#cddc39','#ffc107','#ff5722'
+  ];
+
+  @state() private recentColors: string[] = [];
+  private inputEl!: HTMLInputElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Inject styles once
+    this.injectCss(`
+      nile-button.rte-color-trigger::part(base){
+        width:32px; height:32px; padding:0px 6px;
+      }
+
+      .glyph-stack { display:grid; align-items:center; justify-items:center; line-height:1; }
+      .glyph { font-size:14px; margin-bottom:2px; }
+      .underline { width:18px; height:3px; border-radius:2px; }
+      .swatch-box { width:18px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.35); }
+
+      nile-popover::part(popover) {
+        min-width: 225px;
+        height: 250px;
+        padding: 0px;
+        gap: 0px;
+      }
+
+      .swatch-dropdown {
+        height: 245px;
+        width: 275px;
+        padding: 12px;
+        background: #fff;
+        border-radius: 8px;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
+
+      .section { margin-bottom: 12px; }
+      .title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color:#111; }
+
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 24px);
+        gap: 8px;
+      }
+
+      .swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid rgba(0,0,0,0.25);
+        cursor: pointer;
+        position: relative;
+        background-clip: content-box;
+      }
+
+      .swatch.add {
+        display:flex;
+        align-items:center;
+        justify-content:center;
+        font-weight:bold;
+        font-size:16px;
+        background:#fff;
+      }
+
+      .checkmark {
+        position: absolute;
+        top: 50%; left: 50%;
+        transform: translate(-50%,-50%);
+        font-size: 13px;
+        color: white;
+        text-shadow: 0 0 2px rgba(0,0,0,0.6);
+      }
+    `);
+
+    // hidden native color input
+    this.inputEl = document.createElement('input');
+    this.inputEl.type = 'color';
+    this.inputEl.style.position = 'absolute';
+    this.inputEl.style.opacity = '0';
+    this.inputEl.style.pointerEvents = 'none';
+    this.inputEl.value = this.value;
+    this.appendChild(this.inputEl);
+
+    this.inputEl.addEventListener('input', () => this.setColor(this.inputEl.value));
+  }
+
+  private injectCss(cssText: string) {
+    if (this.querySelector('style[data-rte-color-style]')) return;
+    const style = document.createElement('style');
+    style.setAttribute('data-rte-color-style', 'true');
+    style.textContent = cssText;
+    this.insertBefore(style, this.firstChild);
+  }
+
+  private setColor(color: string) {
+    this.value = color;
+    this.recentColors = [color, ...this.recentColors.filter(c => c !== color)].slice(0, 8);
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { mode: this.mode, value: color },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private pickCustom = () => this.inputEl.click();
+
+  render() {
+    return html`
+      <nile-popover placement="bottom-start" distance="6" .arrow=${false}>
+        <nile-button
+          slot="anchor"
+          variant="ghost"
+          size="small"
+          aria-label=${this.label}
+          class="rte-color-trigger"
+        >
+          ${this.mode === 'backColor'
+            ? html`<span class="swatch-box" style="background:${this.value}"></span>`
+            : html`
+                <span class="glyph-stack">
+                  <span class="glyph">A</span>
+                  <span class="underline" style="background:${this.value}"></span>
+                </span>
+              `}
+        </nile-button>
+
+        <div part="base" class="swatch-dropdown">
+          <div class="section">
+            <div class="title">Default</div>
+            <div class="swatches">
+              ${this.palette.map(c => html`
+                <button class="swatch" style="background:${c}"
+                  @click=${() => this.setColor(c)}
+                  title=${c}>
+                  ${this.value === c ? html`<span class="checkmark">✓</span>` : ''}
+                </button>
+              `)}
+            </div>
+          </div>
+
+          ${this.recentColors.length > 0 ? html`
+            <div class="section">
+              <div class="title">Recently Used</div>
+              <div class="swatches">
+                ${this.recentColors.map(c => html`
+                  <button class="swatch" style="background:${c}"
+                    @click=${() => this.setColor(c)}
+                    title=${c}></button>
+                `)}
+              </div>
+            </div>
+          ` : ''}
+
+          <div class="section">
+            <div class="title">Custom</div>
+            <div class="swatches">
+              <button class="swatch add" @click=${this.pickCustom}>+</button>
+              <nile-icon name="eyedropper"></nile-icon>
+            </div>
+          </div>
+        </div>
+      </nile-popover>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-color': NileRteColor;
+  }
 }
-declare global { interface HTMLElementTagNameMap { 'nile-rte-color': NileRteColor; } }

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

@@ -0,0 +1,161 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('nile-rte-link')
+export class NileRteLink extends LitElement {
+  protected createRenderRoot() { return this; }
+
+  @property({ attribute: false }) editorEl!: HTMLElement;
+  @property({ type: String }) placeholder = 'https://';
+
+  @state() private linkValue = '';
+  private selectionRange: Range | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.injectCss(`
+      nile-rte-link nile-button.rte-link-trigger::part(base) {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: none;
+        border-radius: 6px;
+      }
+      .link-popup {
+        display: flex;
+        gap: 6px;
+        padding: 6px 8px;
+        align-items: center;
+        background: white;
+      }
+      .link-input {
+        flex: 1;
+        padding: 6px 8px;
+        font-size: 14px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+        nile-popover.rte-link-popover::part(popover) {
+        min-width: 250px;
+        height: 44px;
+        padding: 0px;
+        gap: 0px;
+      }
+    `);
+  }
+
+  private injectCss(cssText: string) {
+    if (this.querySelector('style[data-rte-link-style]')) return;
+    const style = document.createElement('style');
+    style.setAttribute('data-rte-link-style', 'true');
+    style.textContent = cssText;
+    this.insertBefore(style, this.firstChild);
+  }
+
+  private onOpen() {
+    if (!this.editorEl) return;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+
+    this.selectionRange = sel.getRangeAt(0).cloneRange();
+
+    // Pre-fill with existing href if selection inside <a>
+    let n: Node | null = sel.anchorNode;
+    let a: HTMLAnchorElement | null = null;
+    while (n && n !== this.editorEl) {
+      if (n instanceof HTMLAnchorElement) { a = n; break; }
+      n = n.parentNode;
+    }
+    this.linkValue = a?.href || '';
+
+    setTimeout(() => {
+      this.querySelector<HTMLInputElement>('.link-input')?.focus();
+    }, 0);
+  }
+
+  private onApply() {
+    if (!this.editorEl || !this.selectionRange) return;
+    const url = this.linkValue.trim();
+    if (!url) return;
+
+    const sel = document.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(this.selectionRange);
+
+    // Check for existing <a>
+    let n: Node | null = this.selectionRange.startContainer;
+    let a: HTMLAnchorElement | null = null;
+    while (n && n !== this.editorEl) {
+      if (n instanceof HTMLAnchorElement) { a = n; break; }
+      n = n.parentNode;
+    }
+
+    if (a) {
+      a.href = url;
+    } else {
+      const link = document.createElement('a');
+      link.href = url;
+      if (this.selectionRange.collapsed) {
+        link.textContent = url;
+        this.selectionRange.insertNode(link);
+      } else {
+        try {
+          this.selectionRange.surroundContents(link);
+        } catch {
+          const frag = this.selectionRange.extractContents();
+          link.appendChild(frag);
+          this.selectionRange.insertNode(link);
+        }
+      }
+    }
+
+    this.emit(url);
+
+    // Close the popover by toggling `open`
+    const pop = this.querySelector('nile-popover');
+    if (pop) (pop as any).isShow = false;
+  }
+
+  private emit(href: string) {
+    this.dispatchEvent(new CustomEvent('link-changed', {
+      detail: { href },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <nile-popover placement="bottom-start"  class="rte-link-popover" distance="10" .arrow=${false}>
+        <nile-button class="rte-link-trigger" slot="anchor" variant="tertiary" size="small" @click=${() => this.onOpen()}>
+          <nile-icon name="link_2" aria-label="Insert/Edit Link"></nile-icon>
+        </nile-button>
+
+        <div class="link-popup">
+          <input
+            class="link-input"
+            type="text"
+            placeholder="Type or paste link here"
+            .value=${this.linkValue}
+            @input=${(e: any) => this.linkValue = e.target.value}
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === 'Enter') this.onApply();
+              if (e.key === 'Escape') {
+                const pop = this.querySelector('nile-popover');
+                if (pop) (pop as any).isShow = false;
+              }
+            }}
+          />
+          <nile-button @click=${() => this.onApply()}>Apply</nile-button>
+        </div>
+      </nile-popover>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-link': NileRteLink;
+  }
+}

package/vscode-html-custom-data.json

@@ -2971,11 +2971,19 @@
     },
     {
       "name": "nile-rte-color",
-      "description": "Attributes:\n\n  * `type` {`string`} - 'foreColor' (reserved for future: 'backColor')\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\nProperties:\n\n  * `type` {`string`} - 'foreColor' (reserved for future: 'backColor')\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - ",
+      "description": "Events:\n\n  * `change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - \n\nAttributes:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperties:\n\n  * `mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `palette` {`string[]`} - Default palette, user can override via property or attribute\n\n  * `recentColors` {`string[]`} - \n\n  * `inputEl` {`HTMLInputElement`} - \n\n  * `pickCustom` - ",
       "attributes": [
         {
-          "name": "type",
-          "description": "`type` {`string`} - 'foreColor' (reserved for future: 'backColor')\n\nProperty: type\n\nDefault: foreColor"
+          "name": "mode",
+          "description": "`mode` {`\"foreColor\" | \"backColor\"`} - Whether this is text color or background color\n\nProperty: mode\n\nDefault: foreColor",
+          "values": [
+            {
+              "name": "foreColor"
+            },
+            {
+              "name": "backColor"
+            }
+          ]
         },
         {
           "name": "label",
@@ -2984,6 +2992,14 @@
         {
           "name": "value",
           "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: #000000"
+        },
+        {
+          "name": "palette",
+          "description": "`palette` {`string[]`} - Default palette, user can override via property or attribute\n\nProperty: palette\n\nDefault: #000000,#444444,#666666,#999999,#cccccc,#eeeeee,#ffffff,#d32f2f,#f44336,#ff9800,#ffeb3b,#4caf50,#2196f3,#3f51b5,#9c27b0,#03a9f4,#00bcd4,#009688,#8bc34a,#cddc39,#ffc107,#ff5722"
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<{ mode: \"foreColor\" | \"backColor\"; value: string; }>`} - "
         }
       ]
     },
@@ -2991,6 +3007,20 @@
       "name": "nile-rte-divider",
       "attributes": []
     },
+    {
+      "name": "nile-rte-link",
+      "description": "Events:\n\n  * `link-changed` {`CustomEvent<{ href: string; }>`} - \n\nAttributes:\n\n  * `placeholder` {`string`} - \n\nProperties:\n\n  * `editorEl` {`HTMLElement`} - \n\n  * `placeholder` {`string`} - \n\n  * `linkValue` {`string`} - \n\n  * `selectionRange` {`Range | null`} - ",
+      "attributes": [
+        {
+          "name": "placeholder",
+          "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: https://"
+        },
+        {
+          "name": "onlink-changed",
+          "description": "`link-changed` {`CustomEvent<{ href: string; }>`} - "
+        }
+      ]
+    },
     {
       "name": "nile-rte-mentions-item",
       "description": "Attributes:\n\n  * `mentionscharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionscolor` {`string`} - \n\n  * `mentionsprefix` {`string`} - \n\n  * `mentionssuffix` {`string`} - \n\n  * `mentionsdata` {`MentionItem[]`} - \n\nProperties:\n\n  * `mentionsCharacter` {`string`} - Single-character trigger, e.g., '@' or '#'\n\n  * `mentionsColor` {`string`} - \n\n  * `mentionsPrefix` {`string`} - \n\n  * `mentionsSuffix` {`string`} - \n\n  * `mentionsData` {`MentionItem[]`} - ",