new note type: render HTML note

public/javascripts/note_editor.js

@@ -4,6 +4,7 @@ const noteEditor = (function() {
     const noteTitleEl = $("#note-title");
     const noteDetailEl = $('#note-detail');
     const noteDetailCodeEl = $('#note-detail-code');
+    const noteDetailRenderEl = $('#note-detail-render');
     const protectButton = $("#protect-button");
     const unprotectButton = $("#unprotect-button");
     const noteDetailWrapperEl = $("#note-detail-wrapper");
@@ -71,6 +72,9 @@ const noteEditor = (function() {
         else if (note.detail.type === 'code') {
             note.detail.note_text = codeEditor.getValue();
         }
+        else if (note.detail.type === 'render') {
+            // nothing
+        }
         else {
             throwError("Unrecognized type: " + note.detail.type);
         }
@@ -140,10 +144,12 @@ const noteEditor = (function() {
 
             noteDetailEl.show();
             noteDetailCodeEl.hide();
+            noteDetailRenderEl.hide();
         }
         else if (currentNote.detail.type === 'code') {
             noteDetailEl.hide();
             noteDetailCodeEl.show();
+            noteDetailRenderEl.hide();
 
             // this needs to happen after the element is shown, otherwise the editor won't be refresheds
             codeEditor.setValue(currentNote.detail.note_text);
@@ -155,6 +161,15 @@ const noteEditor = (function() {
                 CodeMirror.autoLoadMode(codeEditor, info.mode);
             }
         }
+        else if (currentNote.detail.type === 'render') {
+            noteDetailEl.hide();
+            noteDetailCodeEl.hide();
+            noteDetailRenderEl.show();
+
+            const subTree = await server.get('script/subtree/' + getCurrentNoteId());
+
+            noteDetailRenderEl.html(subTree);
+        }
         else {
             throwError("Unrecognized type " + currentNote.detail.type);
         }
@@ -185,6 +200,9 @@ const noteEditor = (function() {
         else if (note.detail.type === 'code') {
             codeEditor.focus();
         }
+        else if (note.detail.type === 'render') {
+            // do nothing
+        }
         else {
             throwError('Unrecognized type: ' + note.detail.type);
         }

public/javascripts/note_type.js

@@ -62,6 +62,9 @@ const noteType = (function() {
                     return found ? found.title : mime;
                 }
             }
+            else if (type === 'render') {
+                return 'Render HTML note';
+            }
             else {
                 throwError('Unrecognized type: ' + type);
             }
@@ -86,6 +89,13 @@ const noteType = (function() {
             save();
         };
 
+        this.selectRender = function() {
+            self.type('render');
+            self.mime('');
+
+            save();
+        };
+
         this.selectCode = function() {
             self.type('code');
             self.mime('');

routes/api/notes.js

@@ -93,10 +93,10 @@ router.put('/:noteId/protect-sub-tree/:isProtected', auth.checkApiAuth, wrap(asy
     res.send({});
 }));
 
-router.put('/:noteId/type/:type/mime/:mime', auth.checkApiAuth, wrap(async (req, res, next) => {
+router.put(/\/(.*)\/type\/(.*)\/mime\/(.*)/, auth.checkApiAuth, wrap(async (req, res, next) => {
-    const noteId = req.params.noteId;
+    const noteId = req.params[0];
-    const type = req.params.type;
+    const type = req.params[1];
-    const mime = req.params.mime;
+    const mime = req.params[2];
     const sourceId = req.headers.source_id;
 
     await sql.doInTransaction(async () => {

routes/api/script.js

@@ -32,7 +32,7 @@ async function getSubTreeScripts(parentId, includedNoteIds, dataKey) {
                                      FROM notes JOIN notes_tree USING(note_id)
                                      WHERE notes_tree.is_deleted = 0 AND notes.is_deleted = 0
                                            AND notes_tree.parent_note_id = ? AND notes.type = 'code'
-                                           AND notes.mime = 'application/javascript'`, [parentId]);
+                                           AND (notes.mime = 'application/javascript' OR notes.mime = 'text/html')`, [parentId]);
 
     let script = "\r\n";
 
@@ -54,9 +54,7 @@ async function getSubTreeScripts(parentId, includedNoteIds, dataKey) {
             child.note_text = data_encryption.decryptString(dataKey, data_encryption.noteTextIv(child.note_id), child.note_text);
         }
 
-        script += '// start of script ' + child.note_title + '\r\n';
         script += child.note_text + "\r\n";
-        script += '// end of script ' + child.note_title + '\r\n\r\n';
     }
 
     return script;

services/consistency_checks.js

@@ -214,7 +214,7 @@ async function runAllChecks() {
           FROM 
             notes
           WHERE 
-            type != 'text' AND type != 'code'`,
+            type != 'text' AND type != 'code' AND type != 'render'`,
         "Note has invalid type", errorList);
 
     await runSyncRowChecks("notes", "note_id", errorList);

views/index.ejs

@@ -108,6 +108,8 @@
             <ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
               <li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></li>
               <li role="separator" class="divider"></li>
+              <li data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">&check;</span> <strong>Render HTML note</strong></li>
+              <li role="separator" class="divider"></li>
               <li data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></li>
               <!-- ko foreach: codeMimeTypes -->
               <li data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></li>
@@ -133,6 +135,8 @@
         <div id="note-detail"></div>
 
         <div id="note-detail-code"></div>
+
+        <div id="note-detail-render"></div>
       </div>
     </div>