chore(migrate): setContent mixin...

to useEditorMethods composable
and setInitialYjsState helper method.

Signed-off-by: Max <[email protected]>

src/components/BaseReader.vue

@@ -31,6 +31,7 @@ import {
 	useOutlineActions,
 } from './Editor/Wrapper.provider.js'
 import EditorOutline from './Editor/EditorOutline.vue'
+import { useEditorMethods } from '../composables/useEditorMethods.ts'
 
 export default {
 	name: 'BaseReader',
@@ -52,7 +53,8 @@ export default {
 	},
 
 	setup() {
-		const { editor, setEditable } = provideEditor()
+		const { editor } = provideEditor()
+		const { setEditable } = useEditorMethods(editor)
 		return { editor, setEditable }
 	},
 
@@ -77,7 +79,7 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.editor.destroy()
+		this.editor?.destroy()
 	},
 
 	methods: {
@@ -89,7 +91,7 @@ export default {
 		},
 
 		updateContent() {
-			this.editor.commands.setContent(this.htmlContent, true)
+			this.editor?.commands.setContent(this.htmlContent, true)
 		},
 	},
 }

src/components/CollisionResolveDialog.vue

@@ -35,13 +35,13 @@ import {
 	useSyncServiceMixin,
 } from './Editor.provider.ts'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import setContent from './../mixins/setContent.js'
+import { useEditorMethods } from '../composables/useEditorMethods.ts'
 export default {
 	name: 'CollisionResolveDialog',
 	components: {
 		NcButton,
 	},
-	mixins: [useIsRichEditorMixin, setContent, useSyncServiceMixin],
+	mixins: [useIsRichEditorMixin, useSyncServiceMixin],
 	props: {
 		syncError: {
 			type: Object,
@@ -50,8 +50,9 @@ export default {
 	},
 	setup() {
 		// editor is needed for the setContent mixin
-		const { editor, setEditable } = useEditor()
-		return { editor, setEditable }
+		const { editor } = useEditor()
+		const { setContent, setEditable } = useEditorMethods(editor)
+		return { editor, setContent, setEditable }
 	},
 	data() {
 		return {

src/components/Editor.provider.ts

@@ -14,21 +14,11 @@ export const editorKey = Symbol('tiptap:editor') as InjectionKey<
 export const provideEditor = () => {
 	const editor: ShallowRef<Editor | undefined> = shallowRef(undefined)
 	provide(editorKey, editor)
-	const setEditable = (val: boolean) => {
-		if (editor.value && editor.value.isEditable !== val) {
-			editor.value.setEditable(val)
-		}
-	}
-	return { editor, setEditable }
+	return { editor }
 }
 export const useEditor = () => {
 	const editor = inject(editorKey, shallowRef(undefined))
-	const setEditable = (val: boolean) => {
-		if (editor.value && editor.value.isEditable !== val) {
-			editor.value.setEditable(val)
-		}
-	}
-	return { editor, setEditable }
+	return { editor }
 }
 
 export const FILE = Symbol('editor:file')

src/components/Editor.vue

@@ -123,7 +123,7 @@ import { exposeForDebugging, removeFromDebugging } from '../helpers/debug.js'
 import { CollaborationCursor } from '../extensions/index.js'
 import DocumentStatus from './Editor/DocumentStatus.vue'
 import isMobile from './../mixins/isMobile.js'
-import setContent from './../mixins/setContent.js'
+import { setInitialYjsState } from '../helpers/setInitialYjsState.js'
 import MenuBar from './Menu/MenuBar.vue'
 import ContentContainer from './Editor/ContentContainer.vue'
 import Status from './Editor/Status.vue'
@@ -137,6 +137,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import { fetchNode } from '../services/WebdavClient.ts'
 import SuggestionsBar from './SuggestionsBar.vue'
 import { useDelayedFlag } from './Editor/useDelayedFlag.ts'
+import { useEditorMethods } from '../composables/useEditorMethods.ts'
 
 export default {
 	name: 'Editor',
@@ -155,7 +156,7 @@ export default {
 		Translate,
 		SuggestionsBar,
 	},
-	mixins: [isMobile, setContent],
+	mixins: [isMobile],
 
 	provide() {
 		const val = {}
@@ -249,7 +250,8 @@ export default {
 		})
 		const hasConnectionIssue = ref(false)
 		const { delayed: requireReconnect } = useDelayedFlag(hasConnectionIssue)
-		const { editor, setEditable } = provideEditor()
+		const { editor } = provideEditor()
+		const { setEditable } = useEditorMethods(editor)
 		return {
 			el,
 			width,
@@ -589,7 +591,7 @@ export default {
 
 		onLoaded({ document, documentSource, documentState }) {
 			if (!documentState) {
-				this.setInitialYjsState(documentSource, {
+				setInitialYjsState(this.$ydoc, documentSource, {
 					isRichEditor: this.isRichEditor,
 				})
 			}

src/components/Editor/MarkdownContentEditor.vue

@@ -34,6 +34,7 @@ import markdownit from '../../markdownit/index.js'
 import { RichText, FocusTrap } from '../../extensions/index.js'
 import ReadonlyBar from '../Menu/ReadonlyBar.vue'
 import ContentContainer from './ContentContainer.vue'
+import { useEditorMethods } from '../../composables/useEditorMethods.ts'
 
 export default {
 	name: 'MarkdownContentEditor',
@@ -86,7 +87,8 @@ export default {
 	emits: ['update:content'],
 
 	setup() {
-		const { editor, setEditable } = provideEditor()
+		const { editor } = provideEditor()
+		const { setEditable } = useEditorMethods(editor)
 		return { editor, setEditable }
 	},
 
@@ -120,7 +122,7 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.editor.destroy()
+		this.editor?.destroy()
 	},
 
 	methods: {

src/composables/useEditorMethods.ts

@@ -0,0 +1,37 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Editor } from '@tiptap/core'
+import escapeHtml from 'escape-html'
+import { unref, type ShallowRef } from 'vue'
+import markdownit from '../markdownit/index.js'
+
+export const useEditorMethods = (editor: ShallowRef<Editor | undefined>) => {
+	const setEditable = (val: boolean) => {
+		const ed = unref(editor)
+		if (ed && ed.isEditable !== val) {
+			ed.setEditable(val)
+		}
+	}
+
+	const setContent: (
+		content: string,
+		options: { isRichEditor?: boolean; addToHistory?: boolean },
+	) => void = (content, { isRichEditor, addToHistory = true } = {}) => {
+		const html = isRichEditor
+			? markdownit.render(content) + '<p/>'
+			: `<pre>${escapeHtml(content)}</pre>`
+		editor.value
+			?.chain()
+			.setContent(html, addToHistory)
+			.command(({ tr }) => {
+				tr.setMeta('addToHistory', addToHistory)
+				return true
+			})
+			.run()
+	}
+
+	return { setContent, setEditable }
+}

src/helpers/setInitialYjsState.js

@@ -0,0 +1,46 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import escapeHtml from 'escape-html'
+import markdownit from '../markdownit/index.js'
+import { Doc, encodeStateAsUpdate, XmlFragment, applyUpdate } from 'yjs'
+import { generateJSON } from '@tiptap/core'
+import { prosemirrorToYXmlFragment } from 'y-prosemirror'
+import { Node } from '@tiptap/pm/model'
+import { createRichEditor, createPlainEditor } from '../EditorFactory.js'
+
+export const setInitialYjsState = (ydoc, content, { isRichEditor }) => {
+	const html = isRichEditor
+		? markdownit.render(content) + '<p/>'
+		: `<pre>${escapeHtml(content)}</pre>`
+
+	const editor = isRichEditor ? createRichEditor() : createPlainEditor()
+
+	const json = generateJSON(html, editor.options.extensions)
+
+	const node = Node.fromJSON(editor.schema, json)
+	const getBaseDoc = (node) => {
+		const baseDoc = new Doc()
+		// In order to make the initial document state idempotent, we need to reset the clientID
+		// While this is not recommended, we cannot avoid it here as we lack another mechanism
+		// to generate the initial state on the server side
+		// The only other option to avoid this could be to generate the initial state once and push
+		// it to the server immediately, however this would require read only sessions to be able
+		// to still push a state
+		baseDoc.clientID = 0
+		const type = /** @type {XmlFragment} */ (baseDoc.get('default', XmlFragment))
+		if (!type.doc) {
+			// This should not happen but is aligned with the upstream implementation
+			// https://github.com/yjs/y-prosemirror/blob/8db24263770c2baaccb08e08ea9ef92dbcf8a9da/src/lib.js#L209
+			return baseDoc
+		}
+
+		prosemirrorToYXmlFragment(node, type)
+		return baseDoc
+	}
+
+	const baseUpdate = encodeStateAsUpdate(getBaseDoc(node))
+	applyUpdate(ydoc, baseUpdate)
+}