src/components/Markdown/Editor.tsx

@@ -4,6 +4,8 @@ import {
   codeBlockPlugin,
   CodeToggle,
   CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
   directivesPlugin,
   headingsPlugin,
   imagePlugin,
@@ -68,6 +70,8 @@ export const Editor = React.memo(
       () => [
         toolbarPlugin({
           toolbarContents: () => (
+            <DiffSourceToggleWrapper
+              children={
                 <>
                   <UndoRedo />
                   <Separator />
@@ -93,9 +97,15 @@ export const Editor = React.memo(
                   <Separator />
                   <InsertCodeBlock />
                 </>
+              }
+            />
           )
         }),
         headingsPlugin(),
+        diffSourcePlugin({
+          viewMode: 'rich-text',
+          diffMarkdown: markdown
+        }),
         quotePlugin(),
         imagePlugin({
           ImageDialog: ImageDialog
@@ -118,6 +128,7 @@ export const Editor = React.memo(
           codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor]
         })
       ],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     )