Message Editing: Simple composer for editing only

[jryans]

The composer's feature set is likely quite similar to #7697. The issue is specifically about a simple composer for message editing only.

Requirements (could do with some further discussion with @ara4n and/or @lampholder):

• prototype PoC
• integrate PoC into Riot
• turn matrix.to links into pills when loading the editor
• turn html formatting into markdown when loading the editor
• show the existing room auto completion panel when typing #
• show the existing user auto completion panel when typing @
• show the existing emoji auto completion panel when typing :
• apply markdown markup when sending a message (but no wysiwyg preview)
• convert pills back to links when sending a message

Pasting converts any input to just plain text.

Out of scope for now:

• pasting images

[bwindels]

pushing to bwindels/message-edit-editor

[bwindels]

Plan to use https://www.npmjs.com/package/textarea-caret to know where to show a popup at the cursor position.

[jryans]

show a popup at the cursor position

Which part of the UI needs a popup at the cursor position? I am probably missing something obvious...

[bwindels]

show a popup at the cursor position

Which part of the UI needs a popup at the cursor position? I am probably missing something obvious...

any autocomplete, like @people, #room or :emoji is what I have in mind... much like the github comment editor.

[bwindels]

So this can work with a textarea, might be useful if we decide to go with the new emoji picker as well for auto complete, or decide to not make the auto complete panel full width.

[ara4n]

my only refinement to this would be to show pills inline, otherwise that is a major aesthetic regression. i assumed we would build this as a minimal contenteditable rig rather than literally a textarea?

[jryans]

my only refinement to this would be to show pills inline, otherwise that is a major aesthetic regression. i assumed we would build this as a minimal contenteditable rig rather than literally a textarea?

Maybe you already know, but just to be explicit: this issue is about the composer for message editing, which might be even simpler or different from what's used in the main composer. (The image above is a bit confusing, as Bruno is just prototyping in the main composer since message editing UI doesn't exist yet.)

With that in mind, are you saying we really should show pills inline in the composer for message editing? (It's less clear what counts as a regression in this case, since message editing doesn't exist yet, and so far we have said we're okay with it having less features than the main composer.)

[bwindels]

my only refinement to this would be to show pills inline, otherwise that is a major aesthetic regression. i assumed we would build this as a minimal contenteditable rig rather than literally a textarea?

Right, doing it with contenteditable will be more work though, making sure we get all the edge cases right. I've been making some notes at https://gist.github.com/bwindels/1db725d39631df81f105b8df0b6a7c31 while looking into how we could do this.

Won't be able to work on this while away until May 2nd in any case.

[bwindels]

prototype is ready, putting it in the app now.

[bwindels]

Closing this, tracking all remaining bits in #9487