fix: crash when resolving conflicts

apps/web/public/diff.worker.js

@@ -875,7 +875,7 @@ function onMessage(ev) {
       case "clean": {
         const { html } = data;
         const cleanHtml = diff.clean(html);
-        sendMessage("decrypt", { html: cleanHtml }, messageId);
+        sendMessage("clean", cleanHtml, messageId);
         break;
       }
       default:

apps/web/src/components/diff-viewer/content-toggle.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Flex, Text, Button } from "rebass";
+import { Flex, Button } from "rebass";
 import { timeConverter } from "../../utils/time";
-import diff from "./differ";
 
 function ContentToggle(props) {
   const {
@@ -12,6 +11,7 @@ function ContentToggle(props) {
     label,
     dateEdited,
     editors,
+    cleanDiff,
     resolveConflict,
   } = props;
 
@@ -23,10 +23,12 @@ function ContentToggle(props) {
             variant="primary"
             mr={2}
             onClick={async () => {
-              const { selectedEditor, otherEditor } = editors();
+              const { selectedEditor, otherEditor } = editors;
               await resolveConflict(
-                diff.clean(selectedEditor.getContent({ format: "html" })),
-                diff.clean(otherEditor.getContent({ format: "html" }))
+                await cleanDiff(
+                  document.getElementById(selectedEditor).innerHTML
+                ),
+                await cleanDiff(document.getElementById(otherEditor).innerHTML)
               );
             }}
             p={1}
@@ -38,10 +40,20 @@ function ContentToggle(props) {
         <Button
           variant="primary"
           onClick={async () => {
+            console.log("isOtherSelected", isOtherSelected);
             if (isOtherSelected) {
-              const { selectedEditor } = editors();
+              const { selectedEditor } = editors;
+              console.log(
+                selectedEditor,
+                document.getElementById(selectedEditor).innerHTML,
+                await cleanDiff(
+                  document.getElementById(selectedEditor).innerHTML
+                )
+              );
               await resolveConflict(
-                diff.clean(selectedEditor.getContent({ format: "html" }))
+                await cleanDiff(
+                  document.getElementById(selectedEditor).innerHTML
+                )
               );
             } else {
               onToggle();

apps/web/src/components/diff-viewer/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Flex, Box, Text, Button } from "rebass";
 import * as Icon from "../icons";
 import ContentToggle from "./content-toggle";
@@ -32,7 +32,6 @@ function navigateConflicts(prev) {
     );
   } else nextConflict = conflicts[0];
   if (!nextConflict) return false;
-  console.log(nextConflict);
   currentConflict = nextConflict;
   currentConflict.scrollIntoView({ block: "center" });
 }
@@ -143,8 +142,7 @@ function DiffViewer(props) {
     setIsEditorOpen(true);
   }, [setIsEditorOpen]);
 
-  const [localEditor, remoteEditor] = [useRef(), useRef()];
-  const [selectedDelta, setSelectedDelta] = useState(-1);
+  const [selectedContent, setSelectedContent] = useState(-1);
 
   if (!conflictedNote || !localContent || !remoteContent) return null;
   return (
@@ -210,13 +208,14 @@ function DiffViewer(props) {
               label="Current note"
               resolveConflict={resolveConflict}
               dateEdited={localContent.dateEdited}
-              isSelected={selectedDelta === 0}
-              isOtherSelected={selectedDelta === 1}
-              onToggle={() => setSelectedDelta((s) => (s === 0 ? -1 : 0))}
-              editors={() => ({
-                selectedEditor: remoteEditor.current.editor,
-                otherEditor: localEditor.current.editor,
-              })}
+              isSelected={selectedContent === 0}
+              isOtherSelected={selectedContent === 1}
+              onToggle={() => setSelectedContent((s) => (s === 0 ? -1 : 0))}
+              cleanDiff={async (html) => await differ.clean(html)}
+              editors={{
+                selectedEditor: "diffViewAfter",
+                otherEditor: "diffViewBefore",
+              }}
               sx={{
                 borderStyle: "solid",
                 borderWidth: 0,
@@ -263,14 +262,15 @@ function DiffViewer(props) {
               }}
               resolveConflict={resolveConflict}
               label="Incoming note"
-              isSelected={selectedDelta === 1}
-              isOtherSelected={selectedDelta === 0}
+              isSelected={selectedContent === 1}
+              isOtherSelected={selectedContent === 0}
               dateEdited={remoteContent.dateEdited}
-              onToggle={() => setSelectedDelta((s) => (s === 1 ? -1 : 1))}
-              editors={() => ({
-                selectedEditor: localEditor.current.editor,
-                otherEditor: remoteEditor.current.editor,
-              })}
+              onToggle={() => setSelectedContent((s) => (s === 1 ? -1 : 1))}
+              cleanDiff={async (html) => await differ.clean(html)}
+              editors={{
+                selectedEditor: "diffViewBefore",
+                otherEditor: "diffViewAfter",
+              }}
             />
             <ScrollSyncPane>
               <Box