@nerd-bible/wordgard 0.5.2-beta → 0.5.2-beta3

package/dist/command.js

@@ -676,7 +676,7 @@ function joinBlocks(before, after) {
             if (atEnd)
                 end++;
             else
-                tokensAfter.push(level.parent.node.tag);
+                tokensAfter.unshift(level.parent.node.tag);
         }
     }
     if (tokensAfter.length || end > posAfter)

package/dist/editor.d.ts

@@ -524,10 +524,11 @@ declare abstract class Tile {
     ignoreEvent(event: Event): boolean;
     get ignoreMutations(): boolean;
     toString(): string;
-    sync(): void;
+    abstract sync(): void;
     connect(): void;
     disconnect(reused?: Map<Tile, Reused>): void;
     nearestNode(): Tile;
+    markDirty(): void;
     posAtCoords(state: GardState, x: number, y: number): CoordPos;
     abstract posAtCoordsInner(start: number, state: GardState, x: number, y: number, textblock: TextblockMap | null, orientation: Orientation): CoordPos;
     static get(node: DOMNode): Tile | undefined;

package/dist/editor.js

@@ -218,10 +218,10 @@ class Widget {
         of(value) { return Widget.new(this, value); }
     }
     Widget.Type = Type;
-    Widget.Text = Widget.define({
+    Widget.text = Widget.define({
         render: s => document.createTextNode(s)
     });
-    Widget.EditableText = Widget.define({
+    Widget.editableText = Widget.define({
         render: s => document.createTextNode(s)
     });
     Widget.img = Widget.create({
@@ -394,7 +394,7 @@ function applyDeco(shape, deco, tag) {
     return shape;
 }
 const baseTagShape = /*@__PURE__*/memo((tag) => {
-    return addMarkAttributes(tag.is(Leaf.Text) ? Widget.EditableText.of(tag.param)
+    return addMarkAttributes(tag.is(Leaf.Text) ? Widget.editableText.of(tag.param)
         : tag.type.shape.create(tag.param), tag);
 });
 function renderMarks(marks, around) {
@@ -1801,7 +1801,6 @@ class Tile {
     ignoreEvent(event) { return false; }
     get ignoreMutations() { return false; }
     toString() { return this.dom.nodeName + (this.children.length ? `(${this.children})` : ""); }
-    sync() { }
     connect() {
         for (let ch of this.children)
             ch.connect();
@@ -1817,12 +1816,25 @@ class Tile {
             tile = tile.parent;
         return tile;
     }
+    markDirty() {
+        if (!(this.flags & 8192)) {
+            this.flags |= 8192;
+            this.parent?.markDirty();
+        }
+    }
     posAtCoords(state, x, y) {
         let nodeTile = this.nearestNode();
         return nodeTile.posAtCoordsInner(nodeTile.posAtStart, state, x, y, null, 1);
     }
     static get(node) { return node.wgTile; }
 }
+function checkSync(tile) {
+    if ((tile.flags & 256) && !(tile.flags & 8192))
+        return false;
+    tile.flags |= 256;
+    tile.flags &= -8193;
+    return true;
+}
 class CompositeTile extends Tile {
     children = [];
     addChild(child) {
@@ -1840,9 +1852,8 @@ class CompositeTile extends Tile {
         child.parent = this;
     }
     sync() {
-        if (this.flags & 256)
+        if (!checkSync(this))
             return;
-        this.flags |= 256;
         let len = this.boundary * 2;
         for (let ch of this.children) {
             ch.sync();
@@ -2020,10 +2031,10 @@ class DocTile extends CompositeTile {
             let len = changes[i++], ins = changes[i++];
             if (composition && posB == composition.fromB && ins >= 0) {
                 if (!startCovered)
-                    builder.update(0, false);
+                    builder.update(0, true);
                 builder.composition(composition, len);
                 if (ins && (startCovered = i == changes.length || changes[i + 1] == -1))
-                    builder.update(0, false);
+                    builder.update(0, true);
             }
             else if (ins == -1) {
                 builder.keep(len, !startCovered, i == changes.length);
@@ -2270,6 +2281,15 @@ class EltTile extends CompositeTile {
         return new EltTile(elt, node, flags, length, dom || elt.outerDOM());
     }
 }
+function setUneditable(dom) {
+    if (dom.nodeType != 1) {
+        let span = document.createElement("span");
+        span.appendChild(dom);
+        dom = span;
+    }
+    if (dom.contentEditable == "inherit" && !/^(br|hr|img|input|wbr)$/i.test(dom.nodeName))
+        dom.contentEditable = "false";
+}
 class WidgetTile extends Tile {
     widget;
     _node;
@@ -2278,14 +2298,14 @@ class WidgetTile extends Tile {
         this.widget = widget;
         this._node = _node;
         this.length = length;
-        if (dom.nodeType == 1 && !widget.type.editable && dom.contentEditable == "inherit")
-            dom.contentEditable = "false";
     }
     get isNodeOuter() { return !!this._node; }
     get isAtom() { return true; }
     get node() { return this._node; }
     get children() { return noChildren; }
     ignoreEvent(event) { return !this.widget.type.propagateEvent(event); }
+    get ignoreMutations() { return !this.widget.type.editable; }
+    sync() { checkSync(this); }
     connect() {
         this.widget.type.connect?.(this.widget.value, this.dom);
     }
@@ -2294,7 +2314,7 @@ class WidgetTile extends Tile {
             this.widget.type.disconnect?.(this.widget.value, this.dom);
     }
     toString() {
-        return this.widget.type == Widget.EditableText || this.widget.type == Widget.Text
+        return this.widget.type == Widget.editableText || this.widget.type == Widget.text
             ? JSON.stringify(this.widget.value) : super.toString();
     }
     posAtCoordsInner(start, state, x, y, textblock, orientation) {
@@ -2319,9 +2339,8 @@ class TextTile extends Tile {
     get isNodeOuter() { return true; }
     get isAtom() { return true; }
     sync() {
-        if (this.flags & 256)
+        if (!checkSync(this))
             return;
-        this.flags |= 256;
         if (this.dom.nodeValue != this.text)
             this.dom.nodeValue = this.text;
     }
@@ -2754,7 +2773,10 @@ class ContentUpdate {
                         : endOld && this.posB == end ? endOld.matchingWidget(widget, sideFlag, this.reused)
                             : null;
                 if (!tile) {
-                    tile = new WidgetTile(widget, null, 16 | sideFlag, widget.render(this.wg));
+                    let dom = widget.render(this.wg);
+                    if (!widget.type.editable)
+                        setUneditable(dom);
+                    tile = new WidgetTile(widget, null, 16 | sideFlag, dom);
                     if (widget.type.connect)
                         this.toConnect.push(tile);
                 }
@@ -2789,11 +2811,13 @@ class ContentUpdate {
         }
         return null;
     }
-    buildNodeShape(node, shape, reuse, afterContent = 0) {
+    buildNodeShape(node, shape, reuse, inEditable = true, afterContent = 0) {
         if (shape instanceof Elt) {
-            if (node && !shape.hasContent && Attributes.get(shape.attrs, "contenteditable") == null &&
-                !/^(br|hr|img|input|wbr)$/i.test(shape.tagName))
-                shape = Elt.create(shape.tagName, Attributes.merge(shape.attrs, ["contenteditable", "false"]), shape.children);
+            if (inEditable && !shape.hasContent) {
+                if (Attributes.get(shape.attrs, "contenteditable") == null && !/^(br|hr|img|input|wbr)$/i.test(shape.tagName))
+                    shape = Elt.create(shape.tagName, Attributes.merge(shape.attrs, ["contenteditable", "false"]), shape.children);
+                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);
@@ -2813,7 +2837,7 @@ class ContentUpdate {
                     tile.flags |= 2;
                 }
                 else {
-                    tile.addChild(this.buildNodeShape(null, typeof ch == "string" ? Widget.Text.of(ch) : ch, reusable ? reusable.children : reuse, afterContentInner));
+                    tile.addChild(this.buildNodeShape(null, typeof ch == "string" ? Widget.text.of(ch) : ch, reusable ? reusable.children : reuse, inEditable, afterContentInner));
                 }
             }
             return tile;
@@ -2824,8 +2848,13 @@ class ContentUpdate {
                 this.reused.set(reusable, 2);
                 dom = reusable.dom;
             }
+            else {
+                dom = shape.render(this.wg);
+            }
+            if (inEditable && !shape.type.editable)
+                setUneditable(dom);
             let flags = (node ? 512 : 16 | 1) | afterContent;
-            let tile = new WidgetTile(shape, node, flags, dom || shape.render(this.wg), node ? node.length : 0);
+            let tile = new WidgetTile(shape, node, flags, dom, node ? node.length : 0);
             if (shape.type.connect)
                 this.toConnect.push(tile);
             return tile;
@@ -3783,7 +3812,7 @@ class DOMObserver {
         let tile = this.wg.docTile.nearest(record.target);
         if (!tile || tile.ignoreMutations)
             return null;
-        tile.flags |= 8192;
+        tile.markDirty();
         if (record.type == "attributes" || record.type == "characterData") {
             if (tile == this.wg.docTile) {
                 return null;
@@ -4190,11 +4219,13 @@ class InputState {
         this.domChanges = null;
     }
     getDOMPos(node, offset) {
+        if (!this.domChanges)
+            return this.wg.docTile.posFromDOM(node, offset);
         if (node.nodeType == 1 && offset && node.childNodes[offset - 1].nodeType == 3) {
             node = node.childNodes[offset - 1];
             offset = node.nodeValue.length;
         }
-        let inText = node.nodeType == 3;
+        let inText = node.nodeType == 3 && !this.wg.docTile.nearest(node)?.isPoint;
         let ref = this.wg.docTile.posFromDOM(node, inText ? 0 : offset);
         let dir = -1;
         let textBefore = node.parentNode && textNodeBefore(node.parentNode, domIndex(node));
@@ -4310,9 +4341,11 @@ class InputState {
         }
         else {
             let tileBefore = Tile.get(before), tileAfter = Tile.get(after);
-            return !tileBefore || tileBefore.text != before.nodeValue ? before
-                : !tileAfter || tileAfter.text != after.nodeValue ? after
-                    : prev == after ? after : before;
+            if (tileBefore instanceof TextTile && tileBefore.text != before.nodeValue)
+                return before;
+            if (tileAfter instanceof TextTile && tileAfter.text != after.nodeValue)
+                return after;
+            return !tileBefore ? before : !tileAfter ? after : prev == after ? after : before;
         }
     }
     recordTouch(e) {
@@ -4616,9 +4649,9 @@ function compositionUpdate(wg, event) {
         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))
+                !eqArray(rSel.head.nodeBefore?.tag.marks, rSel.activeMarks) ||
+                sel.empty && inlineBoundNear(wg.state.sel.head) ||
+                !inEditableDOM(wg, wg.observer.selectionRange.focusNode))
                 wrap = rSel.activeMarks;
         }
         if (wrap)
@@ -4638,6 +4671,12 @@ function inlineBoundNear(pos) {
     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 inEditableDOM(wg, node) {
+    if (!node)
+        return false;
+    let tile = wg.docTile.nearest(node);
+    return tile ? !(tile.isPoint || tile instanceof WidgetTile) : false;
+}
 function isDeletionInputEvent(type) { return /^delete(Content|Word)/.test(type); }
 const inputTypeCommands = /*@__PURE__*/(() => ({
     historyUndo: undo,
@@ -4777,16 +4816,17 @@ const baseHandlers = {
             data: event.data,
             domRange: null,
         };
-        let ranges = event.getTargetRanges();
+        let ranges = event.getTargetRanges(), editable = true;
         if (ranges.length) {
-            let r = ranges[0];
-            data.domRange = { from: wg.inputState.getDOMPos(r.startContainer, r.startOffset),
-                to: wg.inputState.getDOMPos(r.endContainer, r.endOffset) };
+            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) };
+            editable = inEditableDOM(wg, r.startContainer) && (empty || inEditableDOM(wg, r.endContainer));
         }
         wg.inputState.beforeInput(event, wg.inputState.pendingInputEvent = data);
         wg.scheduleFlush();
         let allow = type == "insertCompositionText" ||
-            (type == "insertText" || isDeletionInputEvent(type) &&
+            editable && (type == "insertText" || isDeletionInputEvent(type) &&
                 data.domRange && inlineContext(wg.inputState.domDoc, data.domRange));
         return !allow;
     },

package/dist/history.js

@@ -3,7 +3,15 @@ import { ChangeSet } from 'wordgard/doc';
 import { Command, undo as undo$1, redo as redo$1, Menu } from 'wordgard/command';
 import { phrases } from 'wordgard/phrases';
 
-const fromHistory = /*@__PURE__*/Transaction.Annotation.define();
+const fromHistory = /*@__PURE__*/Transaction.Effect.define({
+    map(value, change) {
+        return {
+            side: value.side,
+            startDoc: change.apply(value.startDoc),
+            rest: !value.rest ? null : value.rest.addMapping(change, value.startDoc)
+        };
+    }
+});
 const historyConfig = /*@__PURE__*/GardState.Facet.define({
     combine(configs) {
         return GardState.Facet.combineConfig(configs, {
@@ -23,13 +31,13 @@ const historyField_ = /*@__PURE__*/GardState.Field.define({
     },
     update(state, tr) {
         let config = tr.state.facet(historyConfig);
-        let fromHist = tr.annotation(fromHistory);
+        let fromHist = tr.effects.find(e => e.is(fromHistory));
         if (fromHist) {
-            let from = fromHist.side, event = eventFromTransaction(tr);
-            let other = from == 0 ? state.undone : state.done;
+            let { side, rest } = fromHist.value, event = eventFromTransaction(tr);
+            let other = side == 0 ? state.undone : state.done;
             if (event)
                 other = new Branch(event.changes, event.effects, null, tr.startState.selection, other);
-            return new HistoryState(from == 0 ? fromHist.rest : other, from == 0 ? other : fromHist.rest);
+            return new HistoryState(side == 0 ? rest : other, side == 0 ? other : rest);
         }
         let isolate = tr.annotation(history.isolate);
         if (isolate == true || isolate == "before")
@@ -239,8 +247,7 @@ class HistoryState {
         return {
             changes: branch.changes,
             selection: branch.startSelection,
-            effects: branch.effects,
-            annotations: fromHistory.of({ side, rest: branch.next }),
+            effects: branch.effects.concat(fromHistory.of({ side, startDoc: branch.changes.apply(state.doc), rest: branch.next })),
             userEvent: side == 0 ? "undo" : "redo",
             scrollIntoView: true
         };

package/dist/state.js

@@ -854,14 +854,14 @@ function findNormalAt(cx, pos, bias) {
                 parent = parent.parent;
             }
             else {
-                let next = parent.node.content[index + (dir > 0 ? 0 : -1)];
+                let nextIndex = index + (dir > 0 ? 0 : -1), next = parent.node.content[nextIndex];
                 if (next.isLeaf || isBarrier(cx, next))
                     break;
                 if (!parent.node.inlineContent && next.inlineContent && cx.config.visualCursorMotion) {
                     let startPos = curPos - (dir > 0 ? 0 : next.length) + 1;
                     return TextblockMap.get(cx, startPos, next).visualSide(dir > 0);
                 }
-                parent = Pos.Plot.create(parent, next, curPos, index);
+                parent = Pos.Plot.create(parent, next, curPos, nextIndex);
                 index = dir > 0 ? 0 : next.content.length;
                 curPos += dir;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nerd-bible/wordgard",
-  "version": "0.5.2-beta",
+  "version": "0.5.2-beta3",
   "description": "Semantic rich text editor system",
   "type": "module",
   "main": "dist/index.js",