diff --git a/package.json b/package.json index 7023877..d72938e 100644 --- a/package.json +++ b/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", diff --git a/src/InputEditor.ts b/src/InputEditor.ts index dde94a6..3d3262f 100644 --- a/src/InputEditor.ts +++ b/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; diff --git a/src/index.stories.tsx b/src/index.stories.tsx index 1fa31b0..ee1152d 100644 --- a/src/index.stories.tsx +++ b/src/index.stories.tsx @@ -56,6 +56,42 @@ const Demo: React.FC<{textarea: boolean}> = ({textarea}) => { Append "?" to model after 2s +
+ +
+
+ +
+
+ +