From 12eafbbd18efe8eed94ea3385253fccf47b433e2 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 11 Nov 2021 16:53:39 +0200
Subject: [PATCH] add content from original editor to modified editor

---
 .../components/editor/editor.component.scss   |  9 ++++-
 .../components/editor/editor.component.ts     | 37 ++++++++++++++-----
 2 files changed, 35 insertions(+), 11 deletions(-)

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 171ee73be..ab425db41 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
@@ -5,8 +5,15 @@ ngx-monaco-editor {
     width: 100%;
 }
 
+%arrow {
+    border: solid black;
+    border-width: 0 2px 2px 0;
+}
+
 ::ng-deep ngx-monaco-diff-editor .arrow-left {
-    background: darkred;
+    @extend %arrow;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
     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 84f0fc076..1bac843a6 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
@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { Debounce, List } from '@iqser/common-ui';
+import { Component, Input, OnInit } from '@angular/core';
+import { Debounce, List, OnChange } from '@iqser/common-ui';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import ILineChange = monaco.editor.ILineChange;
+import IEditorMouseEvent = monaco.editor.IEditorMouseEvent;
 
 const MIN_WORD_LENGTH = 2;
 const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>
@@ -22,11 +23,15 @@ const isPositive = (lineChange: ILineChange) => lineChange.originalEndLineNumber
     templateUrl: './editor.component.html',
     styleUrls: ['./editor.component.scss'],
 })
-export class EditorComponent implements OnInit, OnChanges {
+export class EditorComponent implements OnInit {
     editorOptions: IStandaloneEditorConstructionOptions = {};
-    @Input() showDiffEditor = false;
-    @Input() initialEntries: List;
-    @Input() canEdit = false;
+    @Input()
+    showDiffEditor = false;
+    @Input()
+    @OnChange<List, EditorComponent>('revert')
+    initialEntries: List;
+    @Input()
+    canEdit = false;
     currentEntries: string[] = [];
     codeEditor: ICodeEditor;
     diffEditor: IDiffEditor;
@@ -68,13 +73,10 @@ export class EditorComponent implements OnInit, OnChanges {
         };
     }
 
-    ngOnChanges() {
-        this.revert();
-    }
-
     onDiffEditorInit(editor: IDiffEditor): void {
         this.diffEditor = editor;
         this._addMarginButtons();
+        this.diffEditor.getOriginalEditor().onMouseDown(event => this._handleMarginButtonClick(event));
     }
 
     onCodeEditorInit(editor: ICodeEditor): void {
@@ -101,6 +103,21 @@ export class EditorComponent implements OnInit, OnChanges {
         this.currentEntries = [...this.initialEntries];
     }
 
+    private _handleMarginButtonClick(event: IEditorMouseEvent) {
+        const isNotMarginButtonClick = event.target.position.column !== 1;
+        if (isNotMarginButtonClick) {
+            return;
+        }
+        this._addContentFromOriginalAtLine(event.target.position.lineNumber);
+    }
+
+    private _addContentFromOriginalAtLine(lineNumber: number) {
+        const lineContent = this.diffEditor.getOriginalEditor().getModel().getLineContent(lineNumber);
+        const entriesBefore = this.currentEntries.slice(0, lineNumber);
+        const entriesAfter = this.currentEntries.slice(lineNumber);
+        this.currentEntries = [...entriesBefore, lineContent, ...entriesAfter];
+    }
+
     private _addMarginButtons() {
         let glyphDecorations = [];
         this.diffEditor.onDidUpdateDiff(() => {