@nerd-bible/wordgard 0.6.2-beta1 → 0.6.2-beta11

package/dist/editor.js

@@ -132,6 +132,7 @@ function joinRanges(ranges) {
     }
 }
 
+var Mark_ = Mark;
 class Widget {
     value;
     constructor(type, 
@@ -198,6 +199,16 @@ class Widget {
         render() {
             let img = document.createElement("img");
             img.className = "wg-buffer";
+            img.alt = "";
+            return img;
+        },
+        editable: true
+    });
+    Widget.blockImg = Widget.create({
+        render() {
+            let img = document.createElement("img");
+            img.className = "wg-blockBuffer";
+            img.alt = "";
             return img;
         },
         editable: true
@@ -278,15 +289,15 @@ const Decoration = /*@__PURE__*/(function (Decoration) {
         }
         Tag.attribute = attribute;
     })(Decoration.Tag || (Decoration.Tag = {}));
-    (function (Mark$1) {
+    (function (Mark) {
         function shape(type, shape) {
-            if (type instanceof Mark)
+            if (type instanceof Mark_)
                 type = type.type;
             if (type.spanning && !("element" in shape))
                 throw new Error("Spanning marks must have an element shape");
-            return markShape.of({ type, modified: Mark.Type.define(type.name, { ...type.spec, shape }) });
+            return markShape.of({ type, modified: Mark_.Type.define(type.name, { ...type.spec, shape }) });
         }
-        Mark$1.shape = shape;
+        Mark.shape = shape;
     })(Decoration.Mark || (Decoration.Mark = {}));
     class Point {
         constructor() { }
@@ -305,6 +316,7 @@ const Decoration = /*@__PURE__*/(function (Decoration) {
             return new WrapperDecoration(wrapper, spec?.target ? Elt.Selector.parse(spec.target) : null);
         }
         static source = GardState.Facet.define({
+            name: "pointDecorations",
             combine: sources => sources.concat(nodeSelection)
         });
         static set(source) { return PointSet.create(source); }
@@ -329,19 +341,21 @@ const Decoration = /*@__PURE__*/(function (Decoration) {
         static attribute(attr, value, options = {}) {
             return new AttributeRangeDecoration(attr, value, options);
         }
-        static source = GardState.Facet.define();
+        static source = GardState.Facet.define({ name: "rangeDecorations" });
         static set(source) { return RangeSet.create(source); }
         static none = RangeSet.empty;
     }
     Decoration.Range = Range;
 ;return Decoration})({});
 const tagShape = /*@__PURE__*/GardState.Facet.define({
+    name: "tagShape",
     combine: shapes => new Map(shapes.map(s => [s.type, s.shape]).reverse())
 });
-const tagWrapper = /*@__PURE__*/GardState.Facet.define();
-const tagWidget = /*@__PURE__*/GardState.Facet.define();
-const tagAttribute = /*@__PURE__*/GardState.Facet.define();
+const tagWrapper = /*@__PURE__*/GardState.Facet.define({ name: "tagWrapper" });
+const tagWidget = /*@__PURE__*/GardState.Facet.define({ name: "tagWidget" });
+const tagAttribute = /*@__PURE__*/GardState.Facet.define({ name: "tagAttribute" });
 const markShape = /*@__PURE__*/GardState.Facet.define({
+    name: "markShape",
     combine: shapes => new Map(shapes.map(s => [s.type, s.modified]).reverse())
 });
 function memo(f) {
@@ -517,7 +531,6 @@ const globalDecoFacets = [tagShape, tagWidget, tagWrapper, tagAttribute, markSha
 function findChangedRanges(prevState, prevDeco, state, deco, sections) {
     let result = [];
     let globalChange = globalDecoFacets.some(facet => prevState.facet(facet) !== state.facet(facet));
-    let shapeChanges = [];
     for (let i = 0, posA = 0, posB = 0; i < sections.length;) {
         let len = sections[i++], ins = sections[i++];
         if (ins == -1 && globalChange) {
@@ -540,11 +553,6 @@ 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) {
-                        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;
@@ -573,34 +581,8 @@ function findChangedRanges(prevState, prevDeco, state, deco, sections) {
             addSection(result, len, ins);
         }
     }
-    if (shapeChanges.length)
-        return addAtomicityChanges(result, prevState, shapeChanges);
     return result;
 }
-function addAtomicityChanges(changes, prev, nodes) {
-    let added = [];
-    let scan = prev.doc.resolve(0), sectionPos = 0, sectionI = 0, off = 0;
-    for (let posB of nodes) {
-        while (posB >= sectionPos) {
-            let len = changes[sectionI++], ins = changes[sectionI++];
-            if (ins < 0) {
-                sectionPos += len;
-            }
-            else {
-                sectionPos += ins;
-                off += len - ins;
-            }
-        }
-        let posA = posB - off;
-        if (scan.pos < posA)
-            scan = scan.advance(posA - scan.pos);
-        let node = scan.nodeAfter;
-        if (!node)
-            continue;
-        added.push(posA, posA + node.length);
-    }
-    return added.length ? addUpdated(changes, added) : changes;
-}
 class SpanIterator {
     ranges;
     points;
@@ -756,7 +738,7 @@ class DecoIterator {
         let pos = this.pos.advance(from - this.pos.pos), started = inclusiveStart;
         let atomParent;
         for (let p = pos.parent; p; p = p.parent)
-            if (this.state.isAtom(p.node.type))
+            if (!p.node.isDoc && (this.state.isAtom(p.node.type) || this.hasAtomShape(p.before)))
                 atomParent = p;
         let pendingDeco = [], pendingPos = -1;
         let pendingShape = null, pendingShapeSet = null;
@@ -767,7 +749,7 @@ class DecoIterator {
                 else
                     started = true;
                 let hasPending = pendingPos == pos && !node.isText;
-                let shape = hasPending && pendingShape ? pendingShape.shape : this.tagShape(node.tag, iter.active);
+                let shape = this.tagShape(node.tag, iter.active, hasPending ? pendingShape : null);
                 if (hasPending)
                     for (let deco of pendingDeco)
                         shape = applyDeco(shape, deco, node.tag);
@@ -781,22 +763,23 @@ class DecoIterator {
                     this.widgets(node.tag, 0, walker);
                 else
                     started = true;
-                let shape = pendingShape && pendingPos == pos ? pendingShape.shape
-                    : this.tagShape(node.tag, iter.active);
+                let shape = this.tagShape(node.tag, iter.active, pendingShape && pendingPos == pos ? pendingShape : null);
                 if (pendingPos == pos)
                     for (let deco of pendingDeco)
                         shape = applyDeco(shape, deco, node.tag);
                 let wrappers = this.nodeWrappers(node.tag, iter.active, !shape.hasContent);
                 let atom = !shape.hasContent;
-                if (atom)
+                if (atom) {
                     walker.node(node, shape, wrappers, pos + node.length > to ? to - pos : undefined);
-                else
+                }
+                else {
                     walker.enter(node, shape, wrappers);
-                this.widgets(node.tag, 2, walker);
+                    this.widgets(node.tag, 2, walker);
+                }
                 return !atom;
             },
             leavePlot: tag => {
-                if (started)
+                if (started && !atomParent)
                     this.widgets(tag, 3, walker);
                 else
                     started = true;
@@ -804,7 +787,7 @@ class DecoIterator {
                 this.widgets(tag, 1, walker);
             }
         };
-        if (inclusiveStart) {
+        if (inclusiveStart && !atomParent) {
             let before = pos.nodeBefore;
             if (before)
                 this.widgets(before.tag, 1, walker);
@@ -816,9 +799,10 @@ class DecoIterator {
                 let end = Math.min(to, atomParent.after), done = atomParent.after <= to;
                 walker.nodePart(atomParent.node, end - pos.pos, done);
                 pos = pos.advance(end - pos.pos);
-                if (done)
+                if (done) {
                     this.widgets(atomParent.node.tag, 1, walker);
-                atomParent = undefined;
+                    atomParent = undefined;
+                }
                 while (iter.point && iter.from < end)
                     iter.next();
             }
@@ -861,9 +845,8 @@ class DecoIterator {
         }
         this.pos = pos;
     }
-    tagShape(tag, active) {
-        let override = this.tagShapes.get(tag.type);
-        let shape = override ? override(tag) : baseTagShape(tag);
+    tagShape(tag, active, fromPoint) {
+        let shape = fromPoint ? fromPoint.shape : this.tagShapes.get(tag.type)?.(tag) ?? baseTagShape(tag);
         if (tag.marks.length)
             shape = addMarkAttributes(this.markShapes, shape, tag);
         let add;
@@ -892,6 +875,15 @@ class DecoIterator {
         }
         return shape;
     }
+    atomCache = new Map();
+    hasAtomShape(pos) {
+        let has = this.atomCache.get(pos);
+        if (has == null) {
+            has = this.pointSets.some(s => s.at(pos, d => d instanceof ShapeDecoration && !d.shape.hasContent));
+            this.atomCache.set(pos, has);
+        }
+        return has;
+    }
 }
 function compareSetPrec(setA, setB, array) {
     if (setA != setB)
@@ -916,7 +908,7 @@ function eqArray(a, b) {
             return false;
     return true;
 }
-const exceptionSink = /*@__PURE__*/GardState.Facet.define();
+const exceptionSink = /*@__PURE__*/GardState.Facet.define({ name: "exceptionSink" });
 function logException(state, exception, context) {
     let handler = state.facet(exceptionSink);
     if (handler.length)
@@ -929,6 +921,28 @@ function logException(state, exception, context) {
         console.error(exception);
 }
 
+let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
+let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
+const edge = /*@__PURE__*/(() => /Edge\/(\d+)/.exec(nav.userAgent))();
+const gecko = /*@__PURE__*/(() => !edge && /gecko\/(\d+)/i.test(nav.userAgent))();
+const chrome = /*@__PURE__*/(() => !edge && /Chrome\/(\d+)/.exec(nav.userAgent))();
+const webkit = /*@__PURE__*/(() => "webkitFontSmoothing" in doc.documentElement.style)();
+const safari = /*@__PURE__*/(() => !edge && /Apple Computer/.test(nav.vendor))();
+const ios = /*@__PURE__*/(() => safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2))();
+var browser = /*@__PURE__*/(() => ({
+    mac: ios || /Mac/.test(nav.platform),
+    windows: /Win/.test(nav.platform),
+    linux: /Linux|X11/.test(nav.platform),
+    gecko_version: gecko ? +(/Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+    chrome: !!chrome,
+    chrome_version: chrome ? +chrome[1] : 0,
+    ios,
+    android: /Android\b/.test(nav.userAgent),
+    webkit,
+    webkit_version: webkit ? +(/\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+    safari,
+    safari_version: safari ? +(/\bVersion\/(\d+(\.\d+)?)/.exec(nav.userAgent) || [0, 0])[1] : 0}))();
+
 function getSelection(root) {
     let target;
     if (root.nodeType == 11) {        target = root.getSelection ? root : root.ownerDocument;
@@ -938,6 +952,17 @@ function getSelection(root) {
     }
     return target.getSelection();
 }
+function getSelectionRange(root) {
+    let sel = getSelection(root);
+    if (!sel)
+        return null;
+    if (browser.safari && root.nodeType == 11) {
+        let range = sel.getComposedRanges(root)[0];
+        if (range)
+            return range;
+    }
+    return new StaticRange(sel.getRangeAt(0));
+}
 function hasSelection(dom, selection) {
     if (!selection.focusNode)
         return false;
@@ -1307,12 +1332,6 @@ class Tile {
         let last = this.children.length - 1;
         return last < 0 ? null : this.children[last];
     }
-    get nodeParent() {
-        let tile = this;
-        while (!tile.tag)
-            tile = tile.parent;
-        return tile;
-    }
     ignoreEvent(event) { return false; }
     get ignoreMutations() { return false; }
     toString() { return this.dom.nodeName + (this.children.length ? `(${this.children})` : ""); }
@@ -1332,8 +1351,8 @@ class Tile {
         return tile;
     }
     markDirty() {
-        if (!(this.flags & 8192)) {
-            this.flags |= 8192;
+        if (!(this.flags & 16384)) {
+            this.flags |= 16384;
             this.parent?.markDirty();
         }
     }
@@ -1344,10 +1363,10 @@ class Tile {
     static get(node) { return node.wgTile; }
 }
 function checkSync(tile) {
-    if ((tile.flags & 256) && !(tile.flags & 8192))
+    if ((tile.flags & 256) && !(tile.flags & 16384))
         return false;
     tile.flags |= 256;
-    tile.flags &= -8193;
+    tile.flags &= -16385;
     return true;
 }
 class CompositeTile extends Tile {
@@ -1355,9 +1374,9 @@ class CompositeTile extends Tile {
     addChild(child) {
         if (this.flags & 256)
             throw new Error("Cannot add to a synced tile");
-        if ((this.flags & 4096) && !(child.flags & 2048)) {
+        if ((this.flags & 8192) && !(child.flags & 4096)) {
             let i = this.children.length;
-            while (i > 0 && (this.children[i - 1].flags & 2048))
+            while (i > 0 && (this.children[i - 1].flags & 4096))
                 i--;
             this.children.splice(i, 0, child);
         }
@@ -1366,6 +1385,10 @@ class CompositeTile extends Tile {
         }
         child.parent = this;
     }
+    putChild(child, index) {
+        this.children.splice(index, 0, child);
+        child.parent = this;
+    }
     sync() {
         if (!checkSync(this))
             return;
@@ -1563,8 +1586,7 @@ class DocTile extends CompositeTile {
                     builder.update(0, true);
             }
             else if (ins == -1) {
-                builder.keep(len, !startCovered, i == changes.length);
-                startCovered = false;
+                startCovered = builder.keep(len, !startCovered, i == changes.length);
             }
             else if (ins == -2) {
                 builder.update(len, !startCovered);
@@ -1657,7 +1679,7 @@ class DocTile extends CompositeTile {
                     parentBefore = before;
                     before = before.children[beforeI = before.children.length - 1];
                 }
-                if (before.isNodeInner && (before.flags & 2048) || (before.flags & 64)) {
+                if (before.isNodeInner && (before.flags & 4096) || (before.flags & 64)) {
                     parent = parentBefore;
                     i = beforeI;
                     continue adjust;
@@ -1669,7 +1691,7 @@ class DocTile extends CompositeTile {
                     parentAfter = after;
                     after = after.children[afterI = 0];
                 }
-                if (after.isNodeInner && !(after.flags & 2048) || (after.flags & 32)) {
+                if (after.isNodeInner && !(after.flags & 4096) || (after.flags & 32)) {
                     parent = parentAfter;
                     i = afterI + 1;
                     continue adjust;
@@ -1788,20 +1810,20 @@ class EltTile extends CompositeTile {
     get boundary() { return this._tag && !(this.flags & 512) ? 1 : 0; }
     get tag() { return this._tag; }
     get contentTile() {
-        if (!(this.flags & 1024))
+        if (!(this.flags & 2048))
             return null;
         for (let ch of this.children)
-            if (ch.isNodeInner && (ch.flags & 1024))
+            if (ch.isNodeInner && (ch.flags & 2048))
                 return ch.contentTile;
         return this;
     }
     static of(elt, tag, flags, length, dom) {
         if (elt.hasContent) {
-            flags |= 1024;
+            flags |= 2048;
             if (elt.children.length > 1) {
                 let zero = elt.children.indexOf(0);
                 if (zero > -1 && zero < elt.children.length - 1)
-                    flags |= 4096;
+                    flags |= 8192;
             }
         }
         return new EltTile(elt, tag, flags, length, dom || elt.outerDOM());
@@ -1813,8 +1835,13 @@ function setUneditable(dom) {
         span.appendChild(dom);
         dom = span;
     }
-    if (dom.contentEditable == "inherit" && !/^(br|hr|img|input|wbr)$/i.test(dom.nodeName))
-        dom.contentEditable = "false";
+    let cur = dom.contentEditable;
+    if (cur == "false")
+        return true;
+    if (cur != "inherit" || !/^(br|hr|img|input|wbr)$/i.test(dom.nodeName))
+        return false;
+    dom.contentEditable = "false";
+    return true;
 }
 class WidgetTile extends Tile {
     widget;
@@ -1973,7 +2000,12 @@ class TilePointer {
         let { tile, index } = this;
         if (tile.isAtom)
             return tile;
-        return index < tile.children.length ? tile.children[index] : null;
+        for (; index < tile.children.length; index++) {
+            let next = tile.children[index];
+            if (!(next instanceof WidgetTile && (next.widget == Widget.blockImg || next.widget == Widget.br)))
+                return next;
+        }
+        return null;
     }
     matchingWrapper(elt, spanning, reused) {
         let best, bestScore = 0;
@@ -2011,7 +2043,7 @@ class TilePointer {
                     if (!before.isPoint)
                         break;
                     if (!reused.has(before) && before instanceof WidgetTile && before.widget.eq(widget) &&
-                        (before.flags & 96) == sideFlag && !(before.flags & 8192)) {
+                        (before.flags & 96) == sideFlag && !(before.flags & 16384)) {
                         reused.set(before, 1);
                         return before;
                     }
@@ -2043,11 +2075,9 @@ class ContentUpdate {
                 if (span) {
                     this.new = span;
                 }
-                else {
-                    this.reused.set(tile, 2);
-                    let inner = EltTile.of(tile.elt, tile.tag, tile.flags, tile.boundary * 2, tile.dom);
-                    this.new.addChild(inner);
-                    this.new = inner;
+                else if (!tile.isNodeInner) {                    let copy = this.copyEltStructure(tile);
+                    this.new.addChild(copy);
+                    this.new = copy.contentTile;
                 }
             },
             leave: tile => {
@@ -2071,7 +2101,8 @@ class ContentUpdate {
                 }
             },
             skip: (tile, from, to) => {
-                if (!(tile instanceof TextTile)) {
+                if (tile.isNodeInner) ;
+                else if (!(tile instanceof TextTile)) {
                     if (!from && to == tile.length) {
                         this.reused.set(tile, 1);
                         this.new.addChild(tile);
@@ -2093,12 +2124,15 @@ class ContentUpdate {
                             this.partialNode = null;
                             this.new.addChild(this.buildNodeShape(tag, length + (to - from), shape, reuse));
                         }
+                        else {
+                            this.partialNode.length += to - from;
+                        }
                     }
                 }
                 else if (this.new.lastChild instanceof TextTile && !this.new.lastChild.isComposition) {
                     this.addText(tile.text.slice(from, to));
                 }
-                else if (!from && to == tile.text.length && !(tile.flags & 8192) && !this.reused.has(tile)) {
+                else if (!from && to == tile.text.length && !(tile.flags & 16384) && !this.reused.has(tile)) {
                     this.reused.set(tile, 1);
                     this.new.addChild(tile);
                 }
@@ -2113,6 +2147,20 @@ class ContentUpdate {
         };
     }
     keep(len, includeStart, includeEnd) {
+        if (!!this.partialNode != (this.old.tile.isAtom && !this.old.tile.isText)) {
+            let dist = Math.min(len, this.partialNode
+                ? this.state.doc.nodeAt(this.posB - this.partialNode.length).length - this.partialNode.length
+                : this.old.tile.length - this.old.index);
+            this.replace(dist, dist, includeStart);
+            if (dist == len)
+                return true;
+            includeStart = false;
+            len -= dist;
+        }
+        this.keepCheckEnd(len, includeStart, includeEnd);
+        return includeEnd;
+    }
+    keepCheckEnd(len, includeStart, includeEnd) {
         let cut = [], end = this.posB + len;
         if (this.deco.endWidgets)
             for (let nw = this.new, { tile, index, parent } = this.old, pos = this.posB; pos < end;) {
@@ -2253,7 +2301,7 @@ class ContentUpdate {
                     if (!(next instanceof TextTile) || this.reused.has(next)) {
                         this.addText(node.param);
                     }
-                    else if (next.text == node.param && !(next.flags & 8192)) {
+                    else if (next.text == node.param && !(next.flags & 16384)) {
                         this.reused.set(next, 1);
                         this.new.addChild(next);
                     }
@@ -2292,6 +2340,9 @@ class ContentUpdate {
                     for (let i = 0; i < wrappers; i++)
                         this.up();
                 }
+                else {
+                    this.partialNode.length += length;
+                }
             },
             widget: (widget, side) => {
                 let sideFlag = side < 0 ? 32 : side > 0 ? 64 : 0;
@@ -2301,9 +2352,10 @@ class ContentUpdate {
                             : null;
                 if (!tile) {
                     let dom = widget.render(this.wg);
-                    if (!widget.type.editable)
-                        setUneditable(dom);
-                    tile = new WidgetTile(widget, null, 16 | sideFlag, dom);
+                    let flags = 16 | sideFlag;
+                    if (!widget.type.editable && setUneditable(dom))
+                        flags |= 1024;
+                    tile = new WidgetTile(widget, null, flags, dom);
                     if (widget.type.connect)
                         this.toConnect.push(tile);
                 }
@@ -2340,27 +2392,33 @@ class ContentUpdate {
     }
     buildNodeShape(tag, length, shape, reuse, inEditable = true, afterContent = 0) {
         if (shape instanceof Elt) {
+            let flags = (tag ? (shape.hasContent ? 0 : 512)
+                : 1 | (shape.hasContent ? 0 : 16)) | afterContent;
             if (inEditable && !shape.hasContent) {
-                if (Attributes.get(shape.attrs, "contenteditable") == null && !/^(br|hr|img|input|wbr)$/i.test(shape.tagName))
+                let contentEd = Attributes.get(shape.attrs, "contenteditable");
+                if (contentEd == null && !/^(br|hr|img|input|wbr)$/i.test(shape.tagName)) {
                     shape = Elt.create(shape.tagName, Attributes.merge(shape.attrs, ["contenteditable", "false"]), shape.children);
+                    flags |= 1024;
+                }
+                else if (contentEd == "false") {
+                    flags |= 1024;
+                }
                 inEditable = false;
             }
             let reusable, dom, strict = true;
             if (reusable = this.findReusableTile(shape, reuse, strict) || this.findReusableTile(shape, reuse, strict = false)) {
                 this.reused.set(reusable, 2);
                 dom = reusable.dom;
-                if (reusable.flags & 8192)
+                if (reusable.flags & 16384)
                     updateAttributes(dom, takeAttributes(reusable.dom), shape.attrs);
                 else if (!strict)
                     updateAttributes(dom, reusable.elt.attrs, shape.attrs);
             }
-            let flags = (tag ? (shape.hasContent ? 0 : 512)
-                : 1 | (shape.hasContent ? 0 : 16)) | afterContent;
             let tile = EltTile.of(shape, tag, flags, tag ? length : 0, dom);
             let afterContentInner = 0;
             for (let ch of shape.children) {
                 if (ch === 0) {
-                    afterContentInner = 2048;
+                    afterContentInner = 4096;
                     tile.flags |= 2;
                 }
                 else {
@@ -2369,8 +2427,7 @@ class ContentUpdate {
             }
             return tile;
         }
-        else {
-            let reusable, dom;
+        else {            let reusable, dom;
             if (reusable = this.findReusableTile(shape, reuse, false)) {
                 this.reused.set(reusable, 2);
                 dom = reusable.dom;
@@ -2378,30 +2435,41 @@ class ContentUpdate {
             else {
                 dom = shape.render(this.wg);
             }
-            if (inEditable && !shape.type.editable)
-                setUneditable(dom);
             let flags = (tag ? 512 : 16 | 1) | afterContent;
+            if (inEditable && !shape.type.editable && setUneditable(dom))
+                flags |= 1024;
             let tile = new WidgetTile(shape, tag, flags, dom, tag ? length : 0);
             if (shape.type.connect)
                 this.toConnect.push(tile);
             return tile;
         }
     }
-    ensureHackNode() {
-        let tile = this.new;
-        if (!tile.isPlotContent)
-            return;
-        while (tile.isNodeInner)
-            tile = tile.parent;
-        let tag = tile.tag;
-        if (!tag || !tag.isPlot || !(tag.isTextblock || tag.type.isInline))
-            return;
+    copyEltStructure(tile) {
+        this.reused.set(tile, 2);
+        let copy = EltTile.of(tile.elt, tile.tag, tile.flags, tile.boundary * 2, tile.dom);
+        if (tile.isNodeOuter)
+            for (let child of tile.children)
+                if (child.isNodeInner) {
+                    copy.addChild((child.flags & 2048) ? this.copyEltStructure(child) : child);
+                }
+        return copy;
+    }
+    ensureHackNodes() {
+        if (this.new.isPlotContent || this.new.isWrapper) {
+            let { tag } = this.new.nearestNode();
+            if (this.new.isPlotContent && tag.isPlot && (tag.isTextblock || tag.type.isInline))
+                this.ensureTrailingHackNode(this.new);
+            if (tag.isPlot && !tag.inlineContent)
+                this.ensureBlockSeparators(this.new);
+        }
+    }
+    ensureTrailingHackNode(target) {
         let hasHack = -1, needsHack = true;
-        for (let parent = this.new, i = parent.children.length;;) {
+        for (let parent = target, 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 == Widget.br && parent == this.new) {
+                else if (next instanceof WidgetTile && next.widget == Widget.br && parent == target) {
                     hasHack = i;
                 }
                 else if (next.dom.nodeName == "BR") {
@@ -2416,7 +2484,7 @@ class ContentUpdate {
                     break;
                 }
             }
-            else if (parent == this.new) {
+            else if (parent == target) {
                 break;
             }
             else {
@@ -2426,14 +2494,32 @@ class ContentUpdate {
         }
         if (hasHack > -1) {
             if (!needsHack)
-                this.new.children.splice(hasHack, 1);
+                target.children.splice(hasHack, 1);
         }
         else if (needsHack) {
-            this.new.addChild(new WidgetTile(Widget.br, null, 16 | 64, Widget.br.render(this.wg)));
+            target.addChild(new WidgetTile(Widget.br, null, 16 | 64, Widget.br.render(this.wg)));
+        }
+    }
+    ensureBlockSeparators(target) {
+        for (let i = 0, prev = null;; i++) {
+            let next = i == target.children.length ? null : target.children[i];
+            if (next && next.isNodeInner)
+                continue;
+            if (!next && !prev)
+                break;
+            if ((next || prev) &&
+                (!next || ((next.flags & 1024) && !(next.flags & 32))) &&
+                (!prev || ((prev.flags & 1024) && !(prev.flags & 64)))) {
+                let widget = new WidgetTile(Widget.blockImg, null, 16 | 64, Widget.blockImg.render(this.wg));
+                target.putChild(widget, i++);
+            }
+            if (!next)
+                break;
+            prev = next;
         }
     }
     up() {
-        this.ensureHackNode();
+        this.ensureHackNodes();
         this.new = this.new.parent;
     }
     leaveNode() {
@@ -2492,8 +2578,10 @@ class ContentUpdate {
                 prev = copy;
                 prev.parent = cur;
             }
-            for (let j = i + 1; j < cur.children.length; j++)
+            for (let j = i + 1; j < cur.children.length; j++) {
                 prev.addChild(cur.children[j]);
+                cur.children.splice(j, 1);
+            }
             return prev;
         }
         return null;
@@ -2516,7 +2604,7 @@ class ContentUpdate {
     finish() {
         while (!(this.new instanceof DocTile))
             this.up();
-        this.ensureHackNode();
+        this.ensureHackNodes();
         return this.new;
     }
 }
@@ -2635,36 +2723,28 @@ function flattenH(rect, top) {
     return rect.height ? new DOMRect(rect.left, top ? rect.top : rect.bottom, rect.width, 0) : rect;
 }
 
-let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
-let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
-const edge = /*@__PURE__*/(() => /Edge\/(\d+)/.exec(nav.userAgent))();
-const gecko = /*@__PURE__*/(() => !edge && /gecko\/(\d+)/i.test(nav.userAgent))();
-const chrome = /*@__PURE__*/(() => !edge && /Chrome\/(\d+)/.exec(nav.userAgent))();
-const webkit = /*@__PURE__*/(() => "webkitFontSmoothing" in doc.documentElement.style)();
-const safari = /*@__PURE__*/(() => !edge && /Apple Computer/.test(nav.vendor))();
-const ios = /*@__PURE__*/(() => safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2))();
-var browser = /*@__PURE__*/(() => ({
-    mac: ios || /Mac/.test(nav.platform),
-    windows: /Win/.test(nav.platform),
-    linux: /Linux|X11/.test(nav.platform),
-    gecko_version: gecko ? +(/Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
-    chrome: !!chrome,
-    chrome_version: chrome ? +chrome[1] : 0,
-    ios,
-    android: /Android\b/.test(nav.userAgent),
-    webkit,
-    webkit_version: webkit ? +(/\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
-    safari,
-    safari_version: safari ? +(/\bVersion\/(\d+(\.\d+)?)/.exec(nav.userAgent) || [0, 0])[1] : 0}))();
-
-const clipboardOutputFilter = /*@__PURE__*/GardState.Facet.define();
-const clipboardOutputHTMLFilter = /*@__PURE__*/GardState.Facet.define();
-const clipboardTextSerializer = /*@__PURE__*/GardState.Facet.define();
-const clipboardOutputTextFilter = /*@__PURE__*/GardState.Facet.define();
-const clipboardInputFilter = /*@__PURE__*/GardState.Facet.define();
-const clipboardInputHTMLFilter = /*@__PURE__*/GardState.Facet.define();
-const clipboardTextParser = /*@__PURE__*/GardState.Facet.define();
-const clipboardInputTextFilter = /*@__PURE__*/GardState.Facet.define();
+const clipboardOutputFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardOutputFilter"
+});
+const clipboardOutputHTMLFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardOutputHTMLFilter"
+});
+const clipboardTextSerializer = /*@__PURE__*/GardState.Facet.define({ name: "clipboardTextSerializer" });
+const clipboardOutputTextFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardOutputTextFilter"
+});
+const clipboardInputFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardInputFilter"
+});
+const clipboardInputHTMLFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardInputHTMLFilter"
+});
+const clipboardTextParser = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardTextParser"
+});
+const clipboardInputTextFilter = /*@__PURE__*/GardState.Facet.define({
+    name: "clipboardInputTextFilter"
+});
 function writeClipboard(state, slice, data) {
     for (let filter of state.facet(clipboardOutputFilter))
         slice = filter(slice, state);
@@ -2712,9 +2792,7 @@ function writeClipboard(state, slice, data) {
 function isOpen(elt) {
     return (elt.getAttribute("wg-open") || null);
 }
-function readClipboard(state, data, targetContext, plain) {
-    let html = data.getData("text/html");
-    let text = data.getData("text/plain") || data.getData("Text") || data.getData("text/uri-list").replace(/\r?\n/g, " ");
+function readClipboard(state, html, text, targetContext, plain) {
     let slice;
     if (text && (targetContext.parent.node.type.hasRole(Node.Role.Code) || !html || plain)) {
         for (let filter of state.facet(clipboardInputTextFilter))
@@ -2812,8 +2890,12 @@ function restoreReplacedSpaces(dom) {
     }
 }
 
-const theme$1 = /*@__PURE__*/GardState.Facet.define({ combine: strs => strs.join(" ") });
+const theme$1 = /*@__PURE__*/GardState.Facet.define({
+    name: "theme",
+    combine: strs => strs.join(" ")
+});
 const colorScheme = /*@__PURE__*/GardState.Facet.define({
+    name: "colorScheme",
     combine: values => values.length ? values[0] : "light"
 });
 const styleID = /*@__PURE__*/StyleModule.newName(), baseLightID = /*@__PURE__*/StyleModule.newName(), baseDarkID = /*@__PURE__*/StyleModule.newName();
@@ -2841,7 +2923,7 @@ const baseStyles = /*@__PURE__*/buildTheme("." + styleID, {
         flexDirection: "column",
         border: "1px solid var(--wg-border-color)"
     },
-    "&:has(> wg-scroller > wg-content:focus)": {
+    "&.wg-focused": {
         outline: "1px solid var(--wg-highlight-color)",
         "& > wg-scroller > wg-cursor-layer": {
             animation: "steps(1) wg-blink 1.2s infinite"
@@ -2917,6 +2999,10 @@ const baseStyles = /*@__PURE__*/buildTheme("." + styleID, {
     ".wg-buffer": {
         verticalAlign: "bottom",
         height: "1em",
+        display: "inline"
+    },
+    ".wg-blockBuffer": {
+        position: "absolute"
     },
     "wg-placeholder": {
         opacity: "0.6",
@@ -3068,15 +3154,15 @@ function rangeForClick(wg, pos, type) {
         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);
+    if (type == 1) {        return GardSelection.near(wg.state, pos.pos, pos.side);
     }
-    else if (type == 2) {        return wg.state.wordAt(pos.pos, pos.side || 1);
+    else if (type == 2) {        return wg.state.wordAt(pos.pos, pos.side) || GardSelection.near(wg.state, pos.pos, pos.side);
     }
     else {        let cx = wg.state.doc.resolve(pos.pos), block = cx.textblockParent;
         if (block)
             return GardSelection.undirectionalRange(block.start, block.end);
         else
-            return GardSelection.near(wg.state, pos.pos, pos.side || -1);
+            return GardSelection.near(wg.state, pos.pos, pos.side);
     }
 }
 const Y_STEP = 2;
@@ -3361,6 +3447,7 @@ class DOMObserver {
     clear() {
         this.takeRecords();
         this.readSelectionRange();
+        this.selectionChanged = false;
     }
     takeRecords() {
         for (let mut of this.observer.takeRecords())
@@ -3390,7 +3477,14 @@ class DOMObserver {
                 return null;
             }
             else if (tile.dom == record.target) {
-                return [tile.posBefore, tile.posAfter];
+                if (!tile.isNodeInner)
+                    return [tile.posBefore, tile.posAfter];
+                while (tile.parent && tile.isNodeInner)
+                    tile = tile.parent;
+                if (tile.isDoc)
+                    return null;
+                let nodePos = tile.posBefore;
+                return [nodePos, nodePos + 1];
             }
             else {
                 return childRange(tile, record);
@@ -3444,6 +3538,7 @@ class KeyBinding {
         this.extension = KeyBinding.source.of(this);
     }
     static of(spec) { return new KeyBinding(spec); }
+    toString() { return `KeyBinding:${this.spec.key || this.spec.char || "??"}`; }
 }
 ;KeyBinding = /*@__PURE__*/(function (KeyBinding) {
     function handle(wg, event) {
@@ -3456,9 +3551,11 @@ class KeyBinding {
         return s.facet(KeyBinding.useDefaultKeymap) ? bindings.concat(KeyBinding.defaultKeymap) : bindings;
     });
     KeyBinding.source = GardState.Facet.define({
+        name: "keyBinding",
         enables: KeyBinding.keymap
     });
     KeyBinding.useDefaultKeymap = GardState.Facet.define({
+        name: "useDefaultKeymap",
         combine: input => input.length ? input[0] : true
     });
     class Group {
@@ -3615,7 +3712,7 @@ class NormalizedBinding {
 }
 const keymapCache = /*@__PURE__*/(() => new WeakMap())();
 function getKeymap(state) {
-    let bindings = state.field(KeyBinding.keymap);
+    let bindings = state.field(KeyBinding.keymap, false);
     let found = keymapCache.get(bindings);
     if (!found)
         keymapCache.set(bindings, found = buildKeymap(bindings, currentPlatform));
@@ -3704,6 +3801,7 @@ function buildCharKeyCodes() {
 const charKeyCodes = /*@__PURE__*/buildCharKeyCodes();
 
 const eventHandler = /*@__PURE__*/GardState.Facet.define({
+    name: "eventHandler",
     combine: handlers => {
         let result = Object.create(null);
         for (let { event, handler } of handlers)
@@ -3712,6 +3810,7 @@ const eventHandler = /*@__PURE__*/GardState.Facet.define({
     }
 });
 const eventObserver = /*@__PURE__*/GardState.Facet.define({
+    name: "eventObserver",
     combine: observers => {
         let result = Object.create(null);
         for (let { event, observer } of observers)
@@ -3899,22 +3998,18 @@ class InputState {
             Command.dispatch(wg, insertText, { from, to, insert, userEvent: "input.type" });
         }
         else if (type == "insertFromPaste") {
-            let { from, to } = this.unflushedSelection ? wg.state.selection.replacementRange : range;
-            let slice = readClipboard(wg.state, event.dataTransfer, wg.state.doc.resolve(from), wg.inputState.shiftKey);
-            let isSel = from == wg.state.selection.replacementRange.from && to == wg.state.selection.replacementRange.to;
-            if (isSel && wg.state.facet(pasteHandler).some(h => h(wg, event, slice || Slice.empty)))
-                return;
-            if (slice) {
-                wg.dispatch({
-                    changes: { from, to, insert: slice, fit: true },
-                    selection: isSel ? (cx, changes) => GardSelection.near(cx, changes.mapPos(to, 1), -1) : undefined,
-                    userEvent: "input.paste",
-                    scrollIntoView: isSel
-                });
+            let isSel = this.unflushedSelection;
+            if (!isSel) {
+                let r = data.domRange.range, domSel = getSelectionRange(wg.root);
+                isSel = !!domSel && isEquivalentPosition(r.startContainer, r.startOffset, domSel.startContainer, domSel.startOffset) &&
+                    isEquivalentPosition(r.endContainer, r.endOffset, domSel.endContainer, domSel.endOffset);
             }
+            let transfer = event.dataTransfer;
+            doPaste(wg, getHTML(transfer), getText(transfer), isSel ? null : range, event);
         }
         else if ((type == "insertReplacementText" || type == "insertFromYank")) {
-            let read = readClipboard(wg.state, event.dataTransfer, wg.state.sel.head, true);
+            let transfer = event.dataTransfer;
+            let read = readClipboard(wg.state, getHTML(transfer), getText(transfer), wg.state.sel.head, true);
             let { from, to } = this.unflushedSelection ? wg.state.selection : range;
             let sel = wg.state.selection, touchesSel = from <= sel.to && to >= sel.from;
             if (read)
@@ -4054,6 +4149,12 @@ class InputState {
             this.mouseSelection.disconnect();
     }
 }
+function getHTML(data) {
+    return data.getData("text/html");
+}
+function getText(data) {
+    return data.getData("text/plain") || data.getData("Text") || data.getData("text/uri-list").replace(/\r?\n/g, " ");
+}
 function isSingleChar(doc, from, to) {
     if (to > from + 10)
         return false;
@@ -4092,8 +4193,22 @@ function computeHandlers(state) {
         record(type).observers.push(baseObservers[type]);
     return result;
 }
+function doPaste(wg, html, text, targetRange, event) {
+    let { from, to } = targetRange || wg.state.selection.replacementRange;
+    let slice = readClipboard(wg.state, html, text, wg.state.doc.resolve(from), wg.inputState.shiftKey);
+    if (!targetRange && wg.state.facet(pasteHandler).some(h => h(wg, event, slice || Slice.empty, text, html)))
+        return;
+    if (slice) {
+        wg.dispatch({
+            changes: { correct: { from, to, insert: slice, fit: true }, local: true },
+            selection: targetRange ? undefined : (cx, changes) => GardSelection.near(cx, changes.mapPos(to, 1), -1),
+            userEvent: "input.paste",
+            scrollIntoView: !targetRange
+        });
+    }
+}
 const dragScrollMargin = 6;
-const mouseSelectionStyle = /*@__PURE__*/GardState.Facet.define();
+const mouseSelectionStyle = /*@__PURE__*/GardState.Facet.define({ name: "mouseSelectionStyle" });
 function dragScrollSpeed(dist) {
     return Math.max(0, dist) * 0.7 + 8;
 }
@@ -4207,7 +4322,7 @@ class MouseSelection {
             setTimeout(() => this.select(this.lastEvent), 20);
     }
 }
-const dragBehavior = /*@__PURE__*/GardState.Facet.define();
+const dragBehavior = /*@__PURE__*/GardState.Facet.define({ name: "dragBehavior" });
 function dragMovesSelection(wg, event) {
     let facet = wg.state.facet(dragBehavior);
     return facet.length ? facet[0](event) : browser.mac ? !event.altKey : !event.ctrlKey;
@@ -4283,8 +4398,8 @@ function basicMouseSelection(wg, event) {
         }
     };
 }
-const dropHandler = /*@__PURE__*/GardState.Facet.define();
-const pasteHandler = /*@__PURE__*/GardState.Facet.define();
+const dropHandler = /*@__PURE__*/GardState.Facet.define({ name: "dropHandler" });
+const pasteHandler = /*@__PURE__*/GardState.Facet.define({ name: "pasteHandler" });
 function copy(wg, event) {
     let { state } = wg;
     if (!state.selection.empty && event.clipboardData) {
@@ -4300,7 +4415,7 @@ function copy(wg, event) {
     }
     return true;
 }
-const isFocusChange = /*@__PURE__*/Transaction.Annotation.define();
+const isFocusChange = /*@__PURE__*/Transaction.Annotation.define("focusChange");
 function updateForFocusChange(wg) {
     setTimeout(() => {
         let focus = wg.hasFocus;
@@ -4434,18 +4549,19 @@ const baseHandlers = {
     copy,
     cut: copy,
     drop(wg, event) {
-        if (!event.dataTransfer || wg.state.readOnly)
+        let data = event.dataTransfer;
+        if (!data || wg.state.readOnly)
             return true;
-        let slice = readClipboard(wg.state, event.dataTransfer, wg.state.sel.head, false);
+        let slice = readClipboard(wg.state, getHTML(data), getText(data), wg.state.sel.head, false);
         if (!slice)
             return false;
         let dropPos = wg.posAtCoords({ x: event.clientX, y: event.clientY }).pos;
         let { draggedContent } = wg.inputState;
         let del = draggedContent && dragMovesSelection(wg, event)
-            ? { from: draggedContent.from, to: draggedContent.to } : null;
-        if (wg.state.facet(dropHandler).some(f => f(wg, event, dropPos, del, slice)))
+            ? { correct: { from: draggedContent.from, to: draggedContent.to }, local: true } : null;
+        if (wg.state.facet(dropHandler).some(f => f(wg, event, dropPos, del ? del.correct : null, slice)))
             return true;
-        let ins = { from: dropPos, insert: slice, fit: true };
+        let ins = { correct: { from: dropPos, insert: slice, fit: true }, local: true };
         let changes = ChangeSet.create(wg.state.doc, del ? [del, ins] : ins);
         wg.focus();
         wg.dispatch({
@@ -4471,7 +4587,7 @@ const baseHandlers = {
         if (ranges.length) {
             let r = ranges[0], empty = r.collapsed;
             let from = wg.inputState.getDOMPos(r.startContainer, r.startOffset);
-            data.domRange = { from, to: empty ? from : wg.inputState.getDOMPos(r.endContainer, r.endOffset) };
+            data.domRange = { from, to: empty ? from : wg.inputState.getDOMPos(r.endContainer, r.endOffset), range: r };
             editable = inEditableDOM(wg, r.startContainer) && (empty || inEditableDOM(wg, r.endContainer));
         }
         wg.inputState.beforeInput(event, wg.inputState.pendingInputEvent = data);
@@ -4488,7 +4604,8 @@ const baseHandlers = {
         wg.inputState.pendingInputEvent = null;
         let change;
         if (compositionInputTypes.has(event.inputType) || event.inputType == "insertText") {
-            change = { from: pending.domRange.from, to: pending.domRange.to, insert: [Leaf.text(pending.data || "")] };
+            let text = pending.data || "";
+            change = { from: pending.domRange.from, to: pending.domRange.to, insert: text ? [Leaf.text(text)] : undefined };
         }
         else if (isDeletionInputEvent(event.inputType)) {
             change = { from: pending.domRange.from, to: pending.domRange.to };
@@ -4527,7 +4644,10 @@ const baseObservers = {
     }
 };
 
-const scrollIntoView = /*@__PURE__*/Transaction.Effect.define({ map: (t, ch) => t.map(ch) });
+const scrollIntoView = /*@__PURE__*/Transaction.Effect.define({
+    name: "scrollIntoView",
+    map: (t, ch) => t.map(ch)
+});
 const selectionScrollSpec = {
     x: "nearest",
     y: "nearest",
@@ -4629,6 +4749,7 @@ class ViewState {
 }
 
 const cursorBlinkRate = /*@__PURE__*/GardState.Facet.define({
+    name: "cursorBlinkRate",
     combine: inputs => inputs.length ? Math.min(...inputs) : 1200
 });
 class CursorStyle {
@@ -4815,7 +4936,7 @@ function setBlinkRate(state, dom) {
     dom.style.animationDuration = state.facet(cursorBlinkRate) + "ms";
 }
 
-const dirCompartment = /*@__PURE__*/GardState.Compartment.define();
+const dirCompartment = /*@__PURE__*/GardState.Compartment.define("direction");
 class Wordgard {
     static create(spec) { return new Wordgard(spec); }
     get state() { return this.viewState.state; }
@@ -5053,12 +5174,12 @@ class Wordgard {
         }
         for (let i = 0; i < this.plugins.length; i++)
             this.plugins[i].update(this);
-        if (configChange)
+        if (update.state.facet(eventHandler) != update.startState.facet(eventHandler))
             this.inputState.ensureHandlers(update.state);
     }
     updateAttrs() {
         let editorAttrs = attrsFromFacet(this, Wordgard.editorAttributes, [
-            "class", this.themeClasses
+            "class", this.themeClasses + (this.inputState.notifiedFocused ? " wg-focused" : "")
         ]);
         let contentAttrs = attrsFromFacet(this, Wordgard.contentAttributes, [
             "aria-multiline", "true",
@@ -5202,7 +5323,7 @@ class Wordgard {
         }));
     }
     static label(label) {
-        return Wordgard.editorAttributes.of(typeof label == "string" ? { "aria-label": label }
+        return Wordgard.contentAttributes.of(typeof label == "string" ? { "aria-label": label }
             : (wg => ({ "aria-label": label(wg.state) })));
     }
     static clipboardOutputFilter = clipboardOutputFilter;
@@ -5214,18 +5335,21 @@ class Wordgard {
     static clipboardTextParser = clipboardTextParser;
     static clipboardInputTextFilter = clipboardInputTextFilter;
     static pasteHandler = pasteHandler;
+    paste(html, text) { doPaste(this, html, text || "", null, null); }
     static dropHandler = dropHandler;
     static isFocusChange = isFocusChange;
-    static styleModule = /*@__PURE__*/GardState.Facet.define();
+    static styleModule = /*@__PURE__*/GardState.Facet.define({ name: "styleModule" });
     static domEventHandler(event, handler) {
         return eventHandler.of({ event, handler: handler });
     }
     static domEventObserver(event, observer) {
         return eventObserver.of({ event, observer: observer });
     }
-    static scrollHandler = /*@__PURE__*/GardState.Facet.define();
+    static scrollHandler = /*@__PURE__*/GardState.Facet.define({ name: "scrollHandler" });
     static exceptionSink = exceptionSink;
-    static transactionListener = /*@__PURE__*/GardState.Facet.define();
+    static transactionListener = /*@__PURE__*/GardState.Facet.define({
+        name: "transactionListener"
+    });
     runTransactionListeners(trs) {
         for (let l of this.state.facet(Wordgard.transactionListener)) {
             let has = this.pendingTransactionListeners.get(l);
@@ -5240,8 +5364,11 @@ class Wordgard {
             next.value(trs, this);
         }
     }
-    static updateListener = /*@__PURE__*/GardState.Facet.define();
-    static editable = /*@__PURE__*/GardState.Facet.define({ combine: values => values.length ? values[0] : true });
+    static updateListener = /*@__PURE__*/GardState.Facet.define({ name: "updateListener" });
+    static editable = /*@__PURE__*/GardState.Facet.define({
+        name: "editable",
+        combine: values => values.length ? values[0] : true
+    });
     static cursorBlinkRate = cursorBlinkRate;
     static mouseSelectionStyle = mouseSelectionStyle;
     static dragMovesSelection = dragBehavior;
@@ -5289,12 +5416,19 @@ class Wordgard {
             }
         });
     }
-    static cspNonce = /*@__PURE__*/GardState.Facet.define({ combine: values => values.length ? values[0] : "" });
-    static contentAttributes = /*@__PURE__*/GardState.Facet.define();
-    static editorAttributes = /*@__PURE__*/GardState.Facet.define();
-    static announce = /*@__PURE__*/Transaction.Effect.define();
+    static cspNonce = /*@__PURE__*/GardState.Facet.define({
+        name: "cspNonce",
+        combine: values => values.length ? values[0] : ""
+    });
+    static contentAttributes = /*@__PURE__*/GardState.Facet.define({ name: "contentAttributes" });
+    static editorAttributes = /*@__PURE__*/GardState.Facet.define({ name: "editorAttributes" });
+    static announce = /*@__PURE__*/Transaction.Effect.define({ name: "announce" });
     static DocTile = DocTile;
-    static coveredMargins = /*@__PURE__*/GardState.Facet.define();
+    static coveredMargins = /*@__PURE__*/GardState.Facet.define({ name: "coveredMargins" });
+    static findFromDOM(elt) {
+        let wg = elt.wg;
+        return wg instanceof Wordgard ? wg : null;
+    }
 }
 let _wrapElement = null;
 function wrapElementConstructor() {
@@ -5416,7 +5550,7 @@ function attrsFromFacet(wg, facet, base) {
     }
     Wordgard.Update = Update;
 ;return Wordgard})(Wordgard);
-const editorPlugin = /*@__PURE__*/GardState.Facet.define();
+const editorPlugin = /*@__PURE__*/GardState.Facet.define({ name: "editorPlugin" });
 const cursorPlugin = /*@__PURE__*/Wordgard.Plugin.fromClass(CursorLayer);
 class PluginInstance {
     spec;
@@ -5579,6 +5713,7 @@ class TooltipViewManager {
     }
 }
 const tooltipConfig = /*@__PURE__*/GardState.Facet.define({
+    name: "tooltipConfig",
     combine: values => ({
         position: browser.ios ? "absolute" : values.find(conf => conf.position)?.position || "fixed",
         parent: values.find(conf => conf.parent)?.parent || null,
@@ -5890,13 +6025,14 @@ const styles = /*@__PURE__*/Wordgard.styles({
         },
     },
 });
-const closeHoverTooltipEffect = /*@__PURE__*/Transaction.Effect.define();
+const closeHoverTooltipEffect = /*@__PURE__*/Transaction.Effect.define({ name: "closeHover" });
 const Tooltip = /*@__PURE__*/(function (Tooltip) {
     function configure(config = {}) {
         return tooltipConfig.of(config);
     }
     Tooltip.configure = configure;
     Tooltip.show = GardState.Facet.define({
+        name: "tooltip",
         enables: [tooltipPlugin, styles]
     });
     function get(wg, tooltip) {
@@ -5968,6 +6104,7 @@ const Tooltip = /*@__PURE__*/(function (Tooltip) {
 ;return Tooltip})({});
 const noOffset = { x: 0, y: 0 };
 const showHoverTooltip = /*@__PURE__*/GardState.Facet.define({
+    name: "showHoverTooltip",
     combine: inputs => inputs.reduce((a, i) => a.concat(i), [])
 });
 class HoverTooltipHost {
@@ -6320,9 +6457,10 @@ class OpenDialog {
         this.offset = offset;
     }
 }
-const openDialog = /*@__PURE__*/Transaction.Effect.define();
-const closeDialog = /*@__PURE__*/Transaction.Effect.define();
+const openDialog = /*@__PURE__*/Transaction.Effect.define({ name: "openDialog" });
+const closeDialog = /*@__PURE__*/Transaction.Effect.define({ name: "closeDialog" });
 const dialogs = /*@__PURE__*/GardState.Field.define({
+    name: "dialogs",
     create: () => [],
     update: (value, tr) => {
         for (let e of tr.effects) {
@@ -6613,6 +6751,7 @@ function decoratePlots(config) {
 }
 
 const panelConfig = /*@__PURE__*/GardState.Facet.define({
+    name: "panelConfig",
     combine(configs) {
         let topContainer, bottomContainer;
         for (let c of configs) {
@@ -6704,6 +6843,7 @@ const panelPlugin = /*@__PURE__*/Wordgard.Plugin.fromClass(class {
 }));
 const Panel = /*@__PURE__*/(function (Panel) {
     Panel.show = GardState.Facet.define({
+        name: "panel",
         enables: panelPlugin
     });
     function get(wg, constructor) {
@@ -7278,6 +7418,7 @@ const theme = /*@__PURE__*/Wordgard.styles({
         fill: "currentColor",
         width: "var(--wg-menu-item-size)",
         height: "var(--wg-menu-item-size)",
+        display: "inline-block"
     },
     "wg-menu-spacer": {
         display: "block",
@@ -7318,6 +7459,7 @@ const theme = /*@__PURE__*/Wordgard.styles({
     },
 });
 const barTemplate = /*@__PURE__*/GardState.Facet.define({
+    name: "menuBarTemplate",
     combine: inputs => inputs.length ? inputs[0] : [Menu.Group.top.template()]
 });
 function menuBar(config = {}) {
@@ -7327,7 +7469,7 @@ function menuBar(config = {}) {
     return extensions;
 }
 
-const inputRule = /*@__PURE__*/GardState.Facet.define();
+const inputRule = /*@__PURE__*/GardState.Facet.define({ name: "inputRule" });
 const appender = /*@__PURE__*/Transaction.appender.of(applyInputRules);
 class InputRule {
     expr;
@@ -7383,13 +7525,14 @@ class InputRule {
             lookahead: empty ? /^$/ : undefined
         });
     }
+    toString() { return `InputRule(${this.expr})`; }
 }
 ;InputRule = /*@__PURE__*/(function (InputRule) {
     InputRule.emDash = InputRule.define({ expr: /--$/, apply: "—" });
     InputRule.ellipsis = InputRule.define({ expr: /\.\.\.$/, apply: "…" });
-    InputRule.openDoubleQuote = InputRule.define({ expr: /(?:^|[\s\{\[\(\<'"\u2018\u201C])(")$/, apply: "“" });
+    InputRule.openDoubleQuote = InputRule.define({ expr: /(?<=^|[\s\{\[\(\<'"\u2018\u201C])"$/, apply: "“" });
     InputRule.closeDoubleQuote = InputRule.define({ expr: /"$/, apply: "”" });
-    InputRule.openSingleQuote = InputRule.define({ expr: /(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, apply: "‘" });
+    InputRule.openSingleQuote = InputRule.define({ expr: /(?<=^|[\s\{\[\(\<'"\u2018\u201C])'$/, apply: "‘" });
     InputRule.closeSingleQuote = InputRule.define({ expr: /'$/, apply: "’" });
     InputRule.smartQuotes = [InputRule.openDoubleQuote, InputRule.closeDoubleQuote, InputRule.openSingleQuote, InputRule.closeSingleQuote];
 ;return InputRule})(InputRule);
@@ -7401,7 +7544,7 @@ function ensureAnchor(regexp) {
 }
 function applyString(text) {
     return (state, match) => ({
-        changes: { from: match[0].from.pos, to: match[0].to.pos, insert: [Leaf.text(text)] },
+        changes: { from: match[0].from.pos, to: match[0].to.pos, insert: text ? [Leaf.text(text)] : undefined },
         annotations: history.isolate.of(true)
     });
 }
@@ -7473,7 +7616,7 @@ const placeholderWidget = /*@__PURE__*/Widget.define({
         return elt;
     }
 });
-const placeholderShape = /*@__PURE__*/GardState.Facet.define();
+const placeholderShape = /*@__PURE__*/GardState.Facet.define({ name: "placeholderShape" });
 function showPlaceholder(state) {
     let pos = -1;
     if (state.doc.length == 0)
@@ -7488,6 +7631,7 @@ function showPlaceholder(state) {
     return Decoration.Point.set([[Decoration.Point.widget(placeholderWidget.of(shape[0]), { side: 1 }), pos]]);
 }
 const placeholderField = /*@__PURE__*/GardState.Field.define({
+    name: "placeholder",
     create(state) {
         return showPlaceholder(state);
     },
@@ -7504,9 +7648,11 @@ function placeholder(content) {
 }
 
 const setDropCursorPos = /*@__PURE__*/Transaction.Effect.define({
+    name: "setDropCursorPos",
     map(pos, mapping) { return pos == null ? null : { pos: mapping.mapPos(pos.pos), side: pos.side }; }
 });
 const dropCursorPos = /*@__PURE__*/GardState.Field.define({
+    name: "dropCursorPos",
     create() { return null; },
     update(pos, tr) {
         if (pos != null)