# Notion like Editor

**URL:** https://meta.discourse.org/t/notion-like-editor/273130
**Category:** Feature
**Tags:** composer, completed
**Created:** [July 28, 2023, 7:56am UTC](https://meta.discourse.org/t/notion-like-editor/273130 "2023-07-28T07:56:25Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [July 28, 2023, 7:56am UTC](https://meta.discourse.org/t/notion-like-editor/273130/1 "2023-07-28T07:56:25Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/4/d/a4de58f623d5d934c9c43df1f3015cc4e928a5b0.png)

> **[Tiptap - Dev Toolkit Editor Suite](https://tiptap.dev/)**
>
> Tiptap is a suite of content editing & real time collaboration tools. Build editor experiences like Notion in weeks, not years.

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/8/cd800104585816a546cad8e571268d113af21ea9.png)

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.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 28, 2023, 8:04am UTC](https://meta.discourse.org/t/notion-like-editor/273130/2 "2023-07-28T08:04:45Z")

</div>

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:

> [@Discourse Basic Editor](https://meta.discourse.org/t/discourse-basic-editor-beginner-friendly-composer/159431):
>
> Hi, I am working on a plugin at the moment that replaces the standard editor with a wysiwg editor. I think its easier for beginner users like myself and others. Here is a short video on how it works so far and what my plans are: [[Discourse.org - A more user friendly editor for beginners] ](https://www.youtube.com/watch?v=Mkb-igD7j7k) I think it will be finished in the next few months ( depending on my motivation smiley ) I would be interested if others are interested in using this as well. Thaaaanks slightly_smiling_face P…

---

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [July 28, 2023, 8:08am UTC](https://meta.discourse.org/t/notion-like-editor/273130/3 "2023-07-28T08:08:34Z")

</div>

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.

> [@Discourse Basic Editor](https://meta.discourse.org/t/discourse-basic-editor-beginner-friendly-composer/159431/81):
>
> My goal is to have all the building blocks in place to allow for editor experimentation in Discourse. I have discussed this with @david, @tgxworld and @martin in the past, we have a lot of stuff in progress at the moment and can not get started quite yet. That said … our rough plans are: enough extensibility to allow easy replacement of the editor with a contenteditable composer experiments around trivial components that add minimal extra interesting functionality A component that “inlines…

---

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [April 7, 2024, 5:44am UTC](https://meta.discourse.org/t/notion-like-editor/273130/7 "2024-04-07T05:44:49Z")

</div>

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:

[https://github.com/steven-tey/novel?tab=readme-ov-file](https://github.com/steven-tey/novel?tab=readme-ov-file)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 8, 2024, 4:01am UTC](https://meta.discourse.org/t/notion-like-editor/273130/8 "2024-04-08T04:01:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [April 8, 2024, 4:02am UTC](https://meta.discourse.org/t/notion-like-editor/273130/9 "2024-04-08T04:02:53Z")

</div>

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

[https://github.com/ueberdosis/tiptap](https://github.com/ueberdosis/tiptap)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 8, 2024, 4:05am UTC](https://meta.discourse.org/t/notion-like-editor/273130/10 "2024-04-08T04:05:19Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [April 8, 2024, 4:11am UTC](https://meta.discourse.org/t/notion-like-editor/273130/11 "2024-04-08T04:11:27Z")

</div>

TipTap is a wrapper around ProseMirror: [https://prosemirror.net/](https://prosemirror.net/).

---

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [April 8, 2024, 4:13am UTC](https://meta.discourse.org/t/notion-like-editor/273130/12 "2024-04-08T04:13:36Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [April 8, 2024, 4:48am UTC](https://meta.discourse.org/t/notion-like-editor/273130/13 "2024-04-08T04:48:27Z")

</div>

Looks like prosemirror uses Discourse ([https://discuss.prosemirror.net/](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.

[https://github.com/ProseMirror/prosemirror-markdown?tab=readme-ov-file](https://github.com/ProseMirror/prosemirror-markdown?tab=readme-ov-file)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [April 8, 2024, 5:21am UTC](https://meta.discourse.org/t/notion-like-editor/273130/14 "2024-04-08T05:21:26Z")

</div>

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/](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.

---

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [April 8, 2024, 5:24am UTC](https://meta.discourse.org/t/notion-like-editor/273130/15 "2024-04-08T05:24:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [April 8, 2024, 6:46am UTC](https://meta.discourse.org/t/notion-like-editor/273130/16 "2024-04-08T06:46:23Z")

</div>

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

> **[Support CKEditor5 Markdown Editor](https://forum.obsidian.md/t/support-ckeditor5-markdown-editor/43884)**
>
> CKEditor5 have a Mardown (MD) editor. Its genius, Can Obsidian support it? Proposed solution Here’s CKEditor5 - Works anywhere. Here’s a link of Demo: Markdown output - CKEditor 5 Documentation I wish Obsidian team look into it. Or maybe do...

> **[Support CKEditor5 Markdown Editor](https://forum.obsidian.md/t/support-ckeditor5-markdown-editor/43884/3)**
>
> To save anyone else time, here’s the direct link to the live Markdown demo rather than the documentation: While I don’t personally have a problem with the current editing mode, I am intrigued by this as an option provided by a plugin.

---

<div class="post-metadata">

### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [April 9, 2024, 10:06pm UTC](https://meta.discourse.org/t/notion-like-editor/273130/17 "2024-04-09T22:06:34Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [April 9, 2024, 10:24pm UTC](https://meta.discourse.org/t/notion-like-editor/273130/18 "2024-04-09T22:24:15Z")

</div>

> [@ozkn](#):
>
> It really works great.

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.

---

<div class="post-metadata">

### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [April 9, 2024, 10:29pm UTC](https://meta.discourse.org/t/notion-like-editor/273130/19 "2024-04-09T22:29:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [May 3, 2024, 7:26pm UTC](https://meta.discourse.org/t/notion-like-editor/273130/20 "2024-05-03T19:26:54Z")

</div>

> [@sam](#):
>
> The big tricky thing here is the 2 way. markdown ↔ html bridging.

It might be worth looking at Meta’s Lexical editor: [Introduction | Lexical](https://lexical.dev/docs/intro). It can support 2 way markdown to html bridging: [@lexical/markdown | Lexical](https://lexical.dev/docs/packages/lexical-markdown).

I didn’t find much to get started with in the docs, but working backwards from the [Lexical Playground](https://playground.lexical.dev/) code is helpful, at least in the context of a React app.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 4, 2024, 2:13am UTC](https://meta.discourse.org/t/notion-like-editor/273130/21 "2024-05-04T02:13:30Z")

</div>

> [@simon](#):
>
> It might be worth looking at Meta’s Lexical edito

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

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [May 4, 2024, 8:02am UTC](https://meta.discourse.org/t/notion-like-editor/273130/22 "2024-05-04T08:02:17Z")

</div>

> [@sam](#):
>
> Giving up on markdown is something I would like to avoid with any experiments in this space.

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)?

---

<div class="post-metadata">

### Author: ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)
#### Post date: [May 20, 2024, 12:14am UTC](https://meta.discourse.org/t/notion-like-editor/273130/23 "2024-05-20T00:14:21Z")

</div>

Here is Invision announcing TipTap as their new editor:

[https://invisioncommunity.com/news/invision-community/invision-community-5-the-all-new-editor-r1301/](https://invisioncommunity.com/news/invision-community/invision-community-5-the-all-new-editor-r1301/)

[Next page](https://meta.discourse.org/t/notion-like-editor/273130.md?page=2)
