@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -1,14 +1,13 @@
 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 scrollbar from '../../../modifiers/scrollbar/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';
@@ -17,139 +16,93 @@ 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 { NativeText } from '../code/projection.js';
 import { syntaxCache } from '../code/syntax.js';
 import { markdownCommand } from './editing.js';
+import { reach, widen } from './erase.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 { arrange, cache, MarkdownLayout, unitStart } from './layout.js';
+import { blockAt, contentEnd, markdownBackspace, markdownReferences, parseMarkdown, quotePrefix, 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>`);
+import tooltip from '../../tooltip/index.js';
+const template_1ayo7z94 = template_u1.template(`<div class='markdown-editor'><!--$--><!--$--><div class='markdown-editor-body'><div class='markdown-editor-surface'><div aria-hidden='true' class='markdown-editor-overlay'></div><div></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_1ayo7z9g = template_u1.template(`<div>`);
+const template_1ayo7z9j = template_u1.template(`<div aria-hidden='true' class='markdown-editor-spacer' contenteditable='false'>`);
 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]('');
+    #empty;
+    #fold = this[reactivity_u0.SIGNAL](false);
     #label = this[reactivity_u0.SIGNAL]('Markdown editor');
+    #linking = this[reactivity_u0.SIGNAL](false);
     #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() {
+    constructor(_p0) {
         super(null);
+        this.#empty = this[reactivity_u0.SIGNAL](_p0);
     }
-    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);
+    get empty() {
+        return reactivity_u0.read(this.#empty);
     }
-    set height(_v4) {
-        reactivity_u0.write(this.#height, _v4);
+    set empty(_v0) {
+        reactivity_u0.write(this.#empty, _v0);
     }
-    get input() {
-        return reactivity_u0.read(this.#input);
+    get fold() {
+        return reactivity_u0.read(this.#fold);
     }
-    set input(_v5) {
-        reactivity_u0.write(this.#input, _v5);
+    set fold(_v1) {
+        reactivity_u0.write(this.#fold, _v1);
     }
     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);
+    set label(_v2) {
+        reactivity_u0.write(this.#label, _v2);
     }
-    get name() {
-        return reactivity_u0.read(this.#name);
+    get linking() {
+        return reactivity_u0.read(this.#linking);
     }
-    set name(_v8) {
-        reactivity_u0.write(this.#name, _v8);
+    set linking(_v3) {
+        reactivity_u0.write(this.#linking, _v3);
     }
-    get next() {
-        return reactivity_u0.read(this.#next);
+    get minimap() {
+        return reactivity_u0.read(this.#minimap);
     }
-    set next(_v9) {
-        reactivity_u0.write(this.#next, _v9);
+    set minimap(_v4) {
+        reactivity_u0.write(this.#minimap, _v4);
     }
     get placeholder() {
         return reactivity_u0.read(this.#placeholder);
     }
-    set placeholder(_v10) {
-        reactivity_u0.write(this.#placeholder, _v10);
+    set placeholder(_v5) {
+        reactivity_u0.write(this.#placeholder, _v5);
     }
     get readonly() {
         return reactivity_u0.read(this.#readonly);
     }
-    set readonly(_v11) {
-        reactivity_u0.write(this.#readonly, _v11);
+    set readonly(_v6) {
+        reactivity_u0.write(this.#readonly, _v6);
     }
     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);
+    set spellcheck(_v7) {
+        reactivity_u0.write(this.#spellcheck, _v7);
     }
     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);
+    set tabSize(_v8) {
+        reactivity_u0.write(this.#tabSize, _v8);
     }
     get wrap() {
         return reactivity_u0.read(this.#wrap);
     }
-    set wrap(_v16) {
-        reactivity_u0.write(this.#wrap, _v16);
+    set wrap(_v9) {
+        reactivity_u0.write(this.#wrap, _v9);
     }
 }
 class ReactiveObject_1ayo7z91 extends reactivity_u0.ReactiveObject {
@@ -171,10 +124,28 @@ class ReactiveObject_1ayo7z91 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#style, _v1);
     }
 }
+class ReactiveObject_1ayo7z92 extends reactivity_u0.ReactiveObject {
+    #height = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v0) {
+        reactivity_u0.write(this.#height, _v0);
+    }
+}
 const DECORATIONS = 1000;
+const ITEM_TASK = /^[ \t]*(?:[-+*]|\d+[.)])[ \t]+\[ ?\]$/;
+const JOINABLE = new Set(['heading', 'list', 'paragraph', 'quote']);
+const LINE_BREAK = /[\r\n]/;
+const LINK_DELAY = 700;
+const LITERAL = new Set(['code', 'fence', 'frontmatter', 'html']);
 const NAVIGATION = /^(ArrowDown|ArrowLeft|ArrowRight|ArrowUp|End|Home|PageDown|PageUp)$/;
 const NONE = [];
 const NO_TOKENS = [];
+const TASK = /^\[ ?\]$/;
 const TOKEN_COLORS = ['comment', 'keyword', 'operator', 'property', 'string', 'type', 'variable'];
 const VERTICAL = /^(ArrowDown|ArrowUp|PageDown|PageUp)$/;
 let uid = 0;
@@ -225,11 +196,8 @@ function assign(list, next) {
 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 = {
+    let apple = mac(), blocks = parseMarkdown(model), composed = '', composing = null, content, decorations = new reactivity_u0.ReactiveArray(), definitions = new Map(), disposed = false, drawn = 0, dropAt = null, elements = new Map(), escapeTab = false, folds = [], frame = 0, gaps = [], goals = [], help = `markdown-editor-help-${++uid}`, host, inlines = new WeakMap(), items = new reactivity_u0.ReactiveArray(), keys = keymap(apple), layout = new MarkdownLayout(), length = model.value.length, metrics = {
         charWidth: 7.8,
         clientHeight: 320,
         fontSize: 13,
@@ -241,39 +209,31 @@ const view = (model, callbacks, receive) => {
         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({
+    }, options = { wrap: true }, palette = {}, parsed = model.revision, pendingValue, placed = null, rendered = [], 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
-    };
+    }), surface, ui = new ReactiveObject_1ayo7z90(!model.value), units = cache(), unitsDirty = true, unplaced = false, unsubscribe, visited = new WeakMap(), whole = null;
     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) {
+                elements.set(unit, element);
                 shown.set(element, unit);
                 resize?.observe(element);
+                return;
             }
-            else {
-                shown.delete(element);
-                resize?.unobserve(element);
+            let previous = shown.get(element);
+            if (previous && elements.get(previous) === element) {
+                elements.delete(previous);
             }
+            shown.delete(element);
+            resize?.unobserve(element);
         },
         task: (block) => {
             if (!disposed && !options.readonly && !ime.busy() && block.task) {
@@ -288,18 +248,21 @@ const view = (model, callbacks, receive) => {
     let ime = composition({
         begin: () => {
             capture();
-            beforeRanges = model.selections;
-            beforeSelection = model.selection;
+            composed = '';
+            composing = { ...model.selection };
             model.breakHistory();
         },
         commit: (conflict) => {
-            if (conflict) {
-                reset();
-                resync();
-            }
-            else {
-                accept(true);
+            let range = composing;
+            composing = null;
+            if (range && !conflict && composed && !options.readonly) {
+                model.replace(range.start, range.end, composed, {
+                    selection: { start: range.start + composed.length },
+                    source: 'composition'
+                });
             }
+            composed = '';
+            invalidate(range?.start ?? model.selection.start);
             if (pendingValue !== undefined) {
                 let value = pendingValue;
                 pendingValue = undefined;
@@ -338,11 +301,7 @@ const view = (model, callbacks, receive) => {
         go: (line, column) => controller.goToLine(line, column)
     });
     let map = minimap({
-        focus: () => {
-            if (editing) {
-                textarea?.focus({ preventScroll: true });
-            }
-        },
+        focus: () => content?.focus({ preventScroll: true }),
         scroll: (top, relative) => {
             scrollTo(relative ? metrics.scrollTop + top : top);
         }
@@ -365,6 +324,7 @@ const view = (model, callbacks, receive) => {
         update: schedule
     });
     let size = observeSize(() => measure());
+    let tip = tooltip.shared({ delay: { open: LINK_DELAY } });
     let source = {
         breaks: () => NONE,
         get count() {
@@ -399,84 +359,25 @@ const view = (model, callbacks, receive) => {
             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;
+        composed = '';
+        composing = 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('');
+        placed = null;
         secondary = selections.length > 1;
+        ui.empty = !model.value;
+        unitsDirty = true;
         whole = null;
-        written = '';
         state.selections.splice(0, state.selections.$length, ...selections.map((range) => ({ ...range })));
         Object.assign(state, single, { selection: { ...single.selection } });
         gestures.reset();
@@ -489,15 +390,29 @@ const view = (model, callbacks, receive) => {
         search.result();
     }
     function capture() {
-        if (disposed || !textarea || !active || !editing || ime.busy() || writing || textarea.value !== written) {
+        if (disposed || !content || ime.busy() || unplaced) {
+            return;
+        }
+        let selection = content.ownerDocument.getSelection(), anchorNode = selection?.anchorNode, focusNode = selection?.focusNode;
+        if (!selection || !anchorNode || !focusNode || !content.contains(anchorNode) || !content.contains(focusNode)) {
+            return;
+        }
+        if (placed &&
+            placed.anchor.node === anchorNode &&
+            placed.anchor.offset === selection.anchorOffset &&
+            placed.focus.node === focusNode &&
+            placed.focus.offset === selection.focusOffset) {
+            return;
+        }
+        let anchor = sourceAt(anchorNode, selection.anchorOffset), head = sourceAt(focusNode, selection.focusOffset);
+        if (anchor === null || head === null) {
             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, next = {
+            direction: head < anchor ? 'backward' : 'forward',
+            end: Math.max(anchor, head),
+            start: Math.min(anchor, head)
         };
-        let primary = model.selection;
         if (next.start === primary.start &&
             next.end === primary.end &&
             (next.start === next.end || next.direction === primary.direction || primary.direction === 'none')) {
@@ -505,25 +420,11 @@ const view = (model, callbacks, receive) => {
         }
         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;
@@ -532,7 +433,13 @@ const view = (model, callbacks, receive) => {
         if (rects.length) {
             return rects[0];
         }
-        return { height: metrics.lineHeight, left: originX + metrics.padLeft, top: originY + metrics.padTop + layout.top(index), width: 1 };
+        let box = surface.getBoundingClientRect();
+        return {
+            height: metrics.lineHeight,
+            left: box.left + surface.clientLeft - surface.scrollLeft + metrics.padLeft,
+            top: box.top + surface.clientTop - surface.scrollTop + metrics.padTop + layout.top(index),
+            width: 1
+        };
     }
     function clip(e, cut) {
         if (disposed || ime.busy() || !e.clipboardData) {
@@ -548,12 +455,11 @@ const view = (model, callbacks, receive) => {
         }
     }
     function connect() {
-        if (disposed || !host || !ruler || !surface || !textarea || unsubscribe) {
+        if (disposed || !content || !host || !ruler || !surface || unsubscribe) {
             return;
         }
         measure();
         subscribe();
-        refresh();
         unitsDirty = true;
         schedule();
         void host.ownerDocument.fonts?.ready.then(() => {
@@ -571,21 +477,9 @@ const view = (model, callbacks, receive) => {
             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 (ranges.length < 2 && dropAt === null && !matches?.matches.length) {
             if (decorations.$length) {
                 decorations.splice(0, decorations.$length);
             }
@@ -619,9 +513,6 @@ const view = (model, callbacks, receive) => {
             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');
         }
@@ -636,65 +527,101 @@ const view = (model, callbacks, receive) => {
             decorations[i].style = items[i].style;
         }
     }
+    function domAt(offset) {
+        current();
+        let unit = layout.units[layout.indexOf(offset)];
+        if (!unit || !draw.segments(unit)) {
+            let first = rendered[0], last = rendered[rendered.length - 1];
+            if (!first || !last) {
+                return null;
+            }
+            if (offset < unitStart(first)) {
+                unit = first;
+                offset = contentStart(first);
+            }
+            else {
+                unit = last;
+                offset = contentEnd(model.value, last.block);
+            }
+        }
+        let element = elements.get(unit), segments = draw.segments(unit) ?? [], after = null, before = null;
+        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 (at <= offset && offset <= end) {
+                return { node: segment.node, offset: offset - at };
+            }
+            if (end < offset) {
+                before = { node: segment.node, offset: segment.node.length };
+            }
+            else {
+                after = { node: segment.node, offset: 0 };
+                break;
+            }
+        }
+        if (before || after) {
+            return before ?? after;
+        }
+        if (!element) {
+            return null;
+        }
+        let children = element.childNodes;
+        for (let i = 0, n = children.length; i < n; i++) {
+            if (children[i].nodeName === 'BR') {
+                return { node: element, offset: i };
+            }
+        }
+        return { node: element, offset: children.length };
+    }
+    function edgeAt(node, offset) {
+        if (!content) {
+            return null;
+        }
+        let child = node === content ? content.childNodes[offset] ?? null : node;
+        while (child && child.parentNode !== content) {
+            child = child.parentNode;
+        }
+        for (let at = child; at; at = at.nextSibling) {
+            let unit = shown.get(at);
+            if (unit) {
+                return contentStart(unit);
+            }
+        }
+        for (let at = child ? child.previousSibling : content.lastChild; at; at = at.previousSibling) {
+            let unit = shown.get(at);
+            if (unit) {
+                return contentEnd(model.value, unit.block);
+            }
+        }
+        return null;
+    }
     function editable(run) {
         if (disposed || options.readonly || ime.busy()) {
             return false;
         }
         capture();
         revealFolds(true);
+        revealing = true;
         let changed = run();
-        start(true);
+        schedule();
         return changed;
     }
-    function fieldGeometry() {
-        if (!active) {
-            geometry = null;
-            return;
+    function erase(backward) {
+        if (model.selections.length > 1) {
+            return backward ? markdownCommand(model, 'backspace', kindAt) : deleteCharacter(model, false);
         }
-        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);
-            }
+        current();
+        let { end, start } = model.selection;
+        if (start !== end) {
+            return remove({ from: start, to: end });
         }
-        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));
+        let index = blockAt(blocks, start), block = blocks[index], unit = layout.units[layout.indexOf(start)], span = unit && draw.segments(unit) ? reach(model.value, spans(unit), start, backward) : null;
+        if (span) {
+            if ((block.kind === 'fence' || block.kind === 'frontmatter') && span.from < block.contentFrom && span.to >= block.contentFrom) {
+                return false;
             }
+            return remove(span);
         }
-        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);
+        return backward ? joinBackward(index, start) : joinForward(index, start);
     }
     function inlineOf(block) {
         let entry = inlines.get(block);
@@ -708,34 +635,69 @@ const view = (model, callbacks, receive) => {
         }
         return entry.tokens;
     }
-    function kindAt(offset) {
-        return blocks[blockAt(blocks, offset)]?.kind;
+    function invalidate(offset) {
+        let block = blocks[blockAt(blocks, offset)];
+        if (block) {
+            units.folded.delete(block);
+            units.plain.delete(block);
+            units.raw.delete(block);
+        }
+        unitsDirty = true;
+        schedule();
     }
-    function leaves(key) {
-        if (!active || !geometry || !textarea) {
+    function joinBackward(index, offset) {
+        if (markdownBackspace(model)) {
+            return true;
+        }
+        let block = blocks[index], previous = blocks[index - 1];
+        if (block.kind === 'heading' && block.contentFrom > block.from && offset <= block.contentFrom) {
+            let from = block.from + quotePrefix(model.lineText(model.lineAt(block.from))).length;
+            return model.replace(from, block.contentFrom, '', { selection: { start: from }, source: 'markdown-unwrap' });
+        }
+        if (!previous) {
             return false;
         }
-        let head = textarea.selectionDirection === 'backward' ? textarea.selectionStart : textarea.selectionEnd;
-        if (key === 'ArrowLeft') {
-            return head === 0 && active.from > 0;
+        if (previous.kind === 'blank' || previous.kind === 'rule') {
+            return model.replace(previous.from, previous.to, '', {
+                selection: { start: offset - (previous.to - previous.from) },
+                source: 'delete'
+            });
+        }
+        if (JOINABLE.has(previous.kind) && (JOINABLE.has(block.kind) || block.kind === 'blank')) {
+            return model.replace(previous.contentTo, offset, '', { selection: { start: previous.contentTo }, source: 'delete' });
         }
-        if (key === 'ArrowRight') {
-            return head === textarea.textLength && active.to < model.value.length;
+        model.select({ start: previous.contentTo });
+        return false;
+    }
+    function joinForward(index, offset) {
+        let block = blocks[index], next = blocks[index + 1];
+        if (!next) {
+            return false;
         }
-        let rect = geometry.rect(head);
-        if (key === 'ArrowUp') {
-            return rect.top < geometry.lineHeight / 2 && active.from > 0;
+        if (next.kind === 'blank' || next.kind === 'rule') {
+            return model.replace(next.from, next.to, '', { selection: { start: offset }, source: 'delete' });
         }
-        return rect.top + geometry.lineHeight >= geometry.height - 0.5 && active.to < model.value.length;
+        if (JOINABLE.has(next.kind) && (JOINABLE.has(block.kind) || block.kind === 'blank')) {
+            return model.replace(offset, next.contentFrom, '', { selection: { start: offset }, source: 'delete' });
+        }
+        return false;
+    }
+    function kindAt(offset) {
+        return blocks[blockAt(blocks, offset)]?.kind;
     }
     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);
+    function linking(e) {
+        let next = apple ? e.metaKey : e.ctrlKey;
+        if (ui.linking !== next) {
+            ui.linking = next;
+        }
+    }
+    function markFoldable() {
+        for (let i = 0, n = rendered.length; i < n; i++) {
+            let unit = rendered[i], state = draw.state(unit);
             if (!state) {
                 continue;
             }
@@ -746,7 +708,7 @@ const view = (model, callbacks, receive) => {
         }
     }
     function measure() {
-        if (disposed || !host || !ruler || !surface || !textarea) {
+        if (disposed || !host || !ruler || !surface) {
             return;
         }
         let computed = getComputedStyle(surface), style = getComputedStyle(host), fallback = style.getPropertyValue('--color').trim() || 'currentColor', colors = {}, padLeft = pixels(computed.paddingLeft), fontSize = pixels(computed.fontSize) || 13;
@@ -775,21 +737,32 @@ const view = (model, callbacks, receive) => {
             width: metrics.width
         })) {
             whole = null;
-            fieldGeometry();
             map.invalidate();
             unitsDirty = true;
         }
         schedule();
     }
     function moveSelection(key, extend, word = false, add = false, boundary = false) {
+        let native = content?.ownerDocument.getSelection();
+        if (native &&
+            model.selections.length === 1 &&
+            !add &&
+            !key.startsWith('Page') &&
+            content?.ownerDocument.activeElement === content) {
+            let vertical = VERTICAL.test(key);
+            native.modify(extend ? 'extend' : 'move', key === 'ArrowLeft' || key === 'ArrowUp' || key === 'Home' ? 'backward' : 'forward', vertical ? 'line' : key === 'Home' || key === 'End' ? (boundary ? 'documentboundary' : 'lineboundary') : word ? 'word' : 'character');
+            capture();
+            start(true);
+            return;
+        }
         if (!VERTICAL.test(key) || boundary || add) {
             goals = [];
         }
         if (!whole || whole.revision !== model.revision) {
-            let native = new NativeText(model.value);
+            let text = 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,
+                layout: new EditorLayout(text, model.value, Number.MAX_SAFE_INTEGER, metrics.lineHeight, metrics.charWidth, options.tabSize ?? 4, false),
+                projection: text,
                 revision: model.revision
             };
         }
@@ -805,7 +778,7 @@ const view = (model, callbacks, receive) => {
         start(true);
     }
     function offsetAt(clientX, clientY) {
-        if (disposed || !surface) {
+        if (disposed || !surface || !host) {
             return null;
         }
         current();
@@ -813,17 +786,14 @@ const view = (model, callbacks, receive) => {
         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 doc = host.ownerDocument, point = doc.caretPositionFromPoint?.(clientX, clientY), range = point ? null : doc.caretRangeFromPoint?.(clientX, clientY), node = point?.offsetNode ?? range?.startContainer ?? null;
+        if (node && content?.contains(node)) {
+            let offset = sourceAt(node, point?.offset ?? range?.startOffset ?? 0);
+            if (offset !== null) {
+                return offset;
             }
         }
-        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);
+        let under = doc.elementFromPoint(clientX, clientY)?.closest('.markdown-editor-block'), unit = under && shown.get(under);
         if (unit) {
             return contentStart(unit);
         }
@@ -831,7 +801,7 @@ const view = (model, callbacks, receive) => {
         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);
+        return !!options.fold && !unit.continuation && !unit.raw && !unit.fold && foldable(blocks, blockAt(blocks, unit.block.from), model.value);
     }
     function paint() {
         frame = 0;
@@ -839,35 +809,14 @@ const view = (model, callbacks, receive) => {
             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);
+        if (!ime.busy()) {
+            present();
+        }
+        markFoldable();
         queueMicrotask(() => {
             if (!disposed) {
                 decorate();
@@ -881,57 +830,73 @@ const view = (model, callbacks, receive) => {
             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) {
+    function place() {
+        unplaced = false;
+        if (disposed || !content || ime.busy() || content.ownerDocument.activeElement !== content) {
             return;
         }
-        if (frame) {
-            cancelAnimationFrame(frame);
+        let native = content.ownerDocument.getSelection();
+        if (!native) {
+            return;
         }
-        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) {
+        let selection = model.selection, backward = selection.direction === 'backward', anchorAt = backward ? selection.end : selection.start, headAt = backward ? selection.start : selection.end;
+        if (native.anchorNode &&
+            native.focusNode &&
+            content.contains(native.anchorNode) &&
+            content.contains(native.focusNode) &&
+            sourceAt(native.anchorNode, native.anchorOffset) === anchorAt &&
+            sourceAt(native.focusNode, native.focusOffset) === headAt) {
             return;
         }
-        let target = e.target;
-        if ((e.ctrlKey || e.metaKey) && target.closest('a')) {
+        let anchor = domAt(anchorAt), focus = anchorAt === headAt ? anchor : domAt(headAt);
+        if (!anchor || !focus) {
+            unplaced = true;
+            schedule();
             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
+        native.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+        placed = { anchor, focus };
+        unplaced = false;
+    }
+    function present() {
+        let n = layout.units.length, view = layout.window(metrics.scrollTop - metrics.padTop, metrics.clientHeight), selection = model.selection, runs = [];
+        if (n) {
+            let anchor = layout.indexOf(selection.direction === 'backward' ? selection.end : selection.start), head = layout.indexOf(selection.direction === 'backward' ? selection.start : selection.end);
+            runs.push({ from: anchor, to: anchor + 1 }, { from: head, to: head + 1 }, { from: view.start, to: view.end });
+            runs.sort((a, b) => a.from - b.from);
+        }
+        let cursor = 0, gap = 0, next = [];
+        let space = (height) => {
+            let item = gaps[gap++] ??= new ReactiveObject_1ayo7z92();
+            item.height = height;
+            next.push(item);
         };
-        if (pointerId >= 0 && surface?.isConnected) {
-            try {
-                surface.setPointerCapture(pointerId);
+        for (let i = 0, m = runs.length; i < m; i++) {
+            let { from, to } = runs[i];
+            from = Math.max(from, cursor);
+            if (to <= from) {
+                continue;
+            }
+            if (from > cursor || !next.length) {
+                space(layout.top(from) - layout.top(cursor));
             }
-            catch {
+            for (let j = from; j < to; j++) {
+                next.push(layout.units[j]);
             }
+            cursor = to;
         }
-        schedule();
+        space(layout.total - layout.top(cursor));
+        assign(items, next);
+        rendered = next.filter((item) => 'block' in item);
+        flush();
+        place();
     }
     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]);
-                }
+            let rects = textRects(units[i], from, to);
+            for (let j = 0, n = rects.length; j < n; j++) {
+                out.push(rects[j]);
             }
         }
         return out;
@@ -946,16 +911,7 @@ const view = (model, callbacks, receive) => {
                 }
             }
         }
-        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);
-        }
+        layout.set(arrange(blocks, model.value, options.fold ? folds : [], units, raw ? (index) => raw.has(index) : null), model.value);
         unitsDirty = false;
     }
     function references() {
@@ -975,56 +931,12 @@ const view = (model, callbacks, receive) => {
         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 remove(span) {
+        let block = blocks[blockAt(blocks, span.from)];
+        if (block && JOINABLE.has(block.kind) && span.to <= block.to) {
+            span = widen(model.value, inlineOf(block), block.from, span);
         }
+        return model.replace(span.from, span.to, '', { group: 'delete', selection: { start: span.from }, source: 'delete' });
     }
     function reparseBlocks() {
         let deltas = model.deltas(parsed), previous = length;
@@ -1034,10 +946,10 @@ const view = (model, callbacks, receive) => {
             blocks = parseMarkdown(model);
             map.invalidate();
             references();
-            return false;
+            return;
         }
         if (!deltas.length) {
-            return true;
+            return;
         }
         let end = -1, moved = 0, start = Number.MAX_SAFE_INTEGER;
         for (let i = 0, n = deltas.length; i < n; i++) {
@@ -1067,7 +979,7 @@ const view = (model, callbacks, receive) => {
         if (changed) {
             map.invalidate();
             references();
-            return false;
+            return;
         }
         if (moved) {
             map.invalidate();
@@ -1075,18 +987,6 @@ const view = (model, callbacks, receive) => {
         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) {
@@ -1114,19 +1014,18 @@ const view = (model, callbacks, receive) => {
             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));
+        let selection = model.selection, head = selection.direction === 'backward' ? selection.start : selection.end, index = layout.indexOf(head), unit = layout.units[index];
+        if (!unit || !surface) {
+            return;
+        }
+        let height = Math.min(layout.height(unit), metrics.clientHeight), y = metrics.padTop + layout.top(index), rect = draw.segments(unit) ? textRects(unit, head, head)[0] : undefined;
+        if (rect) {
+            let box = surface.getBoundingClientRect();
             height = rect.height;
-            y = metrics.padTop + layout.top(activeIndex) + rect.top;
-            if (options.wrap === false && surface) {
-                let x = fieldLeft() + rect.left;
+            y = rect.top - box.top - surface.clientTop + surface.scrollTop;
+            if (options.wrap === false) {
+                let x = rect.left - box.left - surface.clientLeft + surface.scrollLeft;
                 if (x < metrics.scrollLeft + metrics.padLeft) {
                     surface.scrollLeft = metrics.scrollLeft = Math.max(0, x - metrics.padLeft);
                 }
@@ -1135,14 +1034,6 @@ const view = (model, callbacks, receive) => {
                 }
             }
         }
-        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);
         }
@@ -1192,10 +1083,57 @@ const view = (model, callbacks, receive) => {
         metrics.scrollTop = surface.scrollTop;
         schedule();
     }
-    function start(reveal) {
-        if (!editing) {
-            activate(false);
+    function shortcut(text) {
+        let { end, start } = model.selection;
+        if (text !== ' ' || start !== end || model.selections.length > 1 || LITERAL.has(kindAt(start))) {
+            return false;
+        }
+        let from = model.lineStart(model.lineAt(start)), before = model.value.slice(from, start), at = from + quotePrefix(before).length, rest = model.value.slice(at, start);
+        if (TASK.test(rest)) {
+            return model.replace(at, start, '- [ ] ', { selection: { start: at + 6 }, source: 'markdown-task' });
+        }
+        if (ITEM_TASK.test(rest)) {
+            let bracket = at + rest.lastIndexOf('[');
+            return model.replace(bracket, start, '[ ] ', { selection: { start: bracket + 4 }, source: 'markdown-task' });
+        }
+        return false;
+    }
+    function sourceAt(node, offset) {
+        let direct = draw.offset(node, offset);
+        if (direct !== null) {
+            return direct;
+        }
+        let element = (node.nodeType === 1 ? node : node.parentElement)?.closest('.markdown-editor-block'), unit = element ? shown.get(element) : undefined;
+        if (!unit) {
+            return edgeAt(node, offset);
         }
+        let range = node.ownerDocument.createRange(), segments = draw.segments(unit) ?? [], after = null, before = null;
+        range.setStart(node, offset);
+        for (let i = 0, n = segments.length; i < n; i++) {
+            let segment = segments[i];
+            if (range.comparePoint(segment.node, segment.node.length) <= 0) {
+                before = segment.block.from + segment.from + segment.node.length;
+            }
+            else if (range.comparePoint(segment.node, 0) >= 0) {
+                after = segment.block.from + segment.from;
+                break;
+            }
+        }
+        let broken = node.nodeType === 3 && offset > 0 && LINE_BREAK.test(node.textContent[offset - 1]);
+        if (after !== null && (broken || before === null)) {
+            return after;
+        }
+        return before ?? contentStart(unit);
+    }
+    function spans(unit) {
+        let out = [], segments = draw.segments(unit) ?? [];
+        for (let i = 0, n = segments.length; i < n; i++) {
+            let from = segments[i].block.from + segments[i].from;
+            out.push({ from, to: from + segments[i].node.length });
+        }
+        return out;
+    }
+    function start(reveal) {
         revealing ||= reveal;
         schedule();
     }
@@ -1211,14 +1149,17 @@ const view = (model, callbacks, receive) => {
             if (change.textChanged) {
                 ime.conflict();
                 textChanged(change);
+                ui.empty = !snapshot.value;
             }
             if (change.selectionChanged) {
                 revealFolds();
                 unitsDirty ||= secondary || selections.length > 1;
                 secondary = selections.length > 1;
             }
-            refresh();
-            schedule();
+            if (frame) {
+                cancelAnimationFrame(frame);
+            }
+            paint();
             if (change.selectionChanged) {
                 callbacks.onSelection?.(snapshot.selection, model.position());
             }
@@ -1228,13 +1169,12 @@ const view = (model, callbacks, receive) => {
         });
     }
     function textChanged(change) {
-        let local = reparseBlocks();
+        reparseBlocks();
         if (folds.length) {
             folds = outerFolds(mapFolds(folds, change.editBatches ?? [], model));
-            local = false;
         }
         whole = null;
-        unitsDirty ||= !local || secondary;
+        unitsDirty = true;
     }
     function textRects(unit, from, to) {
         let out = [], segments = draw.segments(unit);
@@ -1259,6 +1199,9 @@ const view = (model, callbacks, receive) => {
         }
         return out;
     }
+    function typed(text) {
+        return editable(() => shortcut(text) || insertText(model, text, 'input'));
+    }
     let controller = {
         addNextOccurrence: (all = false) => {
             if (disposed || ime.busy()) {
@@ -1299,12 +1242,15 @@ const view = (model, callbacks, receive) => {
         findNext: () => search.next(),
         findPrevious: () => search.previous(),
         focus: () => {
-            if (!disposed) {
-                activate(true);
+            if (disposed || !content) {
+                return;
             }
+            content.focus({ preventScroll: true });
+            place();
+            schedule();
         },
         fold: (line) => {
-            if (disposed || ime.busy() || options.fold === false) {
+            if (disposed || ime.busy() || !options.fold) {
                 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;
@@ -1315,22 +1261,16 @@ const view = (model, callbacks, receive) => {
             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) {
+            if (disposed || ime.busy() || !options.fold) {
                 return;
             }
             model.select({ start: 0 });
             folds = outerFolds(markdownFolds(model, blocks));
-            deactivate();
-            textarea?.blur();
             unitsDirty = true;
             schedule();
         },
@@ -1386,7 +1326,6 @@ const view = (model, callbacks, receive) => {
         refresh: () => {
             if (!disposed) {
                 measure();
-                fieldGeometry();
                 unitsDirty = true;
                 schedule();
             }
@@ -1420,17 +1359,24 @@ const view = (model, callbacks, receive) => {
                 controller.setOptions(settings ?? {}, !!settings);
                 return;
             }
-            let focused = editing && !!textarea && host?.ownerDocument.activeElement === textarea;
-            deactivate();
+            let focused = !!content && host?.ownerDocument.activeElement === content;
+            ime.flush();
             if (surface) {
                 visited.set(model, { folds, left: metrics.scrollLeft, revision: model.revision, top: metrics.scrollTop });
             }
             model = next;
             adopt();
             controller.setOptions(settings ?? {}, !!settings);
-            present();
+            if (frame) {
+                cancelAnimationFrame(frame);
+            }
+            paint();
+            if (surface) {
+                surface.scrollLeft = metrics.scrollLeft;
+                surface.scrollTop = metrics.scrollTop;
+            }
             if (focused) {
-                activate(true);
+                controller.focus();
             }
         },
         setOptions: (next, replace = false) => {
@@ -1442,20 +1388,19 @@ const view = (model, callbacks, receive) => {
             if (!options.indent || !/^[\t ]+$/.test(options.indent)) {
                 options.indent = '    ';
             }
+            ui.fold = !!options.fold;
             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) {
+            if (!options.fold) {
                 folds = [];
             }
             whole = null;
-            fieldGeometry();
             map.invalidate();
             unitsDirty = true;
             schedule();
@@ -1476,9 +1421,6 @@ const view = (model, callbacks, receive) => {
         get state() {
             return state;
         },
-        get textarea() {
-            return textarea;
-        },
         toggleComment: () => editable(() => toggleComment(model, options.lineComment ?? false, options.blockComment ?? ['<!--', '-->'])),
         undo: () => editable(() => model.undo()),
         undoSelection: () => {
@@ -1515,7 +1457,7 @@ const view = (model, callbacks, receive) => {
         cache: () => syntaxCache(model, 'markdown'),
         capture,
         controller: controller,
-        deleteVisible: (backwards, word) => deleteCharacter(model, backwards, word),
+        deleteVisible: (backwards, word) => word ? deleteCharacter(model, backwards, true) : erase(backwards),
         get document() {
             return model;
         },
@@ -1531,80 +1473,97 @@ const view = (model, callbacks, receive) => {
     let field = {
         'aria-describedby': help,
         'aria-label': () => ui.label,
-        class: () => ui.input,
-        name: () => ui.name,
+        'aria-multiline': 'true',
+        'aria-placeholder': () => ui.placeholder,
+        'aria-readonly': () => ui.readonly ? 'true' : 'false',
+        autocapitalize: 'off',
+        class: 'markdown-editor-content',
+        contenteditable: () => ui.readonly ? 'false' : 'true',
+        'data-placeholder': () => ui.placeholder,
         onbeforeinput: (e) => {
-            if (writing || ime.busy() || e.isComposing || !textarea) {
+            let type = e.inputType;
+            if (ime.busy() || e.isComposing || type === 'insertCompositionText' || type === 'deleteCompositionText' || type === 'insertFromComposition') {
                 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();
-                }
+            if (!e.cancelable) {
                 return;
             }
-            if (!e.cancelable || options.readonly) {
+            e.preventDefault();
+            if (options.readonly) {
                 return;
             }
-            if (model.selections.length > 1) {
-                if (e.inputType === 'insertText' && e.data !== null) {
-                    e.preventDefault();
-                    editable(() => insertText(model, e.data, 'input'));
+            capture();
+            revealFolds(!type.startsWith('history'));
+            switch (type) {
+                case 'deleteContentBackward':
+                case 'deleteContentForward':
+                    editable(() => erase(type === 'deleteContentBackward'));
                     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')));
+                case 'deleteWordBackward':
+                case 'deleteWordForward':
+                    editable(() => deleteCharacter(model, type === 'deleteWordBackward', true));
+                    return;
+                case 'formatBold':
+                    controller.bold();
+                    return;
+                case 'formatItalic':
+                    controller.italic();
+                    return;
+                case 'historyRedo':
+                    controller.redo();
+                    return;
+                case 'historyUndo':
+                    controller.undo();
+                    return;
+                case 'insertLineBreak':
+                    editable(() => insertText(model, model.eol, 'input'));
                     return;
+                case 'insertParagraph':
+                    controller.newline();
+                    return;
+                case 'insertReplacementText': {
+                    let range = e.getTargetRanges()[0], from = range ? sourceAt(range.startContainer, range.startOffset) : null, to = range ? sourceAt(range.endContainer, range.endOffset) : null;
+                    if (from !== null && to !== null) {
+                        model.select({ end: Math.max(from, to), start: Math.min(from, to) });
+                    }
+                    break;
                 }
             }
-            if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
-                e.preventDefault();
-                controller.newline();
+            if (type.startsWith('delete')) {
+                let range = e.getTargetRanges()[0], from = range ? sourceAt(range.startContainer, range.startOffset) : null, to = range ? sourceAt(range.endContainer, range.endOffset) : null;
+                if (from !== null && to !== null && from !== to) {
+                    editable(() => remove({ from: Math.min(from, to), to: Math.max(from, to) }));
+                }
+                return;
             }
-            else if (e.inputType === 'deleteContentBackward' && editable(() => markdownBackspace(model))) {
-                e.preventDefault();
+            let text = e.data ?? e.dataTransfer?.getData('text/plain') ?? '';
+            if (text) {
+                typed(text);
             }
         },
-        oncompositionend: ime.attributes.oncompositionend,
+        oncompositionend: (e) => {
+            composed = e.data ?? '';
+            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);
+            let native = content?.ownerDocument.getSelection();
+            if (!native?.anchorNode || !content?.contains(native.anchorNode)) {
+                place();
             }
-            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();
+            invalidate(model.selection.start);
         },
         onkeydown: (e) => {
             gestures.alt(e);
+            linking(e);
             if (ime.busy() || e.isComposing || e.keyCode === 229) {
                 return;
             }
@@ -1638,56 +1597,22 @@ const view = (model, callbacks, receive) => {
                 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) {
+            if (NAVIGATION.test(e.key) && !e.altKey && model.selections.length > 1) {
                 e.preventDefault();
-                editable(() => e.key === 'Backspace' && !e.altKey
-                    ? markdownCommand(model, 'backspace', kindAt)
-                    : deleteCharacter(model, e.key === 'Backspace', e.altKey));
+                moveSelection(e.key, e.shiftKey, mod);
+                return;
             }
-            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) {
+            if (e.key === 'Tab' && !e.altKey && !mod && options.captureTab !== false && !options.readonly) {
+                let kind = kindAt(model.selection.start);
+                if (kind === 'code' || kind === 'fence' || kind === 'list') {
                     e.preventDefault();
-                    editable(() => deleteCharacter(model, false, e.altKey));
+                    e.shiftKey ? controller.outdent() : controller.indent();
                 }
             }
-            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();
+            linking(e);
         },
         onpaste: (e) => {
             if (ime.busy() || options.readonly || !e.clipboardData) {
@@ -1697,27 +1622,19 @@ const view = (model, callbacks, receive) => {
             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,
+        role: 'textbox',
         spellcheck: () => ui.spellcheck,
-        style: () => `${ui.style} height: ${ui.height}px;`,
-        wrap: () => ui.wrap ? 'soft' : 'off'
+        tabindex: '0'
     };
     let body = {
-        'aria-label': () => ui.label,
         onclick: (e) => {
-            if (!(e.ctrlKey || e.metaKey) && e.target.closest('a')) {
-                e.preventDefault();
+            let link = e.target.closest('a');
+            if (!link) {
+                return;
+            }
+            e.preventDefault();
+            if ((e.ctrlKey || e.metaKey) && link.href) {
+                window.open(link.href, '_blank', 'noopener');
             }
         },
         onconnect: (element) => {
@@ -1728,113 +1645,95 @@ const view = (model, callbacks, receive) => {
         ondragleave: gestures.ondragleave,
         ondragover: gestures.ondragover,
         ondrop: gestures.ondrop,
-        onfocus: (e) => {
-            if (e.target === surface) {
-                controller.focus();
-            }
-        },
-        onlostpointercapture: () => {
-            gestures.end();
-            finish();
-        },
+        onlostpointercapture: gestures.end,
         onmousedown: (e) => {
-            if (e.target === textarea || e.target.closest('.markdown-editor-block, .markdown-editor-active')) {
+            if (e.button !== 0 || ime.busy() || (e.target !== surface && !e.target.classList.contains('markdown-editor-spacer'))) {
                 return;
             }
-            press(e, null);
-        },
-        onpointercancel: () => {
-            gestures.end();
-            finish();
+            e.preventDefault();
+            controller.focus();
+            model.select({ start: offsetAt(e.clientX, e.clientY) ?? model.value.length });
         },
+        onpointercancel: gestures.end,
         onpointerdown: (e) => {
-            pointerId = e.pointerId;
+            tip.release();
             gestures.onpointerdown(e);
         },
+        onpointerleave: () => tip.release(),
         onpointermove: (e) => {
             gestures.onpointermove(e);
-            if (!drag) {
-                return;
+            linking(e);
+        },
+        onpointerover: (e) => {
+            let link = e.target.closest('a.markdown-editor-link[href]');
+            if (link && e.pointerType !== 'touch') {
+                tip.request(link, apple ? '⌘+Click to open' : 'Ctrl+Click to open');
             }
-            let offset = offsetAt(e.clientX, e.clientY);
-            if (offset !== null && offset !== drag.head) {
-                drag.head = offset;
-                schedule();
+            else {
+                tip.release();
             }
         },
-        onpointerup: () => {
-            pinned = false;
-            pointerId = -1;
-            gestures.end();
-            finish();
-        },
+        onpointerup: gestures.end,
         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;
+        let root_1ayo7z93 = template_1ayo7z94(), element_1ayo7z95 = root_1ayo7z93.firstChild, element_1ayo7z96 = element_1ayo7z95.firstChild, element_1ayo7z97 = element_1ayo7z96.nextSibling, element_1ayo7z98 = element_1ayo7z95.firstElementChild, element_1ayo7z99 = element_1ayo7z98.firstElementChild, element_1ayo7z9a = element_1ayo7z99.firstElementChild, element_1ayo7z9b = element_1ayo7z9a.nextElementSibling, element_1ayo7z9c = element_1ayo7z98.firstChild.nextSibling, element_1ayo7z9d = element_1ayo7z99.nextElementSibling, element_1ayo7z9e = element_1ayo7z98.nextElementSibling;
+        template_u1.slot(element_1ayo7z96, search.template());
+        template_u1.slot(element_1ayo7z97, jump.template());
+        element_1ayo7z9a.appendChild(new template_u1.ArraySlot(decorations, (decoration) => {
+            let root_1ayo7z9f = template_1ayo7z9g(), element_1ayo7z9h = root_1ayo7z9f.firstChild;
+            template_u1.setList(element_1ayo7z9h, 'class', () => decoration.kind);
+            template_u1.setList(element_1ayo7z9h, 'style', () => decoration.style);
+            return root_1ayo7z9f;
         }, 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) => {
+        element_1ayo7z9b.appendChild(new template_u1.ArraySlot(items, (item) => 'block' in item
+            ? draw.template(item)
+            : (() => {
+                let root_1ayo7z9i = template_1ayo7z9j(), element_1ayo7z9k = root_1ayo7z9i.firstChild;
+                template_u1.setList(element_1ayo7z9k, 'style', () => `height: ${item.height}px;`);
+                return root_1ayo7z9i;
+            })(), true).fragment);
+        template_u1.slot(element_1ayo7z9c, map.template());
+        template_u1.slot(element_1ayo7z95, tip.render(), 2);
+        template_u1.setProperty(element_1ayo7z9e, 'id', help);
+        template_u1.onconnect(element_1ayo7z9d, (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;
+        template_u1.setProperties(element_1ayo7z9b, field);
+        template_u1.onconnect(element_1ayo7z9b, (element) => {
+            content = 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', [
+        template_u1.setProperties(element_1ayo7z99, body);
+        template_u1.setProperties(element_1ayo7z99, scrollbar());
+        template_u1.setProperties(element_1ayo7z98, size);
+        template_u1.setProperties(element_1ayo7z95, attributes);
+        template_u1.setList(element_1ayo7z95, 'class', [
             () => ime.state.composing && 'markdown-editor--composing',
             () => gestures.state.crosshair && 'markdown-editor--crosshair',
+            () => ui.empty && 'markdown-editor--empty',
+            () => ui.linking && 'markdown-editor--linking',
+            () => ui.fold && 'markdown-editor--fold',
             () => ui.minimap && 'markdown-editor--minimap',
             () => !ui.wrap && 'markdown-editor--nowrap',
             () => ui.readonly && 'markdown-editor--readonly'
         ]);
-        template_u1.onconnect(element_1ayo7z94, (element) => {
+        template_u1.onconnect(element_1ayo7z95, (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.ondisconnect(element_1ayo7z95, () => controller.dispose());
+        template_u1.ondocument(element_1ayo7z95, 'selectionchange', capture);
+        template_u1.onwindow(element_1ayo7z95, 'blur', () => {
+            ui.linking = false;
         });
-        template_u1.setList(element_1ayo7z94, 'style', () => `--tab-size: ${ui.tabSize};`);
-        return root_1ayo7z92;
+        template_u1.setList(element_1ayo7z95, 'style', () => `--tab-size: ${ui.tabSize};`);
+        return root_1ayo7z93;
     };
     return { controller, template };
 };