Add RichContenteditable component

[skjnldsv]

• Supports v-model
• Supports sync modifier
• Supports core AutoCompletion endpoint format
• Use inline UserBubble
• Capture paste, auto-escape and format
  • Allows to capture the paste event from the parent, so you can manage the file paste if you want to. We only capture the paste if it contains text only.
• Exports the html➡️text and text➡️html functions in a mixin so anyone can render rich text

<RichContenteditable
			v-model="message"
			:auto-complete="autoCompleteMethod" />

Insights

The html generation method I used there (mounting the component, pulling the html and destroying) is actually quite fast!
For the biggest data sets it takes around 6ms to render and pull. The first one is usually longer, after that it takes around 1-2ms! 🚀

Followup

• Add emoji autocompletion
  https://github.com/Cobertos/vue-input-contenteditable doesn't support html rendering. So until then, let's keep it as plain text and see how we can improve from there.
• Ctrl+z history (currently doesn't work, doesn't work on talk either)

[marcoambrosini]

It seems that this is not working properly on netlify. I tried writing a sentence in there and new words are added on the left before the last word that I just typed. Maybe I'm doing something wrong?

[skjnldsv]

It seems that this is not working properly on netlify. I tried writing a sentence in there and new words are added on the left before the last word that I just typed. Maybe I'm doing something wrong?

Have you entered new lines?

[danxuliu]

Sorry, I did not understand

I added the htmlToText and textToHtml functions as a mixin. So you can now use them to render messages in talk for example.

Good :-) But... how is it related to what to do when fetching the autocompletion results fail? :-)

Does it support swapping Enter and Shift+Enter ?

why would you need swapping between those?

See nextcloud/spreed#3268

[danxuliu]

when testing newlines, please always mention which browser you used.

Right, the wondrous land of content editable new lines :-P I initially tested with Firefox, and the text became aa\n. Now I have tested with Chromium and the text became aa. In both cases it should have been a\na.

[skjnldsv]

1. Deleting an @mention right after having added it requires pressing backspace twice. The cursor goes right after the first backspace keystroke.

because we add a space after a mention

[skjnldsv]

Fixed:

• FF deletion
• New line with shift/no-shift management
• Paste data (currently no support for direct-rendering of a mention, it will stay as text, we'll discuss this in a followup)

Followups:

• Emoji autocompletion
• Ctrl+z history (currently doesn't work, doesn't work on talk either)
• ... ?

[skjnldsv]

Let's try to get this in and fix potentials small bugs later if possible, unless there is a complete breaking one still laying around (you never know 😁)

[julien-nc]

I didn't make a deep code review but it works fine from a user point of view!