Markdown WYSIWYG Editor

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

You can create your own custom plugins easily. For example, let's create a plugin to add voice recognition to your editor.

ExampleIn this example, the MarkdownLexicalVoicePlugin opens a dialog panel to let the user speaks and then add the speech to text result to the editor.(This example does not work and you will need to add the text in the input text area before submit and see the result)

Enter some Text

const MarkdownLexicalVoicePlugin = () => {
    const [editor] = useLexicalComposerContext();
    const [open, setOpen] = useState(false);
    const [synopsisText, setSynopsisText] = useState<string>('');

    const onSubmit = ((e: any) => {
        // updating the editor, then close the dialog
        editor.update(() => {
            const root = $getRoot();
            const paragraphNode = $createParagraphNode();
            const textNode = $createTextNode(synopsisText);
            paragraphNode.append(textNode);
            root.append(paragraphNode);
            setOpen(false);
        });
    });

    return (
    <Dialog open={open} onOpenChange={setOpen}>
        <Button onClick={() => setOpen(true)} className="!rounded-[4px] p-0 w-7 h-7">
            <Mic className="w-4 h-4" />
        </Button>
        <DialogContent>
            ....
            <DialogFooter>
                <Button onClick={onSubmit}>Submit</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>);
}

<MarkdownLexical name="markdown" className='w-full'>
    <MarkdownLexicalVoicePlugin />
</MarkdownLexical>