feature: apply styles to modified preview lines

src/preview/CodeProvider.ts

@@ -30,16 +30,37 @@ export class CodeProvider implements vscode.TextDocumentContentProvider {
 
   public _isOpen = false;
   private _timer: NodeJS.Timer | undefined = undefined;
+  private _editor: vscode.TextEditor | null = null;
 
   readonly defaultLanguage: CodeProviderLanguage = 'json';
 
   constructor(public _document: vscode.TextDocument, public options: CodeProviderOptions) {
     this.scheme = `expo-config-${this.options.type}`;
     this.projectRoot = getProjectRoot(this._document);
 
-    this._changeSubscription = vscode.workspace.onDidChangeTextDocument((ev) =>
-      this.textDidChange(ev)
-    );
+    this._changeSubscription = vscode.workspace.onDidChangeTextDocument((ev) => {
+      this.textDidChange(ev);
+      // Apply highlight to changed area
+      if (this._editor && ev.document === this._editor.document) {
+        const styles: vscode.DecorationOptions[] = [];
+        for (const change of ev.contentChanges) {
+          // Only style added lines
+          if (!change.text || !change.range) {
+            continue;
+          }
+          // Get the range of the modification
+          const range = new vscode.Range(
+            this._editor.document.positionAt(change.rangeOffset),
+            this._editor.document.positionAt(change.rangeOffset + change.text.length)
+          );
+          styles.push({
+            range,
+          });
+        }
+        // Apply decorations (styles)
+        this._editor.setDecorations(addedCodeStyle, styles);
+      }
+    });
     this._onDidChangeVisibleTextEditors = vscode.window.onDidChangeVisibleTextEditors((editors) =>
       this.visibleTextEditorsDidChange(editors)
     );
@@ -48,6 +69,10 @@ export class CodeProvider implements vscode.TextDocumentContentProvider {
     );
   }
 
+  setEditor(editor: vscode.TextEditor) {
+    this._editor = editor;
+  }
+
   getDefinedLanguage() {
     return this.options.convertLanguage || this.defaultLanguage;
   }
@@ -157,6 +182,7 @@ export class CodeProvider implements vscode.TextDocumentContentProvider {
       this.fileContents = '';
       vscode.window.showErrorMessage(error.message);
     }
+
     this.sendDidChangeEvent();
   }
 
@@ -175,3 +201,15 @@ export class CodeProvider implements vscode.TextDocumentContentProvider {
     return '';
   }
 }
+
+// create a decorator type that we use to decorate small numbers
+const addedCodeStyle = vscode.window.createTextEditorDecorationType({
+  //   before: {
+  //     contentText: '+',
+  //   },
+  isWholeLine: true,
+  backgroundColor: '#e5ffec',
+  dark: {
+    backgroundColor: '#2ea04333',
+  },
+});

src/preview/setupPreview.ts

@@ -139,5 +139,7 @@ async function openForEditor(
 
   await codeProvider!.update();
   const doc = await vscode.workspace.openTextDocument(codeProvider!.getURI());
-  vscode.window.showTextDocument(doc, column, true);
+  const editor = await vscode.window.showTextDocument(doc, column, true);
+
+  codeProvider.setEditor(editor);
 }