@domternal/angular 0.4.1 → 0.5.1

package/README.md

@@ -24,7 +24,7 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **7,500+ tests** - 3,936 unit tests and 3,652 E2E tests across 76 Playwright specs
+- **6,400+ tests** - 2,677 unit tests and 3,793 E2E tests across 80 Playwright specs
 - **Light and dark theme** - 70+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering

package/dist/README.md

@@ -24,7 +24,7 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **7,500+ tests** - 3,936 unit tests and 3,652 E2E tests across 76 Playwright specs
+- **6,400+ tests** - 2,677 unit tests and 3,767 E2E tests across 78 Playwright specs
 - **Light and dark theme** - 70+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering

package/dist/fesm2022/domternal-angular.mjs

@@ -184,7 +184,7 @@ class DomternalEditorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", contentUpdated: "contentUpdated", selectionChanged: "selectionChanged", focusChanged: "focusChanged", blurChanged: "blurChanged", editorDestroyed: "editorDestroyed" }, host: { classAttribute: "dm-editor" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", contentUpdated: "contentUpdated", selectionChanged: "selectionChanged", focusChanged: "focusChanged", blurChanged: "blurChanged", editorDestroyed: "editorDestroyed" }, host: { attributes: { "data-dm-editor-ui": "" }, classAttribute: "dm-editor" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DomternalEditorComponent),
@@ -194,7 +194,7 @@ class DomternalEditorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'domternal-editor', template: '<div #editorRef></div>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'dm-editor' }, providers: [
+            args: [{ selector: 'domternal-editor', template: '<div #editorRef></div>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'dm-editor', 'data-dm-editor-ui': '' }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DomternalEditorComponent),
@@ -401,6 +401,14 @@ class DomternalToolbarComponent {
             return;
         }
         this.controller?.executeCommand(item);
+        // If the button was activated via keyboard (Enter/Space on a focused
+        // toolbar button), refocus the editor so the browser renders the
+        // ::selection highlight for the still-active range.
+        // Keyboard-triggered click events have detail === 0.
+        // Always refocus editor after executing a command via toolbar button.
+        // Mouse clicks already keep focus via mousedown.preventDefault();
+        // keyboard activations (Enter/Space) need explicit refocus.
+        requestAnimationFrame(() => this.editor().view.focus());
     }
     onDropdownToggle(dropdown) {
         this.cleanupFloating?.();
@@ -439,6 +447,8 @@ class DomternalToolbarComponent {
         else {
             this.controller?.executeCommand(item);
         }
+        // Refocus editor so ::selection highlight stays visible
+        requestAnimationFrame(() => this.editor().view.focus());
     }
     onButtonFocus(name) {
         const index = this.controller?.getFlatIndex(name) ?? -1;
@@ -470,6 +480,27 @@ class DomternalToolbarComponent {
                 this.controller.navigateLast();
                 this.focusCurrentButton();
                 break;
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (this.openDropdown()) {
+                    this.focusDropdownItem(1);
+                }
+                else {
+                    const btn = document.activeElement;
+                    if (btn?.getAttribute('aria-haspopup') && btn.closest('.dm-toolbar')) {
+                        btn.click();
+                        requestAnimationFrame(() => this.focusDropdownItem(0, true));
+                    }
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (this.openDropdown()) {
+                    this.focusDropdownItem(-1);
+                }
+                break;
+            }
             case 'Escape':
                 if (this.openDropdown()) {
                     event.preventDefault();
@@ -483,6 +514,24 @@ class DomternalToolbarComponent {
         }
     }
     // === Private ===
+    focusDropdownItem(direction, first) {
+        const panel = this.elRef.nativeElement.querySelector('.dm-toolbar-dropdown-panel');
+        if (!panel)
+            return;
+        const items = Array.from(panel.querySelectorAll('[role="menuitem"]'));
+        if (!items.length)
+            return;
+        if (first) {
+            items[0]?.focus();
+            return;
+        }
+        const current = document.activeElement;
+        const idx = items.indexOf(current);
+        const next = idx === -1
+            ? (direction > 0 ? 0 : items.length - 1)
+            : (idx + direction + items.length) % items.length;
+        items[next]?.focus();
+    }
     resolveIconSvg(name) {
         const customIcons = this.icons();
         if (customIcons) {
@@ -589,7 +638,7 @@ class DomternalToolbarComponent {
         buttons[idx]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalToolbarComponent, isStandalone: true, selector: "domternal-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "\"Editor formatting\"" }, classAttribute: "dm-toolbar" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalToolbarComponent, isStandalone: true, selector: "domternal-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar", "data-dm-editor-ui": "" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "\"Editor formatting\"" }, classAttribute: "dm-toolbar" }, ngImport: i0, template: `
     @for (group of groups(); track group.name; let gi = $index) {
       @if (gi > 0) {
         <div class="dm-toolbar-separator" role="separator"></div>
@@ -642,6 +691,7 @@ class DomternalToolbarComponent {
                           class="dm-color-swatch"
                           [class.dm-color-swatch--active]="isActive(sub.name)"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [title]="sub.label"
                           [style.background-color]="sub.color"
@@ -653,8 +703,10 @@ class DomternalToolbarComponent {
                           type="button"
                           class="dm-color-palette-reset"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          [attr.tabindex]="-1"
                           (mousedown)="$event.preventDefault()"
                           (click)="onDropdownItemClick(sub)"
                         ></button>
@@ -670,6 +722,7 @@ class DomternalToolbarComponent {
                         class="dm-toolbar-dropdown-item"
                         [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
                         role="menuitem"
+                        [attr.tabindex]="-1"
                         [attr.aria-label]="sub.label"
                         [attr.style]="sub.style ?? null"
                         [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
@@ -696,6 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     host: {
                         'class': 'dm-toolbar',
                         'role': 'toolbar',
+                        'data-dm-editor-ui': '',
                         '[attr.aria-label]': '"Editor formatting"',
                         '(keydown)': 'onKeydown($event)',
                     },
@@ -752,6 +806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                           class="dm-color-swatch"
                           [class.dm-color-swatch--active]="isActive(sub.name)"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [title]="sub.label"
                           [style.background-color]="sub.color"
@@ -763,8 +818,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                           type="button"
                           class="dm-color-palette-reset"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          [attr.tabindex]="-1"
                           (mousedown)="$event.preventDefault()"
                           (click)="onDropdownItemClick(sub)"
                         ></button>
@@ -780,6 +837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         class="dm-toolbar-dropdown-item"
                         [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
                         role="menuitem"
+                        [attr.tabindex]="-1"
                         [attr.aria-label]="sub.label"
                         [attr.style]="sub.style ?? null"
                         [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
@@ -1115,13 +1173,14 @@ class DomternalBubbleMenuComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalBubbleMenuComponent, isStandalone: true, selector: "domternal-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, updateDelay: { classPropertyName: "updateDelay", publicName: "updateDelay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contexts: { classPropertyName: "contexts", publicName: "contexts", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div #menuEl class="dm-bubble-menu">
+    <div #menuEl class="dm-bubble-menu" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
-          <span class="dm-toolbar-separator"></span>
+          <span class="dm-toolbar-separator" role="separator"></span>
         } @else {
           <button type="button" class="dm-toolbar-button"
             [class.dm-toolbar-button--active]="isItemActive(item)"
+            [attr.aria-pressed]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
             [attr.aria-label]="item.label"
@@ -1137,13 +1196,14 @@ class DomternalBubbleMenuComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'domternal-bubble-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div #menuEl class="dm-bubble-menu">
+    <div #menuEl class="dm-bubble-menu" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
-          <span class="dm-toolbar-separator"></span>
+          <span class="dm-toolbar-separator" role="separator"></span>
         } @else {
           <button type="button" class="dm-toolbar-button"
             [class.dm-toolbar-button--active]="isItemActive(item)"
+            [attr.aria-pressed]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
             [attr.aria-label]="item.label"
@@ -1297,10 +1357,62 @@ class DomternalEmojiPickerComponent {
             const label = grid.querySelector(`[data-category="${cat}"]`);
             if (label) {
                 // Use manual scrollTop instead of scrollIntoView to avoid scrolling the page
-                grid.scrollTo({ top: label.offsetTop - grid.offsetTop, behavior: 'smooth' });
+                grid.scrollTo({ top: label.offsetTop - grid.offsetTop });
+                // Focus first emoji swatch after scroll completes
+                setTimeout(() => {
+                    const firstSwatch = label.nextElementSibling;
+                    if (firstSwatch instanceof HTMLElement && firstSwatch.classList.contains('dm-emoji-swatch')) {
+                        firstSwatch.focus();
+                    }
+                }, 50);
             }
         });
     }
+    onGridKeydown(event) {
+        const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
+        if (!grid)
+            return;
+        const swatches = Array.from(grid.querySelectorAll('.dm-emoji-swatch'));
+        if (!swatches.length)
+            return;
+        const current = document.activeElement;
+        let idx = swatches.indexOf(current);
+        if (idx === -1) {
+            // Focus is on grid container, not a swatch — enter the grid
+            if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+                swatches[0]?.focus();
+            }
+            return;
+        }
+        const cols = 8;
+        let next = idx;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                next = Math.min(idx + 1, swatches.length - 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                next = Math.max(idx - 1, 0);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next = Math.min(idx + cols, swatches.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                next = Math.max(idx - cols, 0);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                swatches[idx]?.click();
+                return;
+            default: return;
+        }
+        swatches[next]?.focus();
+    }
     onGridScroll() {
         const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
         if (!grid || this.searchQuery())
@@ -1423,6 +1535,7 @@ class DomternalEmojiPickerComponent {
             placeholder="Search emoji..."
             [value]="searchQuery()"
             (input)="onSearch($event)"
+            aria-label="Search emoji"
             (keydown.escape)="close()"
           />
         </div>
@@ -1433,6 +1546,8 @@ class DomternalEmojiPickerComponent {
               type="button"
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              role="tab"
+              [attr.aria-selected]="activeCategory() === cat"
               [title]="cat"
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
@@ -1441,12 +1556,13 @@ class DomternalEmojiPickerComponent {
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
                 type="button"
                 class="dm-emoji-swatch"
+                [attr.tabindex]="-1"
                 [title]="formatName(item.name)"
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
@@ -1463,6 +1579,7 @@ class DomternalEmojiPickerComponent {
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1476,6 +1593,7 @@ class DomternalEmojiPickerComponent {
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1506,6 +1624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             placeholder="Search emoji..."
             [value]="searchQuery()"
             (input)="onSearch($event)"
+            aria-label="Search emoji"
             (keydown.escape)="close()"
           />
         </div>
@@ -1516,6 +1635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
               type="button"
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              role="tab"
+              [attr.aria-selected]="activeCategory() === cat"
               [title]="cat"
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
@@ -1524,12 +1645,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
                 type="button"
                 class="dm-emoji-swatch"
+                [attr.tabindex]="-1"
                 [title]="formatName(item.name)"
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
@@ -1546,6 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1559,6 +1682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"