fix(editor): Add syntax highlighting in code blocks

Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <jonas@freesources.org>

src/EditorFactory.js

@@ -26,7 +26,7 @@ import 'proxy-polyfill'
 
 import { Editor } from '@tiptap/core'
 import { lowlight } from 'lowlight/lib/core.js'
-import hljs from 'highlight.js'
+import hljs from 'highlight.js/lib/core'
 
 import { logger } from './helpers/logger.js'
 import { Mention, PlainText, RichText } from './extensions/index.js'

src/components/Editor.vue

@@ -803,7 +803,7 @@ export default {
 	.text-editor__wrapper {
 		@import './../css/prosemirror';
 
-		&:not(.is-rich-editor) .ProseMirror {
+		.ProseMirror {
 			pre {
 				background-color: var(--color-main-background);
 

src/extensions/RichText.js

@@ -21,6 +21,7 @@
  */
 
 import { Extension } from '@tiptap/core'
+import { lowlight } from 'lowlight'
 
 /* eslint-disable import/no-named-as-default */
 import History from '@tiptap/extension-history'
@@ -59,6 +60,7 @@ import TrailingNode from './../nodes/TrailingNode.js'
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
 import { translate as t } from '@nextcloud/l10n'
 
+
 export default Extension.create({
 	name: 'RichText',
 
@@ -86,7 +88,9 @@ export default Extension.create({
 			Blockquote,
 			CharacterCount,
 			Code,
-			CodeBlock,
+			CodeBlock.configure({
+				lowlight,
+			}),
 			BulletList,
 			HorizontalRule,
 			OrderedList,

src/nodes/CodeBlock.js

@@ -1,7 +1,7 @@
-import TiptapCodeBlock from '@tiptap/extension-code-block'
+import TiptapCodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { defaultMarkdownSerializer } from '@tiptap/pm/markdown'
 
-const CodeBlock = TiptapCodeBlock.extend({
+const CodeBlock = TiptapCodeBlockLowlight.extend({
 
 	parseHTML() {
 		return [