From c1f8778e954fcde1376afb6b3cedd865bdceaaae Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 11 Nov 2021 15:58:57 +0200
Subject: [PATCH] show margin glyphs for diff editor

---
 .../components/editor/editor.component.scss   |  6 +++++
 .../components/editor/editor.component.ts     | 25 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
index 7707ea433..171ee73be 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
@@ -4,3 +4,9 @@ ngx-monaco-editor {
     height: 100%;
     width: 100%;
 }
+
+::ng-deep ngx-monaco-diff-editor .arrow-left {
+    background: darkred;
+    cursor: pointer;
+    z-index: 1;
+}
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index a30b2322c..84f0fc076 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -4,8 +4,18 @@ import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorCon
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
+import ILineChange = monaco.editor.ILineChange;
 
 const MIN_WORD_LENGTH = 2;
+const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>
+    ({
+        range: new monaco.Range(originalStartLineNumber, 1, originalEndLineNumber, 1),
+        options: {
+            glyphMarginClassName: 'arrow-left',
+            isWholeLine: true,
+        },
+    } as IModelDeltaDecoration);
+const isPositive = (lineChange: ILineChange) => lineChange.originalEndLineNumber - lineChange.originalStartLineNumber >= 0;
 
 @Component({
     selector: 'redaction-editor',
@@ -52,6 +62,7 @@ export class EditorComponent implements OnInit, OnChanges {
         this.editorOptions = {
             theme: 'vs',
             language: 'text/plain',
+            glyphMargin: true,
             automaticLayout: true,
             readOnly: !this.canEdit,
         };
@@ -63,6 +74,7 @@ export class EditorComponent implements OnInit, OnChanges {
 
     onDiffEditorInit(editor: IDiffEditor): void {
         this.diffEditor = editor;
+        this._addMarginButtons();
     }
 
     onCodeEditorInit(editor: ICodeEditor): void {
@@ -89,6 +101,19 @@ export class EditorComponent implements OnInit, OnChanges {
         this.currentEntries = [...this.initialEntries];
     }
 
+    private _addMarginButtons() {
+        let glyphDecorations = [];
+        this.diffEditor.onDidUpdateDiff(() => {
+            /**
+             * Sometimes diff editor thinks that there's a change that ends on line 0 and starts on line 2000 or so.
+             * We must get all change that started on a line and ended on the same or greater line
+             * Otherwise margin buttons will have an odd behaviour
+             */
+            const decorations = this.diffEditor.getLineChanges().filter(isPositive).map(lineChangeToDecoration);
+            glyphDecorations = this.diffEditor.getOriginalEditor().deltaDecorations(glyphDecorations, decorations);
+        });
+    }
+
     private _isNew(entry: string): boolean {
         return this.initialEntries.indexOf(entry) < 0 && entry?.trim().length > 0;
     }