Merge pull request #4780 from nextcloud/fix/editor_api

Fixes and additions to editor API

Author: mejo-

src/components/Editor.vue

@@ -43,13 +43,15 @@
 			<MainContainer v-if="hasEditor">
 				<!-- Readonly -->
 				<div v-if="readOnly" class="text-editor--readonly-bar">
-					<ReadonlyBar>
-						<Status :document="document"
-							:dirty="dirty"
-							:sessions="filteredSessions"
-							:sync-error="syncError"
-							:has-connection-issue="hasConnectionIssue" />
-					</ReadonlyBar>
+					<slot name="readonlyBar">
+						<ReadonlyBar>
+							<Status :document="document"
+								:dirty="dirty"
+								:sessions="filteredSessions"
+								:sync-error="syncError"
+								:has-connection-issue="hasConnectionIssue" />
+						</ReadonlyBar>
+					</slot>
 				</div>
 				<!-- Rich Menu -->
 				<template v-else>
@@ -660,6 +662,10 @@ export default {
 			this.emit('delete-image-node', imageUrl)
 		},
 
+		async save() {
+			await this.$syncService.save()
+		},
+
 		async close() {
 			if (this.currentSession && this.$syncService) {
 				try {

src/components/Editor/MarkdownContentEditor.vue

@@ -20,10 +20,14 @@
   -->
 
 <template>
-	<Wrapper :content-loaded="true">
+	<Wrapper :content-loaded="true"
+		:show-outline-outside="showOutlineOutside"
+		@outline-toggled="outlineToggled">
 		<MainContainer>
 			<MenuBar v-if="!readOnly" :autohide="false" />
-			<ReadonlyBar v-else />
+			<slot v-else name="readonlyBar">
+				<ReadonlyBar />
+			</slot>
 			<ContentContainer />
 		</MainContainer>
 	</Wrapper>
@@ -33,7 +37,6 @@
 import Wrapper from './Wrapper.vue'
 import MainContainer from './MainContainer.vue'
 import MenuBar from '../Menu/MenuBar.vue'
-import { useOutlineActions, useOutlineStateMixin } from './Wrapper.provider.js'
 import { Editor } from '@tiptap/core'
 /* eslint-disable import/no-named-as-default */
 import History from '@tiptap/extension-history'
@@ -47,7 +50,7 @@ import ContentContainer from './ContentContainer.vue'
 export default {
 	name: 'MarkdownContentEditor',
 	components: { ContentContainer, ReadonlyBar, MenuBar, MainContainer, Wrapper },
-	mixins: [useOutlineStateMixin, useOutlineActions, useLinkClickHook],
+	mixins: [useLinkClickHook],
 	provide() {
 		const val = {}
 
@@ -72,16 +75,17 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showOutlineOutside: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:content'],
 
 	computed: {
 		htmlContent() {
 			return this.renderHtml(this.content)
 		},
-		showOutline() {
-			return this.$outlineState.visible
-		},
 	},
 
 	watch: {
@@ -137,6 +141,11 @@ export default {
 		updateContent() {
 			this.$editor.commands.setContent(this.htmlContent, true)
 		},
+
+		outlineToggled(visible) {
+			this.$emit('outline-toggled', visible)
+			this.$parent.$emit('outline-toggled', visible)
+		},
 	},
 }
 </script>

src/editor.js

@@ -46,6 +46,10 @@ class TextEditorEmbed {
 		return this
 	}
 
+	#getEditorComponent() {
+		return this.#vm.$children[0]
+	}
+
 	onLoaded(onLoadedCallback = () => {}) {
 		this.#vm.$on('ready', () => {
 			onLoadedCallback()
@@ -60,6 +64,13 @@ class TextEditorEmbed {
 		return this
 	}
 
+	onOutlineToggle(onOutlineToggleCallback = () => {}) {
+		this.#vm.$on('outline-toggled', (visible) => {
+			onOutlineToggleCallback(visible)
+		})
+		return this
+	}
+
 	render(el) {
 		el.innerHTML = ''
 		const element = document.createElement('div')
@@ -77,7 +88,16 @@ class TextEditorEmbed {
 		// Update reactive prop for MarkdownContentEditor
 		this.#vm.$set(this.#data, 'content', content)
 		// Call setContent for file based Editor
-		this.#vm.$children[0]?.setContent?.(content)
+		this.#getEditorComponent()?.setContent?.(content)
+		return this
+	}
+
+	async save() {
+		return this.#getEditorComponent().save?.()
+	}
+
+	setShowOutline(value) {
+		this.#vm.$set(this.#data, 'showOutlineOutside', value)
 		return this
 	}
 
@@ -87,11 +107,11 @@ class TextEditorEmbed {
 	}
 
 	insertAtCursor(content) {
-		this.#vm.$children[0].$editor.chain().insertContent(content).focus().run()
+		this.#getEditorComponent().$editor.chain().insertContent(content).focus().run()
 	}
 
 	focus() {
-		this.#vm.$children[0].$editor.focus()
+		this.#getEditorComponent().$editor.commands.focus()
 	}
 
 	#registerDebug() {
@@ -113,12 +133,20 @@ window.OCA.Text.createEditor = async function({
 	// File mode is enabled by setting the fileId, otherwise content needs to be provided
 	fileId = undefined,
 	filePath = undefined,
+	shareToken = null,
 
 	content = '',
 
 	readOnly = false,
+	autofocus = true,
+	readonlyBar = {
+		component: null,
+		props: null,
+	},
 
+	onLoaded = () => {},
 	onUpdate = ({ markdown }) => {},
+	onOutlineToggle = (visible) => {},
 	onLinkClick = undefined,
 	onFileInsert = undefined,
 	onMentionSearch = undefined,
@@ -128,6 +156,7 @@ window.OCA.Text.createEditor = async function({
 	const { default: Editor } = await import(/* webpackChunkName: "editor" */'./components/Editor.vue')
 
 	const data = Vue.observable({
+		showOutlineOutside: false,
 		readOnly,
 		content,
 	})
@@ -154,25 +183,43 @@ window.OCA.Text.createEditor = async function({
 			return data
 		},
 		render: h => {
+			const scopedSlots = readonlyBar?.component
+				? {
+					readonlyBar: () => {
+						return h(readonlyBar.component, {
+							props: readonlyBar.props,
+						})
+					},
+				}
+				: {}
+
 			return fileId
 				? h(Editor, {
 					props: {
 						fileId,
+						relativePath: filePath,
+						shareToken,
 						mime: 'text/markdown',
 						active: true,
-						relativePath: filePath,
+						autofocus,
+						showOutlineOutside: data.showOutlineOutside,
 					},
+					scopedSlots,
 				})
 				: h(MarkdownContentEditor, {
 					props: {
 						content: data.content,
 						readOnly: data.readOnly,
+						showOutlineOutside: data.showOutlineOutside,
 					},
+					scopedSlots,
 				})
 		},
 		store,
 	})
 	return new TextEditorEmbed(vm, data)
+		.onLoaded(onLoaded)
 		.onUpdate(onUpdate)
+		.onOutlineToggle(onOutlineToggle)
 		.render(el)
 }