Implement reference preview rendering

[juliusknorr]

• Add stylesheets
• expose widget API
• use axios for fetching
• decide to finish vite migration Switch to vite for packaging #707 or push forward without markdown support for now
• Validate that bundling is working properly
• Default widget design review
  • Move image to the left
  • One header line
  • 3 summary lines
  • 1 link line
  • All text with equal spacing
  • Border 2px solid
• Add regex matching to only perform requests if a reference is matched
• If the preview can not be loaded, there should not be extra whitespace
• Link subline could get its https:// / http:// cut from the beginning so more of the link is visible

Follow ups

• Talk could show this preview already when you paste a link in the composer, above your text, much like e.g. Signal does (similar style as for replying to others) Implement link previews nextcloud/spreed#7822 (comment)
• unify regexes Unify regexes and reference server once #768
• Files widget like app sidebar / text attachments -> will be done in server File widget for references nextcloud/server#33755

Usage

Fetch reference data on the fly:

<RichText :text="text" :arguments="args" :autolink="true" :reference-limit="10" />

Provide reference data on the fly:

<RichText :text="text" :arguments="args" :autolink="true" :references="referenceData" :reference-limit="1" />

As an alternative the ReferenceList component is also exported so can be used standalone as well.

Registering a custom view

import { registerWidget } from '@nextcloud/vue-richtext'
import FileWidget from './FileWidget.vue'

registerWidget('file', (el, { richObjectType, richObject, accessible }) => {
	const Widget = Vue.extend(FileWidget)
	new Widget({
		propsData: {
			richObjectType,
			richObject,
			accessible
		}
	}).$mount(el)
})

Screenshot

[nickvergessen]

I get this when trying to build:

'URL_PATTERN_AUTOLINK' is not exported by src/helpers.js, imported by src/autolink.js

[juliusknorr]

Will push shortly with the compact mode adjustment that I just made together with @jancborchardt

[nickvergessen]

Works in talk main view. The compact handling can be done in a follow up.

[juliusknorr]

Published as @nextcloud/[email protected]