MarkdownPlugin

MarkdownPlugin(props): Element

Defined in: packages/editor/src/plugins/plugin.markdown.tsx:72

Add markdown behaviors for common markdown actions such as converting ### to headings, --- to HRs, and more.

Beta

This API should not be used in production and may be trimmed from a public release.

Parameters

props

config

MarkdownPluginConfig

Returns

Element

Example

Configure the bundled markdown behaviors

import {EditorProvider} from '@portabletext/editor'
import {MarkdownPlugin} from '@portabletext/editor/plugins'

function App() {
  return (
   <EditorProvider>
     <MarkdownPlugin
       config={{
         boldDecorator: ({schema}) =>
           schema.decorators.find((decorator) => decorator.value === 'strong')?.value,
         codeDecorator: ({schema}) =>
           schema.decorators.find((decorator) => decorator.value === 'code')?.value,
         italicDecorator: ({schema}) =>
           schema.decorators.find((decorator) => decorator.value === 'em')?.value,
         strikeThroughDecorator: ({schema}) =>
           schema.decorators.find((decorator) => decorator.value === 'strike-through')?.value,
         horizontalRuleObject: ({schema}) => {
           const name = schema.blockObjects.find(
             (object) => object.name === 'break',
           )?.name
           return name ? {name} : undefined
         },
         defaultStyle: ({schema}) => schema.styles[0].value,
         headingStyle: ({schema, level}) =>
           schema.styles.find((style) => style.value === `h${level}`)
             ?.value,
         blockquoteStyle: ({schema}) =>
           schema.styles.find((style) => style.value === 'blockquote')
             ?.value,
         unorderedListStyle: ({schema}) =>
           schema.lists.find((list) => list.value === 'bullet')?.value,
         orderedListStyle: ({schema}) =>
           schema.lists.find((list) => list.value === 'number')?.value,
       }}
     />
     {...}
   </EditorProvider>
 )
}