diff --git a/src/public/javascripts/dialogs/sql_console.js b/src/public/javascripts/dialogs/sql_console.js index fb351fab5..7ad878361 100644 --- a/src/public/javascripts/dialogs/sql_console.js +++ b/src/public/javascripts/dialogs/sql_console.js @@ -17,26 +17,34 @@ const sqlConsole = (function() { width: $(window).width(), height: $(window).height(), open: function() { - CodeMirror.keyMap.default["Shift-Tab"] = "indentLess"; - CodeMirror.keyMap.default["Tab"] = "indentMore"; - - CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js'; - - codeEditor = CodeMirror($query[0], { - value: "", - viewportMargin: Infinity, - indentUnit: 4, - highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false } - }); - - codeEditor.setOption("mode", "text/x-sqlite"); - CodeMirror.autoLoadMode(codeEditor, "sql"); - - codeEditor.focus(); + initEditor(); } }); } + async function initEditor() { + if (!codeEditor) { + await requireLibrary(CODE_MIRROR); + + CodeMirror.keyMap.default["Shift-Tab"] = "indentLess"; + CodeMirror.keyMap.default["Tab"] = "indentMore"; + + CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js'; + + codeEditor = CodeMirror($query[0], { + value: "", + viewportMargin: Infinity, + indentUnit: 4, + highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false} + }); + + codeEditor.setOption("mode", "text/x-sqlite"); + CodeMirror.autoLoadMode(codeEditor, "sql"); + } + + codeEditor.focus(); + } + async function execute() { const sqlQuery = codeEditor.getValue(); diff --git a/src/public/javascripts/note_editor.js b/src/public/javascripts/note_editor.js index 0f8f43b99..fb16093bc 100644 --- a/src/public/javascripts/note_editor.js +++ b/src/public/javascripts/note_editor.js @@ -124,14 +124,42 @@ const noteEditor = (function() { isNewNoteCreated = true; } - function setContent(content) { + async function setContent(content) { if (currentNote.detail.type === 'text') { + if (!editor) { + await requireLibrary(CKEDITOR); + + editor = await BalloonEditor.create($noteDetail[0], {}); + + editor.document.on('change', noteChanged); + } + // temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49 editor.setData(content ? content : "
"); $noteDetail.show(); } else if (currentNote.detail.type === 'code') { + if (!codeEditor) { + await requireLibrary(CODE_MIRROR); + + CodeMirror.keyMap.default["Shift-Tab"] = "indentLess"; + CodeMirror.keyMap.default["Tab"] = "indentMore"; + + CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js'; + + codeEditor = CodeMirror($("#note-detail-code")[0], { + value: "", + viewportMargin: Infinity, + indentUnit: 4, + matchBrackets: true, + matchTags: { bothTags: true }, + highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false } + }); + + codeEditor.on('change', noteChanged); + } + $noteDetailCode.show(); // this needs to happen after the element is shown, otherwise the editor won't be refresheds @@ -196,7 +224,7 @@ const noteEditor = (function() { $attachmentFileType.text(currentNote.detail.mime); } else { - setContent(currentNote.detail.content); + await setContent(currentNote.detail.content); } noteChangeDisabled = false; @@ -312,34 +340,6 @@ const noteEditor = (function() { noteTree.setNoteTitle(getCurrentNoteId(), title); }); - BalloonEditor - .create(document.querySelector('#note-detail'), { - }) - .then(edit => { - editor = edit; - - editor.document.on('change', noteChanged); - }) - .catch(error => { - console.error(error); - }); - - CodeMirror.keyMap.default["Shift-Tab"] = "indentLess"; - CodeMirror.keyMap.default["Tab"] = "indentMore"; - - CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js'; - - codeEditor = CodeMirror($("#note-detail-code")[0], { - value: "", - viewportMargin: Infinity, - indentUnit: 4, - matchBrackets: true, - matchTags: { bothTags: true }, - highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false } - }); - - codeEditor.on('change', noteChanged); - // so that tab jumps from note title (which has tabindex 1) $noteDetail.attr("tabindex", 2); }); diff --git a/src/public/javascripts/utils.js b/src/public/javascripts/utils.js index eec8fa13e..1f98fab33 100644 --- a/src/public/javascripts/utils.js +++ b/src/public/javascripts/utils.js @@ -131,4 +131,57 @@ function formatAttribute(attr) { } return str; +} + +const CKEDITOR = { "js": ["libraries/ckeditor/ckeditor.js"] }; + +const CODE_MIRROR = { + js: [ + "libraries/codemirror/codemirror.js", + "libraries/codemirror/addon/mode/loadmode.js", + "libraries/codemirror/addon/fold/xml-fold.js", + "libraries/codemirror/addon/edit/matchbrackets.js", + "libraries/codemirror/addon/edit/matchtags.js", + "libraries/codemirror/addon/search/match-highlighter.js", + "libraries/codemirror/mode/meta.js" + ], + css: [ + "libraries/codemirror/codemirror.css" + ] +}; + +async function requireLibrary(library) { + if (library.css) { + library.css.map(cssUrl => requireCss(cssUrl)); + } + + if (library.js) { + for (const scriptUrl of library.js) { + await requireScript(scriptUrl); + } + } +} + +async function requireScript(url) { + const scripts = Array + .from(document.querySelectorAll('script')) + .map(scr => scr.src); + + if (!scripts.includes(url)) { + return $.ajax({ + url: url, + dataType: "script", + cache: true + }) + } +} + +async function requireCss(url) { + const css = Array + .from(document.querySelectorAll('link')) + .map(scr => scr.href); + + if (!css.includes(url)) { + $('head').append($('').attr('href', url)); + } } \ No newline at end of file diff --git a/src/views/index.ejs b/src/views/index.ejs index d6ad8f59f..b039a998f 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -476,8 +476,6 @@ - - @@ -485,15 +483,6 @@ - - - - - - - - -