diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-07-01 17:46:55 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-07-02 09:21:50 +0300 |
commit | 2ffdbe9cfb13419bb189497392dd8255e6a6a1fc (patch) | |
tree | e05e4bb83428dfc3472aef3da28c44f1aae28cf3 | |
parent | d85640fa6ffc6ffe277830580ab693e069ea088b (diff) |
Make syntax loading dynamic
Signed-off-by: Julius Härtl <jus@bitgrid.net>
-rw-r--r-- | src/EditorFactory.js | 23 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 11 |
2 files changed, 23 insertions, 11 deletions
diff --git a/src/EditorFactory.js b/src/EditorFactory.js index 2026a56c8..adbafbaa1 100644 --- a/src/EditorFactory.js +++ b/src/EditorFactory.js @@ -39,10 +39,21 @@ import { Image, PlainTextDocument } from './nodes' import MarkdownIt from 'markdown-it' import { MarkdownSerializer, defaultMarkdownSerializer } from 'prosemirror-markdown' -import cpp from 'highlight.js/lib/languages/cpp' -import javascript from 'highlight.js/lib/languages/javascript' -import css from 'highlight.js/lib/languages/css' -const createEditor = ({ content, onUpdate, extensions, enableRichEditing }) => { + +const loadSyntaxHighlight = async (languages) => { + let modules = {} + for (let i = 0; i < languages.length; i++) { + const lang = await import('highlight.js/lib/languages/' + languages[i]) + modules[languages[i]] = lang.default + } + if (Object.keys(modules).length === 0 && modules.constructor === Object) { + return undefined + } + return { languages: modules } +} + +const createEditor = async ({ content, onUpdate, extensions, enableRichEditing, languages }) => { + const highlight = await loadSyntaxHighlight(languages) let richEditingExtensions = [] if (enableRichEditing) { richEditingExtensions = [ @@ -66,9 +77,7 @@ const createEditor = ({ content, onUpdate, extensions, enableRichEditing }) => { new PlainTextDocument(), new Text(), new CodeBlockHighlight({ - languages: { - cpp, css, javascript - } + ...highlight }) ] } diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 21b68a0ee..7f4235e6f 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -227,7 +227,7 @@ export default { console.debug('serialized document', { markdown }) return markdown } - const file = serializePlainText(this.tipta) + const file = serializePlainText(this.tiptap) console.debug('serialized document', { file }) return file @@ -252,7 +252,7 @@ export default { }) .on('loaded', ({ documentSource }) => { - this.tiptap = createEditor({ + createEditor({ content: this.isRichEditor ? markdownit.render(documentSource) : '<pre>' + window.escapeHTML(documentSource) + '</pre>', onUpdate: ({ state }) => { this.syncService.state = state @@ -278,9 +278,12 @@ export default { } }) ], - enableRichEditing: this.isRichEditor + enableRichEditing: this.isRichEditor, + languages: ['cpp', 'css', 'php'] + }).then(editor => { + this.tiptap = editor + this.syncService.state = this.tiptap.state }) - this.syncService.state = this.tiptap.state }) .on('sync', ({ steps, document }) => { try { |