Implement reference picker #863

julien-nc · 2022-12-20T11:45:13Z

refs nextcloud/server#31667
requires nextcloud/server#35557

implement reference picker
- first step: reference provider picker (multi select)
- second step: vanilla input to enter a link
- alternative second step if provider is searchable: multi select to search with all search providers supported by the reference provider
add mechanism to allow apps to inject a custom picker component

The reference picker gets the reference provider list via an initial state provided by the server. Whatever page using the reference picker should have dispatched the RenderReferenceEvent to trigger the production of the initial state.

Each reference provider can declare a list of supported unified search providers. Those search provider will be used if no custom link picker is provided. The search UI is pretty similar to the core unified search: small thumbnail, a title and a sub line.

If the search UI does not fit the needs of the reference provider, it is possible to register a custom component to let users choose an element to get a link in the end. This component must emit the submit event with the link as event data. It an also emit the cancel event to go back to the reference provider picker.

To test this PR, one can:

use Extend reference API for (future) frontend picker nextcloud/server#35557
use the reference-discovery branch of the integration_github app (don't forget to link with @nextcloud/vue-richtext while having the enh/noid/reference-picker branch checked out)
go to the "Connected accounts" admin settings where a test textarea+button can be found to use the reference picker

Remaining questions/issues/todos:

There is no translations in vue-richtext but this brings strings that should be translated.
We should find a way to use this reference picker in the RichText component (when typing a special character and/or when receiving an event via the NC event bus and/or via a component method call)

julien-nc · 2022-12-20T16:51:12Z

Here is a little demo with 3 reference providers:

basic "GitHub permalink" with no supported search provider but a custom picker element registered (a button to submit a hardcoded result)
"GitHub issue/pr" which supports 2 search providers
Giphy (in development) which registers a complex custom picker element (a modal to have a nicer UI to search for gifs)

The goal would be to open this "link picker" in Text and in the RichText component (that will be used by Talk one day).
The text area here is just for demo purposes.

vokoscreenNG-2022-12-20_17-44-27.mp4

julien-nc · 2022-12-20T16:55:06Z

@nimishavijay @jancborchardt Do you like it? 😁 Any obvious visible design mistake?

juliushaertl · 2022-12-28T09:23:06Z

src/referencePicker/CustomPickerElement.vue

+			}
+
+			this.renderResult = renderCustomPickerElement(this.$refs.customElement, { providerId: this.provider.id, accessible: false })
+			if (this.renderResult.object.$on) {


Suggested change

if (this.renderResult.object.$on) {

if (this.renderResult?.object?.$on) {

Maybe also check if object is a vue instance here

jancborchardt

Very cool! :) Some design feedback:

Would the dropdown element on the right not open in place of where you type # (or /) like in Notion, instead of off to the right?
The "GitHub code permalink" option is a bit strange since you can just put in any link and it will just be put in the text – you could just type it in the text itself or paste it. Is there a benefit doing it this way? Otherwise I’d say let’s remove the entry?
The standard from Notion seems to be the / character to invoke these kinds of pickers. Could we switch to that? (We can also support both so people familiar with Notion and GitHub are familiar.)
The Giphy gif picker could use a nice emptycontent view. In messaging apps that is often just popular Gifs, Giphy’s API probaby has that?

juliushaertl · 2022-12-29T14:04:46Z

Notes from the design call we had earlier today with @nimishavijay

Search on custom pickers would be nice (e.g. for the file picker)
Could already be done by having two providers (pick file / search file)
Refine what you are looking for
- Possibly provide hints for generic search providers like repo:... syntax for github
Probably nice for demo purposes:
- YouTube provider with searach
How to type for first input
- Behaviour should keep the text typed in the input field like in notion/emoji picker
- We probably should rethink about which character to pick to not interfere with markdown typing
It is up to developers to be able to list their providers even if there is no fancy search
- Mainly to increase visibility of the feature

jancborchardt · 2023-01-09T11:30:52Z

@julien-nc added a point to my review:

The standard from Notion seems to be the / character to invoke these kinds of pickers. Could we switch to that? (We can also support both so people familiar with Notion and GitHub are familiar.)

julien-nc · 2023-01-09T11:50:57Z

@jancborchardt Thanks for the review. Triggering the link picker with / might conflict with Talk commands. Let's talk about that in the design review call.

The overall appearance has changed since the screencast. Choosing the link provider can now be done like choosing an emoji.

julien-nc · 2023-01-19T11:22:03Z

link.picker.mp4

Current state:

3 types of providers
- "raw": Just there to let users know a certain type of link will be rendered. It lets users enter a link and shows a preview on the fly
- "search": Linked with one or more search providers. It lets users enter a search query and shows combined results from all related search providers
- "custom picker": Shows a custom component registered by the reference provider

There are 3 ways to open the link picker:

Just use the ReferencePicker component anywhere we want
Using the ReferencePickerModal component (or the helper function "getLinkWithPicker" which takes care of everything and returns a promise which resolves with the link
In the RichContentEditable component by typing "/" and selecting a provider. The picker will is opened with the provider already selected

jancborchardt

Wow, really amazing! :) I think it would be best to merge it so we can see it in action in different environments like Text, Talk, comments etc.

Only detail note: When writing "GitHub issues, pull reuquests […]", the "p" of pull requests is capital, but should be lowercase. :)

juliushaertl

Just minor comments, otherwise good to go 🚀

package.json

src/referencePicker/CustomPickerElement.vue

juliushaertl · 2023-01-26T22:01:52Z

src/referencePicker/RawLinkInput.vue

+			loading: false,
+			reference: null,
+			abortController: null,
+			// TODO translate?


Let's have this as a follow up task so we can get a first release out.

Ok and let's keep the comments if you don't mind.

src/referencePicker/RawLinkInput.vue

src/referencePicker/ReferencePickerModal.vue

julien-nc · 2023-01-27T13:10:29Z

@juliushaertl Let's wait a bit before merging this. There is still one thing left to do from the design review: get rid of the "raw link" providers and systematically add a "Any link" one as the last suggestion that opens the raw link input (with dynamic preview).

Do you agree with this idea?

juliushaertl · 2023-01-27T14:28:49Z

Sounds good

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

…gn-icons Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

julien-nc · 2023-01-30T11:19:16Z

@juliushaertl Rebased on master, added JS debug log for providers without related search providers or without custom picker component.
Cleaned up a little bit. Ready for review.

juliushaertl

LGTM 👍

julien-nc added the enhancement New feature or request label Dec 20, 2022

julien-nc requested a review from juliushaertl December 20, 2022 11:45

juliushaertl reviewed Dec 28, 2022

View reviewed changes

jancborchardt suggested changes Dec 29, 2022

View reviewed changes

julien-nc force-pushed the enh/noid/reference-picker branch from 23833fb to 101becc Compare January 19, 2023 10:20

julien-nc requested review from jancborchardt and juliushaertl January 19, 2023 11:22

jancborchardt approved these changes Jan 19, 2023

View reviewed changes

juliushaertl approved these changes Jan 26, 2023

View reviewed changes

juliushaertl mentioned this pull request Jan 26, 2023

Link picker nextcloud/text#3700

Merged

13 tasks

julien-nc requested a review from juliushaertl January 27, 2023 13:10

julien-nc added 2 commits January 30, 2023 12:15

implement reference link picker

9fabe0a

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

install @nextcloud/initial-state @nextcloud/vue and vue-material-desi…

2a4fbb2

…gn-icons Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

julien-nc force-pushed the enh/noid/reference-picker branch from 8858cae to 2a4fbb2 Compare January 30, 2023 11:18

juliushaertl approved these changes Jan 30, 2023

View reviewed changes

juliushaertl merged commit 1a999ca into master Jan 30, 2023

juliushaertl deleted the enh/noid/reference-picker branch January 30, 2023 11:48

juliushaertl mentioned this pull request Jan 30, 2023

Escape key is not bound to link picker modal #885

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement reference picker #863

Implement reference picker #863

julien-nc commented Dec 20, 2022

julien-nc commented Dec 20, 2022 •

edited

julien-nc commented Dec 20, 2022

juliushaertl Dec 28, 2022

juliushaertl Dec 28, 2022

jancborchardt left a comment •

edited by julien-nc

juliushaertl commented Dec 29, 2022

jancborchardt commented Jan 9, 2023

julien-nc commented Jan 9, 2023

julien-nc commented Jan 19, 2023

jancborchardt left a comment

juliushaertl left a comment

juliushaertl Jan 26, 2023

julien-nc Jan 27, 2023

julien-nc commented Jan 27, 2023 •

edited

juliushaertl commented Jan 27, 2023

julien-nc commented Jan 30, 2023

juliushaertl left a comment

	if (this.renderResult.object.$on) {
	if (this.renderResult?.object?.$on) {

Implement reference picker #863

Implement reference picker #863

Conversation

julien-nc commented Dec 20, 2022

julien-nc commented Dec 20, 2022 • edited

julien-nc commented Dec 20, 2022

juliushaertl Dec 28, 2022

Choose a reason for hiding this comment

juliushaertl Dec 28, 2022

Choose a reason for hiding this comment

jancborchardt left a comment • edited by julien-nc

Choose a reason for hiding this comment

juliushaertl commented Dec 29, 2022

jancborchardt commented Jan 9, 2023

julien-nc commented Jan 9, 2023

julien-nc commented Jan 19, 2023

jancborchardt left a comment

Choose a reason for hiding this comment

juliushaertl left a comment

Choose a reason for hiding this comment

juliushaertl Jan 26, 2023

Choose a reason for hiding this comment

julien-nc Jan 27, 2023

Choose a reason for hiding this comment

julien-nc commented Jan 27, 2023 • edited

juliushaertl commented Jan 27, 2023

julien-nc commented Jan 30, 2023

juliushaertl left a comment

Choose a reason for hiding this comment

julien-nc commented Dec 20, 2022 •

edited

jancborchardt left a comment •

edited by julien-nc

julien-nc commented Jan 27, 2023 •

edited