WYSIWYG Markdown editor
Answered
Argentine hake posted this in #help-forum
Argentine hakeOP
Hello everyone,
I have been stuck trying to create a dynamic
There are many react markdown editors out there, however, none of them combine the editor and the preview pane into one, like I want to do. This problem is quite frustrating so any help or suggestions are gladly welcomed!
(If you need another example of what I'm trying to create, check [Obsidian MD](https://obsidian.md/))
I have been stuck trying to create a dynamic
textarea that automatically converts markdown (and custom patterns e.g. {insert_id}) into react elements and then inserts them into the text. To give an example, I am trying to create a system like in discord where typing Hello World or typing <insert_id> allows you to see the rendered markdown within the editor.There are many react markdown editors out there, however, none of them combine the editor and the preview pane into one, like I want to do. This problem is quite frustrating so any help or suggestions are gladly welcomed!
(If you need another example of what I'm trying to create, check [Obsidian MD](https://obsidian.md/))
Answered by joulev
<textarea> won’t do here. You need contenteditable.
Check out tiptap, prosemirror, slatejs and lexical. Choose one of them.
Check out tiptap, prosemirror, slatejs and lexical. Choose one of them.
30 Replies
@Anay-208 try using `marked`
Argentine hakeOP
I looked it up. Assuming it's [this](https://www.npmjs.com/package/marked) one, it doesn't really help solve the issue of combining the
textarea and preview windows into one.@Anay-208 So you just need preview for markup?"
Argentine hakeOP
This is what I'm trying to achieve
I also want to be able to extend this with my own markdown so that when I type
{insert_id}, it inserts a react component.Didn’t notice the markup should go away
@Argentine hake Hello everyone,
I have been stuck trying to create a dynamic `textarea` that automatically converts `markdown` (and custom patterns e.g. `{insert_id}`) into react elements and then inserts them into the text. To give an example, I am trying to create a system like in discord where typing `Hello World` or typing <insert_id> allows you to see the rendered markdown within the editor.
There are many react markdown editors out there, however, none of them combine the editor and the preview pane into one, like I want to do. This problem is quite frustrating so any help or suggestions are gladly welcomed!
(If you need another example of what I'm trying to create, check [Obsidian MD](https://obsidian.md/))
<textarea> won’t do here. You need contenteditable.
Check out tiptap, prosemirror, slatejs and lexical. Choose one of them.
Check out tiptap, prosemirror, slatejs and lexical. Choose one of them.
Answer
@joulev <textarea> won’t do here. You need contenteditable.
Check out tiptap, prosemirror, slatejs and lexical. Choose one of them.
Argentine hakeOP
Thank you! I am looking into
slatejs and it seems to be perfect for what I need. The only remaining question I have is how do I render the rich text when fetching the raw text from a postgres database? I want to be able to render custom embeds alongisde regular markdown@Anay-208 Didn’t notice the markup should go away
Argentine hakeOP
Thank you for your suggestion! The markup doesn't need to go away. I just needed something more flexible so I could implement custom embeds and it seems like
slatejs is perfect for the job.@Argentine hake Thank you! I am looking into `slatejs` and it seems to be perfect for what I need. The only remaining question I have is how do I render the `rich` text when fetching the `raw` text from a `postgres` database? I want to be able to render custom embeds alongisde regular markdown
In the case of slate, you’ll save the data as a json tree. Then just render the tree with regular react components, check the rendering section of their documentation
@joulev In the case of slate, you’ll save the data as a json tree. Then just render the tree with regular react components, check the rendering section of their documentation
Argentine hakeOP
That's a problem because I'm trying to store the content in a
vercel/postgres database, which doesn't inherently support json as far as I'm aware.@Argentine hake That's a problem because I'm trying to store the content in a `vercel/postgres` database, which doesn't inherently support `json` as far as I'm aware.
In an app at work, I save as the JSON.stringify’d string of that json object, then when we get the string we JSON.parse and validate that string
So as far as the database is concerned, it’s a string
@joulev So as far as the database is concerned, it’s a string
Argentine hakeOP
I see, that could work. That, however, raises the issue of storage efficiency. Storing it as a
json tree will take up significantly more space, which is a problem as I am using the free tier of vercel hosting, which has quite limited storage space.@Argentine hake I see, that could work. That, however, raises the issue of storage efficiency. Storing it as a `json tree` will take up significantly more space, which is a problem as I am using the free tier of vercel hosting, which has quite limited storage space.
https://neon.tech/docs/data-types/json Neon supports json which means vercel/postgres supports json too
Jsonb column in Postgres is made for this
With that said unless you plan on indexing / filtering by json key/values
You can stick your json into a text column (don’t do this)
About the amount of space it uses, this is negligible
Or at least it should be
If you’re making technical decisions on this sort of tiny scale to save money / be in a free tier
It’s not exactly setting yourself up for success
But just shooting yourself in the foot
Also if you use neon directly instead of vercel postgres
You’ll get a lot more free benefits and it’ll be cheaper if you end up paying for it
Vercel is trying to upsell hard on the dx of their storage offering
But in reality it’s just a thin layer on top of neon
Argentine hakeOP
Sorry for not thanking everyone who helped me thus far, I really appreciate your help! I have been looking into
SlateJS as my editor and tried implementing a live markdown preview. I used the example provided in the github, however, I do not want to use any external libraries such as PrismJS and would much rather write my own logic. However, I am incredibly confused and unsure on how to proceed so any help or articles / docs would be appreciated