Add reference widget implementation

Signed-off-by: Julius Härtl <[email protected]>

README.md

@@ -13,6 +13,21 @@ Markdown can be used for basic text formatting.
 npm install --save @juliushaertl/vue-richtext
 ```
 
+## Usage
+
+### Importing the vue component
+
+```
+import { RichText } from '@juliushaertl/vue-richtext'
+```
+
+### Importing the shipped stylesheets
+
+```
+@import '@juliushaertl/vue-richtext/dist/style.css';
+
+```
+
 ## Basic usage with simple text placeholders
 
 - Input string: `The file {file} was added…`

src/ReferenceWidget.vue

@@ -0,0 +1,94 @@
+<template>
+	<div>
+		<div v-if="noAccess">
+			<p>You may not have access to this reference!</p>
+		</div>
+
+		<div v-else-if="reference && hasCustomWidget" ref="customWidget" class="widget-custom" />
+
+		<div v-else-if="reference && reference.openGraphObject && !hasCustomWidget" class="widget-default">
+			<div v-if="reference.openGraphObject.thumb" class="widget-default--image" :style="{ 'backgroundImage': 'url(' + reference.openGraphObject.thumb + ')' }" />
+			<p class="widget-default--title">
+				<strong>{{ reference.openGraphObject.name }}</strong>
+			</p>
+			<p class="widget-default--description">
+				{{ reference.openGraphObject.description }}
+			</p>
+			<p class="widget-default--link">
+				<a :href="reference.openGraphObject.link" target="_blank">{{ reference.openGraphObject.link }}</a>
+			</p>
+		</div>
+	</div>
+</template>
+<script>
+import { renderWidget, isWidgetRegistered } from './widgets.js'
+
+export default {
+	name: 'ReferenceWidget',
+	props: {
+		reference: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		hasCustomWidget() {
+			return isWidgetRegistered(this.reference.richObjectType)
+		},
+		noAccess() {
+			return this.reference && !this.reference.accessible
+		}
+	},
+	mounted() {
+		this.renderWidget()
+	},
+	methods: {
+		renderWidget() {
+			if (this.$refs.customWidget) {
+				this.$refs.customWidget.innerHTML = ''
+			}
+			if (this?.reference?.richObjectType === 'open-graph') {
+				return
+			}
+			this.$nextTick(() => {
+				// Waiting for the ref to become available
+				renderWidget(this.reference.richObjectType, this.reference.richObject, this.$refs.customWidget)
+			})
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.widget-custom {
+	max-width: 500px;
+	margin: auto;
+	margin-bottom: 10px;
+	padding: 12px;
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-primary-light);
+}
+
+.widget-default {
+	max-width: 500px;
+	margin: auto;
+	margin-bottom: 10px;
+	padding: 12px;
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-background-dark);
+
+	&--image {
+		// FIXME: open graph images are likely 1.91:1 ratio
+		height: 260px;
+		width: 500px;
+		background-position: center;
+		background-size: cover;
+	}
+
+	&--link a {
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>

src/References.vue

@@ -0,0 +1,88 @@
+<template>
+	<div :class="{'icon-loading': loading }">
+		<div v-for="reference in displayedReferences" :key="reference.openGraphObject.id">
+			<ReferenceWidget :reference="reference" />
+		</div>
+	</div>
+</template>
+<script>
+import ReferenceWidget from './ReferenceWidget.vue'
+
+export default {
+	name: 'References',
+	components: { ReferenceWidget },
+	props: {
+		text: {
+			type: String,
+			default: ''
+		},
+		referenceData: {
+			type: Object
+		},
+		limit: {
+			type: Number,
+			default: 5
+		}
+	},
+	data() {
+		return {
+			references: null,
+			loading: true
+		}
+	},
+	computed: {
+		firstReference() {
+			return this.references ? Object.values(this.references)[0] : null
+		},
+		displayedReferences() {
+			return this.references ? Object.values(this.references).slice(0, this.limit) : null
+		},
+		hasCustomWidget() {
+			return (reference) => !!widgets[reference.richObjectType]
+		},
+		noAccess() {
+			return (reference) => reference && !reference.accessible
+		}
+	},
+	watch: {
+		text: 'fetch'
+	},
+	mounted() {
+		this.fetch()
+	},
+	methods: {
+		fetch() {
+			this.loading = true
+			if (this.referenceData) {
+				this.references = this.referenceData
+				this.loading = false
+				return
+			}
+
+			fetch('http://nextcloud.dev.local/ocs/v2.php/references/extract?format=json', {
+				method: 'POST',
+				body: JSON.stringify({
+					text: this.text,
+					resolve: true,
+					requesttoken: window.oc_requesttoken,
+					limit: this.limit
+				}),
+				headers: {
+					'Content-Type': 'application/json',
+					requesttoken: window.oc_requesttoken
+				}
+			})
+				.then(response => response.json())
+				.then(json => {
+					console.log(json)
+					this.references = json.ocs.data.references
+					this.loading = false
+				})
+				.catch(error => {
+					console.error(error)
+					this.loading = false
+				})
+		}
+	}
+}
+</script>

src/RichText.vue

@@ -23,6 +23,7 @@
 
 <script>
 import { unified } from 'unified'
+import References from './References.vue'
 import markdown from 'remark-parse'
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
@@ -34,6 +35,9 @@ import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
 
 export default {
 	name: 'RichText',
+	components: {
+		References
+	},
 	props: {
 		text: {
 			type: String,
@@ -45,6 +49,14 @@ export default {
 				return {}
 			}
 		},
+		referenceLimit: {
+			type: Number,
+			default: 0
+		},
+		/** Provide data upfront to avoid extra http request */
+		references: {
+			type: Object
+		},
 		markdownCssClasses: {
 			type: Object,
 			default: () => {
@@ -102,7 +114,14 @@ export default {
 				}
 				return entry
 			})
-			return h('div', { class: 'rich-text--wrapper' }, placeholders.flat())
+			return h('div', { class: 'rich-text--wrapper' }, [
+				h('div', {}, placeholders.flat()),
+				this.referenceLimit > 0
+					? h('div', { class: 'rich-text--reference-widget' }, [
+						h(References, { props: { text: this.text, referenceData: this.references } })
+					])
+					: null
+			])
 		},
 		renderMarkdown(h) {
 			const renderedMarkdown = unified()
@@ -155,7 +174,14 @@ export default {
 				.processSync(this.text)
 				.result
 
-			return h('div', { class: 'rich-text--wrapper' }, [renderedMarkdown])
+			return h('div', { class: 'rich-text--wrapper' }, [
+				renderedMarkdown,
+				this.referenceLimit > 0
+					? h('div', { class: 'rich-text--reference-widget' }, [
+						h(References, { props: { text: this.text, referenceData: this.references } })
+					])
+					: null
+			])
 		}
 	},
 	render(h) {

src/widgets.js

@@ -0,0 +1,41 @@
+
+if (!window._vue_richtext_widgets) {
+	window._vue_richtext_widgets = {}
+}
+
+const isWidgetRegistered = (id) => {
+	return !!window._vue_richtext_widgets[id]
+}
+
+const registerWidget = (id, callback) => {
+	if (window._vue_richtext_widgets[id]) {
+		console.error('Widget for id ' + id + ' already registered')
+		return
+	}
+
+	window._vue_richtext_widgets[id] = {
+		id,
+		callback
+	}
+}
+
+const renderWidget = (id, richObjectData, el) => {
+	if (id === 'open-graph') {
+		return
+	}
+
+	if (!window._vue_richtext_widgets[id]) {
+		console.error('Widget for id ' + id + ' not registered')
+		return
+	}
+
+	window._vue_richtext_widgets[id].callback(richObjectData, el)
+}
+
+window._registerWidget = registerWidget
+
+export {
+	registerWidget,
+	renderWidget,
+	isWidgetRegistered
+}