@aquera/nile-elements 1.5.8 → 1.6.0

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

@@ -8,12 +8,15 @@ export class NileRteLink extends LitElement {
   }
 
   @property({ attribute: false }) editorEl!: HTMLElement;
-  @property({ type: Boolean }) newTab = false;
-  @property({ type: String }) placeholder = 'Type or paste link here';
-  @property({ type: String }) label = 'Link';
-
+  @property({ type: Boolean, reflect: true, attribute: true }) newTab = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) disabled = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) showTextSupport = false;
+  @property({ type: String, reflect: true, attribute: true }) placeholder = 'Type or paste link here';
+  @property({ type: String, reflect: true, attribute: true }) textPlaceholder = 'Display text';
+  @property({ type: String, reflect: true, attribute: true }) label = 'Link';
 
   @state() private linkValue = '';
+  @state() private textValue = '';
   @state() private hasActiveLink = false;
   @state() private popoverStyle = '';
 
@@ -30,41 +33,57 @@ export class NileRteLink extends LitElement {
 
     this.injectCss(`
       nile-popover.rte-link-popover::part(popover) {
-        min-width: 316px;
+        min-width: 340px;
+        max-width: 420px;
         background: white;
-        border: 1px solid var(--nile-colors-neutral-400,var(--ng-componentcolors-utility-gray-400));
-        border-radius: 4px;
+        border: 1px solid var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-400));
+        border-radius: 8px;
         padding: 0;
         gap: 0;
+        overflow: hidden;
+        height: auto;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      }
+
+      .link-popup-wrap {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+      }
+
+      .link-popup-wrap nile-input {
+        width: 100%;
+      }
+
+      .link-popup-wrap .link-input-row {
+        width: 100%;
       }
 
-      .link-popup {
+      .link-popup-wrap .link-actions-row {
         display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 6px 8px;
+        align-items: flex-end;
+        gap: 4px;
+        width: 100%;
       }
 
-      .link-input {
+      .link-popup-wrap .link-actions-row nile-input {
         flex: 1;
-        padding: 6px 8px;
-        font-size: 14px;
-        width: 276px;
-        height: 14px;
-        padding: 12px;
-        border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
-        border-radius: 4px;
+        min-width: 0;
+      }
+
+   
+      nile-button.rte-link-button::part(base) {
+        border: none;
+        height: 32px;
+        width: 32px;
+      }
+      nile-button.rte-edit-button::part(base) {
+        border: none;
+        height: 32px;
+        width: 32px;
+        flex-shrink: 0;
       }
-        nile-button.rte-link-button::part(base) {
-          border: none;
-          height: 32px; 
-          width: 32px;
-        }
-        nile-button.rte-edit-button::part(base) {
-          border: none;
-          height: 38px; 
-          width: 38px;
-        }
     `);
   }
 
@@ -84,7 +103,7 @@ export class NileRteLink extends LitElement {
   }
 
   private displayUrl(url: string): string {
-    return url.replace(/^https?:\/\//i, '');
+    return url;
   }
 
   private getSelectionRect(): DOMRect | null {
@@ -134,6 +153,7 @@ export class NileRteLink extends LitElement {
     window.removeEventListener('scroll', this.onScroll, true);
 
     this.linkValue = '';
+    this.textValue = '';
     this.selectionRange = null;
     this.activeAnchor = null;
     this.hasActiveLink = false;
@@ -147,9 +167,12 @@ export class NileRteLink extends LitElement {
 
  
 
-  private onOpen() {
+  private onOpen = () => {
+    if (this.disabled) return;
+
     const sel = document.getSelection();
     if (!sel || sel.rangeCount === 0) return;
+    if (!this.editorEl.contains(sel.getRangeAt(0).commonAncestorContainer)) return;
 
     this.selectionRange = sel.getRangeAt(0).cloneRange();
     this.activeAnchor = null;
@@ -169,40 +192,91 @@ export class NileRteLink extends LitElement {
       ? this.displayUrl(this.activeAnchor.href)
       : '';
 
+    if (this.showTextSupport) {
+      if (this.activeAnchor) {
+        this.textValue = this.activeAnchor.textContent || '';
+      } else if (!this.selectionRange.collapsed) {
+        this.textValue = this.selectionRange.toString();
+      } else {
+        this.textValue = '';
+      }
+    }
+
     this.positionPopover();
     this.openPopover();
 
     requestAnimationFrame(() => {
-      this.querySelector<HTMLInputElement>('.link-input')?.focus();
+      const inputs = this.querySelectorAll('nile-input');
+      const target = inputs.length > 1 ? inputs[1] : inputs[0];
+      (target as any)?.focus();
     });
   }
 
  
 
-  private onInputKeydown(e: KeyboardEvent) {
+  private onInputKeydown = (e: KeyboardEvent) => {
     if (e.key !== 'Escape' && e.key !== 'Enter') return;
-  
     e.preventDefault();
     e.stopPropagation();
-  
     if (e.key === 'Escape') {
       this.closePopover();
       return;
     }
-  
     this.isApplying = true;
     try {
       this.applyLink();
     } finally {
       this.isApplying = false;
     }
-  }
-  
-
-  private onInputBlur() {
+  };
+  private onInputBlur = () => {
     if (this.ignoreBlur || this.isApplying) return;
-    this.closePopover();
-  }
+    requestAnimationFrame(() => {
+      if (this.ignoreBlur || this.isApplying) return;
+      const pop = this.querySelector('nile-popover');
+      if (pop?.matches(':focus-within')) return;
+      this.closePopover();
+    });
+  };
+
+  private onLinkInput = (e: CustomEvent) => {
+    this.linkValue = e.detail.value;
+  };
+
+  private onTextInput = (e: CustomEvent) => {
+    this.textValue = e.detail.value;
+  };
+
+  private onPopoverMousedown = () => {
+    this.ignoreBlur = true;
+  };
+
+  private onPopoverMouseup = () => {
+    this.ignoreBlur = false;
+  };
+
+  private onToolbarButtonMousedown = (e: Event) => {
+    e.preventDefault();
+  };
+
+  private onActionMousedown = (e: Event) => {
+    e.preventDefault();
+    this.ignoreBlur = true;
+  };
+
+  private onApplyClick = () => {
+    this.isApplying = true;
+    this.applyLink();
+    this.isApplying = false;
+    this.ignoreBlur = false;
+  };
+
+  private onUnlinkClick = () => {
+    this.isApplying = true;
+    this.onRemove();
+    this.isApplying = false;
+    this.ignoreBlur = false;
+  };
 
  
 
@@ -211,19 +285,12 @@ export class NileRteLink extends LitElement {
 
     let url = this.linkValue.trim();
     if (!url) return;
-    
-    let parsed: URL;
-    try {
-      parsed = new URL(url, window.location.href);
-      if (!['http:', 'https:', 'mailto:', 'tel:'].includes(parsed.protocol)) return;
-    } catch {
-      return;
-    }
-    
-    url = parsed.href;
-    
 
-    url = this.normalizeUrl(url);
+    if (/^javascript:/i.test(url)) return;
+
+    if (!/^(https?:\/\/|mailto:|tel:|\/)/i.test(url)) {
+      url = `https://${url}`;
+    }
 
     this.editorEl.focus();
 
@@ -233,9 +300,17 @@ export class NileRteLink extends LitElement {
     sel.removeAllRanges();
     sel.addRange(this.selectionRange);
 
+    const displayText = this.showTextSupport && this.textValue.trim()
+      ? this.textValue.trim()
+      : '';
+
     if (this.activeAnchor) {
       this.activeAnchor.href = url;
 
+      if (displayText) {
+        this.activeAnchor.textContent = displayText;
+      }
+
       if (this.newTab) {
         this.activeAnchor.target = '_blank';
         this.activeAnchor.rel = 'noopener noreferrer';
@@ -256,7 +331,11 @@ export class NileRteLink extends LitElement {
         link.removeAttribute('rel');
       }      
 
-      if (this.selectionRange.collapsed) {
+      if (displayText) {
+        this.selectionRange.deleteContents();
+        link.textContent = displayText;
+        this.selectionRange.insertNode(link);
+      } else if (this.selectionRange.collapsed) {
         link.textContent = url;
         this.selectionRange.insertNode(link);
       } else {
@@ -292,58 +371,74 @@ export class NileRteLink extends LitElement {
   }
 
   render() {
+    const iconColor = this.disabled
+      ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))'
+      : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))';
+
     return html`
-    <nile-lite-tooltip content=${this.label}> 
-      <nile-button
-        variant="tertiary"
-        size="small"
-        @mousedown=${(e: Event) => e.preventDefault()}
-        @click=${() => this.onOpen()}
-        class="rte-link-button"
-      >
-        <nile-icon name="link_2"></nile-icon>
-      </nile-button>
-    </nile-lite-tooltip>
+      <nile-lite-tooltip content=${this.label}>
+        <nile-button
+          variant="tertiary"
+          size="small"
+          ?disabled=${this.disabled}
+          @mousedown=${this.onToolbarButtonMousedown}
+          @click=${this.onOpen}
+          class="rte-link-button"
+        >
+          <nile-icon name="link_2" color=${iconColor}></nile-icon>
+        </nile-button>
+      </nile-lite-tooltip>
 
       <nile-popover
         class="rte-link-popover"
         .arrow=${false}
         style=${this.popoverStyle}
-        @mousedown=${() => (this.ignoreBlur = true)}
-        @mouseup=${() => (this.ignoreBlur = false)}
+        @mousedown=${this.onPopoverMousedown}
+        @mouseup=${this.onPopoverMouseup}
       >
-        <div class="link-popup">
-          <input
-            class="link-input"
-            placeholder=${this.placeholder}
-            .value=${this.linkValue}
-            @input=${(e: Event) =>
-              (this.linkValue = (e.target as HTMLInputElement).value)}
-            @keydown=${this.onInputKeydown}
-            @blur=${this.onInputBlur}
-          />
-
-          ${this.hasActiveLink
-            ? html`
-                <nile-button
-                  size="small"
-                  variant="tertiary"
-                  class="rte-edit-button"
-                  @click=${() => this.applyLink()}
-                >
-                  <nile-icon name="pencil"></nile-icon>
-                </nile-button>
-
-                <nile-button
-                  size="small"
-                  variant="tertiary"
-                  class="rte-edit-button"
-                  @click=${() => this.onRemove()}
-                >
-                  <nile-icon name="unlink"></nile-icon>
-                </nile-button>
-              `
-            : null}
+        <div class="link-popup-wrap">
+          ${this.showTextSupport ? html`
+            <div class="link-input-row">
+              <nile-input
+                label="Text"
+                placeholder=${this.textPlaceholder}
+                .value=${this.textValue}
+                @nile-input=${this.onTextInput}
+                @keydown=${this.onInputKeydown}
+                @nile-blur=${this.onInputBlur}
+              ></nile-input>
+            </div>
+          ` : null}
+          <div class="link-actions-row">
+            <nile-input
+              label=${this.showTextSupport ? 'URL' : ''}
+              placeholder=${this.placeholder}
+              .value=${this.linkValue}
+              @nile-input=${this.onLinkInput}
+              @keydown=${this.onInputKeydown}
+              @nile-blur=${this.onInputBlur}
+            ></nile-input>
+            ${this.hasActiveLink ? html`
+              <nile-button
+                size="small"
+                variant="tertiary"
+                class="rte-edit-button"
+                @mousedown=${this.onActionMousedown}
+                @click=${this.onApplyClick}
+              >
+                <nile-icon name="pencil"></nile-icon>
+              </nile-button>
+              <nile-button
+                size="small"
+                variant="tertiary"
+                class="rte-edit-button"
+                @mousedown=${this.onActionMousedown}
+                @click=${this.onUnlinkClick}
+              >
+                <nile-icon name="unlink"></nile-icon>
+              </nile-button>
+            ` : null}
+          </div>
         </div>
       </nile-popover>
     `;

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

@@ -163,13 +163,20 @@ export function toggleInlineTag(
     }
   } else {
     textNodes.forEach(txt => {
-      const skip = txt.parentElement?.closest('a, .mention, nile-mention');
-      if (skip) return;
+      const inProtected = txt.parentElement?.closest('.mention, nile-mention');
+      if (inProtected) return;
+      const inAnchor = txt.parentElement?.closest('a');
+      if (inAnchor && tag === 'span') return;
       const wrapper = document.createElement(tag);
       if (attrs)
         Object.entries(attrs).forEach(([k, v]) => wrapper.setAttribute(k, v));
-      txt.parentNode?.insertBefore(wrapper, txt);
-      wrapper.appendChild(txt);
+      if (inAnchor) {
+        inAnchor.insertBefore(wrapper, txt);
+        wrapper.appendChild(txt);
+      } else {
+        txt.parentNode?.insertBefore(wrapper, txt);
+        wrapper.appendChild(txt);
+      }
     });
   }
 

package/vscode-html-custom-data.json

@@ -3931,7 +3931,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \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` - ",
+      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \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  * `linkEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorClick` - \n\n  * `onEditorInput` - \n\n  * `onEditorMouseup` - \n\n  * `onEditorKeyup` - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",
@@ -4010,17 +4010,31 @@
     },
     {
       "name": "nile-rte-link",
-      "description": "Events:\n\n  * `nile-link-changed` {`CustomEvent<{ href: string; }>`} - \n\nAttributes:\n\n  * `newTab` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `editorEl` {`HTMLElement`} - \n\n  * `newTab` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `label` {`string`} - \n\n  * `linkValue` {`string`} - \n\n  * `hasActiveLink` {`boolean`} - \n\n  * `popoverStyle` {`string`} - \n\n  * `selectionRange` {`Range | null`} - \n\n  * `activeAnchor` {`HTMLAnchorElement | null`} - \n\n  * `ignoreBlur` {`boolean`} - \n\n  * `isApplying` {`boolean`} - \n\n  * `onScroll` - ",
+      "description": "Events:\n\n  * `nile-link-changed` {`CustomEvent<{ href: string; }>`} - \n\nAttributes:\n\n  * `newTab` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTextSupport` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `textPlaceholder` {`string`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `editorEl` {`HTMLElement`} - \n\n  * `newTab` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTextSupport` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `textPlaceholder` {`string`} - \n\n  * `label` {`string`} - \n\n  * `linkValue` {`string`} - \n\n  * `textValue` {`string`} - \n\n  * `hasActiveLink` {`boolean`} - \n\n  * `popoverStyle` {`string`} - \n\n  * `selectionRange` {`Range | null`} - \n\n  * `activeAnchor` {`HTMLAnchorElement | null`} - \n\n  * `ignoreBlur` {`boolean`} - \n\n  * `isApplying` {`boolean`} - \n\n  * `onScroll` - \n\n  * `onOpen` - \n\n  * `onInputKeydown` - \n\n  * `onInputBlur` - \n\n  * `onLinkInput` - \n\n  * `onTextInput` - \n\n  * `onPopoverMousedown` - \n\n  * `onPopoverMouseup` - \n\n  * `onToolbarButtonMousedown` - \n\n  * `onActionMousedown` - \n\n  * `onApplyClick` - \n\n  * `onUnlinkClick` - ",
       "attributes": [
         {
           "name": "newTab",
           "description": "`newTab` {`boolean`} - \n\nProperty: newTab\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "showTextSupport",
+          "description": "`showTextSupport` {`boolean`} - \n\nProperty: showTextSupport\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "placeholder",
           "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: Type or paste link here"
         },
+        {
+          "name": "textPlaceholder",
+          "description": "`textPlaceholder` {`string`} - \n\nProperty: textPlaceholder\n\nDefault: Display text"
+        },
         {
           "name": "label",
           "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: Link"