From c5294fe7ec298a295fd116ebee7affc0b8d501ce Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 28 Jun 2023 18:08:21 +0200
Subject: [PATCH] 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       | 2 +-
 src/components/Editor.vue  | 2 +-
 src/extensions/RichText.js | 5 ++++-
 src/nodes/CodeBlock.js     | 4 ++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index dbd1ec5ce09..1a0c025cfd1 100644
--- 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
index 4528d5db8f2..30a9661f5b6 100644
--- 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
index d34374170af..499f32abd0d 100644
--- 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
index 967e54ac68c..46b92cbf645 100644
--- 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 [