Basic text formatting to chat

theel0ja commented 6 years ago

I would like to have at least basic text formatting for chat, such as

Basic text formatting, such as bold, italic and ~~strikethrough~~
and code tags like this: console.log("Hello!");

and multi-line code this:

<html>
<head></head>
<body></body>
</html>

[x] https://github.com/nextcloud/spreed/issues/9950
[x] https://github.com/nextcloud/spreed/issues/9949
- [x] Above ticket is for rendering in the chat view
- [ ] Input field option is raised in the vue library: https://github.com/nextcloud/nextcloud-vue/issues/4355
[x] https://github.com/nextcloud/talk-ios/issues/1299
[x] https://github.com/nextcloud/talk-android/issues/3176
- [x] https://github.com/nextcloud/talk-android/issues/3154

Spreed app

Spreed app version: Talk 3.2.2

Server configuration

Nextcloud Version: 1.0.4

danir-de commented 2 years ago

I just noticed that if you press CTRL+B, CTRL-U or CTRL+I in the chat box, the text changes its formatting to bold, underlined or italics, WYSIWYG-like. When you send it, it turns into plain HTML though...

This turns into this

Is that a browser thing (Chrome) or baked into Talk? Doesn't seem to work in Firefox (triggers browser functions)...

marcusquinn commented 2 years ago

The nice thing about Markdown, is that the syntax is also formatting, so it is readable and understandable, whether rendered into styles or not.

ShGKme commented 1 year ago

Is that a browser thing (Chrome) or baked into Talk?

This is a browser thing of contenteditable.

seconddayout commented 1 year ago

Is this still underway?

nickvergessen commented 1 year ago

Yes, we just talked about it again last week and discussed necessary steps and possible intermediate steps.

nickvergessen commented 1 year ago

So NcRichText supports markdown, but similarly to GitHub it seems to use the double vs. single logic:

Input	Result
`__bold__`	bold
`bold`	bold
`_italic_`	italic
`italic`	italic

That however is not how telegram, whatsapp or any other handle them: https://github.com/nextcloud/spreed/issues/1027#issuecomment-406226961

AndyScherzinger commented 1 year ago

So NcRichText supports markdown, but similarly to GitHub it seems to use the double vs. single logic:

That is also the logic markwon applies (markdown lib we use in files/talk Android), so I vote to go with the (more or less) standard markdown spec - anythign else will be a pain to implement - on Android at least

jancborchardt commented 1 year ago

Yep:

People familiar with Markdown or who use text for formatting will appreciate the same syntax being used (that is, standard Markdown)
For people not familiar with it we need a popover with formatting buttons when text is marked for example (like other apps do), and then the syntax does not matter.

nickvergessen commented 1 year ago

For people not familiar with it we need a popover with formatting buttons when text is marked for example (like other apps do), and then the syntax does not matter.

I think the biggest issue is people on phones that use it in e.g. WhatApp, Telegram, etc. But yeah also there we might want to add "long press" options or something.

szaimen commented 1 year ago

Hi, so I created the following mockup:

When selecting the formatting, markdown syntax should be used to directly add characters around the marked text and adjust the look of it.

I hope this looks fine to you. Do you have some feedback?

ShGKme commented 1 year ago

It's a bit unclear to me, how "remove formatting" is supposed to work

nickvergessen commented 1 year ago

That would be on rightclick? But that is something the vue library should handle anyway, so that when an app uses the input component it can say "yes markdown please" (like NcRichText afterwards for the posted messages already does for the post rendering)

nickvergessen commented 1 year ago

It's a bit unclear to me, how "remove formatting" is supposed to work

I guess that only would be available work, when the same style-marker (e.g. ** in the screenshot) is to the left and right of the selection. But I agree that the removing thing looks very complicated.

szaimen commented 1 year ago

That would be on rightclick?

I would say it should rather be shown directly as soon as you select some text. (e.g. after the mouse click is done and text was selected)

But that is something the vue library should handle anyway, so that when an app uses the input component it can say "yes markdown please" (like NcRichText afterwards for the posted messages already does for the post rendering)

indeed. So should we transfer the ticket to the vue library?

szaimen commented 1 year ago

It's a bit unclear to me, how "remove formatting" is supposed to work

I guess that only would be available work, when the same style-marker (e.g. ** in the screenshot) is to the left and right of the selection. But I agree that the removing thing looks very complicated.

Indeed that looks complicated. So lets for now not offer this.

New mockup: Board (12)

cc @nextcloud/designers wdyt?

AndyScherzinger commented 1 year ago

@szaimen no underline since that is not supported by markdown (!)

nickvergessen commented 1 year ago

So should we transfer the ticket to the vue library?

No, because this ticket is for Talk, to handle the output result, notifications and everything else. But feel free to create a new one there

PS I actually never thought of UI options to insert markdown in first place

szaimen commented 1 year ago

PS I actually never thought of UI options to insert markdown in first place

I was asked to create a mockup for this ticket so that is what I did. If we dont need this then I am fine as well. Do we simply need a decision on the syntax to use or what is needed from design perspective?

@szaimen no underline since that is not supported by markdown (!)

All right. New one: Board (13)

nickvergessen commented 1 year ago

I was asked to create a mockup for this ticket so that is what I did. If we dont need this then I am fine as well.

I guess it's fine. but as mentioned just not the right place and a different work task. I will split the last mockup off into a new ticket inside the vue lib (with all relevant comment parts) and add it to the overview section of this ticket.

Do we simply need a decision on the syntax to use or what is needed from design perspective?

Syntax is Markdown. Nothing to discuss there.

AndyScherzinger commented 1 year ago

Afaik @jancborchardt mentioned such a helper function to add Markdown to the Editor field during the planning call. Nevertheless it is not mandatory for the first iteration of the feature but a nice polishing to put on top, so should come last.

marcoambrosini commented 1 year ago

I think that the menu upon selecting the text would be useful, but I would prefer to have a buttons bar with just the icons in line, just like in Nextcloud text's top-bar. I think it would be much less obtrusive.

nickvergessen commented 1 year ago

@marcoambrosini please keep the frontend discussion in https://github.com/nextcloud/nextcloud-vue/issues/4355

nickvergessen commented 1 year ago

Closing as the base work is done 🎉

omoustaouda commented 6 months ago

well done to everyone involved here : ) i appreciate very much.

i needed this feature, and was searching about its current status.

i'm a software developer, and happy to contribute if needed, just need a little overview about the current state.

nickvergessen commented 6 months ago

Current status is "Completed, Markdown works"

nextcloud / spreed

Basic text formatting to chat #1027

Spreed app

Server configuration