Add slash command and emoji picker to mail composer

[hamza221]

Closes #8514

[ChristophWurst]

Inserting 'any link' always puts the cursor at the start of the message

is it because the focus is lost when the picker shows? Could we get the last cursor position on blur?

[kesselb]

@hamza221 mind to resolve the conflicts and rebase on main?

[kesselb]

cursor position after inserting link is nondeterministic

I can reproduce. CKEditor uses an internal structure to represent the content, and therefore it's a bit tricky to insert data or modify the content externally.

this.editorInstance.execute('delete')
this.appendToBodyAtCursor(link)

The approach to delete the last character only works for / and :.
It does not work for /fil or :wav. Especially for emojis, it is quite common to filter the list.

What we actually want is to take the current position, go back to the last slash and replace with the link.
Here is a small poc for the smart picker: #8898

I found your approach connecting Tribute.js and CKEditor very creative, yet I have mixed feelings about it. CKEditor has a mentions plugin https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html and there is also a poc for a slash commands based on it ckeditor/ckeditor5@865c940.

Likely, an implementation based on the mentions plugin will take some time.
On the other hand, Tribute.js is unmaintained as per zurb/tribute#765.

[ChristophWurst]

CKEditor slash commands need a license #8514 (comment)

[kesselb]

Slash commands is a premium feature and requires a commercial license.
Mentions are not a premium feature.

My hope was/is that we could implement our slash commands based on the mentions plugin. The CKEditor slash commands is also using the mentions plugin internally. ckeditor/ckeditor5@865c940 is a poc done by a CKEditor developer.

I would prefer an integration with CKEditor based on the mentions plugin, but cannot give you an estimate.
Fine by me to continue with the Tribute.js approach and our small plugin to handle the insertion.

[kesselb]

Cursor position resets after inserting a Link everything else works fine

Can you confirm that it only happens for the first link and the second, third, … work as expected?
That makes it even more weird ;)

[kesselb]

• writer.setSelection(itemElement, 'after') in insertItem does not help because the cursor position is correct over there.
• I cannot reproduce the reset cursor problem with const link = 'https://www.nextcloud.com' instead of the smart picker call. As you suggested, something done by the smart picker let ckeditor reset the cursor position but only once in my testings.

[kesselb]

Suggested change

	this.editorInstance.execute('InsertItem', link, '/')
	this.editorInstance.execute('InsertItem', link, '/')
	this.editorInstance.editing.view.focus()

Seems to "workaround" the reset cursor issue.

If the reference picker is open window._nc_focus_trap shows three focus traps.
When closing the picker the focus goes back to ckeditor.
I'm still lost what is causing ckeditor to reset the cursor then, especially because we had a selection before.

[hamza221]

The workaround works 👍

[ChristophWurst]

• BUG: Type hello / this is a test and then Enter

I expect the smart picker only to show if I press enter right after the slash

[hamza221]

• BUG: Type hello / this is a test and then Enter

I expect the smart picker only to show if I press enter right after the slash

It's because searchProvider returns 'Any Link' if there's no match which is not useful here.
I added a workaround -> Now the options only show if there's a match so you can still search the options through typing

[ChristophWurst]

I can't comprehend the CKEditor magic but the feature works flawless now

🚀

[kesselb]

Possible follow up:

• Compose new message
• Insert a file
• After selecting a file you see a small box for a few seconds.
• If you click on the box or somewhere else the insert is canceled. I guess that's the default modal click outside logic. It would be nice to not cancel the process on outside click if possible.

[hamza221]

@kesselb I'm not sure I understand , Do you mean what's happening in this screen recording?
Screencast from 2023-10-27 17-34-45.webm