feat: Expose formatting menu bar actions through slash command

[juliusknorr]

📝 Summary

• Resolves: Slash commands #3761

Introduce commands in the smart picker / dialog for useful menubar actions

Some menu items (undo/redo/outline) are excluded as they don't make sense here. Insert attachments would still be nice, but ee need to figure out a good way to trigger the action from within the tiptap suggest plugin, so I'd like to rather do that as a follow up.

🖼️ Screenshots

Recording:
https://github.com/nextcloud/text/assets/3404133/96aaecbc-9254-4786-9b35-210557b9694d

🚧 TODO

• Double check index highlighting in the popover
• Check if we shall hide the default add link -> Lets keep this as the insert link menu is not exposed

🏁 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 #11614 ↗︎

0

149

2

0

0

Details:

feat: Expose formatting menu bar actions through slash command
Project: Text	Commit:e51ce5ade7
Status: Passed	Duration: 03:46 💡
Started: Aug 9, 2023 4:53 PM	Ended: Aug 9, 2023 4:57 PM

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

[juliusknorr]

@nextcloud/designers I'd be glad to get some early design feedback on this :)

[mejo-]

Really nice, can't wait to use this myself 😍

One thing that immediately came to my mind: should we change the order to hide the formatting options a bit? I don't think it's very intuitive to have six headings options listed as the first smartpicker options 😬

[juliusknorr]

Yes, maybe we could also sort the usual smart pickers first. Regarding the list of visible entries we could also increase that a bit if screen space allows. @nextcloud/designers What do you think?

[marcoambrosini]

Nice!
I think it would be really nice to have the 4-5 most used styles at the top of the menu so that they're immediately visible.

[juliusknorr]

I think it would be really nice to have the 4-5 most used styles at the top of the menu so that they're immediately visible.

Not sure what the most used would be then. I've pushed a change to sort ToDo list, table, h1, h2 first to at least show that there are different options other than headings.

[marcoambrosini]

Sorry, I meant most used on a per document base :)
Whichever are the used styles in the document should probably take priority over anything else

[juliusknorr]

I'd rather prefer a default choice of order rather than randomly changing ones. Not only for the complexity that it adds but also users would know what to expect from the menu then. I think changing per document could be confusing and also is not very helpful on empty documents or when documents only have a simple structure like headings and paragraphs.

[max-nextcloud]

Code looks good. ✨
Will still test locally.

[max-nextcloud]

Okay.... I tried this out and it's great... 👯

but we should really check if a given action is available in the current context.
For example you cannot create a heading inside a table. or a table inside a table. or a todo list in a table.

So these options should not be available.

[max-nextcloud]

Please check if the actions are available in the current context.

[juliusknorr]

@max-nextcloud Thanks for bringing this up. I pushed a fix to address this. Main change is https://github.com/nextcloud/text/pull/4587/files#diff-461b071d61c872ecc5d0c24f5227cfdbafd62c22347ef001a4d1aab55c25d58eR83-R87

[max-nextcloud]

looks good!

[max-nextcloud]

/compile

[juliusknorr]

/backport e4e5f42 to stable27