refactor(EditorFactory): split createEditor in rich and plain variant

Use two functions that do one thing
rather than one with a boolean flag.

Simplifies the functions use and signature a lot
in particular since plain and rich editor need different arguments.

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

src/EditorFactory.js

@@ -32,10 +32,15 @@ const loadSyntaxHighlight = async (language) => {
 	}
 }
 
-const createEditor = ({ language, onCreate = () => {}, onUpdate = () => {}, extensions, enableRichEditing, session, relativePath, isEmbedded = false }) => {
-	let defaultExtensions
-	if (enableRichEditing) {
-		defaultExtensions = [
+const editorProps = {
+	scrollMargin: 50,
+	scrollThreshold: 50,
+}
+
+const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded = false } = {}) => {
+	return new Editor({
+		editorProps,
+		extensions: [
 			RichText.configure({
 				relativePath,
 				isEmbedded,
@@ -49,25 +54,24 @@ const createEditor = ({ language, onCreate = () => {}, onUpdate = () => {}, exte
 				],
 			}),
 			FocusTrap,
+			...extensions,
 		]
-	} else {
-		defaultExtensions = [PlainText, CodeBlockLowlight.configure({ lowlight, defaultLanguage: language })]
-	}
+	})
+}
 
+const createPlainEditor = ({ language, extensions = [] } = {}) => {
 	return new Editor({
-		onCreate,
-		onUpdate,
-		editorProps: {
-			scrollMargin: 50,
-			scrollThreshold: 50,
-		},
-		extensions: defaultExtensions.concat(extensions || []),
+		editorProps,
+		extensions: [
+			PlainText,
+			CodeBlockLowlight.configure({ lowlight, defaultLanguage: language }),
+			...extensions,
+		]
 	})
 }
 
 const serializePlainText = (doc) => {
 	return doc.textContent
 }
 
-export default createEditor
-export { createEditor, serializePlainText, loadSyntaxHighlight }
+export { createRichEditor, createPlainEditor, serializePlainText, loadSyntaxHighlight }

src/components/Editor.vue

@@ -98,7 +98,12 @@ import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService
 import createSyncServiceProvider from './../services/SyncServiceProvider.js'
 import AttachmentResolver from './../services/AttachmentResolver.js'
 import { extensionHighlight } from '../helpers/mappings.js'
-import { createEditor, serializePlainText, loadSyntaxHighlight } from './../EditorFactory.js'
+import {
+	createRichEditor,
+	createPlainEditor,
+	serializePlainText,
+	loadSyntaxHighlight
+} from './../EditorFactory.js'
 import { createMarkdownSerializer } from './../extensions/Markdown.js'
 import markdownit from './../markdownit/index.js'
 
@@ -401,10 +406,15 @@ export default {
 		listenEditorEvents() {
 			this.$editor.on('focus', this.onFocus)
 			this.$editor.on('blur', this.onBlur)
+			this.$editor.on('create', this.onCreate)
+			this.$editor.on('update', this.onUpdate)
 		},
+
 		unlistenEditorEvents() {
 			this.$editor.off('focus', this.onFocus)
 			this.$editor.off('blur', this.onBlur)
+			this.$editor.off('create', this.onCreate)
+			this.$editor.off('update', this.onUpdate)
 		},
 
 		listenSyncServiceEvents() {
@@ -510,45 +520,28 @@ export default {
 				.then(() => {
 					const session = this.currentSession
 					if (!this.$editor) {
-						this.$editor = createEditor({
-							language,
-							relativePath: this.relativePath,
-							session,
-							onCreate: ({ editor }) => {
-								this.$syncService.startSync()
-								const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
-								this.emit('create:content', {
-									markdown: proseMirrorMarkdown,
-								})
-							},
-							onUpdate: ({ editor }) => {
-								// this.debugContent(editor)
-								const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
-								this.emit('update:content', {
-									markdown: proseMirrorMarkdown,
-								})
-							},
-							extensions: [
-								Autofocus.configure({
-									fileId: this.fileId,
-								}),
-								Collaboration.configure({
-									document: this.$ydoc,
-								}),
-								CollaborationCursor.configure({
-									provider: this.$providers[0],
-									user: {
-										name: session?.userId
-											? session.displayName
-											: (session?.guestName || t('text', 'Guest')),
-										color: session?.color,
-										clientId: this.$ydoc.clientID,
-									},
-								}),
-							],
-							enableRichEditing: this.isRichEditor,
-							isEmbedded: this.isEmbedded,
-						})
+						const extensions = [
+							Autofocus.configure({ fileId: this.fileId }),
+							Collaboration.configure({ document: this.$ydoc }),
+							CollaborationCursor.configure({
+								provider: this.$providers[0],
+								user: {
+									name: session?.userId
+										? session.displayName
+										: (session?.guestName || t('text', 'Guest')),
+									color: session?.color,
+									clientId: this.$ydoc.clientID,
+								},
+							}),
+						]
+						this.$editor = this.isRichEditor
+							? createRichEditor({
+								relativePath: this.relativePath,
+								session,
+								extensions,
+								isEmbedded: this.isEmbedded,
+							})
+							: createPlainEditor({ language, extensions })
 						this.hasEditor = true
 						this.listenEditorEvents()
 					} else {
@@ -571,6 +564,22 @@ export default {
 			}
 		},
 
+		onCreate({ editor }) {
+			this.$syncService.startSync()
+			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+			this.emit('create:content', {
+				markdown: proseMirrorMarkdown,
+			})
+		},
+
+		onUpdate({ editor }) {
+			// this.debugContent(editor)
+			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+			this.emit('update:content', {
+				markdown: proseMirrorMarkdown,
+			})
+		},
+
 		onSync({ steps, document }) {
 			this.hasConnectionIssue = this.$syncService.backend.fetcher === 0 || !this.$providers[0].wsconnected || this.$syncService.pushError > 0
 			this.$nextTick(() => {

src/mixins/setContent.js

@@ -9,7 +9,7 @@ import { Doc, encodeStateAsUpdate, XmlFragment, applyUpdate } from 'yjs'
 import { generateJSON } from '@tiptap/core'
 import { prosemirrorToYXmlFragment } from 'y-prosemirror'
 import { Node } from '@tiptap/pm/model'
-import { createEditor } from '../EditorFactory.js'
+import { createRichEditor, createPlainEditor } from '../EditorFactory.js'
 
 export default {
 	methods: {
@@ -31,9 +31,10 @@ export default {
 				? markdownit.render(content) + '<p/>'
 				: `<pre>${escapeHtml(content)}</pre>`
 
-			const editor = createEditor({
-				enableRichEditing: isRichEditor,
-			})
+			const editor = isRichEditor
+				? createRichEditor()
+				: createPlainEditor()
+
 			const json = generateJSON(html, editor.extensionManager.extensions)
 
 			const doc = Node.fromJSON(editor.schema, json)

src/tests/builders.js

@@ -6,14 +6,11 @@
 import { expect } from '@jest/globals';
 import { Mark, Node } from '@tiptap/pm/model'
 import { builders } from 'prosemirror-test-builder'
-import createEditor from '../EditorFactory'
+import { createRichEditor } from '../EditorFactory'
 
 
 export function getBuilders() {
-	const editor = createEditor({
-		content: '',
-		enableRichEditing: true
-	})
+	const editor = createRichEditor()
 	return builders(editor.schema, {
 		tr: { nodeType: 'tableRow' },
 		td: { nodeType: 'tableCell' },
@@ -84,7 +81,7 @@ function createDocumentString(node) {
  * @param {Node} subject The editor document
  * @param {Node} expected The expected document
  * @example
- * const editor = createEditor()
+ * const editor = createRichEditor()
  * expectDocument(editor.state.doc, table(
  * 	tr(
  * 		td('foo')

src/tests/helpers.js

@@ -10,7 +10,7 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '../nodes/Paragraph'
 import Text from '@tiptap/extension-text'
 
-import createEditor from '../EditorFactory'
+import { createRichEditor } from '../EditorFactory'
 import markdownit from '../markdownit'
 
 export function createCustomEditor({ content, extensions }) {
@@ -32,9 +32,7 @@ export function createCustomEditor({ content, extensions }) {
  * @returns {string}
  */
 export function markdownThroughEditor(markdown) {
-	const tiptap = createEditor({
-		enableRichEditing: true
-	})
+	const tiptap = createRichEditor()
 	tiptap.commands.setContent(markdownit.render(markdown))
 	const serializer = createMarkdownSerializer(tiptap.schema)
 	return serializer.serialize(tiptap.state.doc)
@@ -47,9 +45,7 @@ export function markdownThroughEditor(markdown) {
  * @returns {string}
  */
 export function markdownThroughEditorHtml(html) {
-	const tiptap = createEditor({
-		enableRichEditing: true
-	})
+	const tiptap = createRichEditor()
 	tiptap.commands.setContent(html)
 	const serializer = createMarkdownSerializer(tiptap.schema)
 	return serializer.serialize(tiptap.state.doc)
@@ -62,9 +58,7 @@ export function markdownThroughEditorHtml(html) {
  * @returns {string}
  */
 export function markdownFromPaste(html) {
-	const tiptap = createEditor({
-		enableRichEditing: true
-	})
+	const tiptap = createRichEditor()
 	tiptap.commands.insertContent(html)
 	const serializer = createMarkdownSerializer(tiptap.schema)
 	return serializer.serialize(tiptap.state.doc)

src/tests/markdown.spec.js

@@ -11,7 +11,7 @@ import {
 	markdownFromPaste
 } from './helpers.js'
 import { createMarkdownSerializer } from "../extensions/Markdown";
-import createEditor from "../EditorFactory";
+import { createRichEditor } from "../EditorFactory";
 
 /*
  * This file is for various markdown tests, mainly testing if input and output stays the same.
@@ -212,9 +212,7 @@ describe('Markdown serializer from html', () => {
 describe('Trailing nodes', () => {
 	test('No extra transaction is added after loading', () => {
 		const source = "# My heading\n\n* test\n* test2"
-		const tiptap = createEditor({
-			enableRichEditing: true,
-		})
+		const tiptap = createRichEditor()
 		tiptap.commands.setContent(markdownit.render(source))
 
 		const jsonBefore = tiptap.getJSON()

src/tests/nodes/Table.spec.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { createEditor } from '../../EditorFactory'
+import { createRichEditor } from '../../EditorFactory'
 import { createMarkdownSerializer } from '../../extensions/Markdown'
 import { builders } from 'prosemirror-test-builder'
 
@@ -75,9 +75,7 @@ describe('Table', () => {
 })
 
 function editorWithContent(content) {
-	const editor = createEditor({
-		enableRichEditing: true,
-	})
+	const editor = createRichEditor()
 	editor.commands.setContent(content)
 	return editor
 }

src/tests/plaintext.spec.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { createEditor, serializePlainText } from './../EditorFactory';
+import { createPlainEditor, serializePlainText } from './../EditorFactory';
 import spec from "./fixtures/spec"
 import xssFuzzVectors from './fixtures/xssFuzzVectors';
 
@@ -18,9 +18,7 @@ const escapeHTML = (s) => {
 
 const plaintextThroughEditor = (markdown) => {
   const content = '<pre>' + escapeHTML(markdown) + '</pre>'
-  const tiptap = createEditor({
-    enableRichEditing: false
-  })
+  const tiptap = createPlainEditor()
   tiptap.commands.setContent(content)
   return serializePlainText(tiptap.state.doc) || 'failed'
 }

src/tests/tiptap.spec.js

@@ -3,13 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import createEditor from '../EditorFactory'
+import { createRichEditor } from '../EditorFactory'
 import markdownit from '../markdownit'
 
 const renderedHTML = ( markdown ) => {
-    const editor = createEditor({
-        enableRichEditing: true
-    })
+    const editor = createRichEditor()
     editor.commands.setContent(markdownit.render(markdown))
     // Remove TrailingNode
     return editor.getHTML().replace(/<p><\/p>$/, '')