MarkdownEditor

To use this component, install the following additional packages

npm i react-markdown react-syntax-highlighter remark-gfm prettier

Usage

import { MarkdownEditor, MarkdownEditorProps } from "mui-extended";

const props: MarkdownEditorProps;

const markdownEditor = <MarkdownEditor {...props} />;

Props

• All props of TextareaAutosize
• inlinePreview - boolean , if true preview is displayed below the write section
• menu- string[][] - customized menu order
• menuButtons - FunctionComponents to render Menu Buttons
• menuActions - functions to add custom logic to buttons
  • each action for a given menu is of type

    export type MarkdownEditorMenuButtonAction = (
      name: string,
      content: string,
      selectionStart: number,
      selectionEnd: number
    ) => { content: string; selectionStart: number; selectionEnd: number };
    

Features

• Wrapped around TextareaAutosize

• menu can be customized by

  • changing the order and grouping of menu buttons
  • overriding or adding new additional buttons
  • overriding or adding neew additional actions

  Note If used as InputComponent for TextField , add bellow props to TextField

     const props = {
       InputLabelProps:{{ shrink: true }},
       fullWidth : true
     }