refactor(Editor): load syntax highlighting in editor factory

Signed-off-by: Max <[email protected]>

Author: max-nextcloud

src/EditorFactory.js

@@ -27,26 +27,11 @@ import { lowlight } from 'lowlight/lib/core.js'
 import hljs from 'highlight.js/lib/core'
 
 import { logger } from './helpers/logger.js'
+import { extensionHighlight } from './helpers/mappings.js'
 import { FocusTrap, Mention, PlainText, RichText } from './extensions/index.js'
 import { PlainTextLowlight } from './nodes/PlainTextLowlight.js'
 
-export const loadSyntaxHighlight = async (language) => {
-	const list = hljs.listLanguages()
-	logger.debug('Supported languages', { list })
-	if (!lowlight.listLanguages().includes(language)) {
-		try {
-			logger.debug('Loading language', language)
-			// eslint-disable-next-line n/no-missing-import
-			const syntax = await import(/* webpackChunkName: "highlight/[request]" */`../node_modules/highlight.js/lib/languages/${language}.js`)
-			lowlight.registerLanguage(language, syntax.default)
-		} catch (error) {
-			// fallback to none
-			logger.debug('No matching highlighing found', { error })
-		}
-	}
-}
-
-export const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded = false } = {}) => {
+export const createRichEditor = async ({ extensions = [], session, relativePath, isEmbedded = false } = {}) => {
 	 return _createEditor([
 		FocusTrap,
 		RichText.configure({
@@ -64,7 +49,14 @@ export const createRichEditor = ({ extensions = [], session, relativePath, isEmb
 	])
 }
 
-export const createPlainEditor = ({ language, extensions = [] } = {}) => {
+export const createPlainEditor = async ({ relativePath, extensions = [] } = {}) => {
+
+	const fileExtension = relativePath
+		? relativePath.split('/').pop().split('.').pop()
+		: 'txt'
+	const language = extensionHighlight[fileExtension] || fileExtension
+	await loadSyntaxHighlight(language)
+
 	return _createEditor([
 		PlainText,
 		PlainTextLowlight
@@ -79,3 +71,20 @@ const _createEditor = extensions => {
 		extensions,
 	})
 }
+
+const loadSyntaxHighlight = async language => {
+
+	const list = hljs.listLanguages()
+	logger.debug('Supported languages', { list })
+	if (!lowlight.listLanguages().includes(language)) {
+		try {
+			logger.debug('Loading language', language)
+			// eslint-disable-next-line n/no-missing-import
+			const syntax = await import(/* webpackChunkName: "highlight/[request]" */`../node_modules/highlight.js/lib/languages/${language}.js`)
+			lowlight.registerLanguage(language, syntax.default)
+		} catch (error) {
+			// fallback to none
+			logger.debug('No matching highlighing found', { error })
+		}
+	}
+}

src/components/Editor.vue

@@ -113,11 +113,9 @@ import { getDocumentState, applyDocumentState, getUpdateMessage } from '../helpe
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
 import createSyncServiceProvider from './../services/SyncServiceProvider.js'
 import AttachmentResolver from './../services/AttachmentResolver.js'
-import { extensionHighlight } from '../helpers/mappings.js'
 import {
 	createRichEditor,
 	createPlainEditor,
-	loadSyntaxHighlight,
 } from './../EditorFactory.js'
 import { serializeEditorContent } from './../extensions/Serializer.js'
 import markdownit from './../markdownit/index.js'
@@ -285,9 +283,6 @@ export default {
 		isRichEditor() {
 			return loadState('text', 'rich_editing_enabled', true) && this.mime === 'text/markdown'
 		},
-		fileExtension() {
-			return this.relativePath ? this.relativePath.split('/').pop().split('.').pop() : 'txt'
-		},
 		currentDirectory() {
 			return this.relativePath
 				? this.relativePath.split('/').slice(0, -1).join('/')
@@ -522,7 +517,7 @@ export default {
 				})
 		},
 
-		async createEditor() {
+		createEditor() {
 			const session = this.currentSession
 
 			const extensions = [
@@ -544,8 +539,6 @@ export default {
 				}),
 			]
 
-			const language = extensionHighlight[this.fileExtension] || this.fileExtension
-
 			if (this.isRichEditor) {
 				return createRichEditor({
 					relativePath: this.relativePath,
@@ -554,8 +547,10 @@ export default {
 					isEmbedded: this.isEmbedded,
 				})
 			} else {
-				await loadSyntaxHighlight(language)
-				return createPlainEditor({ language, extensions })
+				return createPlainEditor({
+					relativePath: this.relativePath,
+					extensions,
+				})
 			}
 		},