@aquera/nile-elements 1.5.9 → 1.6.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -172,6 +172,30 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
   background-color: var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));  
 }
 
+nile-rte-link nile-button[data-active]::part(base) {
+  background-color: var(--nile-colors-primary-400, var(--ng-componentcolors-utility-blue-400));
+}
+
+nile-rte-link nile-button[data-active]::part(base):hover {
+  background-color: var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));
+}
+
+.editor a {
+  color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600));
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.editor a:hover {
+  text-decoration: none;
+}
+
+nile-rich-text-editor[disabled] .editor a {
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .editor.empty::before {
   content: attr(data-placeholder);
   color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));

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

@@ -134,6 +134,7 @@ export class NileRichTextEditor extends LitElement {
   private colorSwatchEl: HTMLElement | null = null;
   private bgSwatchEl: HTMLElement | null = null;
   private containerEl: HTMLElement | null = null;
+  private linkEl: HTMLElement | null = null;
 
   private mentionsEl: HTMLElement | null = null;
 
@@ -223,6 +224,7 @@ export class NileRichTextEditor extends LitElement {
   }
 
   disconnectedCallback(): void {
+    this.unwireEditor();
     document.removeEventListener('selectionchange', this.onSelectionChange);
 
     if (this.mentionsEl && (this.mentionsEl as any).detach) {
@@ -249,6 +251,16 @@ export class NileRichTextEditor extends LitElement {
     if (changed.has('disabled') && this.editorEl) {
       this.editorEl.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
       this.editorEl.tabIndex = this.disabled ? -1 : 0;
+      if (this.linkEl) {
+        (this.linkEl as any).disabled = this.disabled;
+      }
+    }
+    if (changed.has('placeholder') && this.editorEl) {
+      if (this.placeholder) {
+        this.editorEl.dataset.placeholder = this.placeholder;
+      } else {
+        delete this.editorEl.dataset.placeholder;
+      }
     }
   
   }
@@ -314,36 +326,57 @@ export class NileRichTextEditor extends LitElement {
     });
   }
 
-  private wireEditor() {
-    this.editorEl.addEventListener('input', () => {
-      this.ensureAtLeastOneParagraph();
-      this.scrubBrokenMentions();
-      this.updateContent();
-      this.updateToolbarState();
-    });
-    this.editorEl.addEventListener('mouseup', () => {
-      this.saveSelection();
+  private onEditorClick = (e: MouseEvent) => {
+    const anchor = (e.target as HTMLElement).closest?.('a');
+    if (anchor) e.preventDefault();
+  };
+
+  private onEditorInput = () => {
+    this.ensureAtLeastOneParagraph();
+    this.scrubBrokenMentions();
+    this.updateContent();
+    this.updateToolbarState();
+  };
+
+  private onEditorMouseup = () => {
+    this.saveSelection();
+    this.updateToolbarState();
+  };
+
+  private onEditorKeyup = (e: KeyboardEvent) => {
+    this.saveSelection();
+
+    if (
+      [
+        'ArrowLeft',
+        'ArrowRight',
+        'ArrowUp',
+        'ArrowDown',
+        'Home',
+        'End',
+      ].includes(e.key)
+    ) {
       this.updateToolbarState();
-    });
-    this.editorEl.addEventListener('keyup', e => {
-      this.saveSelection();
+    }
+  };
 
-      if (
-        [
-          'ArrowLeft',
-          'ArrowRight',
-          'ArrowUp',
-          'ArrowDown',
-          'Home',
-          'End',
-        ].includes(e.key)
-      ) {
-        this.updateToolbarState();
-      }
-    });
+  private wireEditor() {
+    this.editorEl.addEventListener('click', this.onEditorClick);
+    this.editorEl.addEventListener('input', this.onEditorInput);
+    this.editorEl.addEventListener('mouseup', this.onEditorMouseup);
+    this.editorEl.addEventListener('keyup', this.onEditorKeyup);
     this.editorEl.addEventListener('keydown', this.onEditorKeydown);
   }
 
+  private unwireEditor() {
+    if (!this.editorEl) return;
+    this.editorEl.removeEventListener('click', this.onEditorClick);
+    this.editorEl.removeEventListener('input', this.onEditorInput);
+    this.editorEl.removeEventListener('mouseup', this.onEditorMouseup);
+    this.editorEl.removeEventListener('keyup', this.onEditorKeyup);
+    this.editorEl.removeEventListener('keydown', this.onEditorKeydown);
+  }
+
   private onEditorKeydown = (e: KeyboardEvent) => {
     if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
@@ -426,7 +459,9 @@ export class NileRichTextEditor extends LitElement {
       }
       if (tag === 'nile-rte-link') {
         (child as any).editorEl = this.editorEl;
-        child.addEventListener('link-changed', () => {
+        (child as any).disabled = this.disabled;
+        this.linkEl = child as HTMLElement;
+        child.addEventListener('nile-link-changed', () => {
           this.updateContent();
           this.updateToolbarState();
         });
@@ -768,6 +803,11 @@ export class NileRichTextEditor extends LitElement {
     this.setBtnActive('underline', isUnderline);
     this.setBtnActive('link', inLink);
 
+    if (this.linkEl) {
+      const linkBtn = this.linkEl.querySelector('nile-button');
+      if (linkBtn) linkBtn.toggleAttribute('data-active', inLink);
+    }
+
     this.setBtnActive(
       'left',
       alignNorm === 'left' &&