@codeenvision/ui-webcomponents 1.0.0

package/dist/components/Editor/Editor.js

@@ -0,0 +1,685 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import { renderIconElement } from "../../src/icons/registry.js";
+const DEFAULT_TOOLBAR_LAYOUT = [
+    ["undo", "redo", "clear", "codeView"],
+    ["fontSelect", "fontSize", "paragraph", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6"],
+    ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "highlight"],
+    ["bulletList", "orderedList", "indent", "outdent"],
+    ["alignLeft", "alignCenter", "alignRight", "alignJustify"],
+    ["quote", "code", "horizontalRule"],
+    ["link", "insertImage"],
+];
+const ACTION_LABELS = {
+    undo: { glyph: "↺", label: "Undo" },
+    redo: { glyph: "↻", label: "Redo" },
+    clear: { glyph: "⟲", label: "Clear formatting" },
+    codeView: { glyph: "<>", label: "Toggle source" },
+    paragraph: { glyph: "¶", label: "Paragraph" },
+    heading1: { glyph: "H1", label: "Heading 1" },
+    heading2: { glyph: "H2", label: "Heading 2" },
+    heading3: { glyph: "H3", label: "Heading 3" },
+    heading4: { glyph: "H4", label: "Heading 4" },
+    heading5: { glyph: "H5", label: "Heading 5" },
+    heading6: { glyph: "H6", label: "Heading 6" },
+    quote: { glyph: "❝", label: "Quote" },
+    code: { glyph: "</>", label: "Code block" },
+    bold: { glyph: "B", label: "Bold" },
+    italic: { glyph: "I", label: "Italic" },
+    underline: { glyph: "U", label: "Underline" },
+    strikethrough: { glyph: "S", label: "Strikethrough" },
+    superscript: { glyph: "x²", label: "Superscript" },
+    subscript: { glyph: "x₂", label: "Subscript" },
+    highlight: { glyph: "🖍", label: "Highlight" },
+    bulletList: { glyph: "•", label: "Bulleted list" },
+    orderedList: { glyph: "1.", label: "Numbered list" },
+    alignLeft: { glyph: "|≡", label: "Align left" },
+    alignCenter: { glyph: "|-|", label: "Align center" },
+    alignRight: { glyph: "≡|", label: "Align right" },
+    alignJustify: { glyph: "≡≡", label: "Justify" },
+    indent: { glyph: "→", label: "Indent" },
+    outdent: { glyph: "←", label: "Outdent" },
+    link: { glyph: "🔗", label: "Insert link" },
+    insertImage: { glyph: "🖼", label: "Insert image" },
+    fontSelect: { glyph: "A", label: "Font" },
+    fontSize: { glyph: "↕", label: "Size" },
+    horizontalRule: { glyph: "―", label: "Horizontal line" },
+};
+const ACTION_ICONS = {
+    undo: "undo",
+    redo: "redo",
+    clear: "trash",
+    codeView: "code",
+    paragraph: "paragraph",
+    bold: "text-bold",
+    italic: "text-italic",
+    underline: "text-underline",
+    superscript: "superscript",
+    subscript: "subscript",
+    bulletList: "bullet-list",
+    orderedList: "ordered-list",
+    indent: "arrow-right",
+    outdent: "arrow-left",
+    alignLeft: "text-align-left",
+    alignCenter: "text-align-center",
+    alignRight: "text-align-right",
+    alignJustify: "text-align-justify",
+    quote: "quote",
+    code: "code",
+    horizontalRule: "minus",
+    link: "link",
+    insertImage: "image",
+};
+function setToolbarButtonVisual(button, action) {
+    const copy = ACTION_LABELS[action];
+    if (!copy)
+        return;
+    button.innerHTML = "";
+    const iconName = ACTION_ICONS[action];
+    if (iconName) {
+        const svg = renderIconElement(iconName, { className: "ce-editor__icon" });
+        if (svg) {
+            svg.setAttribute("aria-hidden", "true");
+            svg.setAttribute("focusable", "false");
+            svg.setAttribute("part", "icon");
+            button.appendChild(svg);
+            return;
+        }
+    }
+    // Safe fallback: preserve original glyph behavior when an icon isn't available.
+    const span = document.createElement("span");
+    span.setAttribute("aria-hidden", "true");
+    span.setAttribute("part", "icon");
+    span.textContent = copy.glyph;
+    button.appendChild(span);
+}
+const COMMAND_STATE_MAP = {
+    bold: "bold",
+    italic: "italic",
+    underline: "underline",
+    strikethrough: "strikeThrough",
+    superscript: "superscript",
+    subscript: "subscript",
+    bulletList: "insertUnorderedList",
+    orderedList: "insertOrderedList",
+    alignLeft: "justifyLeft",
+    alignCenter: "justifyCenter",
+    alignRight: "justifyRight",
+    alignJustify: "justifyFull",
+};
+const BLOCK_TAG_MAP = {
+    paragraph: "P",
+    heading1: "H1",
+    heading2: "H2",
+    heading3: "H3",
+    heading4: "H4",
+    heading5: "H5",
+    heading6: "H6",
+    quote: "BLOCKQUOTE",
+    code: "PRE",
+};
+const DEFAULT_STATUS = ["words", "characters", "readingTime"];
+const DEFAULT_HIGHLIGHT_COLOR = "#fff3c4";
+const DEFAULT_WORDS_PER_MINUTE = 200;
+const DEFAULT_FONTS = [
+    "Inter",
+    "Segoe UI",
+    "Helvetica Neue",
+    "Arial",
+    "Georgia",
+    "Times New Roman",
+    "Roboto",
+    "Open Sans",
+    "Lato",
+    "Montserrat",
+    "Fira Code",
+    "Source Code Pro",
+    "Courier New",
+    "JetBrains Mono",
+];
+const DEFAULT_FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "32px"];
+export class Editor extends BaseComponent {
+    options;
+    editorElement;
+    sourceElement;
+    footerElement;
+    toolbarButtons = new Map();
+    toolbarLayout;
+    codeView = false;
+    selectionHandler = () => this.syncToolbarState();
+    handleInputEvent = () => this.handleChange();
+    handleFocusEvent = () => this.syncToolbarState();
+    handleBlurEvent = () => this.syncToolbarState();
+    constructor(options) {
+        super(options.selector);
+        this.options = options;
+        this.toolbarLayout = this.resolveToolbarLayout(options);
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.toolbarLayout = this.resolveToolbarLayout(this.options);
+        const root = document.createElement("div");
+        root.className = "ce-editor";
+        root.setAttribute("data-ce-component", "editor");
+        root.setAttribute("part", "base");
+        if (this.options.theme === "dark") {
+            root.classList.add("ce-editor--dark");
+        }
+        if (this.options.disabled) {
+            root.classList.add("ce-editor--disabled");
+        }
+        if (this.options.toolbarDensity === "compact") {
+            root.classList.add("ce-editor--compact");
+        }
+        const toolbar = this.buildToolbar(this.toolbarLayout);
+        root.appendChild(toolbar);
+        this.editorElement = document.createElement("div");
+        this.editorElement.className = "ce-editor__content";
+        this.editorElement.setAttribute("part", "content");
+        this.editorElement.contentEditable = this.options.disabled ? "false" : "true";
+        if (this.options.height) {
+            this.editorElement.style.minHeight = `${this.options.height}px`;
+        }
+        this.editorElement.innerHTML = this.options.initialContent ?? "";
+        if (this.options.placeholder) {
+            this.editorElement.dataset.placeholder = this.options.placeholder;
+        }
+        this.editorElement.addEventListener("input", this.handleInputEvent);
+        this.editorElement.addEventListener("focus", this.handleFocusEvent);
+        this.editorElement.addEventListener("blur", this.handleBlurEvent);
+        root.appendChild(this.editorElement);
+        this.sourceElement = document.createElement("textarea");
+        this.sourceElement.className = "ce-editor__source";
+        this.sourceElement.setAttribute("part", "source");
+        this.sourceElement.hidden = true;
+        root.appendChild(this.sourceElement);
+        this.footerElement = document.createElement("div");
+        this.footerElement.className = "ce-editor__footer";
+        this.footerElement.setAttribute("part", "footer");
+        root.appendChild(this.footerElement);
+        this.el.appendChild(root);
+        document.addEventListener("selectionchange", this.selectionHandler);
+        this.updatePlaceholderState();
+        this.handleChange();
+        this.applyParts(root);
+    }
+    destroy() {
+        document.removeEventListener("selectionchange", this.selectionHandler);
+        this.toolbarButtons.clear();
+        if (this.editorElement) {
+            this.editorElement.removeEventListener("input", this.handleInputEvent);
+            this.editorElement.removeEventListener("focus", this.handleFocusEvent);
+            this.editorElement.removeEventListener("blur", this.handleBlurEvent);
+        }
+        this.editorElement = undefined;
+        this.sourceElement = undefined;
+        this.footerElement = undefined;
+        this.el.innerHTML = "";
+    }
+    setContent(content) {
+        if (!this.editorElement) {
+            return;
+        }
+        this.editorElement.innerHTML = content;
+        this.updatePlaceholderState();
+        this.handleChange();
+    }
+    getContent() {
+        return this.editorElement?.innerHTML ?? "";
+    }
+    resolveToolbarLayout(options) {
+        if (options.toolbarLayout?.length) {
+            return options.toolbarLayout;
+        }
+        if (options.toolbarOptions?.length) {
+            return [options.toolbarOptions];
+        }
+        return DEFAULT_TOOLBAR_LAYOUT;
+    }
+    tryHydrate() {
+        const root = this.el.classList.contains("ce-editor") ? this.el : this.el.querySelector(".ce-editor");
+        if (!root) {
+            return false;
+        }
+        this.toolbarLayout = this.resolveToolbarLayout(this.options);
+        root.classList.add("ce-editor");
+        root.setAttribute("data-ce-component", "editor");
+        root.setAttribute("part", "base");
+        root.classList.toggle("ce-editor--dark", this.options.theme === "dark");
+        root.classList.toggle("ce-editor--disabled", Boolean(this.options.disabled));
+        root.classList.toggle("ce-editor--compact", this.options.toolbarDensity === "compact");
+        let toolbar = root.querySelector(".ce-editor__toolbar");
+        if (!toolbar || toolbar.querySelectorAll(".ce-editor__group").length === 0) {
+            const replacement = this.buildToolbar(this.toolbarLayout);
+            if (toolbar) {
+                toolbar.replaceWith(replacement);
+            }
+            else {
+                root.prepend(replacement);
+            }
+            toolbar = replacement;
+        }
+        else {
+            this.toolbarButtons.clear();
+            toolbar.setAttribute("role", "toolbar");
+            toolbar.setAttribute("aria-label", "Editor toolbar");
+            toolbar.setAttribute("part", "toolbar");
+            toolbar.querySelectorAll(".ce-editor__button").forEach((button) => {
+                const action = button.dataset.action;
+                if (!action || !ACTION_LABELS[action]) {
+                    return;
+                }
+                const copy = ACTION_LABELS[action];
+                setToolbarButtonVisual(button, action);
+                button.setAttribute("aria-label", copy.label);
+                button.setAttribute("aria-pressed", "false");
+                button.setAttribute("part", "button");
+                button.disabled = Boolean(this.options.disabled);
+                button.addEventListener("click", (event) => {
+                    event.preventDefault();
+                    this.executeAction(action);
+                });
+                this.toolbarButtons.set(action, button);
+            });
+            toolbar.querySelectorAll(".ce-editor__select").forEach((select) => {
+                const action = select.dataset.action;
+                select.setAttribute("part", "select");
+                if (action === "fontSelect") {
+                    select.addEventListener("change", () => this.applyFont(select.value));
+                }
+                if (action === "fontSize") {
+                    select.addEventListener("change", () => this.applyFontSize(select.value));
+                }
+            });
+        }
+        this.editorElement = root.querySelector(".ce-editor__content") ?? undefined;
+        if (!this.editorElement) {
+            this.editorElement = document.createElement("div");
+            this.editorElement.className = "ce-editor__content";
+            root.appendChild(this.editorElement);
+        }
+        this.editorElement.setAttribute("part", "content");
+        this.editorElement.contentEditable = this.options.disabled ? "false" : "true";
+        if (this.options.height) {
+            this.editorElement.style.minHeight = `${this.options.height}px`;
+        }
+        if (this.options.placeholder) {
+            this.editorElement.dataset.placeholder = this.options.placeholder;
+        }
+        this.editorElement.addEventListener("input", this.handleInputEvent);
+        this.editorElement.addEventListener("focus", this.handleFocusEvent);
+        this.editorElement.addEventListener("blur", this.handleBlurEvent);
+        this.sourceElement = root.querySelector(".ce-editor__source") ?? undefined;
+        if (!this.sourceElement) {
+            this.sourceElement = document.createElement("textarea");
+            this.sourceElement.className = "ce-editor__source";
+            this.sourceElement.hidden = true;
+            root.appendChild(this.sourceElement);
+        }
+        this.sourceElement.setAttribute("part", "source");
+        this.footerElement = root.querySelector(".ce-editor__footer") ?? undefined;
+        if (!this.footerElement) {
+            this.footerElement = document.createElement("div");
+            this.footerElement.className = "ce-editor__footer";
+            root.appendChild(this.footerElement);
+        }
+        this.footerElement.setAttribute("part", "footer");
+        document.addEventListener("selectionchange", this.selectionHandler);
+        this.updatePlaceholderState();
+        this.handleChange();
+        this.applyParts(root);
+        return true;
+    }
+    buildToolbar(layout) {
+        const toolbar = document.createElement("div");
+        toolbar.className = "ce-editor__toolbar";
+        toolbar.setAttribute("part", "toolbar");
+        toolbar.setAttribute("role", "toolbar");
+        toolbar.setAttribute("aria-label", "Editor toolbar");
+        const actions = layout.flat().filter((action) => Boolean(ACTION_LABELS[action]));
+        if (!actions.length) {
+            toolbar.hidden = true;
+            return toolbar;
+        }
+        layout.forEach((groupActions, index) => {
+            if (!groupActions.length) {
+                return;
+            }
+            const group = document.createElement("div");
+            group.className = "ce-editor__group";
+            group.setAttribute("part", "group");
+            group.setAttribute("role", "group");
+            group.setAttribute("aria-label", `Editor toolbar group ${index + 1}`);
+            groupActions.forEach((action) => {
+                if (action === "fontSelect") {
+                    const select = document.createElement("select");
+                    select.className = "ce-editor__select";
+                    select.setAttribute("part", "select");
+                    select.dataset.action = action;
+                    const fonts = this.options.fonts?.length ? this.options.fonts : DEFAULT_FONTS;
+                    fonts.forEach((font) => {
+                        const option = document.createElement("option");
+                        option.value = font;
+                        option.textContent = font;
+                        select.appendChild(option);
+                    });
+                    select.addEventListener("change", () => this.applyFont(select.value));
+                    group.appendChild(select);
+                    return;
+                }
+                if (action === "fontSize") {
+                    const select = document.createElement("select");
+                    select.className = "ce-editor__select";
+                    select.setAttribute("part", "select");
+                    select.dataset.action = action;
+                    const sizes = this.options.fontSizes?.length ? this.options.fontSizes : DEFAULT_FONT_SIZES;
+                    sizes.forEach((size) => {
+                        const option = document.createElement("option");
+                        option.value = size;
+                        option.textContent = size;
+                        select.appendChild(option);
+                    });
+                    select.value = "16px";
+                    select.addEventListener("change", () => this.applyFontSize(select.value));
+                    group.appendChild(select);
+                    return;
+                }
+                const copy = ACTION_LABELS[action];
+                if (!copy) {
+                    return;
+                }
+                const button = document.createElement("button");
+                button.type = "button";
+                button.className = "ce-editor__button";
+                button.setAttribute("part", "button");
+                setToolbarButtonVisual(button, action);
+                button.title = copy.label;
+                button.setAttribute("aria-label", copy.label);
+                button.setAttribute("aria-pressed", "false");
+                button.dataset.action = action;
+                button.disabled = Boolean(this.options.disabled);
+                button.addEventListener("click", (event) => {
+                    event.preventDefault();
+                    this.executeAction(action);
+                });
+                group.appendChild(button);
+                this.toolbarButtons.set(action, button);
+            });
+            toolbar.appendChild(group);
+        });
+        return toolbar;
+    }
+    applyParts(root) {
+        const container = root ?? (this.el.classList.contains("ce-editor") ? this.el : this.el.querySelector(".ce-editor"));
+        if (!container) {
+            return;
+        }
+        container.setAttribute("data-ce-component", "editor");
+        container.setAttribute("part", "base");
+        container.querySelectorAll(".ce-editor__toolbar").forEach((node) => node.setAttribute("part", "toolbar"));
+        container.querySelectorAll(".ce-editor__group").forEach((node) => node.setAttribute("part", "group"));
+        container.querySelectorAll(".ce-editor__button").forEach((node) => node.setAttribute("part", "button"));
+        container.querySelectorAll(".ce-editor__icon").forEach((node) => node.setAttribute("part", "icon"));
+        container.querySelectorAll(".ce-editor__select").forEach((node) => node.setAttribute("part", "select"));
+        container.querySelectorAll(".ce-editor__content").forEach((node) => node.setAttribute("part", "content"));
+        container.querySelectorAll(".ce-editor__source").forEach((node) => node.setAttribute("part", "source"));
+        container.querySelectorAll(".ce-editor__footer").forEach((node) => node.setAttribute("part", "footer"));
+    }
+    executeAction(action) {
+        if (!this.editorElement || this.options.disabled) {
+            return;
+        }
+        if (this.codeView && action !== "codeView") {
+            return;
+        }
+        this.editorElement.focus({ preventScroll: true });
+        switch (action) {
+            case "bold":
+            case "italic":
+            case "underline":
+            case "strikethrough":
+            case "undo":
+            case "redo":
+            case "superscript":
+            case "subscript":
+                document.execCommand(action);
+                break;
+            case "bulletList":
+                document.execCommand("insertUnorderedList");
+                break;
+            case "orderedList":
+                document.execCommand("insertOrderedList");
+                break;
+            case "paragraph":
+                document.execCommand("formatBlock", false, "p");
+                break;
+            case "heading1":
+                document.execCommand("formatBlock", false, "h1");
+                break;
+            case "heading2":
+                document.execCommand("formatBlock", false, "h2");
+                break;
+            case "heading3":
+                document.execCommand("formatBlock", false, "h3");
+                break;
+            case "heading4":
+                document.execCommand("formatBlock", false, "h4");
+                break;
+            case "heading5":
+                document.execCommand("formatBlock", false, "h5");
+                break;
+            case "heading6":
+                document.execCommand("formatBlock", false, "h6");
+                break;
+            case "quote":
+                document.execCommand("formatBlock", false, "blockquote");
+                break;
+            case "code":
+                if (this.selectionHasTag("PRE")) {
+                    document.execCommand("formatBlock", false, "p");
+                }
+                else {
+                    document.execCommand("formatBlock", false, "pre");
+                }
+                break;
+            case "alignLeft":
+                document.execCommand("justifyLeft");
+                break;
+            case "alignCenter":
+                document.execCommand("justifyCenter");
+                break;
+            case "alignRight":
+                document.execCommand("justifyRight");
+                break;
+            case "alignJustify":
+                document.execCommand("justifyFull");
+                break;
+            case "indent":
+                document.execCommand("indent");
+                break;
+            case "outdent":
+                document.execCommand("outdent");
+                break;
+            case "highlight":
+                this.toggleHighlight();
+                break;
+            case "horizontalRule":
+                document.execCommand("insertHorizontalRule");
+                break;
+            case "codeView":
+                this.toggleCodeView();
+                break;
+            case "link": {
+                const url = window.prompt("Enter a URL", "https://");
+                if (url) {
+                    document.execCommand("createLink", false, url);
+                }
+                break;
+            }
+            case "insertImage": {
+                const url = window.prompt("Image URL", "https://");
+                if (url) {
+                    document.execCommand("insertImage", false, url);
+                }
+                break;
+            }
+            case "clear":
+                document.execCommand("selectAll");
+                document.execCommand("removeFormat");
+                document.execCommand("delete");
+                break;
+            default:
+                break;
+        }
+        this.handleChange();
+        this.syncToolbarState();
+    }
+    toggleCodeView() {
+        if (!this.editorElement || !this.sourceElement)
+            return;
+        this.codeView = !this.codeView;
+        if (this.codeView) {
+            this.sourceElement.value = this.editorElement.innerHTML;
+            this.editorElement.hidden = true;
+            this.sourceElement.hidden = false;
+            this.sourceElement.focus();
+        }
+        else {
+            this.editorElement.innerHTML = this.sourceElement.value;
+            this.sourceElement.hidden = true;
+            this.editorElement.hidden = false;
+            this.handleChange();
+        }
+        const codeBtn = this.toolbarButtons.get("codeView");
+        if (codeBtn) {
+            codeBtn.classList.toggle("is-active", this.codeView);
+            codeBtn.setAttribute("aria-pressed", String(this.codeView));
+        }
+    }
+    applyFont(font) {
+        document.execCommand("fontName", false, font);
+    }
+    applyFontSize(size) {
+        document.execCommand("styleWithCSS", false, "true");
+        document.execCommand("fontSize", false, "4");
+        const selection = document.getSelection();
+        if (selection?.focusNode && selection.rangeCount > 0) {
+            const span = selection.anchorNode?.parentElement;
+            if (span) {
+                span.style.fontSize = size;
+            }
+        }
+    }
+    toggleHighlight() {
+        const color = this.options.highlightColor ?? DEFAULT_HIGHLIGHT_COLOR;
+        document.execCommand("hiliteColor", false, color);
+        document.execCommand("backColor", false, color);
+    }
+    handleChange() {
+        const meta = this.computeMeta();
+        this.updateFooter(meta);
+        this.updatePlaceholderState();
+        this.options.onChange?.(this.getContent(), meta);
+    }
+    computeMeta() {
+        const textContent = this.editorElement?.innerText ?? "";
+        const trimmed = textContent.trim();
+        const characters = trimmed.length;
+        const words = trimmed ? trimmed.split(/\s+/u).length : 0;
+        const wpm = this.options.wordsPerMinute ?? DEFAULT_WORDS_PER_MINUTE;
+        const readingTimeSeconds = words === 0 ? 0 : Math.max(60, Math.round((words / wpm) * 60));
+        return { characters, words, readingTimeSeconds };
+    }
+    updateFooter(meta) {
+        if (!this.footerElement) {
+            return;
+        }
+        const stats = meta ?? this.computeMeta();
+        const indicators = this.options.statusIndicators?.length ? this.options.statusIndicators : DEFAULT_STATUS;
+        const parts = [];
+        indicators.forEach((indicator) => {
+            switch (indicator) {
+                case "characters": {
+                    const maxLabel = this.options.maxLength ? `/${this.options.maxLength}` : "";
+                    parts.push(`${stats.characters}${maxLabel} chars`);
+                    break;
+                }
+                case "words":
+                    parts.push(`${stats.words} words`);
+                    break;
+                case "readingTime": {
+                    const minutes = stats.readingTimeSeconds === 0
+                        ? 0
+                        : Math.max(1, Math.round(stats.readingTimeSeconds / 60));
+                    parts.push(`${minutes} min read`);
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+        const prefix = this.options.footerText ? `${this.options.footerText}: ` : "";
+        this.footerElement.textContent = `${prefix}${parts.join(" · ")}`;
+        const hasLimit = typeof this.options.maxLength === "number";
+        this.footerElement.classList.toggle("is-warning", Boolean(hasLimit && stats.characters > (this.options.maxLength ?? 0)));
+    }
+    updatePlaceholderState() {
+        if (!this.editorElement) {
+            return;
+        }
+        const hasContent = Boolean(this.editorElement.textContent?.trim().length);
+        this.editorElement.classList.toggle("has-content", hasContent);
+    }
+    syncToolbarState() {
+        if (!this.editorElement || (!this.codeView && document.activeElement !== this.editorElement)) {
+            this.toolbarButtons.forEach((button) => {
+                button.classList.remove("is-active");
+                button.setAttribute("aria-pressed", "false");
+            });
+            return;
+        }
+        if (this.codeView) {
+            const codeBtn = this.toolbarButtons.get("codeView");
+            if (codeBtn) {
+                codeBtn.classList.add("is-active");
+                codeBtn.setAttribute("aria-pressed", "true");
+            }
+            return;
+        }
+        this.toolbarButtons.forEach((button, action) => {
+            const command = COMMAND_STATE_MAP[action];
+            let isActive = false;
+            if (command) {
+                isActive = Boolean(document.queryCommandState(command));
+            }
+            else if (BLOCK_TAG_MAP[action]) {
+                isActive = this.selectionHasTag(BLOCK_TAG_MAP[action]);
+            }
+            button.classList.toggle("is-active", isActive);
+            button.setAttribute("aria-pressed", String(isActive));
+        });
+    }
+    selectionHasTag(tagName) {
+        if (!this.editorElement) {
+            return false;
+        }
+        const selection = document.getSelection();
+        if (!selection?.focusNode) {
+            return false;
+        }
+        let node = selection.focusNode;
+        if (node.nodeType === Node.TEXT_NODE) {
+            node = node.parentElement;
+        }
+        while (node && node instanceof HTMLElement && node !== this.editorElement) {
+            if (node.tagName === tagName) {
+                return true;
+            }
+            node = node.parentElement;
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=Editor.js.map