Add API for toggeling outline view to BaseReader component

Export `OUTLINE_STATE` and `OUTLINE_ACTIONS` in NPM package.

Also add `EditorOutline` to `BaseReader` dom structure, so it can
be toggled by providing `OUTLINE_STATE` and `OUTLINE_ACTIONS` from
a parent vue component.

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

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/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 }