fix(editorApi): Allow to pass in ReadonlyBar component

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

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>

src/components/Editor/MarkdownContentEditor.vue

@@ -25,7 +25,9 @@
 		@outline-toggled="outlineToggled">
 		<MainContainer>
 			<MenuBar v-if="!readOnly" :autohide="false" />
-			<ReadonlyBar v-else />
+			<slot v-else name="readonlyBar">
+				<ReadonlyBar />
+			</slot>
 			<ContentContainer />
 		</MainContainer>
 	</Wrapper>

src/editor.js

@@ -139,6 +139,10 @@ window.OCA.Text.createEditor = async function({
 
 	readOnly = false,
 	autofocus = true,
+	readonlyBar = {
+		component: null,
+		props: null,
+	},
 
 	onLoaded = () => {},
 	onUpdate = ({ markdown }) => {},
@@ -179,6 +183,16 @@ 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: {
@@ -190,13 +204,15 @@ window.OCA.Text.createEditor = async function({
 						autofocus,
 						showOutlineOutside: data.showOutlineOutside,
 					},
+					scopedSlots,
 				})
 				: h(MarkdownContentEditor, {
 					props: {
 						content: data.content,
 						readOnly: data.readOnly,
 						showOutlineOutside: data.showOutlineOutside,
 					},
+					scopedSlots,
 				})
 		},
 		store,