fix(editorApi): Allow to toggle outline via the API

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

src/components/Editor/MarkdownContentEditor.vue

@@ -20,7 +20,8 @@
   -->
 
 <template>
-	<Wrapper :content-loaded="true">
+	<Wrapper :content-loaded="true"
+		:show-outline-outside="showOutlineOutside">
 		<MainContainer>
 			<MenuBar v-if="!readOnly" :autohide="false" />
 			<ReadonlyBar v-else />
@@ -72,6 +73,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showOutlineOutside: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:content'],
 

src/editor.js

@@ -60,6 +60,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')
@@ -81,6 +88,11 @@ class TextEditorEmbed {
 		return this
 	}
 
+	setShowOutline(value) {
+		this.#vm.$set(this.#data, 'showOutlineOutside', value)
+		return this
+	}
+
 	setReadOnly(value) {
 		this.#vm.$set(this.#data, 'readOnly', value)
 		return this
@@ -119,6 +131,7 @@ window.OCA.Text.createEditor = async function({
 	readOnly = false,
 
 	onUpdate = ({ markdown }) => {},
+	onOutlineToggle = (visible) => {},
 	onLinkClick = undefined,
 	onFileInsert = undefined,
 	onMentionSearch = undefined,
@@ -128,6 +141,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,
 	})
@@ -161,18 +175,21 @@ window.OCA.Text.createEditor = async function({
 						mime: 'text/markdown',
 						active: true,
 						relativePath: filePath,
+						showOutlineOutside: data.showOutlineOutside,
 					},
 				})
 				: h(MarkdownContentEditor, {
 					props: {
 						content: data.content,
 						readOnly: data.readOnly,
+						showOutlineOutside: data.showOutlineOutside,
 					},
 				})
 		},
 		store,
 	})
 	return new TextEditorEmbed(vm, data)
 		.onUpdate(onUpdate)
+		.onOutlineToggle(onOutlineToggle)
 		.render(el)
 }