@nerd-bible/wordgard 0.5.2-beta2 → 0.5.2-beta4

package/dist/command.d.ts

@@ -539,6 +539,24 @@ points.
 */
 declare const deleteToLineEnd: Command<"forward" | "backward">;
 /**
+Command similar to forward `deleteToLineEnd` for macOS's Ctrl-k
+binding. If there's no content left on the line, this will delete
+the node (generally a line break) after the cursor of, if at end
+of textblock, join it to the next textblock.
+
+Content deleted by this command is added to a ‘kill buffer’, and
+can be reinserted with {@link yankKilled}. Multiple kill actions
+in sequence will accumulate the deleted content in the buffer.
+Doing anything else and then running this command again will reset
+the buffer to hold only the newly killed content.
+*/
+declare const killToLineEnd: Command;
+/**
+Insert the content killed by the most recent {@link killToLineEnd}
+command (or sequence thereof) at the cursor position.
+*/
+declare const yankKilled: Command;
+/**
 Delete the selection, or if that is empty, the line around the
 cursor.
 */
@@ -805,4 +823,4 @@ updated to perform those joins.
 */
 declare function autoJoinBlocks(state: GardState, tr: Transaction.Spec): Transaction.Spec;
 
-export { Command, Menu, autoJoinBlocks, canAddMarkInRange, clearNonFitting, deleteBackward, deleteEmptyPlot, deleteForward, deleteLine, deleteSelection, deleteToLineEnd, deleteUnit, deleteWord, doUnwrapBlock, enter, enterInCode, findUnwrappable, findWrappable, insertLineBreak, insertText, joinBackward, joinBlocks, joinForward, joinListItems, liftEmptyBlock, listIsActive, moveByLine, moveByPage, moveByUnit, moveByWord, moveToDocSide, moveToLineSide, moveToTextblockSide, redo, selectAll, selectedTextblocks, setAlignment, setDirection, setTextblockType, splitTextblock, toggleBlock, toggleEmphasis, toggleList, toggleMark, toggleStrong, toggleUnderline, transposeChars, undo, unwrapBlock, wrapBlock, wrapBlockRange };
+export { Command, Menu, autoJoinBlocks, canAddMarkInRange, clearNonFitting, deleteBackward, deleteEmptyPlot, deleteForward, deleteLine, deleteSelection, deleteToLineEnd, deleteUnit, deleteWord, doUnwrapBlock, enter, enterInCode, findUnwrappable, findWrappable, insertLineBreak, insertText, joinBackward, joinBlocks, joinForward, joinListItems, killToLineEnd, liftEmptyBlock, listIsActive, moveByLine, moveByPage, moveByUnit, moveByWord, moveToDocSide, moveToLineSide, moveToTextblockSide, redo, selectAll, selectedTextblocks, setAlignment, setDirection, setTextblockType, splitTextblock, toggleBlock, toggleEmphasis, toggleList, toggleMark, toggleStrong, toggleUnderline, transposeChars, undo, unwrapBlock, wrapBlock, wrapBlockRange, yankKilled };

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)
@@ -807,7 +807,7 @@ const deleteToLineEnd = (wg, dir) => {
         return false;
     let tr = deleteSelection(wg.state), { selection } = wg.state;
     if (tr)
-        return (wg.dispatch(tr), true);
+        return tr;
     if (!(selection instanceof GardSelection.Text))
         return false;
     let end = wg.moveToLineBoundary(selection, dir == "forward");
@@ -819,12 +819,76 @@ const deleteToLineEnd = (wg, dir) => {
         userEvent: "delete." + dir
     };
 };
+const addToKillBuffer = /*@__PURE__*/Transaction.Effect.define();
+const killBuffer = /*@__PURE__*/GardState.Field.define({
+    create() { return { content: [], active: false }; },
+    update(value, tr) {
+        let add = tr.effects.find(e => e.is(addToKillBuffer));
+        if (add)
+            return { content: value.active ? value.content.concat(add.value) : add.value, active: true };
+        return !value.active || tr.annotation(Transaction.remote) || !(tr.docChanged || tr.selection)
+            ? value : { content: value.content, active: false };
+    }
+});
+function killText(state, from, to) {
+    let add = addToKillBuffer.of(state.doc.slice(from, to).content);
+    return state.field(killBuffer, false) ? [add] : [GardState.appendConfig.of(killBuffer), add];
+}
+const killToLineEnd = wg => {
+    let { state } = wg, { selection } = state;
+    if (state.readOnly || !(selection instanceof GardSelection.Text))
+        return false;
+    let end = wg.moveToLineBoundary(selection, true);
+    if (!end)
+        return false;
+    if (end.head > selection.head)
+        return {
+            changes: { correct: { from: selection.head, to: end.head } },
+            scrollIntoView: true,
+            effects: killText(state, selection.head, end.head),
+            userEvent: "delete.forward"
+        };
+    let join = joinForward(state);
+    if (join) {
+        let joinEnd;
+        state.doc.iterate(state.sel.head.textblockParent.after, state.doc.length, (node, pos) => {
+            if (joinEnd != null)
+                return false;
+            if (node.isPlot && node.isTextblock)
+                joinEnd = pos + 1;
+        });
+        return Transaction.merge(state, join, {
+            effects: joinEnd == null ? undefined : killText(state, selection.head, joinEnd)
+        });
+    }
+    let next = state.sel.head.nodeAfter;
+    if (next)
+        return {
+            changes: { correct: { from: selection.head, to: selection.head + next.length } },
+            scrollIntoView: true,
+            effects: killText(state, selection.head, selection.head + next.length),
+            userEvent: "delete.forward"
+        };
+    return false;
+};
+const yankKilled = wg => {
+    let { state } = wg, buffer = wg.state.field(killBuffer, false);
+    if (!buffer || !buffer.content.length || !(state.selection instanceof GardSelection.Text))
+        return false;
+    let { selection } = state;
+    return {
+        changes: { correct: { from: selection.from, to: selection.to, insert: buffer.content } },
+        scrollIntoView: true,
+        selection: (cx, changes) => GardSelection.near(cx, changes.mapPos(selection.from, 1)),
+        userEvent: "input.yank"
+    };
+};
 const deleteLine = wg => {
     if (wg.state.readOnly)
         return false;
     let tr = deleteSelection(wg.state), { selection } = wg.state;
     if (tr)
-        return (wg.dispatch(tr), true);
+        return tr;
     if (!(selection instanceof GardSelection.Text))
         return false;
     let start = wg.moveToLineBoundary(selection, false), end = wg.moveToLineBoundary(selection, true);
@@ -1476,4 +1540,4 @@ const Menu = /*@__PURE__*/(function (Menu) {
     Menu.resolve = resolve;
 ;return Menu})({});
 
-export { Command, Menu, autoJoinBlocks, canAddMarkInRange, clearNonFitting, deleteBackward, deleteEmptyPlot, deleteForward, deleteLine, deleteSelection, deleteToLineEnd, deleteUnit, deleteWord, doUnwrapBlock, enter, enterInCode, findUnwrappable, findWrappable, insertLineBreak, insertText, joinBackward, joinBlocks, joinForward, joinListItems, liftEmptyBlock, listIsActive, moveByLine, moveByPage, moveByUnit, moveByWord, moveToDocSide, moveToLineSide, moveToTextblockSide, redo, selectAll, selectedTextblocks, setAlignment, setDirection, setTextblockType, splitTextblock, toggleBlock, toggleEmphasis, toggleList, toggleMark, toggleStrong, toggleUnderline, transposeChars, undo, unwrapBlock, wrapBlock, wrapBlockRange };
+export { Command, Menu, autoJoinBlocks, canAddMarkInRange, clearNonFitting, deleteBackward, deleteEmptyPlot, deleteForward, deleteLine, deleteSelection, deleteToLineEnd, deleteUnit, deleteWord, doUnwrapBlock, enter, enterInCode, findUnwrappable, findWrappable, insertLineBreak, insertText, joinBackward, joinBlocks, joinForward, joinListItems, killToLineEnd, liftEmptyBlock, listIsActive, moveByLine, moveByPage, moveByUnit, moveByWord, moveToDocSide, moveToLineSide, moveToTextblockSide, redo, selectAll, selectedTextblocks, setAlignment, setDirection, setTextblockType, splitTextblock, toggleBlock, toggleEmphasis, toggleList, toggleMark, toggleStrong, toggleUnderline, transposeChars, undo, unwrapBlock, wrapBlock, wrapBlockRange, yankKilled };

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;
@@ -1421,11 +1422,12 @@ declare namespace KeyBinding {
      - `Ctrl-e` to {@link command.moveToTextblockSide} (`{dir: "forward"}`)
      - `Ctrl-d` to {@link command.deleteUnit} (`"forward"`)
      - `Ctrl-h` to {@link command.deleteUnit} (`"backward"`)
-     - `Ctrl-k` to {@link command.deleteToLineEnd} (`"forward"`)
+     - `Ctrl-k` to {@link command.killToLineEnd}
      - `Ctrl-Alt-h` to {@link command.deleteWord} (`"backward"`)
      - `Ctrl-o` to {@link command.insertLineBreak}
      - `Ctrl-t` to {@link command.transposeChars}
      - `Ctrl-v` to {@link command.moveByPage} (`{dir: "down"}`)
+     - `Ctrl-y` to {@link command.yankKilled}
     */
     const defaultKeymap: readonly KeyBinding[];
 }

package/dist/editor.js

@@ -2,7 +2,7 @@ import { GardState, GardSelection, TextblockMap, BidiSpan, Transaction } from 'w
 import { Attributes, Elt, Node, Leaf, parse, Slice, Plot, serialize, Pos, ChangeSet, ValidationError, Mark } from 'wordgard/doc';
 import { StyleModule } from 'style-mod';
 import { findClusterBreak } from '@marijn/find-cluster-break';
-import { enter, insertLineBreak, selectAll, undo, redo, transposeChars, Command, deleteUnit, deleteWord, deleteToLineEnd, moveByUnit, moveByLine, moveByWord, moveToLineSide, moveToDocSide, moveByPage, moveToTextblockSide, setAlignment, toggleUnderline, toggleEmphasis, toggleStrong, deleteLine, insertText, setDirection, deleteSelection, Menu, findWrappable, wrapBlockRange, autoJoinBlocks } from 'wordgard/command';
+import { enter, insertLineBreak, selectAll, undo, redo, killToLineEnd, yankKilled, transposeChars, Command, deleteUnit, deleteWord, deleteToLineEnd, moveByUnit, moveByLine, moveByWord, moveToLineSide, moveToDocSide, moveByPage, moveToTextblockSide, setAlignment, toggleUnderline, toggleEmphasis, toggleStrong, deleteLine, insertText, setDirection, deleteSelection, Menu, findWrappable, wrapBlockRange, autoJoinBlocks } from 'wordgard/command';
 import { PhraseSet, phrases } from 'wordgard/phrases';
 import { history } from 'wordgard/history';
 
@@ -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;
@@ -3917,7 +3946,8 @@ class KeyBinding {
             shift: Command.bind(moveToTextblockSide, { dir: "forward", extend: true }) },
         { mac: "Ctrl-d", run: Command.bind(deleteUnit, "forward") },
         { mac: "Ctrl-h", run: Command.bind(deleteUnit, "backward") },
-        { mac: "Ctrl-k", run: Command.bind(deleteToLineEnd, "forward") },
+        { mac: "Ctrl-k", run: killToLineEnd },
+        { mac: "Ctrl-y", run: yankKilled },
         { mac: "Ctrl-Alt-h", run: Command.bind(deleteWord, "backward") },
         { mac: "Ctrl-o", run: insertLineBreak },
         { mac: "Ctrl-t", run: transposeChars },
@@ -4620,9 +4650,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 +4672,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 +4817,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-beta4",
   "description": "Semantic rich text editor system",
   "type": "module",
   "main": "dist/index.js",
@@ -36,7 +36,7 @@
     "style-mod": "^4.1.3"
   },
   "devDependencies": {
-    "@nerd-bible/config": "^0.2.2",
+    "@nerd-bible/config": "^0.2.4",
     "@swc/wasm-typescript": "^1.15.3",
     "@types/mocha": "^10.0.10",
     "@types/node": "^24.10.2",