@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/rich-text-editor.js

@@ -0,0 +1,508 @@
+import { base, syncHostAccessibleName } from "./shared.js";
+const ALLOWED = new Set(["P", "DIV", "SPAN", "BR", "HR", "STRONG", "B", "EM", "I", "U", "S", "DEL", "INS", "UL", "OL", "LI", "A", "H1", "H2", "H3", "H4", "H5", "H6", "BLOCKQUOTE", "PRE", "TABLE", "THEAD", "TBODY", "TFOOT", "TR", "TH", "TD", "CAPTION", "SUP", "SUB", "CODE", "IMG"]);
+const DROP_CONTENT = new Set(["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "TEMPLATE"]);
+function safeHref(value) {
+    if (/[\u0000-\u001f\u007f]/.test(value))
+        return false;
+    try {
+        return ["http:", "https:", "mailto:"].includes(new URL(value.trim(), document.baseURI).protocol);
+    }
+    catch {
+        return false;
+    }
+}
+function safeImageSrc(value) {
+    try {
+        return ["http:", "https:"].includes(new URL(value.trim(), document.baseURI).protocol);
+    }
+    catch {
+        return false;
+    }
+}
+function cleanHtml(html) {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const clean = (node) => {
+        for (const child of [...node.childNodes]) {
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                const element = child;
+                if (DROP_CONTENT.has(element.tagName)) {
+                    child.remove();
+                    continue;
+                }
+                if (!ALLOWED.has(element.tagName)) {
+                    clean(element);
+                    child.replaceWith(...[...child.childNodes]);
+                    continue;
+                }
+                for (const attr of [...element.attributes]) {
+                    const link = element.tagName === "A" && attr.name === "href" && safeHref(attr.value);
+                    const span = ["TD", "TH"].includes(element.tagName) && ["colspan", "rowspan"].includes(attr.name) && /^\d{1,2}$/.test(attr.value) && Number(attr.value) > 0;
+                    const scope = element.tagName === "TH" && attr.name === "scope" && ["row", "col", "rowgroup", "colgroup"].includes(attr.value);
+                    const image = element.tagName === "IMG" && ((attr.name === "src" && safeImageSrc(attr.value)) || attr.name === "alt" || ((attr.name === "width" || attr.name === "height") && /^\d{1,4}$/.test(attr.value)));
+                    if (!link && !span && !scope && !image)
+                        element.removeAttribute(attr.name);
+                }
+                clean(element);
+            }
+            else if (child.nodeType !== Node.TEXT_NODE)
+                child.remove();
+        }
+    };
+    clean(doc.body);
+    return doc.body.innerHTML;
+}
+export function defineRichTextEditor() {
+    if (customElements.get("spui-rich-text-editor"))
+        return;
+    class SpuiRichTextEditor extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["label", "editor-label", "placeholder", "disabled", "read-only", "required", "required-message", "value", "name", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "bold-label", "italic-label", "underline-label", "bullet-list-label", "number-list-label", "link-label", "undo-label", "redo-label", "insert-table-label", "insert-image-label", "image-input-label", "insert-row-above-label", "insert-row-below-label", "insert-column-before-label", "insert-column-after-label", "delete-row-label", "delete-column-label", "delete-table-label", "toolbar-label", "link-prompt"];
+        editor;
+        internals;
+        formDisabled = false;
+        pendingValue;
+        customError = "";
+        savedRange;
+        /** Uploads to a durable asset store and returns the image URL to persist in editor HTML. */
+        imageUploader;
+        get uploadImage() { return this.imageUploader; }
+        set uploadImage(value) { this.imageUploader = value; this.syncImageButton(); }
+        imageInput;
+        uploadingImage = false;
+        savedCell;
+        selectedTablePath;
+        events;
+        constructor() { super(); try {
+            this.internals = this.attachInternals();
+        }
+        catch { /* Editing remains available in engines without form association. */ } }
+        connectedCallback() {
+            this.events?.abort();
+            this.events = new AbortController();
+            this.render();
+            document.addEventListener("selectionchange", this.onSelectionChange, { signal: this.events.signal });
+            if (this.pendingValue !== undefined)
+                this.value = this.pendingValue;
+            else if (this.hasAttribute("value"))
+                this.value = this.getAttribute("value") ?? "";
+            this.syncForm();
+        }
+        disconnectedCallback() { this.events?.abort(); }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "value")
+                this.value = this.getAttribute("value") ?? "";
+            else if ((name === "disabled" || name === "read-only") && this.editor) {
+                this.syncDisabled();
+                this.syncForm();
+            }
+            else if (name === "required" && this.editor) {
+                this.editor.setAttribute("aria-required", String(this.hasAttribute("required")));
+                this.syncForm();
+            }
+            else if (name === "required-message" && this.editor)
+                this.syncForm();
+            else if (name === "placeholder" && this.editor)
+                this.editor.dataset.placeholder = this.getAttribute("placeholder") ?? "Write something…";
+            else if (name === "label" && this.editor) {
+                const label = this.shadowRoot?.querySelector("label");
+                if (label) {
+                    label.textContent = this.getAttribute("label") ?? "";
+                    label.hidden = !this.hasAttribute("label");
+                }
+                this.syncEditorLabel();
+                this.refreshStrings();
+            }
+            else if (name === "editor-label" && this.editor)
+                this.syncEditorLabel();
+            else if (["aria-label", "aria-labelledby", "aria-description", "aria-describedby"].includes(name) && this.editor)
+                syncHostAccessibleName(this, this.editor);
+            else if (name === "aria-invalid" && this.editor) {
+                const value = this.getAttribute(name);
+                if (value === null)
+                    this.editor.removeAttribute(name);
+                else
+                    this.editor.setAttribute(name, value);
+            }
+            else
+                this.refreshStrings();
+        }
+        syncEditorLabel() { this.editor.setAttribute("aria-label", this.getAttribute("aria-label") ?? this.getAttribute("label") ?? this.getAttribute("editor-label") ?? "Rich text"); }
+        get value() { return this.editor ? cleanHtml(this.editor.innerHTML) : this.pendingValue ?? this.getAttribute("value") ?? ""; }
+        set value(value) { this.pendingValue = value; if (this.editor) {
+            this.editor.innerHTML = cleanHtml(value);
+            this.syncForm();
+        } }
+        get form() { return this.internals?.form ?? null; }
+        get validity() { return this.internals?.validity; }
+        get validationMessage() { return this.internals?.validationMessage ?? ""; }
+        get willValidate() { return Boolean(this.editor && !this.formDisabled && !this.hasAttribute("disabled") && !this.hasAttribute("read-only") && (this.internals?.willValidate ?? true)); }
+        checkValidity() { return this.willValidate ? this.internals?.checkValidity() ?? true : true; }
+        reportValidity() { return this.willValidate ? this.internals?.reportValidity() ?? true : true; }
+        setCustomValidity(message) { this.customError = String(message ?? ""); this.syncForm(); }
+        formResetCallback() { this.value = this.getAttribute("value") ?? ""; }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = state; }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; if (this.editor) {
+            this.syncDisabled();
+            this.syncForm();
+        } }
+        syncDisabled() {
+            const disabled = this.formDisabled || this.hasAttribute("disabled");
+            const readOnly = disabled || this.hasAttribute("read-only");
+            this.editor.contentEditable = String(!readOnly);
+            this.editor.setAttribute("aria-readonly", String(this.hasAttribute("read-only")));
+            this.editor.setAttribute("aria-disabled", String(disabled));
+            this.shadowRoot?.querySelectorAll("[role=toolbar] button").forEach(button => { button.disabled = readOnly; });
+            this.syncImageButton();
+        }
+        syncImageButton() {
+            const button = this.shadowRoot?.querySelector('[data-command="insertImage"]');
+            if (button)
+                button.disabled = this.formDisabled || this.hasAttribute("disabled") || this.hasAttribute("read-only") || !this.imageUploader || this.uploadingImage;
+        }
+        syncForm() { const value = this.value; this.pendingValue = value; this.internals?.setFormValue(value || null); const active = this.willValidate; const missing = active && this.hasAttribute("required") && !this.editor?.textContent?.trim(); const customError = active && Boolean(this.customError); const flags = { ...(missing ? { valueMissing: true } : {}), ...(customError ? { customError: true } : {}) }; const message = customError ? this.customError : missing ? this.getAttribute("required-message") ?? "Enter some text." : ""; try {
+            this.internals?.setValidity(flags, message);
+        }
+        catch { /* Engines without form association remain editable. */ } }
+        sanitizeEditor() {
+            const html = this.editor.innerHTML;
+            const value = cleanHtml(html);
+            if (value === html)
+                return;
+            const cell = this.selectedCell();
+            const tableIndex = cell ? [...this.editor.querySelectorAll("table")].indexOf(cell.closest("table")) : -1;
+            const rowIndex = cell?.closest("tr")?.rowIndex ?? -1;
+            const cellIndex = cell?.cellIndex ?? -1;
+            this.editor.innerHTML = value;
+            const restoredCell = tableIndex >= 0 && rowIndex >= 0 && cellIndex >= 0
+                ? this.editor.querySelectorAll("table")[tableIndex]?.rows[rowIndex]?.cells[cellIndex]
+                : undefined;
+            this.savedCell = restoredCell;
+            if (restoredCell) {
+                const range = document.createRange();
+                range.selectNodeContents(restoredCell);
+                range.collapse(true);
+                this.savedRange = range;
+            }
+            else
+                this.savedRange = undefined;
+            this.syncTableActions();
+        }
+        selectedCell() {
+            const node = this.savedRange?.startContainer;
+            const element = node instanceof Element ? node : node?.parentElement;
+            const cell = element?.closest("td,th");
+            if (cell && this.editor.contains(cell)) {
+                this.rememberCell(cell);
+                return cell;
+            }
+            if (this.savedCell && this.editor.contains(this.savedCell))
+                return this.savedCell;
+            const path = this.selectedTablePath;
+            return path ? this.editor.querySelectorAll("table")[path.table]?.rows[path.row]?.cells[path.cell] : undefined;
+        }
+        rememberCell(cell) {
+            const table = cell.closest("table");
+            this.selectedTablePath = table ? { table: [...this.editor.querySelectorAll("table")].indexOf(table), row: cell.parentElement.rowIndex, cell: cell.cellIndex } : undefined;
+        }
+        selection() {
+            const root = this.editor.getRootNode();
+            return root instanceof ShadowRoot ? root.getSelection?.() ?? document.getSelection() : document.getSelection();
+        }
+        onSelectionChange = () => {
+            const selection = this.selection();
+            if (selection?.rangeCount) {
+                const range = selection.getRangeAt(0);
+                if (this.editor.contains(range.commonAncestorContainer)) {
+                    this.savedRange = range.cloneRange();
+                    const node = range.startContainer;
+                    const element = node instanceof Element ? node : node.parentElement;
+                    const cell = element?.closest("td,th");
+                    if (cell && this.editor.contains(cell)) {
+                        this.savedCell = cell;
+                        this.rememberCell(cell);
+                    }
+                }
+            }
+            this.syncTableActions();
+        };
+        onEditorClick = (event) => {
+            const cell = event.composedPath().find((node) => node instanceof HTMLTableCellElement && this.editor.contains(node));
+            if (cell) {
+                this.savedCell = cell;
+                this.rememberCell(cell);
+            }
+            this.onSelectionChange();
+        };
+        syncTableActions() {
+            const cell = this.selectedCell();
+            const table = cell?.closest("table");
+            const hasSpans = Boolean(table && [...table.querySelectorAll("td,th")].some(cell => cell.rowSpan !== 1 || cell.colSpan !== 1));
+            const rowCount = table?.rows.length ?? 0;
+            const columnCount = table ? Math.min(...[...table.rows].map(row => row.cells.length)) : 0;
+            this.shadowRoot?.querySelectorAll("button[data-table-command]").forEach(button => {
+                const command = button.dataset.tableCommand;
+                button.disabled = !cell || !table || hasSpans || (command === "deleteRow" && rowCount <= 1) || (command === "deleteColumn" && columnCount <= 1);
+            });
+        }
+        restoreSelection() {
+            this.editor.focus();
+            const selection = this.selection();
+            if (!selection || !this.savedRange || !this.editor.contains(this.savedRange.commonAncestorContainer))
+                return;
+            selection.removeAllRanges();
+            selection.addRange(this.savedRange);
+        }
+        editTable(command) {
+            const cell = this.selectedCell();
+            const table = cell?.closest("table");
+            const merged = Boolean(table && [...table.querySelectorAll("td,th")].some(item => item.rowSpan !== 1 || item.colSpan !== 1));
+            if (!cell || !table || merged)
+                return;
+            let focusCell;
+            if (command === "deleteTable") {
+                table.remove();
+                this.savedRange = undefined;
+                this.savedCell = undefined;
+                this.selectedTablePath = undefined;
+            }
+            else if (command === "insertRowAbove" || command === "insertRowBelow") {
+                const source = cell.parentElement;
+                const row = source.cloneNode(true);
+                for (const clone of [...row.cells]) {
+                    clone.replaceChildren(document.createElement("br"));
+                }
+                source.parentElement?.insertBefore(row, command === "insertRowAbove" ? source : source.nextSibling);
+                focusCell = row.cells[cell.cellIndex];
+            }
+            else if (command === "insertColumnBefore" || command === "insertColumnAfter") {
+                const index = cell.cellIndex + (command === "insertColumnAfter" ? 1 : 0);
+                for (const row of [...table.rows]) {
+                    const isHeader = row.parentElement?.tagName === "THEAD";
+                    const next = document.createElement(isHeader ? "th" : "td");
+                    if (isHeader)
+                        next.setAttribute("scope", "col");
+                    next.append(document.createElement("br"));
+                    row.insertBefore(next, row.cells[index] ?? null);
+                    if (row === cell.parentElement)
+                        focusCell = next;
+                }
+            }
+            else if (command === "deleteRow") {
+                const row = cell.parentElement;
+                const index = row.rowIndex;
+                const cellIndex = cell.cellIndex;
+                row.remove();
+                const next = table.rows[Math.min(index, table.rows.length - 1)];
+                focusCell = next?.cells[Math.min(cellIndex, next.cells.length - 1)];
+            }
+            else if (command === "deleteColumn") {
+                const index = cell.cellIndex;
+                const row = cell.parentElement;
+                for (const row of [...table.rows])
+                    row.cells[index]?.remove();
+                focusCell = row.cells[Math.min(index, row.cells.length - 1)];
+            }
+            if (focusCell) {
+                this.savedCell = focusCell;
+                this.rememberCell(focusCell);
+                const range = document.createRange();
+                range.selectNodeContents(focusCell);
+                range.collapse(true);
+                this.savedRange = range;
+                this.restoreSelection();
+            }
+            else
+                this.editor.focus();
+            this.syncForm();
+            this.syncTableActions();
+            this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.value }, bubbles: true, composed: true }));
+        }
+        command(command, value) {
+            if (command === "insertImage") {
+                this.imageInput?.click();
+                return;
+            }
+            if (["insertRowAbove", "insertRowBelow", "insertColumnBefore", "insertColumnAfter", "deleteRow", "deleteColumn", "deleteTable"].includes(command)) {
+                this.editTable(command);
+                return;
+            }
+            this.restoreSelection();
+            if (command === "createLink") {
+                const href = window.prompt(this.getAttribute("link-prompt") ?? "Link URL");
+                if (!href || !safeHref(href))
+                    return;
+                value = href.trim();
+            }
+            if (command === "insertTable")
+                value = '<table><caption><br></caption><thead><tr><th scope="col"><br></th><th scope="col"><br></th></tr></thead><tbody><tr><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td></tr></tbody></table><p><br></p>';
+            this.editor.ownerDocument.execCommand(command === "insertTable" ? "insertHTML" : command, false, value);
+            this.sanitizeEditor();
+            this.syncForm();
+            this.onSelectionChange();
+            this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.value }, bubbles: true, composed: true }));
+        }
+        async insertUploadedImage(file) {
+            if (!this.imageUploader || !file.type.startsWith("image/") || file.size > 10 * 1024 * 1024 || this.uploadingImage)
+                return;
+            this.uploadingImage = true;
+            this.syncImageButton();
+            try {
+                const src = await this.imageUploader(file);
+                if (!safeImageSrc(src))
+                    throw new Error("Image upload must return an HTTP or HTTPS URL.");
+                this.restoreSelection();
+                const image = document.createElement("img");
+                image.src = new URL(src, document.baseURI).href;
+                image.alt = file.name.replace(/\\.[^.]*$/, "").slice(0, 200);
+                const selection = this.selection();
+                const range = selection?.rangeCount ? selection.getRangeAt(0) : undefined;
+                if (range && this.editor.contains(range.commonAncestorContainer)) {
+                    range.deleteContents();
+                    range.insertNode(image);
+                    range.setStartAfter(image);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                else
+                    this.editor.append(image);
+                this.savedRange = range?.cloneRange();
+                this.syncForm();
+                this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.value }, bubbles: true, composed: true }));
+            }
+            catch (error) {
+                this.dispatchEvent(new CustomEvent("spui-image-upload-error", { detail: { fileName: file.name, error }, bubbles: true, composed: true }));
+            }
+            finally {
+                this.uploadingImage = false;
+                this.syncImageButton();
+            }
+        }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const label = document.createElement("label");
+            label.textContent = this.getAttribute("label") ?? "";
+            label.hidden = !this.hasAttribute("label");
+            label.part.add("label");
+            const toolbar = document.createElement("div");
+            toolbar.setAttribute("role", "toolbar");
+            toolbar.setAttribute("aria-orientation", "horizontal");
+            toolbar.part.add("toolbar");
+            const actions = [["Bold", "bold"], ["Italic", "italic"], ["Underline", "underline"], ["Bulleted list", "insertUnorderedList", undefined, "• List"], ["Numbered list", "insertOrderedList", undefined, "1. List"], ["Undo", "undo"], ["Redo", "redo"], ["Insert table", "insertTable"], ["Insert image", "insertImage", undefined, undefined, "insert-image-label"], ["Insert row above", "insertRowAbove", undefined, undefined, "insert-row-above-label"], ["Insert row below", "insertRowBelow", undefined, undefined, "insert-row-below-label"], ["Insert column before", "insertColumnBefore", undefined, undefined, "insert-column-before-label"], ["Insert column after", "insertColumnAfter", undefined, undefined, "insert-column-after-label"], ["Delete row", "deleteRow", undefined, undefined, "delete-row-label"], ["Delete column", "deleteColumn", undefined, undefined, "delete-column-label"], ["Delete table", "deleteTable", undefined, undefined, "delete-table-label"], ["Link", "createLink"]];
+            for (const [title, command, value, short, labelAttribute] of actions) {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.dataset.command = command;
+                button.dataset.fallback = short ?? title;
+                if (labelAttribute) {
+                    button.dataset.labelAttribute = labelAttribute;
+                    if (command.startsWith("insertRow") || command.startsWith("insertColumn") || command.startsWith("delete"))
+                        button.dataset.tableCommand = command;
+                }
+                button.tabIndex = toolbar.children.length === 0 ? 0 : -1;
+                button.textContent = title;
+                button.setAttribute("aria-label", title);
+                button.addEventListener("mousedown", event => event.preventDefault());
+                button.addEventListener("click", () => this.command(command, value));
+                toolbar.append(button);
+            }
+            this.imageInput = document.createElement("input");
+            this.imageInput.type = "file";
+            this.imageInput.accept = "image/*";
+            this.imageInput.hidden = true;
+            this.imageInput.setAttribute("aria-label", this.getAttribute("image-input-label") ?? "Choose image");
+            this.imageInput.addEventListener("change", () => { const file = this.imageInput?.files?.[0]; if (file)
+                void this.insertUploadedImage(file); this.imageInput.value = ""; });
+            toolbar.append(this.imageInput);
+            toolbar.addEventListener("focusin", event => { const active = event.target; toolbar.querySelectorAll("button").forEach(button => { button.tabIndex = button === active ? 0 : -1; }); });
+            toolbar.addEventListener("keydown", event => {
+                const key = event.key;
+                const buttons = [...toolbar.querySelectorAll("button:not(:disabled)")];
+                const current = buttons.indexOf(event.target);
+                const rtl = getComputedStyle(this).direction === "rtl";
+                const step = key === "ArrowRight" ? (rtl ? -1 : 1) : key === "ArrowLeft" ? (rtl ? 1 : -1) : 0;
+                const index = key === "Home" ? 0 : key === "End" ? buttons.length - 1 : step ? (current + step + buttons.length) % buttons.length : -1;
+                if (index < 0 || !buttons[index])
+                    return;
+                event.preventDefault();
+                buttons[index].tabIndex = 0;
+                buttons.forEach((button, buttonIndex) => { if (buttonIndex !== index)
+                    button.tabIndex = -1; });
+                buttons[index].focus();
+            });
+            this.editor = document.createElement("div");
+            this.editor.setAttribute("role", "textbox");
+            this.editor.setAttribute("aria-multiline", "true");
+            this.syncEditorLabel();
+            const invalid = this.getAttribute("aria-invalid");
+            if (invalid !== null)
+                this.editor.setAttribute("aria-invalid", invalid);
+            this.editor.contentEditable = String(!this.hasAttribute("disabled") && !this.hasAttribute("read-only"));
+            this.editor.setAttribute("aria-readonly", String(this.hasAttribute("read-only")));
+            this.editor.setAttribute("aria-disabled", String(this.hasAttribute("disabled")));
+            this.editor.setAttribute("aria-required", String(this.hasAttribute("required")));
+            this.editor.dataset.placeholder = this.getAttribute("placeholder") ?? "Write something…";
+            this.editor.part.add("editor");
+            this.editor.addEventListener("keydown", event => { const key = event.key.toLowerCase(); const shortcut = event.metaKey || event.ctrlKey; if (!shortcut)
+                return; if (key === "z") {
+                event.preventDefault();
+                this.command(event.shiftKey ? "redo" : "undo");
+            }
+            else if (key === "y") {
+                event.preventDefault();
+                this.command("redo");
+            } });
+            this.editor.addEventListener("input", () => { this.sanitizeEditor(); this.syncForm(); this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.value }, bubbles: true, composed: true })); });
+            this.editor.addEventListener("mouseup", this.onSelectionChange);
+            this.editor.addEventListener("keyup", this.onSelectionChange);
+            this.editor.addEventListener("click", this.onEditorClick);
+            shadow.addEventListener("selectionchange", this.onSelectionChange, { signal: this.events?.signal });
+            this.editor.addEventListener("paste", event => {
+                event.preventDefault();
+                const clipboard = event.clipboardData;
+                const imageFile = [...(clipboard?.files ?? [])].find(file => file.type.startsWith("image/"));
+                if (imageFile) {
+                    void this.insertUploadedImage(imageFile);
+                    return;
+                }
+                const html = cleanHtml(clipboard?.getData("text/html") ?? "");
+                const text = clipboard?.getData("text/plain") ?? "";
+                if (html)
+                    this.editor.ownerDocument.execCommand("insertHTML", false, html);
+                else
+                    this.editor.ownerDocument.execCommand("insertText", false, text);
+                this.sanitizeEditor();
+                this.syncForm();
+                this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.value }, bubbles: true, composed: true }));
+            });
+            this.editor.addEventListener("blur", () => { this.sanitizeEditor(); this.syncForm(); this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: this.value }, bubbles: true, composed: true })); });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:grid;gap:6px}label{font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}[role=toolbar]{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#c8c8c8));border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-surface,#fff)}button{border:0;border-radius:4px;background:transparent;color:var(--spui-ui-text,inherit);padding:6px 8px;font:inherit;cursor:pointer}button:hover:not(:disabled){background:var(--spui-ui-surface-hover,#eee)}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,[role=textbox]:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}[role=textbox]{min-height:120px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#c8c8c8));border-radius:var(--spui-control-radius,6px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit;line-height:1.5;overflow:auto;caret-color:var(--spui-focus-ring,#005a9e)}[role=textbox]:empty:before{content:attr(data-placeholder);color:var(--spui-ui-muted,#666);pointer-events:none}table{border-collapse:collapse;max-width:100%;margin-block:8px}caption{text-align:start;font-weight:600}td,th{min-width:56px;padding:6px 9px;border:1px solid var(--spui-ui-stroke,#c8c8c8);text-align:start}th{background:var(--spui-ui-surface-hover,#f5f5f5);font-weight:600}a{color:var(--spui-semantic-link,#0f6cbd)}@media(forced-colors:active){button{border:1px solid ButtonText}td,th{border-color:CanvasText}}`;
+            shadow.replaceChildren(style, label, toolbar, this.editor);
+            syncHostAccessibleName(this, this.editor);
+            this.syncDisabled();
+            this.refreshStrings();
+            this.onSelectionChange();
+        }
+        refreshStrings() {
+            const toolbar = this.shadowRoot?.querySelector('[role="toolbar"]');
+            if (!toolbar)
+                return;
+            this.imageInput?.setAttribute("aria-label", this.getAttribute("image-input-label") ?? "Choose image");
+            const label = this.getAttribute("label") ?? "Rich text";
+            toolbar.setAttribute("aria-label", this.getAttribute("toolbar-label") ?? `${label} formatting`);
+            const attrs = ["bold-label", "italic-label", "underline-label", "bullet-list-label", "number-list-label", "undo-label", "redo-label", "insert-table-label", "insert-image-label", "insert-row-above-label", "insert-row-below-label", "insert-column-before-label", "insert-column-after-label", "delete-row-label", "delete-column-label", "delete-table-label", "link-label"];
+            toolbar.querySelectorAll("button[data-command]").forEach((button, index) => {
+                const attribute = button.dataset.labelAttribute ?? attrs[index];
+                const text = this.getAttribute(attribute) ?? button.dataset.fallback ?? "";
+                button.textContent = button.dataset.command === "insertUnorderedList" && !this.hasAttribute(attribute) ? "• List" : button.dataset.command === "insertOrderedList" && !this.hasAttribute(attribute) ? "1. List" : text;
+                button.setAttribute("aria-label", text);
+            });
+            this.syncTableActions();
+        }
+    }
+    customElements.define("spui-rich-text-editor", SpuiRichTextEditor);
+}

package/dist/elements/search.d.ts

@@ -0,0 +1,3 @@
+export type SearchSize = "small" | "medium" | "large";
+export type SearchAppearance = "outline" | "underline" | "filled-darker" | "filled-lighter" | "filled-darker-shadow" | "filled-lighter-shadow";
+export declare function defineSearchBox(): void;