added "edit" button into ribbon button container

src/public/app/layouts/desktop_layout.js

@@ -39,6 +39,7 @@ import LinkMapWidget from "../widgets/ribbon_widgets/link_map.js";
 import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js";
 import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
+import EditButton from "../widgets/buttons/edit_button.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -128,6 +129,7 @@ export default class DesktopLayout {
                                         .ribbon(new LinkMapWidget())
                                         .ribbon(new SimilarNotesWidget())
                                         .ribbon(new NoteInfoWidget())
+                                        .button(new EditButton())
                                         .button(new ButtonWidget()
                                             .icon('bx bx-history')
                                             .title("Note Revisions")

src/public/app/services/note_context.js

@@ -40,8 +40,8 @@ class NoteContext extends Component {
         this.notePath = resolvedNotePath;
         this.noteId = treeService.getNoteIdFromNotePath(resolvedNotePath);
 
-        this.textPreviewDisabled = false;
+        this.readOnlyTemporarilyDisabled = false;
-        this.codePreviewDisabled = false;
+        this.readOnlyTemporarilyDisabled = false;
 
         this.saveToRecentNotes(resolvedNotePath);
 
@@ -177,6 +177,28 @@ class NoteContext extends Component {
         });
     }
 
+    async isReadOnly() {
+        if (this.readOnlyTemporarilyDisabled) {
+            return false;
+        }
+
+        if (this.note.type !== 'text' && this.note.type !== 'code') {
+            return false;
+        }
+
+        if (this.note.hasLabel('readOnly')) {
+            return true;
+        }
+
+        const noteComplement = await this.getNoteComplement();
+
+        const SIZE_LIMIT = this.note.type === 'text' ? 10000 : 30000;
+
+        return noteComplement.content
+            && noteComplement.content.length > SIZE_LIMIT
+            && !this.note.hasLabel('autoReadOnlyDisabled');
+    }
+
     async entitiesReloadedEvent({loadResults}) {
         if (loadResults.isNoteReloaded(this.noteId)) {
             const note = await froca.getNote(this.noteId);

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

@@ -0,0 +1,31 @@
+import ButtonWidget from "./button_widget.js";
+
+export default class EditButton extends ButtonWidget {
+    isEnabled() {
+        return super.isEnabled() && this.noteContext;
+    }
+
+    constructor() {
+        super();
+
+        this.icon("bx-edit-alt")
+            .title("Edit this note")
+            .titlePlacement("bottom")
+            .onClick(widget => {
+                this.noteContext.readOnlyTemporarilyDisabled = true;
+
+                this.triggerEvent('readOnlyTemporarilyDisabled', {noteContext: this.noteContext});
+
+                this.refresh();
+            });
+    }
+
+    async refreshWithNote(note) {
+        // can't do this in isEnabled() since isReadOnly is async
+        this.toggleInt(await this.noteContext.isReadOnly());
+
+        console.log("await this.noteContext.isReadOnly()", await this.noteContext.isReadOnly());
+
+        await super.refreshWithNote(note);
+    }
+}

src/public/app/widgets/note_detail.js

@@ -150,27 +150,13 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 
         let type = note.type;
 
-        if (type === 'text' && !this.noteContext.textPreviewDisabled) {
+        if (type === 'text' && await this.noteContext.isReadOnly()) {
-            const noteComplement = await this.noteContext.getNoteComplement();
-
-            if (note.hasLabel('readOnly') ||
-                (noteComplement.content
-                    && noteComplement.content.length > 10000)
-                    && !note.hasLabel('autoReadOnlyDisabled')) {
             type = 'read-only-text';
         }
-        }
 
-        if (type === 'code' && !this.noteContext.codePreviewDisabled) {
+        if (type === 'code' && await this.noteContext.isReadOnly()) {
-            const noteComplement = await this.noteContext.getNoteComplement();
-
-            if (note.hasLabel('readOnly') ||
-                (noteComplement.content
-                    && noteComplement.content.length > 30000)
-                    && !note.hasLabel('autoReadOnlyDisabled')) {
             type = 'read-only-code';
         }
-        }
 
         if (type === 'text') {
             type = 'editable-text';
@@ -279,13 +265,13 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         return this.spacedUpdate.isAllSavedAndTriggerUpdate();
     }
 
-    textPreviewDisabledEvent({noteContext}) {
+    readOnlyTemporarilyDisabledEvent({noteContext}) {
         if (this.isNoteContext(noteContext.ntxId)) {
             this.refresh();
         }
     }
 
-    codePreviewDisabledEvent({noteContext}) {
+    readOnlyTemporarilyDisabledEvent({noteContext}) {
         if (this.isNoteContext(noteContext.ntxId)) {
             this.refresh();
         }

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

@@ -21,9 +21,6 @@ const TPL = `
     }
     </style>
 
-    <div class="alert alert-warning no-print edit-code-note-button bx bx-edit-alt"
-         title="Edit this note"></div>
-
     <pre class="note-detail-read-only-code-content"></pre>
 </div>`;
 
@@ -33,12 +30,6 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$content = this.$widget.find('.note-detail-read-only-code-content');
-
-        this.$widget.find('.edit-code-note-button').on('click', () => {
-            this.noteContext.codePreviewDisabled = true;
-
-            this.triggerEvent('codePreviewDisabled', {noteContext: this.noteContext});
-        });
     }
 
     async doRefresh(note) {

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

@@ -24,7 +24,6 @@ const TPL = `
         padding-left: 24px;
         padding-top: 10px;
         font-family: var(--detail-text-font-family);
-        position: relative;
         min-height: 50px;
     }
         
@@ -53,9 +52,6 @@ const TPL = `
     }
     </style>
 
-    <div class="no-print edit-text-note-button bx bx-edit-alt"
-         title="Edit this note"></div>
-
     <div class="note-detail-readonly-text-content ck-content"></div>
 </div>
 `;
@@ -68,12 +64,6 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
 
         this.$content = this.$widget.find('.note-detail-readonly-text-content');
 
-        this.$widget.find('.edit-text-note-button').on('click', () => {
-            this.noteContext.textPreviewDisabled = true;
-
-            this.triggerEvent('textPreviewDisabled', {noteContext: this.noteContext});
-        });
-
         this.setupImageOpening(true);
 
         super.doRender();

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

@@ -41,13 +41,13 @@ export default class TypeWidget extends NoteContextAwareWidget {
 
     focus() {}
 
-    textPreviewDisabledEvent({noteContext}) {
+    readOnlyTemporarilyDisabledEvent({noteContext}) {
         if (this.isNoteContext(noteContext.ntxId)) {
             this.refresh();
         }
     }
 
-    codePreviewDisabledEvent({noteContext}) {
+    readOnlyTemporarilyDisabledEvent({noteContext}) {
         if (this.isNoteContext(noteContext.ntxId)) {
             this.refresh();
         }