@nerd-bible/wordgard 0.5.2-beta2 → 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();
@@ -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;
@@ -4620,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)
@@ -4642,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,
@@ -4781,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/package.json

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