upgrade: syntax highlighting with tiptap2

Signed-off-by: Max <max@nextcloud.com>

3 files changed, 14 insertions, 14 deletions

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index 7485021f4..9b7ae8817 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -28,6 +28,7 @@ import Blockquote from '@tiptap/extension-blockquote'
 import Codeblock from '@tiptap/extension-code-block'
 import Placeholder from '@tiptap/extension-placeholder'
 import OrderedList from '@tiptap/extension-ordered-list'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { Editor } from '@tiptap/core'
 import { Strong, Italic, Strike, Link, Underline } from './marks'
 import {
@@ -39,25 +40,23 @@ import {
 } from './nodes'
 import { Markdown, Emoji } from './extensions'
 import { translate as t } from '@nextcloud/l10n'
+import { lowlight } from 'lowlight/lib/core'
 
 import 'proxy-polyfill'
 
 const loadSyntaxHighlight = async (language) => {
-	const languages = [language]
-	const modules = {}
-	for (let i = 0; i < languages.length; i++) {
+	const list = lowlight.listLanguages()
+	console.info(list)
+	if (!lowlight.listLanguages().includes(language)) {
 		try {
-			const lang = await import(/* webpackChunkName: "highlight/[request]" */'highlight.js/lib/languages/' + languages[i])
-			modules[languages[i]] = lang.default
+			const syntax = await import(/* webpackChunkName: "highlight/[request]" */'highlight.js/lib/languages/' + language)
+			lowlight.registerLanguage(language, syntax.default)
 		} catch (e) {
 			// No matching highlighing found, fallback to none
-			return undefined
+			console.debug(e)
 		}
 	}
-	if (Object.keys(modules).length === 0 && modules.constructor === Object) {
-		return undefined
-	}
-	return { languages: modules }
+	return lowlight
 }
 
 const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, languages, currentDirectory }) => {
@@ -91,8 +90,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 		richEditingExtensions = [
 			PlainTextDocument,
 			Codeblock,
-			// FIXME: Do we want to use CodeBlockLowlight instead?
-			// new CodeBlockHighlight({ ...languages, }),
+			CodeBlockLowlight.configure({ lowlight }),
 		]
 	}
 	extensions = extensions || []
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 1828998d4..9e8a0d25f 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -328,7 +328,8 @@ export default {
 					const content = this.isRichEditor
 						? markdownit.render(documentSource)
 						: '<pre>' + escapeHtml(documentSource) + '</pre>'
-					loadSyntaxHighlight(extensionHighlight[this.fileExtension] || this.fileExtension).then((languages) => {
+					const language = extensionHighlight[this.fileExtension] || this.fileExtension
+					loadSyntaxHighlight(language).then(lowlight => {
 						this.tiptap = createEditor({
 							content,
 							onCreate: ({ editor }) => {
@@ -384,7 +385,7 @@ export default {
 								}),
 							],
 							enableRichEditing: this.isRichEditor,
-							languages,
+							lowlight,
 							currentDirectory: this.currentDirectory,
 						})
 						this.tiptap.on('focus', () => {
diff --git a/src/helpers/mappings.js b/src/helpers/mappings.js
index c0efaacb6..bbee0ac8c 100644
--- a/src/helpers/mappings.js
+++ b/src/helpers/mappings.js
@@ -77,6 +77,7 @@ const extensionHighlight = {
 	'sublime-project': 'json',
 	'sublime-settings': 'json',
 	'sublime-workspace': 'json',
+	js: 'javascript',
 	mk: 'makefile',
 	mak: 'makefile',
 	md: 'markdown',