Basic text formatting to chat #1027

theel0ja · 2018-07-09T00:22:55Z

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>

Markdown support - API #9950
Markdown support - Frontend #9949
- Above ticket is for rendering in the chat view
- Input field option is raised in the vue library: Interface for Markdown support of NcRichContenteditable nextcloud-libraries/nextcloud-vue#4355
Markdown support talk-ios#1299
Markdown support talk-android#3176
- Basic text formatting for chat messages talk-android#3154

Spreed app

Spreed app version: Talk 3.2.2

Server configuration

Nextcloud Version: 1.0.4

The text was updated successfully, but these errors were encountered:

nickvergessen · 2018-07-09T09:19:27Z

I think most other things have bold and italic, so that's okay.
Not sure about code tags thou. THat will cause big trouble when we integrate with other services.

nickvergessen · 2018-07-19T10:12:54Z

Checked the messengers which I use:

IM	bold	italic	striked	code
Whatsapp	*	_	~	```
Threema	*	_	~	✖️
Telegram	**	_ _	✖️	```
Signal	✅ (WYSIWYG)	✅ (WYSIWYG)	✅ (WYSIWYG)	✅ (WYSIWYG)

nickvergessen · 2018-07-30T10:49:22Z

Survey: Should we support * as bold?

nickvergessen · 2018-07-30T10:49:35Z

Survey: Should we support _ as italic?

nickvergessen · 2018-07-30T10:49:47Z

Survey: Should we support ~ as striked?

nickvergessen · 2018-07-30T10:50:14Z

Survey: Should we support ``` as code?

fancycode · 2018-07-30T11:00:40Z

Survey: Should we support ``` as code?

Backticks are bad on a German keyboard layout, but they are also consistent with markdown.

mario · 2018-07-30T11:13:29Z

Why not add a full markdown support while we're at it? :)

nickvergessen · 2018-07-30T11:14:41Z

Why not add a full markdown support while we're at it? :)

Because at somepoint we would like to integrate with other services (see https://github.com/nextcloud/spreed/labels/feature%3A%20integration ) which is highly difficult then

tcitworld · 2018-07-30T12:26:16Z

integrate with other services which is highly difficult then

Converting Markdown content into plain text shouldn't be that hard, no ?

theel0ja · 2018-07-30T19:31:41Z

I'd add most stuff, but for example not headings because they aren't needed in chats.

nickvergessen · 2018-08-01T12:57:03Z

Well as for markdown, apart from the things in the poll the following are missing:

url - but you can post plain urls, which are still made clickable, you can just not mask them
images - we will allow posting images in another way (similar to how all other IMs do it.
lists - do you really need lists in chat messages?
headlines - see lists

fancycode · 2018-08-01T12:59:49Z

I think you can skip lists and headlines. If people want to write documents, they should not use the chat but some editor app 🙊

jospoortvliet · 2018-08-07T16:59:13Z

Lists do make sense, though, I use it also in chat... But certainly bold, underline, strike-through and code are much more important. Headlines do seem weird yes.

ryanprior · 2019-04-10T18:58:41Z

With regard to #1027 (comment) (suggestion for full Markdown support)

I don't like the idea of having people post links (including potentially misleading ones,) images, or headlines to chat.

Syntax compatibility with markdown might be the most appropriate, but "full Markdown" seems like an own goal.

ryanprior · 2019-04-10T19:01:35Z

Also, info for @nickvergessen & others who prioritize issues: this is one of the major blockers keeping me from using Nextcloud Chat. I frequently post code & read other people's code in chat, and need it to be formatted nicely.

I would be interested in working on this issue if it's something you would like outside help on.

lachmanfrantisek · 2019-04-11T07:28:31Z

What about some quote/citation?

> used in markdown would be useful for that:

Example:

> something

something

nickvergessen · 2019-04-11T09:18:11Z

I would be interested in working on this issue if it's something you would like outside help on.

No objection at all. Everything that is not actively being worked on can be picked up. The main issue I see is:

This needs to also work on iOS/Android
It should be mostly done in the UI so third party integration works as good as possible
There is a difference between markdown and all other chat clients how to do bold/italic
The next thing on our todo is to bring the UI to VueJS ( Migrating to Vue.JS #1347) and that might heavily conflict with any work being done, because we are basically redoing the UI.

ryanprior · 2019-04-17T15:33:34Z

How is the Android/iOS app built right now? I've never done mobile app development so I'm pretty ignorant of that side of things.

As far as building it into the UI and making it Vue proof, we might build it as an embedded Vue component right away without waiting for the rest of the UI to be re-done. My understanding is that Vue components can play well next to other things and it's not all-or-nothing.

AndyScherzinger · 2023-07-06T17:06:24Z

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 · 2023-07-11T10:15:20Z

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 · 2023-07-11T10:23:25Z

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 · 2023-07-19T17:39:18Z

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 · 2023-07-19T17:53:23Z

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

nickvergessen · 2023-07-19T17:54:57Z

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 · 2023-07-19T18:01:19Z

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 · 2023-07-19T18:02:12Z

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 · 2023-07-19T18:06:41Z

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:

cc @nextcloud/designers wdyt?

AndyScherzinger · 2023-07-19T18:21:15Z

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

nickvergessen · 2023-07-19T18:21:24Z

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 · 2023-07-19T18:32:12Z

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:

nickvergessen · 2023-07-19T18:34:48Z

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 · 2023-07-19T19:46:28Z

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.

nickvergessen · 2023-08-08T10:02:31Z

Closing as the base work is done 🎉

omoustaouda · 2024-03-01T14:56:03Z

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 · 2024-03-01T14:57:40Z

Current status is "Completed, Markdown works"

theel0ja changed the title ~~Basic text formatting~~ Basic text formatting to chat Jul 9, 2018

nickvergessen added enhancement feature: chat 💬 Chat and system messages labels Jul 9, 2018

nickvergessen added the mobile apps label Jul 30, 2018

nickvergessen added this to the 💛 Following Major milestone Jul 30, 2018

nickvergessen mentioned this issue Sep 17, 2018

Feature request - add syntax highlighting for commands/code #1187

Closed

nickvergessen modified the milestones: 5.0.0, 💚 Next Major Dec 7, 2018

nickvergessen modified the milestones: 💚 Next Major, 💔 Backlog Mar 21, 2019

nickvergessen mentioned this issue Jun 21, 2019

Slight wording improvements and cuts nickv-nextcloud/talk_simple_poll#6

Closed

AndyScherzinger mentioned this issue Jul 6, 2023

Basic text formatting for chat messages nextcloud/talk-android#3154

Closed

This was referenced Jul 11, 2023

Markdown support nextcloud/talk-android#3176

Closed

Markdown support - Frontend #9949

Closed

Markdown support nextcloud/talk-ios#1299

Closed

Markdown support - API #9950

Closed

szaimen self-assigned this Jul 19, 2023

nickvergessen mentioned this issue Jul 19, 2023

Interface for Markdown support of NcRichContenteditable nextcloud-libraries/nextcloud-vue#4355

Open

Basic text formatting to chat #1027

Basic text formatting to chat #1027

Comments

theel0ja commented Jul 9, 2018 • edited by nickvergessen Loading

Spreed app

Server configuration

nickvergessen commented Jul 9, 2018

nickvergessen commented Jul 19, 2018 • edited Loading

nickvergessen commented Jul 30, 2018

nickvergessen commented Jul 30, 2018

nickvergessen commented Jul 30, 2018

nickvergessen commented Jul 30, 2018

fancycode commented Jul 30, 2018

mario commented Jul 30, 2018

nickvergessen commented Jul 30, 2018

tcitworld commented Jul 30, 2018 • edited Loading

theel0ja commented Jul 30, 2018

nickvergessen commented Aug 1, 2018

fancycode commented Aug 1, 2018

jospoortvliet commented Aug 7, 2018

ryanprior commented Apr 10, 2019

ryanprior commented Apr 10, 2019

lachmanfrantisek commented Apr 11, 2019

nickvergessen commented Apr 11, 2019

ryanprior commented Apr 17, 2019

AndyScherzinger commented Jul 6, 2023 • edited Loading

jancborchardt commented Jul 11, 2023 • edited Loading

nickvergessen commented Jul 11, 2023

szaimen commented Jul 19, 2023

ShGKme commented Jul 19, 2023

nickvergessen commented Jul 19, 2023

nickvergessen commented Jul 19, 2023

szaimen commented Jul 19, 2023

szaimen commented Jul 19, 2023 • edited Loading

AndyScherzinger commented Jul 19, 2023

nickvergessen commented Jul 19, 2023 • edited Loading

szaimen commented Jul 19, 2023

nickvergessen commented Jul 19, 2023

AndyScherzinger commented Jul 19, 2023 • edited Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

nickvergessen commented Aug 8, 2023

omoustaouda commented Mar 1, 2024

nickvergessen commented Mar 1, 2024

theel0ja commented Jul 9, 2018 •

edited by nickvergessen

Loading

nickvergessen commented Jul 19, 2018 •

edited

Loading

tcitworld commented Jul 30, 2018 •

edited

Loading

AndyScherzinger commented Jul 6, 2023 •

edited

Loading

jancborchardt commented Jul 11, 2023 •

edited

Loading

szaimen commented Jul 19, 2023 •

edited

Loading

nickvergessen commented Jul 19, 2023 •

edited

Loading

AndyScherzinger commented Jul 19, 2023 •

edited

Loading