@kumwe/studio-rich-text 0.1.0-alpha.10

package/dist/first-party-tools.js

@@ -0,0 +1,1012 @@
+export const STUDIO_EDITOR_JS_TOOL_NAMES = Object.freeze([
+    'callout',
+    'checklist',
+    'code',
+    'delimiter',
+    'header',
+    'list',
+    'paragraph',
+    'quote',
+    'table',
+]);
+export function studioEditorJsTools() {
+    return Object.freeze({
+        callout: StudioCalloutTool,
+        checklist: StudioChecklistTool,
+        code: StudioCodeTool,
+        delimiter: StudioDelimiterTool,
+        header: StudioHeaderTool,
+        list: StudioListTool,
+        paragraph: StudioParagraphTool,
+        quote: StudioQuoteTool,
+        table: StudioTableTool,
+    });
+}
+export function toStudioEditorJsBlocks(document) {
+    return document.content.map((node) => ({
+        data: { node: structuredClone(node) },
+        type: toolName(node),
+    }));
+}
+export function fromStudioEditorJsBlocks(value) {
+    if (!isRecord(value) || !Array.isArray(value.blocks)) {
+        throw new TypeError('Editor surface returned an invalid block collection.');
+    }
+    const content = value.blocks.map((block, index) => {
+        if (!isRecord(block) ||
+            !STUDIO_EDITOR_JS_TOOL_NAMES.includes(block.type) ||
+            !isRecord(block.data) ||
+            !isRecord(block.data.node)) {
+            throw new TypeError(`Editor block ${index} is not a Studio first-party block.`);
+        }
+        const node = structuredClone(block.data.node);
+        if (toolName(node) !== block.type) {
+            throw new TypeError(`Editor block ${index} has a mismatched Studio node type.`);
+        }
+        return node;
+    });
+    return { content: content.length > 0 ? content : [{ type: 'paragraph' }], type: 'doc' };
+}
+function toolName(node) {
+    switch (node.type) {
+        case 'heading':
+            return 'header';
+        case 'blockquote':
+            return 'quote';
+        case 'horizontalRule':
+            return 'delimiter';
+        case 'bulletList':
+        case 'orderedList':
+            return 'list';
+        case 'checklist':
+            return 'checklist';
+        case 'table':
+            return 'table';
+        case 'callout':
+            return 'callout';
+        case 'codeBlock':
+            return 'code';
+        case 'paragraph':
+            return 'paragraph';
+        default:
+            throw new TypeError(`Node type "${node.type}" has no first-party Editor.js tool.`);
+    }
+}
+class InlineToolBase {
+    static isReadOnlySupported = true;
+    node;
+    readOnly;
+    field;
+    constructor(options, fallback) {
+        this.node = structuredClone(options.data?.node ?? fallback);
+        this.readOnly = options.readOnly === true;
+    }
+    renderInline(label, content) {
+        const field = document.createElement('div');
+        field.className = 'studio-rich-text-field';
+        field.contentEditable = this.readOnly ? 'false' : 'true';
+        field.setAttribute('aria-label', label);
+        field.setAttribute('role', 'textbox');
+        field.setAttribute('aria-multiline', 'true');
+        field.spellcheck = true;
+        for (const inline of content)
+            appendInline(field, inline);
+        field.addEventListener('paste', pastePlainText);
+        this.field = field;
+        return field;
+    }
+    saveInline(original) {
+        return this.field === undefined
+            ? structuredClone([...original])
+            : preserveInlineRepresentation(original, readInline(this.field));
+    }
+}
+export class StudioParagraphTool extends InlineToolBase {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '¶', title: 'Paragraph' };
+    constructor(options) {
+        super(options, { type: 'paragraph' });
+    }
+    render() {
+        return this.renderInline('Paragraph', this.node.content ?? []);
+    }
+    save() {
+        const node = structuredClone(this.node);
+        const content = this.saveInline(node.content ?? []);
+        if (!sameCanonical(node.content ?? [], content))
+            node.content = content;
+        return { node };
+    }
+}
+export class StudioHeaderTool extends InlineToolBase {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: 'H', title: 'Heading' };
+    #level;
+    constructor(options) {
+        super(options, { attrs: { level: 2 }, type: 'heading' });
+    }
+    render() {
+        const group = editorGroup('Heading');
+        const level = document.createElement('select');
+        const selectedLevel = this.node.attrs?.level === 3 || this.node.attrs?.level === 4 ? this.node.attrs.level : 2;
+        level.setAttribute('aria-label', 'Heading level');
+        level.disabled = this.readOnly;
+        for (const value of [2, 3, 4]) {
+            const option = document.createElement('option');
+            option.value = String(value);
+            option.textContent = `Heading ${value}`;
+            option.selected = selectedLevel === value;
+            level.append(option);
+        }
+        // happy-dom does not consistently preserve pre-append option.selected state.
+        // Set the select itself after its options exist so no-op saves retain the
+        // canonical heading level in both browser and headless DOM implementations.
+        level.value = String(selectedLevel);
+        this.#level = level;
+        group.append(level, this.renderInline('Heading text', this.node.content ?? []));
+        return group;
+    }
+    save() {
+        const node = structuredClone(this.node);
+        const level = Number(this.#level?.value ?? this.node.attrs?.level ?? 2);
+        if (level !== Number(this.node.attrs?.level ?? 2))
+            node.attrs = { level };
+        const content = this.saveInline(node.content ?? []);
+        if (!sameCanonical(node.content ?? [], content))
+            node.content = content;
+        return { node };
+    }
+}
+export class StudioQuoteTool extends InlineToolBase {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '“', title: 'Quote' };
+    constructor(options) {
+        super(options, { content: [{ type: 'paragraph' }], type: 'blockquote' });
+    }
+    render() {
+        return this.renderInline('Quotation', editableBlockContent(this.node.content ?? []));
+    }
+    save() {
+        const node = structuredClone(this.node);
+        const content = editableBlockContent(node.content ?? []);
+        node.content = mergeEditableBlockContent(node.content ?? [], this.saveInline(content));
+        return { node };
+    }
+}
+export class StudioDelimiterTool {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '—', title: 'Separator' };
+    render() {
+        const separator = document.createElement('hr');
+        separator.setAttribute('aria-label', 'Separator');
+        return separator;
+    }
+    save() {
+        return { node: { type: 'horizontalRule' } };
+    }
+}
+export class StudioCalloutTool extends InlineToolBase {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '!', title: 'Callout' };
+    #tone;
+    constructor(options) {
+        super(options, {
+            attrs: { tone: 'info' },
+            content: [{ type: 'paragraph' }],
+            type: 'callout',
+        });
+    }
+    render() {
+        const group = editorGroup('Callout');
+        this.#tone = selectControl('Callout tone', ['info', 'success', 'warning', 'danger'], stringAttribute(this.node.attrs?.tone, 'info'), this.readOnly);
+        group.append(this.#tone, this.renderInline('Callout text', editableBlockContent(this.node.content ?? [])));
+        return group;
+    }
+    save() {
+        const node = structuredClone(this.node);
+        node.attrs = { tone: this.#tone?.value ?? 'info' };
+        const content = editableBlockContent(node.content ?? []);
+        node.content = mergeEditableBlockContent(node.content ?? [], this.saveInline(content));
+        return { node };
+    }
+}
+export class StudioCodeTool {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '</>', title: 'Code' };
+    #node;
+    #readOnly;
+    #language;
+    #source;
+    constructor(options) {
+        this.#node = structuredClone(options.data?.node ?? { attrs: { language: 'text' }, text: '', type: 'codeBlock' });
+        this.#readOnly = options.readOnly === true;
+    }
+    render() {
+        const group = editorGroup('Code sample');
+        this.#language = textInput('Code language', stringAttribute(this.#node.attrs?.language, 'text'), this.#readOnly);
+        this.#language.pattern = '[A-Za-z0-9][A-Za-z0-9+_.#-]{0,63}';
+        this.#language.maxLength = 64;
+        this.#source = document.createElement('textarea');
+        this.#source.setAttribute('aria-label', 'Inert code source');
+        this.#source.disabled = this.#readOnly;
+        this.#source.rows = 8;
+        this.#source.value = this.#node.text ?? '';
+        group.append(this.#language, this.#source);
+        return group;
+    }
+    save() {
+        const language = this.#language?.value.trim() ?? 'text';
+        return {
+            node: {
+                attrs: {
+                    language: /^[A-Za-z0-9][A-Za-z0-9+_.#-]{0,63}$/u.test(language) ? language : 'text',
+                },
+                text: this.#source?.value ?? '',
+                type: 'codeBlock',
+            },
+        };
+    }
+}
+export class StudioListTool {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '•', title: 'List' };
+    #readOnly;
+    #node;
+    #rows;
+    #root;
+    constructor(options) {
+        const node = structuredClone(options.data?.node ?? {
+            content: [{ content: [{ type: 'paragraph' }], type: 'listItem' }],
+            type: 'bulletList',
+        });
+        this.#node = node;
+        this.#readOnly = options.readOnly === true;
+        this.#rows = flattenList(node);
+    }
+    render() {
+        this.#root = editorGroup('List');
+        this.#renderRows();
+        return this.#root;
+    }
+    save() {
+        this.#syncRows();
+        return { node: structuredClone(this.#node) };
+    }
+    #renderRows() {
+        const root = this.#root;
+        if (root === undefined)
+            return;
+        root.replaceChildren();
+        const style = selectControl('List style', ['bullet', 'ordered'], this.#node.type === 'orderedList' ? 'ordered' : 'bullet', this.#readOnly);
+        style.addEventListener('change', () => {
+            this.#syncRows();
+            const ordered = style.value === 'ordered';
+            const start = orderedListStart(this.#node);
+            this.#node.type = ordered ? 'orderedList' : 'bulletList';
+            if (ordered && start !== 1)
+                this.#node.attrs = { start };
+            else
+                delete this.#node.attrs;
+            this.#renderRows();
+        });
+        root.append(style);
+        if (this.#node.type === 'orderedList') {
+            const start = textInput('Ordered list start', String(orderedListStart(this.#node)), this.#readOnly);
+            start.type = 'number';
+            start.min = '1';
+            start.max = '1000000';
+            start.addEventListener('change', () => {
+                const value = Math.max(1, Math.min(1_000_000, Number(start.value) || 1));
+                if (value === orderedListStart(this.#node))
+                    return;
+                if (value === 1)
+                    delete this.#node.attrs;
+                else
+                    this.#node.attrs = { start: value };
+            });
+            root.append(start);
+        }
+        this.#rows = flattenList(this.#node);
+        const list = document.createElement('ol');
+        list.setAttribute('aria-label', 'List items');
+        for (const [index, row] of this.#rows.entries()) {
+            const item = document.createElement('li');
+            item.dataset.index = String(index);
+            item.dataset.studioDepth = String(row.depth);
+            item.setAttribute('aria-level', String(row.depth + 1));
+            const field = inlineField(`List item ${index + 1}`, row.editableBlock.content ?? [], this.#readOnly);
+            field.dataset.listText = String(index);
+            item.append(field);
+            if (!this.#readOnly) {
+                item.append(rowButton('Move item up', () => this.#move(index, -1), !canMoveListRow(row, -1)), rowButton('Move item down', () => this.#move(index, 1), !canMoveListRow(row, 1)), rowButton('Indent item', () => this.#indent(index), !canIndentListRow(row)), rowButton('Outdent item', () => this.#outdent(index), row.ownerItem === undefined), rowButton('Remove item', () => this.#remove(index), !canRemoveListRow(row, this.#node)));
+            }
+            list.append(item);
+        }
+        root.append(list);
+        if (!this.#readOnly)
+            root.append(rowButton('Add list item', () => this.#add()));
+    }
+    #syncRows() {
+        for (const field of this.#root?.querySelectorAll('[data-list-text]') ?? []) {
+            const index = Number(field.dataset.listText);
+            const row = this.#rows[index];
+            if (row === undefined)
+                continue;
+            const content = preserveInlineRepresentation(row.editableBlock.content ?? [], readInline(field));
+            if (row.syntheticEditable) {
+                if (content.length > 0) {
+                    row.editableBlock.content = content;
+                    row.item.content = [row.editableBlock, ...(row.item.content ?? [])];
+                    row.syntheticEditable = false;
+                }
+            }
+            else if (!sameCanonical(row.editableBlock.content ?? [], content)) {
+                row.editableBlock.content = content;
+            }
+        }
+    }
+    #add() {
+        this.#syncRows();
+        if (this.#rows.length < 500)
+            this.#node.content = [
+                ...(this.#node.content ?? []),
+                {
+                    content: [{ type: 'paragraph' }],
+                    type: 'listItem',
+                },
+            ];
+        this.#renderRows();
+    }
+    #indent(index) {
+        this.#syncRows();
+        const row = this.#rows[index];
+        if (row === undefined || !canIndentListRow(row))
+            return;
+        const siblings = row.parentList.content ?? [];
+        const itemIndex = siblings.indexOf(row.item);
+        const previous = siblings[itemIndex - 1];
+        if (previous === undefined)
+            return;
+        siblings.splice(itemIndex, 1);
+        const existing = previous.content?.at(-1);
+        const nested = existing?.type === row.parentList.type
+            ? existing
+            : {
+                ...(row.parentList.type === 'orderedList' && row.parentList.attrs !== undefined
+                    ? { attrs: structuredClone(row.parentList.attrs) }
+                    : {}),
+                content: [],
+                type: row.parentList.type,
+            };
+        if (nested !== existing)
+            previous.content = [...(previous.content ?? []), nested];
+        nested.content = [...(nested.content ?? []), row.item];
+        this.#renderRows();
+    }
+    #outdent(index) {
+        this.#syncRows();
+        const row = this.#rows[index];
+        if (row?.ownerItem === undefined || row.parentListParent === undefined) {
+            return;
+        }
+        const siblings = row.parentList.content ?? [];
+        const itemIndex = siblings.indexOf(row.item);
+        if (itemIndex < 0)
+            return;
+        const trailing = siblings.splice(itemIndex + 1);
+        siblings.splice(itemIndex, 1);
+        if (trailing.length > 0) {
+            row.item.content = [
+                ...(row.item.content ?? []),
+                {
+                    ...(row.parentList.type === 'orderedList' && row.parentList.attrs !== undefined
+                        ? { attrs: structuredClone(row.parentList.attrs) }
+                        : {}),
+                    content: trailing,
+                    type: row.parentList.type,
+                },
+            ];
+        }
+        if (siblings.length === 0)
+            removeListFromItem(row.ownerItem, row.parentList);
+        const parentSiblings = row.parentListParent.content ?? [];
+        const ownerIndex = parentSiblings.indexOf(row.ownerItem);
+        if (ownerIndex < 0)
+            return;
+        parentSiblings.splice(ownerIndex + 1, 0, row.item);
+        this.#renderRows();
+    }
+    #move(index, delta) {
+        this.#syncRows();
+        const row = this.#rows[index];
+        if (row === undefined || !canMoveListRow(row, delta))
+            return;
+        const siblings = row.parentList.content ?? [];
+        const itemIndex = siblings.indexOf(row.item);
+        const [item] = siblings.splice(itemIndex, 1);
+        if (item !== undefined)
+            siblings.splice(itemIndex + delta, 0, item);
+        this.#renderRows();
+    }
+    #remove(index) {
+        this.#syncRows();
+        const row = this.#rows[index];
+        if (row === undefined || !canRemoveListRow(row, this.#node))
+            return;
+        const siblings = row.parentList.content ?? [];
+        const itemIndex = siblings.indexOf(row.item);
+        if (itemIndex < 0)
+            return;
+        siblings.splice(itemIndex, 1);
+        if (siblings.length === 0 && row.ownerItem !== undefined) {
+            removeListFromItem(row.ownerItem, row.parentList);
+        }
+        this.#renderRows();
+    }
+}
+export class StudioChecklistTool {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '☑', title: 'Checklist' };
+    #readOnly;
+    #initialRows;
+    #node;
+    #root;
+    #rows;
+    constructor(options) {
+        this.#readOnly = options.readOnly === true;
+        this.#node = structuredClone(options.data?.node ?? {
+            content: [{ attrs: { checked: false, level: 0 }, type: 'checklistItem' }],
+            type: 'checklist',
+        });
+        const content = this.#node.content ?? [];
+        this.#rows =
+            content.length > 0
+                ? content.map((item) => ({
+                    checked: item.attrs?.checked === true,
+                    content: structuredClone(item.content ?? []),
+                    contentPresent: item.content !== undefined,
+                    depth: Number(item.attrs?.level ?? 0),
+                }))
+                : [
+                    {
+                        checked: false,
+                        content: [],
+                        contentPresent: false,
+                        depth: 0,
+                    },
+                ];
+        this.#initialRows = structuredClone(this.#rows);
+    }
+    render() {
+        this.#root = editorGroup('Checklist');
+        this.#renderRows();
+        return this.#root;
+    }
+    save() {
+        this.#syncRows();
+        if (sameCanonical(this.#rows, this.#initialRows)) {
+            return { node: structuredClone(this.#node) };
+        }
+        return {
+            node: {
+                content: this.#rows.map((row) => ({
+                    attrs: { checked: row.checked, level: row.depth },
+                    ...(row.contentPresent || row.content.length > 0
+                        ? { content: structuredClone(row.content) }
+                        : {}),
+                    type: 'checklistItem',
+                })),
+                type: 'checklist',
+            },
+        };
+    }
+    #renderRows() {
+        const root = this.#root;
+        if (root === undefined)
+            return;
+        root.replaceChildren();
+        for (const [index, row] of this.#rows.entries()) {
+            const group = editorGroup(`Checklist item ${index + 1}`);
+            group.dataset.studioDepth = String(row.depth);
+            group.setAttribute('aria-level', String(row.depth + 1));
+            const checked = document.createElement('input');
+            checked.type = 'checkbox';
+            checked.checked = row.checked;
+            checked.disabled = this.#readOnly;
+            checked.dataset.checkState = String(index);
+            checked.setAttribute('aria-label', `Checklist item ${index + 1} complete`);
+            const field = inlineField(`Checklist item ${index + 1}`, row.content, this.#readOnly);
+            field.dataset.checkText = String(index);
+            field.addEventListener('input', () => {
+                row.contentPresent = true;
+            });
+            group.append(checked, field);
+            if (!this.#readOnly) {
+                group.append(rowButton('Move item up', () => this.#move(index, -1), index === 0), rowButton('Move item down', () => this.#move(index, 1), index === this.#rows.length - 1), rowButton('Indent item', () => this.#indent(index, 1), row.depth >= 4 || index === 0), rowButton('Outdent item', () => this.#indent(index, -1), row.depth === 0), rowButton('Remove item', () => this.#remove(index), this.#rows.length === 1));
+            }
+            root.append(group);
+        }
+        if (!this.#readOnly)
+            root.append(rowButton('Add checklist item', () => this.#add()));
+    }
+    #syncRows() {
+        for (const field of this.#root?.querySelectorAll('[data-check-text]') ?? []) {
+            const row = this.#rows[Number(field.dataset.checkText)];
+            if (row !== undefined) {
+                row.content = preserveInlineRepresentation(row.content, readInline(field));
+            }
+        }
+        for (const input of this.#root?.querySelectorAll('[data-check-state]') ??
+            []) {
+            const row = this.#rows[Number(input.dataset.checkState)];
+            if (row !== undefined)
+                row.checked = input.checked;
+        }
+    }
+    #add() {
+        this.#syncRows();
+        if (this.#rows.length < 500)
+            this.#rows.push({
+                checked: false,
+                content: [],
+                contentPresent: false,
+                depth: 0,
+            });
+        this.#renderRows();
+    }
+    #indent(index, delta) {
+        this.#syncRows();
+        const row = this.#rows[index];
+        if (row !== undefined)
+            row.depth = Math.max(0, Math.min(4, row.depth + delta));
+        this.#renderRows();
+    }
+    #move(index, delta) {
+        this.#syncRows();
+        const target = index + delta;
+        if (target >= 0 && target < this.#rows.length) {
+            const [row] = this.#rows.splice(index, 1);
+            if (row !== undefined)
+                this.#rows.splice(target, 0, row);
+        }
+        this.#renderRows();
+    }
+    #remove(index) {
+        this.#syncRows();
+        if (this.#rows.length > 1)
+            this.#rows.splice(index, 1);
+        this.#renderRows();
+    }
+}
+export class StudioTableTool {
+    static isReadOnlySupported = true;
+    static toolbox = { icon: '▦', title: 'Table' };
+    #readOnly;
+    #initialCells;
+    #initialHeader;
+    #node;
+    #cells;
+    #header;
+    #root;
+    constructor(options) {
+        this.#readOnly = options.readOnly === true;
+        this.#node = structuredClone(options.data?.node ?? {
+            attrs: { header: false },
+            content: [
+                {
+                    content: [{ type: 'tableCell' }, { type: 'tableCell' }],
+                    type: 'tableRow',
+                },
+                {
+                    content: [{ type: 'tableCell' }, { type: 'tableCell' }],
+                    type: 'tableRow',
+                },
+            ],
+            type: 'table',
+        });
+        this.#header = this.#node.attrs?.header === true;
+        this.#cells = (this.#node.content ?? []).map((row) => (row.content ?? []).map((cell) => ({
+            content: structuredClone(cell.content ?? []),
+            contentPresent: cell.content !== undefined,
+        })));
+        this.#initialHeader = this.#header;
+        this.#initialCells = structuredClone(this.#cells);
+    }
+    render() {
+        this.#root = editorGroup('Table');
+        this.#renderTable();
+        return this.#root;
+    }
+    save() {
+        this.#syncCells();
+        if (this.#header === this.#initialHeader && sameCanonical(this.#cells, this.#initialCells)) {
+            return { node: structuredClone(this.#node) };
+        }
+        return {
+            node: {
+                attrs: { header: this.#header },
+                content: this.#cells.map((row) => ({
+                    content: row.map((cell) => ({
+                        ...(cell.contentPresent || cell.content.length > 0
+                            ? { content: structuredClone(cell.content) }
+                            : {}),
+                        type: 'tableCell',
+                    })),
+                    type: 'tableRow',
+                })),
+                type: 'table',
+            },
+        };
+    }
+    #renderTable() {
+        const root = this.#root;
+        if (root === undefined)
+            return;
+        root.replaceChildren();
+        const header = document.createElement('input');
+        header.type = 'checkbox';
+        header.checked = this.#header;
+        header.disabled = this.#readOnly;
+        header.setAttribute('aria-label', 'Use first row as table header');
+        header.addEventListener('change', () => {
+            this.#header = header.checked;
+        });
+        root.append(header);
+        const table = document.createElement('table');
+        table.setAttribute('aria-label', 'Table data');
+        for (const [rowIndex, row] of this.#cells.entries()) {
+            const tr = document.createElement('tr');
+            for (const [columnIndex, value] of row.entries()) {
+                const cell = document.createElement(rowIndex === 0 && this.#header ? 'th' : 'td');
+                const field = inlineField(`Row ${rowIndex + 1}, column ${columnIndex + 1}`, value.content, this.#readOnly);
+                field.dataset.tableCell = `${rowIndex}:${columnIndex}`;
+                field.addEventListener('input', () => {
+                    value.contentPresent = true;
+                });
+                cell.append(field);
+                tr.append(cell);
+            }
+            table.append(tr);
+        }
+        root.append(table);
+        if (!this.#readOnly) {
+            root.append(rowButton('Add table row', () => this.#resize(1, 0), this.#cells.length >= 200), rowButton('Remove table row', () => this.#resize(-1, 0), this.#cells.length <= 1), rowButton('Add table column', () => this.#resize(0, 1), (this.#cells[0]?.length ?? 0) >= 50), rowButton('Remove table column', () => this.#resize(0, -1), (this.#cells[0]?.length ?? 0) <= 1));
+        }
+    }
+    #resize(rows, columns) {
+        this.#syncCells();
+        if (rows > 0 && this.#cells.length < 200)
+            this.#cells.push(Array.from({ length: this.#cells[0]?.length ?? 1 }, () => ({
+                content: [],
+                contentPresent: false,
+            })));
+        if (rows < 0 && this.#cells.length > 1)
+            this.#cells.pop();
+        if (columns > 0 && (this.#cells[0]?.length ?? 0) < 50)
+            for (const row of this.#cells)
+                row.push({ content: [], contentPresent: false });
+        if (columns < 0 && (this.#cells[0]?.length ?? 0) > 1)
+            for (const row of this.#cells)
+                row.pop();
+        this.#renderTable();
+    }
+    #syncCells() {
+        for (const field of this.#root?.querySelectorAll('[data-table-cell]') ?? []) {
+            const [row, column] = (field.dataset.tableCell ?? '').split(':').map(Number);
+            const targetRow = row === undefined ? undefined : this.#cells[row];
+            const targetCell = column === undefined ? undefined : targetRow?.[column];
+            if (targetCell !== undefined) {
+                targetCell.content = preserveInlineRepresentation(targetCell.content, readInline(field));
+            }
+        }
+    }
+}
+/** Editor.js inline tool for a bounded semantic highlight tone. */
+export class StudioMarkerTool {
+    static isInline = true;
+    static sanitize = { mark: { 'data-studio-tone': true } };
+    #button;
+    #tone = 'accent';
+    checkState(selection) {
+        const mark = closestMark(selection.anchorNode);
+        const active = mark !== undefined;
+        this.#button?.setAttribute('aria-pressed', String(active));
+        return active;
+    }
+    render() {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = 'Highlight';
+        button.setAttribute('aria-label', 'Toggle semantic highlight');
+        button.setAttribute('aria-pressed', 'false');
+        this.#button = button;
+        return button;
+    }
+    renderActions() {
+        const select = selectControl('Highlight tone', ['accent', 'info', 'success', 'warning', 'danger'], this.#tone, false);
+        select.addEventListener('change', () => {
+            this.#tone = select.value;
+        });
+        return select;
+    }
+    surround(range) {
+        const active = closestMark(range.commonAncestorContainer);
+        if (active !== undefined) {
+            const parent = active.parentNode;
+            while (active.firstChild !== null)
+                parent?.insertBefore(active.firstChild, active);
+            active.remove();
+            return;
+        }
+        if (range.collapsed)
+            return;
+        const mark = document.createElement('mark');
+        mark.dataset.studioTone = this.#tone;
+        mark.append(range.extractContents());
+        range.insertNode(mark);
+    }
+}
+function appendInline(parent, node) {
+    if (node.type === 'hardBreak') {
+        parent.appendChild(document.createElement('br'));
+        return;
+    }
+    if (node.type !== 'text' || (node.text ?? '').length === 0)
+        return;
+    let child = document.createTextNode(node.text ?? '');
+    for (const mark of [...(node.marks ?? [])].reverse()) {
+        const element = document.createElement(markElement(mark));
+        if (mark.type === 'highlight')
+            element.dataset.studioTone = stringAttribute(mark.attrs?.tone, 'accent');
+        element.append(child);
+        child = element;
+    }
+    parent.appendChild(child);
+}
+function markElement(mark) {
+    if (mark.type === 'bold')
+        return 'strong';
+    if (mark.type === 'italic')
+        return 'em';
+    if (mark.type === 'strike')
+        return 's';
+    if (mark.type === 'code')
+        return 'code';
+    return 'mark';
+}
+function readInline(parent) {
+    const result = [];
+    const visit = (node, marks) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.nodeValue ?? '';
+            if (text.length > 0)
+                result.push({ ...(marks.length > 0 ? { marks } : {}), text, type: 'text' });
+            return;
+        }
+        if (!(node instanceof Element))
+            return;
+        if (node.localName === 'br') {
+            result.push({ type: 'hardBreak' });
+            return;
+        }
+        const next = [...marks];
+        const mark = canonicalMark(node);
+        if (mark !== undefined && !next.some((item) => item.type === mark.type)) {
+            if (mark.type === 'code')
+                next.splice(0, next.length, mark);
+            else if (!next.some((item) => item.type === 'code'))
+                next.push(mark);
+        }
+        for (const child of node.childNodes)
+            visit(child, next);
+    };
+    for (const child of parent.childNodes)
+        visit(child, []);
+    return result;
+}
+function preserveInlineRepresentation(original, rendered) {
+    return sameCanonical(projectInline(original), projectInline(rendered))
+        ? structuredClone([...original])
+        : rendered;
+}
+function projectInline(content) {
+    const projection = [];
+    for (const node of content) {
+        if (node.type === 'hardBreak') {
+            projection.push({ kind: 'hard-break' });
+            continue;
+        }
+        if (node.type !== 'text')
+            continue;
+        const marks = (node.marks ?? [])
+            .map((mark) => {
+            if (mark.type !== 'highlight')
+                return mark.type;
+            const tone = mark.attrs?.tone;
+            return `${mark.type}:${typeof tone === 'string' ? tone : ''}`;
+        })
+            .sort();
+        const previous = projection.at(-1);
+        if (previous?.kind === 'text' && sameCanonical(previous.marks, marks)) {
+            previous.text += node.text ?? '';
+        }
+        else {
+            projection.push({ kind: 'text', marks, text: node.text ?? '' });
+        }
+    }
+    return projection;
+}
+function canonicalMark(element) {
+    if (element.localName === 'strong' || element.localName === 'b')
+        return { type: 'bold' };
+    if (element.localName === 'em' || element.localName === 'i')
+        return { type: 'italic' };
+    if (element.localName === 's' || element.localName === 'del')
+        return { type: 'strike' };
+    if (element.localName === 'code')
+        return { type: 'code' };
+    if (element.localName === 'mark') {
+        const tone = element.getAttribute('data-studio-tone');
+        return {
+            attrs: {
+                tone: ['accent', 'danger', 'info', 'success', 'warning'].includes(tone ?? '')
+                    ? (tone ?? 'accent')
+                    : 'accent',
+            },
+            type: 'highlight',
+        };
+    }
+    return undefined;
+}
+function pastePlainText(event) {
+    event.preventDefault();
+    const text = event.clipboardData?.getData('text/plain') ?? '';
+    const selection = globalThis.getSelection();
+    if (selection === null || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(document.createTextNode(text.slice(0, 250_000)));
+    range.collapse(false);
+}
+function flattenList(node, depth = 0, ownerItem, parentListParent) {
+    const rows = [];
+    for (const item of node.content ?? []) {
+        const existingEditable = (item.content ?? []).find((block) => block.type === 'paragraph' || block.type === 'heading');
+        const editableBlock = existingEditable ?? { type: 'paragraph' };
+        rows.push({
+            depth,
+            editableBlock,
+            item,
+            ...(ownerItem === undefined ? {} : { ownerItem }),
+            parentList: node,
+            ...(parentListParent === undefined ? {} : { parentListParent }),
+            syntheticEditable: existingEditable === undefined,
+        });
+        for (const nested of item.content ?? []) {
+            if (nested.type === 'bulletList' || nested.type === 'orderedList')
+                rows.push(...flattenList(nested, depth + 1, item, node));
+        }
+    }
+    return rows;
+}
+function orderedListStart(node) {
+    const value = Number(node.attrs?.start ?? 1);
+    return Number.isSafeInteger(value) && value >= 1 && value <= 1_000_000 ? value : 1;
+}
+function canMoveListRow(row, delta) {
+    const siblings = row.parentList.content ?? [];
+    const index = siblings.indexOf(row.item);
+    return index >= 0 && index + delta >= 0 && index + delta < siblings.length;
+}
+function canIndentListRow(row) {
+    if (row.depth >= 4)
+        return false;
+    const siblings = row.parentList.content ?? [];
+    return siblings.indexOf(row.item) > 0;
+}
+function canRemoveListRow(row, root) {
+    return row.parentList !== root || (root.content?.length ?? 0) > 1;
+}
+function removeListFromItem(item, list) {
+    item.content = (item.content ?? []).filter((block) => block !== list);
+}
+function editableBlockContent(blocks) {
+    return (blocks.find((block) => block.type === 'paragraph' || block.type === 'heading')?.content ?? []);
+}
+function mergeEditableBlockContent(blocks, content) {
+    const result = structuredClone([...blocks]);
+    const index = result.findIndex((block) => block.type === 'paragraph' || block.type === 'heading');
+    if (index < 0) {
+        if (content.length > 0)
+            result.unshift({ content: structuredClone([...content]), type: 'paragraph' });
+        return result;
+    }
+    const block = result[index];
+    if (block !== undefined && !sameCanonical(block.content ?? [], content)) {
+        block.content = structuredClone([...content]);
+    }
+    return result;
+}
+function inlineField(label, content, readOnly) {
+    const field = document.createElement('div');
+    field.className = 'studio-rich-text-field';
+    field.contentEditable = readOnly ? 'false' : 'true';
+    field.setAttribute('aria-label', label);
+    field.setAttribute('aria-multiline', 'true');
+    field.setAttribute('role', 'textbox');
+    field.spellcheck = true;
+    for (const inline of content)
+        appendInline(field, inline);
+    field.addEventListener('paste', pastePlainText);
+    return field;
+}
+function sameCanonical(left, right) {
+    if (Object.is(left, right))
+        return true;
+    if (Array.isArray(left) || Array.isArray(right)) {
+        return (Array.isArray(left) &&
+            Array.isArray(right) &&
+            left.length === right.length &&
+            left.every((value, index) => sameCanonical(value, right[index])));
+    }
+    if (!isRecord(left) || !isRecord(right))
+        return false;
+    const leftKeys = Object.keys(left).sort();
+    const rightKeys = Object.keys(right).sort();
+    return (leftKeys.length === rightKeys.length &&
+        leftKeys.every((key, index) => key === rightKeys[index] && sameCanonical(left[key], right[key])));
+}
+function editorGroup(label) {
+    const group = document.createElement('div');
+    group.setAttribute('aria-label', label);
+    group.setAttribute('role', 'group');
+    return group;
+}
+function textInput(label, value, readOnly) {
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.setAttribute('aria-label', label);
+    input.disabled = readOnly;
+    input.value = value;
+    return input;
+}
+function selectControl(label, values, selected, readOnly) {
+    const select = document.createElement('select');
+    select.setAttribute('aria-label', label);
+    select.disabled = readOnly;
+    for (const value of values) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = value;
+        option.selected = value === selected;
+        select.append(option);
+    }
+    select.value = selected;
+    return select;
+}
+function rowButton(label, action, disabled = false) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.setAttribute('aria-label', label);
+    button.disabled = disabled;
+    button.addEventListener('click', action);
+    return button;
+}
+function closestMark(node) {
+    let candidate = node instanceof HTMLElement ? node : node?.parentElement;
+    while (candidate !== null && candidate !== undefined) {
+        if (candidate.localName === 'mark')
+            return candidate;
+        candidate = candidate.parentElement ?? undefined;
+    }
+    return undefined;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function stringAttribute(value, fallback) {
+    return typeof value === 'string' ? value : fallback;
+}
+//# sourceMappingURL=first-party-tools.js.map