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 <[email protected]>
nextcloud · Jul 28, 2023 · c5294fe · c5294fe
1 parent 3851171
commit c5294fe
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/src/EditorFactory.js b/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'

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -804,7 +804,7 @@ export default {
 	.text-editor__wrapper {
 		@import './../../css/prosemirror';
 
-		&:not(.is-rich-editor) .ProseMirror {
+		.ProseMirror {
 			pre {
 				background-color: var(--color-main-background);
 

diff --git a/src/extensions/RichText.js b/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'
@@ -86,7 +87,9 @@ export default Extension.create({
 			Blockquote,
 			CharacterCount,
 			Code,
-			CodeBlock,
+			CodeBlock.configure({
+				lowlight,
+			}),
 			BulletList,
 			HorizontalRule,
 			OrderedList,

diff --git a/src/nodes/CodeBlock.js b/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 [