BaseReader: Use a factory pattern for creating the extension list

Provide functions are neither called on the providing object nor
on the injecting object, so using `this` within provided functions
will refer to the global `this` for which `$emit` is not defined.
This uses a factory pattern so that `this` is bound to the injecting
object.

Also forwarding the `click-link` event is needed.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

3 files changed, 15 insertions, 10 deletions

diff --git a/src/components/BaseReader.vue b/src/components/BaseReader.vue
index 1f48b1f60..6b0e81a74 100644
--- a/src/components/BaseReader.vue
+++ b/src/components/BaseReader.vue
@@ -31,6 +31,7 @@ import { EditorContent } from '@tiptap/vue-2'
 export default {
 	name: 'BaseReader',
 	components: { EditorContent },
+	// extensions is a factory building a list of extensions for the editor
 	inject: ['renderHtml', 'extensions'],
 
 	props: {
@@ -65,7 +66,7 @@ export default {
 		createEditor() {
 			return new Editor({
 				content: this.htmlContent,
-				extensions: this.extensions,
+				extensions: this.extensions(),
 			})
 		},
 
diff --git a/src/components/PlainTextReader.vue b/src/components/PlainTextReader.vue
index 6d2ccf7a7..5d01acad7 100644
--- a/src/components/PlainTextReader.vue
+++ b/src/components/PlainTextReader.vue
@@ -37,7 +37,7 @@ export default {
 		renderHtml(content) {
 			return '<pre>' + escapeHtml(content) + '</pre>'
 		},
-		extensions: [PlainText],
+		extensions: () => [PlainText],
 	},
 
 	props: {
diff --git a/src/components/RichTextReader.vue b/src/components/RichTextReader.vue
index 8107ad2f9..68eaf633c 100644
--- a/src/components/RichTextReader.vue
+++ b/src/components/RichTextReader.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<BaseReader :content="content" />
+	<BaseReader :content="content" @click-link="(e, a) => $emit('click-link', e, a)" />
 </template>
 
 <script>
@@ -37,13 +37,17 @@ export default {
 		renderHtml(content) {
 			return markdownit.render(content)
 		},
-		extensions: [
-			RichText.configure({
-				link: {
-					onClick: (event, attrs) => this.$emit('click-link', event, attrs),
-				},
-			}),
-		],
+		extensions() {
+			return [
+				RichText.configure({
+					link: {
+						onClick: (event, attrs) => {
+							this.$emit('click-link', event, attrs)
+						},
+					},
+				}),
+			]
+		},
 	},
 
 	props: {