refactor: use Editor.new directly in ReadOnlyEditor

Introduce a `Plaintext` tiptap extension
that bundles all the extensions used for plain text editing.

This allows calling `Editor.new` directly with just a few extensions.
No need to rely on `createEditor` from the editor factory anymore.
Also prevent error messages about undefined callbacks
because no callbacks were handed to `createEditor` in `ReadOnlyEditor`.

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

5 files changed, 86 insertions, 19 deletions

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index b8212f013..5caa5bb65 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -21,20 +21,15 @@
 */
 
 /* eslint-disable import/no-named-as-default */
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import History from '@tiptap/extension-history'
 import Blockquote from '@tiptap/extension-blockquote'
 import Placeholder from '@tiptap/extension-placeholder'
-import Text from '@tiptap/extension-text'
 /* eslint-enable import/no-named-as-default */
 
-import {
-	PlainTextDocument,
-	TrailingNode,
-} from './nodes/index.js'
+import { TrailingNode } from './nodes/index.js'
 import { Editor } from '@tiptap/core'
-import { Emoji, Markdown, RichText } from './extensions/index.js'
+import { Emoji, Markdown, PlainText, RichText } from './extensions/index.js'
 import { translate as t } from '@nextcloud/l10n'
 import { listLanguages, registerLanguage } from 'lowlight/lib/core'
 import { emojiSearch } from '@nextcloud/vue/dist/Functions/emoji'
@@ -123,11 +118,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 			TrailingNode,
 		]
 	} else {
-		richEditingExtensions = [
-			PlainTextDocument,
-			Text,
-			CodeBlockLowlight,
-		]
+		richEditingExtensions = [PlainText]
 	}
 	extensions = extensions || []
 	return new Editor({
diff --git a/src/components/ReadOnlyEditor.vue b/src/components/ReadOnlyEditor.vue
index ba1fcb715..a8136bd00 100644
--- a/src/components/ReadOnlyEditor.vue
+++ b/src/components/ReadOnlyEditor.vue
@@ -25,14 +25,18 @@
 </template>
 
 <script>
+import { Editor } from '@tiptap/core'
+import { PlainText, RichText } from './../extensions/index.js'
 import { EditorContent } from '@tiptap/vue-2'
 import escapeHtml from 'escape-html'
-import { createEditor } from '../EditorFactory.js'
 import markdownit from './../markdownit/index.js'
 
 export default {
 	name: 'ReadOnlyEditor',
 	components: { EditorContent },
+	inject: {
+		extensions: { default: [] },
+	},
 	props: {
 		content: {
 			type: String,
@@ -42,6 +46,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		richTextOptions: {
+			type: Object,
+			default: () => {},
+		},
 	},
 	data: () => {
 		return {
@@ -49,15 +57,35 @@ export default {
 		}
 	},
 	mounted() {
-		this.editor = createEditor({
-			content: this.isRichEditor ? markdownit.render(this.content) : '<pre>' + escapeHtml(this.content) + '</pre>',
-			enableRichEditing: this.isRichEditor,
-		})
+		this.editor = this.isRichEditor
+			? this.createRichEditor()
+			: this.createPlainEditor()
 		this.editor.setOptions({ editable: false })
 	},
 	beforeDestroy() {
 		this.editor.destroy()
 	},
+	methods: {
+
+		createRichEditor() {
+			const content = markdownit.render(this.content)
+			return new Editor({
+				content,
+				extensions: [
+					RichText.configure(this.richTextOptions),
+					...this.extensions,
+				],
+			})
+		},
+
+		createPlainEditor() {
+			const content = '<pre>' + escapeHtml(this.content) + '</pre>'
+			return new Editor({
+				content,
+				extensions: [PlainText],
+			})
+		},
+	},
 }
 </script>
 
diff --git a/src/extensions/PlainText.js b/src/extensions/PlainText.js
new file mode 100644
index 000000000..1d3a6ee55
--- /dev/null
+++ b/src/extensions/PlainText.js
@@ -0,0 +1,43 @@
+/*
+ * @copyright Copyright (c) 2022 Max <max@nextcloud.com>
+ *
+ * @author Max <max@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+*/
+
+import { Extension } from '@tiptap/core'
+
+/* eslint-disable import/no-named-as-default */
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Text from '@tiptap/extension-text'
+/* eslint-enable import/no-named-as-default */
+
+import { PlainTextDocument } from './../nodes/index.js'
+
+export default Extension.create({
+	name: 'PlainText',
+
+	addExtensions() {
+		return [
+			PlainTextDocument,
+			Text,
+			CodeBlockLowlight,
+		]
+	},
+
+})
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index b7fd5d030..0356aeec8 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -60,7 +60,7 @@ export default Extension.create({
 	},
 
 	addExtensions() {
-		return [
+		const extensions = [
 			Document,
 			Text,
 			Paragraph,
@@ -69,7 +69,6 @@ export default Extension.create({
 			Strong,
 			Italic,
 			Strike,
-			Link.configure({ openOnClick: true }),
 			Blockquote,
 			CodeBlock,
 			BulletList,
@@ -91,6 +90,10 @@ export default Extension.create({
 			}),
 			Dropcursor,
 		]
+		if (this.options.link !== false) {
+			extensions.push(Link.configure({ openOnClick: true }))
+		}
+		return extensions
 	},
 
 })
diff --git a/src/extensions/index.js b/src/extensions/index.js
index ff26f199b..1c05250ed 100644
--- a/src/extensions/index.js
+++ b/src/extensions/index.js
@@ -26,6 +26,7 @@ import Keymap from './Keymap.js'
 import UserColor from './UserColor.js'
 import Collaboration from './Collaboration.js'
 import Markdown from './Markdown.js'
+import PlainText from './PlainText.js'
 import RichText from './RichText.js'
 
 export {
@@ -35,5 +36,6 @@ export {
 	UserColor,
 	Collaboration,
 	Markdown,
+	PlainText,
 	RichText,
 }