@fusion.dev/helix-headless 0.219.0 → 0.221.0

package/dist/editor/root/editor-root.js

@@ -0,0 +1,860 @@
+import { __decorate } from "tslib";
+import { auditName, customElement, drawIcon, formatWords, HelixElement, MIRROR_RULE, onApple, stopPress, words, } from '@fusion.dev/helix-core';
+import { arrowClockwise, arrowCounterClockwise, caretDown, check, code, link, linkBreak, listBullets, listNumbers, magnifyingGlass, quotes, textB, textItalic, textStrikethrough, x, } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { html } from 'lit/static-html.js';
+import '../../button/index.js';
+import '../../divider/index.js';
+import '../../find/index.js';
+import '../../icon-button/index.js';
+import '../../menu/index.js';
+import '../../toolbar/index.js';
+export const EDITOR_BLOCKS = [
+    'paragraph',
+    'heading-1',
+    'heading-2',
+    'heading-3',
+    'code-block',
+];
+const GROUPS = [
+    ['history', ['undo', 'redo']],
+    ['block', EDITOR_BLOCKS],
+    ['marks', ['bold', 'italic', 'strike', 'code']],
+    ['link', ['link']],
+    ['lists', ['bullet-list', 'ordered-list']],
+    ['quote', ['quote']],
+];
+const RESTING_TOOLS = 'history block marks link lists quote';
+const SHORTCUTS = {
+    'code-block': 'mod+alt+8',
+    'heading-1': 'mod+alt+1',
+    'heading-2': 'mod+alt+2',
+    'heading-3': 'mod+alt+3',
+    paragraph: 'mod+alt+0',
+};
+const TOOL_PARTS = [
+    'undo',
+    'redo',
+    'block',
+    'bold',
+    'italic',
+    'strike',
+    'code',
+    'link',
+    'bullet-list',
+    'ordered-list',
+    'quote',
+    'find-toggle',
+]
+    .map((name) => `[part~="${name}"]`)
+    .join(', ');
+const NO_FORMATS = { applied: [], block: '', link: '', unavailable: [] };
+const commandWith = (event, key) => event.key.toLowerCase() === key &&
+    !event.altKey &&
+    !event.shiftKey &&
+    (onApple() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey);
+let HelixHeadlessEditor = class HelixHeadlessEditor extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.blockChosenLabel = 'Text style: {name}';
+        this.blockLabel = 'Text style';
+        this.boldLabel = 'Bold';
+        this.bulletListLabel = 'Bulleted list';
+        this.codeBlockLabel = 'Code block';
+        this.codeLabel = 'Code';
+        this.controlsLabel = 'Formatting';
+        this.fallbackLabel = 'Editor';
+        this.findLabel = 'Find';
+        this.headingLabel = 'Heading {level}';
+        this.italicLabel = 'Italic';
+        this.label = '';
+        this.linkApplyLabel = 'Apply link';
+        this.linkCloseLabel = 'Close';
+        this.linkControlsLabel = 'Link controls';
+        this.linkFieldLabel = 'Address';
+        this.linkLabel = 'Link';
+        this.linkRemoveLabel = 'Remove link';
+        this.orderedListLabel = 'Numbered list';
+        this.paragraphLabel = 'Paragraph';
+        this.placeholder = '';
+        this.quoteLabel = 'Quote';
+        this.readOnly = false;
+        this.redoLabel = 'Redo';
+        this.strikeLabel = 'Strikethrough';
+        this.undoLabel = 'Undo';
+        this.formats = NO_FORMATS;
+        this.renderer = undefined;
+        this.linkOpen = false;
+        this.draft = '';
+        this.findOpen = false;
+        this.hasActions = false;
+        this.escaped = false;
+        this.chosen = false;
+        this.handleLinkInput = (event) => {
+            this.draft = event.target.value;
+        };
+        this.handleLinkKeys = (event) => {
+            if (event.isComposing) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.applyLink();
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeLink();
+            }
+        };
+        this.handleToolbarKeys = (event) => {
+            if (event.key === 'Escape' && !event.defaultPrevented && !event.isComposing) {
+                event.preventDefault();
+                this.returnFocus();
+            }
+        };
+        this.handleFindToggle = (event) => {
+            this.findOpen = event.newState === 'open';
+        };
+        this.handleKeys = (event) => {
+            if (event.isComposing || !this.fromDocument(event)) {
+                return;
+            }
+            if (event.key === 'Tab' && this.escaped && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                this.escaped = false;
+                event.stopPropagation();
+                return;
+            }
+            this.escaped = event.key === 'Escape';
+            if (commandWith(event, 'f') && this.searches && this.find) {
+                event.preventDefault();
+                event.stopPropagation();
+                void this.openFind();
+            }
+            else if (commandWith(event, 'k') && this.drawsAny && this.draws('link')) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.openLink();
+            }
+            else if (event.key === 'F10' &&
+                event.altKey &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                this.drawsAny) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusToolbar();
+            }
+        };
+        this.handleFocusIn = (event) => {
+            this.toggleState('document-focused', this.fromDocument(event));
+        };
+        this.handleFocusOut = () => {
+            this.toggleState('document-focused', false);
+        };
+        this.handleActions = () => {
+            this.requestUpdate();
+        };
+        this.keepTick = (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.handleMenuToggle = (event) => {
+            if (event.newState === 'closed' && this.chosen) {
+                this.chosen = false;
+                this.returnFocus();
+            }
+        };
+    }
+    static { this.markRules = [MIRROR_RULE]; }
+    static { this.words = 'helix-editor'; }
+    attach(renderer) {
+        this.renderer = renderer;
+        this.formats = NO_FORMATS;
+        renderer.settings?.(this.settings);
+        this.toggleState('connected', true);
+        const current = () => this.renderer === renderer;
+        return {
+            detach: () => {
+                if (current()) {
+                    this.renderer = undefined;
+                    this.formats = NO_FORMATS;
+                    this.linkOpen = false;
+                    this.toggleState('connected', false);
+                }
+            },
+            formats: (formats) => {
+                if (current()) {
+                    this.formats = formats;
+                }
+            },
+            found: (result) => {
+                if (current()) {
+                    this.find?.sink.found(result);
+                }
+            },
+        };
+    }
+    run(tool, value) {
+        if (!this.renderer || this.readOnly) {
+            return false;
+        }
+        return this.renderer.run(tool, value);
+    }
+    focus(options) {
+        if (this.renderer?.focus) {
+            this.renderer.focus();
+            return;
+        }
+        super.focus(options);
+    }
+    get settings() {
+        return {
+            label: this.label || this.getAttribute('aria-label') || this.fallbackLabel,
+            placeholder: this.placeholder,
+            readOnly: this.readOnly,
+        };
+    }
+    get groups() {
+        return new Set((this.tools ?? RESTING_TOOLS).split(/\s+/).filter(Boolean));
+    }
+    draws(tool) {
+        const group = GROUPS.find(([, tools]) => tools.includes(tool));
+        if (!group || !this.groups.has(group[0])) {
+            return false;
+        }
+        const runs = this.renderer?.tools?.();
+        return runs === undefined || runs.includes(tool);
+    }
+    get drawsAny() {
+        return (!this.readOnly &&
+            (this.drawsFind || GROUPS.some(([, tools]) => tools.some((tool) => this.draws(tool)))));
+    }
+    get searches() {
+        return this.renderer === undefined || this.renderer.find !== undefined;
+    }
+    get drawsFind() {
+        return this.groups.has('find') && this.searches;
+    }
+    disabled(tool) {
+        return !this.renderer || this.formats.unavailable.includes(tool);
+    }
+    nameOf(tool) {
+        switch (tool) {
+            case 'bold':
+                return this.boldLabel;
+            case 'bullet-list':
+                return this.bulletListLabel;
+            case 'code':
+                return this.codeLabel;
+            case 'code-block':
+                return this.codeBlockLabel;
+            case 'heading-1':
+            case 'heading-2':
+            case 'heading-3':
+                return formatWords(this, 'headingLabel', { level: Number(tool.slice(-1)) });
+            case 'italic':
+                return this.italicLabel;
+            case 'link':
+                return this.linkLabel;
+            case 'ordered-list':
+                return this.orderedListLabel;
+            case 'paragraph':
+                return this.paragraphLabel;
+            case 'quote':
+                return this.quoteLabel;
+            case 'redo':
+                return this.redoLabel;
+            case 'strike':
+                return this.strikeLabel;
+            case 'undo':
+                return this.undoLabel;
+        }
+    }
+    returnFocus() {
+        this.renderer?.focus?.();
+    }
+    press(tool) {
+        if (this.disabled(tool)) {
+            return;
+        }
+        this.run(tool);
+        this.returnFocus();
+    }
+    openLink() {
+        if (this.readOnly || !this.renderer || !this.draws('link') || this.disabled('link')) {
+            return;
+        }
+        this.draft = this.formats.link;
+        this.linkOpen = true;
+        void this.updateComplete.then(() => {
+            const field = this.partNamed('link-field');
+            field?.focus();
+            field?.select();
+        });
+    }
+    closeLink() {
+        this.linkOpen = false;
+        this.returnFocus();
+    }
+    applyLink() {
+        this.run('link', this.draft.trim());
+        this.closeLink();
+    }
+    removeLink() {
+        this.run('link', '');
+        this.closeLink();
+    }
+    focusToolbar() {
+        const tools = [...this.renderRoot.querySelectorAll(TOOL_PARTS)].filter((one) => !one.hasAttribute('disabled'));
+        const stop = tools.find((one) => one.shadowRoot?.querySelector('[tabindex="0"]')) ?? tools[0];
+        stop?.focus();
+    }
+    async openFind() {
+        const find = this.find?.element;
+        if (!find) {
+            return;
+        }
+        this.findOpen = true;
+        await this.updateComplete;
+        await find.show();
+        this.findOpen = find.open;
+    }
+    attachFind() {
+        const element = this.partNamed('find') ?? undefined;
+        const renderer = this.renderer;
+        if (element === this.find?.element && renderer === this.find?.renderer) {
+            return;
+        }
+        this.find?.sink.detach();
+        this.find =
+            element && renderer
+                ? { element, renderer, sink: element.attach(this.finderFor(renderer)) }
+                : undefined;
+    }
+    finderFor(renderer) {
+        return {
+            end: () => renderer.findEnd?.(),
+            find: (query, direction) => renderer.find?.(query, direction),
+            ...(renderer.replace
+                ? { replace: (query, all) => renderer.replace?.(query, all) }
+                : {}),
+        };
+    }
+    fromDocument(event) {
+        const origin = event.composedPath()[0];
+        return (origin instanceof Node &&
+            [...this.children].some((child) => child.slot === '' && child.contains(origin)));
+    }
+    choose(tool) {
+        this.run(tool);
+        this.chosen = true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeys, { capture: true });
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeys, { capture: true });
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+        auditName(this, () => null, 'editor', () => this.label !== '');
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.renderer &&
+            (changed.has('label') ||
+                changed.has('placeholder') ||
+                changed.has('readOnly') ||
+                changed.has('fallbackLabel'))) {
+            this.renderer.settings?.(this.settings);
+        }
+        if (changed.has('readOnly') && this.readOnly) {
+            this.linkOpen = false;
+        }
+        this.attachFind();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.hasActions = this.knownChildren.some((child) => child.getAttribute('slot') === 'actions');
+        this.toggleState('link-open', this.linkOpen);
+        this.toggleState('find-open', this.findOpen);
+    }
+    get blockEmphasis() {
+        return undefined;
+    }
+    pressed(tool) {
+        return this.formats.applied.includes(tool);
+    }
+    renderPointing(glyph) {
+        return html `<svg aria-hidden="true" data-glyph data-mirror fill="currentColor" viewBox=${glyph.viewBox}>
+      ${unsafeSVG(glyph.content)}
+    </svg>`;
+    }
+    renderHistory() {
+        if (!this.draws('undo') && !this.draws('redo')) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<div part="tools">${this.draws('undo')
+            ? html `<${button}
+            part="undo"
+            exportparts="button: undo-button, live: undo-live, spinner: undo-spinner, text: undo-text"
+            ?disabled=${this.disabled('undo')}
+            label=${this.undoLabel}
+            @click=${() => this.press('undo')}
+            @helix-press=${stopPress}
+          >
+            <slot name="undo-icon">${this.renderPointing(arrowCounterClockwise)}</slot>
+          </${button}>`
+            : nothing}${this.draws('redo')
+            ? html `<${button}
+            part="redo"
+            exportparts="button: redo-button, live: redo-live, spinner: redo-spinner, text: redo-text"
+            ?disabled=${this.disabled('redo')}
+            label=${this.redoLabel}
+            @click=${() => this.press('redo')}
+            @helix-press=${stopPress}
+          >
+            <slot name="redo-icon">${this.renderPointing(arrowClockwise)}</slot>
+          </${button}>`
+            : nothing}</div>`;
+    }
+    renderMarks() {
+        if (!['bold', 'italic', 'strike', 'code'].some((tool) => this.draws(tool))) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<div part="tools">${this.draws('bold')
+            ? html `<${button}
+            part="bold${this.pressed('bold') ? ' bold-pressed' : ''}"
+            exportparts="button: bold-button, live: bold-live, spinner: bold-spinner, text: bold-text"
+            aria-pressed=${this.pressed('bold') ? 'true' : 'false'}
+            ?disabled=${this.disabled('bold')}
+            label=${this.boldLabel}
+            @click=${() => this.press('bold')}
+            @helix-press=${stopPress}
+          >
+            <slot name="bold-icon">${drawIcon(textB)}</slot>
+          </${button}>`
+            : nothing}${this.draws('italic')
+            ? html `<${button}
+            part="italic${this.pressed('italic') ? ' italic-pressed' : ''}"
+            exportparts="button: italic-button, live: italic-live, spinner: italic-spinner, text: italic-text"
+            aria-pressed=${this.pressed('italic') ? 'true' : 'false'}
+            ?disabled=${this.disabled('italic')}
+            label=${this.italicLabel}
+            @click=${() => this.press('italic')}
+            @helix-press=${stopPress}
+          >
+            <slot name="italic-icon">${drawIcon(textItalic)}</slot>
+          </${button}>`
+            : nothing}${this.draws('strike')
+            ? html `<${button}
+            part="strike${this.pressed('strike') ? ' strike-pressed' : ''}"
+            exportparts="button: strike-button, live: strike-live, spinner: strike-spinner, text: strike-text"
+            aria-pressed=${this.pressed('strike') ? 'true' : 'false'}
+            ?disabled=${this.disabled('strike')}
+            label=${this.strikeLabel}
+            @click=${() => this.press('strike')}
+            @helix-press=${stopPress}
+          >
+            <slot name="strike-icon">${drawIcon(textStrikethrough)}</slot>
+          </${button}>`
+            : nothing}${this.draws('code')
+            ? html `<${button}
+            part="code${this.pressed('code') ? ' code-pressed' : ''}"
+            exportparts="button: code-button, live: code-live, spinner: code-spinner, text: code-text"
+            aria-pressed=${this.pressed('code') ? 'true' : 'false'}
+            ?disabled=${this.disabled('code')}
+            label=${this.codeLabel}
+            @click=${() => this.press('code')}
+            @helix-press=${stopPress}
+          >
+            <slot name="code-icon">${drawIcon(code)}</slot>
+          </${button}>`
+            : nothing}</div>`;
+    }
+    renderLinkTool() {
+        if (!this.draws('link')) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        const linked = this.formats.link !== '';
+        return html `<${button}
+      part="link${linked ? ' link-pressed' : ''}"
+      exportparts="button: link-button, live: link-live, spinner: link-spinner, text: link-text"
+      aria-pressed=${linked ? 'true' : 'false'}
+      .expanded=${this.linkOpen}
+      ?disabled=${this.disabled('link')}
+      label=${this.linkLabel}
+      @click=${() => (this.linkOpen ? this.closeLink() : this.openLink())}
+      @helix-press=${stopPress}
+    >
+      <slot name="link-icon">${drawIcon(link)}</slot>
+    </${button}>`;
+    }
+    renderLists() {
+        if (!this.draws('bullet-list') && !this.draws('ordered-list')) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `${this.draws('bullet-list')
+            ? html `<${button}
+            part="bullet-list${this.pressed('bullet-list') ? ' bullet-list-pressed' : ''}"
+            exportparts="button: bullet-list-button, live: bullet-list-live, spinner: bullet-list-spinner, text: bullet-list-text"
+            aria-pressed=${this.pressed('bullet-list') ? 'true' : 'false'}
+            ?disabled=${this.disabled('bullet-list')}
+            label=${this.bulletListLabel}
+            @click=${() => this.press('bullet-list')}
+            @helix-press=${stopPress}
+          >
+            <slot name="bullet-list-icon">${drawIcon(listBullets)}</slot>
+          </${button}>`
+            : nothing}${this.draws('ordered-list')
+            ? html `<${button}
+            part="ordered-list${this.pressed('ordered-list') ? ' ordered-list-pressed' : ''}"
+            exportparts="button: ordered-list-button, live: ordered-list-live, spinner: ordered-list-spinner, text: ordered-list-text"
+            aria-pressed=${this.pressed('ordered-list') ? 'true' : 'false'}
+            ?disabled=${this.disabled('ordered-list')}
+            label=${this.orderedListLabel}
+            @click=${() => this.press('ordered-list')}
+            @helix-press=${stopPress}
+          >
+            <slot name="ordered-list-icon">${drawIcon(listNumbers)}</slot>
+          </${button}>`
+            : nothing}`;
+    }
+    renderBlocks() {
+        const lists = this.renderLists();
+        const quote = this.renderQuote();
+        return lists === nothing && quote === nothing
+            ? nothing
+            : html `<div part="tools">${lists}${quote}</div>`;
+    }
+    renderQuote() {
+        if (!this.draws('quote')) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<${button}
+      part="quote${this.pressed('quote') ? ' quote-pressed' : ''}"
+      exportparts="button: quote-button, live: quote-live, spinner: quote-spinner, text: quote-text"
+      aria-pressed=${this.pressed('quote') ? 'true' : 'false'}
+      ?disabled=${this.disabled('quote')}
+      label=${this.quoteLabel}
+      @click=${() => this.press('quote')}
+      @helix-press=${stopPress}
+    >
+      <slot name="quote-icon">${drawIcon(quotes)}</slot>
+    </${button}>`;
+    }
+    renderBlockMenu() {
+        const blocks = EDITOR_BLOCKS.filter((tool) => this.draws(tool));
+        if (blocks.length === 0) {
+            return nothing;
+        }
+        const menu = this.tag('menu');
+        const item = this.tag('menu-item');
+        const button = this.tag('button');
+        const current = this.formats.block;
+        const shown = current === '' ? 'paragraph' : current;
+        return html `<${menu}
+      part="block-menu"
+      exportparts="back: block-menu-back, back-mark: block-menu-back-mark, empty: block-menu-empty,
+        header: block-menu-header, live: block-menu-live, loading: block-menu-loading,
+        search-field: block-menu-search-field, surface: block-menu-surface,
+        title: block-menu-title"
+      label=${this.blockLabel}
+      @toggle=${this.handleMenuToggle}
+    >
+      <${button}
+        part="block"
+        exportparts="button: block-button, live: block-live, spinner: block-spinner, text: block-text"
+        slot="trigger"
+        ?disabled=${!this.renderer || blocks.every((tool) => this.disabled(tool))}
+        emphasis=${this.blockEmphasis ?? nothing}
+        label=${formatWords(this, 'blockChosenLabel', { name: this.nameOf(shown) })}
+        @helix-press=${stopPress}
+      >
+        <span part="block-name">
+          ${blocks.map((tool) => html `<span data-block=${tool} ?hidden=${tool !== shown}>${this.nameOf(tool)}</span>`)}
+        </span>
+        ${drawIcon(caretDown, { slot: 'end' })}
+      </${button}>
+      ${blocks.map((tool) => html `<${item}
+          part="block-option"
+          exportparts="end: block-option-end, item: block-option-item, mark: block-option-mark,
+            shortcut: block-option-shortcut, shortcut-kbd: block-option-shortcut-kbd,
+            shortcut-key: block-option-shortcut-key, shortcut-separator: block-option-shortcut-separator,
+            start: block-option-start, surface: block-option-surface"
+          value=${tool}
+          checkable
+          exclusive
+          ?checked=${tool === current}
+          ?disabled=${this.disabled(tool)}
+          shortcut=${SHORTCUTS[tool] ?? nothing}
+          @helix-before-toggle=${this.keepTick}
+          @helix-select=${() => this.choose(tool)}
+        >
+          ${this.nameOf(tool)}
+        </${item}>`)}
+    </${menu}>`;
+    }
+    renderDivider() {
+        const divider = this.tag('divider');
+        return html `<${divider}
+      part="divider"
+      exportparts="content: divider-content, line: divider-line"
+      orientation="vertical"
+    ></${divider}>`;
+    }
+    renderFindTool() {
+        if (!this.drawsFind) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<${button}
+      part="find-toggle"
+      exportparts="button: find-toggle-button, live: find-toggle-live, spinner: find-toggle-spinner, text: find-toggle-text"
+      .expanded=${this.findOpen}
+      ?disabled=${!this.renderer}
+      label=${this.findLabel}
+      @click=${() => (this.findOpen ? this.find?.element.hide() : void this.openFind())}
+      @helix-press=${stopPress}
+    >
+      <slot name="find-icon">${drawIcon(magnifyingGlass)}</slot>
+    </${button}>`;
+    }
+    renderFind() {
+        if (!this.searches) {
+            return nothing;
+        }
+        const find = this.tag('find');
+        return html `<${find}
+      part="find"
+      exportparts="actions: find-actions, bar: find-bar, close: find-close, close-button: find-close-button, close-live: find-close-live, close-spinner: find-close-spinner, close-text: find-close-text, controls: find-controls, controls-toolbar: find-controls-toolbar, count: find-count, field: find-field, live: find-live, match-case: find-match-case, match-case-button: find-match-case-button, match-case-live: find-match-case-live, match-case-pressed: find-match-case-pressed, match-case-spinner: find-match-case-spinner, match-case-text: find-match-case-text, next: find-next, next-button: find-next-button, next-live: find-next-live, next-spinner: find-next-spinner, next-text: find-next-text, previous: find-previous, previous-button: find-previous-button, previous-live: find-previous-live, previous-spinner: find-previous-spinner, previous-text: find-previous-text, regex: find-regex, regex-button: find-regex-button, regex-live: find-regex-live, regex-pressed: find-regex-pressed, regex-spinner: find-regex-spinner, regex-text: find-regex-text, replace: find-replace, replace-all: find-replace-all, replace-all-button: find-replace-all-button, replace-all-live: find-replace-all-live, replace-all-spinner: find-replace-all-spinner, replace-all-text: find-replace-all-text, replace-button: find-replace-button, replace-field: find-replace-field, replace-live: find-replace-live, replace-spinner: find-replace-spinner, replace-text: find-replace-text, replace-toggle: find-replace-toggle, replace-toggle-button: find-replace-toggle-button, replace-toggle-live: find-replace-toggle-live, replace-toggle-spinner: find-replace-toggle-spinner, replace-toggle-text: find-replace-toggle-text, whole-word: find-whole-word, whole-word-button: find-whole-word-button, whole-word-live: find-whole-word-live, whole-word-pressed: find-whole-word-pressed, whole-word-spinner: find-whole-word-spinner, whole-word-text: find-whole-word-text"
+      label=${this.findLabel}
+      ?readonly=${this.readOnly}
+      shortcut=""
+      @toggle=${this.handleFindToggle}
+    ></${find}>`;
+    }
+    renderControls() {
+        const toolbar = this.tag('toolbar');
+        const groups = this.readOnly
+            ? []
+            : [
+                this.renderHistory(),
+                this.renderBlockMenu(),
+                this.renderMarks(),
+                this.renderLinkTool(),
+                this.renderBlocks(),
+                this.renderFindTool(),
+            ].filter((group) => group !== nothing);
+        return html `<${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel} @keydown=${this.handleToolbarKeys}>
+      ${groups.map((group, at) => (at === 0 ? group : html `${this.renderDivider()}${group}`))}
+      <slot name="actions" part="actions" ?hidden=${!this.hasActions} @slotchange=${this.handleActions}></slot>
+    </${toolbar}>`;
+    }
+    renderLink() {
+        if (this.readOnly || !this.draws('link')) {
+            return nothing;
+        }
+        const toolbar = this.tag('toolbar');
+        const button = this.tag('icon-button');
+        return html `<div part="link-bar" role="group" aria-label=${this.linkLabel} ?hidden=${!this.linkOpen}>
+      <input
+        part="link-field"
+        aria-label=${this.linkFieldLabel}
+        autocapitalize="off"
+        autocomplete="url"
+        dir="ltr"
+        enterkeyhint="done"
+        placeholder=${this.linkFieldLabel}
+        spellcheck="false"
+        type="url"
+        .value=${live(this.draft)}
+        @input=${this.handleLinkInput}
+        @keydown=${this.handleLinkKeys}
+      />
+      <${toolbar} part="link-controls" exportparts="toolbar: link-controls-toolbar" label=${this.linkControlsLabel}>
+        <${button}
+          part="link-apply"
+          exportparts="button: link-apply-button, live: link-apply-live, spinner: link-apply-spinner, text: link-apply-text"
+          label=${this.linkApplyLabel}
+          @click=${() => this.applyLink()}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(check)}
+        </${button}>
+        <${button}
+          part="link-remove"
+          exportparts="button: link-remove-button, live: link-remove-live, spinner: link-remove-spinner, text: link-remove-text"
+          ?disabled=${this.formats.link === ''}
+          label=${this.linkRemoveLabel}
+          @click=${() => this.removeLink()}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(linkBreak)}
+        </${button}>
+        <${button}
+          part="link-close"
+          exportparts="button: link-close-button, live: link-close-live, spinner: link-close-spinner, text: link-close-text"
+          label=${this.linkCloseLabel}
+          @click=${() => this.closeLink()}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(x)}
+        </${button}>
+      </${toolbar}>
+    </div>`;
+    }
+    render() {
+        return html `<div
+      part="region"
+      role="group"
+      aria-label=${this.label || this.getAttribute('aria-label') || this.fallbackLabel}
+    >
+      <div part="header" ?hidden=${!this.drawsAny && !this.hasActions && !this.findOpen}>
+        ${this.renderControls()} ${this.renderLink()} ${this.renderFind()}
+      </div>
+      <div part="viewport"><slot></slot></div>
+      <slot name="footer" part="footer"></slot>
+    </div>`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'block-chosen-label' })
+], HelixHeadlessEditor.prototype, "blockChosenLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'block-label' })
+], HelixHeadlessEditor.prototype, "blockLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'bold-label' })
+], HelixHeadlessEditor.prototype, "boldLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'bullet-list-label' })
+], HelixHeadlessEditor.prototype, "bulletListLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'code-block-label' })
+], HelixHeadlessEditor.prototype, "codeBlockLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'code-label' })
+], HelixHeadlessEditor.prototype, "codeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessEditor.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessEditor.prototype, "fallbackLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-label' })
+], HelixHeadlessEditor.prototype, "findLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'heading-label' })
+], HelixHeadlessEditor.prototype, "headingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'italic-label' })
+], HelixHeadlessEditor.prototype, "italicLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessEditor.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-apply-label' })
+], HelixHeadlessEditor.prototype, "linkApplyLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-close-label' })
+], HelixHeadlessEditor.prototype, "linkCloseLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-controls-label' })
+], HelixHeadlessEditor.prototype, "linkControlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-field-label' })
+], HelixHeadlessEditor.prototype, "linkFieldLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-label' })
+], HelixHeadlessEditor.prototype, "linkLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'link-remove-label' })
+], HelixHeadlessEditor.prototype, "linkRemoveLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'ordered-list-label' })
+], HelixHeadlessEditor.prototype, "orderedListLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'paragraph-label' })
+], HelixHeadlessEditor.prototype, "paragraphLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessEditor.prototype, "placeholder", void 0);
+__decorate([
+    words,
+    property({ attribute: 'quote-label' })
+], HelixHeadlessEditor.prototype, "quoteLabel", void 0);
+__decorate([
+    property({ attribute: 'readonly', type: Boolean })
+], HelixHeadlessEditor.prototype, "readOnly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'redo-label' })
+], HelixHeadlessEditor.prototype, "redoLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'strike-label' })
+], HelixHeadlessEditor.prototype, "strikeLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessEditor.prototype, "tools", void 0);
+__decorate([
+    words,
+    property({ attribute: 'undo-label' })
+], HelixHeadlessEditor.prototype, "undoLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessEditor.prototype, "formats", void 0);
+__decorate([
+    state()
+], HelixHeadlessEditor.prototype, "renderer", void 0);
+__decorate([
+    state()
+], HelixHeadlessEditor.prototype, "linkOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessEditor.prototype, "draft", void 0);
+__decorate([
+    state()
+], HelixHeadlessEditor.prototype, "findOpen", void 0);
+HelixHeadlessEditor = __decorate([
+    customElement('helix-headless-editor')
+], HelixHeadlessEditor);
+export { HelixHeadlessEditor };