Merge pull request #51 from streamich/ins-del

Implement `.ins()` and `.del()` methods

package.json

@@ -43,7 +43,7 @@
     "crdt"
   ],
   "dependencies": {
-    "collaborative-editor": "^2.2.0"
+    "collaborative-editor": "^2.4.0"
   },
   "peerDependencies": {
     "json-joy": "*",
@@ -69,7 +69,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
-    "json-joy": "^16.13.1",
+    "json-joy": "^16.18.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/InputEditor.ts

@@ -26,6 +26,33 @@ export class InputEditor implements EditorFacade {
     this.input.value = text;
   }
 
+  public ins(position: number, text: string): void {
+    const selection = this.getSelection();
+    const value = this.get();
+    const next = value.slice(0, position) + text + value.slice(position);
+    this.set(next);
+    if (selection) {
+      let [start, end] = selection;
+      const length = text.length;
+      if (start >= position) start += length;
+      if (end > position) end += length;
+      this.setSelection(start, end, selection[2]);
+    }
+  }
+
+  public del(position: number, length: number): void {
+    const selection = this.getSelection();
+    const value = this.get();
+    const next = value.slice(0, position) + value.slice(position + length);
+    this.set(next);
+    if (selection) {
+      let [start, end] = selection;
+      if (start >= position) start = Math.max(position, start - length);
+      if (end >= position) end = Math.max(position, end - length);
+      this.setSelection(start, end, selection[2]);
+    }
+  }
+
   public getSelection(): [number, number, -1 | 0 | 1] | null {
     const input = this.input;
     const {selectionStart, selectionEnd, selectionDirection} = input;

src/index.stories.tsx

@@ -56,6 +56,42 @@ const Demo: React.FC<{textarea: boolean}> = ({textarea}) => {
           Append "?" to model after 2s
         </button>
       </div>
+      <div>
+        <button
+          onClick={() => {
+            setTimeout(() => {
+              const str = model.api.str(['text']);
+              str.ins(Math.min(3, str.length()), 'abc');
+            }, 2000);
+          }}
+        >
+          Insert "abc" into model at pos 3 after 2s
+        </button>
+      </div>
+      <div>
+        <button
+          onClick={() => {
+            setTimeout(() => {
+              const str = model.api.str(['text']);
+              str.del(3, Math.min(5, str.length() - 3));
+            }, 2000);
+          }}
+        >
+          Delete 5 chars from model at pos 3 after 2s
+        </button>
+      </div>
+      <div>
+        <button
+          onClick={() => {
+            setTimeout(() => {
+              const str = model.api.str(['text']);
+              str.del(1, 1);
+            }, 2000);
+          }}
+        >
+          Delete second character after 2s
+        </button>
+      </div>
       <div>
         <button
           onClick={() => {

yarn.lock

@@ -5928,15 +5928,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collaborative-editor@npm:^2.2.0":
-  version: 2.3.0
-  resolution: "collaborative-editor@npm:2.3.0"
+"collaborative-editor@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "collaborative-editor@npm:2.4.0"
   dependencies:
     fast-diff: "npm:^1.3.0"
   peerDependencies:
     json-joy: "*"
     tslib: 2
-  checksum: 10c0/0d770a6a75c308be7d81bac3c9f0dc9df8fff300ebd0d2bb0efb0e66b509ce8b8217dde3bcd65288b606ae3f2081b6064635a60aabcb379e85958652928da217
+  checksum: 10c0/f61f681235267a9c944c7e548a41ebd378d51184152787bbe49d1c5d55817a6c366d6f0688647f38fbd18f4cfc685759e1467ee1b365531c1f0ac42a656e63e0
   languageName: node
   linkType: hard
 
@@ -5959,12 +5959,12 @@ __metadata:
     "@types/react": "npm:^18.2.39"
     "@typescript-eslint/eslint-plugin": "npm:^6.13.1"
     "@typescript-eslint/parser": "npm:^6.13.1"
-    collaborative-editor: "npm:^2.2.0"
+    collaborative-editor: "npm:^2.4.0"
     eslint: "npm:^8.54.0"
     eslint-plugin-react: "npm:^7.33.2"
     eslint-plugin-storybook: "npm:^0.6.15"
     jest: "npm:^29.7.0"
-    json-joy: "npm:^16.13.1"
+    json-joy: "npm:^16.18.0"
     prettier: "npm:^3.1.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -9545,9 +9545,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-joy@npm:^16.13.1":
-  version: 16.13.2
-  resolution: "json-joy@npm:16.13.2"
+"json-joy@npm:^16.18.0":
+  version: 16.18.0
+  resolution: "json-joy@npm:16.18.0"
   dependencies:
     "@jsonjoy.com/base64": "npm:^1.1.1"
     "@jsonjoy.com/json-pack": "npm:^1.0.2"
@@ -9572,7 +9572,7 @@ __metadata:
     json-pointer: bin/json-pointer.js
     json-pointer-test: bin/json-pointer-test.js
     json-unpack: bin/json-unpack.js
-  checksum: 10c0/60300120566a9fb2f6de86df057d60edaf066bc1bdbba552c137dfde0a7705ae0725f4c25558eaa895c44f9892454921169580c641bddaa4c03648c3cc403dc4
+  checksum: 10c0/8fe94b3302879ae06c4899f7a2cc462c6dd86a38df4c54047a1dd1010ec7a0354892ff32f624da1df1d1ca79e14a17c68c7718aa1bd4052f825d6d79af62073e
   languageName: node
   linkType: hard