Double click to edit, double escape to stop

src/app/components/nodes/markdown/markdown.component.html

@@ -1,10 +1,10 @@
-<div class="container" (click)="onFocusIn()">
+<div class="container" (dblclick)="onFocusIn()">
     <div class="editor-container" *ngIf="showEditor">
         <ngx-monaco-editor class="editor"
-                           [options]="editorOptions"
-                           [(ngModel)]="contents"
-                           (ngModelChange)="onContentsChanged($event)"
-                           #editor
+            [options]="editorOptions"
+            [(ngModel)]="contents"
+            (ngModelChange)="onContentsChanged($event)"
+            #editor
         ></ngx-monaco-editor>
     </div>
     <div class="display" markdown katex [data]="contents"></div>

src/app/components/nodes/markdown/markdown.component.ts

@@ -18,6 +18,7 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     public contents = '';
     private dirtyOverride = false;
     public showEditor = false;
+    protected hadOneFocusOut = false;
 
     public editorOptions = {
         language: 'markdown',
@@ -73,6 +74,14 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
 
     @HostListener('document:keyup.escape', ['$event'])
     onFocusOut(event) {
-        this.showEditor = false;
+        if ( !this.hadOneFocusOut ) {
+            this.hadOneFocusOut = true;
+            setTimeout(() => {
+                this.hadOneFocusOut = false;
+            }, 500);
+        } else {
+            this.hadOneFocusOut = false;
+            this.showEditor = false;
+        }
     }
 }

src/app/components/nodes/norm/norm.component.html

@@ -1,5 +1,5 @@
 <div class="container"
-     (focusin)="onFocusIn($event)">
+     (dblclick)="onFocusIn($event)">
     <div class="toolbar-base" *ngIf="isFocused">
         <button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
             <i class="icon fa fa-bold"></i>
@@ -70,8 +70,14 @@
         [ngClass]="isFocused ? 'focused' : ''"
         contenteditable
         appDomChange
+        *ngIf="isFocused"
         [innerHTML]="initialValue"
         #editable
         (domChange)="onContentsChanged($event)"
     ></div>
+    <div
+        class="editable-base"
+        *ngIf="!isFocused"
+        [innerHTML]="initialValue"
+    ></div>
 </div>

src/app/components/nodes/norm/norm.component.ts

@@ -16,6 +16,7 @@ export class NormComponent extends EditorNodeContract implements OnInit {
     protected savedValue = 'Click to edit...';
     public contents = '';
     private dirtyOverride = false;
+    protected hadOneFocusOut = false;
 
     constructor(
         public readonly editorService: EditorService,
@@ -55,7 +56,15 @@ export class NormComponent extends EditorNodeContract implements OnInit {
 
     @HostListener('document:keyup.escape', ['$event'])
     onFocusOut(event) {
-        this.isFocused = false;
+        if ( !this.hadOneFocusOut ) {
+            this.hadOneFocusOut = true;
+            setTimeout(() => {
+                this.hadOneFocusOut = false;
+            }, 500);
+        } else {
+            this.isFocused = false;
+            this.hadOneFocusOut = false;
+        }
     }
 
     documentCommand(cmd: string) {