Link preview widgets #2977

juliusknorr · 2022-09-21T13:55:26Z

Implement link preview widgets for paragraphs that only contain a link.

julien-nc

I get 404 responses for open-graph link previews (/core/references/preview/3097fca9b1ec8942c4305e550ef1b50a)
The RenderReferenceEvent is not emitted by Text so the reference frontend stuff is not loaded with Text so we get Widget for rich object type integration_github not registered for every provider.

mejo- · 2022-09-21T14:16:39Z

Whoohoo, super nice 😍 Works like a charm.

I wonder though, whether there should be an option to remove the preview widget. Imagine e.g. a list of links. Legibility would decrease with the huge preview widgets in between each item in my eyes.

package.json

vinicius73 · 2022-09-21T14:23:35Z

src/nodes/ParagraphView.vue

+	},
+	methods: {
+		getTextReference(text) {
+			const PATTERN = /(^)(https?:\/\/)?((?:[-A-Z0-9+_]+\.)+[-A-Z]+(?:\/[-A-Z0-9+&@#%?=~_|!:,.;()]*)*)($)/ig


we can move it to outside of component methods

Let me export that from the @nextcloud/vue-richtext one separately

mejo- · 2022-09-21T14:25:52Z

Another frontend comment: I think it would look better if we displayed either the link or the widget. Now the link is always duplicated. Once the typed text and a second time at the bottom of the widget.

Even though, thinking about it, no idea how the link could be updated if only the widget is displayed.

src/nodes/ParagraphView.vue

juliusknorr · 2022-09-21T14:51:16Z

I get 404 responses for open-graph link previews (/core/references/preview/3097fca9b1ec8942c4305e550ef1b50a)

Do you have memcache enabled?

The RenderReferenceEvent is not emitted by Text so the reference frontend stuff is not loaded with Text so we get Widget for rich object type integration_github not registered for every provider.

Ah good point, will add that.

juliusknorr · 2022-09-21T14:53:29Z

Another frontend comment: I think it would look better if we displayed either the link or the widget. Now the link is always duplicated. Once the typed text and a second time at the bottom of the widget.

Even though, thinking about it, no idea how the link could be updated if only the widget is displayed.

Yes, updating was the main reason to always show it. About the option to hide it, I'd agree that it would be nice to have, but we cannot really persist it in markdown, so it would need a per user setting that we store or something like this.

jancborchardt · 2022-09-21T14:55:47Z

Design feedback moved to review :)

jancborchardt · 2022-09-21T14:58:05Z

@mejo- agree, we discussed before there should ideally be a "close x" on the top right to hide the preview, but decided it's something for a future iteration.

And we also talked about showing both vs only showing the preview, and came to the same conclusion as you with the editing issue.

In a future version, we could make it so that only the preview is shown, and it has a 3-dot menu for "Edit link" and "Hide preview"

mejo- · 2022-09-22T07:50:26Z

About the option to hide it, I'd agree that it would be nice to have, but we cannot really persist it in markdown, so it would need a per user setting that we store or something like this.

Yeah, I see the point. I wondered whether it would be an option to add the preview as a separate node to markdown. There's e.g. junkawa/markdown-it-link-preview. The preview would be auto-generated when inserting an URL, but once it got removed manually it would stay away persistently in the document. What do you think about it?

And we also talked about showing both vs only showing the preview, and came to the same conclusion as you with the editing issue.
In a future version, we could make it so that only the preview is shown, and it has a 3-dot menu for "Edit link" and "Hide preview"

That's a great idea!

juliusknorr · 2022-09-22T10:27:41Z

/backport to stable25

jancborchardt

Good stuff! :) Design feedback:

There seems to be some slight left margin of the container, making it not fully left-aligned with the text
The container has the same mrgin to top and bottom, making it unclear which link it belongs to. It should have a bit less margin topl the top and a bit more to the bottom. (E.g. --default-grid-baseline on top, and *3 for bottom. – or *2 top and *4 bottom, whatever looks better.)
The container has more padding below the last line of text (link) than above the title. Maybe we need to reduce the image size a bit to fix this?

Possibly these have to be fixed in the component instead?

julien-nc

woop woop

juliusknorr · 2022-10-10T17:33:49Z

I could not reproduce the failures reliably locally and they seem to be unrelated, so I'd consider failing cypress tests (outside of the link related ones) as not blocking for the merge.

Signed-off-by: Julius Härtl <jus@bitgrid.net> Address review feedback Signed-off-by: Julius Härtl <jus@bitgrid.net>

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliusknorr · 2022-10-12T12:13:47Z

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

backportbot-nextcloud · 2022-10-12T14:33:27Z

The backport to stable25 failed. Please do this backport manually.

juliusknorr requested review from vinicius73, julien-nc and max-nextcloud September 21, 2022 13:55

juliusknorr added this to the Nextcloud 25 milestone Sep 21, 2022

juliusknorr added the 3. to review label Sep 21, 2022

juliusknorr requested a review from jancborchardt September 21, 2022 13:56

julien-nc requested changes Sep 21, 2022

View reviewed changes

mejo- reviewed Sep 21, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

vinicius73 reviewed Sep 21, 2022

View reviewed changes

src/nodes/ParagraphView.vue Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

blizzz mentioned this pull request Sep 22, 2022

25.0.0 RC 1 nextcloud/server#34185

Merged

2 tasks

blizzz modified the milestones: Nextcloud 25, Nextcloud 26 Sep 22, 2022

julien-nc mentioned this pull request Sep 22, 2022

Reference widget adjustments for Text nextcloud/deck#4069

Merged

2 tasks

jancborchardt requested changes Sep 26, 2022

View reviewed changes

julien-nc self-requested a review September 28, 2022 17:06

juliusknorr force-pushed the enh/references branch 2 times, most recently from e8d694c to 43f1433 Compare September 28, 2022 19:03

julien-nc approved these changes Sep 28, 2022

View reviewed changes

juliusknorr force-pushed the enh/references branch 2 times, most recently from 986b1db to 3387303 Compare October 3, 2022 19:37

juliusknorr force-pushed the enh/references branch from 18cebfa to b5696b2 Compare October 5, 2022 12:07

julien-nc force-pushed the enh/references branch from b5696b2 to bbec680 Compare October 5, 2022 23:08

juliusknorr force-pushed the enh/references branch 3 times, most recently from 66964dd to fde3e3f Compare October 10, 2022 17:32

juliusknorr added the enhancement New feature or request label Oct 11, 2022

juliusknorr force-pushed the enh/references branch 3 times, most recently from 46e853a to 3ceb1bf Compare October 12, 2022 10:37

juliusknorr and others added 4 commits October 12, 2022 13:06

Use vue-richtext for rendering paragraph widget

22725ea

Signed-off-by: Julius Härtl <jus@bitgrid.net> Address review feedback Signed-off-by: Julius Härtl <jus@bitgrid.net>

dispatch RenderReferenceEvent when loading text-viewer script

a1f07d8

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

Add cypress tests

d768109

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Add @nextcloud/vue-richtext

ad729fc

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliusknorr force-pushed the enh/references branch from 3ceb1bf to ad729fc Compare October 12, 2022 11:06

Compile assets

babcc49

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

juliusknorr merged commit 164b6c9 into master Oct 12, 2022

juliusknorr deleted the enh/references branch October 12, 2022 14:31

backportbot-nextcloud bot added the backport-request label Oct 12, 2022

juliusknorr mentioned this pull request Oct 12, 2022

[stable25] Link previews #3185

Merged

juliusknorr removed the backport-request label Oct 14, 2022

julien-nc mentioned this pull request Oct 21, 2022

New Element: link preview or bookmark #683

Closed

juliusknorr mentioned this pull request Nov 8, 2022

Add new features to RichTextReader #2919

Closed

5 tasks

meonkeys mentioned this pull request Dec 8, 2022

File open always triggers save and overwrites last modified date #2337

Closed

blizzz mentioned this pull request Feb 9, 2023

25.0.4 RC1 nextcloud/server#36560

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Link preview widgets #2977

Link preview widgets #2977

juliusknorr commented Sep 21, 2022 •

edited

Loading

julien-nc left a comment

mejo- commented Sep 21, 2022

vinicius73 Sep 21, 2022

juliusknorr Sep 28, 2022

mejo- commented Sep 21, 2022

juliusknorr commented Sep 21, 2022

juliusknorr commented Sep 21, 2022

jancborchardt commented Sep 21, 2022 •

edited

Loading

This comment was marked as resolved.

jancborchardt commented Sep 21, 2022

mejo- commented Sep 22, 2022

juliusknorr commented Sep 22, 2022

jancborchardt left a comment •

edited by juliusknorr

Loading

julien-nc left a comment

juliusknorr commented Oct 10, 2022

juliusknorr commented Oct 12, 2022

backportbot-nextcloud bot commented Oct 12, 2022

Link preview widgets #2977

Link preview widgets #2977

Conversation

juliusknorr commented Sep 21, 2022 • edited Loading

julien-nc left a comment

Choose a reason for hiding this comment

mejo- commented Sep 21, 2022

vinicius73 Sep 21, 2022

Choose a reason for hiding this comment

juliusknorr Sep 28, 2022

Choose a reason for hiding this comment

mejo- commented Sep 21, 2022

juliusknorr commented Sep 21, 2022

juliusknorr commented Sep 21, 2022

jancborchardt commented Sep 21, 2022 • edited Loading

This comment was marked as resolved.

jancborchardt commented Sep 21, 2022

mejo- commented Sep 22, 2022

juliusknorr commented Sep 22, 2022

jancborchardt left a comment • edited by juliusknorr Loading

Choose a reason for hiding this comment

julien-nc left a comment

Choose a reason for hiding this comment

juliusknorr commented Oct 10, 2022

juliusknorr commented Oct 12, 2022

backportbot-nextcloud bot commented Oct 12, 2022

juliusknorr commented Sep 21, 2022 •

edited

Loading

jancborchardt commented Sep 21, 2022 •

edited

Loading

jancborchardt left a comment •

edited by juliusknorr

Loading