use relations to pick note to render, fixes #141

src/public/javascripts/dialogs/attributes.js

@@ -170,7 +170,7 @@ function AttributesModel() {
 
         infoService.showMessage("Attributes have been saved.");
 
-        noteDetailService.loadAttributes();
+        noteDetailService.refreshAttributes();
     };
 
     function addLastEmptyRow() {

src/public/javascripts/services/note_detail.js

@@ -38,6 +38,8 @@ let noteChangeDisabled = false;
 
 let isNoteChanged = false;
 
+let attributePromise;
+
 const components = {
     'code': noteDetailCode,
     'text': noteDetailText,
@@ -147,6 +149,7 @@ async function handleProtectedSession() {
 
 async function loadNoteDetail(noteId) {
     currentNote = await loadNote(noteId);
+    refreshAttributes(); // needs to happend after loading the note itself because it references current noteId
 
     if (isNewNoteCreated) {
         isNewNoteCreated = false;
@@ -191,13 +194,15 @@ async function loadNoteDetail(noteId) {
 
     await bundleService.executeRelationBundles(getCurrentNote(), 'runOnNoteView');
 
-    const attributes = await loadAttributes();
+    await showAttributes();
 
-    const hideChildrenOverview = attributes.some(attr => attr.type === 'label' && attr.name === 'hideChildrenOverview');
-    await showChildrenOverview(hideChildrenOverview);
+    await showChildrenOverview();
 }
 
-async function showChildrenOverview(hideChildrenOverview) {
+async function showChildrenOverview() {
+    const attributes = await attributePromise;
+    const hideChildrenOverview = attributes.some(attr => attr.type === 'label' && attr.name === 'hideChildrenOverview');
+
     if (hideChildrenOverview) {
         $childrenOverview.hide();
         return;
@@ -222,13 +227,23 @@ async function showChildrenOverview(hideChildrenOverview) {
     $childrenOverview.show();
 }
 
-async function loadAttributes() {
+async function refreshAttributes() {
+    attributePromise = server.get('notes/' + getCurrentNoteId() + '/attributes');
+
+    await showAttributes();
+}
+
+async function getAttributes() {
+    return await attributePromise;
+}
+
+async function showAttributes() {
     $promotedAttributesContainer.empty();
     $attributeList.hide();
 
     const noteId = getCurrentNoteId();
 
-    const attributes = await server.get('notes/' + noteId + '/attributes');
+    const attributes = await attributePromise;
 
     const promoted = attributes.filter(attr =>
         (attr.type === 'label-definition' || attr.type === 'relation-definition')
@@ -525,7 +540,9 @@ export default {
     getCurrentNoteId,
     newNoteCreated,
     focus,
-    loadAttributes,
+    getAttributes,
+    showAttributes,
+    refreshAttributes,
     saveNote,
     saveNoteIfChanged,
     noteChanged

src/public/javascripts/services/note_detail_render.js

@@ -1,73 +1,38 @@
 import bundleService from "./bundle.js";
 import server from "./server.js";
 import noteDetailService from "./note_detail.js";
-import noteDetailCodeService from "./note_detail_code.js";
 
-const $noteDetailCode = $('#note-detail-code');
 const $noteDetailRender = $('#note-detail-render');
-const $toggleEditButton = $('#toggle-edit-button');
+const $noteDetailRenderHelp = $('#note-detail-render-help');
+const $noteDetailRenderContent = $('#note-detail-render-content');
 const $renderButton = $('#render-button');
 
-let codeEditorInitialized;
+async function render() {
+    const attributes = await noteDetailService.getAttributes();
+    const renderNotes = attributes.filter(attr =>
+        attr.type === 'relation'
+        && attr.name === 'renderNote'
+        && !!attr.value);
 
-async function show() {
-    codeEditorInitialized = false;
+    $noteDetailRender.show();
 
-    $noteDetailRender.empty().show();
+    $noteDetailRenderContent.empty();
+    $noteDetailRenderContent.toggle(renderNotes.length > 0);
+    $noteDetailRenderHelp.toggle(renderNotes.length === 0);
 
-    await render();
-}
+    for (const renderNote of renderNotes) {
+        const bundle = await server.get('script/bundle/' + renderNote.value);
 
-async function toggleEdit() {
-    if ($noteDetailCode.is(":visible")) {
-        $noteDetailCode.hide();
-    }
-    else {
-        if (!codeEditorInitialized) {
-            await noteDetailCodeService.show();
+        $noteDetailRenderContent.append(bundle.html);
 
-            // because we can't properly scroll only the editor without scrolling the rendering
-            // we limit its height
-            $noteDetailCode.find('.CodeMirror').css('height', '300');
-
-            codeEditorInitialized = true;
-        }
-        else {
-            $noteDetailCode.show();
-        }
+        await bundleService.executeBundle(bundle);
     }
 }
 
-$toggleEditButton.click(toggleEdit);
-
 $renderButton.click(render);
 
-async function render() {
-    // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
-    if (noteDetailService.getCurrentNoteType() !== 'render') {
-        return;
-    }
-
-    if (codeEditorInitialized) {
-        await noteDetailService.saveNoteIfChanged();
-    }
-
-    const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId());
-
-    $noteDetailRender.html(bundle.html);
-
-    // if the note is empty, it doesn't make sense to do render-only since nothing will be rendered
-    if (!bundle.html.trim()) {
-        toggleEdit();
-    }
-
-    await bundleService.executeBundle(bundle);
-}
-
-$(document).bind('keydown', "ctrl+return", render);
-
 export default {
-    show,
-    getContent: noteDetailCodeService.getContent,
+    show: render,
+    getContent: () => "",
     focus: () => null
 }

src/public/stylesheets/style.css

@@ -434,7 +434,7 @@ html.theme-dark body {
     margin: auto;
 }
 
-#note-detail-promoted-attributes td, note-detail-promoted-attributes th {
+#note-detail-promoted-attributes td, #note-detail-promoted-attributes th {
     padding: 5px;
 }
 
@@ -453,4 +453,9 @@ table.promoted-attributes-in-tooltip {
 
 table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th {
     padding: 10px;
+}
+
+#note-detail-render-help {
+    margin: 50px;
+    padding: 20px;
 }

src/services/attributes.js

@@ -25,7 +25,8 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'relation', name: 'runOnChildNoteCreation' },
     { type: 'relation', name: 'runOnAttributeCreation' },
     { type: 'relation', name: 'runOnAttributeChange' },
-    { type: 'relation', name: 'template' }
+    { type: 'relation', name: 'template' },
+    { type: 'relation', name: 'renderNote' }
 ];
 
 async function getNotesWithLabel(name, value) {

src/views/index.ejs

@@ -114,14 +114,9 @@
           <div class="hide-toggle" style="display: flex; align-items: center;">
             <span id="note-id-display" title="Note ID"></span>
 
-            <button class="btn btn-sm icon-button"
-                    style="display: none; margin-right: 10px; background-image: url('/images/icons/edit-20.png');"
-                    title="Toggle edit"
-                    id="toggle-edit-button"></button>
-
             <button class="btn btn-sm icon-button"
                     style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
-                    title="Render (Ctrl+Enter)"
+                    title="Render"
                     id="render-button"></button>
 
             <button class="btn btn-sm icon-button"
@@ -228,7 +223,15 @@
 
           <div id="note-detail-code" class="note-detail-component"></div>
 
-          <div id="note-detail-render" class="note-detail-component"></div>
+          <div id="note-detail-render" class="note-detail-component">
+            <div id="note-detail-render-help" class="alert alert-warning">
+              <p><strong>This help note is shown because this note of type Render HTML doesn't have required relation to function properly.</strong></p>
+
+              <p>Render HTML note type is used for <a href="https://github.com/zadam/trilium/wiki/Scripts">scripting</a>. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a relation (in <a class="show-attributes-button">Attributes dialog</a>) called "renderNote" pointing to the HTML note to render. Once that's defined you can click on the "play" button to render.</p>
+            </div>
+
+            <div id="note-detail-render-content"></div>
+          </div>
 
           <div id="note-detail-file" class="note-detail-component">
             <table id="file-table">