Next.js Discord

Discord Forum

Do you know any markdown editor component which uses component to render markdown in preview mode?

Answered
Iridescent shark posted this in #help-forum
Open in Discord
Iridescent sharkOP
I need markdown editor component to use it in my blog website to write posts, for rendering page I use markdown library and react components for each markdown element. I need editor the can use the same components in preview that I use on blog page
Answered by Gazami crab
I use a component with a "isEditing" arg. If true, I return a textarea. If false, I return the markdown render
View full answer

4 Replies

Gazami crab
I use a text area & toggle between them
Iridescent sharkOP
@Gazami crab Can you please share your example because I had problems with formatting and tabulations when i tried implement my own?
@Iridescent shark <@881317256741650502> Can you please share your example because I had problems with formatting and tabulations when i tried implement my own?
Gazami crab
I use a component with a "isEditing" arg. If true, I return a textarea. If false, I return the markdown render
Answer
Gazami crab
import React from "react"

import Markdown from "@/app/_components/Markdown"

export default function MarkdownEditor({ content, editing, onChange }: { content: string, editing: boolean, onChange: (newContent: string) => void }) {
    if (editing)
        return (
            <div className="p-8">
                <textarea
                    className="w-full h-screen resize-none outline-none"
                    defaultValue={ content }
                    onChange={ (e) => onChange(e.target.value) }
                />
            </div>
        )

    return (
        <Markdown>
            { content }
        </Markdown>
    )
}