Markdown WYSIWYG Editor

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

Add aMarkdownLexicalcomponent to your REACT application, then choose your options.

MarkdownLexicalFormatTextPlugin to add (bold) / (italic) / (underline) and (Strikethrough) options to your editor.

MarkdownLexicalUndoRedoPlugin to add (undo) / and (redo) options to your editor.

MarkdownLexicalListPlugin to addand list options to your editor.

And even more like MarkdownLexicalQuotePlugin,MarkdownLexicalLinkPlugin.

Or create your own plugin to add to your MarkdownLexical editor component.

ExamplesAdding options to format text, undo redo, quote and lists:

Enter some Text

<MarkdownLexical className='w-full'>
  <MarkdownLexicalUndoRedoPlugin />
  <MarkdownLexicalFormatTextPlugin />
  <MarkdownLexicalListPlugin />
  <MarkdownLexicalQuotePlugin />
</MarkdownLexical>

Adding only format text option:

Enter some Text

<MarkdownLexical className='w-full'>
  <MarkdownLexicalFormatTextPlugin />
</MarkdownLexical>

With a default value:

<MarkdownLexical className='w-full' 
  defaultMarkdownValue={"Hello **all**"}>
  <MarkdownLexicalFormatTextPlugin />
</MarkdownLexical>