@domternal/angular 0.2.1 → 0.3.0

package/README.md

@@ -3,13 +3,16 @@
 [![Version](https://img.shields.io/npm/v/@domternal/angular.svg)](https://www.npmjs.com/package/@domternal/angular)
 [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)
 
-A lightweight, extensible rich text editor toolkit built on [ProseMirror](https://prosemirror.net/). Framework-agnostic headless core with first-class **Angular** support. Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
+A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular support.  
+Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
 
-**[Website](https://domternal.dev)** · **[Documentation](https://domternal.dev/v1/introduction)** · **[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)** · **[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)**
+## Links
+
+<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/introduction)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u>
 
 ## Features
 
-See [Packages & Bundle Size](https://domternal.dev/v1/packages) for a full breakdown of all packages and what each one includes.
+See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a full breakdown of all packages and what each one includes.
 
 - **Headless core** - use with any framework or vanilla JS/TS
 - **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
@@ -17,20 +20,20 @@ See [Packages & Bundle Size](https://domternal.dev/v1/packages) for a full break
 - **140+ chainable commands** - `editor.chain().focus().toggleBold().run()`
 - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
-- **~38 KB gzipped** (own code), [~108 KB total](https://domternal.dev/v1/packages) with ProseMirror
+- **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **4,200+ tests** - 2,675 unit tests and 1,550 E2E tests across 34 Playwright specs
+- **4,400+ tests** - 2,687 unit tests and 1,796 E2E tests across 37 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
 
 ## Documentation
 
-- [Getting Started](https://domternal.dev/v1/getting-started) - install and create your first editor
-- [Introduction](https://domternal.dev/v1/introduction) - core concepts, architecture, and design decisions
-- [Packages & Bundle Size](https://domternal.dev/v1/packages) - what each package includes and bundle size breakdown
-- [Blog](https://domternal.dev/blog)
+- <u>[Getting Started](https://domternal.dev/v1/getting-started)</u> - install and create your first editor
+- <u>[Introduction](https://domternal.dev/v1/introduction)</u> - core concepts, architecture, and design decisions
+- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
+- <u>[Blog](https://domternal.dev/blog)</u>
 
 ## License
 
-[MIT](https://github.com/domternal/domternal/blob/main/LICENSE)
+<u>[MIT](https://github.com/domternal/domternal/blob/main/LICENSE)</u>

package/dist/README.md

@@ -1,71 +1,39 @@
 # @domternal/angular
 
-Angular components for the Domternal editor: editor, toolbar, bubble menu, floating menu, and emoji picker. Standalone components with signals, OnPush change detection, reactive forms (`ControlValueAccessor`), and zoneless mode support.
+[![Version](https://img.shields.io/npm/v/@domternal/angular.svg)](https://www.npmjs.com/package/@domternal/angular)
+[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)
 
-Part of the [Domternal](https://github.com/domternal/domternal) toolkit. Full docs at [domternal.dev](https://domternal.dev).
+A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular support.  
+Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
 
-Requires Angular 17.1+.
+## Links
 
-## Installation
+<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/introduction)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u>
 
-```bash
-npm install @domternal/core @domternal/theme @domternal/angular
-```
+## Features
 
-## Quick Start
+See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a full breakdown of all packages and what each one includes.
 
-```ts
-import { Component, signal } from '@angular/core';
-import {
-  DomternalEditorComponent,
-  DomternalToolbarComponent,
-  DomternalBubbleMenuComponent,
-} from '@domternal/angular';
-import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
+- **Headless core** - use with any framework or vanilla JS/TS
+- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
+- **57 extensions across 10 packages** - 23 nodes, 9 marks, and 25 behavior extensions
+- **140+ chainable commands** - `editor.chain().focus().toggleBold().run()`
+- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
+- **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`
+- **4,400+ tests** - 2,687 unit tests and 1,796 E2E tests across 37 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
 
-@Component({
-  imports: [DomternalEditorComponent, DomternalToolbarComponent, DomternalBubbleMenuComponent],
-  template: `
-    @if (editor(); as ed) {
-      <domternal-toolbar [editor]="ed" />
-    }
-    <domternal-editor
-      [extensions]="extensions"
-      [content]="content"
-      (editorCreated)="editor.set($event)"
-    />
-    @if (editor(); as ed) {
-      <domternal-bubble-menu [editor]="ed" />
-    }
-  `,
-})
-export class EditorComponent {
-  editor = signal<Editor | null>(null);
-  extensions = [StarterKit, BubbleMenu];
-  content = '<p>Hello from Angular!</p>';
-}
-```
+## Documentation
 
-### Global Styles
-
-Add the theme to your global stylesheet to load editor and toolbar styles:
-
-```scss
-@use '@domternal/theme';
-```
-
-### Available Components
-
-| Component | Description |
-|---|---|
-| `<domternal-editor>` | The core editor surface |
-| `<domternal-toolbar>` | Auto-renders toolbar buttons based on provided extensions |
-| `<domternal-bubble-menu>` | Contextual formatting menu on text selection |
-| `<domternal-floating-menu>` | Block-level insertion menu on empty lines |
-| `<domternal-emoji-picker>` | Emoji picker panel for the Emoji extension |
-
-The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.
+- <u>[Getting Started](https://domternal.dev/v1/getting-started)</u> - install and create your first editor
+- <u>[Introduction](https://domternal.dev/v1/introduction)</u> - core concepts, architecture, and design decisions
+- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
+- <u>[Blog](https://domternal.dev/blog)</u>
 
 ## License
 
-[MIT](https://github.com/domternal/domternal/blob/main/LICENSE)
+<u>[MIT](https://github.com/domternal/domternal/blob/main/LICENSE)</u>

package/dist/fesm2022/domternal-angular.mjs

@@ -314,7 +314,7 @@ class DomternalToolbarComponent {
     getTooltip(item) {
         if (item.shortcut) {
             const parts = item.shortcut.split('-');
-            const mapped = parts.map(p => {
+            const mapped = parts.map((p) => {
                 if (p === 'Mod')
                     return isMac ? '\u2318' : 'Ctrl';
                 if (p === 'Shift')
@@ -1124,6 +1124,7 @@ class DomternalBubbleMenuComponent {
             [class.dm-toolbar-button--active]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
+            [attr.aria-label]="item.label"
             [innerHTML]="getCachedIcon(item.icon)"
             (mousedown)="$event.preventDefault()"
             (click)="executeCommand(item)"></button>
@@ -1145,6 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             [class.dm-toolbar-button--active]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
+            [attr.aria-label]="item.label"
             [innerHTML]="getCachedIcon(item.icon)"
             (mousedown)="$event.preventDefault()"
             (click)="executeCommand(item)"></button>
@@ -1432,6 +1434,7 @@ class DomternalEmojiPickerComponent {
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
               [title]="cat"
+              [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
               (click)="scrollToCategory(cat)"
             >{{ categoryIcon(cat) }}</button>
@@ -1445,6 +1448,7 @@ class DomternalEmojiPickerComponent {
                 type="button"
                 class="dm-emoji-swatch"
                 [title]="formatName(item.name)"
+                [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
                 (click)="selectEmoji(item)"
               >{{ item.emoji }}</button>
@@ -1460,6 +1464,7 @@ class DomternalEmojiPickerComponent {
                   type="button"
                   class="dm-emoji-swatch"
                   [title]="formatName(item.name)"
+                  [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
                 >{{ item.emoji }}</button>
@@ -1472,6 +1477,7 @@ class DomternalEmojiPickerComponent {
                   type="button"
                   class="dm-emoji-swatch"
                   [title]="formatName(item.name)"
+                  [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
                 >{{ item.emoji }}</button>
@@ -1511,6 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
               [title]="cat"
+              [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
               (click)="scrollToCategory(cat)"
             >{{ categoryIcon(cat) }}</button>
@@ -1524,6 +1531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type="button"
                 class="dm-emoji-swatch"
                 [title]="formatName(item.name)"
+                [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
                 (click)="selectEmoji(item)"
               >{{ item.emoji }}</button>
@@ -1539,6 +1547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                   type="button"
                   class="dm-emoji-swatch"
                   [title]="formatName(item.name)"
+                  [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
                 >{{ item.emoji }}</button>
@@ -1551,6 +1560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                   type="button"
                   class="dm-emoji-swatch"
                   [title]="formatName(item.name)"
+                  [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
                 >{{ item.emoji }}</button>