Merge pull request #8027 from nextcloud/backport/8002/stable30

[stable30] feat: Add table-only editor API

Author: silverkszlo

src/components/Editor/PlainTableContentEditor.vue

@@ -0,0 +1,122 @@
+<!--
+  - 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'
+import History from '@tiptap/extension-history'
+import MainContainer from './MainContainer.vue'
+import Wrapper from './Wrapper.vue'
+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,
+			default: '',
+		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: ['update:content', 'ready', 'create:content'],
+
+	computed: {
+		editor() {
+			return this.$editor
+		},
+	},
+
+	created() {
+		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')
+
+			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)
+			}
+		})
+	},
+
+	updated() {
+		this.$editor.setEditable(!this.readOnly)
+	},
+
+	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>
+
+<style scoped>
+
+</style>

src/editor.js

@@ -269,3 +269,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 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'
@@ -21,6 +22,7 @@ export {
 	Keymap,
 	UserColor,
 	Markdown,
+	PlainTable,
 	PlainText,
 	RichText,
 	KeepSyntax,

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',
+})