Add APIs for outline state to RichTextReader and WrapperComponent

src/components/BaseReader.vue

@@ -21,16 +21,50 @@
   -->
 
 <template>
-	<EditorContent v-if="$editor" id="read-only-editor" :editor="$editor" />
+	<div data-text-el="editor-content-wrapper"
+		class="content-wrapper text-editor__content-wrapper"
+		:class="{
+			'--show-outline': showOutline
+		}">
+		<div v-if="showOutline" class="text-editor__content-wrapper__left">
+			<EditorOutline />
+		</div>
+		<EditorContent v-if="$editor"
+			id="read-only-editor"
+			class="editor__content text-editor__content"
+			:editor="$editor" />
+		<div class="text-editor__content-wrapper__right" />
+	</div>
 </template>
 
 <script>
 import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue-2'
+import { EDITOR } from './Editor.provider.js'
+import { useOutlineStateMixin, useOutlineActions } from './Editor/Wrapper.provider.js'
+import EditorOutline from './Editor/EditorOutline.vue'
 
 export default {
 	name: 'BaseReader',
-	components: { EditorContent },
+	components: {
+		EditorContent,
+		EditorOutline,
+	},
+
+	mixins: [useOutlineStateMixin, useOutlineActions],
+
+	provide() {
+		const val = {}
+
+		Object.defineProperties(val, {
+			[EDITOR]: {
+				get: () => this.$editor,
+			},
+		})
+
+		return val
+	},
+
 	// extensions is a factory building a list of extensions for the editor
 	inject: ['renderHtml', 'extensions'],
 
@@ -45,6 +79,9 @@ export default {
 		htmlContent() {
 			return this.renderHtml(this.content)
 		},
+		showOutline() {
+			return this.$outlineState.visible
+		},
 	},
 
 	watch: {
@@ -76,3 +113,26 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.editor__content {
+	max-width: var(--text-editor-max-width);
+	margin: auto;
+	position: relative;
+	width: 100%;
+}
+
+.text-editor__content-wrapper {
+	--side-width: calc((100% - var(--text-editor-max-width)) / 2);
+	display: grid;
+	grid-template-columns: 1fr auto;
+	&.--show-outline {
+		grid-template-columns: var(--side-width) auto var(--side-width);
+	}
+	.text-editor__content-wrapper__left,
+	.text-editor__content-wrapper__right {
+		height: 100%;
+		position: relative;
+	}
+}
+</style>

src/components/Editor.vue

@@ -32,7 +32,9 @@
 			:sync-error="syncError"
 			:has-connection-issue="hasConnectionIssue"
 			:content-loaded="contentLoaded"
-			:show-author-annotations="showAuthorAnnotations">
+			:show-author-annotations="showAuthorAnnotations"
+			:show-outline-outside="showOutlineOutside"
+			@outline-toggled="outlineToggled">
 			<MainContainer v-if="$editor">
 				<!-- Readonly -->
 				<div v-if="readOnly" class="text-editor--readonly-bar">
@@ -213,6 +215,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showOutlineOutside: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -723,6 +729,10 @@ export default {
 			logger.debug('HTML, as rendered in the browser by Tiptap')
 			console.debug(editor.getHTML())
 		},
+
+		outlineToggled(visible) {
+			this.$parent.$emit('outline-toggled', visible)
+		},
 	},
 }
 </script>

src/components/Editor/EditorOutline.vue

@@ -55,9 +55,8 @@ export default {
 <style lang="scss" scoped>
 .editor--outline {
 	width:  300px;
-	padding: 0 10px;
+	padding: 0 10px 10px 10px;
 	position: fixed;
-	height: calc(100% - 100px);
 	overflow: auto;
 
 	&-mobile {

src/components/Editor/Wrapper.vue

@@ -77,6 +77,10 @@ export default {
 			type: Boolean,
 			require: true,
 		},
+		showOutlineOutside: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data: () => ({
@@ -107,6 +111,13 @@ export default {
 			return this.viewWidth > 1265
 		},
 	},
+
+	watch: {
+		'showOutlineOutside'() {
+			this.outline.visible = this.showOutlineOutside
+		},
+	},
+
 	mounted() {
 		this.outline.enable = this.isAbleToShowOutline
 
@@ -121,6 +132,7 @@ export default {
 	methods: {
 		outlineToggle() {
 			this.outline.visible = !this.outline.visible
+			this.$emit('outline-toggled', this.outline.visible)
 		},
 	},
 

src/components/ViewerComponent.vue

@@ -26,7 +26,8 @@
 		:active="active"
 		:autofocus="autofocus"
 		:share-token="shareToken"
-		:mime="mime" />
+		:mime="mime"
+		:show-outline-outside="showOutlineOutside" />
 </template>
 
 <script>
@@ -62,6 +63,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		showOutlineOutside: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	beforeMount() {
 		// FIXME Dirty fix to avoid recreating the component on stable16

src/package.js

@@ -23,5 +23,6 @@
 import RichTextReader from './components/RichTextReader.vue'
 import AttachmentResolver from './services/AttachmentResolver.js'
 import { ATTACHMENT_RESOLVER } from './components/Editor.provider.js'
+import { OUTLINE_STATE, OUTLINE_ACTIONS } from './components/Editor/Wrapper.provider.js'
 
-export { RichTextReader, AttachmentResolver, ATTACHMENT_RESOLVER }
+export { RichTextReader, AttachmentResolver, ATTACHMENT_RESOLVER, OUTLINE_STATE, OUTLINE_ACTIONS }