Improve asset editor source undo

Asset editor replaces text ranges instead of
the entire source file. Undo inside the source
code now scrolls asset editor edits into view,
and selects the text being edited, so that what
is being (un)edited is much clearer. Also, undo
history is no longer burdened by full file edits.

Author: fredsa

src/ide/pixeleditor.ts

@@ -490,12 +490,11 @@ export class TextDataNode extends CodeProjectDataNode {
     // TODO: reload editors?
     var datastr = this.text.substring(this.start, this.end);
     datastr = replaceHexWords(datastr, this.words, this.bpw);
-    this.text = this.text.substring(0, this.start) + datastr + this.text.substring(this.end);
-    this.end = this.start + datastr.length;
     if (this.project) {
-      this.project.updateFile(this.fileid, this.text);
-      //this.project.replaceTextRange(this.fileid, this.start, this.end, datastr);
+      this.project.replaceTextRange(this.fileid, this.start, this.end, datastr);
     }
+    this.text = this.text.substring(0, this.start) + datastr + this.text.substring(this.end);
+    this.end = this.start + datastr.length;
     return true;
   }
   updateRight() {

src/ide/views/baseviews.ts

@@ -20,6 +20,7 @@ export interface ProjectView {
     recreateOnResize?: boolean;
     undoStep?(): void;
     redoStep?(): void;
+    replaceTextRange?(from: number, to: number, text: string): void;
 };
 
 // detect mobile (https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device)

src/ide/views/editors.ts

@@ -299,6 +299,19 @@ export class SourceEditor implements ProjectView {
     }
   }
 
+  replaceTextRange(from: number, to: number, text: string) {
+    const fromline = this.editor.state.doc.lineAt(from).number;
+    const toline = this.editor.state.doc.lineAt(to).number;
+    this.editor.dispatch({
+      changes: { from, to, insert: text },
+      annotations: isolateHistory.of("full"),
+      selection: { anchor: from, head: to },
+      effects: [
+        EditorView.scrollIntoView(this.editor.state.doc.line(fromline).from, { y: "start", yMargin: 100/*pixels*/ }),
+      ]
+    });
+  }
+
   insertText(text: string) {
     const main = this.editor.state.selection.main;
     this.editor.dispatch({

src/ide/windows.ts

@@ -138,6 +138,13 @@ export class ProjectWindows {
     }
   }
 
+  replaceTextRange(fileid: string, from: number, to: number, text: string) {
+    var wnd = this.id2window[fileid];
+    wnd.replaceTextRange(from, to, text);
+    this.undofiles.push(fileid);
+    this.redofiles = [];
+  }
+
   undoStep() {
     var fileid = this.undofiles.pop();
     var wnd = this.id2window[fileid];