Notion like Editor

Hey all,

As we continue to get familiar with Discourse and work with it, I’ve come to the realization that the Editor is easily my favorite of all the forum softwares I’ve worked with over the years. However, I think
What I’m recommending is a Block-based editor where you can use “/” and quick shortcuts come up. An Example is notion and another is tipdap editor

Here is a screenshot from Marktext, one of my favorite open-source markdown editors for desktop:

Many Markdown editors are moving in the direction of block shortcuts, and I think Discourse could benefit from such a concept in terms of both form and function.

12 Likes

I guess that would be major work to get this working perfectly.

Vaguely related, a now broken WYSIWYG editor plugin was created and discussed a while ago:

3 Likes

Yeah, was just looking at that before posting this, just wanted to make it a proper request.

I noticed @sam said that there are essentially Plans™in the works as of October 2022.

3 Likes

Just stumbled on this open-source library that does Notion-like commands. I’m not sure how easy it would be to integrate into Discourse but wanted to post it just in case someone else had an idea:

6 Likes

This looks like it is built on https://tiptap.dev/ which is closed?

1 Like

Tiptap is open source as far as I’m aware:

3 Likes

Oh I see, the pro extensions are for pay.

The big tricky thing here is the 2 way. markdown ↔ html bridging. Giving up on markdown is something I would like to avoid with any experiments in this space.

5 Likes

TipTap is a wrapper around ProseMirror: https://prosemirror.net/.

2 Likes

Agreed.

I mostly linked it as an example, I do think experimentation in this space could be worthwhile, but I’m not super sure just yet on how it could work on a more technical level, particularly when one of the goals is to not give up markdown <> html bridging.

I believe I still feel positive about this like I did in Jul 2023 when I made the topic, as almost everything I use as an app where writing is involved has similar functionality now.

I’ll give this more thought in the coming weeks and post back if I think of anything.

At minimum, it should include some sort of keyboard method, like typing “/” or some other designated symbol that brings up a seamless selection palette for the insertion of formatting and things that Discourse deems worthy, like notion, tiptap, etc.

1 Like

Looks like prosemirror uses Discourse (https://discuss.prosemirror.net/) so maybe they have some thoughts on it. Also saw they have an integration for markdown but I have no idea if any of this would align with what Sam talked about, just wanted to include it in case people want to research it more.

3 Likes

Its creator also has an account on Meta. I won’t ping him here, but he’s the author of a great Javascript book: https://eloquentjavascript.net/.

As far as I know, it would be a really complex task to switch the current Discourse editor to something based on prosemirror.

2 Likes

My suggestion for this topic wasn’t to use tiptap exactly, it was used as an example. What I’m recommending is the block editing experience.

2 Likes

This editor seems to support markdown ↔ html conversion out of the box:

2 Likes

@thoka I tested it from the link you gave. It really works great. It would be great to see this editor in discourse. I hope there will be a change like this in the future.

Hm. Seems to work at first glance.
A suitable editor must at least support lossless roundtrip conversion of any discourse markdown → html/editor state → markdown.

The linked demo fails, for example, on aligned tables.

3 Likes

I haven’t tried it on tables. If development continues, this problem can also be fixed.

It might be worth looking at Meta’s Lexical editor: Introduction | Lexical. It can support 2 way markdown to html bridging: @lexical/markdown | Lexical.

I didn’t find much to get started with in the docs, but working backwards from the Lexical Playground code is helpful, at least in the context of a React app.

8 Likes

Absolutely, @renato experimented with this a bit, it is a mammoth project but something we are very much interested in exploring.

8 Likes

Currently Discourse uses a mix of markdown, bbcode and HTML as its underlying data format. Do any plans towards a more unified format exist?

Regarding experiments: Is it common sense that any visual editor should at least be idempotent (no change in source when doing load, do not edit, save) and locally contained (only change in source where edits have been done)?

3 Likes

Here is Invision announcing TipTap as their new editor:

3 Likes