@besaitech/ng-design-system 0.0.72 → 0.0.74

package/README.md

@@ -273,13 +273,16 @@ import { SdsRichTextEditor, SDS_RICH_TEXT_LABELS } from '@besaitech/ng-design-sy
 
 | Component | Selector | Notes |
 | --- | --- | --- |
-| `SdsRichTextEditor` | `<sds-rich-text-editor>` | CVA over an HTML string (`''` when empty). `[tools]` (headings, bold, italic, underline, strike, lists, quote, link, divider, clear, undo/redo) is the toolbar AND the schema; `rows` / `maxRows`, `maxLength` + counter, `label`, `hint`, `error`, `invalid`, `required`, `readonly`, `disabled`, `appearance` (default·filled), `contentLanguage` (spell-check language); `focus()`, `insertText(text)` |
+| `SdsRichTextEditor` | `<sds-rich-text-editor>` | CVA over an HTML string (`''` when empty). `[tools]` (headings, bold, italic, underline, strike, lists, quote, link, table, divider, clear, undo/redo) is the toolbar AND the schema; `rows` / `maxRows`, `maxLength` + counter, `label`, `hint`, `error`, `invalid`, `required`, `readonly`, `disabled`, `appearance` (default·filled), `contentLanguage` (spell-check language); `focus()`, `insertText(text)` |
 | `SdsLocalizedRichTextEditor` | `<sds-localized-rich-text-editor>` | CVA over an `SdsLocalizedValue` (`{ fr: '<p>…</p>', de: … }`), like `sds-localized-input`: `languages`, `currentLanguage`, `requiredLanguages`, switcher at the end of the toolbar with filled / required / missing dots, empty translations pruned. One editor per language underneath — undo, caret and spell-check stay per language. Same rich-text inputs as above (`maxLength` is per language) |
 | `SdsRichTextToolbarEnd` | `[sdsRichTextToolbarEnd]` | Marks content projected at the end of the toolbar (kept in `readonly`): a language switcher, "insert variable" buttons calling `editor.insertText(…)` |
 
 The emitted HTML is clean by construction: no inline styles, nothing outside the enabled tools, and links
 limited to http(s), mailto, tel, site-relative paths and anchors (`sdsSafeHref`) with
-`rel="noopener noreferrer nofollow"` — still sanitise stored HTML when you display it. ⌘/Ctrl+K opens the
+`rel="noopener noreferrer nofollow"` — still sanitise stored HTML when you display it. Tables are saved bare
+(no `<colgroup>`, no inline widths). When loaded HTML holds content the tools cannot keep (`<img>`, `<iframe>`, a
+table without the `table` tool…), a warning under the field names it before anyone edits — saving an edit would
+drop it. ⌘/Ctrl+K opens the
 link field and is not passed on to an app-wide ⌘K palette. Strings are English by default: translate them
 per instance with `[labels]` (a `Partial<SdsRichTextLabels>`, follows a live language switch) or app-wide with
 `{ provide: SDS_RICH_TEXT_LABELS, useValue: { bold: 'Gras', … } }`.

package/charts/index.d.ts

@@ -1293,7 +1293,7 @@ declare class SdsKpi {
     readonly trendLabels: _angular_core.InputSignal<readonly string[] | null>;
     readonly trendVariant: _angular_core.InputSignal<SdsSparklineVariant>;
     readonly trendColor: _angular_core.InputSignal<string | null>;
-    readonly icon: _angular_core.InputSignal<"x" | "search" | "bold" | "link" | "filter" | "menu" | "table" | "copy" | "square" | "list" | "chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "check" | "alert-circle" | "info" | "type" | "tag" | "ticket" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | "italic" | "underline" | "strikethrough" | "heading-2" | "heading-3" | "pilcrow" | "list-ordered" | "text-quote" | "unlink" | "undo-2" | "redo-2" | "remove-formatting" | null>;
+    readonly icon: _angular_core.InputSignal<"x" | "search" | "bold" | "link" | "filter" | "menu" | "table" | "copy" | "square" | "list" | "chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "check" | "alert-circle" | "info" | "type" | "tag" | "ticket" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "printer" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | "italic" | "underline" | "strikethrough" | "heading-2" | "heading-3" | "pilcrow" | "list-ordered" | "text-quote" | "unlink" | "undo-2" | "redo-2" | "remove-formatting" | "between-horizontal-end" | "between-vertical-end" | "grid-2x2-x" | null>;
     /** Shown under the value when there is no change to report. */
     readonly hint: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<SdsKpiSize>;

package/fesm2022/besaitech-ng-design-system-rich-text.mjs

@@ -5,6 +5,7 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { SdsIcon, SdsButton } from '@besaitech/ng-design-system';
 import { Editor } from '@tiptap/core';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import { TableKit } from '@tiptap/extension-table';
 import StarterKit from '@tiptap/starter-kit';
 
 /** The toolbar shown when `[tools]` is not set. */
@@ -19,6 +20,7 @@ const SDS_RICH_TEXT_DEFAULT_TOOLS = [
     'orderedList',
     'blockquote',
     'link',
+    'table',
     'clearFormatting',
     'undo',
     'redo',
@@ -36,6 +38,7 @@ const SDS_RICH_TEXT_LABELS_EN = {
     orderedList: 'Numbered list',
     blockquote: 'Quote',
     link: 'Link',
+    table: 'Table',
     horizontalRule: 'Divider',
     clearFormatting: 'Clear formatting',
     undo: 'Undo',
@@ -46,6 +49,14 @@ const SDS_RICH_TEXT_LABELS_EN = {
     linkRemove: 'Remove link',
     linkCancel: 'Cancel',
     linkInvalid: 'Enter a web address (https://…), an e-mail address or a path starting with /.',
+    tableTools: 'Table',
+    tableAddRow: 'Row below',
+    tableAddColumn: 'Column right',
+    tableDeleteRow: 'Delete row',
+    tableDeleteColumn: 'Delete column',
+    tableHeaderRow: 'Header row',
+    tableDelete: 'Delete table',
+    unsupportedContent: 'This text contains elements this editor cannot keep: {elements}. Changing it will remove them.',
     countLimit: '{count} of {max} characters used',
     count: '{count} characters',
 };
@@ -103,11 +114,44 @@ const TOOL_DEFS = [
     { tool: 'orderedList', icon: 'list-ordered', group: 2, toggle: true, shortcut: 'Mod-Shift-7' },
     { tool: 'blockquote', icon: 'text-quote', group: 2, toggle: true, shortcut: 'Mod-Shift-B' },
     { tool: 'link', icon: 'link', group: 3, toggle: true, shortcut: 'Mod-K' },
+    { tool: 'table', icon: 'table', group: 3, toggle: false },
     { tool: 'horizontalRule', icon: 'minus', group: 3, toggle: false },
     { tool: 'clearFormatting', icon: 'remove-formatting', group: 4, toggle: false },
     { tool: 'undo', icon: 'undo-2', group: 5, toggle: false, shortcut: 'Mod-Z' },
     { tool: 'redo', icon: 'redo-2', group: 5, toggle: false, shortcut: 'Mod-Shift-Z' },
 ];
+const TABLE_ACTIONS = [
+    { action: 'addRow', label: 'tableAddRow', icon: 'between-horizontal-end' },
+    { action: 'addColumn', label: 'tableAddColumn', icon: 'between-vertical-end' },
+    { action: 'deleteRow', label: 'tableDeleteRow', icon: 'minus' },
+    { action: 'deleteColumn', label: 'tableDeleteColumn', icon: 'minus' },
+    { action: 'headerRow', label: 'tableHeaderRow', icon: null },
+    { action: 'delete', label: 'tableDelete', icon: 'grid-2x2-x' },
+];
+/**
+ * Elements whose CONTENT (not just formatting) is lost when the schema cannot hold them — pictures, embeds,
+ * tables, form controls… Loaded HTML holding one of them that the editor drops triggers the warning.
+ */
+const LOSSY_TAGS = new Set([
+    'img',
+    'picture',
+    'figure',
+    'svg',
+    'canvas',
+    'video',
+    'audio',
+    'iframe',
+    'embed',
+    'object',
+    'table',
+    'hr',
+    'form',
+    'input',
+    'select',
+    'textarea',
+    'button',
+    'math',
+]);
 /** One line of the editable area, for `[rows]` → min-height. */
 const LINE_EM = 1.6;
 const FRAME_BASE = 'overflow-hidden rounded-control border text-ink transition-colors';
@@ -212,6 +256,11 @@ class SdsRichTextEditor {
     /** Formatting active at the selection, per tool (refreshed on every transaction). */
     activeTools = signal(new Set(), ...(ngDevMode ? [{ debugName: "activeTools" }] : []));
     history = signal({ undo: false, redo: false }, ...(ngDevMode ? [{ debugName: "history" }] : []));
+    /** The first row of the table holding the caret is a header row. */
+    headerRow = signal(false, ...(ngDevMode ? [{ debugName: "headerRow" }] : []));
+    /** Elements of the loaded HTML the enabled tools could not keep (see {@link LOSSY_TAGS}). */
+    lostElements = signal([], ...(ngDevMode ? [{ debugName: "lostElements" }] : []));
+    tableActions = TABLE_ACTIONS;
     characters = signal(0, ...(ngDevMode ? [{ debugName: "characters" }] : []));
     rovingTool = signal(null, ...(ngDevMode ? [{ debugName: "rovingTool" }] : []));
     linkOpen = signal(false, ...(ngDevMode ? [{ debugName: "linkOpen" }] : []));
@@ -238,6 +287,9 @@ class SdsRichTextEditor {
         return [...byGroup.entries()].sort(([a], [b]) => a - b).map(([, defs]) => defs);
     }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
     hasCounter = computed(() => this.showCount() || this.maxLength() > 0, ...(ngDevMode ? [{ debugName: "hasCounter" }] : []));
+    lostLabel = computed(() => this.l().unsupportedContent.replace('{elements}', this.lostElements()
+        .map((tag) => `<${tag}>`)
+        .join(', ')), ...(ngDevMode ? [{ debugName: "lostLabel" }] : []));
     atLimit = computed(() => this.maxLength() > 0 && this.characters() >= this.maxLength(), ...(ngDevMode ? [{ debugName: "atLimit" }] : []));
     countLabel = computed(() => (this.maxLength() ? this.l().countLimit : this.l().count)
         .replace('{count}', String(this.characters()))
@@ -271,6 +323,8 @@ class SdsRichTextEditor {
             ids.push(`${this.fieldId}-hint`);
         if (this.hasCounter())
             ids.push(`${this.fieldId}-count`);
+        if (this.lostElements().length)
+            ids.push(`${this.fieldId}-lost`);
         return ids.join(' ');
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     /** Attributes of the contenteditable document (ProseMirror's own element). */
@@ -370,6 +424,8 @@ class SdsRichTextEditor {
                 .run();
             this.refresh(editor);
         }
+        if (editor)
+            this.detectLoss(this.html, editor);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -389,6 +445,9 @@ class SdsRichTextEditor {
             return this.history().undo;
         if (tool === 'redo')
             return this.history().redo;
+        // no table inside a table
+        if (tool === 'table')
+            return !this.isOn('table');
         return true;
     }
     buttonClass(def) {
@@ -454,6 +513,9 @@ class SdsRichTextEditor {
             case 'horizontalRule':
                 chain.setHorizontalRule().run();
                 break;
+            case 'table':
+                chain.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+                break;
             case 'clearFormatting':
                 chain.unsetAllMarks().clearNodes().run();
                 break;
@@ -497,6 +559,41 @@ class SdsRichTextEditor {
             editor.commands.focus('end');
         }
     }
+    tableButtonClass(action) {
+        const base = 'inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs font-medium transition-colors ' +
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
+        if (action === 'headerRow' && this.headerRow())
+            return `${base} ${TOOL_BUTTON_ON}`;
+        if (action === 'delete')
+            return `${base} text-danger hover:bg-danger/10`;
+        return `${base} text-ink-soft hover:bg-muted hover:text-ink`;
+    }
+    runTable(action) {
+        const editor = this.editor;
+        if (!editor || !this.interactive())
+            return;
+        const chain = editor.chain().focus();
+        switch (action) {
+            case 'addRow':
+                chain.addRowAfter().run();
+                break;
+            case 'addColumn':
+                chain.addColumnAfter().run();
+                break;
+            case 'deleteRow':
+                chain.deleteRow().run();
+                break;
+            case 'deleteColumn':
+                chain.deleteColumn().run();
+                break;
+            case 'headerRow':
+                chain.toggleHeaderRow().run();
+                break;
+            case 'delete':
+                chain.deleteTable().run();
+                break;
+        }
+    }
     // --- link -------------------------------------------------------------------
     openLink() {
         const editor = this.editor;
@@ -582,6 +679,7 @@ class SdsRichTextEditor {
         });
         this.editor = editor;
         this.refresh(editor);
+        this.detectLoss(content, editor);
         this.ready.set(true);
     }
     extensions() {
@@ -615,6 +713,7 @@ class SdsRichTextEditor {
                     }
                     : false,
             }),
+            ...(tools.has('table') ? [TableKit.configure({ table: { resizable: false } })] : []),
             Placeholder.configure({ placeholder: () => this.placeholder() }),
             CharacterCount.configure({ limit: this.maxLength() > 0 ? this.maxLength() : null }),
         ];
@@ -642,11 +741,29 @@ class SdsRichTextEditor {
         return true;
     }
     /**
-     * The control's value for the editor's document: '' when it is empty, and without the empty paragraphs
-     * the editor keeps after a final list / quote / divider so the caret can leave it (Tiptap's trailing node).
+     * The control's value for the editor's document: '' when it is empty, and without the editor's own
+     * scaffolding — the empty paragraphs kept after a final list / quote / table so the caret can leave it
+     * (Tiptap's trailing node), and the table layout hints (`<colgroup>`, `style="min-width…"`, the default
+     * `colspan="1" rowspan="1"`) that columns no one resized do not need.
      */
     currentHtml(editor) {
-        return editor.isEmpty ? '' : editor.getHTML().replace(/(?:<p><\/p>)+$/, '');
+        if (isBlank(editor))
+            return '';
+        return editor
+            .getHTML()
+            .replace(/<colgroup>[\s\S]*?<\/colgroup>/g, '')
+            .replace(/<table style="[^"]*">/g, '<table>')
+            .replace(/ (?:colspan|rowspan)="1"/g, '')
+            .replace(/(?:<p><\/p>)+$/, '');
+    }
+    /** Flags the elements of `source` whose content the schema could not keep (shown under the field). */
+    detectLoss(source, editor) {
+        if (!source || typeof DOMParser === 'undefined') {
+            this.lostElements.set([]);
+            return;
+        }
+        const kept = tagsOf(editor.getHTML());
+        this.lostElements.set([...tagsOf(source)].filter((tag) => LOSSY_TAGS.has(tag) && !kept.has(tag)));
     }
     emit(editor) {
         const html = this.currentHtml(editor);
@@ -672,7 +789,9 @@ class SdsRichTextEditor {
         check('orderedList', 'orderedList');
         check('blockquote', 'blockquote');
         check('link', 'link');
+        check('table', 'table');
         this.activeTools.set(active);
+        this.headerRow.set(active.has('table') && firstRowIsHeader(editor));
         this.history.set({ undo: editor.can().undo(), redo: editor.can().redo() });
         this.characters.set(editor.storage.characterCount.characters());
     }
@@ -781,6 +900,32 @@ class SdsRichTextEditor {
         </div>
       }
 
+      @if (isOn('table') && interactive()) {
+        <div
+          role="toolbar"
+          [attr.aria-label]="l().tableTools"
+          class="flex flex-wrap items-center gap-0.5 border-b border-border bg-surface px-1.5 py-1"
+        >
+          @for (t of tableActions; track t.action) {
+            <button
+              type="button"
+              [attr.data-table-action]="t.action"
+              [attr.aria-pressed]="
+                t.action === 'headerRow' ? (headerRow() ? 'true' : 'false') : null
+              "
+              [class]="tableButtonClass(t.action)"
+              (mousedown)="$event.preventDefault()"
+              (click)="runTable(t.action)"
+            >
+              @if (t.icon) {
+                <sds-icon [name]="t.icon" [size]="14" />
+              }
+              {{ l()[t.label] }}
+            </button>
+          }
+        </div>
+      }
+
       <div
         #content
         class="sds-rte"
@@ -790,6 +935,16 @@ class SdsRichTextEditor {
       ></div>
     </div>
 
+    @if (lostElements().length) {
+      <p
+        [id]="fieldId + '-lost'"
+        class="mt-1.5 flex items-start gap-1.5 rounded-control border border-warning/40 bg-warning/10 px-2.5 py-1.5 text-xs text-ink"
+      >
+        <sds-icon name="triangle-alert" [size]="14" class="mt-px shrink-0 text-warning" />
+        <span>{{ lostLabel() }}</span>
+      </p>
+    }
+
     @if (hasCounter()) {
       <div class="mt-1.5 flex items-start gap-2 text-xs">
         @if (error()) {
@@ -814,7 +969,7 @@ class SdsRichTextEditor {
     } @else if (hint()) {
       <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
     }
-  `, isInline: true, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsButton, selector: "sds-button", inputs: ["variant", "size", "shape", "type", "disabled", "loading", "block", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte{overflow-x:auto}.sds-rte-content table{border-collapse:collapse;width:100%;margin:0 0 .75em}.sds-rte-content th,.sds-rte-content td{border:1px solid var(--color-border);padding:.375em .5em;vertical-align:top;text-align:left;min-width:4em}.sds-rte-content th{background:var(--color-muted);font-weight:600}.sds-rte-content th>p,.sds-rte-content td>p{margin:0}.sds-rte-content .selectedCell{background:color-mix(in oklab,var(--color-brand-500, var(--color-accent-blue)) 14%,transparent)}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsButton, selector: "sds-button", inputs: ["variant", "size", "shape", "type", "disabled", "loading", "block", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRichTextEditor, decorators: [{
             type: Component,
@@ -922,6 +1077,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </div>
       }
 
+      @if (isOn('table') && interactive()) {
+        <div
+          role="toolbar"
+          [attr.aria-label]="l().tableTools"
+          class="flex flex-wrap items-center gap-0.5 border-b border-border bg-surface px-1.5 py-1"
+        >
+          @for (t of tableActions; track t.action) {
+            <button
+              type="button"
+              [attr.data-table-action]="t.action"
+              [attr.aria-pressed]="
+                t.action === 'headerRow' ? (headerRow() ? 'true' : 'false') : null
+              "
+              [class]="tableButtonClass(t.action)"
+              (mousedown)="$event.preventDefault()"
+              (click)="runTable(t.action)"
+            >
+              @if (t.icon) {
+                <sds-icon [name]="t.icon" [size]="14" />
+              }
+              {{ l()[t.label] }}
+            </button>
+          }
+        </div>
+      }
+
       <div
         #content
         class="sds-rte"
@@ -931,6 +1112,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       ></div>
     </div>
 
+    @if (lostElements().length) {
+      <p
+        [id]="fieldId + '-lost'"
+        class="mt-1.5 flex items-start gap-1.5 rounded-control border border-warning/40 bg-warning/10 px-2.5 py-1.5 text-xs text-ink"
+      >
+        <sds-icon name="triangle-alert" [size]="14" class="mt-px shrink-0 text-warning" />
+        <span>{{ lostLabel() }}</span>
+      </p>
+    }
+
     @if (hasCounter()) {
       <div class="mt-1.5 flex items-start gap-2 text-xs">
         @if (error()) {
@@ -955,8 +1146,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     } @else if (hint()) {
       <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
     }
-  `, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"] }]
+  `, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte{overflow-x:auto}.sds-rte-content table{border-collapse:collapse;width:100%;margin:0 0 .75em}.sds-rte-content th,.sds-rte-content td{border:1px solid var(--color-border);padding:.375em .5em;vertical-align:top;text-align:left;min-width:4em}.sds-rte-content th{background:var(--color-muted);font-weight:600}.sds-rte-content th>p,.sds-rte-content td>p{margin:0}.sds-rte-content .selectedCell{background:color-mix(in oklab,var(--color-brand-500, var(--color-accent-blue)) 14%,transparent)}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], contentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLanguage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], contentHost: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], linkInput: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }], toolButtons: [{ type: i0.ViewChildren, args: ['toolButton', { isSignal: true }] }], toolbarEnd: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsRichTextToolbarEnd), { isSignal: true }] }] } });
+/** The tag names (lower case) of every element in an HTML fragment. */
+function tagsOf(html) {
+    const body = new DOMParser().parseFromString(html, 'text/html').body;
+    return new Set(Array.from(body.querySelectorAll('*'), (el) => el.tagName.toLowerCase()));
+}
+/** Whether the table around the selection starts with a row of header cells. */
+function firstRowIsHeader(editor) {
+    const { $from } = editor.state.selection;
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (node.type.name === 'table') {
+            return node.firstChild?.firstChild?.type.name === 'tableHeader';
+        }
+    }
+    return false;
+}
+/**
+ * A document holding nothing but one empty paragraph. (Tiptap's `isEmpty` only looks at the text, so a fresh
+ * empty table or a lone divider would count as empty and be dropped from the value.)
+ */
+function isBlank(editor) {
+    const doc = editor.state.doc;
+    return (doc.childCount === 0 ||
+        (doc.childCount === 1 &&
+            doc.firstChild.type.name === 'paragraph' &&
+            doc.firstChild.content.size === 0));
+}
 
 let nextId = 0;
 const TAB_BASE = 'flex items-center gap-1 rounded px-1.5 py-1 text-[11px] font-semibold uppercase leading-none transition-colors ' +