render notes can be edited and can contain HTML markup

db/migrations/0095__mime_type_for_render.sql

@@ -0,0 +1 @@
+UPDATE notes SET mime = 'text/html' WHERE type = 'render';

src/entities/note.js

@@ -40,7 +40,7 @@ class Note extends Entity {
     }
 
     isHtml() {
-        return (this.type === "code" || this.type === "file") && this.mime === "text/html";
+        return (this.type === "code" || this.type === "file" || this.type === "render") && this.mime === "text/html";
     }
 
     getScriptEnv() {

src/public/javascripts/services/note_detail_code.js

@@ -64,24 +64,27 @@ function focus() {
 }
 
 async function executeCurrentNote() {
-    if (noteDetailService.getCurrentNoteType() === 'code') {
-        // make sure note is saved so we load latest changes
-        await noteDetailService.saveNoteIfChanged();
-
-        const currentNote = noteDetailService.getCurrentNote();
-
-        if (currentNote.mime.endsWith("env=frontend")) {
-            const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId());
-
-            bundleService.executeBundle(bundle);
-        }
-
-        if (currentNote.mime.endsWith("env=backend")) {
-            await server.post('script/run/' + noteDetailService.getCurrentNoteId());
-        }
-
-        infoService.showMessage("Note executed");
+    // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
+    if (noteDetailService.getCurrentNoteType() !== 'code') {
+        return;
     }
+
+    // make sure note is saved so we load latest changes
+    await noteDetailService.saveNoteIfChanged();
+
+    const currentNote = noteDetailService.getCurrentNote();
+
+    if (currentNote.mime.endsWith("env=frontend")) {
+        const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId());
+
+        bundleService.executeBundle(bundle);
+    }
+
+    if (currentNote.mime.endsWith("env=backend")) {
+        await server.post('script/run/' + noteDetailService.getCurrentNoteId());
+    }
+
+    infoService.showMessage("Note executed");
 }
 
 $(document).bind('keydown', "ctrl+return", executeCurrentNote);

src/public/javascripts/services/note_detail_render.js

@@ -1,12 +1,51 @@
 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 $renderButton = $('#render-button');
+
+let codeEditorInitialized;
 
 async function show() {
+    codeEditorInitialized = false;
+
     $noteDetailRender.show();
 
+    await render();
+}
+
+$toggleEditButton.click(() => {
+    if ($noteDetailCode.is(":visible")) {
+        $noteDetailCode.hide();
+    }
+    else {
+        if (!codeEditorInitialized) {
+            noteDetailCodeService.show();
+
+            codeEditorInitialized = true;
+        }
+        else {
+            $noteDetailCode.show();
+        }
+    }
+});
+
+$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);
@@ -14,8 +53,10 @@ async function show() {
     await bundleService.executeBundle(bundle);
 }
 
+$(document).bind('keydown', "ctrl+return", render);
+
 export default {
     show,
-    getContent: () => null,
+    getContent: noteDetailCodeService.getContent,
     focus: () => null
 }

src/public/javascripts/services/note_type.js

@@ -4,6 +4,9 @@ import server from './server.js';
 import infoService from "./info.js";
 
 const $executeScriptButton = $("#execute-script-button");
+const $toggleEditButton = $('#toggle-edit-button');
+const $renderButton = $('#render-button');
+
 const noteTypeModel = new NoteTypeModel();
 
 function NoteTypeModel() {
@@ -107,7 +110,7 @@ function NoteTypeModel() {
 
     this.selectRender = function() {
         self.type('render');
-        self.mime('');
+        self.mime('text/html');
 
         save();
     };
@@ -128,6 +131,9 @@ function NoteTypeModel() {
 
     this.updateExecuteScriptButtonVisibility = function() {
         $executeScriptButton.toggle(self.mime().startsWith('application/javascript'));
+
+        $toggleEditButton.toggle(self.type() === 'render');
+        $renderButton.toggle(self.type() === 'render');
     }
 }
 

src/public/stylesheets/style.css

@@ -279,6 +279,10 @@ div.ui-tooltip {
     min-height: 200px;
 }
 
+#note-detail-render {
+    min-height: 200px;
+}
+
 .CodeMirror {
     font-family: "Liberation Mono", "Lucida Console", monospace;
     height: auto;

src/services/app_info.js

@@ -3,7 +3,7 @@
 const build = require('./build');
 const packageJson = require('../../package');
 
-const APP_DB_VERSION = 94;
+const APP_DB_VERSION = 95;
 
 module.exports = {
     appVersion: packageJson.version,

src/services/script.js

@@ -73,7 +73,7 @@ function getParams(params) {
 }
 
 async function getScriptBundle(note, root = true, scriptEnv = null, includedNoteIds = []) {
-    if (!note.isJavaScript() && !note.isHtml() && note.type !== 'render') {
+    if (!note.isJavaScript() && !note.isHtml()) {
         return;
     }
 

src/views/index.ejs

@@ -95,6 +95,14 @@
 
           <span id="note-id-display" title="Note ID"></span>
 
+          <button class="btn btn-sm"
+                  style="display: none; margin-right: 10px"
+                  id="toggle-edit-button">Toggle edit</button>
+
+          <button class="btn btn-sm"
+                  style="display: none; margin-right: 10px"
+                  id="render-button">Render <kbd>Ctrl+Enter</kbd></button>
+
           <button class="btn btn-sm"
                   style="display: none; margin-right: 10px"
                   id="execute-script-button">Execute <kbd>Ctrl+Enter</kbd></button>