@nerd-bible/wordgard 0.6.2-beta7 → 0.6.2-beta9

package/dist/editor.js

@@ -132,6 +132,7 @@ function joinRanges(ranges) {
     }
 }
 
+var Mark_ = Mark;
 class Widget {
     value;
     constructor(type, 
@@ -198,6 +199,7 @@ class Widget {
         render() {
             let img = document.createElement("img");
             img.className = "wg-buffer";
+            img.alt = "";
             return img;
         },
         editable: true
@@ -206,6 +208,7 @@ class Widget {
         render() {
             let img = document.createElement("img");
             img.className = "wg-blockBuffer";
+            img.alt = "";
             return img;
         },
         editable: true
@@ -286,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() { }
@@ -313,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); }
@@ -337,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) {
@@ -763,15 +769,17 @@ class DecoIterator {
                         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;
@@ -779,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);
@@ -791,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();
             }
@@ -899,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)
@@ -912,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;
@@ -921,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;
@@ -2082,6 +2124,9 @@ 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) {
@@ -2295,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;
@@ -2675,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);
@@ -2752,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))
@@ -2852,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();
@@ -2881,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"
@@ -3404,6 +3446,7 @@ class DOMObserver {
     clear() {
         this.takeRecords();
         this.readSelectionRange();
+        this.selectionChanged = false;
     }
     takeRecords() {
         for (let mut of this.observer.takeRecords())
@@ -3494,6 +3537,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) {
@@ -3506,9 +3550,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 {
@@ -3665,7 +3711,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));
@@ -3754,6 +3800,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)
@@ -3762,6 +3809,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)
@@ -3949,22 +3997,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: { correct: { from, to, insert: slice, fit: true }, local: 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)
@@ -4104,6 +4148,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;
@@ -4142,8 +4192,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;
 }
@@ -4257,7 +4321,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;
@@ -4333,8 +4397,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) {
@@ -4350,7 +4414,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;
@@ -4484,9 +4548,10 @@ 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;
@@ -4521,7 +4586,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);
@@ -4578,7 +4643,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",
@@ -4680,6 +4748,7 @@ class ViewState {
 }
 
 const cursorBlinkRate = /*@__PURE__*/GardState.Facet.define({
+    name: "cursorBlinkRate",
     combine: inputs => inputs.length ? Math.min(...inputs) : 1200
 });
 class CursorStyle {
@@ -4866,7 +4935,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; }
@@ -5104,12 +5173,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",
@@ -5265,18 +5334,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);
@@ -5291,8 +5363,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;
@@ -5340,12 +5415,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() {
@@ -5467,7 +5549,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;
@@ -5630,6 +5712,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,
@@ -5941,13 +6024,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) {
@@ -6019,6 +6103,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 {
@@ -6371,9 +6456,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) {
@@ -6664,6 +6750,7 @@ function decoratePlots(config) {
 }
 
 const panelConfig = /*@__PURE__*/GardState.Facet.define({
+    name: "panelConfig",
     combine(configs) {
         let topContainer, bottomContainer;
         for (let c of configs) {
@@ -6755,6 +6842,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) {
@@ -7369,6 +7457,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 = {}) {
@@ -7378,7 +7467,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;
@@ -7434,13 +7523,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);
@@ -7524,7 +7614,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)
@@ -7539,6 +7629,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);
     },
@@ -7555,9 +7646,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)