fix text instance sometimes remaining displayed when switching to e.g. image

Author: zadam

src/public/javascripts/services/note_detail_image.js

@@ -1,5 +1,4 @@
 import utils from "./utils.js";
-import noteDetailService from "./note_detail.js";
 import infoService from "./info.js";
 import server from "./server.js";
 

src/public/javascripts/services/note_detail_text.js

@@ -8,6 +8,7 @@ class NoteDetailText {
     constructor(ctx) {
         this.ctx = ctx;
         this.$component = ctx.$tabContent.find('.note-detail-text');
+        this.$editorEl = this.$component.find('.note-detail-text-editor');
         this.textEditor = null;
 
         this.$component.on("dblclick", "img", e => {
@@ -39,7 +40,7 @@ class NoteDetailText {
             // textEditor might have been initialized during previous await so checking again
             // looks like double initialization can freeze CKEditor pretty badly
             if (!this.textEditor) {
-                this.textEditor = await BalloonEditor.create(this.$component[0], {
+                this.textEditor = await BalloonEditor.create(this.$editorEl[0], {
                     placeholder: "Type the content of your note here ..."
                 });
 

src/public/stylesheets/style.css

@@ -135,13 +135,16 @@ ul.fancytree-container {
 .note-detail-text h6 { font-size: 1.1em; }
 
 .note-detail-text {
+    overflow: auto;
+    font-family: var(--detail-text-font-family);
+}
+
+.note-detail-text-editor {
+    padding-top: 10px;
     border: 0 !important;
     box-shadow: none !important;
     /* This is because with empty content height of editor is 0 and it's impossible to click into it */
     min-height: 200px;
-    padding-top: 10px;
-    overflow: auto;
-    font-family: var(--detail-text-font-family);
 }
 
 .note-detail-text p:first-child, .note-detail-text::before {

src/views/tabs.ejs

@@ -11,7 +11,9 @@
         <table class="note-detail-promoted-attributes"></table>
 
         <div class="note-detail-component-wrapper">
-            <div class="note-detail-text note-detail-component" tabindex="10000"></div>
+            <div class="note-detail-text note-detail-component" tabindex="10000">
+                <div class="note-detail-text-editor"></div>
+            </div>
 
             <div class="note-detail-code note-detail-component"></div>