read only code notes WIP

src/public/app/widgets/note_detail.js

@@ -6,7 +6,7 @@ import server from "../services/server.js";
 import libraryLoader from "../services/library_loader.js";
 import EmptyTypeWidget from "./type_widgets/empty.js";
 import EditableTextTypeWidget from "./type_widgets/editable_text.js";
-import CodeTypeWidget from "./type_widgets/code.js";
+import EditableCodeTypeWidget from "./type_widgets/editable_code.js";
 import FileTypeWidget from "./type_widgets/file.js";
 import ImageTypeWidget from "./type_widgets/image.js";
 import SearchTypeWidget from "./type_widgets/search.js";
@@ -19,6 +19,7 @@ import keyboardActionsService from "../services/keyboard_actions.js";
 import noteCreateService from "../services/note_create.js";
 import DeletedTypeWidget from "./type_widgets/deleted.js";
 import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
+import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
 
 const TPL = `
 <div class="note-detail">
@@ -38,7 +39,8 @@ const typeWidgetClasses = {
     'deleted': DeletedTypeWidget,
     'editable-text': EditableTextTypeWidget,
     'read-only-text': ReadOnlyTextTypeWidget,
-    'code': CodeTypeWidget,
+    'editable-code': EditableCodeTypeWidget,
+    'read-only-code': ReadOnlyCodeTypeWidget,
     'file': FileTypeWidget,
     'image': ImageTypeWidget,
     'search': SearchTypeWidget,
@@ -189,10 +191,23 @@ export default class NoteDetailWidget extends TabAwareWidget {
             }
         }
 
+        if (type === 'code' && !this.tabContext.codePreviewDisabled) {
+            const noteComplement = await this.tabContext.getNoteComplement();
+
+            if (note.hasLabel('readOnly') ||
+                (noteComplement.content && noteComplement.content.length > 10000)) {
+                type = 'read-only-code';
+            }
+        }
+
         if (type === 'text') {
             type = 'editable-text';
         }
 
+        if (type === 'code') {
+            type = 'editable-code';
+        }
+
         if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
             type = 'protected-session';
         }
@@ -276,6 +291,12 @@ export default class NoteDetailWidget extends TabAwareWidget {
         }
     }
 
+    codePreviewDisabledEvent({tabContext}) {
+        if (this.isTab(tabContext.tabId)) {
+            this.refresh();
+        }
+    }
+
     async cutIntoNoteCommand() {
         const note = appContext.tabManager.getActiveTabNote();
 

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

@@ -21,8 +21,8 @@ const TPL = `
     <div class="note-detail-code-editor"></div>
 </div>`;
 
-export default class CodeTypeWidget extends TypeWidget {
+export default class EditableCodeTypeWidget extends TypeWidget {
-    static getType() { return "code"; }
+    static getType() { return "editable-code"; }
 
     doRender() {
         this.$widget = $(TPL);

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

@@ -1,13 +1,9 @@
 import libraryLoader from "../../services/library_loader.js";
 import noteAutocompleteService from '../../services/note_autocomplete.js';
 import mimeTypesService from '../../services/mime_types.js';
-import TypeWidget from "./type_widget.js";
 import utils from "../../services/utils.js";
-import appContext from "../../services/app_context.js";
 import keyboardActionService from "../../services/keyboard_actions.js";
 import treeCache from "../../services/tree_cache.js";
-import linkService from "../../services/link.js";
-import noteContentRenderer from "../../services/note_content_renderer.js";
 import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
 
 const ENABLE_INSPECTOR = false;

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

@@ -0,0 +1,44 @@
+import TypeWidget from "./type_widget.js";
+
+const TPL = `
+<div class="note-detail-read-only-code note-detail-printable">
+    <style>
+    .note-detail-read-only-code {
+        overflow: auto;
+        height: 100%;
+    }
+    
+    .note-detail-read-only-code-content {
+        padding: 10px;
+    }
+    </style>
+
+    <div class="alert alert-warning no-print">
+        Read only code view is shown. <a href="#" class="edit-note">Click here</a> to edit the note.
+    </div>
+
+    <pre class="note-detail-read-only-code-content"></pre>
+</div>`;
+
+export default class ReadOnlyCodeTypeWidget extends TypeWidget {
+    static getType() { return "read-only-code"; }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$content = this.$widget.find('.note-detail-read-only-code-content');
+
+        this.$widget.find('a.edit-note').on('click', () => {
+            this.tabContext.codePreviewDisabled = true;
+
+            this.triggerEvent('codePreviewDisabled', {tabContext: this.tabContext});
+        });
+
+        return this.$widget;
+    }
+
+    async doRefresh(note) {
+        const noteComplement = await this.tabContext.getNoteComplement();
+
+        this.$content.text(noteComplement.content);
+    }
+}

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

@@ -48,4 +48,10 @@ export default class TypeWidget extends TabAwareWidget {
             this.refresh();
         }
     }
+
+    codePreviewDisabledEvent({tabContext}) {
+        if (this.isTab(tabContext.tabId)) {
+            this.refresh();
+        }
+    }
 }