[stable32] feat: Add table-only editor API

src/components/Editor/PlainTableContentEditor.vue

@@ -0,0 +1,134 @@
+<!--
+  - 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>
+			<ContentContainer :read-only="readOnly" />
+		</MainContainer>
+	</Wrapper>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+/* eslint-disable-next-line import/no-named-as-default */
+import History from '@tiptap/extension-history'
+import { provide, watch } from 'vue'
+import { provideEditor } from '../../composables/useEditor.ts'
+import { editorFlagsKey } from '../../composables/useEditorFlags.ts'
+import { useEditorMethods } from '../../composables/useEditorMethods.ts'
+import { PlainTable } from '../../extensions/index.js'
+import { createMarkdownSerializer } from '../../extensions/Markdown.js'
+import markdownit from '../../markdownit/index.js'
+import { EDITOR_UPLOAD } from '../Editor.provider.ts'
+import ContentContainer from './ContentContainer.vue'
+import MainContainer from './MainContainer.vue'
+import Wrapper from './Wrapper.vue'
+
+export default {
+	name: 'PlainTableContentEditor',
+	components: { ContentContainer, MainContainer, Wrapper },
+
+	props: {
+		content: {
+			type: String,
+			default: '',
+		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: ['update:content', 'ready', 'create:content'],
+
+	setup(props) {
+		const html = markdownit.render(props.content)
+		const extensions = [PlainTable, History]
+
+		const editor = new Editor({
+			content: html,
+			extensions,
+			editable: !props.readOnly,
+		})
+
+		const { setEditable, setContent } = useEditorMethods(editor)
+
+		watch(
+			() => props.content,
+			(content) => {
+				const html = markdownit.render(content)
+				setContent(html)
+			},
+		)
+
+		watch(
+			() => props.readOnly,
+			(readOnly) => {
+				setEditable(!readOnly)
+			},
+		)
+
+		provideEditor(editor)
+		provide(editorFlagsKey, {
+			isPublic: false,
+			isRichEditor: false,
+			isRichWorkspace: false,
+		})
+		provide(EDITOR_UPLOAD, false)
+
+		return { editor, setContent }
+	},
+
+	created() {
+		this.editor.on('create', () => {
+			this.$emit('ready')
+			this.$parent.$emit('ready')
+
+			try {
+				const markdown = createMarkdownSerializer(
+					this.editor.schema,
+				).serialize(this.editor.state.doc)
+				this.emit('create:content', {
+					json: this.editor.state.doc,
+					markdown,
+				})
+			} catch (error) {
+				console.error('Error serializing table:', error)
+			}
+		})
+
+		this.editor.on('update', ({ editor }) => {
+			try {
+				const markdown = createMarkdownSerializer(editor.schema).serialize(
+					editor.state.doc,
+				)
+				this.emit('update:content', {
+					json: editor.state.doc,
+					markdown,
+				})
+			} catch (error) {
+				console.error('Error serializing table:', error)
+			}
+		})
+	},
+
+	beforeDestroy() {
+		this.editor.destroy()
+	},
+
+	methods: {
+		/**
+		 * Wrapper to emit events on our own and the parent component
+		 *
+		 * @param {string} event The event name
+		 * @param {any} data The data to pass along
+		 */
+		emit(event, data) {
+			this.$emit(event, data)
+			this.$parent?.$emit(event, data)
+		},
+	},
+}
+</script>

src/editor.js

@@ -283,3 +283,47 @@ window.OCA.Text.createEditor = async function ({
 		.onSearch(onSearch)
 		.render(el)
 }
+
+window.OCA.Text.createTable = async function ({
+	// Element to render the editor to
+	el,
+
+	content = '',
+
+	readOnly = false,
+	autofocus = true,
+
+	onCreate = ({ markdown }) => {},
+	onLoaded = () => {},
+	onUpdate = ({ markdown }) => {},
+}) {
+	const { default: PlainTableContentEditor } = await import(
+		'./components/Editor/PlainTableContentEditor.vue'
+	)
+
+	const data = Vue.observable({
+		readOnly,
+		content,
+	})
+
+	const vm = new Vue({
+		data() {
+			return data
+		},
+		render: (h) => {
+			return h(PlainTableContentEditor, {
+				props: {
+					content: data.content,
+					readOnly: data.readOnly,
+					showOutlineOutside: false,
+				},
+			})
+		},
+	})
+
+	return new TextEditorEmbed(vm, data)
+		.onCreate(onCreate)
+		.onLoaded(onLoaded)
+		.onUpdate(onUpdate)
+		.render(el)
+}

src/extensions/PlainTable.js

@@ -0,0 +1,21 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Extension } from '@tiptap/core'
+
+import EditableTable from './../nodes/EditableTable.js'
+import PlainTableDocument from './../nodes/PlainTableDocument.js'
+import Keymap from './Keymap.js'
+import Markdown from './Markdown.js'
+/* eslint-disable import/no-named-as-default */
+import Text from '@tiptap/extension-text'
+
+export default Extension.create({
+	name: 'PlainTable',
+
+	addExtensions() {
+		return [Markdown, PlainTableDocument, EditableTable, Keymap, Text]
+	},
+})

src/extensions/index.js

@@ -9,6 +9,7 @@ import FocusTrap from './FocusTrap.js'
 import KeepSyntax from './KeepSyntax.js'
 import Markdown from './Markdown.js'
 import Mention from './Mention.js'
+import PlainTable from './PlainTable.js'
 import PlainText from './PlainText.js'
 import RichText from './RichText.js'
 import UserColor from './UserColor.js'
@@ -20,6 +21,7 @@ export {
 	KeepSyntax,
 	Markdown,
 	Mention,
+	PlainTable,
 	PlainText,
 	RichText,
 	UserColor,

src/nodes/PlainTableDocument.js

@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Node } from '@tiptap/core'
+
+export default Node.create({
+	name: 'doc',
+	content: 'table',
+})