7 ms·

Amusingly, for https://riot.im https://riot.im we just shelved our WYSIWYG editor efforts after trying two completely separate implementations over the years (o

Amusingly, for https://riot.im https://riot.im we just shelved our WYSIWYG editor efforts after trying two completely separate implementations over the years (one via Draft.js, the other via Slate.js) because: a) it's a nightmare to get right, b) nobody used it anyway (it was optional), c) chat isn't a wordprocessor, d) markdown (commonmark) + floating formatting toolbar is good enough. Our current editor was written from scratch (codenamed CIDER), and seems to work pretty well for markdown input + some semantic elements like prettified usernames, room names, etc. https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/ciderEditor.md https://github.com/matrix-org/matrix-react-sdk/blob/develop/... tells all about CIDER, and https://blog.riot.im/riot-web-1-5/ https://blog.riot.im/riot-web-1-5/ gives the full context if anyone cares :)

StavrosK 7y ago
Thank you for adding the feature of not adding WYSIWYG. I can't believe how frustrating Slack's new editor is.
- swader999 7y ago
  So true, I was annoyed all day and didn't know why. Had no idea they had "upgraded". I thought I had inadvertently hit a toggle that put it out of adult mode. I was too busy to fuss with it. Every time I went into that box I came out a little more angry, a little older, and farther from the feeling of good flow that Wednesday typically brings.
nerdponx 7y ago
You know what else has a terrible WYSIWYG editor? Microsoft Teams. It's kind of sort of like Markdown, except when it isn't, or when it breaks. At least it's a step up from Lync.
- OkGoDoIt 7y ago
  Carrier pigeons would be a step up from Lync
- vailripper 7y ago
  Sounds like Atlassians approach with Jira - "it supports markdown, except when it doesn't!"
  - beatgammit 7y ago
    All I want is consistent syntax for links, italics, and bulleted lists, bonus points for numbered lists, bold, and code blocks. I don't want to have to click stuff when typing, and I don't want to remember keyboard shortcuts with subtle differences between different services. Markdown is good enough, yet for some reason, each platform finds it necessary to do something slightly differently. I really don't care about a WYSIWIG editor, as long as I can use straight text if I want. Basically, I want Reddit comments in instant messaging and bug trackers.
    - time0ut 7y ago
      That plus a nice table syntax. So many times I need to put a table in a jira comment or chat, but not often enough to remember how for the particular context.
      - greggman2 7y ago
        markdown allows arbitrary html. just paste in <table>. At least in my experience all table format miss something that makes my tables illegable
  - imglorp 7y ago
    Preach it. It seems every text input box across the product line has a different input method: BB, Jira, and Confluence. You'd think they might standardize with one to be less user hostile.
    - nicwolff 7y ago
      Jira still has two different WYSIWYG implementations on different pages. On the "classic" issue form, you still enter `{code}this is code{code}`, but if you open that issue in the sidebar of the backlog page, it's Markdown.
- master-litty 7y ago
  Oh man, Lync. The re-skin of MSN Messenger that nobody wanted. I remember when I couldn't change my status from "Away" for some reason. On my computer it would always show me as "Online," but to everyone else I had been away for 300+ days.
  - enigmo 7y ago
    from what I recall (knew some folks on both teams) there was zero shared code. always thought Messenger was the better implementation.
michaelmrose 7y ago
CIDER is also the Clojure Interactive Development Environment that Rocks if it matters https://github.com/clojure-emacs/cider https://github.com/clojure-emacs/cider It likely doesn't as they seem unlikely to be confused.
- Arathorn 7y ago
  yeah, we realised this too late :S Riot's CIDER is pretty much an internal codename though, and it's not split out (yet) for anyone else to use. So hopefully it's not too bad a namespace clash.
ss3000 7y ago
Curious if you've explored something based on ProseMirror? I've heard good things about it and it seems to have a decent implementation for hybrid WYSIWYG + Markdown. https://prosemirror.net/examples/markdown/ https://prosemirror.net/examples/markdown/
- new_here 7y ago
  We used ProseMirror to build our editor at https://able.bio/new https://able.bio/new We chose ProseMirror after doing a lot of research (TinyMCE, Slate, Draft, Medium toolbar) and have been very happy with what it’s enabled us to do so far. We’ll probably write a blog post about it at some point.
  - greggman2 7y ago
    ProseMirror has many of the problems the linked article described.
    - ss3000 7y ago
      Could you please be a bit more specific? I looked through all of the links in the original post and couldn't really find any mentions of specific limitations. Just trying to learn more about this space.
Nullabillity 7y ago
It's even sadder because Org-Mode demonstrated how to do WYSIWYG right. Apply the styling in real time, but then also show the formatting characters around it! That way you lose all of the weird WYSIWYG edge cases (will this character I type at the edge of a bold segment also be bold?), and you also teach WYSIWYG users Markdown in a natural way.
- Doctor_Fegg 7y ago
  Ugh. No. This really breaks up the flow of the text. I’m sure it’s fine for org-mode’s intended audience, but for people not from a coding background, it’s horrid. And there’s no need to “teach WYSIWYG users Markdown” when WYSIWYG is fine for them.
  - ulrikrasmussen 7y ago
    It could remove the Markdown once the message has been sent, and only show it in editing mode. Then readers wouldn't have their flow disturbed, and authors could edit their messages in a sane way.
    - kqr 7y ago
      This is the obvious way to do it, and also how Slack used to do it before this WYSIWYG thing at least.
  - TeMPOraL 7y ago
    No, it doesn't. It's just syntax highlighting for markup. Disappearing formatting characters, which is what I switched Org to myself, is another story - it has some of the problems introduced by WYSIWYG.
  - filleduchaos 7y ago
    In my experience it doesn't particularly break up the flow of text. And as for "people not from a coding background", inline styling with visible formatting characters is exactly how Whatsapp implements its rich text editing. Considering it's an app with a billion and a half MAU, I think you might find that you have an unrealistically low opinion of non-developers' intelligence.
bmarkovic 7y ago
The fact that this industry turned to a proprietary low-quality solution like Slack when Riot/Matrix have already existed tells the full story about what a bunch of incompetent idiots we all are. Everyone frustrated with the new Slack input box deserves what they got. Me included.
- TeMPOraL 7y ago
  Let's put some more blame on people who chose Slack for their companies/teams/communities. Most Slack users don't use it willingly. I for one am showing the middle finger here; when forced to talk on Slack, I use Ripcord as a client.
- Carpetsmoker 7y ago
  The reason for Slack's success is probably because it's a "turn key solution": you register your company, invite your employees, enter your CC, and you're good to go. With a lot of these open solutions things are more complex. I think we should really focus on providing a good UX here if we want more adoption. (also, I don't know if Riot is that much better; opening https://riot.im/app/ https://riot.im/app/ makes Firefox use 100% CPU and my laptops fan spin; I closed it after 10 seconds of just a loading animation)
  - Arathorn 7y ago
    https://modular.im https://modular.im gives a turnkey hosting solution for Riot/Matrix for what it’s worth. Riot should be lighter weight than Slack, but launch (particularly if you haven’t used it in ages) can be slow, plus we’re chasing a startup perf regression on firefox atm. The main reason Riot’s better is that you can use your own server, participate in an open network, and have control over the software if some feature gets pushed out that you dislike. And you get E2E encryption :)
    - Carpetsmoker 7y ago
      Coolio on both! I think the messaging on modular.im could be a lot better, IMO. I don't know what the relations between all the different organisations/people are here, but having all of "Matrix", "Riot", "Modular" is just confusing branding/marketing. It would be much better to have just "Matrix protocol", "Matrix self-hosted", and "Matrix hosted", for example. Right now, it's not even immediately clear that hosted Matrix is an option from just looking at the Riot and Matrix websites. Just my 2c from a casually interested potential Modular customer.

StavrosK 7y ago

Thank you for adding the feature of not adding WYSIWYG. I can't believe how frustrating Slack's new editor is.

swader999 7y ago
So true, I was annoyed all day and didn't know why. Had no idea they had "upgraded". I thought I had inadvertently hit a toggle that put it out of adult mode. I was too busy to fuss with it. Every time I went into that box I came out a little more angry, a little older, and farther from the feeling of good flow that Wednesday typically brings.

nerdponx 7y ago

You know what else has a terrible WYSIWYG editor? Microsoft Teams. It's kind of sort of like Markdown, except when it isn't, or when it breaks. At least it's a step up from Lync.

OkGoDoIt 7y ago
Carrier pigeons would be a step up from Lync
vailripper 7y ago
Sounds like Atlassians approach with Jira - "it supports markdown, except when it doesn't!"
- beatgammit 7y ago
  All I want is consistent syntax for links, italics, and bulleted lists, bonus points for numbered lists, bold, and code blocks. I don't want to have to click stuff when typing, and I don't want to remember keyboard shortcuts with subtle differences between different services. Markdown is good enough, yet for some reason, each platform finds it necessary to do something slightly differently. I really don't care about a WYSIWIG editor, as long as I can use straight text if I want. Basically, I want Reddit comments in instant messaging and bug trackers.
  - time0ut 7y ago
    That plus a nice table syntax. So many times I need to put a table in a jira comment or chat, but not often enough to remember how for the particular context.
    - greggman2 7y ago
      markdown allows arbitrary html. just paste in <table>. At least in my experience all table format miss something that makes my tables illegable
- imglorp 7y ago
  Preach it. It seems every text input box across the product line has a different input method: BB, Jira, and Confluence. You'd think they might standardize with one to be less user hostile.
  - nicwolff 7y ago
    Jira still has two different WYSIWYG implementations on different pages. On the "classic" issue form, you still enter `{code}this is code{code}`, but if you open that issue in the sidebar of the backlog page, it's Markdown.
master-litty 7y ago
Oh man, Lync. The re-skin of MSN Messenger that nobody wanted. I remember when I couldn't change my status from "Away" for some reason. On my computer it would always show me as "Online," but to everyone else I had been away for 300+ days.
- enigmo 7y ago
  from what I recall (knew some folks on both teams) there was zero shared code. always thought Messenger was the better implementation.

michaelmrose 7y ago

CIDER is also the Clojure Interactive Development Environment that Rocks if it matters https://github.com/clojure-emacs/cider https://github.com/clojure-emacs/cider It likely doesn't as they seem unlikely to be confused.

Arathorn 7y ago
yeah, we realised this too late :S Riot's CIDER is pretty much an internal codename though, and it's not split out (yet) for anyone else to use. So hopefully it's not too bad a namespace clash.

ss3000 7y ago

Curious if you've explored something based on ProseMirror? I've heard good things about it and it seems to have a decent implementation for hybrid WYSIWYG + Markdown. https://prosemirror.net/examples/markdown/ https://prosemirror.net/examples/markdown/

new_here 7y ago
We used ProseMirror to build our editor at https://able.bio/new https://able.bio/new We chose ProseMirror after doing a lot of research (TinyMCE, Slate, Draft, Medium toolbar) and have been very happy with what it’s enabled us to do so far. We’ll probably write a blog post about it at some point.
- greggman2 7y ago
  ProseMirror has many of the problems the linked article described.
  - ss3000 7y ago
    Could you please be a bit more specific? I looked through all of the links in the original post and couldn't really find any mentions of specific limitations. Just trying to learn more about this space.

Nullabillity 7y ago

It's even sadder because Org-Mode demonstrated how to do WYSIWYG right. Apply the styling in real time, but then also show the formatting characters around it! That way you lose all of the weird WYSIWYG edge cases (will this character I type at the edge of a bold segment also be bold?), and you also teach WYSIWYG users Markdown in a natural way.

Doctor_Fegg 7y ago
Ugh. No. This really breaks up the flow of the text. I’m sure it’s fine for org-mode’s intended audience, but for people not from a coding background, it’s horrid. And there’s no need to “teach WYSIWYG users Markdown” when WYSIWYG is fine for them.
- ulrikrasmussen 7y ago
  It could remove the Markdown once the message has been sent, and only show it in editing mode. Then readers wouldn't have their flow disturbed, and authors could edit their messages in a sane way.
  - kqr 7y ago
    This is the obvious way to do it, and also how Slack used to do it before this WYSIWYG thing at least.
- TeMPOraL 7y ago
  No, it doesn't. It's just syntax highlighting for markup. Disappearing formatting characters, which is what I switched Org to myself, is another story - it has some of the problems introduced by WYSIWYG.
- filleduchaos 7y ago
  In my experience it doesn't particularly break up the flow of text. And as for "people not from a coding background", inline styling with visible formatting characters is exactly how Whatsapp implements its rich text editing. Considering it's an app with a billion and a half MAU, I think you might find that you have an unrealistically low opinion of non-developers' intelligence.

bmarkovic 7y ago

The fact that this industry turned to a proprietary low-quality solution like Slack when Riot/Matrix have already existed tells the full story about what a bunch of incompetent idiots we all are. Everyone frustrated with the new Slack input box deserves what they got. Me included.

TeMPOraL 7y ago
Let's put some more blame on people who chose Slack for their companies/teams/communities. Most Slack users don't use it willingly. I for one am showing the middle finger here; when forced to talk on Slack, I use Ripcord as a client.
Carpetsmoker 7y ago
The reason for Slack's success is probably because it's a "turn key solution": you register your company, invite your employees, enter your CC, and you're good to go. With a lot of these open solutions things are more complex. I think we should really focus on providing a good UX here if we want more adoption. (also, I don't know if Riot is that much better; opening https://riot.im/app/ https://riot.im/app/ makes Firefox use 100% CPU and my laptops fan spin; I closed it after 10 seconds of just a loading animation)
- Arathorn 7y ago
  https://modular.im https://modular.im gives a turnkey hosting solution for Riot/Matrix for what it’s worth. Riot should be lighter weight than Slack, but launch (particularly if you haven’t used it in ages) can be slow, plus we’re chasing a startup perf regression on firefox atm. The main reason Riot’s better is that you can use your own server, participate in an open network, and have control over the software if some feature gets pushed out that you dislike. And you get E2E encryption :)
  - Carpetsmoker 7y ago
    Coolio on both! I think the messaging on modular.im could be a lot better, IMO. I don't know what the relations between all the different organisations/people are here, but having all of "Matrix", "Riot", "Modular" is just confusing branding/marketing. It would be much better to have just "Matrix protocol", "Matrix self-hosted", and "Matrix hosted", for example. Right now, it's not even immediately clear that hosted Matrix is an option from just looking at the Riot and Matrix websites. Just my 2c from a casually interested potential Modular customer.