From 094b7349b327756b0fd9cae3db7f2a7b4250809b Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Wed, 15 Jan 2025 17:05:12 +0100
Subject: [PATCH] feat(editor): add diffsourcePlugin

---
 src/components/Markdown/Editor.tsx | 53 ++++++++++++++++++------------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/components/Markdown/Editor.tsx b/src/components/Markdown/Editor.tsx
index 45bea77..f2baa8d 100644
--- a/src/components/Markdown/Editor.tsx
+++ b/src/components/Markdown/Editor.tsx
@@ -4,6 +4,8 @@ import {
   codeBlockPlugin,
   CodeToggle,
   CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
   directivesPlugin,
   headingsPlugin,
   imagePlugin,
@@ -68,34 +70,42 @@ export const Editor = React.memo(
       () => [
         toolbarPlugin({
           toolbarContents: () => (
-            <>
-              <UndoRedo />
-              <Separator />
-              <BoldItalicUnderlineToggles />
-              <CodeToggle />
-              <Separator />
-              <StrikeThroughSupSubToggles />
-              <Separator />
-              <ListsToggle />
-              <Separator />
-              <BlockTypeSelect />
-              <Separator />
+            <DiffSourceToggleWrapper
+              children={
+                <>
+                  <UndoRedo />
+                  <Separator />
+                  <BoldItalicUnderlineToggles />
+                  <CodeToggle />
+                  <Separator />
+                  <StrikeThroughSupSubToggles />
+                  <Separator />
+                  <ListsToggle />
+                  <Separator />
+                  <BlockTypeSelect />
+                  <Separator />
 
-              <CreateLink />
-              <InsertImage />
-              <YouTubeButton />
+                  <CreateLink />
+                  <InsertImage />
+                  <YouTubeButton />
 
-              <Separator />
+                  <Separator />
 
-              <InsertTable />
-              <InsertThematicBreak />
+                  <InsertTable />
+                  <InsertThematicBreak />
 
-              <Separator />
-              <InsertCodeBlock />
-            </>
+                  <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
       []
     )