@nerd-bible/wordgard 0.3.5 → 0.5.2-beta

package/dist/editor.js

@@ -1,11 +1,167 @@
 import { GardState, GardSelection, TextblockMap, BidiSpan, Transaction } from 'wordgard/state';
-import { Attributes, Elt, Node, Leaf, ChangeSet, parse, Slice, Plot, serialize, Pos, ValidationError } from 'wordgard/doc';
+import { Attributes, Elt, Node, Leaf, parse, Slice, Plot, serialize, Pos, ChangeSet, ValidationError, Mark } from 'wordgard/doc';
 import { StyleModule } from 'style-mod';
 import { findClusterBreak } from '@marijn/find-cluster-break';
 import { enter, insertLineBreak, selectAll, undo, redo, transposeChars, Command, deleteUnit, deleteWord, deleteToLineEnd, moveByUnit, moveByLine, moveByWord, moveToLineSide, moveToDocSide, moveByPage, moveToTextblockSide, setAlignment, toggleUnderline, toggleEmphasis, toggleStrong, deleteLine, insertText, setDirection, deleteSelection, Menu, findWrappable, wrapBlockRange, autoJoinBlocks } from 'wordgard/command';
 import { PhraseSet, phrases } from 'wordgard/phrases';
 import { history } from 'wordgard/history';
 
+function eqArray(a, b) {
+    if (!a || !b)
+        return a == b;
+    if (a == b)
+        return true;
+    if (a.length != b.length)
+        return false;
+    for (let i = 0; i < a.length; i++)
+        if (!a[i].eq(b[i]))
+            return false;
+    return true;
+}
+const exceptionSink = /*@__PURE__*/GardState.Facet.define();
+function logException(state, exception, context) {
+    let handler = state.facet(exceptionSink);
+    if (handler.length)
+        handler[0](exception);
+    else if (window.onerror)
+        window.onerror(String(exception), context, undefined, undefined, exception);
+    else if (context)
+        console.error(context + ":", exception);
+    else
+        console.error(exception);
+}
+function findAbove(array, start, n) {
+    let from = start, to = array.length;
+    for (;;) {
+        if (from == to)
+            return from;
+        let mid = (from + to) >> 1;
+        if (array[mid] > n)
+            to = mid;
+        else
+            from = mid + 1;
+    }
+}
+
+function addUpdated(sections, updated) {
+    let result = [];
+    let j = 0, [uFrom, uTo] = updated.length ? [updated[j++], updated[j++]] : [1e9, 1e9];
+    for (let i = 0, pos = 0; i < sections.length;) {
+        let len = sections[i++], ins = sections[i++];
+        if (ins == -1) {
+            let end = pos + len;
+            while (uFrom < end) {
+                if (uTo > pos) {
+                    if (uFrom > pos)
+                        addSection(result, uFrom - pos, -1);
+                    addSection(result, Math.min(uTo, end) - Math.max(pos, uFrom), -2);
+                    pos = uTo;
+                }
+                if (uTo >= end)
+                    break;
+                if (j == updated.length) {
+                    uFrom = uTo = 1e9;
+                    break;
+                }
+                uFrom = updated[j++];
+                uTo = updated[j++];
+            }
+            if (pos < end)
+                addSection(result, end - pos, -1);
+            pos = end;
+        }
+        else {
+            addSection(result, len, ins);
+            pos += len;
+        }
+    }
+    return result;
+}
+function addSection(sections, len, ins) {
+    let last = sections.length - 1;
+    if (last >= 0) {
+        let lastIns = sections[last];
+        if (lastIns >= 0 && ins >= 0) {
+            sections[last - 1] += len;
+            sections[last] += ins;
+            return;
+        }
+        if (lastIns < 0 && lastIns == ins) {
+            sections[last - 1] += len;
+            return;
+        }
+    }
+    sections.push(len, ins);
+}
+function separateChange(changes, fromB, toB) {
+    let result = [];
+    let lenI = 0, dLen = 0;
+    for (let posB = 0, done = false, i = 0; i < changes.length;) {
+        let len = changes[i++], ins = changes[i++], endB = posB + (ins < 0 ? len : ins);
+        if (fromB > endB || toB < posB) {
+            result.push(len, ins);
+        }
+        else {
+            if (ins >= 0) {
+                if (posB < fromB || endB > toB)
+                    return null;
+                dLen = len - ins;
+            }
+            if (posB < fromB)
+                result.push(fromB - posB, ins);
+            if (!done) {
+                lenI = result.length;
+                result.push(0, toB - fromB);
+                done = true;
+            }
+            if (endB > toB)
+                result.push(endB - toB, ins);
+        }
+        posB = endB;
+    }
+    result[lenI] = (toB - fromB) + dLen;
+    return result;
+}
+function isEmpty(changes) {
+    return changes.length == 0 || changes.length == 2 && changes[1] == -1;
+}
+function addRange(ranges, from, to) {
+    if (!ranges.length || ranges[ranges.length - 1] < from) {
+        ranges.push(from, to);
+        return;
+    }
+    let i = findAbove(ranges, 0, from) & -2, j = i;
+    if (j && ranges[j - 1] == from) {
+        j -= 2;
+        from = ranges[j];
+    }
+    while (i < ranges.length && ranges[i] <= to) {
+        from = Math.min(from, ranges[i++]);
+        to = Math.max(to, ranges[i++]);
+    }
+    ranges.splice(j, i - j, from, to);
+}
+function joinRanges(ranges) {
+    if (ranges.length == 1)
+        return ranges[0];
+    let result = [], index = ranges.map(() => 0);
+    for (;;) {
+        let minI = -1, minFrom = -1;
+        for (let i = 0; i < ranges.length; i++) {
+            let idx = index[i], set = ranges[i];
+            if (idx < set.length && (minI < 0 || set[idx] < minFrom)) {
+                minI = i;
+                minFrom = set[idx];
+            }
+        }
+        if (minI < 0)
+            return result;
+        let idx = index[minI], set = ranges[minI];
+        addRange(result, set[idx], set[idx + 1]);
+        index[minI] += 2;
+    }
+}
+
 class Widget {
     value;
     constructor(type, 
@@ -68,6 +224,18 @@ class Widget {
     Widget.EditableText = Widget.define({
         render: s => document.createTextNode(s)
     });
+    Widget.img = Widget.create({
+        render() {
+            let img = document.createElement("img");
+            img.className = "wg-buffer";
+            return img;
+        },
+        editable: true
+    });
+    Widget.br = Widget.create({
+        render() { return document.createElement("br"); },
+        editable: true
+    });
 ;return Widget})(Widget);
 const Decoration = /*@__PURE__*/(function (Decoration) {
     (function (Tag) {
@@ -229,6 +397,15 @@ const baseTagShape = /*@__PURE__*/memo((tag) => {
     return addMarkAttributes(tag.is(Leaf.Text) ? Widget.EditableText.of(tag.param)
         : tag.type.shape.create(tag.param), tag);
 });
+function renderMarks(marks, around) {
+    let result = addMarkAttributes(Elt.create("span", Attributes.none, [around]), Leaf.text(around, marks));
+    for (let i = marks.length - 1; i >= 0; i--) {
+        let mark = marks[i];
+        if (mark.type.element)
+            result = renderMarkWrapper(mark).fill([result]);
+    }
+    return result.toDOM();
+}
 class AttributeRangeDecoration extends Decoration.Range {
     attribute;
     value;
@@ -328,18 +505,6 @@ function nodeSelection(state) {
         return PointSet.create([[state.selection.from, nodeSelectionDeco]]);
     return PointSet.empty;
 }
-function findAbove(array, start, n) {
-    let from = start, to = array.length;
-    for (;;) {
-        if (from == to)
-            return from;
-        let mid = (from + to) >> 1;
-        if (array[mid] > n)
-            to = mid;
-        else
-            from = mid + 1;
-    }
-}
 const none = [];
 class PointSet {
     values;
@@ -351,16 +516,17 @@ class PointSet {
         this.positions = positions;
     }
     get length() { return this.positions.length; }
-    map(changes) {
+    get size() { return this.positions.length ? this.positions[this.positions.length - 1] : 0; }
+    map(changes, start = 0) {
         if (changes.empty)
             return this;
         let positions = this.positions.slice();
-        let pos = 0, i = 0;
+        let pos = start, i = 0, startB = start && changes.mapPos(start, -1);
         let deleted = [], deletions = 0;
-        changes.iterGaps((fromA, toA, fromB) => {
-            let off = fromB - fromA, end = toA - 1;
+        changes.iterGaps((fromA, toA, fromB, _toB, last) => {
+            let off = fromB - fromA, end = last ? toA : toA - 1;
             if (end > pos) {
-                let nextI = findAbove(positions, i, end);
+                let nextI = findAbove(positions, i, end - start);
                 if (off)
                     for (; i < nextI; i++)
                         positions[i] += off;
@@ -369,15 +535,15 @@ class PointSet {
                 pos = end;
             }
         }, (_fromA, toA) => {
-            let nextI = findAbove(positions, i, toA + 1);
+            let nextI = findAbove(positions, i, toA + 1 + start);
             for (; i < nextI; i++) {
-                let mapped = changes.mapPos(positions[i], this.values[i].side < 0 ? -1 : 1, this.values[i].trackMode);
+                let mapped = changes.mapPos(positions[i] + start, this.values[i].side < 0 ? -1 : 1, this.values[i].trackMode);
                 if (mapped == null) {
                     addDel(deleted, i);
                     deletions++;
                 }
                 else
-                    positions[i] = mapped;
+                    positions[i] = mapped - startB;
             }
             pos = toA + 1;
         });
@@ -385,22 +551,22 @@ class PointSet {
             return new PointSet(this.values, positions);
         return new PointSet(applyDel(deleted, deletions, this.values), applyDel(deleted, deletions, positions));
     }
-    merge(other) {
+    merge(other, maskFrom, maskTo = maskFrom) {
         if (!this.length)
             return other;
-        if (!other.length)
+        if (!other.length && maskFrom == null)
             return this;
         let posA = this.positions, posB = other.positions;
-        let pos = new Array(posA.length, posB.length), values = new Array(pos.length);
+        let pos = new Array((maskFrom == null ? posA.length : 0) + posB.length), values = new Array(pos.length);
         for (let i = 0, a = 0, b = 0;;) {
-            let nextA = a < posA.length ? posA[a] : 1e9;
-            let nextB = b < posB.length ? posB[b] : 1e9;
-            let cmp = nextA - nextB || this.values[a].side - other.values[b].side;
-            if (cmp < 0) {
-                pos[i] = posA[a];
-                values[i++] = this.values[a++];
-            }
-            else if (nextB < 1e9) {
+            if (a < posA.length && (b == posB.length || (posA[a] - posB[b] || this.values[a].side - other.values[b].side) < 0)) {
+                if (maskFrom == null || maskFrom > posA[a] || maskTo < posA[a]) {
+                    pos[i] = posA[a];
+                    values[i++] = this.values[a];
+                }
+                a++;
+            }
+            else if (b < posB.length) {
                 pos[i] = posB[b];
                 values[i++] = other.values[b++];
             }
@@ -456,9 +622,8 @@ class PointSet {
                 for (let i = positions.length;;) {
                     positions[i] = positions[i - 1];
                     values[i] = values[i - 1];
-                    if (--i < 0)
-                        break;
-                    if (!i-- || (positions[i] - pos || values[i].side - value.side) <= 0) {
+                    --i;
+                    if (!i || (positions[i - 1] - pos || values[i - 1].side - value.side) <= 0) {
                         positions[i] = pos;
                         values[i] = value;
                         break;
@@ -483,14 +648,15 @@ class PointIterator {
         this.set = set;
         this.fill(0);
     }
+    get to() { return this.from; }
     fill(i) {
         this.i = i;
         if (i < this.set.positions.length) {
-            this.pos = this.set.positions[i];
+            this.from = this.set.positions[i];
             this.value = this.set.values[i];
         }
         else {
-            this.pos = 1e8;
+            this.from = 1e8;
             this.value = null;
             this.done = true;
         }
@@ -552,16 +718,17 @@ class RangeSet {
         this.to = to;
     }
     get length() { return this.from.length; }
-    map(changes) {
+    get size() { return this.to.length ? this.to[this.to.length - 1] : 0; }
+    map(changes, start = 0) {
         if (changes.empty || !this.length)
             return this;
         let from = this.from.slice(), to = this.to.slice();
-        let pos = 0, i = 0;
+        let pos = start, i = 0, startB = start && changes.mapPos(start, -1);
         let deleted = [], deletions = 0;
-        changes.iterGaps((fromA, toA, fromB) => {
-            let off = fromB - fromA, end = toA - 1;
+        changes.iterGaps((fromA, toA, fromB, _toB, last) => {
+            let off = fromB - fromA, end = last ? toA : toA - 1;
             if (end > pos) {
-                let nextI = findAbove(from, i, end);
+                let nextI = findAbove(to, i, end - start);
                 if (off)
                     for (; i < nextI; i++) {
                         from[i] += off;
@@ -572,18 +739,18 @@ class RangeSet {
                 pos = end;
             }
         }, (_fromA, toA) => {
-            let nextI = findAbove(to, i, toA + 1);
+            let nextI = findAbove(from, i, toA - start);
             for (; i < nextI; i++) {
                 let value = this.values[i];
-                let mappedFrom = changes.mapPos(from[i], value.inclusiveStart ? -1 : 1);
-                let mappedTo = changes.mapPos(to[i], value.inclusiveEnd ? 1 : -1);
+                let mappedFrom = changes.mapPos(from[i] + start, value.inclusiveStart ? -1 : 1);
+                let mappedTo = changes.mapPos(to[i] + start, value.inclusiveEnd ? 1 : -1);
                 if (mappedFrom >= mappedTo) {
                     addDel(deleted, i);
                     deletions++;
                 }
                 else {
-                    from[i] = mappedFrom;
-                    to[i] = mappedTo;
+                    from[i] = mappedFrom - startB;
+                    to[i] = mappedTo - startB;
                 }
             }
             pos = toA + 1;
@@ -592,6 +759,35 @@ class RangeSet {
             return new RangeSet(this.values, from, to);
         return new RangeSet(applyDel(deleted, deletions, this.values), applyDel(deleted, deletions, from), applyDel(deleted, deletions, to));
     }
+    merge(other, maskFrom, maskTo = maskFrom) {
+        if (!this.length)
+            return other;
+        if (!other.length && maskFrom == null)
+            return this;
+        let fromA = this.from, fromB = other.from;
+        let from = new Array((maskFrom == null ? fromA.length : 0) + fromB.length);
+        let to = new Array(from.length), values = new Array(from.length);
+        for (let i = 0, a = 0, b = 0, at = 0;;) {
+            if (a < fromA.length && (b == fromB.length || fromA[a] < fromB[b])) {
+                if (maskFrom == null || maskFrom >= this.to[a] || maskTo <= this.from[a]) {
+                    if ((from[i] = fromA[a]) < at)
+                        throw new Error("Overlapping ranges");
+                    at = to[i] = this.to[a];
+                    values[i++] = this.values[a];
+                }
+                a++;
+            }
+            else if (b < fromB.length) {
+                if ((from[i] = fromB[b]) < at)
+                    throw new Error("Overlapping ranges");
+                at = to[i] = other.to[b];
+                values[i++] = other.values[b++];
+            }
+            else {
+                return new RangeSet(values, from, to);
+            }
+        }
+    }
     iter() {
         return new RangeIterator(this);
     }
@@ -639,6 +835,7 @@ class RangeSet {
                 throw new Error("Ranges must be added in order and cannot overlap");
             from.push(f);
             to.push(t);
+            curPos = t;
             values.push(value);
         });
         return new RangeSet(values, from, to);
@@ -674,31 +871,87 @@ class RangeIterator {
         this.fill(findAbove(this.set.to, 0, pos));
     }
 }
-function addRange(ranges, from, to) {
-    let last = ranges.length - 1;
-    if (last < 0 || ranges[last] < from)
-        ranges.push(from, to);
-    else
-        ranges[last] = Math.max(to, ranges[last]);
-}
-function joinRanges(ranges) {
-    if (ranges.length == 1)
-        return ranges[0];
-    let result = [], index = ranges.map(() => 0);
-    for (;;) {
-        let minI = -1, minFrom = -1;
-        for (let i = 0; i < ranges.length; i++) {
-            let idx = index[i], set = ranges[i];
-            if (idx < set.length && (minI < 0 || set[idx] < minFrom)) {
-                minI = i;
-                minFrom = set[idx];
+class MultiSet {
+    sets;
+    pos;
+    constructor(sets, pos) {
+        this.sets = sets;
+        this.pos = pos;
+    }
+    map(changes) {
+        if (changes.empty)
+            return this;
+        let pos = this.pos.slice(), sets = this.sets.slice(), i = 0;
+        changes.iterGaps((fromA, toA, fromB, _toB, last) => {
+            while (i < sets.length && (last || pos[i] + sets[i].length < fromA)) {
+                pos[i++] += fromB - fromA;
             }
+        }, (_fromA, toA) => {
+            while (i < sets.length && pos[i] <= toA) {
+                sets[i] = sets[i].map(changes, pos[i]);
+                pos[i] = changes.mapPos(pos[i], -1);
+                i++;
+            }
+        });
+        return new MultiSet(sets, pos);
+    }
+    iter() {
+        return new MultiIterator(this);
+    }
+    static empty = /*@__PURE__*/(() => new MultiSet([], []))();
+    static create(f) {
+        let sets = [], pos = [], at = 0;
+        f((p, set) => {
+            if (p < at)
+                throw new Error("Overlapping sets in MultiSet.create");
+            sets.push(set);
+            pos.push(p);
+            at = p + set.size;
+        });
+        return sets.length ? new MultiSet(sets, pos) : MultiSet.empty;
+    }
+}
+const empty = {
+    from: 1e9, to: 1e9,
+    value: null,
+    done: true,
+    next() { },
+    goto() { }
+};
+class MultiIterator {
+    set;
+    get value() { return this.cur.value; }
+    get done() { return this.cur.done; }
+    get from() { return this.cur.from + this.offset; }
+    get to() { return this.cur.to + this.offset; }
+    i = 0;
+    constructor(set) {
+        this.set = set;
+        this.nextSet();
+    }
+    next() {
+        this.cur.next();
+        while (this.cur != empty && this.cur.done)
+            this.nextSet();
+    }
+    nextSet() {
+        if (this.i == this.set.sets.length) {
+            this.offset = 0;
+            this.cur = empty;
+        }
+        else {
+            this.offset = this.set.pos[this.i];
+            this.cur = this.set.sets[this.i].iter();
+            this.i++;
         }
-        if (minI < 0)
-            return result;
-        let idx = index[minI], set = ranges[minI];
-        addRange(result, set[idx], set[idx + 1]);
-        index[minI] += 2;
+    }
+    goto(pos, inclusive = false) {
+        let i = 0;
+        while (i < this.set.pos.length && this.set.pos[i] + this.set.sets[i].size)
+            i++;
+        this.i = i;
+        this.nextSet();
+        this.cur.goto(pos - this.offset, inclusive);
     }
 }
 function compareDecoSet(setA, setB, cmp) {
@@ -738,8 +991,11 @@ function findChangedRanges(prevState, prevDeco, state, deco, sections) {
             compareDecoSet(prevDeco.points, deco.points, (a, b) => {
                 (a || PointSet.empty).compareRange(posA, b || PointSet.empty, posB, len, (pos, val) => {
                     add(pos, Math.min(pos + (val instanceof WidgetDecoration ? 0 : 1), endB));
-                    if (val instanceof ShapeDecoration && !globalChange)
-                        shapeChanges.push(pos);
+                    if (val instanceof ShapeDecoration && !globalChange) {
+                        let idx = findAbove(shapeChanges, 0, pos - 1);
+                        if (idx == shapeChanges.length || shapeChanges[idx] != pos)
+                            shapeChanges.splice(idx, 0, pos);
+                    }
                 });
             });
             let joined = joinRanges(ranges), pos = posB, end = pos + len, j = 0;
@@ -772,15 +1028,12 @@ function findChangedRanges(prevState, prevDeco, state, deco, sections) {
         return addAtomicityChanges(result, prevState, shapeChanges);
     return result;
 }
-function addAtomicityChanges(sections, prev, changes) {
+function addAtomicityChanges(changes, prev, nodes) {
     let added = [];
-    let scan = prev.doc.resolve(0), last = -1, sectionPos = 0, sectionI = 0, off = 0;
-    for (let posB of changes.sort()) {
-        if (posB == last)
-            continue;
-        last = posB;
+    let scan = prev.doc.resolve(0), sectionPos = 0, sectionI = 0, off = 0;
+    for (let posB of nodes) {
         while (posB >= sectionPos) {
-            let len = sections[sectionI++], ins = sections[sectionI++];
+            let len = changes[sectionI++], ins = changes[sectionI++];
             if (ins < 0) {
                 sectionPos += len;
             }
@@ -797,35 +1050,7 @@ function addAtomicityChanges(sections, prev, changes) {
             continue;
         added.push(posA, posA + node.length);
     }
-    if (!added.length)
-        return sections;
-    let changedSections = [], pos = 0;
-    for (let i = 0; i < added.length;) {
-        let from = added[i++], to = added[i++];
-        if (from > pos)
-            changedSections.push(from - pos, -1);
-        changedSections.push(to - from, to - from);
-        pos = to;
-    }
-    if (pos < prev.doc.length)
-        changedSections.push(prev.doc.length - pos, -1);
-    return ChangeSet.composeSections(changedSections, sections);
-}
-function addSection(sections, len, ins) {
-    let last = sections.length - 1;
-    if (last >= 0) {
-        let lastIns = sections[last];
-        if (lastIns >= 0 && ins >= 0) {
-            sections[last - 1] += len;
-            sections[last] += ins;
-            return;
-        }
-        if (lastIns < 0 && lastIns == ins) {
-            sections[last - 1] += len;
-            return;
-        }
-    }
-    sections.push(len, ins);
+    return added.length ? addUpdated(changes, added) : changes;
 }
 class HeapIterator {
     rangeHeap;
@@ -863,7 +1088,7 @@ class HeapIterator {
                 ? [rangeHeap[0].from, rangeHeap[0].value.inclusiveStart ? -1 : 1]
                 : [1e9, 0];
             let [endPos, endSide] = active.length ? [active[0].to, active[0].value.inclusiveEnd ? 1 : -1] : [1e9, 0];
-            let { pos: pointPos, side: pointSide } = pointHeap.length ? pointHeap[0] : { pos: 1e9, side: 1 };
+            let { from: pointPos, side: pointSide } = pointHeap.length ? pointHeap[0] : { from: 1e9, side: 1 };
             let nextPos = Math.min(startPos, endPos, pointPos);
             if (this.to == this.end && nextPos > this.to) {
                 this.done = true;
@@ -940,7 +1165,7 @@ function cmpRangeTo(a, b) {
     return a.to - b.to || cmpBool(a.value.inclusiveEnd, b.value.inclusiveEnd);
 }
 function cmpPoint(a, b) {
-    return a.pos - b.pos || a.side - b.side;
+    return a.from - b.from || a.side - b.side;
 }
 function nodeWrappers(schema, tag, active, atom) {
     let wrappers;
@@ -1009,6 +1234,8 @@ class DecoIterator {
         }
     }
     widgets(tag, place, walker) {
+        if (place == 2 && tag.type.isInline)
+            walker.widget(Widget.img, -1);
         for (let src of this.globalWidgets) {
             if (src.place == place && tag.type == src.type) {
                 let widget = typeof src.widget == "function" ? src.widget(tag) : src.widget;
@@ -1016,6 +1243,8 @@ class DecoIterator {
                     walker.widget(widget, place == 0 || place == 3 ? 1 : -1);
             }
         }
+        if (place == 3 && tag.type.isInline)
+            walker.widget(Widget.img, 1);
     }
     hasEndWidget(type) {
         return this.globalWidgets.some(tw => tw.type == type &&
@@ -1185,31 +1414,6 @@ function compareSetPrec(setA, setB, array) {
     return 0;
 }
 
-function eqArray(a, b) {
-    if (!a || !b)
-        return a == b;
-    if (a == b)
-        return true;
-    if (a.length != b.length)
-        return false;
-    for (let i = 0; i < a.length; i++)
-        if (!a[i].eq(b[i]))
-            return false;
-    return true;
-}
-const exceptionSink = /*@__PURE__*/GardState.Facet.define();
-function logException(state, exception, context) {
-    let handler = state.facet(exceptionSink);
-    if (handler.length)
-        handler[0](exception);
-    else if (window.onerror)
-        window.onerror(String(exception), context, undefined, undefined, exception);
-    else if (context)
-        console.error(context + ":", exception);
-    else
-        console.error(exception);
-}
-
 function getSelection(root) {
     let target;
     if (root.nodeType == 11) {        target = root.getSelection ? root : root.ownerDocument;
@@ -1248,7 +1452,7 @@ function rmDOM(dom) {
 function isBlockElement(node) {
     let tile = node.wgTile;
     if (tile?.node)
-        return tile.node.type.isBlock;
+        return tile.node.isBlock;
     return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
 }
 function isBlocking(node) {
@@ -1588,6 +1792,12 @@ class Tile {
         let last = this.children.length - 1;
         return last < 0 ? null : this.children[last];
     }
+    get nodeParent() {
+        let tile = this;
+        while (!tile.node)
+            tile = tile.parent;
+        return tile;
+    }
     ignoreEvent(event) { return false; }
     get ignoreMutations() { return false; }
     toString() { return this.dom.nodeName + (this.children.length ? `(${this.children})` : ""); }
@@ -1664,7 +1874,7 @@ class CompositeTile extends Tile {
             orientation = node.type.orientation == "row" ? 0 : 1;
             if (node.isTextblock)
                 textblock = TextblockMap.get(state, start, node);
-            else if (node.type.isBlock)
+            else if (node.isBlock)
                 textblock = null;
         }
         else if (node && node.isText) {
@@ -1684,7 +1894,7 @@ class CompositeTile extends Tile {
     posAtCoordsRow(start, state, x, y, textblock) {
         let result = rowScan(x, y, add => {
             for (let child of this.children) {
-                if (child.isPoint)
+                if (child instanceof WidgetTile && !child.widget.type.inFlow)
                     continue;
                 let rects, { dom } = child;
                 if (dom.nodeType == 1)
@@ -1702,6 +1912,14 @@ class CompositeTile extends Tile {
             return null;
         let { closest, rect } = result;
         let pos = this.posBeforeChild(closest, start);
+        if (closest.dom.nodeName == "BR")
+            return CoordPos.create(pos, 1);
+        if (closest.node && closest.node.isPlot && closest.node.isInline) {
+            if (x > rect.right)
+                return CoordPos.create(pos + closest.length, -1);
+            if (x < rect.left)
+                return CoordPos.create(pos, 1);
+        }
         return closest.posAtCoordsInner(pos + closest.boundary, state, x, Math.max(rect.top, Math.min(rect.bottom, y)), textblock, 0);
     }
     posAtCoordsCol(start, state, x, y, textblock) {
@@ -1786,29 +2004,29 @@ class DocTile extends CompositeTile {
         let changed = findChangedRanges(this.state, this.decoSet, state, decoSet, changes);
         return this.updateRanges(state, decoSet, changed, wg, composition);
     }
-    updateRanges(state, decoSet, sections, wg, composition) {
+    updateRanges(state, decoSet, changes, wg, composition) {
         let wrapper = composition?.wrapCursor || null;
-        if ((!sections.length || sections.length == 2 && sections[1] == -1) && eqArray(wrapper, this.cursorWrapper))
+        if (isEmpty(changes) && eqArray(wrapper, this.cursorWrapper))
             return this;
         if (composition) {
-            let separated = separateComposition(sections, composition);
+            let separated = separateChange(changes, composition.fromB, composition.toB);
             if (!separated)
                 composition = null;
             else
-                sections = separated;
+                changes = separated;
         }
         let builder = new ContentUpdate(state, this, wg, new DecoIterator(state, decoSet), wrapper);
-        for (let i = 0, posB = 0, startCovered = false; i < sections.length;) {
-            let len = sections[i++], ins = sections[i++];
+        for (let i = 0, posB = 0, startCovered = false; i < changes.length;) {
+            let len = changes[i++], ins = changes[i++];
             if (composition && posB == composition.fromB && ins >= 0) {
                 if (!startCovered)
                     builder.update(0, false);
                 builder.composition(composition, len);
-                if (ins && (startCovered = i == sections.length || sections[i + 1] == -1))
+                if (ins && (startCovered = i == changes.length || changes[i + 1] == -1))
                     builder.update(0, false);
             }
             else if (ins == -1) {
-                builder.keep(len, !startCovered, i == sections.length);
+                builder.keep(len, !startCovered, i == changes.length);
                 startCovered = false;
             }
             else if (ins == -2) {
@@ -1877,7 +2095,8 @@ class DocTile extends CompositeTile {
                     else if (pos == end)
                         i = j + 1;
                 }
-                if (ch.isPlotContent && !ch.boundary ? pos >= off && pos <= end : pos > off && pos < end) {
+                if (!ch.isPoint &&
+                    ((ch.isPlotContent || ch.isNodeInner) && !ch.boundary ? pos >= off && pos <= end : pos > off && pos < end)) {
                     if (ch instanceof TextTile)
                         return new TilePos(ch, pos - off, pos);
                     else if (ch.isAtom) {
@@ -1986,6 +2205,8 @@ class DocTile extends CompositeTile {
                 dom = dom.parentNode;
             domBefore = dom.previousSibling;
         }
+        if (elt.node && elt.node.isInline && elt.node.isPlot && (!domBefore || !domBefore.nextSibling))
+            return domBefore ? elt.posAfter : elt.posBefore;
         while (domBefore && !((eltBefore = domBefore.wgTile) && eltBefore.parent == elt))
             domBefore = domBefore.previousSibling;
         return domBefore ? elt.posBeforeChild(eltBefore) + eltBefore.length : elt.posAtStart;
@@ -2180,7 +2401,7 @@ class TilePointer {
                 }
                 if (!dist && next.isNodeInner && !nodeBoundary)
                     break;
-                if (next.length <= dist) {
+                if (next.length < dist || next.length == dist && (next.isPoint || next.boundary)) {
                     if (walker)
                         walker.skip(next, 0, next.length);
                     dist -= next.length;
@@ -2416,7 +2637,7 @@ class ContentUpdate {
                 if (mark.type.element) {
                     this.openWrapper(renderMarkWrapper(mark), mark.spanning, false);
                 }
-            this.new.addChild(new WidgetTile(imgHack, null, 16 | 32, imgHack.render(this.wg)));
+            this.new.addChild(new WidgetTile(Widget.img, null, 16 | 32, Widget.img.render(this.wg)));
             return;
         }
         let found = [];
@@ -2610,24 +2831,24 @@ class ContentUpdate {
             return tile;
         }
     }
-    ensureBR() {
+    ensureHackNode() {
         let tile = this.new;
         if (!tile.isPlotContent)
             return;
         while (tile.isNodeInner)
             tile = tile.parent;
         let node = tile.node;
-        if (!node || !node.isPlot || !node.isTextblock)
+        if (!node || !node.isPlot || !(node.isTextblock || node.isInline))
             return;
         let hasHack = -1, needsHack = true;
         for (let parent = this.new, i = parent.children.length;;) {
             if (i > 0) {
                 let next = parent.children[--i];
                 if (next.isNodeInner || next instanceof WidgetTile && !next.widget.type.inFlow) ;
-                else if (next instanceof WidgetTile && next.widget == brHack && parent == this.new) {
+                else if (next instanceof WidgetTile && next.widget == Widget.br && parent == this.new) {
                     hasHack = i;
                 }
-                else if (next.dom.nodeName == "BR" || next instanceof TextTile && /\n$/.test(next.text)) {
+                else if (next.dom.nodeName == "BR") {
                     break;
                 }
                 else if (next instanceof CompositeTile && !next.isAtom) {
@@ -2652,11 +2873,11 @@ class ContentUpdate {
                 this.new.children.splice(hasHack, 1);
         }
         else if (needsHack) {
-            this.new.addChild(new WidgetTile(brHack, null, 16 | 64, brHack.render(this.wg)));
+            this.new.addChild(new WidgetTile(Widget.br, null, 16 | 64, Widget.br.render(this.wg)));
         }
     }
     up() {
-        this.ensureBR();
+        this.ensureHackNode();
         this.new = this.new.parent;
     }
     leaveNode() {
@@ -2739,7 +2960,7 @@ class ContentUpdate {
     finish() {
         while (!(this.new instanceof DocTile))
             this.up();
-        this.ensureBR();
+        this.ensureHackNode();
         return this.new;
     }
 }
@@ -2779,56 +3000,25 @@ function updateAttributes(dom, a, b) {
     }
     return changed;
 }
-const brHack = /*@__PURE__*/Widget.create({
-    render() { return document.createElement("br"); },
-    editable: true
-});
-const imgHack = /*@__PURE__*/Widget.create({
-    render() { return document.createElement("img"); },
-    editable: true
-});
-function separateComposition(sections, comp) {
-    let result = [], { fromB, toB } = comp;
-    let lenI = 0, dLen = 0;
-    for (let posB = 0, done = false, i = 0; i < sections.length;) {
-        let len = sections[i++], ins = sections[i++], endB = posB + (ins < 0 ? len : ins);
-        if (fromB > endB || toB < posB) {
-            result.push(len, ins);
-        }
-        else {
-            if (ins >= 0) {
-                if (posB < fromB || endB > toB)
-                    return null;
-                dLen = len - ins;
-            }
-            if (posB < fromB)
-                result.push(fromB - posB, ins);
-            if (!done) {
-                lenI = result.length;
-                result.push(0, comp.text.length);
-                done = true;
-            }
-            if (endB > toB)
-                result.push(endB - toB, ins);
-        }
-        posB = endB;
+
+class Coords {
+    ref;
+    rect;
+    constructor(ref, rect) {
+        this.ref = ref;
+        this.rect = rect;
     }
-    result[lenI] = comp.text.length + dLen;
-    return result;
 }
-
 function coordsAtPos(wg, pos, assoc) {
     let { offset, tile, pos: tilePos } = wg.docTile.resolve(pos, assoc);
     if (tile instanceof TextTile) {
-        let node = tile.dom, len = node.nodeValue.length;
-        if (!len)
-            return singleRect(textRange(node, 0, 0), 1);
-        let from = offset, to = offset, side = assoc < 0 && from || from == len ? 1 : -1;
+        let from = offset, to = offset;
+        let side = from == 0 ? -1 : from == tile.length ? 1 : -assoc;
         if (side < 0)
             to++;
         else
             from--;
-        return flattenV(singleRect(textRange(node, from, to), side, true), (side < 0) == ltrAt(wg.state, pos, assoc));
+        return new Coords(tile, flattenV(singleRect(textRange(tile.dom, from, to), side, true), (side < 0) == ltrAt(wg.state, pos, assoc)));
     }
     let tagTile = tile;
     while (!tagTile.node)
@@ -2839,10 +3029,10 @@ function coordsAtPos(wg, pos, assoc) {
         if (tile.widget.type.inFlow) {
             let rect = singleRect(tile.dom, after ? 1 : -1);
             if (rect.width || rect.height)
-                return horizontal ? flattenH(rect, !after) : flattenV(rect, ltrAt(wg.state, pos, 1) == !after);
+                return new Coords(tile, horizontal ? flattenH(rect, !after) : flattenV(rect, ltrAt(wg.state, pos, 1) == !after));
         }
         if (!tile.parent)
-            return new DOMRect;
+            return new Coords(tile, new DOMRect);
         offset = tile.parent.children.indexOf(tile) + (after ? 1 : 0);
         tile = tile.parent;
         assoc = after ? 1 : -1;
@@ -2852,9 +3042,11 @@ function coordsAtPos(wg, pos, assoc) {
                 let before = tile.children[i - 1];
                 if (before instanceof WidgetTile && !before.widget.type.inFlow)
                     continue;
+                if (before.dom.nodeName == "BR")
+                    break;
                 let rect = singleRect(before.dom, 1);
                 if (rect.width || rect.height)
-                    return horizontal ? flattenH(rect, false) : flattenV(rect, !ltrAt(wg.state, pos, 1));
+                    return new Coords(before, horizontal ? flattenH(rect, false) : flattenV(rect, !ltrAt(wg.state, pos, 1)));
             }
         }
         else {            for (let i = offset; i < tile.children.length; i++) {
@@ -2863,12 +3055,12 @@ function coordsAtPos(wg, pos, assoc) {
                     continue;
                 let rect = singleRect(after.dom, -1);
                 if (rect.width || rect.height)
-                    return horizontal ? flattenH(rect, true) : flattenV(rect, ltrAt(wg.state, pos, 1));
+                    return new Coords(after, horizontal ? flattenH(rect, true) : flattenV(rect, ltrAt(wg.state, pos, 1)));
             }
         }
     }
     let rect = singleRect(tile.dom, -assoc);
-    return horizontal ? flattenH(rect, assoc < 0) : flattenV(rect, assoc < 0);
+    return new Coords(tile, horizontal ? flattenH(rect, assoc < 0) : flattenV(rect, assoc < 0));
 }
 function flattenV(rect, left) {
     return rect.width ? new DOMRect(left ? rect.left : rect.right, rect.top, 0, rect.height) : rect;
@@ -3141,6 +3333,13 @@ const baseStyles = /*@__PURE__*/buildTheme("." + styleID, {
         borderLeft: "1.8px solid currentColor",
         marginLeft: "-0.9px",
     },
+    ".wg-cursor-v.wg-cursor-bold": {
+        borderLeft: "2.4px solid currentColor",
+        marginLeft: "-1.2px",
+    },
+    ".wg-cursor-v.wg-cursor-italic": {
+        transform: "rotate(10deg)"
+    },
     ".wg-cursor-h": {
         borderTop: "1.8px solid currentColor",
         marginTop: "-0.9px",
@@ -3151,6 +3350,10 @@ const baseStyles = /*@__PURE__*/buildTheme("." + styleID, {
             backgroundColor: "transparent"
         }
     },
+    ".wg-buffer": {
+        verticalAlign: "bottom",
+        height: "1em",
+    },
     "wg-placeholder": {
         opacity: "0.6",
         display: "inline-block",
@@ -3256,6 +3459,32 @@ function readDOMSelection(wg, range) {
         : wg.posAtDOM(range.focusNode, range.focusOffset);
     return GardSelection.range(anchor, head);
 }
+function selectionFromTouch(event, wg) {
+    let pos = wg.posAtCoords({ x: event.touches[0].clientX, y: event.touches[0].clientY });
+    if (pos.target != null) {
+        let target = wg.state.doc.nodeAt(pos.target);
+        if (target && target.type.isSelectable && wg.state.isAtom(target.type))
+            return GardSelection.node(pos.target, target);
+    }
+    return GardSelection.near(wg.state, pos.pos, pos.side);
+}
+function rangeForClick(wg, pos, type) {
+    if (type < 3 && pos.target != null) {
+        let target = wg.state.doc.nodeAt(pos.target);
+        if (target && target.type.isSelectable && wg.state.isAtom(target.type))
+            return GardSelection.node(pos.target, target);
+    }
+    if (type == 1) {        return GardSelection.near(wg.state, pos.pos, pos.side || -1);
+    }
+    else if (type == 2) {        return wg.state.wordAt(pos.pos, pos.side || 1);
+    }
+    else {        let cx = wg.state.doc.resolve(pos.pos), block = cx.textblockParent;
+        if (block)
+            return GardSelection.range(block.start, block.end);
+        else
+            return GardSelection.near(wg.state, pos.pos, pos.side || -1);
+    }
+}
 const Y_STEP = 5;
 function moveVertically(wg, start, forward, distance = 0, selectNode = false) {
     let editorRect = wg.contentDOM.getBoundingClientRect();
@@ -3478,13 +3707,21 @@ class DOMObserver {
             this.wg.scheduleFlush();
     }
     pollSelection() {
+        let { wg } = this;
         if (this.selectionChanged &&
-            (this.wg.hasFocus || !this.wg.focusable) && hasSelection(this.wg.contentDOM, this.selectionRange)) {
+            (wg.hasFocus || !wg.focusable) && hasSelection(wg.contentDOM, this.selectionRange)) {
             this.selectionChanged = false;
-            let sel = readDOMSelection(this.wg, this.selectionRange);
-            if (!sel.eqPos(this.wg.state.selection)) {
-                let userEvent = this.wg.inputState.lastTouchTime > Date.now() - 100 ? "select.pointer" : "select";
-                this.wg.dispatch({ selection: sel, userEvent });
+            let fromTouch = wg.inputState.lastTouchTime > Date.now() - 100;
+            let sel = readDOMSelection(wg, this.selectionRange);
+            if (!sel.eqPos(wg.state.selection)) {
+                let userEvent = "select";
+                if (fromTouch) {
+                    userEvent = "select.pointer";
+                    let event = wg.inputState.lastTouchEvent;
+                    if (event.touches.length == 1 && sel.isCursor)
+                        sel = selectionFromTouch(event, wg);
+                }
+                wg.dispatch({ selection: sel, userEvent });
             }
         }
     }
@@ -3533,11 +3770,7 @@ class DOMObserver {
         return records;
     }
     addDirtyRange(from, to) {
-        let sections = from ? [from, -1] : [], len = this.wg.flushedState.doc.length;
-        sections.push(to - from, -2);
-        if (to < len)
-            sections.push(len - to, -1);
-        this.dirty = this.dirty ? ChangeSet.composeSections(this.dirty, sections) : sections;
+        addRange(this.dirty || (this.dirty = []), from, to);
     }
     processRecords(records) {
         for (let record of records) {
@@ -3853,6 +4086,7 @@ class InputState {
     lastKeyCode = 0;
     lastKeyTime = 0;
     lastTouchTime = 0;
+    lastTouchEvent = null;
     lastScrollTop = 0;
     lastScrollLeft = 0;
     lastContextMenu = 0;
@@ -3963,7 +4197,7 @@ class InputState {
         let inText = node.nodeType == 3;
         let ref = this.wg.docTile.posFromDOM(node, inText ? 0 : offset);
         let dir = -1;
-        let textBefore = textNodeBefore(node.parentNode, domIndex(node));
+        let textBefore = node.parentNode && textNodeBefore(node.parentNode, domIndex(node));
         let prev = textBefore && Tile.get(textBefore);
         if (prev instanceof TextTile && prev.length < prev.dom.nodeValue.length)
             dir = 1;
@@ -3996,7 +4230,7 @@ class InputState {
         }
         let command = inputTypeCommands[type];
         if ((type == "deleteContentBackward" || type == "deleteContentForward") && range &&
-            (sel.empty
+            range.from != range.to &&            (sel.empty
                 ? !isSingleChar(this.domDoc, data.domRange.from, data.domRange.to) ||
                     sel.head != (type == "deleteContentBackward" ? range.to : range.from)
                 : sel.from != range.from || sel.to != range.to)) {
@@ -4081,6 +4315,10 @@ class InputState {
                     : prev == after ? after : before;
         }
     }
+    recordTouch(e) {
+        this.lastTouchTime = Date.now();
+        this.lastTouchEvent = e;
+    }
     connect() {
         this.ensureHandlers(this.wg.state);
     }
@@ -4280,23 +4518,6 @@ function eventBelongsToEditor(wg, event) {
 function queryPos(wg, event) {
     return wg.posAtCoords({ x: event.clientX, y: event.clientY });
 }
-function rangeForClick(wg, pos, type) {
-    if (type < 3 && pos.target != null) {
-        let target = wg.state.doc.nodeAt(pos.target);
-        if (target && target.type.isSelectable && wg.state.isAtom(target.type))
-            return GardSelection.node(pos.target, target);
-    }
-    if (type == 1) {        return GardSelection.near(wg.state, pos.pos, pos.side || -1);
-    }
-    else if (type == 2) {        return wg.state.wordAt(pos.pos, pos.side || 1);
-    }
-    else {        let cx = wg.state.doc.resolve(pos.pos), block = cx.textblockParent;
-        if (block)
-            return GardSelection.range(block.start, block.end);
-        else
-            return GardSelection.near(wg.state, pos.pos, pos.side || -1);
-    }
-}
 function basicMouseSelection(wg, event) {
     let start = queryPos(wg, event), type = event.detail;
     let startSel = wg.state.selection;
@@ -4392,11 +4613,13 @@ function compositionUpdate(wg, event) {
     if (!wg.inputState.composing) {
         wg.inputState.composing = { changes: 0, target: null };
         let wrap = null;
-        if (!wg.inputState.composing.changes && !event.data) {
+        if (!event.data) {
             let sel = wg.state.selection, rSel = wg.state.sel;
             if (sel.empty && (sel instanceof GardSelection.Text && sel.marks || !rSel.head.inText && rSel.head.index) &&
                 !eqArray(rSel.head.nodeBefore?.tag.marks, rSel.activeMarks))
                 wrap = rSel.activeMarks;
+            else if (sel.empty && inlineBoundNear(wg.state.sel.head))
+                wrap = rSel.activeMarks;
         }
         if (wrap)
             try {
@@ -4408,6 +4631,13 @@ function compositionUpdate(wg, event) {
             }
     }
 }
+function inlineBoundNear(pos) {
+    let { parent, index, inText } = pos;
+    if (inText || !parent.node.inlineContent)
+        return false;
+    return (index ? parent.node.content[index - 1].isPlot : parent.node.isInline) ||
+        (index < parent.node.content.length ? parent.node.content[index].isPlot : parent.node.isInline);
+}
 function isDeletionInputEvent(type) { return /^delete(Content|Word)/.test(type); }
 const inputTypeCommands = /*@__PURE__*/(() => ({
     historyUndo: undo,
@@ -4584,12 +4814,8 @@ const baseObservers = {
         wg.inputState.lastScrollTop = wg.scrollDOM.scrollTop;
         wg.inputState.lastScrollLeft = wg.scrollDOM.scrollLeft;
     },
-    touchstart(wg, e) {
-        wg.inputState.lastTouchTime = Date.now();
-    },
-    touchmove(wg) {
-        wg.inputState.lastTouchTime = Date.now();
-    },
+    touchstart(wg, e) { wg.inputState.recordTouch(e); },
+    touchmove(wg, e) { wg.inputState.recordTouch(e); },
     focus(wg) {
         if (!wg.scrollDOM.scrollTop && (wg.inputState.lastScrollTop || wg.inputState.lastScrollLeft)) {
             wg.scrollDOM.scrollTop = wg.inputState.lastScrollTop;
@@ -4712,9 +4938,34 @@ class ViewState {
 const cursorBlinkRate = /*@__PURE__*/GardState.Facet.define({
     combine: inputs => inputs.length ? Math.min(...inputs) : 1200
 });
-class cursorLayer {
+class CursorStyle {
+    height;
+    align;
+    color;
+    bold;
+    italic;
+    constructor(height, align, color, bold, italic) {
+        this.height = height;
+        this.align = align;
+        this.color = color;
+        this.bold = bold;
+        this.italic = italic;
+    }
+    static read(node, height) {
+        let win = node.ownerDocument.defaultView || window;
+        let elt = node.nodeType == 1 ? node : node.parentNode;
+        let style = win.getComputedStyle(elt);
+        return new CursorStyle(height, style.verticalAlign, style.color, +style.fontWeight > 400, style.fontStyle == "italic");
+    }
+    eq(other) {
+        return other && this.height == other.height && this.align == other.align &&
+            this.color == other.color && this.bold == other.bold && this.italic == other.italic;
+    }
+}
+class CursorLayer {
     layer;
-    pos = null;
+    info = null;
+    cached = null;
     constructor(wg) {
         this.layer = wg.scrollDOM.appendChild(document.createElement("wg-cursor-layer"));
         this.positionCursor = this.positionCursor.bind(this);
@@ -4737,48 +4988,135 @@ class cursorLayer {
         this.layer.remove();
     }
     positionCursor(wg) {
-        let pos = cursorPos(wg), cur = this.pos;
-        if (!pos ? cur : !cur || cur.left != pos.left || cur.top != pos.top || cur.size != pos.size) {
-            this.pos = pos;
-            wg.scheduleDOMWrite(() => {
-                let cursor = this.layer.firstChild;
-                if (!pos) {
-                    if (cursor)
-                        cursor.remove();
-                }
-                else {
-                    if (!cursor)
-                        cursor = this.layer.appendChild(document.createElement("wg-cursor"));
-                    cursor.className = "wg-cursor-" + (pos.horiz ? "h" : "v");
-                    cursor.style.top = pos.top + "px";
-                    cursor.style.left = pos.left + "px";
-                    cursor.style.width = pos.horiz ? pos.size + "px" : "";
-                    cursor.style.height = pos.horiz ? "" : pos.size + "px";
-                }
-            });
-        }
+        getCursorInfo(wg, this, info => {
+            let cur = this.info;
+            if (!info ? cur : !cur || cur.left != info.left || cur.top != info.top || cur.size != info.size ||
+                (cur.style ? !cur.style.eq(info.style) : info.style)) {
+                this.info = info;
+                wg.scheduleDOMWrite(() => {
+                    let cursor = this.layer.firstChild;
+                    if (!info) {
+                        if (cursor)
+                            cursor.remove();
+                    }
+                    else {
+                        if (!cursor)
+                            cursor = this.layer.appendChild(document.createElement("wg-cursor"));
+                        cursor.className = "wg-cursor-" + (info.horiz ? "h" : "v");
+                        cursor.style.top = info.top + "px";
+                        cursor.style.left = info.left + "px";
+                        cursor.style.width = info.horiz ? info.size + "px" : "";
+                        cursor.style.height = info.horiz ? "" : info.size + "px";
+                        cursor.style.borderLeftColor = info.style ? info.style.color : "";
+                        cursor.classList.toggle("wg-cursor-bold", info.style?.bold ?? false);
+                        cursor.classList.toggle("wg-cursor-italic", info.style?.italic ?? false);
+                    }
+                });
+            }
+        });
     }
 }
+function alignOffset(align, height) {
+    if (align == "super")
+        return height * 0.36;
+    if (align == "sub")
+        return height * -0.17;
+    if (align.endsWith("px"))
+        return +align.slice(0, align.length - 2);
+    if (align.endsWith("%"))
+        return height * (+align.slice(0, align.length - 1)) * 100;
+    return 0;
+}
+function vertOverlap(a, b) {
+    let margin = a.height / 3;
+    return a.top < b.bottom - margin && a.bottom > b.top + margin;
+}
 const VertWidth = 30, VertGap = 5;
-function cursorPos(wg) {
+function getCursorInfo(wg, plugin, cont) {
     let { state } = wg;
     if (!state.selection.isCursor)
-        return null;
-    let { head, headSide } = state.selection;
-    let { left, right, top, bottom } = wg.coordsAtPos(head, headSide);
-    let horiz = top == bottom, size = horiz ? right - left : bottom - top;
-    if (horiz && size > VertWidth) {
-        size = VertWidth;
-        if (!wg.state.textLTR)
-            left = right - size;
+        return cont(null);
+    let { head, headSide } = state.selection, { sel } = wg.state;
+    let { ref, rect } = coordsAtPos(wg, head, headSide);
+    let doc = wg.contentDOM.getBoundingClientRect();
+    if (!sel.head.parent.node.inlineContent) {
+        let width = Math.min(VertWidth, rect.width), top = rect.top;
         let other = wg.coordsAtPos(head, headSide > 0 ? -1 : 1);
         if (other.top == other.bottom && other.top != top) {
             let move = Math.min(VertGap, Math.abs(other.top - top) / 2);
-            top = bottom = top + move * (other.top < top ? -1 : 1);
+            top = top + move * (other.top < top ? -1 : 1);
         }
+        return cont({
+            left: (wg.state.textLTR ? rect.left : rect.right - width) - doc.left,
+            top: top - doc.top,
+            size: width,
+            horiz: true, style: null
+        });
     }
-    let doc = wg.contentDOM.getBoundingClientRect();
-    return { left: left - doc.left, top: top - doc.top, size, horiz };
+    let finish = (style, vertRect) => {
+        if (style && (!plugin.cached || plugin.cached.style != style))
+            plugin.cached = { style, marks, parent: sel.head.parent.node.tag };
+        let height = style ? style.height : rect.height;
+        let bot = rect.bottom;
+        if (vertRect && vertOverlap(vertRect, rect)) {
+            bot = vertRect.bottom;
+        }
+        else {
+            let win = ref.dom.ownerDocument.defaultView || window;
+            let refAlign = win.getComputedStyle((ref.dom.nodeType == 1 ? ref.dom : ref.dom.parentNode)).verticalAlign;
+            if (style && refAlign != style.align) {
+                bot += alignOffset(refAlign, rect.height) - alignOffset(style.align, style.height);
+            }
+        }
+        cont({
+            left: rect.left - doc.left,
+            top: bot - height - doc.top,
+            size: height,
+            horiz: false, style
+        });
+    };
+    let marks = sel.activeMarks;
+    if (ref instanceof TextTile) {
+        let node = ref.posBefore < head ? state.sel.head.nodeBefore : state.sel.head.nodeAfter;
+        if (node && node.isText && Mark.sameSet(node.marks, marks))
+            return finish(CursorStyle.read(ref.dom, rect.height), rect);
+    }
+    let pos = sel.head.parent.start, foundRect, foundNode;
+    scan: for (let sibling of sel.head.parent.node.content) {
+        if (sibling.isText && Mark.sameSet(sibling.marks, marks)) {
+            let { tile } = wg.docTile.resolve(pos, 1);
+            if (tile instanceof TextTile) {
+                let rects = textRange(tile.dom, 0, tile.length).getClientRects();
+                foundNode = tile.dom;
+                for (let i = 0; i < rects.length; i++) {
+                    foundRect = rects[i];
+                    if (vertOverlap(foundRect, rect))
+                        break scan;
+                }
+            }
+        }
+        pos += sibling.length;
+    }
+    if (foundNode)
+        return finish(CursorStyle.read(foundNode, foundRect.height), foundRect);
+    if (plugin.cached && Mark.sameSet(plugin.cached.marks, marks) && plugin.cached.parent.eq(sel.head.parent.node.tag))
+        return finish(plugin.cached.style);
+    if (!marks.length)
+        return finish(null);
+    let target = sel.head.parent.node.isDoc ? wg.contentDOM : wg.nodeDOM(sel.head.parent.before);
+    wg.scheduleDOMWrite(() => {
+        let temp = renderMarks(marks, "M");
+        temp.style.position = "absolute";
+        wg.observer.ignore(() => target.insertBefore(temp, target.firstChild));
+        wg.scheduleDOMRead(() => {
+            wg.scheduleDOMWrite(() => wg.observer.ignore(() => temp.remove()));
+            let inner = temp;
+            while (inner.firstChild)
+                inner = inner.firstChild;
+            let r = textRange(inner, 0, 1).getClientRects()[0];
+            finish(CursorStyle.read(inner, r.height), r);
+        });
+    });
 }
 function setBlinkRate(state, dom) {
     dom.style.animationDuration = state.facet(cursorBlinkRate) + "ms";
@@ -4971,7 +5309,7 @@ class Wordgard {
     }
     runUpdate(update, domChanges) {
         let composition = this.composing ? getCompositionInfo(this) : null;
-        let changes = domChanges ? ChangeSet.composeSections(domChanges, update.changes.sections) : update.changes.sections;
+        let changes = domChanges ? addUpdated(update.changes.sections, domChanges) : update.changes.sections;
         let prevDocTile = this.docTile;
         if (!update.empty) {
             this.updatePlugins(update);
@@ -5132,7 +5470,7 @@ class Wordgard {
     }
     coordsAtPos(pos, assoc = -1) {
         this.ensureFlushed();
-        return coordsAtPos(this, pos, assoc);
+        return coordsAtPos(this, pos, assoc).rect;
     }
     coordsForElement(pos) {
         this.ensureFlushed();
@@ -5381,7 +5719,7 @@ function attrsFromFacet(wg, facet, base) {
     Wordgard.Update = Update;
 ;return Wordgard})(Wordgard);
 const editorPlugin = /*@__PURE__*/GardState.Facet.define();
-const cursorPlugin = /*@__PURE__*/Wordgard.Plugin.fromClass(cursorLayer);
+const cursorPlugin = /*@__PURE__*/Wordgard.Plugin.fromClass(CursorLayer);
 class PluginInstance {
     spec;
     mustUpdate = null;
@@ -5682,6 +6020,7 @@ class BarButton {
         this.item = item;
         this.dom = document.createElement("button");
         this.dom.className = "wg-menu-button";
+        this.dom.type = "button";
         this.dom.tabIndex = -1;
         labelButton(wg, this.dom, item.label);
         if (item.description) {
@@ -5767,6 +6106,7 @@ class BarSubmenu {
         this.item = item;
         this.dom = document.createElement("wg-submenu");
         this.button = this.dom.appendChild(document.createElement("button"));
+        this.button.type = "button";
         this.button.tabIndex = -1;
         this.button.className = "wg-menu-button";
         this.button.setAttribute("aria-haspopup", "true");