Link picker

[juliusknorr]

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

📝 Summary

• Refactor existing suggestion extensions to make code reusable
• Implement a link picker plugiun
  • Prepare extension
  • Fetch link provider list from the backend
  • Trigger link picker on provider
  • Make sure that result gets inserted
  • Adapt mention cypress tests to new component layout

Depends on

• Extend reference API for (future) frontend picker server#35557
• Implement reference picker nextcloud-libraries/vue-richtext#863

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

Passing run #8377 ↗︎

0

116

0

0

0

Details:

Link picker
Project: Text	Commit: 82036c3145
Status: Passed	Duration: 03:59 💡
Started: Jan 30, 2023 4:35 PM	Ended: Jan 30, 2023 4:39 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[julien-nc]

Awesome!

I pushed a commit adding the glue to use the link picker in your suggestion plugin.

Text needs to be linked with @nextcloud/vue-richtext 's "enh/noid/reference-picker" branch.

Remaining issues:

• Suggestions (provider list) still visible when the link picker modal is displayed
• If we insert the link with a trailing space, rendering is not triggered. I guess we could insert a link node instead of the raw text (problem: we might get some text meant to be inserted but not as a link).
• When opening a "search" provider, there is a focus loop issue slowing down the browser for a few seconds. Seems to be a focus trap issue.
• We need to figure out a way to display the provider icon (from its URL) in the suggestions

[juliusknorr]

@julien-nc Pushed a few very minor fixes for the issues you found. The focus trap issue I could not reproduce so I assume it is a side effect of another app that you have enabled on your setup.

[julien-nc]

@juliushaertl Nice!
I've pushed a few adjustments:

• make the provider icons smaller to make it consistent with those in RichContentEditable (which size was set to be consistent with the emojis)
• increase suggestion list max-width to 400px because provider names can be long

Are you ok with those changes?

[julien-nc]

@julien-nc Pushed a few very minor fixes for the issues you found. The focus trap issue I could not reproduce so I assume it is a side effect of another app that you have enabled on your setup.

After frantically updating @nextcloud/vue in all my apps I realized I hadn't pull viewer for a long time...all good for the focus trap now.

[julien-nc]

"Open link picker" action is there. The icon might not be the best one.

[juliusknorr]

Ready for review and good to get in from my side 👍

Let's file follow up tickets for:

• Avoid to close text on esc key press
• Cypress tests

[mejo-]

Very nice and works well ❤️

Unfortunately it brings back a bug that I had fixed in 6eb324f before: when opening the emoji picker, closing it with Esc and hitting enter, the emoji that was selected last still gets inserted. That's particularly annoying in languages like french, where single colons are often written.

The same bug exists with mentions (@), but there it's less annoying because single @ is not used as often.

[julien-nc]

Awesome. The Text operating system is on its way.

Can confirm the bug mentioned by @mejo- for all users, emojis and link providers.

[juliusknorr]

Pushed a fix that applies for all autocomplete components now.

[mejo-]

Awesome. Works great and the latest fix by @juliushaertl also works ❤️

[julien-nc]

👍

[julien-nc]

/compile