@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/editor/markdown/view.js

@@ -0,0 +1,1841 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import icon from '../../icon/index.js';
+import { clamp } from '../../../shared/clamp.js';
+import { mac } from '../../../shared/platform.js';
+import { observer, observeSize } from '../../../shared/resize.js';
+import { copied, read, write } from '../code/clipboard.js';
+import { addNextOccurrence, deleteCharacter, indent, insertText, lineCommand, toggleComment } from '../code/commands.js';
+import { composition } from '../code/composition.js';
+import { write as writeField } from '../code/field.js';
+import { find } from '../code/find.js';
+import { mapFolds, outerFolds } from '../code/folding.js';
+import { goto } from '../code/goto.js';
+import { commands, keymap } from '../code/keymap.js';
+import { EditorLayout } from '../code/layout.js';
+import { minimap } from '../code/minimap.js';
+import { move } from '../code/navigation.js';
+import { pointer } from '../code/pointer.js';
+import { inputEdit, NativeText } from '../code/projection.js';
+import { syntaxCache } from '../code/syntax.js';
+import { markdownCommand } from './editing.js';
+import { parseInline } from './inline.js';
+import { arrange, cache, headingScale, MarkdownLayout, SCALED_LINE, unitStart } from './layout.js';
+import { blockAt, contentEnd, markdownBackspace, markdownReferences, parseMarkdown, reparse, toggleTask } from './model.js';
+import { renderer } from './render.js';
+import { foldable, foldAt, markdownFolds } from './structure.js';
+import chevron from '@esportsplus/ui/svg/chevron-down.svg';
+const template_1ayo7z93 = template_u1.template(`<div class='markdown-editor'><!--$--><!--$--><div class='markdown-editor-body'><div class='markdown-editor-surface --scrollbar'><div aria-hidden='true' class='markdown-editor-overlay'></div><div aria-hidden='true' class='markdown-editor-spacer'></div><!--$--><div aria-hidden='true' class='markdown-editor-spacer'></div><div class='markdown-editor-active'><button aria-label='Fold block' class='markdown-editor-fold' tabindex='-1' type='button'></button><textarea autocapitalize='off' autocomplete='off' autocorrect='off' dir='ltr'></textarea></div><div aria-hidden='true' class='markdown-editor-spacer'></div><!--$--><div aria-hidden='true' class='markdown-editor-spacer'></div></div><!--$--><span aria-hidden='true' class='markdown-editor-ruler'>0000000000000000000000000000000000000000000000000000000000000000</span></div><span class='markdown-editor-help'>Press Escape then Tab to move focus out of the editor.`);
+const template_1ayo7z9n = template_u1.template(`<div>`);
+class ReactiveObject_1ayo7z90 extends reactivity_u0.ReactiveObject {
+    #between = this[reactivity_u0.SIGNAL](0);
+    #bottom = this[reactivity_u0.SIGNAL](0);
+    #editing = this[reactivity_u0.SIGNAL](false);
+    #foldable = this[reactivity_u0.SIGNAL](false);
+    #height = this[reactivity_u0.SIGNAL](20);
+    #input = this[reactivity_u0.SIGNAL]('');
+    #label = this[reactivity_u0.SIGNAL]('Markdown editor');
+    #minimap = this[reactivity_u0.SIGNAL](false);
+    #name = this[reactivity_u0.SIGNAL]('');
+    #next = this[reactivity_u0.SIGNAL](0);
+    #placeholder = this[reactivity_u0.SIGNAL]('');
+    #readonly = this[reactivity_u0.SIGNAL](false);
+    #spellcheck = this[reactivity_u0.SIGNAL](true);
+    #style = this[reactivity_u0.SIGNAL]('');
+    #tabSize = this[reactivity_u0.SIGNAL](4);
+    #top = this[reactivity_u0.SIGNAL](0);
+    #wrap = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get between() {
+        return reactivity_u0.read(this.#between);
+    }
+    set between(_v0) {
+        reactivity_u0.write(this.#between, _v0);
+    }
+    get bottom() {
+        return reactivity_u0.read(this.#bottom);
+    }
+    set bottom(_v1) {
+        reactivity_u0.write(this.#bottom, _v1);
+    }
+    get editing() {
+        return reactivity_u0.read(this.#editing);
+    }
+    set editing(_v2) {
+        reactivity_u0.write(this.#editing, _v2);
+    }
+    get foldable() {
+        return reactivity_u0.read(this.#foldable);
+    }
+    set foldable(_v3) {
+        reactivity_u0.write(this.#foldable, _v3);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v4) {
+        reactivity_u0.write(this.#height, _v4);
+    }
+    get input() {
+        return reactivity_u0.read(this.#input);
+    }
+    set input(_v5) {
+        reactivity_u0.write(this.#input, _v5);
+    }
+    get label() {
+        return reactivity_u0.read(this.#label);
+    }
+    set label(_v6) {
+        reactivity_u0.write(this.#label, _v6);
+    }
+    get minimap() {
+        return reactivity_u0.read(this.#minimap);
+    }
+    set minimap(_v7) {
+        reactivity_u0.write(this.#minimap, _v7);
+    }
+    get name() {
+        return reactivity_u0.read(this.#name);
+    }
+    set name(_v8) {
+        reactivity_u0.write(this.#name, _v8);
+    }
+    get next() {
+        return reactivity_u0.read(this.#next);
+    }
+    set next(_v9) {
+        reactivity_u0.write(this.#next, _v9);
+    }
+    get placeholder() {
+        return reactivity_u0.read(this.#placeholder);
+    }
+    set placeholder(_v10) {
+        reactivity_u0.write(this.#placeholder, _v10);
+    }
+    get readonly() {
+        return reactivity_u0.read(this.#readonly);
+    }
+    set readonly(_v11) {
+        reactivity_u0.write(this.#readonly, _v11);
+    }
+    get spellcheck() {
+        return reactivity_u0.read(this.#spellcheck);
+    }
+    set spellcheck(_v12) {
+        reactivity_u0.write(this.#spellcheck, _v12);
+    }
+    get style() {
+        return reactivity_u0.read(this.#style);
+    }
+    set style(_v13) {
+        reactivity_u0.write(this.#style, _v13);
+    }
+    get tabSize() {
+        return reactivity_u0.read(this.#tabSize);
+    }
+    set tabSize(_v14) {
+        reactivity_u0.write(this.#tabSize, _v14);
+    }
+    get top() {
+        return reactivity_u0.read(this.#top);
+    }
+    set top(_v15) {
+        reactivity_u0.write(this.#top, _v15);
+    }
+    get wrap() {
+        return reactivity_u0.read(this.#wrap);
+    }
+    set wrap(_v16) {
+        reactivity_u0.write(this.#wrap, _v16);
+    }
+}
+class ReactiveObject_1ayo7z91 extends reactivity_u0.ReactiveObject {
+    #kind = this[reactivity_u0.SIGNAL]('');
+    #style = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get kind() {
+        return reactivity_u0.read(this.#kind);
+    }
+    set kind(_v0) {
+        reactivity_u0.write(this.#kind, _v0);
+    }
+    get style() {
+        return reactivity_u0.read(this.#style);
+    }
+    set style(_v1) {
+        reactivity_u0.write(this.#style, _v1);
+    }
+}
+const DECORATIONS = 1000;
+const NAVIGATION = /^(ArrowDown|ArrowLeft|ArrowRight|ArrowUp|End|Home|PageDown|PageUp)$/;
+const NONE = [];
+const NO_TOKENS = [];
+const TOKEN_COLORS = ['comment', 'keyword', 'operator', 'property', 'string', 'type', 'variable'];
+const VERTICAL = /^(ArrowDown|ArrowUp|PageDown|PageUp)$/;
+let uid = 0;
+function assign(list, next) {
+    if (list.length === next.length) {
+        let same = true;
+        for (let i = 0, n = list.length; same && i < n; i++) {
+            same = list[i] === next[i];
+        }
+        if (same) {
+            return;
+        }
+    }
+    let keep = new Set(next), kept = 0;
+    for (let i = 0, n = list.length; i < n; i++) {
+        if (keep.has(list[i])) {
+            kept++;
+        }
+    }
+    if (!kept) {
+        list.splice(0, list.length, ...next);
+        return;
+    }
+    for (let i = list.length - 1; i >= 0;) {
+        if (keep.has(list[i])) {
+            i--;
+            continue;
+        }
+        let end = i;
+        while (i >= 0 && !keep.has(list[i])) {
+            i--;
+        }
+        list.splice(i + 1, end - i);
+    }
+    for (let i = 0; i < next.length;) {
+        if (list[i] === next[i]) {
+            i++;
+            continue;
+        }
+        let end = i;
+        while (end < next.length && next[end] !== list[i]) {
+            end++;
+        }
+        list.splice(i, 0, ...next.slice(i, end));
+        i = end;
+    }
+}
+function pixels(value) {
+    return parseFloat(value) || 0;
+}
+function prevent(e) {
+    e.preventDefault();
+}
+const view = (model, callbacks, receive) => {
+    let active = null, activeIndex = -1, apple = mac(), before = null, beforeRanges = [], beforeSelection, blocks = parseMarkdown(model), decorations = new reactivity_u0.ReactiveArray(), definitions = new Map(), disposed = false, drag = null, drawn = 0, dropAt = null, editing = false, escapeTab = false, estimated = false, fieldSource = '', folds = [], frame = 0, geometry = null, goals = [], help = `markdown-editor-help-${++uid}`, host, inlines = new WeakMap(), inputData = null, inputType = '', keys = keymap(apple), layout = new MarkdownLayout(), length = model.value.length, listed = { after: new reactivity_u0.ReactiveArray(), before: new reactivity_u0.ReactiveArray() }, metrics = {
+        charWidth: 7.8,
+        clientHeight: 320,
+        fontSize: 13,
+        lineHeight: 20,
+        minimap: 0,
+        padLeft: 12,
+        padTop: 12,
+        quoteIndent: 10,
+        scrollLeft: 0,
+        scrollTop: 0,
+        width: 600
+    }, options = { wrap: true }, palette = {}, parsed = model.revision, pendingValue, pinned = false, pointerId = -1, projection = new NativeText(''), resize = observer(resized), revealing = false, ruler, secondary = false, shown = new WeakMap(), state = reactivity_u0.reactive({
+        ...model.state,
+        selection: { ...model.selection },
+        selections: model.selections.map((range) => ({ ...range }))
+    }), surface, textarea, ui = new ReactiveObject_1ayo7z90(), units = cache(), unitsDirty = true, unsubscribe, visited = new WeakMap(), whole = null, writing = false, written = '';
+    let activeUnit = {
+        active: true,
+        block: blocks[0],
+        continuation: false,
+        continues: false,
+        estimate: 0,
+        estimated: -1,
+        height: 0,
+        measured: -1,
+        raw: false
+    };
+    let draw = renderer({
+        fold: (unit) => {
+            controller.fold(model.lineAt(unit.block.from) + 1);
+        },
+        foldable: opens,
+        inline: inlineOf,
+        press,
+        readonly: () => ui.readonly,
+        shown: (element, unit) => {
+            if (unit) {
+                shown.set(element, unit);
+                resize?.observe(element);
+            }
+            else {
+                shown.delete(element);
+                resize?.unobserve(element);
+            }
+        },
+        task: (block) => {
+            if (!disposed && !options.readonly && !ime.busy() && block.task) {
+                toggleTask(model, block.task);
+            }
+        },
+        text: () => model.value,
+        unfold: (unit) => {
+            controller.unfold(unit.fold?.line ?? model.lineAt(unit.block.from) + 1);
+        }
+    });
+    let ime = composition({
+        begin: () => {
+            capture();
+            beforeRanges = model.selections;
+            beforeSelection = model.selection;
+            model.breakHistory();
+        },
+        commit: (conflict) => {
+            if (conflict) {
+                reset();
+                resync();
+            }
+            else {
+                accept(true);
+            }
+            if (pendingValue !== undefined) {
+                let value = pendingValue;
+                pendingValue = undefined;
+                model.setValue(value, { source: 'external' });
+            }
+        }
+    });
+    let gestures = pointer({
+        busy: ime.busy,
+        capture,
+        get document() {
+            return model;
+        },
+        drop: (offset) => {
+            dropAt = offset;
+            schedule();
+        },
+        focus: () => controller.focus(),
+        insert: (text) => controller.insert(text),
+        offsetAt,
+        placeholder: () => null,
+        readonly: () => !!options.readonly,
+        rows: rowsBetween,
+        select: (ranges, reveal = false) => {
+            model.selectMany(ranges);
+            start(reveal);
+        },
+        transact: (edits, caret) => {
+            model.transact(edits, { selection: { start: caret }, source: 'drop' });
+            start(true);
+        },
+        unfold: () => { }
+    });
+    let jump = goto({
+        focus: () => controller.focus(),
+        go: (line, column) => controller.goToLine(line, column)
+    });
+    let map = minimap({
+        focus: () => {
+            if (editing) {
+                textarea?.focus({ preventScroll: true });
+            }
+        },
+        scroll: (top, relative) => {
+            scrollTo(relative ? metrics.scrollTop + top : top);
+        }
+    });
+    let search = find({
+        get document() {
+            return model;
+        },
+        edit: editable,
+        focus: () => controller.focus(),
+        readonly: () => !!options.readonly,
+        reveal: (match) => {
+            model.select({ end: match.to, start: match.from });
+            start(true);
+        },
+        selection: () => {
+            capture();
+            return model.selection;
+        },
+        update: schedule
+    });
+    let size = observeSize(() => measure());
+    let source = {
+        breaks: () => NONE,
+        get count() {
+            return model.lineCount;
+        },
+        get height() {
+            return layout.total;
+        },
+        indexAt: (y) => {
+            let index = layout.at(y), unit = layout.units[index];
+            if (!unit) {
+                return 0;
+            }
+            let { first, last } = linesOf(index), top = layout.top(index), height = layout.height(unit);
+            return first + Math.min(last - first, Math.floor(((y - top) / Math.max(1, height)) * (last - first + 1)));
+        },
+        get lineHeight() {
+            return metrics.lineHeight;
+        },
+        rows: () => 1,
+        get tabSize() {
+            return options.tabSize ?? 4;
+        },
+        text: (index) => model.lineText(index),
+        tokens: (index) => ui.minimap ? syntaxCache(model, 'markdown').lineTokens(index) : NO_TOKENS,
+        top: (index) => {
+            let at = layout.indexOf(model.lineStart(index)), unit = layout.units[at];
+            if (!unit) {
+                return 0;
+            }
+            let { first, last } = linesOf(at);
+            return layout.top(at) + (Math.max(0, index - first) * layout.height(unit)) / (last - first + 1);
+        }
+    };
+    function accept(composed = false) {
+        if (disposed || !textarea || !active) {
+            return;
+        }
+        if (options.readonly) {
+            reset();
+            resync();
+            return;
+        }
+        let after = { end: textarea.selectionEnd, length: textarea.textLength, start: textarea.selectionStart }, base = active.from, direction = textarea.selectionDirection, native = before && !composed ? inputEdit(before, after, inputType, inputData) : null, ranges = beforeRanges.length ? beforeRanges : model.selections, value = textarea.value, edit;
+        if (native) {
+            edit = projection.toSourceEdit(model.value, native.from, native.to, native.insert);
+        }
+        else if (value === projection.value) {
+            reset();
+            capture();
+            return;
+        }
+        else {
+            let selection = beforeSelection
+                ? { end: clamp(beforeSelection.end - base, 0, fieldSource.length), start: clamp(beforeSelection.start - base, 0, fieldSource.length) }
+                : undefined;
+            edit = projection.edit(model.value, value, selection, inputType);
+        }
+        if (edit.from === edit.to && !edit.insert) {
+            reset();
+            resync();
+            return;
+        }
+        let group = !composed && /^(deleteContentBackward|deleteContentForward|insertText)$/.test(inputType) ? inputType : undefined, origin = composed ? 'composition' : 'input';
+        written = value;
+        if (ranges.length > 1) {
+            reset();
+            insertText(model, edit.insert, origin);
+            return;
+        }
+        let from = base + edit.from, caret = native
+            ? { direction, end: from + edit.insert.length, start: from + edit.insert.length }
+            : caretAfter(edit, after, direction);
+        reset();
+        model.replace(from, base + edit.to, edit.insert, { group, selection: caret, source: origin });
+    }
+    function activate(focus) {
+        if (disposed) {
+            return;
+        }
+        editing = true;
+        ui.editing = true;
+        refresh();
+        schedule();
+        if (focus && textarea && host?.ownerDocument.activeElement !== textarea) {
+            flush();
+            textarea.focus({ preventScroll: true });
+        }
+    }
+    function adopt() {
+        let memo = visited.get(model), { selections, ...single } = model.state;
+        reset();
+        active = null;
+        activeIndex = -1;
+        blocks = parseMarkdown(model);
+        activeUnit.block = blocks[0];
+        drag = null;
+        dropAt = null;
+        escapeTab = false;
+        fieldSource = '';
+        folds = memo?.revision === model.revision ? memo.folds : [];
+        geometry = null;
+        goals = [];
+        length = model.value.length;
+        metrics.scrollLeft = memo?.left ?? 0;
+        metrics.scrollTop = memo?.top ?? 0;
+        parsed = model.revision;
+        pendingValue = undefined;
+        projection = new NativeText('');
+        secondary = selections.length > 1;
+        whole = null;
+        written = '';
+        state.selections.splice(0, state.selections.$length, ...selections.map((range) => ({ ...range })));
+        Object.assign(state, single, { selection: { ...single.selection } });
+        gestures.reset();
+        jump.state.open = false;
+        map.invalidate();
+        references();
+        if (unsubscribe) {
+            subscribe();
+        }
+        search.result();
+    }
+    function capture() {
+        if (disposed || !textarea || !active || !editing || ime.busy() || writing || textarea.value !== written) {
+            return;
+        }
+        let base = active.from, next = {
+            direction: textarea.selectionDirection,
+            end: base + projection.toSource(textarea.selectionEnd),
+            start: base + projection.toSource(textarea.selectionStart)
+        };
+        let primary = model.selection;
+        if (next.start === primary.start &&
+            next.end === primary.end &&
+            (next.start === next.end || next.direction === primary.direction || primary.direction === 'none')) {
+            return;
+        }
+        model.selectMany([next, ...model.selections.slice(1)]);
+    }
+    function caretAfter(edit, after, direction) {
+        let base = active.from, next = new NativeText(fieldSource.slice(0, edit.from) + edit.insert + fieldSource.slice(edit.to));
+        return { direction, end: base + next.toSource(after.end), start: base + next.toSource(after.start) };
+    }
+    function clientRect(offset) {
+        if (!surface) {
+            return null;
+        }
+        current();
+        let box = surface.getBoundingClientRect(), originX = box.left + surface.clientLeft - surface.scrollLeft, originY = box.top + surface.clientTop - surface.scrollTop;
+        if (active && editing && geometry && offset >= active.from && offset <= active.to) {
+            let rect = geometry.rect(projection.toNative(offset - active.from));
+            return {
+                height: rect.height,
+                left: originX + fieldLeft() + rect.left,
+                top: originY + metrics.padTop + layout.top(activeIndex) + rect.top,
+                width: rect.width
+            };
+        }
+        let index = layout.indexOf(offset), unit = layout.units[index];
+        if (!unit) {
+            return null;
+        }
+        let rects = textRects(unit, offset, offset);
+        if (rects.length) {
+            return rects[0];
+        }
+        return { height: metrics.lineHeight, left: originX + metrics.padLeft, top: originY + metrics.padTop + layout.top(index), width: 1 };
+    }
+    function clip(e, cut) {
+        if (disposed || ime.busy() || !e.clipboardData) {
+            return;
+        }
+        capture();
+        let ranges = copied(model);
+        write(e.clipboardData, model, ranges);
+        e.preventDefault();
+        if (cut && !options.readonly) {
+            model.selectMany(ranges);
+            controller.insert('');
+        }
+    }
+    function connect() {
+        if (disposed || !host || !ruler || !surface || !textarea || unsubscribe) {
+            return;
+        }
+        measure();
+        subscribe();
+        refresh();
+        unitsDirty = true;
+        schedule();
+        void host.ownerDocument.fonts?.ready.then(() => {
+            if (!disposed) {
+                measure();
+            }
+        });
+        receive?.(controller);
+    }
+    function contentStart(unit) {
+        return unit.block.from + (unit.rows ? unit.rows[0].contentFrom : unit.block.contentFrom - unit.block.from);
+    }
+    function current() {
+        if (unitsDirty) {
+            rebuild();
+        }
+    }
+    function deactivate() {
+        if (!editing) {
+            return;
+        }
+        ime.flush();
+        editing = false;
+        drag = null;
+        ui.editing = false;
+        gestures.reset();
+        refresh();
+        schedule();
+    }
+    function decorate() {
+        let items = [], ranges = model.selections, matches = search.state.open || search.state.query ? search.result() : null;
+        if (ranges.length < 2 && !drag && dropAt === null && !matches?.matches.length) {
+            if (decorations.$length) {
+                decorations.splice(0, decorations.$length);
+            }
+            return;
+        }
+        let box = surface.getBoundingClientRect(), originX = box.left + surface.clientLeft - surface.scrollLeft, originY = box.top + surface.clientTop - surface.scrollTop, units = layout.units, view = layout.window(metrics.scrollTop - metrics.padTop, metrics.clientHeight, 0), from = units[view.start] ? unitStart(units[view.start]) : 0, to = view.end < units.length ? unitStart(units[view.end]) : model.value.length;
+        let mark = (start, end, kind) => {
+            if (end < from || start > to || items.length >= DECORATIONS) {
+                return;
+            }
+            let rects = rangeRects(Math.max(start, from), Math.min(end, to));
+            for (let i = 0, n = rects.length; i < n && items.length < DECORATIONS; i++) {
+                let rect = rects[i];
+                items.push({
+                    kind,
+                    style: `height: ${rect.height}px; left: ${rect.left - originX}px; top: ${rect.top - originY}px;${start === end ? '' : ` width: ${Math.max(1, rect.width)}px;`}`
+                });
+            }
+        };
+        if (matches) {
+            let { index, matches: list } = search.matches(from);
+            for (let i = index, n = list.length; i < n && list[i].from <= to && items.length < DECORATIONS; i++) {
+                mark(list[i].from, list[i].to, i === search.state.index ? 'markdown-editor-mark markdown-editor-mark--match --active' : 'markdown-editor-mark markdown-editor-mark--match');
+            }
+        }
+        for (let i = 1, n = ranges.length; i < n; i++) {
+            let range = ranges[i];
+            if (range.start !== range.end) {
+                mark(range.start, range.end, 'markdown-editor-mark markdown-editor-mark--selection');
+            }
+            let head = range.direction === 'backward' ? range.start : range.end;
+            mark(head, head, 'markdown-editor-mark markdown-editor-mark--caret');
+        }
+        if (drag) {
+            mark(Math.min(drag.anchor, drag.head), Math.max(drag.anchor, drag.head), 'markdown-editor-mark markdown-editor-mark--selection');
+        }
+        if (dropAt !== null) {
+            mark(dropAt, dropAt, 'markdown-editor-mark markdown-editor-mark--caret');
+        }
+        while (decorations.$length < items.length) {
+            decorations.push(new ReactiveObject_1ayo7z91());
+        }
+        if (decorations.$length > items.length) {
+            decorations.splice(items.length, decorations.$length - items.length);
+        }
+        for (let i = 0, n = items.length; i < n; i++) {
+            decorations[i].kind = items[i].kind;
+            decorations[i].style = items[i].style;
+        }
+    }
+    function editable(run) {
+        if (disposed || options.readonly || ime.busy()) {
+            return false;
+        }
+        capture();
+        revealFolds(true);
+        let changed = run();
+        start(true);
+        return changed;
+    }
+    function fieldGeometry() {
+        if (!active) {
+            geometry = null;
+            return;
+        }
+        let block = blocks[active.first], scale = headingScale(block.level), fontSize = metrics.fontSize * scale, lineHeight = block.level && block.level <= 2 ? fontSize * SCALED_LINE : metrics.lineHeight, wrap = options.wrap !== false, width = Math.max(1, metrics.width - block.quoteDepth * metrics.quoteIndent);
+        geometry = new EditorLayout(projection, fieldSource, wrap ? width : Number.MAX_SAFE_INTEGER, lineHeight, metrics.charWidth * scale, options.tabSize ?? 4, wrap);
+        estimated = false;
+        if (wrap) {
+            for (let i = 0, n = geometry.count; i < n && !estimated; i++) {
+                estimated = geometry.estimated(i);
+            }
+        }
+        let height = Math.max(lineHeight, geometry.height), widest = 0;
+        if (!wrap) {
+            for (let i = 0, n = geometry.count; i < n; i++) {
+                widest = Math.max(widest, geometry.end(i) - geometry.lineFrom(i));
+            }
+        }
+        ui.height = height;
+        ui.input = `markdown-editor-input markdown-editor-input--${block.kind}${block.level ? ` markdown-editor-input--h${block.level}` : ''}${block.quoteDepth ? ' markdown-editor-input--quoted' : ''}`;
+        ui.style = `--depth: ${block.quoteDepth};${wrap ? '' : ` --field-width: ${Math.ceil((widest + 1) * metrics.charWidth * scale)}px;`}`;
+        layout.measure(activeUnit, height);
+    }
+    function fieldLeft() {
+        return metrics.padLeft + (active ? blocks[active.first].quoteDepth * metrics.quoteIndent : 0);
+    }
+    function fieldRects(from, to, out) {
+        if (!active || !geometry || !surface) {
+            return;
+        }
+        let box = surface.getBoundingClientRect(), x = box.left + surface.clientLeft - surface.scrollLeft + fieldLeft(), y = box.top + surface.clientTop - surface.scrollTop + metrics.padTop + layout.top(activeIndex), end = geometry.rect(projection.toNative(clamp(to, active.from, active.to) - active.from)), start = geometry.rect(projection.toNative(clamp(from, active.from, active.to) - active.from)), lineHeight = geometry.lineHeight;
+        if (from === to) {
+            out.push({ height: lineHeight, left: x + start.left, top: y + start.top, width: 1 });
+            return;
+        }
+        for (let top = start.top; top <= end.top && out.length < DECORATIONS; top += lineHeight) {
+            let left = top === start.top ? start.left : 0, right = top === end.top ? end.left : geometry.width;
+            out.push({ height: lineHeight, left: x + left, top: y + top, width: Math.max(1, right - left) });
+        }
+    }
+    function finish() {
+        if (!drag) {
+            return;
+        }
+        let { anchor, head } = drag;
+        drag = null;
+        model.select({ direction: head < anchor ? 'backward' : 'forward', end: Math.max(anchor, head), start: Math.min(anchor, head) });
+        activate(true);
+    }
+    function inlineOf(block) {
+        let entry = inlines.get(block);
+        if (!entry || entry.definitions !== definitions) {
+            let base = block.from, text = model.value.slice(block.contentFrom, block.contentTo);
+            entry = {
+                definitions,
+                tokens: parseInline(text, block.contentFrom - base, 0, block.definitions ? new Map() : definitions)
+            };
+            inlines.set(block, entry);
+        }
+        return entry.tokens;
+    }
+    function kindAt(offset) {
+        return blocks[blockAt(blocks, offset)]?.kind;
+    }
+    function leaves(key) {
+        if (!active || !geometry || !textarea) {
+            return false;
+        }
+        let head = textarea.selectionDirection === 'backward' ? textarea.selectionStart : textarea.selectionEnd;
+        if (key === 'ArrowLeft') {
+            return head === 0 && active.from > 0;
+        }
+        if (key === 'ArrowRight') {
+            return head === textarea.textLength && active.to < model.value.length;
+        }
+        let rect = geometry.rect(head);
+        if (key === 'ArrowUp') {
+            return rect.top < geometry.lineHeight / 2 && active.from > 0;
+        }
+        return rect.top + geometry.lineHeight >= geometry.height - 0.5 && active.to < model.value.length;
+    }
+    function linesOf(index) {
+        let units = layout.units, from = unitStart(units[index]), to = index + 1 < units.length ? unitStart(units[index + 1]) - 1 : model.value.length;
+        return { first: model.lineAt(from), last: model.lineAt(Math.max(from, to)) };
+    }
+    function markFoldable(from, to) {
+        let units = layout.units;
+        for (let i = from; i < to; i++) {
+            let unit = units[i], state = draw.state(unit);
+            if (!state) {
+                continue;
+            }
+            let next = opens(unit);
+            if (state.foldable !== next) {
+                state.foldable = next;
+            }
+        }
+    }
+    function measure() {
+        if (disposed || !host || !ruler || !surface || !textarea) {
+            return;
+        }
+        let computed = getComputedStyle(surface), style = getComputedStyle(host), fallback = style.getPropertyValue('--color').trim() || 'currentColor', colors = {}, padLeft = pixels(computed.paddingLeft), fontSize = pixels(computed.fontSize) || 13;
+        metrics = {
+            charWidth: ruler.getBoundingClientRect().width / (ruler.textContent?.length || 1) || 7.8,
+            clientHeight: surface.clientHeight,
+            fontSize,
+            lineHeight: pixels(computed.lineHeight) || fontSize * 1.5,
+            minimap: pixels(style.getPropertyValue('--minimap-width')),
+            padLeft,
+            padTop: pixels(computed.paddingTop),
+            quoteIndent: pixels(style.getPropertyValue('--quote-indent')),
+            scrollLeft: surface.scrollLeft,
+            scrollTop: surface.scrollTop,
+            width: surface.getBoundingClientRect().width - (surface.offsetWidth - surface.clientWidth) - padLeft - pixels(computed.paddingRight)
+        };
+        for (let i = 0, n = TOKEN_COLORS.length; i < n; i++) {
+            colors[TOKEN_COLORS[i]] = style.getPropertyValue(`--${TOKEN_COLORS[i]}-color`).trim() || fallback;
+        }
+        palette = colors;
+        if (layout.configure({
+            charWidth: metrics.charWidth,
+            fontSize: metrics.fontSize,
+            lineHeight: metrics.lineHeight,
+            quoteIndent: metrics.quoteIndent,
+            width: metrics.width
+        })) {
+            whole = null;
+            fieldGeometry();
+            map.invalidate();
+            unitsDirty = true;
+        }
+        schedule();
+    }
+    function moveSelection(key, extend, word = false, add = false, boundary = false) {
+        if (!VERTICAL.test(key) || boundary || add) {
+            goals = [];
+        }
+        if (!whole || whole.revision !== model.revision) {
+            let native = new NativeText(model.value);
+            whole = {
+                layout: new EditorLayout(native, model.value, Number.MAX_SAFE_INTEGER, metrics.lineHeight, metrics.charWidth, options.tabSize ?? 4, false),
+                projection: native,
+                revision: model.revision
+            };
+        }
+        let lineHeight = metrics.lineHeight, ranges = move(model, whole.layout, whole.projection, lineHeight, {
+            boundary,
+            extend,
+            goals,
+            key,
+            page: Math.max(lineHeight, metrics.clientHeight - lineHeight),
+            word
+        });
+        model.selectMany(add ? [...model.selections, ...ranges] : ranges, 'navigation');
+        start(true);
+    }
+    function offsetAt(clientX, clientY) {
+        if (disposed || !surface) {
+            return null;
+        }
+        current();
+        let box = surface.getBoundingClientRect();
+        if (box.width && (clientX < box.left || clientX > box.right || clientY < box.top || clientY > box.bottom)) {
+            return null;
+        }
+        if (active && editing && textarea && geometry) {
+            let field = textarea.getBoundingClientRect();
+            if (clientY >= field.top && clientY < field.bottom) {
+                return active.from + projection.toSource(geometry.offset(clientX - field.left + textarea.scrollLeft, clientY - field.top));
+            }
+        }
+        let point = pointAt(clientX, clientY);
+        if (point !== null) {
+            return point;
+        }
+        let under = host.ownerDocument.elementFromPoint(clientX, clientY)?.closest('.markdown-editor-block'), unit = under && shown.get(under);
+        if (unit) {
+            return contentStart(unit);
+        }
+        let index = layout.at(clientY - box.top - surface.clientTop + surface.scrollTop - metrics.padTop);
+        return layout.units[index] ? contentStart(layout.units[index]) : null;
+    }
+    function opens(unit) {
+        return options.fold !== false && !unit.continuation && !unit.raw && !unit.fold && foldable(blocks, blockAt(blocks, unit.block.from), model.value);
+    }
+    function paint() {
+        frame = 0;
+        if (disposed || !surface) {
+            return;
+        }
+        current();
+        if (estimated && textarea && editing) {
+            flush();
+            let height = textarea.scrollHeight;
+            if (height > ui.height + 0.5) {
+                ui.height = height;
+                layout.measure(activeUnit, height);
+            }
+            estimated = false;
+        }
+        if (revealing) {
+            revealing = false;
+            reveal();
+        }
+        let n = layout.units.length, a = activeIndex, view = layout.window(metrics.scrollTop - metrics.padTop, metrics.clientHeight), split = a < 0 ? n : a, s1 = Math.min(view.start, split), e1 = Math.min(view.end, split), s2 = Math.max(view.start, split + 1), e2 = Math.max(view.end, s2);
+        if (a < 0) {
+            s2 = e2 = n;
+        }
+        if (view.start > split) {
+            s1 = e1 = split;
+        }
+        assign(listed.before, layout.units.slice(s1, e1));
+        assign(listed.after, layout.units.slice(s2, e2));
+        ui.top = layout.top(s1);
+        ui.between = a < 0 ? 0 : layout.top(split) - layout.top(e1);
+        ui.next = a < 0 ? 0 : layout.top(s2) - layout.top(a + 1);
+        ui.bottom = layout.total - layout.top(a < 0 ? e1 : e2);
+        ui.foldable = !!active && options.fold !== false && foldable(blocks, active.first, model.value);
+        markFoldable(s1, e1);
+        markFoldable(s2, e2);
+        queueMicrotask(() => {
+            if (!disposed) {
+                decorate();
+            }
+        });
+        if (options.minimap) {
+            if (layout.total !== drawn) {
+                drawn = layout.total;
+                map.invalidate();
+            }
+            map.paint(source, { clientHeight: metrics.clientHeight, scrollHeight: layout.total + 2 * metrics.padTop, scrollTop: metrics.scrollTop }, palette, metrics.minimap);
+        }
+    }
+    function pointAt(clientX, clientY) {
+        let doc = host.ownerDocument, point = doc.caretPositionFromPoint?.(clientX, clientY), range = point ? null : doc.caretRangeFromPoint?.(clientX, clientY);
+        return draw.offset(point?.offsetNode ?? range?.startContainer ?? null, point?.offset ?? range?.startOffset ?? 0);
+    }
+    function present() {
+        if (disposed || !surface) {
+            return;
+        }
+        if (frame) {
+            cancelAnimationFrame(frame);
+        }
+        paint();
+        flush();
+        surface.scrollLeft = metrics.scrollLeft;
+        surface.scrollTop = metrics.scrollTop;
+    }
+    function press(e, unit) {
+        if (disposed || ime.busy() || e.button !== 0 || e.altKey || e.defaultPrevented) {
+            return;
+        }
+        let target = e.target;
+        if ((e.ctrlKey || e.metaKey) && target.closest('a')) {
+            return;
+        }
+        e.preventDefault();
+        let offset = pointAt(e.clientX, e.clientY) ?? (unit ? contentStart(unit) : offsetAt(e.clientX, e.clientY) ?? 0), selection = model.selection;
+        drag = {
+            anchor: e.shiftKey ? (selection.direction === 'backward' ? selection.end : selection.start) : offset,
+            head: offset
+        };
+        if (pointerId >= 0 && surface?.isConnected) {
+            try {
+                surface.setPointerCapture(pointerId);
+            }
+            catch {
+            }
+        }
+        schedule();
+    }
+    function rangeRects(from, to) {
+        let out = [], units = layout.units, first = layout.indexOf(from), last = layout.indexOf(to);
+        for (let i = first; i <= last && out.length < DECORATIONS; i++) {
+            let unit = units[i];
+            if (unit === activeUnit) {
+                fieldRects(from, to, out);
+            }
+            else {
+                let rects = textRects(unit, from, to);
+                for (let j = 0, n = rects.length; j < n; j++) {
+                    out.push(rects[j]);
+                }
+            }
+        }
+        return out;
+    }
+    function rebuild() {
+        let raw = null, ranges = model.selections;
+        if (ranges.length > 1) {
+            raw = new Set();
+            for (let i = 1, n = ranges.length; i < n; i++) {
+                for (let b = blockAt(blocks, ranges[i].start), e = blockAt(blocks, ranges[i].end); b <= e; b++) {
+                    raw.add(b);
+                }
+            }
+        }
+        if (active) {
+            activeUnit.block = blocks[active.first];
+        }
+        let list = arrange(blocks, model.value, options.fold === false ? [] : folds, units, active && editing ? { first: active.first, last: active.last, unit: activeUnit } : null, raw ? (index) => raw.has(index) : null);
+        layout.set(list, model.value);
+        activeIndex = -1;
+        if (active && editing) {
+            let index = layout.indexOf(active.from);
+            activeIndex = list[index] === activeUnit ? index : list.indexOf(activeUnit);
+        }
+        unitsDirty = false;
+    }
+    function references() {
+        let next = new Map();
+        for (let i = 0, n = blocks.length; i < n; i++) {
+            let block = blocks[i];
+            if (!block.definitions) {
+                continue;
+            }
+            for (let [label, href] of markdownReferences(model.value.slice(block.contentFrom, block.contentTo))) {
+                if (!next.has(label)) {
+                    next.set(label, href);
+                }
+            }
+        }
+        definitions = next;
+        units = cache();
+        unitsDirty = true;
+    }
+    function refresh() {
+        if (disposed) {
+            return;
+        }
+        if (!editing || !blocks.length) {
+            if (active) {
+                active = null;
+                geometry = null;
+                unitsDirty = true;
+            }
+            return;
+        }
+        let selection = model.selection, first = blockAt(blocks, selection.start), last = blockAt(blocks, selection.end) + 1;
+        if (pinned && active && active.last <= blocks.length) {
+            first = Math.min(first, active.first);
+            last = Math.max(last, active.last);
+        }
+        let from = blocks[first].from, to = Math.max(selection.end, contentEnd(model.value, blocks[last - 1]));
+        if (!active || active.first !== first || active.last !== last) {
+            unitsDirty = true;
+        }
+        active = { first, from, last, to };
+        let text = model.value.slice(from, to), shaped = fieldSource !== text || !geometry;
+        if (fieldSource !== text) {
+            fieldSource = text;
+            projection = new NativeText(text);
+        }
+        if (shaped || activeUnit.block !== blocks[first]) {
+            activeUnit.block = blocks[first];
+            fieldGeometry();
+        }
+        if (!textarea || ime.busy()) {
+            return;
+        }
+        if (written !== projection.value) {
+            writing = true;
+            try {
+                writeField(textarea, written, projection.value, null);
+            }
+            finally {
+                writing = false;
+            }
+            written = projection.value;
+        }
+        let nativeEnd = projection.toNative(clamp(selection.end - from, 0, text.length)), nativeStart = projection.toNative(clamp(selection.start - from, 0, text.length));
+        if (textarea.selectionStart !== nativeStart ||
+            textarea.selectionEnd !== nativeEnd ||
+            (nativeStart !== nativeEnd && selection.direction !== 'none' && textarea.selectionDirection !== selection.direction)) {
+            textarea.setSelectionRange(nativeStart, nativeEnd, selection.direction);
+        }
+    }
+    function reparseBlocks() {
+        let deltas = model.deltas(parsed), previous = length;
+        length = model.value.length;
+        parsed = model.revision;
+        if (!deltas) {
+            blocks = parseMarkdown(model);
+            map.invalidate();
+            references();
+            return false;
+        }
+        if (!deltas.length) {
+            return true;
+        }
+        let end = -1, moved = 0, start = Number.MAX_SAFE_INTEGER;
+        for (let i = 0, n = deltas.length; i < n; i++) {
+            let { inserted, line, removed } = deltas[i];
+            moved += inserted - removed;
+            if (end < 0) {
+                end = line + inserted;
+                start = line;
+                continue;
+            }
+            if (end >= line + removed) {
+                end += inserted - removed;
+            }
+            else if (end > line) {
+                end = line + inserted;
+            }
+            end = Math.max(end, line + inserted);
+            start = Math.min(start, line);
+        }
+        let count = model.lineCount, from = model.lineStart(Math.min(start, count - 1)), to = end < count ? model.lineStart(end) : length, splice = reparse(blocks, model, from, to, length - previous), changed = false;
+        for (let i = 0, n = splice.dropped.length; !changed && i < n; i++) {
+            changed = !!splice.dropped[i].definitions;
+        }
+        for (let i = splice.start, n = splice.start + splice.inserted; !changed && i < n; i++) {
+            changed = !!blocks[i].definitions;
+        }
+        if (changed) {
+            map.invalidate();
+            references();
+            return false;
+        }
+        if (moved) {
+            map.invalidate();
+        }
+        else {
+            map.invalidate(start, end);
+        }
+        return !!active &&
+            editing &&
+            splice.dropped.length === splice.inserted &&
+            splice.start >= active.first &&
+            splice.start + splice.inserted <= active.last;
+    }
+    function reset() {
+        before = null;
+        beforeRanges = [];
+        beforeSelection = undefined;
+        inputData = null;
+        inputType = '';
+    }
+    function resized(entries) {
+        if (disposed) {
+            return;
+        }
+        current();
+        let anchor = layout.at(metrics.scrollTop - metrics.padTop), changed = false, shift = 0;
+        for (let i = 0, n = entries.length; i < n; i++) {
+            let entry = entries[i], unit = shown.get(entry.target);
+            if (!unit) {
+                continue;
+            }
+            let height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.offsetHeight, previous = layout.height(unit);
+            if (layout.measure(unit, height)) {
+                changed = true;
+                if (layout.indexOf(unitStart(unit)) < anchor) {
+                    shift += height - previous;
+                }
+            }
+        }
+        if (shift) {
+            scrollTo(metrics.scrollTop + shift);
+        }
+        if (changed) {
+            schedule();
+        }
+    }
+    function resync() {
+        written = '';
+        refresh();
+        schedule();
+    }
+    function reveal() {
+        let selection = model.selection, head = selection.direction === 'backward' ? selection.start : selection.end, height = metrics.lineHeight, y;
+        if (active && editing && geometry && head >= active.from && head <= active.to) {
+            let rect = geometry.rect(projection.toNative(head - active.from));
+            height = rect.height;
+            y = metrics.padTop + layout.top(activeIndex) + rect.top;
+            if (options.wrap === false && surface) {
+                let x = fieldLeft() + rect.left;
+                if (x < metrics.scrollLeft + metrics.padLeft) {
+                    surface.scrollLeft = metrics.scrollLeft = Math.max(0, x - metrics.padLeft);
+                }
+                else if (x + metrics.padLeft > metrics.scrollLeft + metrics.width) {
+                    surface.scrollLeft = metrics.scrollLeft = x + metrics.padLeft - metrics.width;
+                }
+            }
+        }
+        else {
+            let index = layout.indexOf(head), unit = layout.units[index];
+            if (!unit) {
+                return;
+            }
+            y = metrics.padTop + layout.top(index);
+            height = Math.min(layout.height(unit), metrics.clientHeight);
+        }
+        if (y < metrics.scrollTop) {
+            scrollTo(y - metrics.padTop);
+        }
+        else if (y + height > metrics.scrollTop + metrics.clientHeight) {
+            scrollTo(y + height + metrics.padTop - metrics.clientHeight);
+        }
+    }
+    function revealFolds(edit = false) {
+        if (!folds.length) {
+            return;
+        }
+        let ranges = model.selections, next = folds.filter((fold) => !ranges.some((range) => (range.start >= fold.from && range.start < fold.to) ||
+            (range.end > fold.from && range.end <= fold.to) ||
+            (edit && range.start < fold.to && range.end > fold.from)));
+        if (next.length !== folds.length) {
+            folds = next;
+            unitsDirty = true;
+        }
+    }
+    function rowsBetween(from, to) {
+        let out = [];
+        if (!surface) {
+            return out;
+        }
+        let left = surface.getBoundingClientRect().left + metrics.padLeft, a = offsetAt(left, from), b = offsetAt(left, to);
+        if (a === null || b === null) {
+            return out;
+        }
+        for (let line = model.lineAt(Math.min(a, b)), last = model.lineAt(Math.max(a, b)); line <= last && out.length < 1000; line++) {
+            let rect = clientRect(model.lineStart(line));
+            if (rect) {
+                out.push(rect.top + rect.height / 2);
+            }
+        }
+        return out;
+    }
+    function schedule() {
+        if (!disposed && !frame && surface) {
+            frame = requestAnimationFrame(paint);
+        }
+    }
+    function scrollTo(top) {
+        if (!surface) {
+            return;
+        }
+        surface.scrollTop = Math.max(0, top);
+        metrics.scrollTop = surface.scrollTop;
+        schedule();
+    }
+    function start(reveal) {
+        if (!editing) {
+            activate(false);
+        }
+        revealing ||= reveal;
+        schedule();
+    }
+    function subscribe() {
+        unsubscribe?.();
+        unsubscribe = model.subscribe((snapshot, change) => {
+            if (change.source !== 'navigation') {
+                goals = [];
+            }
+            let { selections, ...single } = snapshot;
+            state.selections.splice(0, state.selections.$length, ...selections.map((range) => ({ ...range })));
+            Object.assign(state, single, { selection: { ...snapshot.selection } });
+            if (change.textChanged) {
+                ime.conflict();
+                textChanged(change);
+            }
+            if (change.selectionChanged) {
+                revealFolds();
+                unitsDirty ||= secondary || selections.length > 1;
+                secondary = selections.length > 1;
+            }
+            refresh();
+            schedule();
+            if (change.selectionChanged) {
+                callbacks.onSelection?.(snapshot.selection, model.position());
+            }
+            if (change.textChanged) {
+                callbacks.onChange?.(snapshot.value, change, snapshot);
+            }
+        });
+    }
+    function textChanged(change) {
+        let local = reparseBlocks();
+        if (folds.length) {
+            folds = outerFolds(mapFolds(folds, change.editBatches ?? [], model));
+            local = false;
+        }
+        whole = null;
+        unitsDirty ||= !local || secondary;
+    }
+    function textRects(unit, from, to) {
+        let out = [], segments = draw.segments(unit);
+        if (!segments || !host) {
+            return out;
+        }
+        let range = host.ownerDocument.createRange();
+        for (let i = 0, n = segments.length; i < n; i++) {
+            let segment = segments[i], at = segment.block.from + segment.from, end = at + segment.node.length;
+            if (end < from || at > to || (from !== to && (end === from || at === to))) {
+                continue;
+            }
+            range.setStart(segment.node, clamp(from - at, 0, segment.node.length));
+            range.setEnd(segment.node, clamp(to - at, 0, segment.node.length));
+            let rects = range.getClientRects();
+            for (let j = 0, m = rects.length; j < m; j++) {
+                out.push({ height: rects[j].height, left: rects[j].left, top: rects[j].top, width: rects[j].width });
+            }
+            if (from === to && out.length) {
+                break;
+            }
+        }
+        return out;
+    }
+    let controller = {
+        addNextOccurrence: (all = false) => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            capture();
+            let changed = addNextOccurrence(model, all);
+            start(true);
+            return changed;
+        },
+        bold: () => editable(() => markdownCommand(model, 'bold', kindAt)),
+        closeFind: () => search.close(),
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            try {
+                ime.flush();
+            }
+            finally {
+                disposed = true;
+                if (frame) {
+                    cancelAnimationFrame(frame);
+                    frame = 0;
+                }
+                unsubscribe?.();
+                unsubscribe = undefined;
+                resize?.disconnect();
+                resize = undefined;
+                size.ondisconnect();
+                pendingValue = undefined;
+            }
+        },
+        get document() {
+            return model;
+        },
+        find: (query, next) => search.find(query, next),
+        findNext: () => search.next(),
+        findPrevious: () => search.previous(),
+        focus: () => {
+            if (!disposed) {
+                activate(true);
+            }
+        },
+        fold: (line) => {
+            if (disposed || ime.busy() || options.fold === false) {
+                return false;
+            }
+            let target = line === undefined ? model.position().line : line, index = blockAt(blocks, model.lineStart(target - 1)), range = line === undefined || blocks[index].from === model.lineStart(target - 1) ? foldAt(model, blocks, index) : null;
+            if (!range || folds.some((fold) => fold.from === range.from && fold.to === range.to)) {
+                return false;
+            }
+            folds = outerFolds([...folds, range]);
+            if (model.selections.some((selection) => (selection.start >= range.from && selection.start < range.to) || (selection.end > range.from && selection.end <= range.to))) {
+                model.select({ start: range.open ?? range.from });
+            }
+            if (active && range.from < blocks[active.last - 1].to && range.to > active.from) {
+                deactivate();
+                textarea?.blur();
+            }
+            unitsDirty = true;
+            schedule();
+            return true;
+        },
+        foldAll: () => {
+            if (disposed || ime.busy() || options.fold === false) {
+                return;
+            }
+            model.select({ start: 0 });
+            folds = outerFolds(markdownFolds(model, blocks));
+            deactivate();
+            textarea?.blur();
+            unitsDirty = true;
+            schedule();
+        },
+        goToLine: (line, column = 1) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.select({ start: model.offset(line, column) });
+            revealing = true;
+            controller.focus();
+        },
+        get host() {
+            return host;
+        },
+        indent: () => editable(() => indent(model, options.indent)),
+        insert: (text) => editable(() => insertText(model, text)),
+        italic: () => editable(() => markdownCommand(model, 'italic', kindAt)),
+        lineCommand: (command) => editable(() => lineCommand(model, command)),
+        newline: () => editable(() => markdownCommand(model, 'enter', kindAt)),
+        offsetAt,
+        openFind: (replace = false) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            jump.state.open = false;
+            search.open(replace);
+            schedule();
+        },
+        openGoToLine: () => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            capture();
+            search.state.open = false;
+            jump.open(model.position().line);
+        },
+        outdent: () => editable(() => indent(model, options.indent, true)),
+        rectAt: (offset) => {
+            if (disposed || offset < 0 || offset > model.value.length || folds.some((fold) => offset >= fold.from && offset < fold.to)) {
+                return null;
+            }
+            return clientRect(offset);
+        },
+        redo: () => editable(() => model.redo()),
+        redoSelection: () => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            let changed = model.redoSelection();
+            start(true);
+            return changed;
+        },
+        refresh: () => {
+            if (!disposed) {
+                measure();
+                fieldGeometry();
+                unitsDirty = true;
+                schedule();
+            }
+        },
+        replace: (replacement) => search.replace(replacement),
+        replaceAll: (replacement) => search.replaceAll(replacement),
+        save: () => {
+            if (!disposed && !ime.busy()) {
+                callbacks.onSave?.(model.value, model.state);
+            }
+        },
+        select: (next, reveal = true) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.select(next);
+            start(reveal);
+        },
+        selectMany: (ranges, reveal = true) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.selectMany(ranges);
+            start(reveal);
+        },
+        setDocument: (next, settings) => {
+            if (disposed) {
+                return;
+            }
+            if (next === model) {
+                controller.setOptions(settings ?? {}, !!settings);
+                return;
+            }
+            let focused = editing && !!textarea && host?.ownerDocument.activeElement === textarea;
+            deactivate();
+            if (surface) {
+                visited.set(model, { folds, left: metrics.scrollLeft, revision: model.revision, top: metrics.scrollTop });
+            }
+            model = next;
+            adopt();
+            controller.setOptions(settings ?? {}, !!settings);
+            present();
+            if (focused) {
+                activate(true);
+            }
+        },
+        setOptions: (next, replace = false) => {
+            if (disposed) {
+                return;
+            }
+            options = { ...(replace ? {} : options), ...next };
+            options.tabSize = clamp(Math.trunc(options.tabSize ?? 4) || 4, 1, 16);
+            if (!options.indent || !/^[\t ]+$/.test(options.indent)) {
+                options.indent = '    ';
+            }
+            ui.label = options.label ?? 'Markdown editor';
+            ui.minimap = !!options.minimap;
+            ui.name = options.name ?? '';
+            ui.placeholder = options.placeholder ?? '';
+            ui.readonly = !!options.readonly;
+            ui.spellcheck = options.spellcheck ?? true;
+            ui.tabSize = options.tabSize;
+            ui.wrap = options.wrap !== false;
+            search.status();
+            if (options.fold === false) {
+                folds = [];
+            }
+            whole = null;
+            fieldGeometry();
+            map.invalidate();
+            unitsDirty = true;
+            schedule();
+        },
+        setValue: (value) => {
+            if (disposed) {
+                return false;
+            }
+            if (ime.busy()) {
+                pendingValue = value;
+                return false;
+            }
+            return model.setValue(value, { source: 'external' });
+        },
+        get scroller() {
+            return surface;
+        },
+        get state() {
+            return state;
+        },
+        get textarea() {
+            return textarea;
+        },
+        toggleComment: () => editable(() => toggleComment(model, options.lineComment ?? false, options.blockComment ?? ['<!--', '-->'])),
+        undo: () => editable(() => model.undo()),
+        undoSelection: () => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            let changed = model.undoSelection();
+            start(true);
+            return changed;
+        },
+        unfold: (line = model.position().line) => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            let next = folds.filter((fold) => fold.line !== line);
+            if (next.length === folds.length) {
+                return false;
+            }
+            folds = next;
+            unitsDirty = true;
+            schedule();
+            return true;
+        },
+        unfoldAll: () => {
+            if (disposed || ime.busy() || !folds.length) {
+                return;
+            }
+            folds = [];
+            unitsDirty = true;
+            schedule();
+        }
+    };
+    let run = commands({
+        cache: () => syntaxCache(model, 'markdown'),
+        capture,
+        controller: controller,
+        deleteVisible: (backwards, word) => deleteCharacter(model, backwards, word),
+        get document() {
+            return model;
+        },
+        edit: editable,
+        language: () => 'markdown',
+        move: moveSelection,
+        options: () => options,
+        select: (selection) => {
+            model.select(selection);
+            start(true);
+        }
+    });
+    let field = {
+        'aria-describedby': help,
+        'aria-label': () => ui.label,
+        class: () => ui.input,
+        name: () => ui.name,
+        onbeforeinput: (e) => {
+            if (writing || ime.busy() || e.isComposing || !textarea) {
+                return;
+            }
+            capture();
+            revealFolds(!e.inputType.startsWith('history') && !options.readonly);
+            before = { end: textarea.selectionEnd, length: textarea.textLength, start: textarea.selectionStart };
+            beforeRanges = model.selections;
+            beforeSelection = model.selection;
+            inputData = e.data;
+            inputType = e.inputType;
+            if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
+                if (e.cancelable) {
+                    e.preventDefault();
+                    e.inputType === 'historyUndo' ? controller.undo() : controller.redo();
+                }
+                return;
+            }
+            if (!e.cancelable || options.readonly) {
+                return;
+            }
+            if (model.selections.length > 1) {
+                if (e.inputType === 'insertText' && e.data !== null) {
+                    e.preventDefault();
+                    editable(() => insertText(model, e.data, 'input'));
+                    return;
+                }
+                if (/^delete(?:Content|Word)(?:Backward|Forward)$/.test(e.inputType)) {
+                    e.preventDefault();
+                    editable(() => e.inputType === 'deleteContentBackward'
+                        ? markdownCommand(model, 'backspace', kindAt)
+                        : deleteCharacter(model, e.inputType.endsWith('Backward'), e.inputType.startsWith('deleteWord')));
+                    return;
+                }
+            }
+            if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+                e.preventDefault();
+                controller.newline();
+            }
+            else if (e.inputType === 'deleteContentBackward' && editable(() => markdownBackspace(model))) {
+                e.preventDefault();
+            }
+        },
+        oncompositionend: ime.attributes.oncompositionend,
+        oncompositionstart: ime.attributes.oncompositionstart,
+        oncopy: (e) => clip(e, false),
+        oncut: (e) => clip(e, true),
+        ondragstart: gestures.ondragstart,
+        onfocus: () => {
+            if (!editing) {
+                activate(false);
+            }
+            capture();
+        },
+        oninput: (e) => {
+            if (writing) {
+                return;
+            }
+            if (ime.input(e)) {
+                if (textarea && textarea.scrollHeight > ui.height) {
+                    ui.height = textarea.scrollHeight;
+                }
+                return;
+            }
+            if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
+                e.inputType === 'historyUndo' ? controller.undo() : controller.redo();
+                return;
+            }
+            accept();
+        },
+        onkeydown: (e) => {
+            gestures.alt(e);
+            if (ime.busy() || e.isComposing || e.keyCode === 229) {
+                return;
+            }
+            if (options.onCompletionKey?.(e, controller)) {
+                e.preventDefault();
+                return;
+            }
+            if (e.key === 'Escape') {
+                escapeTab = true;
+                if (model.selections.length > 1) {
+                    e.preventDefault();
+                    model.select(model.selection);
+                }
+                return;
+            }
+            if (e.key === 'Tab' && escapeTab) {
+                escapeTab = false;
+                return;
+            }
+            escapeTab = false;
+            capture();
+            let mod = apple ? e.metaKey : e.ctrlKey, key = e.key.toLowerCase();
+            if (mod && !e.altKey && !e.shiftKey && (key === 'b' || key === 'i')) {
+                e.preventDefault();
+                key === 'b' ? controller.bold() : controller.italic();
+                return;
+            }
+            let command = keys(e);
+            if (command) {
+                e.preventDefault();
+                run(command, e);
+                return;
+            }
+            if (mod) {
+                if (e.altKey || !NAVIGATION.test(e.key)) {
+                    return;
+                }
+                if (/^(End|Home)$/.test(e.key) || (apple && /^Arrow(Down|Up)$/.test(e.key))) {
+                    e.preventDefault();
+                    moveSelection(e.key, e.shiftKey, false, false, true);
+                }
+                else if (model.selections.length > 1 || (/^Arrow(Left|Right)$/.test(e.key) && leaves(e.key))) {
+                    e.preventDefault();
+                    moveSelection(e.key, e.shiftKey, true);
+                }
+                return;
+            }
+            if (e.key === 'Tab' && !e.altKey && options.captureTab !== false && !options.readonly) {
+                e.preventDefault();
+                e.shiftKey ? controller.outdent() : controller.indent();
+            }
+            else if (e.key === 'Enter' && !e.altKey && !options.readonly) {
+                e.preventDefault();
+                controller.newline();
+            }
+            else if ((e.key === 'Backspace' || e.key === 'Delete') && !options.readonly && model.selections.length > 1) {
+                e.preventDefault();
+                editable(() => e.key === 'Backspace' && !e.altKey
+                    ? markdownCommand(model, 'backspace', kindAt)
+                    : deleteCharacter(model, e.key === 'Backspace', e.altKey));
+            }
+            else if ((e.key === 'Backspace' || e.key === 'Delete') && !options.readonly && active) {
+                let selection = model.selection, collapsed = selection.start === selection.end;
+                if (e.key === 'Backspace' && collapsed && editable(() => markdownBackspace(model))) {
+                    e.preventDefault();
+                }
+                else if (e.key === 'Backspace' && collapsed && selection.start === active.from && active.from > 0) {
+                    e.preventDefault();
+                    editable(() => deleteCharacter(model, true, e.altKey));
+                }
+                else if (e.key === 'Delete' && collapsed && selection.end === active.to && active.to < model.value.length) {
+                    e.preventDefault();
+                    editable(() => deleteCharacter(model, false, e.altKey));
+                }
+            }
+            else if (NAVIGATION.test(e.key) && (model.selections.length > 1 || e.key.startsWith('Page') || leaves(e.key))) {
+                e.preventDefault();
+                moveSelection(e.key, e.shiftKey, e.altKey);
+            }
+        },
+        onkeyup: (e) => {
+            gestures.alt(e);
+            capture();
+        },
+        onpaste: (e) => {
+            if (ime.busy() || options.readonly || !e.clipboardData) {
+                return;
+            }
+            e.preventDefault();
+            let text = read(e.clipboardData, model.selections.length);
+            editable(() => insertText(model, text, 'paste'));
+        },
+        onpointerdown: () => {
+            goals = [];
+            pinned = true;
+        },
+        onpointerup: () => {
+            pinned = false;
+            capture();
+        },
+        onselect: capture,
+        onselectionchange: capture,
+        placeholder: () => ui.placeholder,
+        readOnly: () => ui.readonly,
+        spellcheck: () => ui.spellcheck,
+        style: () => `${ui.style} height: ${ui.height}px;`,
+        wrap: () => ui.wrap ? 'soft' : 'off'
+    };
+    let body = {
+        'aria-label': () => ui.label,
+        onclick: (e) => {
+            if (!(e.ctrlKey || e.metaKey) && e.target.closest('a')) {
+                e.preventDefault();
+            }
+        },
+        onconnect: (element) => {
+            surface = element;
+            connect();
+        },
+        ondragend: gestures.ondragend,
+        ondragleave: gestures.ondragleave,
+        ondragover: gestures.ondragover,
+        ondrop: gestures.ondrop,
+        onfocus: (e) => {
+            if (e.target === surface) {
+                controller.focus();
+            }
+        },
+        onlostpointercapture: () => {
+            gestures.end();
+            finish();
+        },
+        onmousedown: (e) => {
+            if (e.target === textarea || e.target.closest('.markdown-editor-block, .markdown-editor-active')) {
+                return;
+            }
+            press(e, null);
+        },
+        onpointercancel: () => {
+            gestures.end();
+            finish();
+        },
+        onpointerdown: (e) => {
+            pointerId = e.pointerId;
+            gestures.onpointerdown(e);
+        },
+        onpointermove: (e) => {
+            gestures.onpointermove(e);
+            if (!drag) {
+                return;
+            }
+            let offset = offsetAt(e.clientX, e.clientY);
+            if (offset !== null && offset !== drag.head) {
+                drag.head = offset;
+                schedule();
+            }
+        },
+        onpointerup: () => {
+            pinned = false;
+            pointerId = -1;
+            gestures.end();
+            finish();
+        },
+        onscroll: () => {
+            metrics.scrollLeft = surface.scrollLeft;
+            metrics.scrollTop = surface.scrollTop;
+            schedule();
+        },
+        tabindex: () => ui.editing ? -1 : 0
+    };
+    let template = (attributes) => {
+        let root_1ayo7z92 = template_1ayo7z93(), element_1ayo7z94 = root_1ayo7z92.firstChild, element_1ayo7z95 = element_1ayo7z94.firstChild, element_1ayo7z96 = element_1ayo7z95.nextSibling, element_1ayo7z97 = element_1ayo7z94.firstElementChild, element_1ayo7z98 = element_1ayo7z97.firstElementChild, element_1ayo7z99 = element_1ayo7z98.firstElementChild, element_1ayo7z9a = element_1ayo7z99.nextElementSibling, element_1ayo7z9b = element_1ayo7z98.firstChild.nextSibling.nextSibling, element_1ayo7z9c = element_1ayo7z9a.nextElementSibling, element_1ayo7z9d = element_1ayo7z9c.nextElementSibling, element_1ayo7z9e = element_1ayo7z9d.firstElementChild, element_1ayo7z9f = element_1ayo7z9e.nextElementSibling, element_1ayo7z9g = element_1ayo7z9d.nextElementSibling, element_1ayo7z9h = element_1ayo7z9b.nextSibling.nextSibling.nextSibling.nextSibling, element_1ayo7z9i = element_1ayo7z9g.nextElementSibling, element_1ayo7z9j = element_1ayo7z97.firstChild.nextSibling, element_1ayo7z9k = element_1ayo7z98.nextElementSibling, element_1ayo7z9l = element_1ayo7z97.nextElementSibling;
+        template_u1.slot(element_1ayo7z95, search.template());
+        template_u1.slot(element_1ayo7z96, jump.template());
+        element_1ayo7z99.appendChild(new template_u1.ArraySlot(decorations, (decoration) => {
+            let root_1ayo7z9m = template_1ayo7z9n(), element_1ayo7z9o = root_1ayo7z9m.firstChild;
+            template_u1.setList(element_1ayo7z9o, 'class', () => decoration.kind);
+            template_u1.setList(element_1ayo7z9o, 'style', () => decoration.style);
+            return root_1ayo7z9m;
+        }, true).fragment);
+        element_1ayo7z9b.parentNode.insertBefore(new template_u1.ArraySlot(listed.before, draw.template).fragment, element_1ayo7z9b);
+        template_u1.slot(element_1ayo7z9e, icon({ 'aria-hidden': 'true', class: 'markdown-editor-fold-icon' }, chevron), 1);
+        element_1ayo7z9h.parentNode.insertBefore(new template_u1.ArraySlot(listed.after, draw.template).fragment, element_1ayo7z9h);
+        template_u1.slot(element_1ayo7z9j, map.template());
+        template_u1.setProperty(element_1ayo7z9l, 'id', help);
+        template_u1.onconnect(element_1ayo7z9k, (element) => {
+            ruler = element;
+            connect();
+        });
+        template_u1.setList(element_1ayo7z9i, 'style', () => `height: ${ui.bottom}px;`);
+        template_u1.setList(element_1ayo7z9g, 'style', () => `height: ${ui.next}px;`);
+        template_u1.setProperties(element_1ayo7z9f, field);
+        template_u1.onconnect(element_1ayo7z9f, (element) => {
+            textarea = element;
+            connect();
+        });
+        template_u1.setList(element_1ayo7z9e, 'class', () => !ui.foldable && 'markdown-editor-fold--none');
+        template_u1.delegate(element_1ayo7z9e, 'click', () => {
+            if (active) {
+                controller.fold(model.lineAt(blocks[active.first].from) + 1);
+            }
+        });
+        template_u1.delegate(element_1ayo7z9e, 'mousedown', prevent);
+        template_u1.setList(element_1ayo7z9d, 'class', () => ui.editing && '--active');
+        template_u1.setList(element_1ayo7z9c, 'style', () => `height: ${ui.between}px;`);
+        template_u1.setList(element_1ayo7z9a, 'style', () => `height: ${ui.top}px;`);
+        template_u1.setProperties(element_1ayo7z98, body);
+        template_u1.setProperties(element_1ayo7z97, size);
+        template_u1.setProperties(element_1ayo7z94, attributes);
+        template_u1.setList(element_1ayo7z94, 'class', [
+            () => ime.state.composing && 'markdown-editor--composing',
+            () => gestures.state.crosshair && 'markdown-editor--crosshair',
+            () => ui.minimap && 'markdown-editor--minimap',
+            () => !ui.wrap && 'markdown-editor--nowrap',
+            () => ui.readonly && 'markdown-editor--readonly'
+        ]);
+        template_u1.onconnect(element_1ayo7z94, (element) => {
+            host = element;
+            connect();
+        });
+        template_u1.ondisconnect(element_1ayo7z94, () => controller.dispose());
+        template_u1.on(element_1ayo7z94, 'focusout', (e) => {
+            let next = e.relatedTarget;
+            if (!next || !host?.contains(next)) {
+                capture();
+                deactivate();
+            }
+        });
+        template_u1.setList(element_1ayo7z94, 'style', () => `--tab-size: ${ui.tabSize};`);
+        return root_1ayo7z92;
+    };
+    return { controller, template };
+};
+export { view };