Diff/source mode

The diff/source plugin allows the user to switch to editing the markdown source of the document or to compare it to the initial version of the document. It's an useful integration if you're building something for power users that are familiar with markdown. The plugin is enabled by the DiffSourceToggleWrapper toolbar component.

<MDXEditor
  onChange={console.log}
  markdown={'hello world'}
  plugins={[
    // the viewMode parameter lets you switch the editor to diff or source mode.
    // you can get the diffMarkdown from your backend and pass it here.
    diffSourcePlugin({ diffMarkdown: 'An older version', viewMode: 'rich-text' }),
    toolbarPlugin({
      toolbarContents: () => (
        <DiffSourceToggleWrapper>
          <UndoRedo />
        </DiffSourceToggleWrapper>
      )
    })
  ]}
/>