fix: backport for stable29

Signed-off-by: Benjamin Frueh <[email protected]>

Author: benjaminfrueh

src/components/Editor/PlainTableContentEditor.vue

@@ -2,7 +2,6 @@
   - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <template>
 	<Wrapper :content-loaded="true" :show-outline-outside="false">
 		<MainContainer>
@@ -13,94 +12,78 @@
 
 <script>
 import { Editor } from '@tiptap/core'
+import History from '@tiptap/extension-history'
 import MainContainer from './MainContainer.vue'
 import Wrapper from './Wrapper.vue'
-/* eslint-disable import/no-named-as-default */
-import { UndoRedo } from '@tiptap/extensions'
-import { provide, watch } from 'vue'
-import { provideEditor } from '../../composables/useEditor.ts'
-import { editorFlagsKey } from '../../composables/useEditorFlags.ts'
-import { useEditorMethods } from '../../composables/useEditorMethods.ts'
-import { editorWidthKey } from '../../composables/useEditorWidth.ts'
-import { FocusTrap, PlainTable } from '../../extensions/index.js'
-import { createMarkdownSerializer } from '../../extensions/Markdown.js'
-import { EDITOR_UPLOAD } from '../Editor.provider.ts'
 import ContentContainer from './ContentContainer.vue'
+import { PlainTable } from '../../extensions/index.js'
+import { createMarkdownSerializer } from '../../extensions/Markdown.js'
+import { EDITOR, IS_PUBLIC, IS_RICH_EDITOR, IS_RICH_WORKSPACE, EDITOR_UPLOAD } from '../Editor.provider.js'
+import markdownit from '../../markdownit/index.js'
 
 export default {
 	name: 'PlainTableContentEditor',
 	components: { ContentContainer, MainContainer, Wrapper },
 
+	provide() {
+		const val = {}
+		Object.defineProperties(val, {
+			[EDITOR]: { get: () => this.$editor },
+			[IS_PUBLIC]: { get: () => false },
+			[IS_RICH_EDITOR]: { get: () => false },
+			[IS_RICH_WORKSPACE]: { get: () => false },
+			[EDITOR_UPLOAD]: { get: () => false },
+		})
+		return val
+	},
+
 	props: {
 		content: {
 			type: String,
-			required: true,
+			default: '',
 		},
 		readOnly: {
 			type: Boolean,
 			default: false,
 		},
 	},
-	emits: ['update:content'],
-
-	setup(props) {
-		const extensions = [PlainTable, UndoRedo, FocusTrap]
-		const editor = new Editor({ extensions })
-
-		const { setEditable, setContent } = useEditorMethods(editor)
-		watch(
-			() => props.content,
-			(content) => {
-				setContent(content)
-			},
-		)
-
-		setEditable(!props.readOnly)
-		watch(
-			() => props.readOnly,
-			(readOnly) => {
-				setEditable(!readOnly)
-			},
-		)
-
-		provideEditor(editor)
-		provide(editorFlagsKey, {
-			isPublic: false,
-			isRichEditor: true,
-			isRichWorkspace: false,
-		})
-		provide(editorWidthKey, null)
-		provide(EDITOR_UPLOAD, false)
-		return { editor, setContent }
+
+	emits: ['update:content', 'ready', 'create:content'],
+
+	computed: {
+		editor() {
+			return this.$editor
+		},
 	},
 
 	created() {
-		// Set content after the setup function
-		// as it may render other vue components such as preview toggle
-		// which breaks the context of the setup function.
-		this.setContent(this.content, { addToHistory: false })
-		this.editor.on('create', () => {
+		const html = markdownit.render(this.content)
+		const extensions = [PlainTable, History]
+
+		this.$editor = new Editor({
+			content: html,
+			extensions,
+			editable: !this.readOnly,
+		})
+
+		this.$editor.on('create', () => {
 			this.$emit('ready')
 			this.$parent.$emit('ready')
 
-			// Emit initial content
 			try {
-				const markdown = createMarkdownSerializer(
-					this.editor.schema,
-				).serialize(this.editor.state.doc)
+				const markdown = createMarkdownSerializer(this.$editor.schema).serialize(this.$editor.state.doc)
 				this.emit('create:content', {
-					json: this.editor.state.doc,
+					json: this.$editor.state.doc,
 					markdown,
 				})
 			} catch (error) {
 				console.error('Error serializing table:', error)
 			}
 		})
-		this.editor.on('update', ({ editor }) => {
+
+		this.$editor.on('update', ({ editor }) => {
 			try {
-				const markdown = createMarkdownSerializer(editor.schema).serialize(
-					editor.state.doc,
-				)
+				const markdown = createMarkdownSerializer(editor.schema).serialize(editor.state.doc)
 				this.emit('update:content', {
 					json: editor.state.doc,
 					markdown,
@@ -111,8 +94,12 @@ export default {
 		})
 	},
 
+	updated() {
+		this.$editor.setEditable(!this.readOnly)
+	},
+
 	beforeDestroy() {
-		this.editor.destroy()
+		this.$editor.destroy()
 	},
 
 	methods: {
@@ -130,7 +117,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@use './../../css/prosemirror';
-@use './../../css/print';
+<style scoped>
+
 </style>

src/editor.js

@@ -259,7 +259,7 @@ window.OCA.Text.createEditor = async function({
 		.render(el)
 }
 
-window.OCA.Text.createTable = async function ({
+window.OCA.Text.createTable = async function({
 	// Element to render the editor to
 	el,
 

src/extensions/index.js

@@ -26,6 +26,7 @@ import FocusTrap from './FocusTrap.js'
 import Keymap from './Keymap.js'
 import UserColor from './UserColor.js'
 import Markdown from './Markdown.js'
+import PlainTable from './PlainTable.js'
 import PlainText from './PlainText.js'
 import RichText from './RichText.js'
 import KeepSyntax from './KeepSyntax.js'
@@ -38,6 +39,7 @@ export {
 	Keymap,
 	UserColor,
 	Markdown,
+	PlainTable,
 	PlainText,
 	RichText,
 	KeepSyntax,