Make syntax loading dynamic

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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 {