prosemirror-changeset 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.4.0 (2026-02-14)
+
+### New features
+
+`Change` objects can now be serialized to and deserialized from JSON, and `ChangeSet.create` allows you to pass in a set of changes.
+
+## 2.3.1 (2025-05-28)
+
+### Bug fixes
+
+Improve diffing to not treat closing tokens of different node types as the same token.
+
 ## 2.3.0 (2025-05-05)
 
 ### New features

package/README.md

@@ -43,11 +43,17 @@ A replaced range with metadata associated with it.
    Data associated with the inserted content. Length adds up to
    `this.toB - this.fromB`.
 
+ * **`toJSON`**`() → ChangeJSON`\
+   Returns a JSON-serializeable object to represent this change.
+
  * `static `**`merge`**`<Data>(x: readonly Change[], y: readonly Change[], combine: fn(dataA: Data, dataB: Data) → Data) → readonly Change[]`\
    This merges two changesets (the end document of x should be the
    start document of y) into a single one spanning the start of x to
    the end of y.
 
+ * `static `**`fromJSON`**`<Data>(json: ChangeJSON) → Change`\
+   Deserialize a change from JSON format.
+
 
 ### class Span`<Data = any>`
 
@@ -96,7 +102,7 @@ partially undo themselves by comparing their content.
    make sure the method is called on the old set and passed the new
    set. The returned positions will be in new document coordinates.
 
- * `static `**`create`**`<Data = any>(doc: Node, combine?: fn(dataA: Data, dataB: Data) → Data = (a, b) => a === b ? a : null as any, tokenEncoder?: TokenEncoder = DefaultEncoder) → ChangeSet`\
+ * `static `**`create`**`<Data = any>(doc: Node, combine?: fn(dataA: Data, dataB: Data) → Data = (a, b) => a === b ? a : null as any, tokenEncoder?: TokenEncoder = DefaultEncoder, changes?: readonly Change[] = []) → ChangeSet`\
    Create a changeset with the given base object and configuration.
 
    The `combine` function is used to compare and combine metadata—it
@@ -108,6 +114,11 @@ partially undo themselves by comparing their content.
    changes. The default is to just compare nodes by name and text
    by character, ignoring marks and attributes.
 
+   To serialize a change set, you can store its document and
+   change array as JSON, and then pass the deserialized (via
+   [`Change.fromJSON`](#changes.Change^fromJSON)) set of changes
+   as fourth argument to `create` to recreate the set.
+
 
  * **`simplifyChanges`**`(changes: readonly Change[], doc: Node) → Change[]`\
    Simplifies a set of changes for presentation. This makes the
@@ -144,3 +155,21 @@ performance.
    Compare the given tokens. Should return true when they count as
    equal.
 
+
+### type ChangeJSON`<Data>`
+
+JSON-serialized form of a change.
+
+ * **`fromA`**`: number`
+
+ * **`toA`**`: number`
+
+ * **`fromB`**`: number`
+
+ * **`toB`**`: number`
+
+ * **`deleted`**`: readonly {length: number, data: Data}[]`
+
+ * **`inserted`**`: readonly {length: number, data: Data}[]`
+
+

package/dist/index.cjs

@@ -12,6 +12,12 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function typeID(type) {
+  var cache = type.schema.cached.changeSetIDs || (type.schema.cached.changeSetIDs = Object.create(null));
+  var id = cache[type.name];
+  if (id == null) cache[type.name] = id = Object.keys(type.schema.nodes).indexOf(type.name) + 1;
+  return id;
+}
 var DefaultEncoder = {
   encodeCharacter: function encodeCharacter(_char) {
     return _char;
@@ -19,8 +25,8 @@ var DefaultEncoder = {
   encodeNodeStart: function encodeNodeStart(node) {
     return node.type.name;
   },
-  encodeNodeEnd: function encodeNodeEnd() {
-    return -1;
+  encodeNodeEnd: function encodeNodeEnd(node) {
+    return -typeID(node.type);
   },
   compareTokens: function compareTokens(a, b) {
     return a === b;
@@ -204,6 +210,11 @@ var Change = function () {
       if (startA == 0 && startB == 0 && endA == this.toA - this.fromA && endB == this.toB - this.fromB) return this;
       return new Change(this.fromA + startA, this.fromA + endA, this.fromB + startB, this.fromB + endB, Span.slice(this.deleted, startA, endA), Span.slice(this.inserted, startB, endB));
     }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return this;
+    }
   }], [{
     key: "merge",
     value: function merge(x, y, combine) {
@@ -270,6 +281,15 @@ var Change = function () {
         }
       }
     }
+  }, {
+    key: "fromJSON",
+    value: function fromJSON(json) {
+      return new Change(json.fromA, json.toA, json.fromB, json.toB, json.deleted.map(function (d) {
+        return new Span(d.length, d.data);
+      }), json.inserted.map(function (d) {
+        return new Span(d.length, d.data);
+      }));
+    }
   }]);
   return Change;
 }();
@@ -501,11 +521,12 @@ var ChangeSet = function () {
         return a === b ? a : null;
       };
       var tokenEncoder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DefaultEncoder;
+      var changes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
       return new ChangeSet({
         combine: combine,
         doc: doc,
         encoder: tokenEncoder
-      }, []);
+      }, changes);
     }
   }]);
   return ChangeSet;

package/dist/index.d.cts

@@ -50,7 +50,32 @@ declare class Change<Data = any> {
     the end of y.
     */
     static merge<Data>(x: readonly Change<Data>[], y: readonly Change<Data>[], combine: (dataA: Data, dataB: Data) => Data): readonly Change<Data>[];
+    /**
+    Deserialize a change from JSON format.
+    */
+    static fromJSON<Data>(json: ChangeJSON<Data>): Change<Data>;
+    /**
+    Returns a JSON-serializeable object to represent this change.
+    */
+    toJSON(): ChangeJSON<Data>;
 }
+/**
+JSON-serialized form of a change.
+*/
+type ChangeJSON<Data> = {
+    fromA: number;
+    toA: number;
+    fromB: number;
+    toB: number;
+    deleted: readonly {
+        length: number;
+        data: Data;
+    }[];
+    inserted: readonly {
+        length: number;
+        data: Data;
+    }[];
+};
 
 /**
 A token encoder can be passed when creating a `ChangeSet` in order
@@ -149,8 +174,13 @@ declare class ChangeSet<Data = any> {
     serialized and compared when diffing the content produced by
     changes. The default is to just compare nodes by name and text
     by character, ignoring marks and attributes.
+    
+    To serialize a change set, you can store its document and
+    change array as JSON, and then pass the deserialized (via
+    [`Change.fromJSON`](https://prosemirror.net/docs/ref/#changes.Change^fromJSON)) set of changes
+    as fourth argument to `create` to recreate the set.
     */
-    static create<Data = any>(doc: Node, combine?: (dataA: Data, dataB: Data) => Data, tokenEncoder?: TokenEncoder<any>): ChangeSet<Data>;
+    static create<Data = any>(doc: Node, combine?: (dataA: Data, dataB: Data) => Data, tokenEncoder?: TokenEncoder<any>, changes?: readonly Change<Data>[]): ChangeSet<Data>;
 }
 
-export { Change, ChangeSet, Span, type TokenEncoder, simplifyChanges };
+export { Change, type ChangeJSON, ChangeSet, Span, type TokenEncoder, simplifyChanges };

package/dist/index.d.ts

@@ -50,7 +50,32 @@ declare class Change<Data = any> {
     the end of y.
     */
     static merge<Data>(x: readonly Change<Data>[], y: readonly Change<Data>[], combine: (dataA: Data, dataB: Data) => Data): readonly Change<Data>[];
+    /**
+    Deserialize a change from JSON format.
+    */
+    static fromJSON<Data>(json: ChangeJSON<Data>): Change<Data>;
+    /**
+    Returns a JSON-serializeable object to represent this change.
+    */
+    toJSON(): ChangeJSON<Data>;
 }
+/**
+JSON-serialized form of a change.
+*/
+type ChangeJSON<Data> = {
+    fromA: number;
+    toA: number;
+    fromB: number;
+    toB: number;
+    deleted: readonly {
+        length: number;
+        data: Data;
+    }[];
+    inserted: readonly {
+        length: number;
+        data: Data;
+    }[];
+};
 
 /**
 A token encoder can be passed when creating a `ChangeSet` in order
@@ -149,8 +174,13 @@ declare class ChangeSet<Data = any> {
     serialized and compared when diffing the content produced by
     changes. The default is to just compare nodes by name and text
     by character, ignoring marks and attributes.
+    
+    To serialize a change set, you can store its document and
+    change array as JSON, and then pass the deserialized (via
+    [`Change.fromJSON`](https://prosemirror.net/docs/ref/#changes.Change^fromJSON)) set of changes
+    as fourth argument to `create` to recreate the set.
     */
-    static create<Data = any>(doc: Node, combine?: (dataA: Data, dataB: Data) => Data, tokenEncoder?: TokenEncoder<any>): ChangeSet<Data>;
+    static create<Data = any>(doc: Node, combine?: (dataA: Data, dataB: Data) => Data, tokenEncoder?: TokenEncoder<any>, changes?: readonly Change<Data>[]): ChangeSet<Data>;
 }
 
-export { Change, ChangeSet, Span, type TokenEncoder, simplifyChanges };
+export { Change, type ChangeJSON, ChangeSet, Span, type TokenEncoder, simplifyChanges };

package/dist/index.js

@@ -1,12 +1,20 @@
+function typeID(type) {
+    let cache = type.schema.cached.changeSetIDs || (type.schema.cached.changeSetIDs = Object.create(null));
+    let id = cache[type.name];
+    if (id == null)
+        cache[type.name] = id = Object.keys(type.schema.nodes).indexOf(type.name) + 1;
+    return id;
+}
+// The default token encoder, which encodes node open tokens are
+// encoded as strings holding the node name, characters as their
+// character code, and node close tokens as negative numbers.
 const DefaultEncoder = {
     encodeCharacter: char => char,
     encodeNodeStart: node => node.type.name,
-    encodeNodeEnd: () => -1,
+    encodeNodeEnd: node => -typeID(node.type),
     compareTokens: (a, b) => a === b
 };
-// Convert the given range of a fragment to tokens, where node open
-// tokens are encoded as strings holding the node name, characters as
-// their character code, and node close tokens as -1.
+// Convert the given range of a fragment to tokens.
 function tokens(frag, encoder, start, end, target) {
     for (let i = 0, off = 0; i < frag.childCount; i++) {
         let child = frag.child(i), endOff = off + child.nodeSize;
@@ -342,6 +350,16 @@ class Change {
             }
         }
     }
+    /**
+    Deserialize a change from JSON format.
+    */
+    static fromJSON(json) {
+        return new Change(json.fromA, json.toA, json.fromB, json.toB, json.deleted.map(d => new Span(d.length, d.data)), json.inserted.map(d => new Span(d.length, d.data)));
+    }
+    /**
+    Returns a JSON-serializeable object to represent this change.
+    */
+    toJSON() { return this; }
 }
 
 let letter;
@@ -638,9 +656,14 @@ class ChangeSet {
     serialized and compared when diffing the content produced by
     changes. The default is to just compare nodes by name and text
     by character, ignoring marks and attributes.
+    
+    To serialize a change set, you can store its document and
+    change array as JSON, and then pass the deserialized (via
+    [`Change.fromJSON`](https://prosemirror.net/docs/ref/#changes.Change^fromJSON)) set of changes
+    as fourth argument to `create` to recreate the set.
     */
-    static create(doc, combine = (a, b) => a === b ? a : null, tokenEncoder = DefaultEncoder) {
-        return new ChangeSet({ combine, doc, encoder: tokenEncoder }, []);
+    static create(doc, combine = (a, b) => a === b ? a : null, tokenEncoder = DefaultEncoder, changes = []) {
+        return new ChangeSet({ combine, doc, encoder: tokenEncoder }, changes);
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-changeset",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Distills a series of editing steps into deleted and added ranges",
   "type": "module",
   "main": "dist/index.cjs",

package/src/README.md

@@ -27,4 +27,6 @@ it was made, or the step data necessary to invert it again.
 
 @simplifyChanges
 
-@TokenEncoder
+@TokenEncoder
+
+@ChangeJSON

package/src/change.ts

@@ -168,4 +168,22 @@ export class Change<Data = any> {
       }
     }
   }
+
+  /// Deserialize a change from JSON format.
+  static fromJSON<Data>(json: ChangeJSON<Data>) {
+    return new Change(json.fromA, json.toA, json.fromB, json.toB,
+                      json.deleted.map(d => new Span(d.length, d.data)),
+                      json.inserted.map(d => new Span(d.length, d.data)))
+  }
+
+  /// Returns a JSON-serializeable object to represent this change.
+  toJSON(): ChangeJSON<Data> { return this }
+}
+
+/// JSON-serialized form of a change.
+export type ChangeJSON<Data> = {
+  fromA: number, toA: number,
+  fromB: number, toB: number,
+  deleted: readonly {length: number, data: Data}[],
+  inserted: readonly {length: number, data: Data}[]
 }

package/src/changeset.ts

@@ -1,8 +1,8 @@
 import {Node} from "prosemirror-model"
 import {StepMap} from "prosemirror-transform"
 import {computeDiff, TokenEncoder, DefaultEncoder} from "./diff"
-import {Change, Span} from "./change"
-export {Change, Span}
+import {Change, Span, ChangeJSON} from "./change"
+export {Change, Span, ChangeJSON}
 export {simplifyChanges} from "./simplify"
 export {TokenEncoder}
 
@@ -146,12 +146,18 @@ export class ChangeSet<Data = any> {
   /// serialized and compared when diffing the content produced by
   /// changes. The default is to just compare nodes by name and text
   /// by character, ignoring marks and attributes.
+  ///
+  /// To serialize a change set, you can store its document and
+  /// change array as JSON, and then pass the deserialized (via
+  /// [`Change.fromJSON`](#changes.Change^fromJSON)) set of changes
+  /// as fourth argument to `create` to recreate the set.
   static create<Data = any>(
     doc: Node,
     combine: (dataA: Data, dataB: Data) => Data = (a, b) => a === b ? a : null as any,
-    tokenEncoder: TokenEncoder<any> = DefaultEncoder
+    tokenEncoder: TokenEncoder<any> = DefaultEncoder,
+    changes: readonly Change<Data>[] = []
   ) {
-    return new ChangeSet({combine, doc, encoder: tokenEncoder}, [])
+    return new ChangeSet({combine, doc, encoder: tokenEncoder}, changes)
   }
 
   /// Exported for testing @internal

package/src/diff.ts

@@ -1,4 +1,4 @@
-import {Fragment, Node, Mark} from "prosemirror-model"
+import {Fragment, Node, NodeType, Mark} from "prosemirror-model"
 import {Change} from "./change"
 
 /// A token encoder can be passed when creating a `ChangeSet` in order
@@ -23,16 +23,24 @@ export interface TokenEncoder<T> {
   compareTokens(a: T, b: T): boolean
 }
 
+function typeID(type: NodeType) {
+  let cache: Record<string, number> = type.schema.cached.changeSetIDs || (type.schema.cached.changeSetIDs = Object.create(null))
+  let id = cache[type.name]
+  if (id == null) cache[type.name] = id = Object.keys(type.schema.nodes).indexOf(type.name) + 1
+  return id
+}
+
+// The default token encoder, which encodes node open tokens are
+// encoded as strings holding the node name, characters as their
+// character code, and node close tokens as negative numbers.
 export const DefaultEncoder: TokenEncoder<number | string> = {
   encodeCharacter: char => char,
   encodeNodeStart: node => node.type.name,
-  encodeNodeEnd: () => -1,
+  encodeNodeEnd: node => -typeID(node.type),
   compareTokens: (a, b) => a === b
 }
 
-// Convert the given range of a fragment to tokens, where node open
-// tokens are encoded as strings holding the node name, characters as
-// their character code, and node close tokens as -1.
+// Convert the given range of a fragment to tokens.
 function tokens<T>(frag: Fragment, encoder: TokenEncoder<T>, start: number, end: number, target: T[]) {
   for (let i = 0, off = 0; i < frag.childCount; i++) {
     let child = frag.child(i), endOff = off + child.nodeSize

package/test/test-diff.ts

@@ -63,4 +63,7 @@ describe("computeDiff", () => {
 
   it("can handle ambiguous diffs", () =>
      test(doc(p("abcbcd")), doc(p("abcd")), [4, 6, 4, 4]))
+
+  it("sees the difference between different closing tokens", () =>
+     test(doc(p("a")), doc(h1("oo")), [0, 3, 0, 4]))
 })