@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/inline-edit/rich.js

@@ -0,0 +1,1236 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, effect, flush, read, signal, untrack, write } from '@esportsplus/reactivity';
+import faces from '../button/faces.js';
+import { check as checked, copy as copied, cross } from '../button/icons.js';
+import checkbox from '../checkbox/index.js';
+import clipboard from '../clipboard/write.js';
+import input from '../input/index.js';
+import selectInput from '../select/index.js';
+import tooltip from '../tooltip/index.js';
+import { mac } from '../../shared/platform.js';
+import { observe } from '../../shared/resize.js';
+import { viewport } from '../../shared/viewport.js';
+import { active, check, clear, extent, kindAt, link, setKind, toggle, unformat } from './format.js';
+import history from './history.js';
+import { parse, serialize } from './markdown.js';
+import { caret, empty, insert, length, list, nest, order, paste, remove, slice, sort, split, styleAt, text } from './model.js';
+import { capture, elements, restore, target, written } from './selection.js';
+import status, { INLINE_EDIT_STATUS } from './status.js';
+import { INLINE_LINE_BREAKS, safe } from './utilities.js';
+import boldSvg from '@esportsplus/ui/svg/bold.svg';
+import checkSvg from '@esportsplus/ui/svg/check.svg';
+import clearSvg from '@esportsplus/ui/svg/clear-format.svg';
+import codeSvg from '@esportsplus/ui/svg/code.svg';
+import highlightSvg from '@esportsplus/ui/svg/highlight.svg';
+import italicSvg from '@esportsplus/ui/svg/italic.svg';
+import linkSvg from '@esportsplus/ui/svg/link.svg';
+import openSvg from '@esportsplus/ui/svg/external-link.svg';
+import pencilSvg from '@esportsplus/ui/svg/pencil.svg';
+import strikeSvg from '@esportsplus/ui/svg/strikethrough.svg';
+import unlinkSvg from '@esportsplus/ui/svg/unlink.svg';
+import '../button/scss/index.scss';
+import '../select/scss/index.scss';
+import './scss/index.scss';
+const template_1rmqqqz5 = template_u1.template(`<strong>`);
+const template_1rmqqqz8 = template_u1.template(`<code>`);
+const template_1rmqqqzb = template_u1.template(`<mark>`);
+const template_1rmqqqze = template_u1.template(`<em>`);
+const template_1rmqqqzh = template_u1.template(`<a>`);
+const template_1rmqqqzk = template_u1.template(`<s>`);
+const template_1rmqqqzn = template_u1.template(`<ul>`);
+const template_1rmqqqzq = template_u1.template(`<ol>`);
+const template_1rmqqqzt = template_u1.template(`<ul data-task>`);
+const template_1rmqqqzw = template_u1.template(`<!--$-->`);
+const template_1rmqqqzy = template_u1.template(`<br data-filler>`);
+const template_1rmqqqz10 = template_u1.template(`<li data-block>`);
+const template_1rmqqqz13 = template_u1.template(`<pre data-block>`);
+const template_1rmqqqz16 = template_u1.template(`<h1 data-block>`);
+const template_1rmqqqz19 = template_u1.template(`<h2 data-block>`);
+const template_1rmqqqz1c = template_u1.template(`<h3 data-block>`);
+const template_1rmqqqz1f = template_u1.template(`<blockquote data-block>`);
+const template_1rmqqqz1i = template_u1.template(`<li data-block><span class='inline-edit-task' contenteditable='false'>`);
+const template_1rmqqqz1m = template_u1.template(`<p data-block>`);
+const template_1rmqqqz1p = template_u1.template(`<button class='button button--feedback inline-edit-toolbar-button' type='button'>`);
+const template_1rmqqqz1s = template_u1.template(`<svg aria-hidden='true' class='inline-edit-toolbar-icon'><use />`);
+const template_1rmqqqz1u = template_u1.template(`<br>`);
+const template_1rmqqqz1w = template_u1.template(`<div class='inline-edit'><div class='inline-edit-editor' contenteditable='true' role='textbox'></div><div class='tooltip tooltip--context inline-edit-anchor'><div aria-label='Formatting' class='tooltip-content tooltip-content--context inline-edit-toolbar' role='toolbar'><div class='inline-edit-toolbar-format'><!--$--><!--$--><!--$--><!--$--></div></div></div><span aria-hidden='true' class='inline-edit-icon'><svg class='inline-edit-icon-pencil'><use /></svg><svg class='inline-edit-icon-check'><use /></svg></span><span aria-live='polite' class='inline-edit-label'>`);
+const template_1rmqqqz2a = template_u1.template(`<!--$--><!--$-->`);
+const template_1rmqqqz2d = template_u1.template(`<span aria-hidden='true' class='inline-edit-toolbar-divider'>`);
+const template_1rmqqqz2f = template_u1.template(`<div class='inline-edit-toolbar-link'><!--$--><button aria-label='Apply link' class='button button--feedback inline-edit-toolbar-button' type='button'></button><button aria-label='Open link in a new tab' class='button button--feedback inline-edit-toolbar-button' type='button'></button><button aria-label='Remove link' class='button button--feedback inline-edit-toolbar-button inline-edit-toolbar-unlink' type='button'>`);
+class ReactiveObject_1rmqqqz0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    #selected = this[reactivity_u0.SIGNAL]('paragraph');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v2) {
+        reactivity_u0.write(this.#selected, _v2);
+    }
+}
+class ReactiveObject_1rmqqqz1 extends reactivity_u0.ReactiveObject {
+    #existing = this[reactivity_u0.SIGNAL](false);
+    #invalid = this[reactivity_u0.SIGNAL](false);
+    #url = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get existing() {
+        return reactivity_u0.read(this.#existing);
+    }
+    set existing(_v0) {
+        reactivity_u0.write(this.#existing, _v0);
+    }
+    get invalid() {
+        return reactivity_u0.read(this.#invalid);
+    }
+    set invalid(_v1) {
+        reactivity_u0.write(this.#invalid, _v1);
+    }
+    get url() {
+        return reactivity_u0.read(this.#url);
+    }
+    set url(_v2) {
+        reactivity_u0.write(this.#url, _v2);
+    }
+}
+class ReactiveObject_1rmqqqz2 extends reactivity_u0.ReactiveObject {
+    #copied;
+    #focus = this[reactivity_u0.SIGNAL](0);
+    #live = this[reactivity_u0.SIGNAL]('');
+    constructor(_p0) {
+        super(null);
+        this.#copied = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get copied() {
+        return reactivity_u0.read(this.#copied);
+    }
+    set copied(_v0) {
+        reactivity_u0.write(this.#copied, _v0);
+    }
+    get focus() {
+        return reactivity_u0.read(this.#focus);
+    }
+    set focus(_v1) {
+        reactivity_u0.write(this.#focus, _v1);
+    }
+    get live() {
+        return reactivity_u0.read(this.#live);
+    }
+    set live(_v2) {
+        reactivity_u0.write(this.#live, _v2);
+    }
+}
+class ReactiveObject_1rmqqqz3 extends reactivity_u0.ReactiveObject {
+    #instant = this[reactivity_u0.SIGNAL](false);
+    #link = this[reactivity_u0.SIGNAL](false);
+    #open = this[reactivity_u0.SIGNAL](false);
+    #origin = this[reactivity_u0.SIGNAL]('');
+    #x = this[reactivity_u0.SIGNAL](0);
+    #y = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get instant() {
+        return reactivity_u0.read(this.#instant);
+    }
+    set instant(_v0) {
+        reactivity_u0.write(this.#instant, _v0);
+    }
+    get link() {
+        return reactivity_u0.read(this.#link);
+    }
+    set link(_v1) {
+        reactivity_u0.write(this.#link, _v1);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v2) {
+        reactivity_u0.write(this.#open, _v2);
+    }
+    get origin() {
+        return reactivity_u0.read(this.#origin);
+    }
+    set origin(_v3) {
+        reactivity_u0.write(this.#origin, _v3);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v4) {
+        reactivity_u0.write(this.#x, _v4);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v5) {
+        reactivity_u0.write(this.#y, _v5);
+    }
+}
+const URL_SCHEME = /^[a-z][a-z\d+.-]*:/i;
+const RELATIVE_URL = /^[/#?]/;
+const EMAIL = /^[^\s/@]+@[^\s/@]+\.[^\s/@]+$/;
+const MAC_SHORTCUT = /(⇧?)(\w)$/;
+const ACTIONS = [
+    { action: 'bold', label: 'Bold', shortcut: 'B' },
+    { action: 'italic', label: 'Italic', shortcut: 'I' },
+    { action: 'strike', label: 'Strikethrough', shortcut: 'Shift+X' },
+    { action: 'code', label: 'Code', shortcut: 'E' },
+    { action: 'highlight', label: 'Highlight', shortcut: 'Shift+H' },
+    { action: 'link', label: 'Link', shortcut: 'K' },
+    { action: 'clear', label: 'Clear formatting' },
+    { action: 'copy', label: 'Copy as markdown' }
+];
+const BASE = ['bold', 'italic', 'link', 'copy'];
+const COPIED_FOR = 1400;
+const FORMATS = {
+    formatBold: 'bold',
+    formatItalic: 'italic',
+    formatStrikeThrough: 'strike'
+};
+const GAP = 8;
+const HINT = Symbol();
+const ICONS = {
+    apply: checkSvg,
+    bold: boldSvg,
+    clear: clearSvg,
+    code: codeSvg,
+    highlight: highlightSvg,
+    italic: italicSvg,
+    link: linkSvg,
+    open: openSvg,
+    strike: strikeSvg,
+    unlink: unlinkSvg
+};
+const INLINE_EDIT_RICH_EDITOR = Symbol.for('@esportsplus/ui/inline-edit.rich.editor');
+const INLINE_EDIT_RICH_TOOLBAR = Symbol.for('@esportsplus/ui/inline-edit.rich.toolbar');
+const KINDS = [
+    { label: 'Text', value: 'paragraph' },
+    { feature: 'heading', label: 'Heading 1', value: 'h1' },
+    { feature: 'heading', label: 'Heading 2', value: 'h2' },
+    { feature: 'heading', label: 'Heading 3', value: 'h3' },
+    { feature: 'quote', label: 'Quote', value: 'quote' },
+    { feature: 'codeblock', label: 'Code block', value: 'codeblock' },
+    { feature: 'bullet', label: 'Bulleted list', value: 'bullet' },
+    { feature: 'ordered', label: 'Numbered list', value: 'ordered' },
+    { feature: 'task', label: 'Checklist', value: 'task' }
+];
+const TOOLTIP_DELAY = 700;
+function address(value) {
+    let href = value.trim();
+    if (href && !URL_SCHEME.test(href) && !RELATIVE_URL.test(href)) {
+        href = (EMAIL.test(href) ? 'mailto:' : 'https://') + href;
+    }
+    return href && safe(href) ? href : '';
+}
+function around(doc, pos, type) {
+    let backward = type.includes('Backward'), value = text(doc[pos.block].runs), to;
+    if (backward && pos.offset === 0) {
+        return pos.block > 0 ? { end: pos, start: { block: pos.block - 1, offset: length(doc[pos.block - 1].runs) } } : null;
+    }
+    if (!backward && pos.offset === value.length) {
+        return pos.block < doc.length - 1 ? { end: { block: pos.block + 1, offset: 0 }, start: pos } : null;
+    }
+    if (type.includes('Line')) {
+        let edge = backward ? value.lastIndexOf('\n', pos.offset - 1) + 1 : value.indexOf('\n', pos.offset);
+        if (edge < 0) {
+            edge = value.length;
+        }
+        to = edge === pos.offset ? pos.offset + (backward ? -1 : 1) : edge;
+    }
+    else {
+        to = boundary(value, pos.offset, backward, type.includes('Word') ? 'word' : 'grapheme');
+    }
+    let other = { block: pos.block, offset: to };
+    return backward ? { end: pos, start: other } : { end: other, start: pos };
+}
+function boundary(value, offset, backward, granularity) {
+    let edge = backward ? 0 : value.length;
+    for (let { index, isWordLike, segment } of new Intl.Segmenter(undefined, { granularity }).segment(value)) {
+        let counts = granularity === 'grapheme' || isWordLike;
+        if (backward && index < offset && counts) {
+            edge = index;
+        }
+        else if (!backward && index + segment.length > offset && counts) {
+            return Math.max(index + segment.length, offset + 1);
+        }
+    }
+    return edge;
+}
+function collapsed(span) {
+    return span.start.block === span.end.block && span.start.offset === span.end.offset;
+}
+function follows(view, next) {
+    if (view.block === next) {
+        return true;
+    }
+    if (view.block.key !== next.key || view.block.kind !== next.kind || view.block.runs !== next.runs) {
+        return false;
+    }
+    view.block = next;
+    write(view.checked, next.checked);
+    return true;
+}
+function hint(label, shortcut) {
+    if (!shortcut) {
+        return label;
+    }
+    return mac()
+        ? `${label} ${shortcut.replace('Shift+', '⇧')}`.replace(MAC_SHORTCUT, '$1⌘$2')
+        : `${label} Ctrl+${shortcut}`;
+}
+function icon(action) {
+    return (() => {
+        let root_1rmqqqz1r = template_1rmqqqz1s(), element_1rmqqqz1t = root_1rmqqqz1r.firstChild.firstElementChild;
+        template_u1.setProperty(element_1rmqqqz1t, 'href', template_u1.interpolate(["#", (ICONS[action])]));
+        return root_1rmqqqz1r;
+    })();
+}
+function inline(trees) {
+    return trees.map((tree) => {
+        if ('text' in tree) {
+            return lines(tree.text);
+        }
+        let children = inline(tree.children);
+        switch (tree.mark) {
+            case 'bold':
+                return (() => {
+                    let root_1rmqqqz4 = template_1rmqqqz5(), element_1rmqqqz6 = root_1rmqqqz4.firstChild;
+                    template_u1.slot(element_1rmqqqz6, children, 1);
+                    return root_1rmqqqz4;
+                })();
+            case 'code':
+                return (() => {
+                    let root_1rmqqqz7 = template_1rmqqqz8(), element_1rmqqqz9 = root_1rmqqqz7.firstChild;
+                    template_u1.slot(element_1rmqqqz9, children, 1);
+                    return root_1rmqqqz7;
+                })();
+            case 'highlight':
+                return (() => {
+                    let root_1rmqqqza = template_1rmqqqzb(), element_1rmqqqzc = root_1rmqqqza.firstChild;
+                    template_u1.slot(element_1rmqqqzc, children, 1);
+                    return root_1rmqqqza;
+                })();
+            case 'italic':
+                return (() => {
+                    let root_1rmqqqzd = template_1rmqqqze(), element_1rmqqqzf = root_1rmqqqzd.firstChild;
+                    template_u1.slot(element_1rmqqqzf, children, 1);
+                    return root_1rmqqqzd;
+                })();
+            case 'link':
+                return (() => {
+                    let root_1rmqqqzg = template_1rmqqqzh(), element_1rmqqqzi = root_1rmqqqzg.firstChild;
+                    template_u1.slot(element_1rmqqqzi, children, 1);
+                    template_u1.setProperty(element_1rmqqqzi, 'href', tree.href);
+                    return root_1rmqqqzg;
+                })();
+            default:
+                return (() => {
+                    let root_1rmqqqzj = template_1rmqqqzk(), element_1rmqqqzl = root_1rmqqqzj.firstChild;
+                    template_u1.slot(element_1rmqqqzl, children, 1);
+                    return root_1rmqqqzj;
+                })();
+        }
+    });
+}
+function lines(value) {
+    let out = [], parts = value.split('\n');
+    for (let i = 0, n = parts.length; i < n; i++) {
+        if (i > 0) {
+            out.push(template_1rmqqqz1u());
+        }
+        if (parts[i]) {
+            out.push(parts[i]);
+        }
+    }
+    return out;
+}
+function partition(doc) {
+    let out = [];
+    for (let i = 0, n = doc.length; i < n; i++) {
+        let kind = (list(doc[i].kind) ? doc[i].kind : 'block'), last = out[out.length - 1];
+        if (last && last.kind === kind) {
+            last.blocks.push(doc[i]);
+        }
+        else {
+            out.push({ blocks: [doc[i]], kind });
+        }
+    }
+    return out;
+}
+function shift(pos, { end, start }) {
+    if (pos.block < end.block || (pos.block === end.block && pos.offset <= end.offset)) {
+        return pos;
+    }
+    if (pos.block === end.block) {
+        return { block: start.block, offset: start.offset + pos.offset - end.offset };
+    }
+    return { block: pos.block - (end.block - start.block), offset: pos.offset };
+}
+function spans(a, b) {
+    return !!a
+        && a.start.block === b.start.block
+        && a.start.offset === b.start.offset
+        && a.end.block === b.end.block
+        && a.end.offset === b.end.offset;
+}
+function view(block) {
+    return { block, checked: signal(block.checked) };
+}
+export default component(function ({ features: whitelist = BASE, label, multiline = false, onsave, placeholder = '', status: indicator = false, value = '', state = reactivity_u0.reactive({ editing: false, saved: false, value }), ...attributes }) {
+    let features = new Set(multiline ? whitelist : whitelist.filter((feature) => !KINDS.some((k) => k.feature === feature))), actions = ACTIONS.filter(({ action }) => features.has(action)), block = new ReactiveObject_1rmqqqz0(), doc = signal(parse(state.value, features, multiline)), hyperlink = new ReactiveObject_1rmqqqz1(), keyshortcuts = actions
+        .flatMap(({ shortcut }) => shortcut ? ['Control', 'Meta'].map((mod) => `${mod}+${shortcut}`) : [])
+        .concat(multiline ? ['Control+Enter', 'Meta+Enter'] : [])
+        .join(' '), kinds = KINDS.filter((k) => !k.feature || features.has(k.feature)), local = new ReactiveObject_1rmqqqz2('idle'), marks = actions.filter(({ action }) => action !== 'clear' && action !== 'copy'), panel = new ReactiveObject_1rmqqqz3(), pressed = reactivity_u0.reactive(Object.fromEntries(marks.map(({ action }) => [action, false]))), pristine = signal(serialize(read(doc), features, multiline)), saving = status.saver(state, indicator, () => serialize(read(doc), features, multiline) !== read(pristine), onsave), sections = new ReactiveArray(partition(read(doc)).map(section)), slot = new template_u1.ArraySlot(sections, group), steps = history(), tip = tooltip.shared({ delay: { open: TOOLTIP_DELAY } });
+    let composing = null, copyTimer, dismissed = false, dragged = null, editor, frame = 0, items = [], keys, pressing = false, root, saved = null, selection = null, settling, shown = 'paragraph', toolbar, unobserve, url;
+    effect(() => {
+        let next = block.selected;
+        if (next !== shown) {
+            untrack(() => turn(next));
+        }
+    });
+    effect(() => state.value, (next, previous) => {
+        if (previous !== undefined && !state.editing && next !== read(pristine)) {
+            load(next);
+        }
+    });
+    function apply(href) {
+        let span = current();
+        if (!editor || !span) {
+            return;
+        }
+        if (href !== null) {
+            href = address(href);
+            if (!href) {
+                hyperlink.invalid = true;
+                return;
+            }
+        }
+        back();
+        change(link(read(doc), span, href), 'other');
+        local.live = href ? 'Link set' : 'Link removed';
+    }
+    function back() {
+        panel.link = false;
+        editor?.focus({ preventScroll: true });
+        let span = current();
+        if (span) {
+            select({ anchor: span.start, focus: span.end });
+            let range = live();
+            if (range) {
+                place(range);
+            }
+        }
+    }
+    function change(edit, kind) {
+        steps.push({ doc: read(doc), selection }, edit.selection, kind);
+        commit(edit.doc);
+        select(edit.selection);
+    }
+    function clip(e, cut) {
+        let range = live(), now = editor ? capture(editor) : null;
+        if (!range || range.collapsed || !now || !e.clipboardData) {
+            return;
+        }
+        let holder = document.createElement('div'), span = order(now);
+        holder.append(range.cloneContents());
+        e.preventDefault();
+        e.clipboardData.setData('text/html', holder.innerHTML);
+        e.clipboardData.setData('text/plain', serialize(excerpt(span), features, multiline));
+        if (cut) {
+            change(remove(read(doc), span), 'other');
+        }
+    }
+    function commit(next) {
+        write(doc, next);
+        let parts = partition(next), end = 0, m = parts.length, n = sections.$length, start = 0;
+        while (start < n && start < m && sections[start].kind === parts[start].kind) {
+            patch(sections[start].items, parts[start].blocks);
+            start++;
+        }
+        while (end < n - start && end < m - start && sections[n - 1 - end].kind === parts[m - 1 - end].kind) {
+            patch(sections[n - 1 - end].items, parts[m - 1 - end].blocks);
+            end++;
+        }
+        if (start + end < n || start + end < m) {
+            sections.splice(start, n - start - end, ...parts.slice(start, m - end).map(section));
+        }
+        slot.flush();
+        for (let i = 0, o = sections.$length; i < o; i++) {
+            sections[i].slot?.flush();
+        }
+        flush();
+    }
+    async function copy() {
+        let span = current();
+        if (!span) {
+            return;
+        }
+        clearTimeout(copyTimer);
+        local.copied = 'success';
+        local.live = 'Copied';
+        copyTimer = setTimeout(() => {
+            local.copied = 'idle';
+        }, COPIED_FOR);
+        if (!(await clipboard(serialize(excerpt(span), features, multiline)))) {
+            local.copied = 'error';
+            local.live = 'Couldn\'t copy';
+        }
+    }
+    function current() {
+        let blocks = read(doc);
+        if (!saved || collapsed(saved) || !blocks[saved.end.block]) {
+            return null;
+        }
+        return saved;
+    }
+    function dismiss() {
+        dismissed = true;
+        show(false);
+    }
+    function drop(e, at) {
+        let from = dragged;
+        dragged = null;
+        if (!from) {
+            land(at, e.dataTransfer?.getData('text/plain') ?? '');
+            return;
+        }
+        let pos = at.start, inside = (pos.block > from.start.block || (pos.block === from.start.block && pos.offset >= from.start.offset))
+            && (pos.block < from.end.block || (pos.block === from.end.block && pos.offset <= from.end.offset));
+        if (inside) {
+            return;
+        }
+        let moved = excerpt(from), rest = remove(read(doc), from).doc, to = shift(pos, from);
+        change(paste(rest, { end: to, start: to }, moved), 'other');
+    }
+    function edit(e) {
+        let type = e.inputType;
+        if (e.isComposing || type === 'insertCompositionText' || type === 'deleteCompositionText' || type === 'insertFromComposition') {
+            return;
+        }
+        e.preventDefault();
+        resolve();
+        if (!editor) {
+            return;
+        }
+        let now = capture(editor), range = e.getTargetRanges()[0], span = (range && target(editor, range)) || (now && order(now));
+        if (!span) {
+            return;
+        }
+        let format = FORMATS[type];
+        if (format) {
+            if (features.has(format) && !collapsed(span)) {
+                change(toggle(read(doc), span, format), 'other');
+            }
+            return;
+        }
+        switch (type) {
+            case 'deleteByDrag':
+                dragged = span;
+                return;
+            case 'formatRemove':
+                if (features.has('clear') && !collapsed(span)) {
+                    change(clear(read(doc), span), 'other');
+                }
+                return;
+            case 'historyRedo':
+                redo();
+                return;
+            case 'historyUndo':
+                undo();
+                return;
+            case 'insertFromDrop':
+                drop(e, span);
+                return;
+            case 'insertFromPaste':
+                land(span, e.dataTransfer?.getData('text/plain') ?? '');
+                return;
+            case 'insertLineBreak':
+            case 'insertParagraph':
+                if (!multiline) {
+                    finish(true, true);
+                }
+                else if (type === 'insertParagraph') {
+                    change(split(read(doc), span), 'other');
+                }
+                else {
+                    typed(span, '\n');
+                }
+                return;
+            case 'insertOrderedList':
+            case 'insertUnorderedList': {
+                let kind = type === 'insertOrderedList' ? 'ordered' : 'bullet';
+                if (features.has(kind)) {
+                    change(setKind(read(doc), span, kind), 'other');
+                }
+                return;
+            }
+        }
+        if (type.startsWith('insert')) {
+            typed(span, e.data ?? e.dataTransfer?.getData('text/plain') ?? '');
+        }
+        else if (type.startsWith('delete')) {
+            erase(type, span, now);
+        }
+    }
+    function erase(type, span, now) {
+        let blocks = read(doc), at = now && now.anchor.block === now.focus.block && now.anchor.offset === now.focus.offset ? now.focus : null;
+        if (type === 'deleteContentBackward' && at?.offset === 0) {
+            let next = unformat(blocks, at.block);
+            if (next) {
+                change(next, 'other');
+                return;
+            }
+        }
+        let reach = collapsed(span) && at ? around(blocks, at, type) : span;
+        if (reach && !collapsed(reach)) {
+            change(remove(blocks, reach), type === 'deleteByCut' ? 'other' : 'delete');
+        }
+    }
+    function excerpt(span) {
+        let part = slice(read(doc), span);
+        if (part.length === 1) {
+            part[0] = { ...part[0], checked: false, kind: 'paragraph' };
+        }
+        return part;
+    }
+    function finish(commit, keyboard) {
+        if (!editor || !state.editing) {
+            return;
+        }
+        resolve();
+        state.editing = false;
+        panel.link = false;
+        show(false);
+        if (commit) {
+            save();
+        }
+        load(state.value);
+        if (keyboard) {
+            editor.blur();
+        }
+    }
+    function focus(index) {
+        local.focus = (index + items.length) % items.length;
+        items[local.focus]?.focus();
+    }
+    function group(section) {
+        let slot = new template_u1.ArraySlot(section.items, item);
+        section.slot = slot;
+        switch (section.kind) {
+            case 'bullet':
+                return (() => {
+                    let root_1rmqqqzm = template_1rmqqqzn(), element_1rmqqqzo = root_1rmqqqzm.firstChild;
+                    template_u1.slot(element_1rmqqqzo, slot, 1);
+                    return root_1rmqqqzm;
+                })();
+            case 'ordered':
+                return (() => {
+                    let root_1rmqqqzp = template_1rmqqqzq(), element_1rmqqqzr = root_1rmqqqzp.firstChild;
+                    template_u1.slot(element_1rmqqqzr, slot, 1);
+                    return root_1rmqqqzp;
+                })();
+            case 'task':
+                return (() => {
+                    let root_1rmqqqzs = template_1rmqqqzt(), element_1rmqqqzu = root_1rmqqqzs.firstChild;
+                    template_u1.slot(element_1rmqqqzu, slot, 1);
+                    return root_1rmqqqzs;
+                })();
+            default:
+                return (() => {
+                    let root_1rmqqqzv = template_1rmqqqzw(), element_1rmqqqzx = root_1rmqqqzv.firstChild;
+                    template_u1.slot(element_1rmqqqzx, slot);
+                    return root_1rmqqqzv;
+                })();
+        }
+    }
+    function inspect(span) {
+        let blocks = read(doc);
+        for (let i = 0, n = marks.length; i < n; i++) {
+            let mark = marks[i].action;
+            pressed[mark] = active(blocks, span, mark);
+        }
+        shown = kindAt(blocks, span);
+        block.selected = shown;
+    }
+    function item(view) {
+        let { kind, runs } = view.block, characters = text(runs), body = [inline(nest(runs)), (!characters || characters.endsWith('\n')) && template_1rmqqqzy()];
+        switch (kind) {
+            case 'bullet':
+            case 'ordered':
+                return (() => {
+                    let root_1rmqqqzz = template_1rmqqqz10(), element_1rmqqqz11 = root_1rmqqqzz.firstChild;
+                    template_u1.slot(element_1rmqqqz11, body, 1);
+                    return root_1rmqqqzz;
+                })();
+            case 'codeblock':
+                return (() => {
+                    let root_1rmqqqz12 = template_1rmqqqz13(), element_1rmqqqz14 = root_1rmqqqz12.firstChild;
+                    template_u1.slot(element_1rmqqqz14, body, 1);
+                    return root_1rmqqqz12;
+                })();
+            case 'h1':
+                return (() => {
+                    let root_1rmqqqz15 = template_1rmqqqz16(), element_1rmqqqz17 = root_1rmqqqz15.firstChild;
+                    template_u1.slot(element_1rmqqqz17, body, 1);
+                    return root_1rmqqqz15;
+                })();
+            case 'h2':
+                return (() => {
+                    let root_1rmqqqz18 = template_1rmqqqz19(), element_1rmqqqz1a = root_1rmqqqz18.firstChild;
+                    template_u1.slot(element_1rmqqqz1a, body, 1);
+                    return root_1rmqqqz18;
+                })();
+            case 'h3':
+                return (() => {
+                    let root_1rmqqqz1b = template_1rmqqqz1c(), element_1rmqqqz1d = root_1rmqqqz1b.firstChild;
+                    template_u1.slot(element_1rmqqqz1d, body, 1);
+                    return root_1rmqqqz1b;
+                })();
+            case 'quote':
+                return (() => {
+                    let root_1rmqqqz1e = template_1rmqqqz1f(), element_1rmqqqz1g = root_1rmqqqz1e.firstChild;
+                    template_u1.slot(element_1rmqqqz1g, body, 1);
+                    return root_1rmqqqz1e;
+                })();
+            case 'task':
+                return (() => {
+                    let root_1rmqqqz1h = template_1rmqqqz1i(), element_1rmqqqz1j = root_1rmqqqz1h.firstChild, element_1rmqqqz1k = element_1rmqqqz1j.firstElementChild;
+                    template_u1.slot(element_1rmqqqz1k, checkbox({
+                        [checkbox.input]: {
+                            'aria-label': 'Done',
+                            checked: () => read(view.checked),
+                            onchange: (e) => tick(view, e.currentTarget.checked)
+                        }
+                    }), 1);
+                    template_u1.slot(element_1rmqqqz1j, body, 2);
+                    template_u1.setProperty(element_1rmqqqz1j, 'data-checked', () => read(view.checked) ? 'true' : 'false');
+                    return root_1rmqqqz1h;
+                })();
+            default:
+                return (() => {
+                    let root_1rmqqqz1l = template_1rmqqqz1m(), element_1rmqqqz1n = root_1rmqqqz1l.firstChild;
+                    template_u1.slot(element_1rmqqqz1n, body, 1);
+                    return root_1rmqqqz1l;
+                })();
+        }
+    }
+    function land(span, value) {
+        if (!value) {
+            return;
+        }
+        let blocks = read(doc), host = blocks[span.start.block], style = styleAt(host.runs, span.start.offset);
+        if (host.kind === 'codeblock' || style.marks.includes('code')) {
+            change(insert(blocks, span, [{ ...style, text: host.kind === 'codeblock' ? value : value.replace(INLINE_LINE_BREAKS, ' ') }]), 'other');
+            return;
+        }
+        let pasted = parse(value, features, multiline && value.includes('\n'));
+        if (pasted.length === 1 && pasted[0].kind === 'paragraph') {
+            if (!pasted[0].runs.length) {
+                return;
+            }
+            pasted[0] = {
+                ...pasted[0],
+                runs: pasted[0].runs.map((run) => ({ href: run.href || style.href, marks: sort([...style.marks, ...run.marks]), text: run.text }))
+            };
+        }
+        change(paste(blocks, span, pasted), 'other');
+    }
+    function leave(e) {
+        if (!root?.contains(e.relatedTarget)) {
+            finish(true, false);
+        }
+    }
+    function linker() {
+        let span = current();
+        if (!editor || !span || !toolbar || !url) {
+            return;
+        }
+        let found = extent(read(doc), span);
+        if (found) {
+            saved = found.span;
+            select({ anchor: found.span.start, focus: found.span.end });
+        }
+        panel.link = true;
+        hyperlink.existing = !!found;
+        hyperlink.invalid = false;
+        hyperlink.url = found?.href ?? '';
+        let range = live();
+        if (range) {
+            place(range);
+        }
+        flush();
+        url.focus({ preventScroll: true });
+        url.select();
+    }
+    function live() {
+        let native = window.getSelection();
+        return native && native.rangeCount > 0 ? native.getRangeAt(0) : null;
+    }
+    function load(markdown) {
+        let next = parse(markdown, features, multiline);
+        steps.clear();
+        write(pristine, serialize(next, features, multiline));
+        commit(next);
+    }
+    function navigate(e) {
+        if (e.target === url) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                apply(url.value);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                back();
+            }
+            return;
+        }
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            focus(local.focus + (e.key === 'ArrowRight' ? 1 : -1));
+        }
+        else if (e.key === 'Home' || e.key === 'End') {
+            e.preventDefault();
+            focus(e.key === 'Home' ? 0 : -1);
+        }
+        else if (e.key === 'Escape' && !block.active) {
+            e.preventDefault();
+            dismiss();
+            editor?.focus({ preventScroll: true });
+            let span = current();
+            if (span) {
+                select({ anchor: span.start, focus: span.end });
+            }
+        }
+    }
+    function patch(items, next) {
+        let end = 0, m = next.length, n = items.$length, start = 0;
+        while (start < n && start < m && follows(items[start], next[start])) {
+            start++;
+        }
+        while (end < n - start && end < m - start && follows(items[n - 1 - end], next[m - 1 - end])) {
+            end++;
+        }
+        if (start + end < n || start + end < m) {
+            items.splice(start, n - start - end, ...next.slice(start, m - end).map(view));
+        }
+    }
+    function place(range) {
+        if (!root || !toolbar) {
+            return;
+        }
+        let bounds = range.getBoundingClientRect(), box = root.getBoundingClientRect(), h = toolbar.offsetHeight, lines = [...range.getClientRects()].filter((rect) => rect.width > 0), w = toolbar.offsetWidth;
+        let first = lines[0] ?? bounds, last = lines[lines.length - 1] ?? bounds;
+        let below = first.top < h + GAP, center = bounds.left + bounds.width / 2, x = Math.min(Math.max(center - w / 2, GAP), viewport().width - w - GAP);
+        panel.origin = `${center - x}px ${below ? 0 : h}px`;
+        panel.x = x - box.left;
+        panel.y = below ? last.bottom - box.top + GAP : first.top - box.top - h - GAP;
+        if (!panel.open) {
+            panel.instant = true;
+            flush();
+            void toolbar.offsetWidth;
+            panel.instant = false;
+        }
+    }
+    function redo() {
+        let entry = steps.redo({ doc: read(doc), selection });
+        if (entry) {
+            revert(entry);
+        }
+    }
+    function resolve() {
+        clearTimeout(settling);
+        if (!composing || !editor) {
+            return;
+        }
+        let { block: i, element } = composing, blocks = read(doc);
+        composing = null;
+        if (!blocks[i] || !element.isConnected) {
+            sections.splice(0, sections.$length, ...partition(blocks).map(section));
+            commit(blocks);
+            return;
+        }
+        let after = written(element), before = text(blocks[i].runs), end = 0, now = capture(editor), start = 0;
+        while (start < before.length && start < after.length && before[start] === after[start]) {
+            start++;
+        }
+        while (end < before.length - start && end < after.length - start && before[before.length - 1 - end] === after[after.length - 1 - end]) {
+            end++;
+        }
+        let next = insert(blocks, { end: { block: i, offset: before.length - end }, start: { block: i, offset: start } }, [{ ...styleAt(blocks[i].runs, start), text: after.slice(start, after.length - end) }]), at = now && now.focus.block === i ? now.focus : next.selection.focus;
+        next.doc[i] = { ...next.doc[i], runs: next.doc[i].runs.slice() };
+        if (before === after) {
+            commit(next.doc);
+            select(caret(at));
+            return;
+        }
+        change({ doc: next.doc, selection: caret(at) }, 'type');
+    }
+    function revert(entry) {
+        commit(entry.doc);
+        if (entry.selection) {
+            select(entry.selection);
+        }
+    }
+    function save() {
+        let next = serialize(read(doc), features, multiline);
+        if (next === read(pristine)) {
+            return;
+        }
+        write(pristine, next);
+        saving.save(next);
+    }
+    function section({ blocks, kind }) {
+        return { items: new ReactiveArray(blocks.map(view)), kind };
+    }
+    function select(next) {
+        selection = next;
+        if (editor && document.activeElement === editor) {
+            restore(editor, next);
+        }
+    }
+    function settle() {
+        if (!pressing) {
+            return;
+        }
+        pressing = false;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(sync);
+    }
+    function show(next, instant = false) {
+        panel.open = next;
+        if (instant) {
+            panel.instant = true;
+        }
+    }
+    function sync() {
+        if (!editor || !toolbar) {
+            return;
+        }
+        let now = capture(editor);
+        if (now) {
+            selection = now;
+        }
+        if (composing || (!actions.length && kinds.length < 2)) {
+            return;
+        }
+        let range = live();
+        if (toolbar.contains(document.activeElement) || panel.link) {
+            return;
+        }
+        if (!now || !range || range.collapsed || !editor.contains(range.commonAncestorContainer)) {
+            if (panel.open) {
+                show(false);
+            }
+            return;
+        }
+        if (pressing) {
+            return;
+        }
+        let span = order(now);
+        if (dismissed) {
+            if (spans(saved, span)) {
+                return;
+            }
+            dismissed = false;
+        }
+        saved = span;
+        place(range);
+        inspect(span);
+        if (!panel.open) {
+            local.focus = 0;
+            show(true);
+        }
+    }
+    function tick(view, value) {
+        let blocks = read(doc), index = blocks.findIndex((b) => b.key === view.block.key);
+        if (index < 0) {
+            return;
+        }
+        change({ doc: check(blocks, index, value), selection: selection ?? caret({ block: index, offset: 0 }) }, 'other');
+        if (!state.editing) {
+            save();
+        }
+    }
+    function trigger(action) {
+        let span = current();
+        if (!span) {
+            return;
+        }
+        switch (action) {
+            case 'clear':
+                change(clear(read(doc), span), 'other');
+                local.live = 'Formatting cleared';
+                break;
+            case 'copy':
+                void copy();
+                return;
+            case 'link':
+                linker();
+                return;
+            default:
+                change(toggle(read(doc), span, action), 'other');
+        }
+        inspect(span);
+    }
+    function turn(kind) {
+        let span = current();
+        if (!editor || !span) {
+            return;
+        }
+        shown = kind;
+        editor.focus({ preventScroll: true });
+        change(setKind(read(doc), span, kind), 'other');
+    }
+    function typed(span, value) {
+        if (!multiline) {
+            value = value.replace(INLINE_LINE_BREAKS, ' ');
+        }
+        if (!value) {
+            return;
+        }
+        let blocks = read(doc), style = styleAt(blocks[span.start.block].runs, span.start.offset + (collapsed(span) ? 0 : 1));
+        change(insert(blocks, span, [{ ...style, text: value }]), 'type');
+    }
+    function undo() {
+        let entry = steps.undo({ doc: read(doc), selection });
+        if (entry) {
+            revert(entry);
+        }
+    }
+    let button = ({ action, label, shortcut }, content, index) => {
+        let root_1rmqqqz1o = template_1rmqqqz1p(), element_1rmqqqz1q = root_1rmqqqz1o.firstChild;
+        template_u1.slot(element_1rmqqqz1q, content, 1);
+        template_u1.setProperty(element_1rmqqqz1q, 'aria-label', label);
+        template_u1.setProperty(element_1rmqqqz1q, 'tabindex', () => local.focus === index ? '0' : '-1');
+        template_u1.setProperties(element_1rmqqqz1q, action === 'clear' || action === 'copy' ? {} : { 'aria-pressed': () => pressed[action] ? 'true' : 'false' });
+        template_u1.delegate(element_1rmqqqz1q, 'click', () => trigger(action));
+        template_u1.onconnect(element_1rmqqqz1q, (element) => {
+            element[HINT] = action === 'copy' ? () => local.copied === 'success' ? 'Copied' : label : hint(label, shortcut);
+            items[index] = element;
+        });
+        return root_1rmqqqz1o;
+    };
+    let lead = kinds.length > 1 ? 1 : 0, tools = actions.filter(({ action }) => action === 'clear' || action === 'copy');
+    return (() => {
+        let root_1rmqqqz1v = template_1rmqqqz1w(), element_1rmqqqz1x = root_1rmqqqz1v.firstChild, element_1rmqqqz1y = element_1rmqqqz1x.firstElementChild, element_1rmqqqz1z = element_1rmqqqz1y.nextElementSibling, element_1rmqqqz20 = element_1rmqqqz1z.firstElementChild, element_1rmqqqz21 = element_1rmqqqz20.firstElementChild, element_1rmqqqz22 = element_1rmqqqz21.firstChild, element_1rmqqqz23 = element_1rmqqqz22.nextSibling, element_1rmqqqz24 = element_1rmqqqz23.nextSibling, element_1rmqqqz25 = element_1rmqqqz24.nextSibling, element_1rmqqqz26 = element_1rmqqqz1z.nextElementSibling.firstElementChild.firstElementChild, element_1rmqqqz27 = element_1rmqqqz1z.nextElementSibling.firstElementChild.nextElementSibling.firstElementChild, element_1rmqqqz28 = element_1rmqqqz1z.nextElementSibling.nextElementSibling;
+        template_u1.slot(element_1rmqqqz1y, slot, 1);
+        template_u1.slot(element_1rmqqqz22, kinds.length > 1 && (() => {
+            let root_1rmqqqz29 = template_1rmqqqz2a(), element_1rmqqqz2b = root_1rmqqqz29.firstChild, element_1rmqqqz2c = element_1rmqqqz2b.nextSibling;
+            template_u1.slot(element_1rmqqqz2b, selectInput({
+                [selectInput.trigger]: {
+                    onconnect: (element) => {
+                        items[0] = element;
+                    },
+                    tabindex: () => local.focus === 0 ? '0' : '-1'
+                },
+                class: 'inline-edit-toolbar-block',
+                label: 'Text style',
+                options: kinds,
+                state: block
+            }));
+            template_u1.slot(element_1rmqqqz2c, (marks.length > 0 || tools.length > 0) && template_1rmqqqz2d());
+            return root_1rmqqqz29;
+        })());
+        template_u1.slot(element_1rmqqqz23, marks.map((item, i) => button(item, icon(item.action), lead + i)));
+        template_u1.slot(element_1rmqqqz24, marks.length > 0 && tools.length > 0 && template_1rmqqqz2d());
+        template_u1.slot(element_1rmqqqz25, tools.map((item, i) => button(item, item.action === 'copy'
+            ? faces(() => local.copied, [
+                { content: '', icon: copied, key: 'idle' },
+                { content: '', icon: checked, key: 'success', tone: 'success' },
+                { content: '', icon: cross, key: 'error', tone: 'error' }
+            ])
+            : icon(item.action), lead + marks.length + i)));
+        template_u1.slot(element_1rmqqqz21, tip.render(), 2);
+        template_u1.slot(element_1rmqqqz20, features.has('link') && (() => {
+            let root_1rmqqqz2e = template_1rmqqqz2f(), element_1rmqqqz2g = root_1rmqqqz2e.firstChild.firstChild, element_1rmqqqz2h = root_1rmqqqz2e.firstChild.firstElementChild, element_1rmqqqz2i = element_1rmqqqz2h.nextElementSibling, element_1rmqqqz2j = element_1rmqqqz2i.nextElementSibling;
+            template_u1.slot(element_1rmqqqz2g, input({
+                'aria-invalid': () => hyperlink.invalid && 'true',
+                'aria-label': 'Link address',
+                class: 'inline-edit-toolbar-url',
+                onconnect: (element) => {
+                    url = element;
+                },
+                oninput: (e) => {
+                    hyperlink.url = e.currentTarget.value;
+                },
+                placeholder: 'Paste or type a link',
+                type: 'url',
+                value: () => hyperlink.url
+            }));
+            template_u1.slot(element_1rmqqqz2h, icon('apply'), 1);
+            template_u1.slot(element_1rmqqqz2i, icon('open'), 1);
+            template_u1.slot(element_1rmqqqz2j, icon('unlink'), 1);
+            template_u1.setProperty(element_1rmqqqz2j, 'hidden', () => !hyperlink.existing);
+            template_u1.delegate(element_1rmqqqz2j, 'click', () => apply(null));
+            template_u1.delegate(element_1rmqqqz2i, 'click', () => {
+                let href = address(hyperlink.url);
+                if (href) {
+                    window.open(href, '_blank', 'noopener');
+                }
+            });
+            template_u1.delegate(element_1rmqqqz2h, 'click', () => apply(hyperlink.url));
+            return root_1rmqqqz2e;
+        })(), 2);
+        new template_u1.EffectSlot(element_1rmqqqz28, () => local.live, 1);
+        template_u1.slot(element_1rmqqqz1x, saving.status && status.render(saving.status, this?.attributes?.[INLINE_EDIT_STATUS], attributes[INLINE_EDIT_STATUS]), 2);
+        template_u1.setProperty(element_1rmqqqz27, 'href', template_u1.interpolate(["#", (checkSvg)]));
+        template_u1.setProperty(element_1rmqqqz26, 'href', template_u1.interpolate(["#", (pencilSvg)]));
+        template_u1.setProperties(element_1rmqqqz21, tip.delegate({ content: (trigger) => trigger[HINT], edge: true, selector: '.inline-edit-toolbar-button' }));
+        template_u1.setProperties(element_1rmqqqz20, this?.attributes?.[INLINE_EDIT_RICH_TOOLBAR]);
+        template_u1.setProperties(element_1rmqqqz20, attributes[INLINE_EDIT_RICH_TOOLBAR]);
+        template_u1.setProperty(element_1rmqqqz20, 'aria-hidden', () => panel.open ? 'false' : 'true');
+        template_u1.setList(element_1rmqqqz20, 'class', [
+            () => panel.instant && 'inline-edit-toolbar--instant',
+            () => panel.link && 'inline-edit-toolbar--link'
+        ]);
+        template_u1.setProperty(element_1rmqqqz20, 'inert', () => !panel.open);
+        template_u1.onconnect(element_1rmqqqz20, (element) => {
+            toolbar = element;
+            keys = new AbortController();
+            element.addEventListener('keydown', navigate, { signal: keys.signal });
+        });
+        template_u1.delegate(element_1rmqqqz20, 'mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT') {
+                e.preventDefault();
+            }
+        });
+        template_u1.setList(element_1rmqqqz20, 'style', () => `--toolbar-origin: ${panel.origin}; --toolbar-x: ${panel.x}px; --toolbar-y: ${panel.y}px;`);
+        template_u1.setList(element_1rmqqqz1z, 'class', () => panel.open && '--active');
+        template_u1.setProperty(element_1rmqqqz1y, 'aria-label', label);
+        template_u1.setProperty(element_1rmqqqz1y, 'aria-multiline', multiline ? 'true' : 'false');
+        template_u1.setProperty(element_1rmqqqz1y, 'aria-keyshortcuts', keyshortcuts);
+        template_u1.setProperty(element_1rmqqqz1y, 'aria-placeholder', placeholder);
+        template_u1.setProperty(element_1rmqqqz1y, 'data-placeholder', placeholder);
+        template_u1.setProperties(element_1rmqqqz1y, this?.attributes?.[INLINE_EDIT_RICH_EDITOR]);
+        template_u1.setProperties(element_1rmqqqz1y, attributes[INLINE_EDIT_RICH_EDITOR]);
+        template_u1.delegate(element_1rmqqqz1y, 'beforeinput', edit);
+        template_u1.delegate(element_1rmqqqz1y, 'compositionend', () => {
+            clearTimeout(settling);
+            settling = setTimeout(resolve, 0);
+        });
+        template_u1.delegate(element_1rmqqqz1y, 'compositionstart', () => {
+            resolve();
+            let now = editor ? capture(editor) : null;
+            if (!editor || !now) {
+                return;
+            }
+            let span = order(now);
+            if (span.start.block !== span.end.block) {
+                change(remove(read(doc), span), 'delete');
+            }
+            composing = { block: span.start.block, element: elements(editor)[span.start.block] };
+            show(false, true);
+        });
+        template_u1.onconnect(element_1rmqqqz1y, (element) => {
+            editor = element;
+        });
+        template_u1.delegate(element_1rmqqqz1y, 'copy', (e) => clip(e, false));
+        template_u1.delegate(element_1rmqqqz1y, 'cut', (e) => clip(e, true));
+        template_u1.on(element_1rmqqqz1y, 'focus', () => {
+            state.editing = true;
+            panel.link = false;
+        });
+        template_u1.delegate(element_1rmqqqz1y, 'keydown', (e) => {
+            if (e.isComposing) {
+                return;
+            }
+            resolve();
+            let key = e.key.toLowerCase(), mod = e.metaKey || e.ctrlKey;
+            if (mod && !e.altKey && (key === 'y' || key === 'z')) {
+                e.preventDefault();
+                if (key === 'y' || e.shiftKey) {
+                    redo();
+                }
+                else {
+                    undo();
+                }
+                return;
+            }
+            if (mod && !e.altKey && key !== 'enter') {
+                let action = ACTIONS.find(({ shortcut }) => shortcut?.toLowerCase() === (e.shiftKey ? 'shift+' : '') + key)?.action;
+                if (action && features.has(action)) {
+                    e.preventDefault();
+                    trigger(action);
+                }
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                if (panel.open) {
+                    dismiss();
+                }
+                else {
+                    finish(false, true);
+                }
+                return;
+            }
+            if (e.key === 'Enter' && (mod || !multiline)) {
+                e.preventDefault();
+                finish(true, true);
+                return;
+            }
+            if (panel.open && !mod && (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Enter')) {
+                show(false, true);
+            }
+        });
+        template_u1.delegate(element_1rmqqqz1y, 'paste', (e) => {
+            e.preventDefault();
+            resolve();
+            let now = editor ? capture(editor) : null;
+            if (now) {
+                land(order(now), e.clipboardData?.getData('text/plain') ?? '');
+            }
+        });
+        template_u1.delegate(element_1rmqqqz1y, 'pointerdown', (e) => {
+            if (e.button === 0) {
+                pressing = true;
+            }
+        });
+        template_u1.setProperties(element_1rmqqqz1x, this?.attributes);
+        template_u1.setProperties(element_1rmqqqz1x, attributes);
+        template_u1.setList(element_1rmqqqz1x, 'class', [
+            multiline && 'inline-edit--multiline',
+            () => state.editing && '--active',
+            () => state.saved && 'inline-edit--saved',
+            () => empty(read(doc)) && 'inline-edit--empty'
+        ]);
+        template_u1.onconnect(element_1rmqqqz1x, (element) => {
+            root = element;
+            unobserve?.();
+            unobserve = observe(element, sync);
+        });
+        template_u1.ondisconnect(element_1rmqqqz1x, () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(copyTimer);
+            clearTimeout(settling);
+            keys?.abort();
+            unobserve?.();
+            unobserve = undefined;
+            saving.dispose();
+        });
+        template_u1.ondocument(element_1rmqqqz1x, 'selectionchange', sync);
+        template_u1.on(element_1rmqqqz1x, 'focusout', leave);
+        template_u1.onwindow(element_1rmqqqz1x, 'pointercancel', settle);
+        template_u1.onwindow(element_1rmqqqz1x, 'pointerup', settle);
+        return root_1rmqqqz1v;
+    })();
+}, { editor: INLINE_EDIT_RICH_EDITOR, status: INLINE_EDIT_STATUS, toolbar: INLINE_EDIT_RICH_TOOLBAR });