fix "Render note" and "Execute script" buttons + refactoring around data-trigger-command handling

src/public/app/services/app_context.js

@@ -45,10 +45,12 @@ class AppContext extends Component {
 
         $("body").append($renderedWidget);
 
-        $renderedWidget.on('click', "[data-trigger-command]", e => {
+        $renderedWidget.on('click', "[data-trigger-command]", function() {
-            const commandName = $(e.target).attr('data-trigger-command');
+            const commandName = $(this).attr('data-trigger-command');
+            const $component = $(this).closest(".component");
+            const component = $component.prop("component");
 
-            this.triggerCommand(commandName);
+            component.triggerCommand(commandName);
         });
 
         this.tabManager = new TabManager();
@@ -92,6 +94,8 @@ class AppContext extends Component {
             }
         }
 
+        // this might hint at error but sometimes this is used by components which are at different places
+        // in the component tree to communicate with each other
         console.debug(`Unhandled command ${name}, converting to event.`);
 
         return this.triggerEvent(name, data);

src/public/app/services/entrypoints.js

@@ -7,6 +7,7 @@ import Component from "../widgets/component.js";
 import toastService from "./toast.js";
 import noteCreateService from "./note_create.js";
 import ws from "./ws.js";
+import bundleService from "./bundle.js";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -199,4 +200,23 @@ export default class Entrypoints extends Component {
     async openNewWindowCommand() {
         this.openInWindowCommand({notePath: ''});
     }
+
+    async runActiveNoteCommand() {
+        const note = appContext.tabManager.getActiveTabNote();
+
+        // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
+        if (!note || note.type !== 'code') {
+            return;
+        }
+
+        if (note.mime.endsWith("env=frontend")) {
+            await bundleService.getAndExecuteBundle(note.noteId);
+        }
+
+        if (note.mime.endsWith("env=backend")) {
+            await server.post('script/run/' + note.noteId);
+        }
+
+        toastService.showMessage("Note executed");
+    }
 }

src/public/app/services/keyboard_actions.js

@@ -93,8 +93,8 @@ function updateDisplayedShortcuts($container) {
 		}
 	});
 
-	$container.find('button[data-command],a.icon-action[data-command],.kb-in-title').each(async (i, el) => {
+	$container.find('[data-trigger-command]').each(async (i, el) => {
-		const actionName = $(el).attr('data-command');
+		const actionName = $(el).attr('data-trigger-command');
 		const action = await getAction(actionName, true);
 
 		if (action) {

src/public/app/widgets/global_buttons.js

@@ -18,17 +18,14 @@ const WIDGET_TPL = `
 
     <a data-trigger-command="collapseTree"
        title="Collapse note tree" 
-       data-command="collapseTree" 
        class="icon-action bx bx-layer-minus"></a>
 
     <a data-trigger-command="scrollToActiveNote"
        title="Scroll to active note"  
-       data-command="scrollToActiveNote" 
        class="icon-action bx bx-crosshair"></a>
 
     <a data-trigger-command="searchNotes"
        title="Search in notes"
-       data-command="searchNotes"
        class="icon-action bx bx-search"></a>
 </div>
 `;

src/public/app/widgets/run_script_buttons.js

@@ -3,10 +3,12 @@ import TabAwareWidget from "./tab_aware_widget.js";
 const TPL = `
 <div style="display: inline-flex;">
     <button class="btn btn-sm icon-button bx bx-play-circle render-button"
+            data-trigger-command="renderActiveNote"
             title="Render"></button>
     
     <button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
-            title="Execute (Ctrl+Enter)"></button>
+            data-trigger-command="runActiveNote"
+            title="Execute"></button>
 </div>`;
 
 export default class RunScriptButtonsWidget extends TabAwareWidget {
@@ -21,6 +23,6 @@ export default class RunScriptButtonsWidget extends TabAwareWidget {
 
     refreshWithNote(note) {
         this.$renderButton.toggle(note.type === 'render');
-        this.$executeScriptButton.toggle(note.mime.startsWith('application/javascript'));
+        this.$executeScriptButton.toggle(note.type === 'code' && note.mime.startsWith('application/javascript'));
     }
 }

src/public/app/widgets/tab_row.js

@@ -29,11 +29,11 @@ const TAB_TPL = `
   <div class="note-tab-wrapper">
     <div class="note-tab-title"></div>
     <div class="note-tab-drag-handle"></div>
-    <div class="note-tab-close kb-in-title" title="Close tab" data-command="closeActiveTab"><span>×</span></div>
+    <div class="note-tab-close" title="Close tab" data-trigger-command="closeActiveTab"><span>×</span></div>
   </div>
 </div>`;
 
-const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab kb-in-title" data-command="openNewTab" title="Add new tab">+</div>`;
+const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" data-trigger-command="openNewTab" title="Add new tab">+</div>`;
 const FILLER_TPL = `<div class="tab-row-filler">
     <div class="tab-row-border"></div>
 </div>`;
@@ -394,10 +394,13 @@ export default class TabRowWidget extends BasicWidget {
         this.setupDraggabilly();
     }
 
-    setTabCloseEvent($tab) {
+    closeActiveTabCommand({$el}) {
-        $tab.find('.note-tab-close')
+        const tabId = $el.closest(".note-tab").attr('data-tab-id');
-            .on('click', _ => appContext.tabManager.removeTab($tab.attr('data-tab-id')));
 
+        appContext.tabManager.removeTab(tabId);
+    }
+
+    setTabCloseEvent($tab) {
         $tab.on('mousedown', e => {
             if (e.which === 2) {
                 appContext.tabManager.removeTab($tab.attr('data-tab-id'));
@@ -558,8 +561,6 @@ export default class TabRowWidget extends BasicWidget {
         this.$newTab = $(NEW_TAB_BUTTON_TPL);
 
         this.$tabContainer.append(this.$newTab);
-
-        this.$newTab.on('click', _ => this.triggerCommand('openNewTab'));
     }
 
     setupFiller() {

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

@@ -1,9 +1,6 @@
 import libraryLoader from "../../services/library_loader.js";
-import bundleService from "../../services/bundle.js";
-import toastService from "../../services/toast.js";
-import server from "../../services/server.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
 import TypeWidget from "./type_widget.js";
+import keyboardActionService from "../../services/keyboard_actions.js";
 
 const TPL = `
 <div class="note-detail-code note-detail-printable">
@@ -27,11 +24,8 @@ export default class EditableCodeTypeWidget extends TypeWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$editor = this.$widget.find('.note-detail-code-editor');
-        this.$executeScriptButton = this.$widget.find(".execute-script-button");
 
-        keyboardActionService.setElementActionHandler(this.$widget, 'runActiveNote', () => this.executeCurrentNote());
+        keyboardActionService.setupActionsForElement('code-detail', this.$widget, this);
-
-        this.$executeScriptButton.on('click', () => this.executeCurrentNote());
 
         this.initialized = this.initEditor();
 
@@ -106,26 +100,6 @@ export default class EditableCodeTypeWidget extends TypeWidget {
         this.codeEditor.focus();
     }
 
-    async executeCurrentNote() {
-        // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
-        if (this.note.type !== 'code') {
-            return;
-        }
-
-        // make sure note is saved so we load latest changes
-        await this.spacedUpdate.updateNowIfNecessary();
-
-        if (this.note.mime.endsWith("env=frontend")) {
-            await bundleService.getAndExecuteBundle(this.noteId);
-        }
-
-        if (this.note.mime.endsWith("env=backend")) {
-            await server.post('script/run/' + this.noteId);
-        }
-
-        toastService.showMessage("Note executed");
-    }
-
     cleanup() {
         if (this.codeEditor) {
             this.spacedUpdate.allowUpdateWithoutChange(() => {

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

@@ -25,9 +25,6 @@ export default class RenderTypeWidget extends TypeWidget {
         this.$widget = $(TPL);
         this.$noteDetailRenderHelp = this.$widget.find('.note-detail-render-help');
         this.$noteDetailRenderContent = this.$widget.find('.note-detail-render-content');
-        this.$renderButton = this.$widget.find('.render-button');
-
-        this.$renderButton.on('click', () => this.refresh());
 
         return this.$widget;
     }
@@ -46,4 +43,10 @@ export default class RenderTypeWidget extends TypeWidget {
     cleanup() {
         this.$noteDetailRenderContent.empty();
     }
+
+    renderActiveNoteEvent() {
+        if (this.tabContext.isActive()) {
+            this.refresh();
+        }
+    }
 }