Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add link picker in RichContentEditable with tribute #3708

Merged

Conversation

julien-nc
Copy link
Contributor

@julien-nc julien-nc commented Feb 1, 2023

This integrates the vue-richtext's link picker in RichContentEditable with TributeJS. The trigger is "/". The item list is obtained from a vue-richtext function call.

The workflow:

  • type /
  • choose a link provider
  • this opens a modal which contains either
    • a generic search (using one or multiple unified search providers)
    • a custom picker element
  • user does the work which results in getting a link
  • the link is inserted in the RCE content

As picking a link is asynchronous, I used a trick to make it work with Tribute:
A dummy invisible element is inserted immediately when opening the link picker (when selecting a tribute dropdown item). Once the picker returns the link (with a promise), the dummy element is replaced by the link.

⚠️ For the link picker to get the provider list, the page in which RCE is used must have dispatched RenderReferenceEvent. This will be documented in Nextcloud's general link reference chapter. Maybe it's worth mentioning it in RCE's doc as well.

We could make this a little bit more generic (passing data and callback as RCE props) but we figured (with @juliushaertl) the link picker was strongly depending on unified search and vue-richtext and cannot really be used with other data sources anyway. What do you think?

vokoscreenNG-2023-02-01_15-50-10.mp4

@julien-nc julien-nc added enhancement New feature or request 3. to review Waiting for reviews feature: rich-contenteditable Related to the rich-contenteditable components labels Feb 1, 2023
@julien-nc julien-nc force-pushed the enh/noid/link-picker-in-richcontenteditable-with-tribute branch 2 times, most recently from b9c35a9 to b38b93c Compare February 7, 2023 10:36
@julien-nc julien-nc force-pushed the enh/noid/link-picker-in-richcontenteditable-with-tribute branch from b38b93c to e106eb3 Compare February 10, 2023 15:18
@juliusknorr
Copy link
Contributor

Uncommited l10n changes. Run npm run l10n:extract.

@raimund-schluessler
Copy link
Contributor

Uncommited l10n changes. Run npm run l10n:extract.

We have an awesome github command for this now (which should probably be mentioned in the L10n check).

@raimund-schluessler
Copy link
Contributor

/l10n-update

@raimund-schluessler
Copy link
Contributor

raimund-schluessler commented Feb 14, 2023

/l10n-update

And which doesn't seem to work anymore, whereas it did just last week 🙈

Edit: Seems it was just a bit slow 🙂

@juliusknorr
Copy link
Contributor

/rebase

@nextcloud-command nextcloud-command force-pushed the enh/noid/link-picker-in-richcontenteditable-with-tribute branch from 5513c16 to 950e0af Compare February 16, 2023 15:10
@juliusknorr
Copy link
Contributor

@julien-nc Mind to rebase?

@juliusknorr
Copy link
Contributor

@ShGKme Maybe yiiz can also have a look since this would be relevant for Talk with nextcloud/spreed#4333 :)

Copy link
Contributor

@mejo- mejo- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me, didn't test though.

},

methods: {
getLink(item) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find it a bit confusing to have this.getLink() and global getlink() in the component, but that's only nitpicking.

@julien-nc julien-nc force-pushed the enh/noid/link-picker-in-richcontenteditable-with-tribute branch from 950e0af to fbaa9fa Compare February 21, 2023 11:25
@raimund-schluessler
Copy link
Contributor

/l10n-update

@julien-nc julien-nc force-pushed the enh/noid/link-picker-in-richcontenteditable-with-tribute branch from 31ef0ff to 0ba0a00 Compare February 22, 2023 10:58
@julien-nc
Copy link
Contributor Author

/l10n-update

Signed-off-by: nextcloud-command <[email protected]>
@julien-nc julien-nc merged commit cf3c71d into master Feb 22, 2023
@julien-nc julien-nc deleted the enh/noid/link-picker-in-richcontenteditable-with-tribute branch February 22, 2023 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews enhancement New feature or request feature: rich-contenteditable Related to the rich-contenteditable components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants