keep focus when clicking on edit read only note

src/public/app/services/note_context.js

@@ -40,7 +40,6 @@ class NoteContext extends Component {
         this.notePath = resolvedNotePath;
         this.noteId = treeService.getNoteIdFromNotePath(resolvedNotePath);
 
-        this.readOnlyTemporarilyDisabled = false;
         this.readOnlyTemporarilyDisabled = false;
 
         this.saveToRecentNotes(resolvedNotePath);
@@ -182,7 +181,8 @@ class NoteContext extends Component {
             return false;
         }
 
-        if (this.note.type !== 'text' && this.note.type !== 'code') {
+        // "readOnly" is a state valid only for text/code notes
+        if (!this.note || this.note.type !== 'text' && this.note.type !== 'code') {
             return false;
         }
 

src/public/app/widgets/buttons/edit_button.js

@@ -1,4 +1,5 @@
 import ButtonWidget from "./button_widget.js";
+import appContext from "../../services/app_context.js";
 
 export default class EditButton extends ButtonWidget {
     isEnabled() {
@@ -14,7 +15,7 @@ export default class EditButton extends ButtonWidget {
             .onClick(widget => {
                 this.noteContext.readOnlyTemporarilyDisabled = true;
 
-                this.triggerEvent('readOnlyTemporarilyDisabled', {noteContext: this.noteContext});
+                appContext.triggerEvent('readOnlyTemporarilyDisabled', {noteContext: this.noteContext});
 
                 this.refresh();
             });

src/public/app/widgets/containers/scrolling_container.js

@@ -7,10 +7,38 @@ export default class ScrollingContainer extends Container {
         this.css('overflow', 'auto');
     }
 
+    setNoteContextEvent({noteContext}) {
+        /** @var {NoteContext} */
+        this.noteContext = noteContext;
+    }
+
     async noteSwitchedEvent({noteContext, notePath}) {
-        // if notePath does not match then the noteContext has been switched to another note in the mean time
-        if (noteContext.notePath === notePath) {
-            this.$widget.scrollTop(0);
+        this.$widget.scrollTop(0);
+    }
+
+    async noteSwitchedAndActivatedEvent({noteContext, notePath}) {
+        this.noteContext = noteContext;
+
+        this.$widget.scrollTop(0);
+    }
+
+    async activeContextChangedEvent({noteContext}) {
+        this.noteContext = noteContext;
+    }
+
+    handleEventInChildren(name, data) {
+        if (name === 'readOnlyTemporarilyDisabled'
+                && this.noteContext
+                && this.noteContext.ntxId === data.noteContext.ntxId) {
+
+            const scrollTop = this.$widget.scrollTop();
+
+            const promise = super.handleEventInChildren(name, data);
+
+            promise.then(() => setTimeout(() => this.$widget.scrollTop(scrollTop), 500));
+        }
+        else {
+            return super.handleEventInChildren(name, data);
         }
     }
 }

src/public/app/widgets/note_detail.js

@@ -271,12 +271,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         }
     }
 
-    readOnlyTemporarilyDisabledEvent({noteContext}) {
-        if (this.isNoteContext(noteContext.ntxId)) {
-            this.refresh();
-        }
-    }
-
     async cutIntoNoteCommand() {
         const note = appContext.tabManager.getActiveContextNote();
 

src/public/app/widgets/type_widgets/read_only_code.js

@@ -1,18 +1,18 @@
 import TypeWidget from "./type_widget.js";
 
 const TPL = `
-<div class="note-detail-read-only-code note-detail-printable">
+<div class="note-detail-readonly-code note-detail-printable">
     <style>
-    .note-detail-read-only-code {
+    .note-detail-readonly-code {
         min-height: 50px;
     }
     
-    .note-detail-read-only-code-content {
+    .note-detail-readonly-code-content {
         padding: 10px;
     }
     </style>
 
-    <pre class="note-detail-read-only-code-content"></pre>
+    <pre class="note-detail-readonly-code-content"></pre>
 </div>`;
 
 export default class ReadOnlyCodeTypeWidget extends TypeWidget {
@@ -20,7 +20,7 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$content = this.$widget.find('.note-detail-read-only-code-content');
+        this.$content = this.$widget.find('.note-detail-readonly-code-content');
 
         super.doRender();
     }

src/public/stylesheets/style.css

@@ -278,6 +278,7 @@ button.btn, button.btn-sm {
 pre:not(.CodeMirror-line) {
     color: var(--main-text-color) !important;
     white-space: pre-wrap;
+    font-size: 100%;
 }
 
 .pointer {