#166 inline markdown import

src/public/javascripts/services/bootstrap.js

@@ -8,7 +8,7 @@ import optionsDialog from '../dialogs/options.js';
 import sqlConsoleDialog from '../dialogs/sql_console.js';
 
 import cloning from './cloning.js';
-import contextMenu from './context_menu.js';
+import contextMenu from './tree_context_menu.js';
 import dragAndDropSetup from './drag_and_drop.js';
 import exportService from './export.js';
 import link from './link.js';

src/public/javascripts/services/library_loader.js

@@ -20,6 +20,8 @@ const CODE_MIRROR = {
 
 const ESLINT = {js: ["libraries/eslint.js"]};
 
+const COMMONMARK = {js: ["libraries/commonmark.min.js"]};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => requireCss(cssUrl));
@@ -61,5 +63,6 @@ export default {
     requireLibrary,
     CKEDITOR,
     CODE_MIRROR,
-    ESLINT
+    ESLINT,
+    COMMONMARK
 }

src/public/javascripts/services/note_detail_text.js

@@ -1,8 +1,14 @@
 import libraryLoader from "./library_loader.js";
 import noteDetailService from './note_detail.js';
+import utils from "./utils.js";
+import infoService from "./info.js";
 
 const $noteDetailText = $('#note-detail-text');
 
+const $markdownImportDialog = $('#markdown-import-dialog');
+const $markdownImportTextarea = $('#markdown-import-textarea');
+const $markdownImportButton = $('#markdown-import-button');
+
 let textEditor = null;
 
 async function show() {
@@ -12,7 +18,16 @@ async function show() {
         // textEditor might have been initialized during previous await so checking again
         // looks like double initialization can freeze CKEditor pretty badly
         if (!textEditor) {
-            textEditor = await BalloonEditor.create($noteDetailText[0], {});
+            textEditor = await BalloonEditor.create($noteDetailText[0], {
+                heading: {
+                    options: [
+                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
+                    ]
+                }
+            });
 
             textEditor.model.document.on('change:data', noteDetailService.noteChanged);
         }
@@ -43,6 +58,59 @@ function getEditor() {
     return textEditor;
 }
 
+async function convertMarkdownToHtml(text) {
+    await libraryLoader.requireLibrary(libraryLoader.COMMONMARK);
+
+    const reader = new commonmark.Parser();
+    const writer = new commonmark.HtmlRenderer();
+    const parsed = reader.parse(text);
+
+    const result = writer.render(parsed);
+
+    const viewFragment = textEditor.data.processor.toView(result);
+    const modelFragment = textEditor.data.toModel(viewFragment);
+
+    textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
+
+    infoService.showMessage("Markdown content has been imported into the document.");
+}
+
+async function importMarkdownInline() {
+    if (utils.isElectron()) {
+        const {clipboard} = require('electron');
+        const text = clipboard.readText();
+
+        convertMarkdownToHtml(text);
+    }
+    else {
+        $("input[name='search-text']").focus();
+
+        glob.activeDialog = $markdownImportDialog;
+
+        $markdownImportDialog.dialog({
+            modal: true,
+            width: 700,
+            height: 500
+        });
+    }
+}
+
+async function sendMarkdownDialog() {
+    const text = $markdownImportTextarea.val();
+
+    $markdownImportDialog.dialog('close');
+
+    await convertMarkdownToHtml(text);
+
+    $markdownImportTextarea.val('');
+}
+
+$markdownImportButton.click(sendMarkdownDialog);
+
+$markdownImportDialog.bind('keydown', 'ctrl+return', sendMarkdownDialog);
+
+window.glob.importMarkdownInline = importMarkdownInline;
+
 export default {
     show,
     getEditor,

src/public/javascripts/services/tree.js

@@ -1,4 +1,4 @@
-import contextMenuService from './context_menu.js';
+import treeContextMenuService from './tree_context_menu.js';
 import dragAndDropSetup from './drag_and_drop.js';
 import linkService from './link.js';
 import messagingService from './messaging.js';
@@ -369,7 +369,7 @@ function initFancyTree(tree) {
         }
     });
 
-    $tree.contextmenu(contextMenuService.contextMenuOptions);
+    $tree.contextmenu(treeContextMenuService.contextMenuOptions);
 }
 
 function getTree() {

src/public/javascripts/services/tree_keybindings.js

@@ -1,7 +1,7 @@
 import noteDetailService from "./note_detail.js";
 import utils from "./utils.js";
 import treeChangesService from "./branches.js";
-import contextMenuService from "./context_menu.js";
+import contextMenuService from "./tree_context_menu.js";
 import treeService from "./tree.js";
 import editBranchPrefixDialog from "../dialogs/branch_prefix.js";
 

src/views/index.ejs

@@ -711,6 +711,14 @@
       </form>
     </div>
 
+    <div id="markdown-import-dialog" title="Markdown import" style="display: none; padding: 20px;">
+      <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+
+      <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+
+      <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+    </div>
+
     <div id="tooltip" style="display: none;"></div>
 
     <script type="text/javascript">