Markdown WYSIWYG Editor

Add and customize a Markdown WYSIWYG editor in your React application. Usesshadcn/uilibrary andlexical editorframework.

MarkdownLexicalsupports also famous frameworks like React Hook Form:

ExampleIn this example, the MarkdownLexical value is required to validate the form. Check the error validation by clicking the submit button without any text in the editor and see how it's handled by default.

"use client";
import { SubmitHandler, useForm } from "react-hook-form";

export default function MarkdownLexicalForm() {

  const {register, handleSubmit, formState: { errors }} = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center w-full">

        <MarkdownLexical className="w-full max-w-xl"
            id="markdownRequired"
            textAreaClassName={cn(
                errors.markdownRequired ? 'border border-solid rounded-sm border-red-600 bg-red-200 dark:bg-red-200' : ''
            )}
            {...register('markdownRequired', { required: true })}>
            <MarkdownLexicalFormatTextPlugin />
        </MarkdownLexical>

        {errors.markdownRequired && <div className="w-full max-w-xl text-red-600">Markdown textarea is required</div>}

        <Button type="submit">Submit</Button>
    </form>);
}