From de3c038165cf5af0baa51764bead6d025ec36ebf Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 11:55:03 +0200
Subject: [PATCH 01/59] hide comment highlights if timeline sidebar is open

---
 .../components/VersionControlEditor.tsx           | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 36a2aa5a..d021ede1 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -334,6 +334,17 @@ export const VersionControlEditor: React.FC<{
 
   const branches = doc.branchMetadata.branches ?? [];
 
+  // Currently we can't filter out comments that didn't exist in a previous version of the document
+  // this leads to seemingly random places in the document being highlighted. The problem is that
+  // the cursor api doesn't provide a way to detect if the op was present it always gives the closest
+  // position to that op in the current document.
+  //
+  // As a short term workaround we filter out all comments if the timeline sidebar is active
+  const visibleAnnotations =
+    sidebarMode === "timeline"
+      ? annotations.filter((annotation) => annotation.type !== "highlighted")
+      : annotations;
+
   return (
     <div className="flex h-full overflow-hidden">
       <div className="flex flex-col flex-1 overflow-hidden">
@@ -546,7 +557,7 @@ export const VersionControlEditor: React.FC<{
                   datatypeId={datatypeId}
                   docUrl={selectedBranch.url}
                   docHeads={docHeads}
-                  annotations={annotations}
+                  annotations={visibleAnnotations}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
@@ -557,7 +568,7 @@ export const VersionControlEditor: React.FC<{
                   datatypeId={datatypeId}
                   docUrl={selectedBranch?.url ?? mainDocUrl}
                   docHeads={docHeads}
-                  annotations={annotations}
+                  annotations={visibleAnnotations}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}

From 6c43b9c7a8caa975be0aa0656a5e4ec9921f63ac Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 16 May 2024 13:47:46 +0200
Subject: [PATCH 02/59] reset history state when switching to review mode

---
 .../components/VersionControlEditor.tsx              | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index d021ede1..788ae193 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -319,7 +319,17 @@ export const VersionControlEditor: React.FC<{
     isCommentInputFocused,
   });
 
-  const [sidebarMode, setSidebarMode] = useState<SidebarMode>("comments");
+  const [sidebarMode, _setSidebarMode] = useState<SidebarMode>("comments");
+
+  const setSidebarMode = (sidebarMode: SidebarMode) => {
+    // reset state from history mode
+    if (sidebarMode === "comments") {
+      setDiffFromHistorySidebar(undefined);
+      setDocHeadsFromHistorySidebar(undefined);
+    }
+
+    _setSidebarMode(sidebarMode);
+  };
 
   const [
     annotationsPositionsInSidebarMap,

From 8a0215d8725b14f9ed4778c20170fb1e14a059a0 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 16 May 2024 13:59:51 +0200
Subject: [PATCH 03/59] create a valid range when trying to comment on the end
 of the document

---
 src/tools/essay/components/CodeMirrorEditor.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 10a9d694..9ee02f8a 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -269,11 +269,21 @@ export function MarkdownEditor({
           if (transaction.newSelection && view.hasFocus) {
             const selection = view.state.selection.ranges[0];
 
-            if (selection) {
+            if (selection && selection.from !== selection.to) {
+              const docLength = view.state.doc.length;
+
               setSelectedAnchors([
                 {
                   fromCursor: getCursorSafely(doc, ["content"], selection.from),
-                  toCursor: getCursorSafely(doc, ["content"], selection.to),
+                  toCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+
+                    // we can't get a cursor to the end the document because cursors always point to characters
+                    // in the future we want to have a cursor API in Automerge that allows to point to a side of a character similar to marks
+                    // as a workaround for now we just point to the last character instead if the end of the document is selected
+                    selection.to === docLength ? docLength - 1 : selection.to
+                  ),
                 },
               ]);
             } else {

From e012520d95e8e29ee70048aacbfe3d9bcdbb88dc Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 16 May 2024 14:28:15 +0200
Subject: [PATCH 04/59] filter out comments on empty ranges

---
 src/datatypes/markdown/datatype.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/datatypes/markdown/datatype.ts b/src/datatypes/markdown/datatype.ts
index a651187d..b5564824 100644
--- a/src/datatypes/markdown/datatype.ts
+++ b/src/datatypes/markdown/datatype.ts
@@ -240,6 +240,12 @@ const valueOfAnchor = (doc: MarkdownDoc, anchor: MarkdownDocAnchor) => {
   const from = getCursorPositionSafely(doc, ["content"], anchor.fromCursor);
   const to = getCursorPositionSafely(doc, ["content"], anchor.toCursor);
 
+  // if the anchor points to an empty range return undefined
+  // so highlight comments that point to this will be filtered out
+  if (from === to) {
+    return undefined;
+  }
+
   return doc.content.slice(from, to);
 };
 

From 622ea3b19c67ca633d5baa3918843207c980cae8 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 14:50:17 +0200
Subject: [PATCH 05/59] add global keyboard shortcut cmd+m+shift to comment

---
 .../components/ReviewSidebar.tsx              | 13 ++++
 .../components/VersionControlEditor.tsx       | 71 +++++++++++--------
 .../essay/components/CodeMirrorEditor.tsx     | 14 ----
 src/tools/tldraw/components/hooks.ts          |  4 +-
 4 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 3c626824..c63fa982 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -62,6 +62,18 @@ export const ReviewSidebar = React.memo(
       useState<string>();
     const account = useCurrentAccount();
 
+    const [commentInputElement, setCommentInputElement] =
+      useState<HTMLTextAreaElement>();
+
+    // sync focus state back to text area
+    useEffect(() => {
+      if (commentInputElement && isCommentInputFocused) {
+        setTimeout(() => {
+          commentInputElement.focus();
+        }, 100); // hack : add a bit of a delay otherwise focusing the element doesn't work when the sidebar hasn't been opened before
+      }
+    }, [commentInputElement, isCommentInputFocused]);
+
     const pendingAnnotationsForComment: HighlightAnnotation<
       unknown,
       unknown
@@ -241,6 +253,7 @@ export const ReviewSidebar = React.memo(
           </div>
 
           <Textarea
+            ref={setCommentInputElement}
             value={pendingCommentText}
             onChange={(event) => setPendingCommentText(event.target.value)}
             onKeyDown={(event) => {
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 788ae193..c816d006 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -80,7 +80,7 @@ interface MakeBranchOptions {
   heads?: A.Heads;
 }
 
-type SidebarMode = "comments" | "timeline";
+type SidebarMode = "review" | "history";
 
 /** A wrapper UI that renders a doc editor with a surrounding branch picker + timeline/annotations sidebar */
 export const VersionControlEditor: React.FC<{
@@ -120,14 +120,18 @@ export const VersionControlEditor: React.FC<{
     }
   }, [JSON.stringify(selectedBranch)]);
 
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const [sidebarMode, _setSidebarMode] = useState<SidebarMode>();
 
-  useEffect(() => {
-    if (!isSidebarOpen) {
+  const setSidebarMode = (sidebarMode: SidebarMode) => {
+    // reset state from history mode
+    if (sidebarMode === "review" || !sidebarMode) {
       setDiffFromTimelineSidebar(undefined);
       setDocHeadsFromTimelineSidebar(undefined);
     }
-  }, [isSidebarOpen]);
+
+    _setSidebarMode(sidebarMode);
+  };
+
   const [diffFromTimelineSidebar, setDiffFromTimelineSidebar] =
     useState<DiffWithProvenance>();
   const [docHeadsFromTimelineSidebar, setDocHeadsFromTimelineSidebar] =
@@ -175,6 +179,27 @@ export const VersionControlEditor: React.FC<{
     }
   }, [doc, changeDoc]);
 
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.code === "KeyM"
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        setSidebarMode("review");
+        setIsCommentInputFocused(true);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress, true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress, true);
+    };
+  }, []);
+
   const handleCreateBranch = useCallback(
     ({ name, heads }: MakeBranchOptions = {}) => {
       const branch = createBranch({
@@ -319,18 +344,6 @@ export const VersionControlEditor: React.FC<{
     isCommentInputFocused,
   });
 
-  const [sidebarMode, _setSidebarMode] = useState<SidebarMode>("comments");
-
-  const setSidebarMode = (sidebarMode: SidebarMode) => {
-    // reset state from history mode
-    if (sidebarMode === "comments") {
-      setDiffFromHistorySidebar(undefined);
-      setDocHeadsFromHistorySidebar(undefined);
-    }
-
-    _setSidebarMode(sidebarMode);
-  };
-
   const [
     annotationsPositionsInSidebarMap,
     setAnnotationsPositionsInSidebarMap,
@@ -351,7 +364,7 @@ export const VersionControlEditor: React.FC<{
   //
   // As a short term workaround we filter out all comments if the timeline sidebar is active
   const visibleAnnotations =
-    sidebarMode === "timeline"
+    sidebarMode === "history"
       ? annotations.filter((annotation) => annotation.type !== "highlighted")
       : annotations;
 
@@ -521,11 +534,11 @@ export const VersionControlEditor: React.FC<{
             )}
           </div>
 
-          {!isSidebarOpen && (
-            <div className={` ml-auto ${isSidebarOpen ? "mr-96" : "mr-4"}`}>
+          {!sidebarMode && (
+            <div className="ml-auto mr-4">
               <div className="flex items-center gap-2">
                 <Button
-                  onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                  onClick={() => setSidebarMode("review")}
                   variant="outline"
                   className={`h-8 text-x ${
                     annotations.filter(
@@ -589,11 +602,11 @@ export const VersionControlEditor: React.FC<{
         </ErrorBoundary>
       </div>
 
-      {isSidebarOpen && (
+      {sidebarMode && (
         <div className="border-l border-gray-200 py-2 h-full flex flex-col relative bg-gray-50">
           <div
             className="-left-[33px] absolute cursor-pointer hover:bg-gray-100 border hover:border-gray-500 rounded-lg w-[24px] h-[24px] grid place-items-center"
-            onClick={() => setIsSidebarOpen(false)}
+            onClick={() => setSidebarMode(null)}
           >
             <ChevronsRight size={16} />
           </div>
@@ -601,14 +614,16 @@ export const VersionControlEditor: React.FC<{
           <div className="px-2 pb-2 flex flex-col gap-2 text-sm font-semibold text-gray-600 border-b border-gray-200">
             <Tabs
               value={sidebarMode}
-              onValueChange={(value) => setSidebarMode(value as SidebarMode)}
+              onValueChange={(mode) =>
+                setSidebarMode(mode as "review" | "history")
+              }
             >
               <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="comments">
+                <TabsTrigger value="review">
                   <MessageSquareIcon size={16} className="mr-2" />
                   Review ({annotationGroups.length})
                 </TabsTrigger>
-                <TabsTrigger value="timeline">
+                <TabsTrigger value="history">
                   <HistoryIcon size={16} className="mr-2" />
                   History
                 </TabsTrigger>
@@ -617,7 +632,7 @@ export const VersionControlEditor: React.FC<{
           </div>
 
           <div className="min-h-0 flex-grow w-96">
-            {sidebarMode === "timeline" && (
+            {sidebarMode === "history" && (
               <TimelineSidebar
                 // set key to trigger re-mount on branch change
                 key={selectedBranch?.url ?? mainDocUrl}
@@ -629,7 +644,7 @@ export const VersionControlEditor: React.FC<{
                 setSelectedBranch={setSelectedBranch}
               />
             )}
-            {sidebarMode === "comments" && (
+            {sidebarMode === "review" && (
               <ReviewSidebar
                 doc={activeDoc}
                 handle={activeHandle}
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 9ee02f8a..ef66f97e 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -81,7 +81,6 @@ export type EditorProps = {
   annotations?: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[];
   diffStyle: DiffStyle;
   debugHighlights?: DebugHighlight[];
-  onOpenSnippet?: (range: SelectionRange) => void;
   foldRanges?: { from: number; to: number }[];
   isCommentBoxOpen?: boolean;
   setEditorContainerElement?: (container: HTMLDivElement) => void;
@@ -97,7 +96,6 @@ export function MarkdownEditor({
   docHeads,
   annotations,
   debugHighlights,
-  onOpenSnippet,
   foldRanges,
   setEditorContainerElement,
 }: EditorProps) {
@@ -167,7 +165,6 @@ export function MarkdownEditor({
             } else {
               assetsHandle = repo.find<AssetsDoc>(doc.assetsDocUrl);
             }
-
             await assetsHandle.whenReady();
             const assetsDoc = assetsHandle.docSync();
 
@@ -200,22 +197,11 @@ export function MarkdownEditor({
         }),
         indentOnInput(),
         keymap.of([
-          {
-            key: "Mod-o",
-            run: () => {
-              const selectedRange = view.state.selection.main;
-              onOpenSnippet(selectedRange);
-              return true;
-            },
-            preventDefault: true,
-            stopPropagation: true,
-          },
           ...defaultKeymap,
           ...searchKeymap,
           ...historyKeymap,
           ...foldKeymap,
           ...completionKeymap,
-          ...lintKeymap,
           indentWithTab,
         ]),
         EditorView.lineWrapping,
diff --git a/src/tools/tldraw/components/hooks.ts b/src/tools/tldraw/components/hooks.ts
index 5f4013bd..396a85ce 100644
--- a/src/tools/tldraw/components/hooks.ts
+++ b/src/tools/tldraw/components/hooks.ts
@@ -168,7 +168,7 @@ export const useDiffStyling = ({
             break;
           }
         }
-      }, 100);
+      });
 
       // delete shapes that are not part of the current diff
       store.store.remove(
@@ -185,7 +185,7 @@ export const useDiffStyling = ({
           element.style.filter = "";
         });
       highlightedElementsRef.current = activeHighlightedElements;
-    });
+    }, 100);
   }, [annotations, store, doc, camera, editor]);
 };
 export const useAnchorEventListener = ({

From 0b111cb822edfc6e8f66401b54d73bc7e1bf4d87 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 17 May 2024 14:18:03 +0200
Subject: [PATCH 06/59] handle setSelectedAnchors if selection is not a range

---
 .../essay/components/CodeMirrorEditor.tsx     | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index ef66f97e..4bf4c2b2 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -215,7 +215,7 @@ export function MarkdownEditor({
         // Now our custom stuff: Automerge collab, comment threads, etc.
         automergeSyncPlugin({
           handle,
-          path: ["content"],
+          path,
         }),
         frontmatterPlugin,
         annotationsField,
@@ -255,23 +255,35 @@ export function MarkdownEditor({
           if (transaction.newSelection && view.hasFocus) {
             const selection = view.state.selection.ranges[0];
 
-            if (selection && selection.from !== selection.to) {
-              const docLength = view.state.doc.length;
-
-              setSelectedAnchors([
-                {
-                  fromCursor: getCursorSafely(doc, ["content"], selection.from),
-                  toCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-
-                    // we can't get a cursor to the end the document because cursors always point to characters
-                    // in the future we want to have a cursor API in Automerge that allows to point to a side of a character similar to marks
-                    // as a workaround for now we just point to the last character instead if the end of the document is selected
-                    selection.to === docLength ? docLength - 1 : selection.to
-                  ),
-                },
-              ]);
+            if (selection) {
+              if (selection.from === selection.to) {
+                const cursorPos = selection.from;
+                const selectedAnnotationAnchors = annotations.flatMap(
+                  (annotation) =>
+                    annotation.anchor.fromPos <= cursorPos &&
+                    annotation.anchor.toPos >= cursorPos
+                      ? [annotation.anchor]
+                      : []
+                );
+
+                setSelectedAnchors(selectedAnnotationAnchors);
+              } else {
+                const docLength = view.state.doc.length;
+                setSelectedAnchors([
+                  {
+                    fromCursor: getCursorSafely(doc, path, selection.from),
+                    toCursor: getCursorSafely(
+                      doc,
+                      path,
+
+                      // we can't get a cursor to the end the document because cursors always point to characters
+                      // in the future we want to have a cursor API in Automerge that allows to point to a side of a character similar to marks
+                      // as a workaround for now we just point to the last character instead if the end of the document is selected
+                      selection.to === docLength ? docLength - 1 : selection.to
+                    ),
+                  },
+                ]);
+              }
             } else {
               setSelectedAnchors([]);
             }

From 9e134f51571fd0d1fe987c5926b36147e0044d18 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 17 May 2024 14:30:03 +0200
Subject: [PATCH 07/59] fix stale annotations in hook

---
 src/tools/essay/components/CodeMirrorEditor.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 4bf4c2b2..43964f9d 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -104,6 +104,11 @@ export function MarkdownEditor({
   const editorRoot = useRef<EditorView>(null);
   const [editorCrashed, setEditorCrashed] = useState<boolean>(false);
 
+  const annotationsRef = useRef<
+    AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[]
+  >([]);
+  annotationsRef.current = annotations;
+
   const handleReady = handle.isReady();
 
   // Propagate debug highlights into codemirror
@@ -258,13 +263,13 @@ export function MarkdownEditor({
             if (selection) {
               if (selection.from === selection.to) {
                 const cursorPos = selection.from;
-                const selectedAnnotationAnchors = annotations.flatMap(
-                  (annotation) =>
+                const selectedAnnotationAnchors =
+                  annotationsRef.current.flatMap((annotation) =>
                     annotation.anchor.fromPos <= cursorPos &&
                     annotation.anchor.toPos >= cursorPos
                       ? [annotation.anchor]
                       : []
-                );
+                  );
 
                 setSelectedAnchors(selectedAnnotationAnchors);
               } else {

From 75ae3f8fb47b70e8afb31db69467b82af623c2ce Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 17 May 2024 14:46:06 +0200
Subject: [PATCH 08/59] Add general comments without anchors above all other
 comments

---
 src/os/versionControl/annotations.ts          | 46 ++++++++++++++-----
 .../components/DiscussionInput.tsx            |  1 +
 src/os/versionControl/schema.ts               |  5 +-
 .../essay/components/EssayAnnotations.tsx     | 26 ++++++-----
 4 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index a7e1c399..5a85244f 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -99,8 +99,14 @@ export function useAnnotations({
     [hoveredState]
   );
 
-  const discussions = useMemo(
-    () => (doc?.discussions ? Object.values(doc.discussions) : []),
+  const discussionsWithoutAnchors = useMemo(
+    () =>
+      doc?.discussions
+        ? Object.values(doc.discussions).filter(
+            (discussion) =>
+              !discussion.anchors || discussion.anchors.length === 0
+          )
+        : [],
     [doc]
   );
 
@@ -207,20 +213,36 @@ export function useAnnotations({
     }
 
     const sortAnchorsBy = DATA_TYPES[datatypeId].sortAnchorsBy;
+    const sortedAnnotationGroups = sortAnchorsBy
+      ? sortBy(combinedAnnotationGroups, (annotationGroup) =>
+          min(
+            annotationGroup.annotations.map((annotation) =>
+              sortAnchorsBy(doc, annotation.anchor)
+            )
+          )
+        )
+      : combinedAnnotationGroups;
 
     return {
       annotations: editAnnotations.concat(highlightAnnotations),
-      annotationGroups: sortAnchorsBy
-        ? sortBy(combinedAnnotationGroups, (annotationGroup) =>
-            min(
-              annotationGroup.annotations.map((annotation) =>
-                sortAnchorsBy(doc, annotation.anchor)
-              )
-            )
-          )
-        : combinedAnnotationGroups,
+      annotationGroups: discussionsWithoutAnchors
+        .map(
+          (discussion) =>
+            ({
+              discussion,
+              annotations: [],
+            } as AnnotationGroup<unknown, unknown>)
+        )
+        .concat(sortedAnnotationGroups),
     };
-  }, [doc, diff, selectedState, isCommentInputFocused, datatypeId]);
+  }, [
+    doc,
+    diff,
+    selectedState,
+    isCommentInputFocused,
+    datatypeId,
+    discussionsWithoutAnchors,
+  ]);
 
   const {
     selectedAnchors,
diff --git a/src/os/versionControl/components/DiscussionInput.tsx b/src/os/versionControl/components/DiscussionInput.tsx
index a79673f3..866f3654 100644
--- a/src/os/versionControl/components/DiscussionInput.tsx
+++ b/src/os/versionControl/components/DiscussionInput.tsx
@@ -134,6 +134,7 @@ export const DiscussionInput = function <
         heads: currentlyActiveHeads,
         resolved: false,
         comments: [comment],
+        anchors: [],
       };
     });
 
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 7d6fa7b5..e6019b0b 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -76,8 +76,9 @@ export type Discussion<T> = {
   resolved: boolean;
   comments: DiscussionComment[];
 
-  // optionally a list of doc anchors that this discussion refers to
-  anchors?: T[];
+  // a list of doc anchors that this discussion refers to
+  // an empty anchors array means, that this discussion is a general comment on the overall document
+  anchors: T[];
 };
 
 export type AnnotationGroup<T, V> = {
diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index f8e65a61..b5684059 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -10,11 +10,14 @@ export const EssayAnnotations = ({
 }: AnnotationsViewProps<MarkdownDoc, MarkdownDocAnchor, string>) => {
   return (
     <div className="px-2 bg-white rounded-sm">
-      {annotations.map((annotation) => {
+      {annotations.map((annotation, index) => {
         switch (annotation.type) {
           case "added":
             return (
-              <div className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden">
+              <div
+                className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden"
+                key={index}
+              >
                 <span className="font-serif bg-green-50 border-b border-green-400">
                   {annotation.added}
                 </span>
@@ -23,7 +26,10 @@ export const EssayAnnotations = ({
 
           case "deleted":
             return (
-              <div className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden">
+              <div
+                className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden"
+                key={index}
+              >
                 <span className="font-serif bg-red-50 border-b border-red-400">
                   {annotation.deleted}
                 </span>
@@ -32,7 +38,7 @@ export const EssayAnnotations = ({
 
           case "changed":
             return (
-              <div className="text-md">
+              <div className="text-md" key={index}>
                 <span className="font-serif bg-red-50 border-b border-red-400">
                   {truncate(annotation.before, { length: 45 })}
                 </span>{" "}
@@ -44,15 +50,11 @@ export const EssayAnnotations = ({
             );
 
           case "highlighted":
-            if (annotation.value.length === 0) {
-              return (
-                <div className="text-xs text-gray-500 italic">
-                  No text selected
-                </div>
-              );
-            }
             return (
-              <div className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden">
+              <div
+                className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden"
+                key={index}
+              >
                 <span className="font-serif bg-yellow-50 border-b border-yellow-400">
                   {annotation.value}
                 </span>

From 4786d1bfadd43030ce5ea0c6ae517653bd614133 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 17 May 2024 14:52:36 +0200
Subject: [PATCH 09/59] fix boundary check

---
 src/tools/essay/components/CodeMirrorEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 43964f9d..f3b40fc2 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -266,7 +266,7 @@ export function MarkdownEditor({
                 const selectedAnnotationAnchors =
                   annotationsRef.current.flatMap((annotation) =>
                     annotation.anchor.fromPos <= cursorPos &&
-                    annotation.anchor.toPos >= cursorPos
+                    annotation.anchor.toPos > cursorPos
                       ? [annotation.anchor]
                       : []
                   );

From 106e6380a48e027339cee32e4554488fb14b0af3 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 17 May 2024 14:58:29 +0200
Subject: [PATCH 10/59] don't render duplicate hightlight + added annotation
 when commenting on edits

---
 src/tools/essay/components/EssayAnnotations.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index b5684059..80c7a31a 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -50,6 +50,16 @@ export const EssayAnnotations = ({
             );
 
           case "highlighted":
+            // don't show render highlight annotation if matches exactly with added annotation
+            // this is a bit hacky patchwork should handle this for us
+            if (
+              annotations.some(
+                (a) => a.type === "added" && a.added === annotation.value
+              )
+            ) {
+              return null;
+            }
+
             return (
               <div
                 className="text-md whitespace-nowrap overflow-ellipsis overflow-hidden"

From b47da99dc16e62688693b550eb2bdc59172f5978 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 17:15:55 +0200
Subject: [PATCH 11/59] allow to use markdown in comments

---
 .../components/ReviewSidebar.tsx              |  21 +-
 .../essay/codemirrorPlugins/DebugHighlight.ts |  38 ---
 .../previewMarkdownImages.ts                  |   7 +-
 .../essay/components/CodeMirrorEditor.tsx     | 302 +++++++++++-------
 src/tools/essay/components/EssayEditor.tsx    |   9 +-
 .../tldraw/components/TLDrawAnnotations.tsx   |   4 +-
 6 files changed, 214 insertions(+), 167 deletions(-)
 delete mode 100644 src/tools/essay/codemirrorPlugins/DebugHighlight.ts

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index c63fa982..98768234 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -23,6 +23,7 @@ import { DocHandle } from "@automerge/automerge-repo";
 import { Check, MessageCircleIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
+import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
 
 type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown>;
@@ -252,20 +253,26 @@ export const ReviewSidebar = React.memo(
             />
           </div>
 
-          <Textarea
-            ref={setCommentInputElement}
-            value={pendingCommentText}
-            onChange={(event) => setPendingCommentText(event.target.value)}
-            onKeyDown={(event) => {
+          <div
+            onKeyDownCapture={(event) => {
               if (event.key === "Enter" && event.metaKey) {
                 createDiscussion(pendingCommentText);
                 event.preventDefault();
+                event.stopPropagation();
               }
-              event.stopPropagation();
             }}
             onFocus={() => setIsCommentInputFocused(true)}
             onBlur={() => setIsCommentInputFocused(false)}
-          />
+          >
+            <MarkdownInput
+              ref={setCommentInputElement}
+              value={pendingCommentText}
+              onChange={(text) => {
+                console.log(text);
+                setPendingCommentText(text);
+              }}
+            />
+          </div>
 
           <Button
             variant="outline"
diff --git a/src/tools/essay/codemirrorPlugins/DebugHighlight.ts b/src/tools/essay/codemirrorPlugins/DebugHighlight.ts
deleted file mode 100644
index 0e74cbc2..00000000
--- a/src/tools/essay/codemirrorPlugins/DebugHighlight.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Decoration, EditorView } from "@codemirror/view";
-import { StateEffect, StateField } from "@codemirror/state";
-
-export interface DebugHighlight {
-  from: number;
-  to: number;
-  class: string;
-}
-export const setDebugHighlightsEffect = StateEffect.define<DebugHighlight[]>();
-export const debugHighlightsField = StateField.define<DebugHighlight[]>({
-  create() {
-    return [];
-  },
-  update(hightlights, tr) {
-    for (const e of tr.effects) {
-      if (e.is(setDebugHighlightsEffect)) {
-        return e.value.sort((a, b) => a.from - b.from);
-      }
-    }
-
-    return hightlights;
-  },
-});
-export const debugHighlightsDecorations = EditorView.decorations.compute(
-  [debugHighlightsField],
-  (state) => {
-    const highlights = state.field(debugHighlightsField);
-
-    return Decoration.set(
-      highlights.map((highlight) => {
-        return Decoration.mark({ class: highlight.class }).range(
-          highlight.from,
-          highlight.to + (highlight.to === highlight.from ? 1 : 0)
-        );
-      })
-    );
-  }
-);
diff --git a/src/tools/essay/codemirrorPlugins/previewMarkdownImages.ts b/src/tools/essay/codemirrorPlugins/previewMarkdownImages.ts
index dee77b88..8bb66d02 100644
--- a/src/tools/essay/codemirrorPlugins/previewMarkdownImages.ts
+++ b/src/tools/essay/codemirrorPlugins/previewMarkdownImages.ts
@@ -15,8 +15,7 @@ import {
   DocumentId,
   Repo,
 } from "@automerge/automerge-repo";
-import { MarkdownDoc } from "../../../datatypes/markdown/schema";
-import { AssetsDoc } from "../assets";
+import { AssetsDoc, HasAssets } from "../assets";
 import * as A from "@automerge/automerge";
 
 class Image extends WidgetType {
@@ -120,7 +119,7 @@ export const assetsHeadsField = StateField.define<A.Heads>({
 });
 
 export const previewImagesPlugin = (
-  handle: DocHandle<MarkdownDoc>,
+  handle: DocHandle<HasAssets>,
   repo: Repo
 ) => [
   assetsHeadsField,
@@ -144,7 +143,7 @@ export const previewImagesPlugin = (
         handle.on("change", this.onChangeDoc);
       }
 
-      onChangeDoc({ doc }: DocHandleChangePayload<MarkdownDoc>) {
+      onChangeDoc({ doc }: DocHandleChangePayload<HasAssets>) {
         if (
           this.assetsDocHandle &&
           this.assetsDocHandle.url === doc.assetsDocUrl
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index f3b40fc2..d820a335 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -1,66 +1,60 @@
-import { RefObject, useEffect, useMemo, useRef, useState } from "react";
+import {
+  RefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+} from "react";
 
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 import { EditorView, keymap } from "@codemirror/view";
 
 import { automergeSyncPlugin } from "@automerge/automerge-codemirror";
-import { type DocHandle } from "@automerge/automerge-repo";
+import { Repo, type DocHandle } from "@automerge/automerge-repo";
 import * as A from "@automerge/automerge/next";
-import { searchKeymap } from "@codemirror/search";
 import { completionKeymap } from "@codemirror/autocomplete";
 import {
   defaultKeymap,
   history,
   historyKeymap,
   indentWithTab,
-  standardKeymap,
 } from "@codemirror/commands";
 import {
   codeFolding,
-  foldEffect,
   foldKeymap,
   indentOnInput,
   indentUnit,
   syntaxHighlighting,
 } from "@codemirror/language";
-import { lintKeymap } from "@codemirror/lint";
-import { SelectionRange } from "@codemirror/state";
-import { codeMonospacePlugin } from "../codemirrorPlugins/codeMonospace";
+import { searchKeymap } from "@codemirror/search";
+import {
+  MarkdownDoc,
+  MarkdownDocAnchor,
+  ResolvedMarkdownDocAnchor,
+} from "../../../datatypes/markdown/schema";
 import {
   annotationDecorations,
   annotationsField,
-  setAnnotationsEffect,
 } from "../codemirrorPlugins/annotationDecorations";
+import { codeMonospacePlugin } from "../codemirrorPlugins/codeMonospace";
 import { frontmatterPlugin } from "../codemirrorPlugins/frontmatter";
 import { highlightKeywordsPlugin } from "../codemirrorPlugins/highlightKeywords";
 import { lineWrappingPlugin } from "../codemirrorPlugins/lineWrapping";
 import { previewFiguresPlugin } from "../codemirrorPlugins/previewFigures";
 import { tableOfContentsPreviewPlugin } from "../codemirrorPlugins/tableOfContentsPreview";
 import { essayTheme, markdownStyles } from "../codemirrorPlugins/theme";
-import {
-  MarkdownDoc,
-  MarkdownDocAnchor,
-  ResolvedMarkdownDocAnchor,
-} from "../../../datatypes/markdown/schema";
 
-import {
-  DebugHighlight,
-  setDebugHighlightsEffect,
-  debugHighlightsField,
-  debugHighlightsDecorations,
-} from "../codemirrorPlugins/DebugHighlight";
-import {
-  AnnotationPosition,
-  AnnotationWithUIState,
-} from "@/os/versionControl/schema";
+import { AnnotationWithUIState } from "@/os/versionControl/schema";
 import { getCursorSafely } from "@/os/versionControl/utils";
-import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
-import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
 import { useRepo } from "@automerge/automerge-repo-react-hooks";
-import { AssetsDoc } from "../assets";
+import { AssetsDoc, HasAssets } from "../assets";
+import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
 import { dropCursor } from "../codemirrorPlugins/dropCursor";
 import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMarkdownLinks";
+import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
+import { EditorState } from "@uiw/react-codemirror";
 
 export type TextSelection = {
   from: number;
@@ -68,35 +62,144 @@ export type TextSelection = {
   yCoord: number;
 };
 
-export type DiffStyle = "normal" | "private";
-
 export type EditorProps = {
   editorContainer: HTMLDivElement;
   handle: DocHandle<MarkdownDoc>;
   path: A.Prop[];
-  setView: (view: EditorView) => void;
-  setSelectedAnchors: (anchors: MarkdownDocAnchor[]) => void;
+  setView?: (view: EditorView) => void;
+  setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
   readOnly?: boolean;
   docHeads?: A.Heads;
   annotations?: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[];
-  diffStyle: DiffStyle;
-  debugHighlights?: DebugHighlight[];
-  foldRanges?: { from: number; to: number }[];
-  isCommentBoxOpen?: boolean;
   setEditorContainerElement?: (container: HTMLDivElement) => void;
 };
 
-export function MarkdownEditor({
+type MarkdownInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+
+  // handle to the main doc which has an assets doc that we use
+  // to store dragged in images
+  docWithAssetsHandle?: DocHandle<HasAssets>;
+};
+
+export const MarkdownInput = ({
+  value,
+  onChange,
+  docWithAssetsHandle,
+}: MarkdownInputProps) => {
+  const repo = useRepo();
+  const [editorView, setEditorView] = useState(null);
+  const [container, setContainer] = useState(null);
+  const [remountEditor, setRemountEditor] = useState(null);
+
+  useEffect(() => {
+    console.log("value", value);
+
+    if (editorView && editorView.state.doc.toString() !== value) {
+      setRemountEditor({});
+    }
+  }, [value, editorView]);
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    let state = EditorState.create({
+      extensions: [
+        // Start with a variety of basic plugins, subset of Codemirror "basic setup" kit:
+        // https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+        history(),
+
+        dropCursor(),
+        indentOnInput(),
+        keymap.of([
+          ...defaultKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...foldKeymap,
+          ...completionKeymap,
+          indentWithTab,
+        ]),
+        EditorView.lineWrapping,
+        essayTheme,
+        markdown({
+          codeLanguages: languages,
+        }),
+        indentUnit.of("    "),
+        syntaxHighlighting(markdownStyles),
+
+        frontmatterPlugin,
+        annotationsField,
+        annotationDecorations,
+        previewFiguresPlugin,
+        docWithAssetsHandle
+          ? [
+              dragAndDropFilesPlugin({
+                createFileReference: (file) =>
+                  createFileReferenceInDoc(repo, docWithAssetsHandle, file),
+              }),
+              previewImagesPlugin(docWithAssetsHandle, repo),
+            ]
+          : [],
+        highlightKeywordsPlugin,
+        tableOfContentsPreviewPlugin,
+        codeMonospacePlugin,
+        lineWrappingPlugin,
+        codeFolding({
+          placeholderDOM: () => {
+            // TODO use a nicer API for creating these elements?
+            const placeholder = document.createElement("div");
+            placeholder.className = "cm-foldPlaceholder";
+            placeholder.style.padding = "10px";
+            placeholder.style.marginTop = "5px";
+            placeholder.style.marginBottom = "5px";
+            placeholder.style.fontSize = "14px";
+            placeholder.style.fontFamily = "Fira Code";
+            placeholder.style.textAlign = "center";
+            placeholder.innerText = "N lines hidden";
+            return placeholder;
+          },
+        }),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChange(update.state.doc.toString());
+          }
+        }),
+      ],
+    });
+
+    let view = new EditorView({
+      doc: value,
+      state,
+      parent: container,
+    });
+
+    setEditorView(view);
+
+    return () => {
+      view.destroy();
+    };
+  }, [container, remountEditor]);
+
+  return (
+    <div
+      className="codemirror-editor rounded bg-white shadow"
+      ref={setContainer}
+    />
+  );
+};
+
+export function MarkdownDocEditor({
   editorContainer,
   handle,
   path,
-  setSelectedAnchors,
-  setView,
+  setSelectedAnchors = () => {},
+  setView = () => {},
   readOnly,
   docHeads,
   annotations,
-  debugHighlights,
-  foldRanges,
   setEditorContainerElement,
 }: EditorProps) {
   const repo = useRepo();
@@ -111,28 +214,6 @@ export function MarkdownEditor({
 
   const handleReady = handle.isReady();
 
-  // Propagate debug highlights into codemirror
-  useEffect(() => {
-    editorRoot.current?.dispatch({
-      effects: setDebugHighlightsEffect.of(debugHighlights ?? []),
-    });
-  }, [debugHighlights]);
-
-  // propagate fold ranges into codemirror
-  useEffect(() => {
-    editorRoot.current?.dispatch({
-      effects: (foldRanges ?? []).map((range) => foldEffect.of(range)),
-    });
-  }, [foldRanges]);
-
-  // Propagate annotations into codemirror
-  useEffect(() => {
-    editorRoot.current?.dispatch({
-      // split up replaces
-      effects: setAnnotationsEffect.of(annotations),
-    });
-  }, [annotations, editorRoot.current]);
-
   useScrollAnnotationsIntoView(annotations, editorRoot);
 
   // This big useEffect sets up the editor view
@@ -154,51 +235,8 @@ export function MarkdownEditor({
 
         dropCursor(),
         dragAndDropFilesPlugin({
-          createFileReference: async (file) => {
-            const doc = handle.docSync();
-            let assetsHandle: DocHandle<AssetsDoc>;
-
-            if (!doc.assetsDocUrl) {
-              // add assets doc to old documents
-              assetsHandle = repo.create<AssetsDoc>();
-              assetsHandle.change((assetsDoc) => {
-                assetsDoc.files = {};
-              });
-              handle.change((doc) => {
-                doc.assetsDocUrl = assetsHandle.url;
-              });
-            } else {
-              assetsHandle = repo.find<AssetsDoc>(doc.assetsDocUrl);
-            }
-            await assetsHandle.whenReady();
-            const assetsDoc = assetsHandle.docSync();
-
-            if (!isSupportedImageFile(file)) {
-              alert(
-                "Only the following image files are supported:\n.png, .jpg, .jpeg, .gif, .webp .bmp, .tiff, .tif"
-              );
-              return;
-            }
-
-            const fileAlreadyExists = assetsDoc.files[file.name];
-            if (fileAlreadyExists) {
-              alert(
-                `a file with the name "${file.name}" already exists in the document`
-              );
-              return;
-            }
-
-            loadFile(file).then((contents) => {
-              assetsHandle.change((assetsDoc) => {
-                assetsDoc.files[file.name] = {
-                  contentType: file.type,
-                  contents,
-                };
-              });
-            });
-
-            return `![](./assets/${file.name})`;
-          },
+          createFileReference: (file) =>
+            createFileReferenceInDoc(repo, handle, file),
         }),
         indentOnInput(),
         keymap.of([
@@ -232,8 +270,6 @@ export function MarkdownEditor({
         tableOfContentsPreviewPlugin,
         codeMonospacePlugin,
         lineWrappingPlugin,
-        debugHighlightsField,
-        debugHighlightsDecorations,
         codeFolding({
           placeholderDOM: () => {
             // TODO use a nicer API for creating these elements?
@@ -373,6 +409,54 @@ export function MarkdownEditor({
   );
 }
 
+const createFileReferenceInDoc = async (
+  repo: Repo,
+  handle: DocHandle<HasAssets>,
+  file: File
+): Promise<string> => {
+  const doc = handle.docSync();
+  let assetsHandle: DocHandle<AssetsDoc>;
+
+  if (!doc.assetsDocUrl) {
+    // add assets doc to old documents
+    assetsHandle = repo.create<AssetsDoc>();
+    assetsHandle.change((assetsDoc) => {
+      assetsDoc.files = {};
+    });
+    handle.change((doc) => {
+      doc.assetsDocUrl = assetsHandle.url;
+    });
+  } else {
+    assetsHandle = repo.find<AssetsDoc>(doc.assetsDocUrl);
+  }
+  await assetsHandle.whenReady();
+  const assetsDoc = assetsHandle.docSync();
+
+  if (!isSupportedImageFile(file)) {
+    alert(
+      "Only the following image files are supported:\n.png, .jpg, .jpeg, .gif, .webp .bmp, .tiff, .tif"
+    );
+    return;
+  }
+
+  const fileAlreadyExists = assetsDoc.files[file.name];
+  if (fileAlreadyExists) {
+    alert(`a file with the name "${file.name}" already exists in the document`);
+    return;
+  }
+
+  loadFile(file).then((contents) => {
+    assetsHandle.change((assetsDoc) => {
+      assetsDoc.files[file.name] = {
+        contentType: file.type,
+        contents,
+      };
+    });
+  });
+
+  return `![](./assets/${file.name})`;
+};
+
 // Scroll annotations into view when needed
 const useScrollAnnotationsIntoView = (
   annotations: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[],
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index ea5d9a78..667e88dd 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -1,7 +1,7 @@
 import { next as A } from "@automerge/automerge";
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import { useDocument, useHandle } from "@automerge/automerge-repo-react-hooks";
-import { MarkdownEditor } from "./CodeMirrorEditor";
+import { MarkdownDocEditor } from "./CodeMirrorEditor";
 
 import { useEffect, useMemo, useState } from "react";
 import {
@@ -34,7 +34,6 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
   const [doc, changeDoc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
   const handle = useHandle<MarkdownDoc>(docUrl);
   const [editorView, setEditorView] = useState<EditorView>();
-  const [isCommentBoxOpen, setIsCommentBoxOpen] = useState(false);
   const [editorContainer, setEditorContainer] = useState<HTMLDivElement>(null);
   const readOnly = docHeads && !isEqual(docHeads, A.getHeads(doc));
 
@@ -89,17 +88,15 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
                 : "border border-gray-200 "
             }`}
           >
-            <MarkdownEditor
+            <MarkdownDocEditor
               editorContainer={editorContainer}
-              diffStyle="normal"
               handle={handle}
               path={["content"]}
-              setSelectedAnchors={setSelectedAnchors ?? (() => {})}
+              setSelectedAnchors={setSelectedAnchors}
               setView={setEditorView}
               annotations={resolvedAnnotations}
               readOnly={readOnly ?? false}
               docHeads={docHeads}
-              isCommentBoxOpen={isCommentBoxOpen}
             />
           </div>
         </div>
diff --git a/src/tools/tldraw/components/TLDrawAnnotations.tsx b/src/tools/tldraw/components/TLDrawAnnotations.tsx
index 847d4e32..f742a6ef 100644
--- a/src/tools/tldraw/components/TLDrawAnnotations.tsx
+++ b/src/tools/tldraw/components/TLDrawAnnotations.tsx
@@ -43,9 +43,7 @@ export const TLDrawAnnotations = ({
   }, [editor, annotations]);
 
   if (annotations.length === 0) {
-    return (
-      <div className="text-gray-500 text-xs italic">No shapes selected</div>
-    );
+    return;
   }
 
   return (

From a0703451b5d8a20fc7f1ad8fc3102c416eb8bf05 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 21 May 2024 10:19:41 +0200
Subject: [PATCH 12/59] Render markdown comments

---
 .../components/ReviewSidebar.tsx              |  9 +-
 .../essay/components/CodeMirrorEditor.tsx     | 94 ++++++-------------
 2 files changed, 32 insertions(+), 71 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 98768234..0ca23a4e 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -254,6 +254,7 @@ export const ReviewSidebar = React.memo(
           </div>
 
           <div
+            className="rounded bg-white shadow"
             onKeyDownCapture={(event) => {
               if (event.key === "Enter" && event.metaKey) {
                 createDiscussion(pendingCommentText);
@@ -265,12 +266,8 @@ export const ReviewSidebar = React.memo(
             onBlur={() => setIsCommentInputFocused(false)}
           >
             <MarkdownInput
-              ref={setCommentInputElement}
               value={pendingCommentText}
-              onChange={(text) => {
-                console.log(text);
-                setPendingCommentText(text);
-              }}
+              onChange={setPendingCommentText}
             />
           </div>
 
@@ -561,7 +558,7 @@ const DiscussionCommentView = ({ comment }: { comment: DiscussionComment }) => {
       </div>
 
       <div className="text-sm">
-        <p>{comment.content}</p>
+        <MarkdownInput value={comment.content} />
       </div>
     </div>
   );
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index d820a335..4700b71d 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -22,7 +22,6 @@ import {
   indentWithTab,
 } from "@codemirror/commands";
 import {
-  codeFolding,
   foldKeymap,
   indentOnInput,
   indentUnit,
@@ -62,21 +61,11 @@ export type TextSelection = {
   yCoord: number;
 };
 
-export type EditorProps = {
-  editorContainer: HTMLDivElement;
-  handle: DocHandle<MarkdownDoc>;
-  path: A.Prop[];
-  setView?: (view: EditorView) => void;
-  setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
-  readOnly?: boolean;
-  docHeads?: A.Heads;
-  annotations?: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[];
-  setEditorContainerElement?: (container: HTMLDivElement) => void;
-};
-
 type MarkdownInputProps = {
   value: string;
-  onChange: (value: string) => void;
+
+  // when no onChange handler is defined the markdown input will be readonly
+  onChange?: (value: string) => void;
 
   // handle to the main doc which has an assets doc that we use
   // to store dragged in images
@@ -93,9 +82,8 @@ export const MarkdownInput = ({
   const [container, setContainer] = useState(null);
   const [remountEditor, setRemountEditor] = useState(null);
 
+  // trigger a remount when value has changed from the outside
   useEffect(() => {
-    console.log("value", value);
-
     if (editorView && editorView.state.doc.toString() !== value) {
       setRemountEditor({});
     }
@@ -106,12 +94,13 @@ export const MarkdownInput = ({
       return;
     }
 
-    let state = EditorState.create({
+    let view = new EditorView({
+      doc: value,
       extensions: [
         // Start with a variety of basic plugins, subset of Codemirror "basic setup" kit:
         // https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
         history(),
-
+        EditorView.editable.of(!!onChange),
         dropCursor(),
         indentOnInput(),
         keymap.of([
@@ -147,32 +136,15 @@ export const MarkdownInput = ({
         tableOfContentsPreviewPlugin,
         codeMonospacePlugin,
         lineWrappingPlugin,
-        codeFolding({
-          placeholderDOM: () => {
-            // TODO use a nicer API for creating these elements?
-            const placeholder = document.createElement("div");
-            placeholder.className = "cm-foldPlaceholder";
-            placeholder.style.padding = "10px";
-            placeholder.style.marginTop = "5px";
-            placeholder.style.marginBottom = "5px";
-            placeholder.style.fontSize = "14px";
-            placeholder.style.fontFamily = "Fira Code";
-            placeholder.style.textAlign = "center";
-            placeholder.innerText = "N lines hidden";
-            return placeholder;
-          },
-        }),
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            onChange(update.state.doc.toString());
-          }
-        }),
+        onChange
+          ? EditorView.updateListener.of((update) => {
+              if (update.docChanged) {
+                onChange(update.state.doc.toString());
+              }
+            })
+          : [],
       ],
-    });
 
-    let view = new EditorView({
-      doc: value,
-      state,
       parent: container,
     });
 
@@ -181,14 +153,21 @@ export const MarkdownInput = ({
     return () => {
       view.destroy();
     };
-  }, [container, remountEditor]);
+  }, [container, remountEditor, onChange]);
 
-  return (
-    <div
-      className="codemirror-editor rounded bg-white shadow"
-      ref={setContainer}
-    />
-  );
+  return <div className="codemirror-editor" ref={setContainer} />;
+};
+
+export type MarkdownDocEditorProps = {
+  editorContainer: HTMLDivElement;
+  handle: DocHandle<MarkdownDoc>;
+  path: A.Prop[];
+  setView?: (view: EditorView) => void;
+  setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
+  readOnly?: boolean;
+  docHeads?: A.Heads;
+  annotations?: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[];
+  setEditorContainerElement?: (container: HTMLDivElement) => void;
 };
 
 export function MarkdownDocEditor({
@@ -201,7 +180,7 @@ export function MarkdownDocEditor({
   docHeads,
   annotations,
   setEditorContainerElement,
-}: EditorProps) {
+}: MarkdownDocEditorProps) {
   const repo = useRepo();
   const containerRef = useRef(null);
   const editorRoot = useRef<EditorView>(null);
@@ -270,21 +249,6 @@ export function MarkdownDocEditor({
         tableOfContentsPreviewPlugin,
         codeMonospacePlugin,
         lineWrappingPlugin,
-        codeFolding({
-          placeholderDOM: () => {
-            // TODO use a nicer API for creating these elements?
-            const placeholder = document.createElement("div");
-            placeholder.className = "cm-foldPlaceholder";
-            placeholder.style.padding = "10px";
-            placeholder.style.marginTop = "5px";
-            placeholder.style.marginBottom = "5px";
-            placeholder.style.fontSize = "14px";
-            placeholder.style.fontFamily = "Fira Code";
-            placeholder.style.textAlign = "center";
-            placeholder.innerText = "N lines hidden";
-            return placeholder;
-          },
-        }),
       ],
       dispatch(transaction, view) {
         // TODO: can some of these dispatch handlers be factored out into plugins?

From b30c27c86f84abf0cdcb21eb948b75250d59e5c3 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 17:16:46 +0200
Subject: [PATCH 13/59] support images in comments

---
 .../components/ReviewSidebar.tsx              | 29 ++++++++++++++-----
 .../essay/components/CodeMirrorEditor.tsx     | 12 ++------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 0ca23a4e..81f14738 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -24,10 +24,11 @@ import { Check, MessageCircleIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
 import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
+import { HasAssets } from "@/tools/essay/assets";
 
 type ReviewSidebarProps = {
-  doc: HasVersionControlMetadata<unknown, unknown>;
-  handle: DocHandle<HasVersionControlMetadata<unknown, unknown>>;
+  doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
+  handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
   annotationGroups: AnnotationGroupWithState<unknown, unknown>[];
   selectedAnchors: unknown[];
@@ -268,6 +269,7 @@ export const ReviewSidebar = React.memo(
             <MarkdownInput
               value={pendingCommentText}
               onChange={setPendingCommentText}
+              docWithAssetsHandle={handle}
             />
           </div>
 
@@ -287,8 +289,8 @@ export const ReviewSidebar = React.memo(
 );
 
 export interface AnnotationGroupViewProps {
-  doc: HasVersionControlMetadata<unknown, unknown>;
-  handle: DocHandle<HasVersionControlMetadata<unknown, unknown>>;
+  doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
+  handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
   annotationGroup: AnnotationGroupWithState<unknown, unknown>;
   isReplyBoxOpen: boolean;
@@ -457,7 +459,11 @@ const AnnotationGroupView = forwardRef<
             />
 
             {annotationGroup.discussion?.comments.map((comment, index) => (
-              <DiscussionCommentView comment={comment} key={comment.id} />
+              <DiscussionCommentView
+                comment={comment}
+                key={comment.id}
+                docWithAssetsHandle={handle}
+              />
             ))}
           </div>
 
@@ -544,7 +550,13 @@ const AnnotationGroupView = forwardRef<
   }
 );
 
-const DiscussionCommentView = ({ comment }: { comment: DiscussionComment }) => {
+const DiscussionCommentView = ({
+  comment,
+  docWithAssetsHandle,
+}: {
+  comment: DiscussionComment;
+  docWithAssetsHandle: DocHandle<HasAssets>;
+}) => {
   return (
     <div className="p-1.5">
       <div className="flex items-center justify-between text-sm">
@@ -558,7 +570,10 @@ const DiscussionCommentView = ({ comment }: { comment: DiscussionComment }) => {
       </div>
 
       <div className="text-sm">
-        <MarkdownInput value={comment.content} />
+        <MarkdownInput
+          value={comment.content}
+          docWithAssetsHandle={docWithAssetsHandle}
+        />
       </div>
     </div>
   );
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 4700b71d..fd17bfd8 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -1,11 +1,4 @@
-import {
-  RefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  forwardRef,
-} from "react";
+import { RefObject, useEffect, useMemo, useRef, useState } from "react";
 
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
@@ -49,11 +42,10 @@ import { AnnotationWithUIState } from "@/os/versionControl/schema";
 import { getCursorSafely } from "@/os/versionControl/utils";
 import { useRepo } from "@automerge/automerge-repo-react-hooks";
 import { AssetsDoc, HasAssets } from "../assets";
+import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMarkdownLinks";
 import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
 import { dropCursor } from "../codemirrorPlugins/dropCursor";
-import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMarkdownLinks";
 import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
-import { EditorState } from "@uiw/react-codemirror";
 
 export type TextSelection = {
   from: number;

From 56d3f1a170ffeffd634a2675428dbff754b8d308 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 21 May 2024 13:52:51 +0200
Subject: [PATCH 14/59] WIP: add back inline comments for tee

---
 src/datatypes/markdown/utils.ts               |  18 --
 src/os/hooks/useScrollPosition.ts             |  19 ++
 src/os/tools.ts                               |   3 +
 src/os/versionControl/annotations.ts          |   6 +-
 .../components/ReviewSidebar.tsx              |   8 +-
 .../components/VersionControlEditor.tsx       |   8 +
 src/os/versionControl/schema.ts               |   2 +-
 .../essay/components/CodeMirrorEditor.tsx     |   9 +
 .../essay/components/CommentsSidebar.tsx      | 239 ++++++++++++++++++
 src/tools/essay/components/EssayEditor.tsx    |  25 +-
 src/tools/essay/utils.ts                      | 190 ++++++++++++++
 11 files changed, 499 insertions(+), 28 deletions(-)
 create mode 100644 src/os/hooks/useScrollPosition.ts
 create mode 100644 src/tools/essay/components/CommentsSidebar.tsx
 create mode 100644 src/tools/essay/utils.ts

diff --git a/src/datatypes/markdown/utils.ts b/src/datatypes/markdown/utils.ts
index 5a88836d..2101c603 100644
--- a/src/datatypes/markdown/utils.ts
+++ b/src/datatypes/markdown/utils.ts
@@ -8,24 +8,6 @@ export const isMarkdownDoc = (doc: A.Doc<unknown>): doc is MarkdownDoc => {
   return typeof typedDoc.content === "string";
 };
 
-export const useScrollPosition = (container: HTMLElement | null) => {
-  const [scrollPosition, setScrollPosition] = useState(0);
-
-  useEffect(() => {
-    if (!container) {
-      return;
-    }
-    const updatePosition = () => {
-      setScrollPosition(container.scrollTop);
-    };
-    container.addEventListener("scroll", () => updatePosition());
-    updatePosition();
-    return () => container.removeEventListener("scroll", updatePosition);
-  }, [container]);
-
-  return scrollPosition;
-};
-
 // Utils for converting back and forth between CodeMirror and Automerge ranges.
 // The end of a Codemirror range can be an index past the last character in the
 // document, but we can't get an Automerge cursor for that position.
diff --git a/src/os/hooks/useScrollPosition.ts b/src/os/hooks/useScrollPosition.ts
new file mode 100644
index 00000000..f3383bf6
--- /dev/null
+++ b/src/os/hooks/useScrollPosition.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export const useScrollPosition = (container: HTMLElement | null) => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+    const updatePosition = () => {
+      setScrollPosition(container.scrollTop);
+    };
+    container.addEventListener("scroll", () => updatePosition());
+    updatePosition();
+    return () => container.removeEventListener("scroll", updatePosition);
+  }, [container]);
+
+  return scrollPosition;
+};
diff --git a/src/os/tools.ts b/src/os/tools.ts
index 0ca40405..47724f26 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -10,6 +10,7 @@ import kanban from "@/tools/kanban";
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import {
   Annotation,
+  AnnotationGroupWithUIState,
   HasVersionControlMetadata,
 } from "@/os/versionControl/schema";
 import { AnnotationWithUIState } from "@/os/versionControl/schema";
@@ -34,10 +35,12 @@ export type EditorProps<T, V> = {
   docHeads?: A.Heads;
   activeDiscussionIds?: string[];
   annotations?: AnnotationWithUIState<T, V>[];
+  annotationGroups?: AnnotationGroupWithUIState<T, V>[];
   actorIdToAuthor?: Record<A.ActorId, AutomergeUrl>; // todo: can we replace that with memoize?
 
   setSelectedAnchors?: (anchors: T[]) => void;
   setHoveredAnchor?: (anchors: T) => void;
+  setSelectedAnnotationGroupId?: (groupId: string) => void;
 };
 
 export type AnnotationsViewProps<
diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 5a85244f..e7835228 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -7,7 +7,7 @@ import {
   Annotation,
   HighlightAnnotation,
   AnnotationGroup,
-  AnnotationGroupWithState,
+  AnnotationGroupWithUIState,
   AnnotationWithUIState,
   DiffWithProvenance,
 } from "./schema";
@@ -43,7 +43,7 @@ export function useAnnotations({
   isCommentInputFocused: boolean;
 }): {
   annotations: AnnotationWithUIState<unknown, unknown>[];
-  annotationGroups: AnnotationGroupWithState<unknown, unknown>[];
+  annotationGroups: AnnotationGroupWithUIState<unknown, unknown>[];
   selectedAnchors: unknown[];
   setHoveredAnchor: (anchor: unknown) => void;
   setSelectedAnchors: (anchors: unknown[]) => void;
@@ -365,7 +365,7 @@ export function useAnnotations({
       [annotations, selectedAnchors]
     );
 
-  const annotationGroupsWithState: AnnotationGroupWithState<
+  const annotationGroupsWithState: AnnotationGroupWithUIState<
     unknown,
     unknown
   >[] = useMemo(
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 81f14738..17c57b6c 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -13,7 +13,7 @@ import { getRelativeTimeString } from "@/os/lib/dates";
 import { AnnotationsViewProps, TOOLS } from "@/os/tools";
 import {
   AnnotationGroup,
-  AnnotationGroupWithState,
+  AnnotationGroupWithUIState,
   DiscussionComment,
   HasVersionControlMetadata,
   HighlightAnnotation,
@@ -30,7 +30,7 @@ type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
   handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
-  annotationGroups: AnnotationGroupWithState<unknown, unknown>[];
+  annotationGroups: AnnotationGroupWithUIState<unknown, unknown>[];
   selectedAnchors: unknown[];
   changeDoc: (
     changeFn: (doc: HasVersionControlMetadata<unknown, unknown>) => void
@@ -292,7 +292,7 @@ export interface AnnotationGroupViewProps {
   doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
   handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
-  annotationGroup: AnnotationGroupWithState<unknown, unknown>;
+  annotationGroup: AnnotationGroupWithUIState<unknown, unknown>;
   isReplyBoxOpen: boolean;
   setIsReplyBoxOpen: (isOpen: boolean) => void;
   onResolveDiscussion: () => void;
@@ -304,7 +304,7 @@ export interface AnnotationGroupViewProps {
   setIsSelected: (isSelected: boolean) => void;
 }
 
-const AnnotationGroupView = forwardRef<
+export const AnnotationGroupView = forwardRef<
   HTMLDivElement,
   AnnotationGroupViewProps
 >(
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index c816d006..538d2a52 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -349,6 +349,8 @@ export const VersionControlEditor: React.FC<{
     setAnnotationsPositionsInSidebarMap,
   ] = useState<PositionMap>();
 
+  console.log("AnnotationGroups", annotationGroups);
+
   // ---- ALL HOOKS MUST GO ABOVE THIS EARLY RETURN ----
 
   if (!doc || !datatypeId || !doc.branchMetadata) return <div>Loading...</div>;
@@ -581,6 +583,7 @@ export const VersionControlEditor: React.FC<{
                   docUrl={selectedBranch.url}
                   docHeads={docHeads}
                   annotations={visibleAnnotations}
+                  annotationGroups={annotationGroups}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
@@ -592,6 +595,7 @@ export const VersionControlEditor: React.FC<{
                   docUrl={selectedBranch?.url ?? mainDocUrl}
                   docHeads={docHeads}
                   annotations={visibleAnnotations}
+                  annotationGroups={annotationGroups}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
@@ -682,9 +686,11 @@ const DocEditor = <T, V>({
   docUrl,
   docHeads,
   annotations,
+  annotationGroups,
   actorIdToAuthor,
   setSelectedAnchors,
   setHoveredAnchor,
+  setSelectedAnnotationGroupId,
 }: EditorPropsWithDatatype<T, V>) => {
   // Currently we don't have a toolpicker so we just show the first tool for the doc type
   const Component = TOOLS[datatypeId][0].editorComponent;
@@ -694,9 +700,11 @@ const DocEditor = <T, V>({
       docUrl={docUrl}
       docHeads={docHeads}
       annotations={annotations}
+      annotationGroups={annotationGroups}
       actorIdToAuthor={actorIdToAuthor}
       setSelectedAnchors={setSelectedAnchors}
       setHoveredAnchor={setHoveredAnchor}
+      setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
     />
   );
 };
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index e6019b0b..aaa2970b 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -86,7 +86,7 @@ export type AnnotationGroup<T, V> = {
   discussion?: Discussion<T>;
 };
 
-export type AnnotationGroupWithState<T, V> = AnnotationGroup<T, V> & {
+export type AnnotationGroupWithUIState<T, V> = AnnotationGroup<T, V> & {
   state: "focused" | "expanded" | "neutral";
 };
 
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index fd17bfd8..12cbba99 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -29,6 +29,7 @@ import {
 import {
   annotationDecorations,
   annotationsField,
+  setAnnotationsEffect,
 } from "../codemirrorPlugins/annotationDecorations";
 import { codeMonospacePlugin } from "../codemirrorPlugins/codeMonospace";
 import { frontmatterPlugin } from "../codemirrorPlugins/frontmatter";
@@ -187,6 +188,14 @@ export function MarkdownDocEditor({
 
   useScrollAnnotationsIntoView(annotations, editorRoot);
 
+  // Propagate annotations into codemirror
+  useEffect(() => {
+    editorRoot.current?.dispatch({
+      // split up replaces
+      effects: setAnnotationsEffect.of(annotations),
+    });
+  }, [annotations, editorRoot.current]);
+
   // This big useEffect sets up the editor view
   useEffect(() => {
     if (!handleReady || !editorContainer) {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
new file mode 100644
index 00000000..1e062e45
--- /dev/null
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -0,0 +1,239 @@
+import { Button } from "@/components/ui/button";
+
+import { Check, MessageSquarePlus, Reply } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
+import { next as A, ChangeFn, uuid } from "@automerge/automerge";
+
+import { AnnotationGroupWithPosition } from "../utils";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@/components/ui/popover";
+import { useEffect, useState } from "react";
+import { cmRangeToAMRange } from "../utils";
+import { MarkdownDoc } from "@/datatypes/markdown";
+import { SelectionRange } from "@codemirror/state";
+import { useCurrentAccount } from "@/os/explorer/account";
+import { getAnnotationGroupId } from "@/os/versionControl/annotations";
+import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
+
+export const CommentsSidebar = ({
+  doc,
+  handle,
+  selection,
+  annotationGroupsWithPosition,
+  setSelectedAnnotationGroupId,
+}: {
+  doc: MarkdownDoc;
+  handle: DocHandle<MarkdownDoc>;
+  selection: SelectionRange;
+  annotationGroupsWithPosition: AnnotationGroupWithPosition[];
+  setSelectedAnnotationGroupId: (id: string) => void;
+}) => {
+  const account = useCurrentAccount();
+  const [pendingCommentText, setPendingCommentText] = useState("");
+  const [commentBoxOpen, setCommentBoxOpen] = useState(false);
+  const [activeReplyThreadId, setActiveReplyThreadId] = useState<
+    string | null
+  >();
+
+  // suppress showing the button immediately after adding a thread
+  const [suppressButton, setSuppressButton] = useState(false);
+  const showCommentButton =
+    selection && selection.from !== selection.to && !suppressButton;
+
+  // un-suppress the button once the selection changes
+  useEffect(() => {
+    setSuppressButton(false);
+  }, [selection?.from, selection?.to]);
+
+  /*const startCommentThreadAtSelection = (commentText: string) => {
+    if (!selection) return;
+
+    const amRange = cmRangeToAMRange(selection);
+
+    const fromCursor = A.getCursor(doc, ["content"], amRange.from);
+    const toCursor = A.getCursor(doc, ["content"], amRange.to);
+
+    const comment: Comment = {
+      id: uuid(),
+      content: commentText,
+      userId: null,
+      contactUrl: account?.contactHandle.url,
+      timestamp: Date.now(),
+    };
+
+    const thread: CommentThread = {
+      id: uuid(),
+      comments: [comment],
+      resolved: false,
+      fromCursor,
+      toCursor,
+    };
+
+    changeDoc((doc) => {
+      doc.commentThreads[thread.id] = thread;
+    });
+
+    setPendingCommentText("");
+  };*/
+
+  /*const addReplyToThread = (threadId: string) => {
+    const comment: Comment = {
+      id: uuid(),
+      content: pendingCommentText,
+      contactUrl: account?.contactHandle.url,
+      timestamp: Date.now(),
+    };
+
+    changeDoc((doc) => {
+      doc.commentThreads[threadId].comments.push(comment);
+    });
+
+    setPendingCommentText("");
+  };*/
+
+  console.log(annotationGroupsWithPosition);
+
+  return (
+    <div>
+      {annotationGroupsWithPosition.map((annotationGroup, index) => (
+        <div
+          key={index}
+          className={
+            "absolute transition-all" /*`bg-white hover:border-gray-400 hover:bg-gray-50 p-4 mr-2 absolute border border-gray-300 rounded-sm max-w-lg transition-all duration-100 ease-in-out ${
+            thread.id === activeThreadId
+              ? "z-50 shadow-sm border-gray-500"
+              : "z-0"
+          }`*/
+          }
+          style={{
+            top: annotationGroup.yCoord,
+          }}
+          onClick={(e) => {
+            setSelectedAnnotationGroupId(getAnnotationGroupId(annotationGroup));
+            e.stopPropagation();
+          }}
+        >
+          <div>
+            <AnnotationGroupView
+              doc={doc}
+              handle={handle}
+              annotationGroup={annotationGroup}
+              datatypeId="essay"
+            />
+          </div>
+          {false && (
+            <div className="mt-2">
+              <Popover
+                open={activeReplyThreadId === thread.id}
+                onOpenChange={(open) =>
+                  open
+                    ? setActiveReplyThreadId(thread.id)
+                    : setActiveReplyThreadId(null)
+                }
+              >
+                <PopoverTrigger asChild>
+                  <Button className="mr-2" variant="outline">
+                    <Reply className="mr-2 " /> Reply
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <Textarea
+                    className="mb-4"
+                    value={pendingCommentText}
+                    onChange={(event) =>
+                      setPendingCommentText(event.target.value)
+                    }
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" && event.metaKey) {
+                        addReplyToThread(thread.id);
+                        setActiveReplyThreadId(null);
+                        event.preventDefault();
+                      }
+                    }}
+                  />
+
+                  <PopoverClose>
+                    <Button
+                      variant="outline"
+                      onClick={() => addReplyToThread(thread.id)}
+                    >
+                      Comment
+                      <span className="text-gray-400 ml-2 text-xs">⌘⏎</span>
+                    </Button>
+                  </PopoverClose>
+                </PopoverContent>
+              </Popover>
+
+              <Button
+                variant="outline"
+                onClick={() =>
+                  changeDoc(
+                    (d) => (d.commentThreads[thread.id].resolved = true)
+                  )
+                }
+              >
+                <Check className="mr-2" /> Resolve
+              </Button>
+            </div>
+          )}
+        </div>
+      ))}
+      <Popover
+        open={commentBoxOpen}
+        onOpenChange={() => setCommentBoxOpen((prev) => !prev)}
+      >
+        <PopoverTrigger asChild>
+          {showCommentButton && (
+            <Button
+              className="relative shadow-md w-44"
+              variant="outline"
+              style={{
+                top: (selection?.yCoord ?? 0) + 23,
+                left: -50,
+              }}
+            >
+              <MessageSquarePlus size={24} className="mr-2" />
+              Add comment
+            </Button>
+          )}
+        </PopoverTrigger>
+        <PopoverContent>
+          <Textarea
+            className="mb-4"
+            value={pendingCommentText}
+            onChange={(event) => setPendingCommentText(event.target.value)}
+            // GL Nov: figure out how to close the popover upon cmd-enter submit
+            // GL 12/14: the answer here is going to be to control Popover open
+            // state ourselves as we now do elsewhere in the codebase
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && event.metaKey) {
+                startCommentThreadAtSelection(pendingCommentText);
+                setSuppressButton(true);
+                setCommentBoxOpen(false);
+                event.preventDefault();
+              }
+            }}
+          />
+
+          <PopoverClose>
+            <Button
+              variant="outline"
+              onClick={() => {
+                startCommentThreadAtSelection(pendingCommentText);
+                setSuppressButton(true);
+              }}
+            >
+              Comment
+              <span className="text-gray-400 ml-2 text-xs">⌘⏎</span>
+            </Button>
+          </PopoverClose>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 667e88dd..73f0a4f7 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -16,21 +16,26 @@ import { EditorView } from "@codemirror/view";
 // it should be all 1) specific to TEE, 2) not dependent on viewport / media queries
 import { useCurrentAccount } from "@/os/explorer/account";
 import { EditorProps } from "@/os/tools";
-import { AnnotationWithUIState } from "@/os/versionControl/schema";
+import {
+  AnnotationGroupWithUIState,
+  AnnotationWithUIState,
+} from "@/os/versionControl/schema";
 import { getCursorPositionSafely } from "@/os/versionControl/utils";
 import { isEqual, uniq } from "lodash";
 import "../index.css";
+import { CommentsSidebar } from "./CommentsSidebar";
+import { useAnnotationGroupsWithPosition } from "../utils";
 
 export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
   const {
     docUrl,
     docHeads,
     annotations = [],
+    annotationGroups = [],
     setSelectedAnchors = () => {},
     actorIdToAuthor,
   } = props;
 
-  const account = useCurrentAccount();
   const [doc, changeDoc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
   const handle = useHandle<MarkdownDoc>(docUrl);
   const [editorView, setEditorView] = useState<EditorView>();
@@ -65,6 +70,13 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     });
   }, [doc, annotations]);
 
+  const annotationGroupsWithPosition = useAnnotationGroupsWithPosition({
+    doc,
+    editorView,
+    editorContainer,
+    annotationGroups,
+  });
+
   if (!doc) {
     return null;
   }
@@ -100,6 +112,15 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
             />
           </div>
         </div>
+        <div>
+          <CommentsSidebar
+            doc={doc}
+            handle={handle}
+            selection={null}
+            annotationGroupsWithPosition={annotationGroupsWithPosition}
+            setSelectedAnnotationGroupId={() => {}}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
new file mode 100644
index 00000000..ae9b1716
--- /dev/null
+++ b/src/tools/essay/utils.ts
@@ -0,0 +1,190 @@
+import { EditorView } from "@codemirror/view";
+import { next as A } from "@automerge/automerge";
+import { ReactElement, useEffect, useMemo, useState } from "react";
+import ReactDOMServer from "react-dom/server";
+import {
+  AnnotationGroup,
+  AnnotationGroupWithUIState,
+} from "@/os/versionControl/schema";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/markdown";
+import { Annotation } from "@uiw/react-codemirror";
+import { useScrollPosition } from "@/os/hooks/useScrollPosition";
+
+export type AnnotationGroupWithPosition = AnnotationGroupWithUIState<
+  MarkdownDocAnchor,
+  string
+> & {
+  yCoord: number;
+};
+
+// a very rough approximation; needs to be better but being perfect seems hard
+const estimatedHeightOfAnnotationGroup = (
+  annotationGroup: AnnotationGroup<MarkdownDocAnchor, string>
+) => {
+  const commentHeights = annotationGroup.discussion.comments.map(
+    (comment) => 64 + Math.floor(comment.content.length / 60) * 20
+  );
+  const commentsHeight = commentHeights.reduce((a, b) => a + b, 0);
+  const PADDING = 32;
+  const BUTTONS = 40;
+  return PADDING + BUTTONS + commentsHeight + 20;
+};
+
+// Given a list of comment threads, find a vertical position for each comment.
+// We roughly try to put the comments vertically near the text they are commenting on.
+// But we also avoid overlapping comments by bumping them up or down if they overlap.
+// The currently active comment gets priority for being nearby its text;
+// other comments bump up or down from that point.
+export const getVisibleAnnotationGroupsWithPos = ({
+  doc,
+  editorView,
+  annotationGroups,
+}: {
+  annotationGroups: AnnotationGroupWithUIState<MarkdownDocAnchor, string>[];
+  doc: MarkdownDoc;
+  editorView: EditorView;
+}): AnnotationGroupWithPosition[] => {
+  // As an initial draft, put each thread right next to its comment
+  const annotationGroupsWithPosition: AnnotationGroupWithPosition[] =
+    annotationGroups.flatMap((annotationGroup) => {
+      const topOfEditor =
+        editorView?.scrollDOM.getBoundingClientRect()?.top ?? 0;
+      const position = Math.min(
+        ...annotationGroup.annotations.map((annotation) =>
+          A.getCursorPosition(doc, ["content"], annotation.anchor.fromCursor)
+        )
+      );
+      const viewportCoordsOfAnnotationGroup =
+        editorView?.coordsAtPos(position)?.top;
+      if (viewportCoordsOfAnnotationGroup === undefined) {
+        return [];
+      }
+
+      const TOP_MARGIN = 40;
+      const yCoord =
+        -1 * topOfEditor + viewportCoordsOfAnnotationGroup + TOP_MARGIN - 16;
+
+      return [
+        {
+          ...annotationGroup,
+          yCoord,
+        },
+      ];
+    });
+
+  // Now it's possible that we have annotation groups which are overlapping one another.
+  // Make a best effort to mostly avoid overlaps.
+
+  let activeIndex = annotationGroupsWithPosition.findIndex(
+    (annotation) => annotation.state === "expanded"
+  );
+  if (activeIndex === -1) activeIndex = 0;
+
+  // Iterate upwards
+  for (let i = activeIndex - 1; i >= 0; i--) {
+    if (
+      annotationGroupsWithPosition[i].yCoord +
+        estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i]) >
+      annotationGroupsWithPosition[i + 1].yCoord
+    ) {
+      annotationGroupsWithPosition[i].yCoord =
+        annotationGroupsWithPosition[i + 1].yCoord -
+        estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i]);
+    }
+  }
+
+  // Iterate downwards
+  for (let i = activeIndex + 1; i < annotationGroupsWithPosition.length; i++) {
+    if (
+      annotationGroupsWithPosition[i].yCoord <
+      annotationGroupsWithPosition[i - 1].yCoord +
+        estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i - 1])
+    ) {
+      annotationGroupsWithPosition[i].yCoord =
+        annotationGroupsWithPosition[i - 1].yCoord +
+        estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i - 1]);
+    }
+  }
+
+  for (let i = 1; i < annotationGroupsWithPosition.length; i++) {
+    if (
+      annotationGroupsWithPosition[i].yCoord <
+      annotationGroupsWithPosition[i - 1].yCoord +
+        estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i - 1])
+    ) {
+      if (i === activeIndex) {
+        annotationGroupsWithPosition[i - 1].yCoord =
+          annotationGroupsWithPosition[i].yCoord -
+          estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i - 1]);
+      } else {
+        annotationGroupsWithPosition[i].yCoord =
+          annotationGroupsWithPosition[i - 1].yCoord +
+          estimatedHeightOfAnnotationGroup(annotationGroupsWithPosition[i - 1]);
+      }
+    }
+  }
+
+  return annotationGroupsWithPosition;
+};
+
+// Utils for converting back and forth between CodeMirror and Automerge ranges.
+// The end of a Codemirror range can be an index past the last character in the
+// document, but we can't get an Automerge cursor for that position.
+// TODO: understand and document this more thoroughly
+
+export const cmRangeToAMRange = (range: { from: number; to: number }) => ({
+  from: range.from,
+  to: range.to - 1,
+});
+
+export const amRangeToCMRange = (range: { from: number; to: number }) => ({
+  from: range.from,
+  to: range.to + 1,
+});
+
+// Helper for making HTML Elements in codemirror editor
+export const jsxToHtmlElement = (jsx: ReactElement): HTMLElement => {
+  const htmlString = ReactDOMServer.renderToStaticMarkup(jsx);
+  const div = document.createElement("div");
+  div.innerHTML = htmlString;
+  return div.firstElementChild as HTMLElement;
+};
+
+// A React hook that gets the comment threads for the doc w/ positions
+// and manages caching.
+export const useAnnotationGroupsWithPosition = ({
+  annotationGroups,
+  doc,
+  editorView,
+  editorContainer,
+}: {
+  annotationGroups: AnnotationGroupWithUIState<MarkdownDocAnchor, string>[];
+  doc: MarkdownDoc;
+  editorView: EditorView;
+  editorContainer: HTMLElement;
+}): AnnotationGroupWithPosition[] => {
+  // Next we get the vertical position for each thread.
+
+  // It may be inefficient to rerender comments sidebar on each scroll but
+  // it's fine for now and it lets us reposition comments as the user scrolls.
+  // (Notably we're not repositioning comments in JS at 60fps;
+  // we just use CodeMirror to compute position, and it doesn't tell us position
+  // of comments that are way off-screen. That's why we need this scroll handler
+  // to catch when things come near the screen)
+  const scrollPosition = useScrollPosition(editorContainer);
+
+  const annotationGroupsWithPositions = useMemo(() => {
+    return editorView
+      ? getVisibleAnnotationGroupsWithPos({
+          editorView,
+          doc,
+          annotationGroups,
+        })
+      : [];
+
+    // the scrollPosition dependency is implicit so the linter thinks it's not needed;
+    // but actually it's critical for making comments appear correctly as scrolling happens
+  }, [editorView, annotationGroups, scrollPosition]);
+
+  return annotationGroupsWithPositions;
+};

From 9cd72f4e232b6cd5b9924b4b3c4edb2a5a5c0891 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 21 May 2024 14:10:26 +0200
Subject: [PATCH 15/59] hide inline comments when sidebar is open

---
 src/os/tools.ts                               |  1 +
 .../components/VersionControlEditor.tsx       |  6 ++--
 .../essay/components/CommentsSidebar.tsx      | 12 +++----
 src/tools/essay/components/EssayEditor.tsx    | 33 +++++++++----------
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index 47724f26..a5b0f992 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -41,6 +41,7 @@ export type EditorProps<T, V> = {
   setSelectedAnchors?: (anchors: T[]) => void;
   setHoveredAnchor?: (anchors: T) => void;
   setSelectedAnnotationGroupId?: (groupId: string) => void;
+  hideInlineComments?: boolean;
 };
 
 export type AnnotationsViewProps<
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 538d2a52..c4771e38 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -349,8 +349,6 @@ export const VersionControlEditor: React.FC<{
     setAnnotationsPositionsInSidebarMap,
   ] = useState<PositionMap>();
 
-  console.log("AnnotationGroups", annotationGroups);
-
   // ---- ALL HOOKS MUST GO ABOVE THIS EARLY RETURN ----
 
   if (!doc || !datatypeId || !doc.branchMetadata) return <div>Loading...</div>;
@@ -587,6 +585,7 @@ export const VersionControlEditor: React.FC<{
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
+                  hideInlineComments={true}
                 />
               ) : (
                 <DocEditor
@@ -599,6 +598,7 @@ export const VersionControlEditor: React.FC<{
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
+                  hideInlineComments={sidebarMode !== null}
                 />
               )}
             </div>
@@ -688,6 +688,7 @@ const DocEditor = <T, V>({
   annotations,
   annotationGroups,
   actorIdToAuthor,
+  hideInlineComments,
   setSelectedAnchors,
   setHoveredAnchor,
   setSelectedAnnotationGroupId,
@@ -702,6 +703,7 @@ const DocEditor = <T, V>({
       annotations={annotations}
       annotationGroups={annotationGroups}
       actorIdToAuthor={actorIdToAuthor}
+      hideInlineComments={hideInlineComments}
       setSelectedAnchors={setSelectedAnchors}
       setHoveredAnchor={setHoveredAnchor}
       setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 1e062e45..96bac748 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -1,24 +1,22 @@
 import { Button } from "@/components/ui/button";
 
-import { Check, MessageSquarePlus, Reply } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
-import { next as A, ChangeFn, uuid } from "@automerge/automerge";
+import { Check, MessageSquarePlus, Reply } from "lucide-react";
 
 import { AnnotationGroupWithPosition } from "../utils";
 
 import {
   Popover,
+  PopoverClose,
   PopoverContent,
   PopoverTrigger,
-  PopoverClose,
 } from "@/components/ui/popover";
-import { useEffect, useState } from "react";
-import { cmRangeToAMRange } from "../utils";
 import { MarkdownDoc } from "@/datatypes/markdown";
-import { SelectionRange } from "@codemirror/state";
 import { useCurrentAccount } from "@/os/explorer/account";
 import { getAnnotationGroupId } from "@/os/versionControl/annotations";
 import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
+import { SelectionRange } from "@codemirror/state";
+import { useEffect, useState } from "react";
 
 export const CommentsSidebar = ({
   doc,
@@ -96,8 +94,6 @@ export const CommentsSidebar = ({
     setPendingCommentText("");
   };*/
 
-  console.log(annotationGroupsWithPosition);
-
   return (
     <div>
       {annotationGroupsWithPosition.map((annotationGroup, index) => (
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 73f0a4f7..b2d2366c 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -3,28 +3,24 @@ import { AutomergeUrl } from "@automerge/automerge-repo";
 import { useDocument, useHandle } from "@automerge/automerge-repo-react-hooks";
 import { MarkdownDocEditor } from "./CodeMirrorEditor";
 
-import { useEffect, useMemo, useState } from "react";
 import {
   MarkdownDoc,
   MarkdownDocAnchor,
   ResolvedMarkdownDocAnchor,
 } from "@/datatypes/markdown";
+import { useEffect, useMemo, useState } from "react";
 
 import { EditorView } from "@codemirror/view";
 
 // TODO: audit the CSS being imported here;
 // it should be all 1) specific to TEE, 2) not dependent on viewport / media queries
-import { useCurrentAccount } from "@/os/explorer/account";
 import { EditorProps } from "@/os/tools";
-import {
-  AnnotationGroupWithUIState,
-  AnnotationWithUIState,
-} from "@/os/versionControl/schema";
+import { AnnotationWithUIState } from "@/os/versionControl/schema";
 import { getCursorPositionSafely } from "@/os/versionControl/utils";
 import { isEqual, uniq } from "lodash";
 import "../index.css";
-import { CommentsSidebar } from "./CommentsSidebar";
 import { useAnnotationGroupsWithPosition } from "../utils";
+import { CommentsSidebar } from "./CommentsSidebar";
 
 export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
   const {
@@ -34,9 +30,10 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     annotationGroups = [],
     setSelectedAnchors = () => {},
     actorIdToAuthor,
+    hideInlineComments,
   } = props;
 
-  const [doc, changeDoc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
+  const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
   const handle = useHandle<MarkdownDoc>(docUrl);
   const [editorView, setEditorView] = useState<EditorView>();
   const [editorContainer, setEditorContainer] = useState<HTMLDivElement>(null);
@@ -112,15 +109,17 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
             />
           </div>
         </div>
-        <div>
-          <CommentsSidebar
-            doc={doc}
-            handle={handle}
-            selection={null}
-            annotationGroupsWithPosition={annotationGroupsWithPosition}
-            setSelectedAnnotationGroupId={() => {}}
-          />
-        </div>
+        {!hideInlineComments && (
+          <div>
+            <CommentsSidebar
+              doc={doc}
+              handle={handle}
+              selection={null}
+              annotationGroupsWithPosition={annotationGroupsWithPosition}
+              setSelectedAnnotationGroupId={() => {}}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

From 51a117f620f56f7cc43a8c22d5be564fa42291dc Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 21 May 2024 14:44:34 +0200
Subject: [PATCH 16/59] tweak styling

---
 src/tools/essay/components/CommentsSidebar.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 96bac748..d3a560dc 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -99,13 +99,11 @@ export const CommentsSidebar = ({
       {annotationGroupsWithPosition.map((annotationGroup, index) => (
         <div
           key={index}
-          className={
-            "absolute transition-all" /*`bg-white hover:border-gray-400 hover:bg-gray-50 p-4 mr-2 absolute border border-gray-300 rounded-sm max-w-lg transition-all duration-100 ease-in-out ${
-            thread.id === activeThreadId
+          className={`absolute transition-all ease-in-out w-[350px] ${
+            annotationGroup.state === "expanded"
               ? "z-50 shadow-sm border-gray-500"
               : "z-0"
-          }`*/
-          }
+          }`}
           style={{
             top: annotationGroup.yCoord,
           }}

From 49522498374e08c47ee301c38c4d6106401cf9d1 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 21 May 2024 15:22:00 +0200
Subject: [PATCH 17/59] handle hover state

---
 src/os/tools.ts                               |   1 +
 .../components/ReviewSidebar.tsx              |  12 +-
 .../components/VersionControlEditor.tsx       |   6 +-
 .../essay/components/CommentsSidebar.tsx      | 247 ++++--------------
 src/tools/essay/components/EssayEditor.tsx    |   5 +-
 src/tools/essay/utils.ts                      |   8 +-
 6 files changed, 63 insertions(+), 216 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index a5b0f992..86796a6c 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -41,6 +41,7 @@ export type EditorProps<T, V> = {
   setSelectedAnchors?: (anchors: T[]) => void;
   setHoveredAnchor?: (anchors: T) => void;
   setSelectedAnnotationGroupId?: (groupId: string) => void;
+  setHoveredAnnotationGroupId?: (groupId: string) => void;
   hideInlineComments?: boolean;
 };
 
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 17c57b6c..4bd56105 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -54,7 +54,6 @@ export const ReviewSidebar = React.memo(
     selectedAnchors,
     changeDoc,
     setSelectedAnnotationGroupId,
-    hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     isCommentInputFocused,
     setIsCommentInputFocused,
@@ -204,19 +203,12 @@ export const ReviewSidebar = React.memo(
                 onAddComment={(content) => {
                   addCommentToAnnotationGroup(annotationGroup, content);
                 }}
-                isHovered={hoveredAnnotationGroupId === id}
                 setIsHovered={(isHovered) => {
                   setHoveredAnnotationGroupId(isHovered ? id : undefined);
                 }}
                 setIsSelected={(isSelected) => {
                   setSelectedAnnotationGroupId(isSelected ? id : undefined);
                 }}
-                ref={(element) => {
-                  /*registerAnnotationElement(
-                    JSON.stringify(annotation.target),
-                    element
-                  )*/
-                }}
                 onSelectNext={() => {
                   const nextAnnotation = annotationGroups[index + 1];
                   if (nextAnnotation) {
@@ -299,7 +291,6 @@ export interface AnnotationGroupViewProps {
   onAddComment: (content: string) => void;
   onSelectNext: () => void;
   onSelectPrev: () => void;
-  isHovered: boolean;
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
 }
@@ -318,7 +309,6 @@ export const AnnotationGroupView = forwardRef<
       setIsReplyBoxOpen,
       onResolveDiscussion,
       onAddComment: onReply,
-      isHovered,
       setIsHovered,
       setIsSelected,
       onSelectNext,
@@ -446,7 +436,7 @@ export const AnnotationGroupView = forwardRef<
             className={`flex flex-col gap-1 bg-white rounded-sm p-2 border-2 ${
               isFocused
                 ? "border-blue-600 shadow-lg"
-                : isHovered
+                : annotationGroup.state === "focused"
                 ? "border-blue-600 shadow-lg"
                 : "border border-gray-200 "
             }`}
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index c4771e38..a768d501 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -598,7 +598,9 @@ export const VersionControlEditor: React.FC<{
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
-                  hideInlineComments={sidebarMode !== null}
+                  setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+                  setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+                  hideInlineComments={!!sidebarMode}
                 />
               )}
             </div>
@@ -692,6 +694,7 @@ const DocEditor = <T, V>({
   setSelectedAnchors,
   setHoveredAnchor,
   setSelectedAnnotationGroupId,
+  setHoveredAnnotationGroupId,
 }: EditorPropsWithDatatype<T, V>) => {
   // Currently we don't have a toolpicker so we just show the first tool for the doc type
   const Component = TOOLS[datatypeId][0].editorComponent;
@@ -707,6 +710,7 @@ const DocEditor = <T, V>({
       setSelectedAnchors={setSelectedAnchors}
       setHoveredAnchor={setHoveredAnchor}
       setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+      setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
     />
   );
 };
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index d3a560dc..95635898 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -1,22 +1,10 @@
-import { Button } from "@/components/ui/button";
-
-import { Textarea } from "@/components/ui/textarea";
-import { Check, MessageSquarePlus, Reply } from "lucide-react";
-
 import { AnnotationGroupWithPosition } from "../utils";
 
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { MarkdownDoc } from "@/datatypes/markdown";
-import { useCurrentAccount } from "@/os/explorer/account";
 import { getAnnotationGroupId } from "@/os/versionControl/annotations";
 import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
+import { DocHandle } from "@automerge/automerge-repo";
 import { SelectionRange } from "@codemirror/state";
-import { useEffect, useState } from "react";
 
 export const CommentsSidebar = ({
   doc,
@@ -24,210 +12,69 @@ export const CommentsSidebar = ({
   selection,
   annotationGroupsWithPosition,
   setSelectedAnnotationGroupId,
+  setHoveredAnnotationGroupId,
 }: {
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
   selection: SelectionRange;
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
+  setHoveredAnnotationGroupId: (id: string) => void;
 }) => {
-  const account = useCurrentAccount();
-  const [pendingCommentText, setPendingCommentText] = useState("");
-  const [commentBoxOpen, setCommentBoxOpen] = useState(false);
-  const [activeReplyThreadId, setActiveReplyThreadId] = useState<
-    string | null
-  >();
-
-  // suppress showing the button immediately after adding a thread
-  const [suppressButton, setSuppressButton] = useState(false);
-  const showCommentButton =
-    selection && selection.from !== selection.to && !suppressButton;
-
-  // un-suppress the button once the selection changes
-  useEffect(() => {
-    setSuppressButton(false);
-  }, [selection?.from, selection?.to]);
-
-  /*const startCommentThreadAtSelection = (commentText: string) => {
-    if (!selection) return;
-
-    const amRange = cmRangeToAMRange(selection);
-
-    const fromCursor = A.getCursor(doc, ["content"], amRange.from);
-    const toCursor = A.getCursor(doc, ["content"], amRange.to);
-
-    const comment: Comment = {
-      id: uuid(),
-      content: commentText,
-      userId: null,
-      contactUrl: account?.contactHandle.url,
-      timestamp: Date.now(),
-    };
-
-    const thread: CommentThread = {
-      id: uuid(),
-      comments: [comment],
-      resolved: false,
-      fromCursor,
-      toCursor,
-    };
-
-    changeDoc((doc) => {
-      doc.commentThreads[thread.id] = thread;
-    });
-
-    setPendingCommentText("");
-  };*/
-
-  /*const addReplyToThread = (threadId: string) => {
-    const comment: Comment = {
-      id: uuid(),
-      content: pendingCommentText,
-      contactUrl: account?.contactHandle.url,
-      timestamp: Date.now(),
-    };
-
-    changeDoc((doc) => {
-      doc.commentThreads[threadId].comments.push(comment);
-    });
-
-    setPendingCommentText("");
-  };*/
-
   return (
     <div>
-      {annotationGroupsWithPosition.map((annotationGroup, index) => (
-        <div
-          key={index}
-          className={`absolute transition-all ease-in-out w-[350px] ${
-            annotationGroup.state === "expanded"
-              ? "z-50 shadow-sm border-gray-500"
-              : "z-0"
-          }`}
-          style={{
-            top: annotationGroup.yCoord,
-          }}
-          onClick={(e) => {
-            setSelectedAnnotationGroupId(getAnnotationGroupId(annotationGroup));
-            e.stopPropagation();
-          }}
-        >
-          <div>
+      {annotationGroupsWithPosition.map((annotationGroup, index) => {
+        const id = getAnnotationGroupId(annotationGroup);
+
+        return (
+          <div
+            key={index}
+            className={`absolute transition-all ease-in-out w-[350px] ${
+              annotationGroup.state === "expanded"
+                ? "z-50 shadow-sm border-gray-500"
+                : "z-0"
+            }`}
+            style={{
+              top: annotationGroup.yCoord,
+            }}
+            onClick={(e) => {
+              setSelectedAnnotationGroupId(
+                getAnnotationGroupId(annotationGroup)
+              );
+              e.stopPropagation();
+            }}
+          >
             <AnnotationGroupView
               doc={doc}
               handle={handle}
               annotationGroup={annotationGroup}
               datatypeId="essay"
-            />
-          </div>
-          {false && (
-            <div className="mt-2">
-              <Popover
-                open={activeReplyThreadId === thread.id}
-                onOpenChange={(open) =>
-                  open
-                    ? setActiveReplyThreadId(thread.id)
-                    : setActiveReplyThreadId(null)
-                }
-              >
-                <PopoverTrigger asChild>
-                  <Button className="mr-2" variant="outline">
-                    <Reply className="mr-2 " /> Reply
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent>
-                  <Textarea
-                    className="mb-4"
-                    value={pendingCommentText}
-                    onChange={(event) =>
-                      setPendingCommentText(event.target.value)
-                    }
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" && event.metaKey) {
-                        addReplyToThread(thread.id);
-                        setActiveReplyThreadId(null);
-                        event.preventDefault();
-                      }
-                    }}
-                  />
-
-                  <PopoverClose>
-                    <Button
-                      variant="outline"
-                      onClick={() => addReplyToThread(thread.id)}
-                    >
-                      Comment
-                      <span className="text-gray-400 ml-2 text-xs">⌘⏎</span>
-                    </Button>
-                  </PopoverClose>
-                </PopoverContent>
-              </Popover>
-
-              <Button
-                variant="outline"
-                onClick={() =>
-                  changeDoc(
-                    (d) => (d.commentThreads[thread.id].resolved = true)
-                  )
+              setIsHovered={(isHovered) => {
+                setHoveredAnnotationGroupId(isHovered ? id : undefined);
+              }}
+              setIsSelected={(isSelected) => {
+                setSelectedAnnotationGroupId(isSelected ? id : undefined);
+              }}
+              onSelectNext={() => {
+                const nextAnnotation = annotationGroupsWithPosition[index + 1];
+                if (nextAnnotation) {
+                  setSelectedAnnotationGroupId(
+                    getAnnotationGroupId(nextAnnotation)
+                  );
                 }
-              >
-                <Check className="mr-2" /> Resolve
-              </Button>
-            </div>
-          )}
-        </div>
-      ))}
-      <Popover
-        open={commentBoxOpen}
-        onOpenChange={() => setCommentBoxOpen((prev) => !prev)}
-      >
-        <PopoverTrigger asChild>
-          {showCommentButton && (
-            <Button
-              className="relative shadow-md w-44"
-              variant="outline"
-              style={{
-                top: (selection?.yCoord ?? 0) + 23,
-                left: -50,
               }}
-            >
-              <MessageSquarePlus size={24} className="mr-2" />
-              Add comment
-            </Button>
-          )}
-        </PopoverTrigger>
-        <PopoverContent>
-          <Textarea
-            className="mb-4"
-            value={pendingCommentText}
-            onChange={(event) => setPendingCommentText(event.target.value)}
-            // GL Nov: figure out how to close the popover upon cmd-enter submit
-            // GL 12/14: the answer here is going to be to control Popover open
-            // state ourselves as we now do elsewhere in the codebase
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && event.metaKey) {
-                startCommentThreadAtSelection(pendingCommentText);
-                setSuppressButton(true);
-                setCommentBoxOpen(false);
-                event.preventDefault();
-              }
-            }}
-          />
-
-          <PopoverClose>
-            <Button
-              variant="outline"
-              onClick={() => {
-                startCommentThreadAtSelection(pendingCommentText);
-                setSuppressButton(true);
+              onSelectPrev={() => {
+                const prevAnnotation = annotationGroupsWithPosition[index - 1];
+                if (prevAnnotation) {
+                  setSelectedAnnotationGroupId(
+                    getAnnotationGroupId(prevAnnotation)
+                  );
+                }
               }}
-            >
-              Comment
-              <span className="text-gray-400 ml-2 text-xs">⌘⏎</span>
-            </Button>
-          </PopoverClose>
-        </PopoverContent>
-      </Popover>
+            />
+          </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index b2d2366c..0e5dc5b3 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -31,6 +31,8 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     setSelectedAnchors = () => {},
     actorIdToAuthor,
     hideInlineComments,
+    setSelectedAnnotationGroupId,
+    setHoveredAnnotationGroupId,
   } = props;
 
   const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
@@ -116,7 +118,8 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               handle={handle}
               selection={null}
               annotationGroupsWithPosition={annotationGroupsWithPosition}
-              setSelectedAnnotationGroupId={() => {}}
+              setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+              setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
             />
           </div>
         )}
diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
index ae9b1716..f11a5c2f 100644
--- a/src/tools/essay/utils.ts
+++ b/src/tools/essay/utils.ts
@@ -21,9 +21,11 @@ export type AnnotationGroupWithPosition = AnnotationGroupWithUIState<
 const estimatedHeightOfAnnotationGroup = (
   annotationGroup: AnnotationGroup<MarkdownDocAnchor, string>
 ) => {
-  const commentHeights = annotationGroup.discussion.comments.map(
-    (comment) => 64 + Math.floor(comment.content.length / 60) * 20
-  );
+  const commentHeights = annotationGroup.discussion
+    ? annotationGroup.discussion.comments.map(
+        (comment) => 64 + Math.floor(comment.content.length / 60) * 20
+      )
+    : [];
   const commentsHeight = commentHeights.reduce((a, b) => a + b, 0);
   const PADDING = 32;
   const BUTTONS = 40;

From 7b1f5091b0ddd717dca217d0547fcd00e6265976 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 10:01:34 +0200
Subject: [PATCH 18/59] tweak styling

---
 src/os/versionControl/components/ReviewSidebar.tsx | 2 +-
 src/tools/essay/codemirrorPlugins/theme.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 4bd56105..b3844e12 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -247,7 +247,7 @@ export const ReviewSidebar = React.memo(
           </div>
 
           <div
-            className="rounded bg-white shadow"
+            className="rounded bg-white shadow px-2"
             onKeyDownCapture={(event) => {
               if (event.key === "Enter" && event.metaKey) {
                 createDiscussion(pendingCommentText);
diff --git a/src/tools/essay/codemirrorPlugins/theme.ts b/src/tools/essay/codemirrorPlugins/theme.ts
index 31db2f62..df436ace 100644
--- a/src/tools/essay/codemirrorPlugins/theme.ts
+++ b/src/tools/essay/codemirrorPlugins/theme.ts
@@ -20,7 +20,7 @@ const ESSAY_STYLES = {
     height: "100%",
     fontFamily: '"Merriweather", serif',
     padding: "10px 0",
-    margin: "0 var(--cm-padding-x)",
+    margin: "0",
     // textAlign: "justify",
     textWrap: "pretty",
     lineHeight: "1.5rem",

From c424a0b842ffefb508a5151db5b6ef2d511fb6a8 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 10:02:31 +0200
Subject: [PATCH 19/59] move resolve logic into AnnotationGroupView

---
 .../components/ReviewSidebar.tsx              | 115 +++---------------
 .../essay/components/CommentsSidebar.tsx      |  10 +-
 2 files changed, 22 insertions(+), 103 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index b3844e12..5049afd5 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -161,28 +161,6 @@ export const ReviewSidebar = React.memo(
       setSelectedAnnotationGroupId(discussionId);
     };
 
-    const resolveDiscussionAtIndex = (index: number) => {
-      const discussionGroup = annotationGroups[index];
-
-      let newSelectedAnnotationGroupId;
-
-      const nextAnnotation = annotationGroups[index + 1];
-      if (nextAnnotation) {
-        newSelectedAnnotationGroupId = getAnnotationGroupId(nextAnnotation);
-      } else {
-        const prevAnnotation = annotationGroups[index - 1];
-        if (prevAnnotation) {
-          newSelectedAnnotationGroupId = getAnnotationGroupId(prevAnnotation);
-        }
-      }
-
-      setSelectedAnnotationGroupId(newSelectedAnnotationGroupId);
-
-      changeDoc((doc) => {
-        doc.discussions[discussionGroup.discussion.id].resolved = true;
-      });
-    };
-
     return (
       <div className="h-full flex flex-col">
         <div className="bg-gray-50 flex-1 p-2 flex flex-col z-20 m-h-[100%] overflow-y-auto overflow-x-visible">
@@ -195,14 +173,6 @@ export const ReviewSidebar = React.memo(
                 datatypeId={datatypeId}
                 key={id}
                 annotationGroup={annotationGroup}
-                isReplyBoxOpen={annotationGroupIdOfActiveReply === id}
-                setIsReplyBoxOpen={(isOpen) => {
-                  setAnnotationGroupIdOfActiveReply(isOpen ? id : undefined);
-                }}
-                onResolveDiscussion={() => resolveDiscussionAtIndex(index)}
-                onAddComment={(content) => {
-                  addCommentToAnnotationGroup(annotationGroup, content);
-                }}
                 setIsHovered={(isHovered) => {
                   setHoveredAnnotationGroupId(isHovered ? id : undefined);
                 }}
@@ -225,6 +195,8 @@ export const ReviewSidebar = React.memo(
                     );
                   }
                 }}
+                hasNext={index < annotationGroups.length - 1}
+                hasPrev={index > 0}
               />
             );
           })}
@@ -285,12 +257,10 @@ export interface AnnotationGroupViewProps {
   handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
   annotationGroup: AnnotationGroupWithUIState<unknown, unknown>;
-  isReplyBoxOpen: boolean;
-  setIsReplyBoxOpen: (isOpen: boolean) => void;
-  onResolveDiscussion: () => void;
-  onAddComment: (content: string) => void;
   onSelectNext: () => void;
   onSelectPrev: () => void;
+  hasNext: boolean;
+  hasPrev: boolean;
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
 }
@@ -305,14 +275,12 @@ export const AnnotationGroupView = forwardRef<
       handle,
       datatypeId,
       annotationGroup,
-      isReplyBoxOpen,
-      setIsReplyBoxOpen,
-      onResolveDiscussion,
-      onAddComment: onReply,
       setIsHovered,
       setIsSelected,
       onSelectNext,
       onSelectPrev,
+      hasNext,
+      hasPrev,
     }: AnnotationGroupViewProps,
     ref
   ) => {
@@ -333,6 +301,18 @@ export const AnnotationGroupView = forwardRef<
       }
     };
 
+    const onResolveDiscussion = () => {
+      handle.change((doc) => {
+        doc.discussions[annotationGroup.discussion.id].resolved = true;
+      });
+
+      if (hasNext) {
+        onSelectNext();
+      } else if (hasPrev) {
+        onSelectPrev();
+      }
+    };
+
     const onStartResolve = () => {
       setHeight(localRef.current.clientHeight);
       // delay, so height is set first for transition
@@ -379,7 +359,7 @@ export const AnnotationGroupView = forwardRef<
         }
 
         if (evt.key === "Enter" && isMetaOrControlPressed) {
-          setIsReplyBoxOpen(true);
+          //setIsReplyBoxOpen(true);
           evt.preventDefault();
           evt.stopPropagation();
         }
@@ -462,63 +442,6 @@ export const AnnotationGroupView = forwardRef<
               isExpanded ? "h-[43px] opacity-100 mt-2" : "h-[0px] opacity-0"
             }`}
           >
-            <Popover
-              open={isReplyBoxOpen}
-              onOpenChange={(isOpen) => setIsReplyBoxOpen(isOpen)}
-            >
-              <PopoverTrigger>
-                <Button
-                  variant="ghost"
-                  className="select-none p-2 flex flex-col w-fit"
-                  onClick={() => setIsReplyBoxOpen(true)}
-                >
-                  <div className="flex gap-2 text-gray-600">
-                    <MessageCircleIcon size={16} />{" "}
-                    {annotationGroup.discussion &&
-                    annotationGroup.discussion.comments.length > 0
-                      ? "Reply"
-                      : "Comment"}
-                  </div>
-                  <span className="text-gray-400 text-xs w-full text-center">
-                    (⌘ + ⏎)
-                  </span>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent>
-                <Textarea
-                  className="mb-4"
-                  value={pendingCommentText}
-                  onChange={(event) =>
-                    setPendingCommentText(event.target.value)
-                  }
-                  onKeyDown={(event) => {
-                    event.stopPropagation();
-                    if (event.key === "Enter" && event.metaKey) {
-                      onReply(pendingCommentText);
-                      setPendingCommentText("");
-                      event.preventDefault();
-                    }
-                  }}
-                />
-
-                <PopoverClose>
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      onReply(pendingCommentText);
-                      setPendingCommentText("");
-                    }}
-                  >
-                    {annotationGroup.discussion &&
-                    annotationGroup.discussion.comments.length > 0
-                      ? "Reply"
-                      : "Comment"}
-                    <span className="text-gray-400 ml-2 text-xs">(⌘ + ⏎)</span>
-                  </Button>
-                </PopoverClose>
-              </PopoverContent>
-            </Popover>
-
             {annotationGroup.discussion && (
               <Button
                 variant="ghost"
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 95635898..9f89a03b 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -28,7 +28,7 @@ export const CommentsSidebar = ({
 
         return (
           <div
-            key={index}
+            key={id}
             className={`absolute transition-all ease-in-out w-[350px] ${
               annotationGroup.state === "expanded"
                 ? "z-50 shadow-sm border-gray-500"
@@ -37,12 +37,6 @@ export const CommentsSidebar = ({
             style={{
               top: annotationGroup.yCoord,
             }}
-            onClick={(e) => {
-              setSelectedAnnotationGroupId(
-                getAnnotationGroupId(annotationGroup)
-              );
-              e.stopPropagation();
-            }}
           >
             <AnnotationGroupView
               doc={doc}
@@ -71,6 +65,8 @@ export const CommentsSidebar = ({
                   );
                 }
               }}
+              hasNext={index < annotationGroupsWithPosition.length - 1}
+              hasPrev={index > 0}
             />
           </div>
         );

From 777765a5b16d00275d4b9b2f2724937c5aa62fd8 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 11:12:21 +0200
Subject: [PATCH 20/59] allow to edit own comments

---
 src/os/tools.ts                               |   5 +
 .../components/ReviewSidebar.tsx              | 102 +++++++++++++++---
 src/os/versionControl/schema.ts               |   1 +
 .../essay/components/CodeMirrorEditor.tsx     |   2 +
 4 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index 86796a6c..ac5f9734 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -30,6 +30,9 @@ export type Tool = {
   >;
 };
 
+type CommentId = string;
+export type CommentSelection<T> = CommentId | Anchors<T>[];
+
 export type EditorProps<T, V> = {
   docUrl: AutomergeUrl;
   docHeads?: A.Heads;
@@ -42,6 +45,8 @@ export type EditorProps<T, V> = {
   setHoveredAnchor?: (anchors: T) => void;
   setSelectedAnnotationGroupId?: (groupId: string) => void;
   setHoveredAnnotationGroupId?: (groupId: string) => void;
+  openComment?: (commentSelection: CommentSelection<T>) => void;
+
   hideInlineComments?: boolean;
 };
 
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 5049afd5..81660920 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -20,7 +20,7 @@ import {
 } from "@/os/versionControl/schema";
 import { next as A, uuid } from "@automerge/automerge";
 import { DocHandle } from "@automerge/automerge-repo";
-import { Check, MessageCircleIcon } from "lucide-react";
+import { Check, PencilIcon, XIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
 import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
@@ -284,7 +284,6 @@ export const AnnotationGroupView = forwardRef<
     }: AnnotationGroupViewProps,
     ref
   ) => {
-    const [pendingCommentText, setPendingCommentText] = useState("");
     const [height, setHeight] = useState();
     const [isBeingResolved, setIsBeingResolved] = useState(false);
     const localRef = useRef(null); // Use useRef to create a local ref
@@ -321,6 +320,15 @@ export const AnnotationGroupView = forwardRef<
       });
     };
 
+    const onUpdateCommentContentWithId = (id: string, content: string) => {
+      handle.change((doc) => {
+        const comment = doc.discussions[
+          annotationGroup.discussion.id
+        ].comments.find((comment) => comment.id === id);
+        comment.content = content;
+      });
+    };
+
     // handle keyboard shortcuts
     /*
      * k / ctrl + p / cmd + p : select previous discussion
@@ -340,9 +348,6 @@ export const AnnotationGroupView = forwardRef<
         // select previous discussion
         if (evt.key === "k" || (evt.key === "p" && isMetaOrControlPressed)) {
           onSelectPrev();
-          evt.preventDefault();
-          evt.stopPropagation();
-
           return;
         }
 
@@ -433,6 +438,9 @@ export const AnnotationGroupView = forwardRef<
                 comment={comment}
                 key={comment.id}
                 docWithAssetsHandle={handle}
+                onChange={(content) =>
+                  onUpdateCommentContentWithId(comment.id, content)
+                }
               />
             ))}
           </div>
@@ -466,27 +474,91 @@ export const AnnotationGroupView = forwardRef<
 const DiscussionCommentView = ({
   comment,
   docWithAssetsHandle,
+  onChange,
 }: {
   comment: DiscussionComment;
   docWithAssetsHandle: DocHandle<HasAssets>;
+  onChange: (value: string) => void;
+  /*  isBeingEdited: boolean;
+  setIsBeingEdited: (isBeingEdited: boolean) => void; */
 }) => {
+  const [isBeingHovered, setIsBeingHovered] = useState(false);
+  const [updatedText, setUpdatedText] = useState<string>();
+  const [isBeingEdited, setIsBeingEdited] = useState(false);
+  const account = useCurrentAccount();
+  const isOwnComment = account?.contactHandle.url === comment.contactUrl;
+
   return (
-    <div className="p-1.5">
+    <div
+      className="p-1.5"
+      onMouseEnter={() => setIsBeingHovered(true)}
+      onMouseLeave={() => setIsBeingHovered(false)}
+    >
       <div className="flex items-center justify-between text-sm">
-        <div className="">
+        <div className="flex items-center gap-2">
           <ContactAvatar url={comment.contactUrl} showName={true} size="sm" />
-        </div>
 
-        <div className="text-xs text-gray-400">
-          {getRelativeTimeString(comment.timestamp)}
+          <div className="text-xs text-gray-400">
+            {getRelativeTimeString(comment.timestamp)}
+          </div>
         </div>
+
+        {isOwnComment && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className={!isBeingHovered || isBeingEdited ? "invisible" : ""}
+            onClick={() => {
+              setIsBeingEdited(true);
+            }}
+          >
+            <PencilIcon size={14} />
+          </Button>
+        )}
       </div>
 
-      <div className="text-sm">
-        <MarkdownInput
-          value={comment.content}
-          docWithAssetsHandle={docWithAssetsHandle}
-        />
+      <div className="flex flex-col gap-2">
+        <div
+          className={`text-sm ${
+            isBeingEdited
+              ? "border border-1 rounded-sm px-2 border-gray-300"
+              : "border-white"
+          }`}
+        >
+          <MarkdownInput
+            value={comment.content}
+            onChange={isBeingEdited ? setUpdatedText : undefined}
+            docWithAssetsHandle={docWithAssetsHandle}
+          />
+        </div>
+
+        {isBeingEdited && (
+          <div className="flex gap-1 justify-end">
+            <Button variant="ghost" className="py-0 px-2">
+              <Check
+                size={16}
+                onClick={() => {
+                  setIsBeingEdited(false);
+                  onChange(updatedText);
+                  setUpdatedText(undefined);
+                }}
+              />
+            </Button>
+
+            <Button
+              variant="ghost"
+              className="py-0 px-2"
+              onClick={() => {
+                setIsBeingEdited(false);
+                setUpdatedText(undefined);
+              }}
+            >
+              <XIcon size={16} />
+            </Button>
+          </div>
+        )}
+
+        <div className="right"></div>
       </div>
     </div>
   );
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index aaa2970b..69986fff 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -88,6 +88,7 @@ export type AnnotationGroup<T, V> = {
 
 export type AnnotationGroupWithUIState<T, V> = AnnotationGroup<T, V> & {
   state: "focused" | "expanded" | "neutral";
+  openCommentId: string;
 };
 
 export type Discussable<T> = {
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 12cbba99..502d4f08 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -141,6 +141,8 @@ export const MarkdownInput = ({
       parent: container,
     });
 
+    view.focus();
+
     setEditorView(view);
 
     return () => {

From 405180fcf310fb7a55b0505da577168c0110cdb3 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 11:22:49 +0200
Subject: [PATCH 21/59] fix click handler

---
 .../components/ReviewSidebar.tsx              | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 81660920..e517d0a2 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -483,7 +483,7 @@ const DiscussionCommentView = ({
   setIsBeingEdited: (isBeingEdited: boolean) => void; */
 }) => {
   const [isBeingHovered, setIsBeingHovered] = useState(false);
-  const [updatedText, setUpdatedText] = useState<string>();
+  const [updatedText, setUpdatedContent] = useState<string>();
   const [isBeingEdited, setIsBeingEdited] = useState(false);
   const account = useCurrentAccount();
   const isOwnComment = account?.contactHandle.url === comment.contactUrl;
@@ -510,6 +510,7 @@ const DiscussionCommentView = ({
             className={!isBeingHovered || isBeingEdited ? "invisible" : ""}
             onClick={() => {
               setIsBeingEdited(true);
+              setUpdatedContent(comment.content);
             }}
           >
             <PencilIcon size={14} />
@@ -527,22 +528,23 @@ const DiscussionCommentView = ({
         >
           <MarkdownInput
             value={comment.content}
-            onChange={isBeingEdited ? setUpdatedText : undefined}
+            onChange={isBeingEdited ? setUpdatedContent : undefined}
             docWithAssetsHandle={docWithAssetsHandle}
           />
         </div>
 
         {isBeingEdited && (
           <div className="flex gap-1 justify-end">
-            <Button variant="ghost" className="py-0 px-2">
-              <Check
-                size={16}
-                onClick={() => {
-                  setIsBeingEdited(false);
-                  onChange(updatedText);
-                  setUpdatedText(undefined);
-                }}
-              />
+            <Button
+              variant="ghost"
+              className="py-0 px-2"
+              onClick={() => {
+                onChange(updatedText);
+                setIsBeingEdited(false);
+                setUpdatedContent(undefined);
+              }}
+            >
+              <Check size={16} />
             </Button>
 
             <Button
@@ -550,7 +552,7 @@ const DiscussionCommentView = ({
               className="py-0 px-2"
               onClick={() => {
                 setIsBeingEdited(false);
-                setUpdatedText(undefined);
+                setUpdatedContent(undefined);
               }}
             >
               <XIcon size={16} />

From 81e67da645eae24b167a342ffc6e3acf63def36c Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 13:12:29 +0200
Subject: [PATCH 22/59] hoist up comment edit state to VersionControlEditor

---
 src/os/tools.ts                               |  5 +--
 src/os/versionControl/annotations.ts          | 12 ++++++
 .../components/ReviewSidebar.tsx              | 40 +++++++++++++++----
 .../components/VersionControlEditor.tsx       |  6 +++
 src/os/versionControl/schema.ts               |  6 ++-
 .../essay/components/CommentsSidebar.tsx      |  3 ++
 src/tools/essay/components/EssayEditor.tsx    |  2 +
 7 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index ac5f9734..d0e63b6e 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -30,9 +30,6 @@ export type Tool = {
   >;
 };
 
-type CommentId = string;
-export type CommentSelection<T> = CommentId | Anchors<T>[];
-
 export type EditorProps<T, V> = {
   docUrl: AutomergeUrl;
   docHeads?: A.Heads;
@@ -45,7 +42,7 @@ export type EditorProps<T, V> = {
   setHoveredAnchor?: (anchors: T) => void;
   setSelectedAnnotationGroupId?: (groupId: string) => void;
   setHoveredAnnotationGroupId?: (groupId: string) => void;
-  openComment?: (commentSelection: CommentSelection<T>) => void;
+  editComment?: (commentId: string) => void;
 
   hideInlineComments?: boolean;
 };
diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index e7835228..005bbb31 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -10,6 +10,7 @@ import {
   AnnotationGroupWithUIState,
   AnnotationWithUIState,
   DiffWithProvenance,
+  CommentEditingState,
 } from "./schema";
 import { HasVersionControlMetadata } from "./schema";
 
@@ -50,7 +51,9 @@ export function useAnnotations({
   hoveredAnnotationGroupId: string | undefined;
   setHoveredAnnotationGroupId: (id: string) => void;
   setSelectedAnnotationGroupId: (id: string) => void;
+  editComment: (commentId: string) => void;
 } {
+  const [commmentIdBeingEdited, setCommentIdBeingEdited] = useState<string>();
   const [hoveredState, setHoveredState] = useState<HoverState<unknown>>();
   const [selectedState, setSelectedState] = useState<SelectionState<unknown>>();
 
@@ -372,6 +375,7 @@ export function useAnnotations({
     () =>
       annotationGroups.map((annotationGroup) => {
         const id = getAnnotationGroupId(annotationGroup);
+
         return {
           ...annotationGroup,
           state:
@@ -380,6 +384,13 @@ export function useAnnotations({
               : selectedAnnotationGroupIds.has(id)
               ? "focused"
               : "neutral",
+          comment:
+            commmentIdBeingEdited &&
+            annotationGroup.discussion.comments.some(
+              (comment) => comment.id === commmentIdBeingEdited
+            )
+              ? { type: "edit", commentId: commmentIdBeingEdited }
+              : undefined,
         };
       }),
     [annotationGroups, expandedAnnotationGroupId, selectedAnnotationGroupIds]
@@ -395,6 +406,7 @@ export function useAnnotations({
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
+    editComment: setCommentIdBeingEdited,
   };
 }
 
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index e517d0a2..4d842549 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -41,6 +41,7 @@ type ReviewSidebarProps = {
   setHoveredAnnotationGroupId: (id: string) => void;
   isCommentInputFocused: boolean;
   setIsCommentInputFocused: (isFocused: boolean) => void;
+  editComment: (commentId: string) => void;
 };
 
 export type PositionMap = Record<string, { top: number; bottom: number }>;
@@ -57,6 +58,7 @@ export const ReviewSidebar = React.memo(
     setHoveredAnnotationGroupId,
     isCommentInputFocused,
     setIsCommentInputFocused,
+    editComment,
   }: ReviewSidebarProps) => {
     const [pendingCommentText, setPendingCommentText] = useState("");
     const [annotationGroupIdOfActiveReply, setAnnotationGroupIdOfActiveReply] =
@@ -195,6 +197,7 @@ export const ReviewSidebar = React.memo(
                     );
                   }
                 }}
+                editComment={editComment}
                 hasNext={index < annotationGroups.length - 1}
                 hasPrev={index > 0}
               />
@@ -263,6 +266,7 @@ export interface AnnotationGroupViewProps {
   hasPrev: boolean;
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
+  editComment: (commentId: string) => void;
 }
 
 export const AnnotationGroupView = forwardRef<
@@ -277,10 +281,11 @@ export const AnnotationGroupView = forwardRef<
       annotationGroup,
       setIsHovered,
       setIsSelected,
-      onSelectNext,
-      onSelectPrev,
       hasNext,
       hasPrev,
+      onSelectNext,
+      onSelectPrev,
+      editComment,
     }: AnnotationGroupViewProps,
     ref
   ) => {
@@ -322,10 +327,21 @@ export const AnnotationGroupView = forwardRef<
 
     const onUpdateCommentContentWithId = (id: string, content: string) => {
       handle.change((doc) => {
-        const comment = doc.discussions[
+        const index = doc.discussions[
           annotationGroup.discussion.id
-        ].comments.find((comment) => comment.id === id);
-        comment.content = content;
+        ].comments.findIndex((comment) => comment.id === id);
+
+        A.updateText(
+          doc,
+          [
+            "discussions",
+            annotationGroup.discussion.id,
+            "comments",
+            index,
+            "content",
+          ],
+          content
+        );
       });
     };
 
@@ -441,6 +457,13 @@ export const AnnotationGroupView = forwardRef<
                 onChange={(content) =>
                   onUpdateCommentContentWithId(comment.id, content)
                 }
+                isBeingEdited={
+                  annotationGroup.comment?.type === "edit" &&
+                  annotationGroup.comment?.commentId === comment.id
+                }
+                setIsBeingEdited={(isBeingEdited) =>
+                  editComment(isBeingEdited ? comment.id : undefined)
+                }
               />
             ))}
           </div>
@@ -474,17 +497,18 @@ export const AnnotationGroupView = forwardRef<
 const DiscussionCommentView = ({
   comment,
   docWithAssetsHandle,
+  isBeingEdited,
   onChange,
+  setIsBeingEdited,
 }: {
   comment: DiscussionComment;
   docWithAssetsHandle: DocHandle<HasAssets>;
+  isBeingEdited: boolean;
   onChange: (value: string) => void;
-  /*  isBeingEdited: boolean;
-  setIsBeingEdited: (isBeingEdited: boolean) => void; */
+  setIsBeingEdited: (isBeingEdited: boolean) => void;
 }) => {
   const [isBeingHovered, setIsBeingHovered] = useState(false);
   const [updatedText, setUpdatedContent] = useState<string>();
-  const [isBeingEdited, setIsBeingEdited] = useState(false);
   const account = useCurrentAccount();
   const isOwnComment = account?.contactHandle.url === comment.contactUrl;
 
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index a768d501..3bd0537f 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -337,6 +337,7 @@ export const VersionControlEditor: React.FC<{
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
+    editComment,
   } = useAnnotations({
     doc: activeDoc,
     datatypeId,
@@ -586,6 +587,7 @@ export const VersionControlEditor: React.FC<{
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
                   hideInlineComments={true}
+                  editComment={editComment}
                 />
               ) : (
                 <DocEditor
@@ -601,6 +603,7 @@ export const VersionControlEditor: React.FC<{
                   setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
                   setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                   hideInlineComments={!!sidebarMode}
+                  editComment={editComment}
                 />
               )}
             </div>
@@ -669,6 +672,7 @@ export const VersionControlEditor: React.FC<{
                 setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                 isCommentInputFocused={isCommentInputFocused}
                 setIsCommentInputFocused={setIsCommentInputFocused}
+                editComment={editComment}
               />
             )}
           </div>
@@ -695,6 +699,7 @@ const DocEditor = <T, V>({
   setHoveredAnchor,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
+  editComment,
 }: EditorPropsWithDatatype<T, V>) => {
   // Currently we don't have a toolpicker so we just show the first tool for the doc type
   const Component = TOOLS[datatypeId][0].editorComponent;
@@ -711,6 +716,7 @@ const DocEditor = <T, V>({
       setHoveredAnchor={setHoveredAnchor}
       setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
       setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+      editComment={editComment}
     />
   );
 };
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 69986fff..e82830e2 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -86,9 +86,13 @@ export type AnnotationGroup<T, V> = {
   discussion?: Discussion<T>;
 };
 
+export type CommentEditingState =
+  | { type: "create" }
+  | { type: "edit"; commentId: string };
+
 export type AnnotationGroupWithUIState<T, V> = AnnotationGroup<T, V> & {
   state: "focused" | "expanded" | "neutral";
-  openCommentId: string;
+  comment?: CommentEditingState;
 };
 
 export type Discussable<T> = {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 9f89a03b..98942522 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -13,6 +13,7 @@ export const CommentsSidebar = ({
   annotationGroupsWithPosition,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
+  editComment,
 }: {
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
@@ -20,6 +21,7 @@ export const CommentsSidebar = ({
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
+  editComment: (commentId: string) => void;
 }) => {
   return (
     <div>
@@ -67,6 +69,7 @@ export const CommentsSidebar = ({
               }}
               hasNext={index < annotationGroupsWithPosition.length - 1}
               hasPrev={index > 0}
+              editComment={editComment}
             />
           </div>
         );
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 0e5dc5b3..945b5a7b 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -33,6 +33,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     hideInlineComments,
     setSelectedAnnotationGroupId,
     setHoveredAnnotationGroupId,
+    editComment,
   } = props;
 
   const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
@@ -120,6 +121,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               annotationGroupsWithPosition={annotationGroupsWithPosition}
               setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
               setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+              editComment={editComment}
             />
           </div>
         )}

From b0ddc33bb89af08d2610e6f0c7e7b45e5350aa11 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Wed, 22 May 2024 14:26:40 +0200
Subject: [PATCH 23/59] Allow to reply to comments

---
 src/os/tools.ts                               |   1 +
 src/os/versionControl/annotations.ts          |  34 +++-
 .../components/ReviewSidebar.tsx              | 155 +++++++++++-------
 .../components/VersionControlEditor.tsx       |   8 +-
 src/os/versionControl/schema.ts               |   4 +-
 .../essay/components/CommentsSidebar.tsx      |   5 +-
 src/tools/essay/components/EssayEditor.tsx    |   2 +
 7 files changed, 141 insertions(+), 68 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index d0e63b6e..b257bbb8 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -43,6 +43,7 @@ export type EditorProps<T, V> = {
   setSelectedAnnotationGroupId?: (groupId: string) => void;
   setHoveredAnnotationGroupId?: (groupId: string) => void;
   editComment?: (commentId: string) => void;
+  createComment?: (groupIdOrAnchors: string | T[]) => void;
 
   hideInlineComments?: boolean;
 };
diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 005bbb31..c537ac6f 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -10,7 +10,6 @@ import {
   AnnotationGroupWithUIState,
   AnnotationWithUIState,
   DiffWithProvenance,
-  CommentEditingState,
 } from "./schema";
 import { HasVersionControlMetadata } from "./schema";
 
@@ -32,7 +31,7 @@ type ActiveGroupState = {
 type SelectionState<T> = SelectedAnchorsState<T> | ActiveGroupState;
 type HoverState<T> = HoverAnchorState<T> | ActiveGroupState;
 
-export function useAnnotations({
+export function useAnnotations<T>({
   doc,
   datatypeId,
   diff,
@@ -52,11 +51,23 @@ export function useAnnotations({
   setHoveredAnnotationGroupId: (id: string) => void;
   setSelectedAnnotationGroupId: (id: string) => void;
   editComment: (commentId: string) => void;
+  createComment: (commentId: string) => void;
 } {
-  const [commmentIdBeingEdited, setCommentIdBeingEdited] = useState<string>();
+  const [commentState, setCommentState] = useState<
+    | { type: "edit"; commentId: string }
+    | { type: "create"; target: string | T[] }
+  >();
   const [hoveredState, setHoveredState] = useState<HoverState<unknown>>();
   const [selectedState, setSelectedState] = useState<SelectionState<unknown>>();
 
+  const editComment = useStaticCallback((commentId: string) => {
+    setCommentState({ type: "edit", commentId });
+  });
+
+  const createComment = useStaticCallback((target: string | T[]) => {
+    setCommentState({ type: "create", target });
+  });
+
   const setHoveredAnchor = useStaticCallback((anchor: unknown) => {
     // ingore set if it doesn't change the current state
     // the document editor might call setHoveredAnchors multiple times, even if it hasn't changed
@@ -385,12 +396,18 @@ export function useAnnotations({
               ? "focused"
               : "neutral",
           comment:
-            commmentIdBeingEdited &&
+            commentState &&
+            // comment in this annotation group is being edited
+            (commentState.type === "edit" &&
             annotationGroup.discussion.comments.some(
-              (comment) => comment.id === commmentIdBeingEdited
+              (comment) => comment.id === commentState.commentId
             )
-              ? { type: "edit", commentId: commmentIdBeingEdited }
-              : undefined,
+              ? commentState
+              : // a new comment is being created on this annotation group
+              commentState.type === "create" &&
+                commentState.target === annotationGroup.discussion.id
+              ? { type: "create" }
+              : undefined),
         };
       }),
     [annotationGroups, expandedAnnotationGroupId, selectedAnnotationGroupIds]
@@ -406,7 +423,8 @@ export function useAnnotations({
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
-    editComment: setCommentIdBeingEdited,
+    editComment,
+    createComment,
   };
 }
 
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 4d842549..dae2aeca 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -19,8 +19,8 @@ import {
   HighlightAnnotation,
 } from "@/os/versionControl/schema";
 import { next as A, uuid } from "@automerge/automerge";
-import { DocHandle } from "@automerge/automerge-repo";
-import { Check, PencilIcon, XIcon } from "lucide-react";
+import { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
+import { Check, PencilIcon, XIcon, MessageSquare } from "lucide-react";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
 import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
@@ -42,6 +42,7 @@ type ReviewSidebarProps = {
   isCommentInputFocused: boolean;
   setIsCommentInputFocused: (isFocused: boolean) => void;
   editComment: (commentId: string) => void;
+  createComment: (target: string | unknown[]) => void;
 };
 
 export type PositionMap = Record<string, { top: number; bottom: number }>;
@@ -59,6 +60,7 @@ export const ReviewSidebar = React.memo(
     isCommentInputFocused,
     setIsCommentInputFocused,
     editComment,
+    createComment,
   }: ReviewSidebarProps) => {
     const [pendingCommentText, setPendingCommentText] = useState("");
     const [annotationGroupIdOfActiveReply, setAnnotationGroupIdOfActiveReply] =
@@ -91,45 +93,6 @@ export const ReviewSidebar = React.memo(
       }));
     }, [selectedAnchors, doc, datatypeId]);
 
-    const addCommentToAnnotationGroup = (
-      annotationGroup: AnnotationGroup<unknown, unknown>,
-      content: string
-    ) => {
-      setAnnotationGroupIdOfActiveReply(undefined);
-
-      changeDoc((doc) => {
-        let discussions = doc.discussions;
-
-        // convert docs without discussions
-        if (!discussions) {
-          doc.discussions = {};
-          discussions = doc.discussions;
-        }
-
-        let discussionId = annotationGroup?.discussion?.id;
-
-        if (!discussionId) {
-          discussionId = uuid();
-          discussions[discussionId] = {
-            id: discussionId,
-            heads: A.getHeads(doc),
-            comments: [],
-            resolved: false,
-            anchors: annotationGroup.annotations.map(
-              (annotation) => annotation.anchor
-            ),
-          };
-        }
-
-        discussions[discussionId].comments.push({
-          id: uuid(),
-          content,
-          contactUrl: account.contactHandle.url,
-          timestamp: Date.now(),
-        });
-      });
-    };
-
     const createDiscussion = (content: string) => {
       setPendingCommentText("");
 
@@ -198,6 +161,7 @@ export const ReviewSidebar = React.memo(
                   }
                 }}
                 editComment={editComment}
+                createComment={createComment}
                 hasNext={index < annotationGroups.length - 1}
                 hasPrev={index > 0}
               />
@@ -267,6 +231,7 @@ export interface AnnotationGroupViewProps {
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
   editComment: (commentId: string) => void;
+  createComment: (target: string | unknown[]) => void;
 }
 
 export const AnnotationGroupView = forwardRef<
@@ -286,6 +251,7 @@ export const AnnotationGroupView = forwardRef<
       onSelectNext,
       onSelectPrev,
       editComment,
+      createComment,
     }: AnnotationGroupViewProps,
     ref
   ) => {
@@ -294,6 +260,7 @@ export const AnnotationGroupView = forwardRef<
     const localRef = useRef(null); // Use useRef to create a local ref
     const isExpanded = annotationGroup.state === "expanded";
     const isFocused = annotationGroup.state !== "neutral";
+    const account = useCurrentAccount();
 
     const setRef = (element: HTMLDivElement) => {
       localRef.current = element; // Assign the element to the local ref
@@ -325,6 +292,10 @@ export const AnnotationGroupView = forwardRef<
       });
     };
 
+    const onReply = () => {
+      createComment(getAnnotationGroupId(annotationGroup));
+    };
+
     const onUpdateCommentContentWithId = (id: string, content: string) => {
       handle.change((doc) => {
         const index = doc.discussions[
@@ -345,6 +316,40 @@ export const AnnotationGroupView = forwardRef<
       });
     };
 
+    const addCommentToAnnotationGroup = (content: string) => {
+      handle.change((doc) => {
+        let discussions = doc.discussions;
+
+        // convert docs without discussions
+        if (!discussions) {
+          doc.discussions = {};
+          discussions = doc.discussions;
+        }
+
+        let discussionId = annotationGroup.discussion?.id;
+
+        if (!discussionId) {
+          discussionId = uuid();
+          discussions[discussionId] = {
+            id: discussionId,
+            heads: A.getHeads(doc),
+            comments: [],
+            resolved: false,
+            anchors: annotationGroup.annotations.map(
+              (annotation) => annotation.anchor
+            ),
+          };
+        }
+
+        discussions[discussionId].comments.push({
+          id: uuid(),
+          content,
+          contactUrl: account.contactHandle.url,
+          timestamp: Date.now(),
+        });
+      });
+    };
+
     // handle keyboard shortcuts
     /*
      * k / ctrl + p / cmd + p : select previous discussion
@@ -451,10 +456,12 @@ export const AnnotationGroupView = forwardRef<
 
             {annotationGroup.discussion?.comments.map((comment, index) => (
               <DiscussionCommentView
-                comment={comment}
+                contactUrl={comment.contactUrl}
+                timestamp={comment.timestamp}
+                content={comment.content}
                 key={comment.id}
                 docWithAssetsHandle={handle}
-                onChange={(content) =>
+                onChangeContent={(content) =>
                   onUpdateCommentContentWithId(comment.id, content)
                 }
                 isBeingEdited={
@@ -466,13 +473,43 @@ export const AnnotationGroupView = forwardRef<
                 }
               />
             ))}
+
+            {annotationGroup.comment?.type === "create" && (
+              <DiscussionCommentView
+                contactUrl={account?.contactHandle.url}
+                docWithAssetsHandle={handle}
+                onChangeContent={(content) => {
+                  addCommentToAnnotationGroup(content);
+                  createComment(undefined);
+                }}
+                isBeingEdited={true}
+                setIsBeingEdited={() => {
+                  createComment(undefined);
+                }}
+              />
+            )}
           </div>
 
           <div
             className={`overflow-hidden transition-all flex items-center gap-2 ${
-              isExpanded ? "h-[43px] opacity-100 mt-2" : "h-[0px] opacity-0"
+              isExpanded && !annotationGroup.comment
+                ? "h-[43px] opacity-100 mt-2"
+                : "h-[0px] opacity-0"
             }`}
           >
+            <Button
+              variant="ghost"
+              className="select-none px-2 flex flex-col w-fi"
+              onClick={onReply}
+            >
+              <div className="flex text-gray-600 gap-2">
+                <MessageSquare size={16} /> Reply
+              </div>
+              <span className="text-gray-400 text-xs w-full text-center">
+                (⌘ + ⏎)
+              </span>
+            </Button>
+
             {annotationGroup.discussion && (
               <Button
                 variant="ghost"
@@ -495,22 +532,26 @@ export const AnnotationGroupView = forwardRef<
 );
 
 const DiscussionCommentView = ({
-  comment,
+  contactUrl,
+  timestamp,
+  content = "",
   docWithAssetsHandle,
+  onChangeContent,
   isBeingEdited,
-  onChange,
   setIsBeingEdited,
 }: {
-  comment: DiscussionComment;
+  contactUrl: AutomergeUrl;
+  timestamp?: number;
+  content?: string;
+  onChangeContent: (value: string) => void;
   docWithAssetsHandle: DocHandle<HasAssets>;
   isBeingEdited: boolean;
-  onChange: (value: string) => void;
   setIsBeingEdited: (isBeingEdited: boolean) => void;
 }) => {
   const [isBeingHovered, setIsBeingHovered] = useState(false);
   const [updatedText, setUpdatedContent] = useState<string>();
   const account = useCurrentAccount();
-  const isOwnComment = account?.contactHandle.url === comment.contactUrl;
+  const isOwnComment = account?.contactHandle.url === contactUrl;
 
   return (
     <div
@@ -520,11 +561,13 @@ const DiscussionCommentView = ({
     >
       <div className="flex items-center justify-between text-sm">
         <div className="flex items-center gap-2">
-          <ContactAvatar url={comment.contactUrl} showName={true} size="sm" />
+          <ContactAvatar url={contactUrl} showName={true} size="sm" />
 
-          <div className="text-xs text-gray-400">
-            {getRelativeTimeString(comment.timestamp)}
-          </div>
+          {timestamp !== undefined && (
+            <div className="text-xs text-gray-400">
+              {getRelativeTimeString(timestamp)}
+            </div>
+          )}
         </div>
 
         {isOwnComment && (
@@ -534,7 +577,7 @@ const DiscussionCommentView = ({
             className={!isBeingHovered || isBeingEdited ? "invisible" : ""}
             onClick={() => {
               setIsBeingEdited(true);
-              setUpdatedContent(comment.content);
+              setUpdatedContent(content);
             }}
           >
             <PencilIcon size={14} />
@@ -551,7 +594,7 @@ const DiscussionCommentView = ({
           }`}
         >
           <MarkdownInput
-            value={comment.content}
+            value={content}
             onChange={isBeingEdited ? setUpdatedContent : undefined}
             docWithAssetsHandle={docWithAssetsHandle}
           />
@@ -563,7 +606,7 @@ const DiscussionCommentView = ({
               variant="ghost"
               className="py-0 px-2"
               onClick={() => {
-                onChange(updatedText);
+                onChangeContent(updatedText);
                 setIsBeingEdited(false);
                 setUpdatedContent(undefined);
               }}
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 3bd0537f..4d53e2e7 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -338,6 +338,7 @@ export const VersionControlEditor: React.FC<{
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
     editComment,
+    createComment,
   } = useAnnotations({
     doc: activeDoc,
     datatypeId,
@@ -586,8 +587,9 @@ export const VersionControlEditor: React.FC<{
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
-                  hideInlineComments={true}
+                  hideInlineComments={!!sidebarMode}
                   editComment={editComment}
+                  createComment={createComment}
                 />
               ) : (
                 <DocEditor
@@ -604,6 +606,7 @@ export const VersionControlEditor: React.FC<{
                   setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                   hideInlineComments={!!sidebarMode}
                   editComment={editComment}
+                  createComment={createComment}
                 />
               )}
             </div>
@@ -673,6 +676,7 @@ export const VersionControlEditor: React.FC<{
                 isCommentInputFocused={isCommentInputFocused}
                 setIsCommentInputFocused={setIsCommentInputFocused}
                 editComment={editComment}
+                createComment={createComment}
               />
             )}
           </div>
@@ -700,6 +704,7 @@ const DocEditor = <T, V>({
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
   editComment,
+  createComment,
 }: EditorPropsWithDatatype<T, V>) => {
   // Currently we don't have a toolpicker so we just show the first tool for the doc type
   const Component = TOOLS[datatypeId][0].editorComponent;
@@ -717,6 +722,7 @@ const DocEditor = <T, V>({
       setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
       setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
       editComment={editComment}
+      createComment={createComment}
     />
   );
 };
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index e82830e2..8b4e5a54 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -86,13 +86,13 @@ export type AnnotationGroup<T, V> = {
   discussion?: Discussion<T>;
 };
 
-export type CommentEditingState =
+export type CommentState =
   | { type: "create" }
   | { type: "edit"; commentId: string };
 
 export type AnnotationGroupWithUIState<T, V> = AnnotationGroup<T, V> & {
   state: "focused" | "expanded" | "neutral";
-  comment?: CommentEditingState;
+  comment?: CommentState;
 };
 
 export type Discussable<T> = {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 98942522..47ea07d6 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -1,6 +1,6 @@
 import { AnnotationGroupWithPosition } from "../utils";
 
-import { MarkdownDoc } from "@/datatypes/markdown";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/markdown";
 import { getAnnotationGroupId } from "@/os/versionControl/annotations";
 import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
 import { DocHandle } from "@automerge/automerge-repo";
@@ -14,6 +14,7 @@ export const CommentsSidebar = ({
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
   editComment,
+  createComment,
 }: {
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
@@ -22,6 +23,7 @@ export const CommentsSidebar = ({
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
   editComment: (commentId: string) => void;
+  createComment: (target: string | MarkdownDocAnchor[]) => void;
 }) => {
   return (
     <div>
@@ -70,6 +72,7 @@ export const CommentsSidebar = ({
               hasNext={index < annotationGroupsWithPosition.length - 1}
               hasPrev={index > 0}
               editComment={editComment}
+              createComment={createComment}
             />
           </div>
         );
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 945b5a7b..4368e1f0 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -34,6 +34,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     setSelectedAnnotationGroupId,
     setHoveredAnnotationGroupId,
     editComment,
+    createComment,
   } = props;
 
   const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
@@ -122,6 +123,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
               setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
               editComment={editComment}
+              createComment={createComment}
             />
           </div>
         )}

From e3fffcebf57773887f9df55763559f037234b299 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 08:21:56 +0200
Subject: [PATCH 24/59] Add comment button

---
 .../components/ReviewSidebar.tsx              | 22 ++++-------
 .../essay/components/CodeMirrorEditor.tsx     | 27 +++++--------
 .../essay/components/CommentsSidebar.tsx      | 38 +++++++++++++++++--
 src/tools/essay/components/EssayEditor.tsx    |  8 ++--
 4 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index dae2aeca..530068df 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -1,30 +1,21 @@
 import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
 import { DATA_TYPES, DatatypeId } from "@/os/datatypes";
 import { useCurrentAccount } from "@/os/explorer/account";
 import { ContactAvatar } from "@/os/explorer/components/ContactAvatar";
 import { getRelativeTimeString } from "@/os/lib/dates";
 import { AnnotationsViewProps, TOOLS } from "@/os/tools";
 import {
-  AnnotationGroup,
   AnnotationGroupWithUIState,
-  DiscussionComment,
   HasVersionControlMetadata,
   HighlightAnnotation,
 } from "@/os/versionControl/schema";
+import { HasAssets } from "@/tools/essay/assets";
+import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
 import { next as A, uuid } from "@automerge/automerge";
 import { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
-import { Check, PencilIcon, XIcon, MessageSquare } from "lucide-react";
+import { Check, MessageSquare, PencilIcon, XIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
-import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
-import { HasAssets } from "@/tools/essay/assets";
 
 type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
@@ -164,6 +155,7 @@ export const ReviewSidebar = React.memo(
                 createComment={createComment}
                 hasNext={index < annotationGroups.length - 1}
                 hasPrev={index > 0}
+                enableScrollSync
               />
             );
           })}
@@ -228,6 +220,7 @@ export interface AnnotationGroupViewProps {
   onSelectPrev: () => void;
   hasNext: boolean;
   hasPrev: boolean;
+  enableScrollSync?: boolean; // todo: this shouldn't be a flag
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
   editComment: (commentId: string) => void;
@@ -252,6 +245,7 @@ export const AnnotationGroupView = forwardRef<
       onSelectPrev,
       editComment,
       createComment,
+      enableScrollSync,
     }: AnnotationGroupViewProps,
     ref
   ) => {
@@ -407,10 +401,10 @@ export const AnnotationGroupView = forwardRef<
     //    If it's already fully visible nothing happens; but if it's only
     //    partially visible then this makes it fully visible.
     useEffect(() => {
-      if (isExpanded) {
+      if (isExpanded && enableScrollSync) {
         localRef.current?.scrollIntoView({ behavior: "smooth" });
       }
-    }, [isExpanded]);
+    }, [isExpanded, enableScrollSync]);
 
     return (
       <div
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 502d4f08..7b024e7e 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -40,7 +40,6 @@ import { tableOfContentsPreviewPlugin } from "../codemirrorPlugins/tableOfConten
 import { essayTheme, markdownStyles } from "../codemirrorPlugins/theme";
 
 import { AnnotationWithUIState } from "@/os/versionControl/schema";
-import { getCursorSafely } from "@/os/versionControl/utils";
 import { useRepo } from "@automerge/automerge-repo-react-hooks";
 import { AssetsDoc, HasAssets } from "../assets";
 import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMarkdownLinks";
@@ -157,6 +156,7 @@ export type MarkdownDocEditorProps = {
   editorContainer: HTMLDivElement;
   handle: DocHandle<MarkdownDoc>;
   path: A.Prop[];
+  setSelection?: (selection: TextSelection) => void;
   setView?: (view: EditorView) => void;
   setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
   readOnly?: boolean;
@@ -169,6 +169,7 @@ export function MarkdownDocEditor({
   editorContainer,
   handle,
   path,
+  setSelection = () => {},
   setSelectedAnchors = () => {},
   setView = () => {},
   readOnly,
@@ -264,6 +265,14 @@ export function MarkdownDocEditor({
             const selection = view.state.selection.ranges[0];
 
             if (selection) {
+              setSelection({
+                from: selection.from,
+                to: selection.to,
+                yCoord:
+                  -1 * view.scrollDOM.getBoundingClientRect().top +
+                  view.coordsAtPos(selection.from).top,
+              });
+
               if (selection.from === selection.to) {
                 const cursorPos = selection.from;
                 const selectedAnnotationAnchors =
@@ -275,22 +284,6 @@ export function MarkdownDocEditor({
                   );
 
                 setSelectedAnchors(selectedAnnotationAnchors);
-              } else {
-                const docLength = view.state.doc.length;
-                setSelectedAnchors([
-                  {
-                    fromCursor: getCursorSafely(doc, path, selection.from),
-                    toCursor: getCursorSafely(
-                      doc,
-                      path,
-
-                      // we can't get a cursor to the end the document because cursors always point to characters
-                      // in the future we want to have a cursor API in Automerge that allows to point to a side of a character similar to marks
-                      // as a workaround for now we just point to the last character instead if the end of the document is selected
-                      selection.to === docLength ? docLength - 1 : selection.to
-                    ),
-                  },
-                ]);
               }
             } else {
               setSelectedAnchors([]);
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 47ea07d6..6d7715fa 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -1,10 +1,18 @@
 import { AnnotationGroupWithPosition } from "../utils";
 
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/markdown";
 import { getAnnotationGroupId } from "@/os/versionControl/annotations";
 import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
 import { DocHandle } from "@automerge/automerge-repo";
-import { SelectionRange } from "@codemirror/state";
+import { MessageCircle } from "lucide-react";
+import { TextSelection } from "./CodeMirrorEditor";
 
 export const CommentsSidebar = ({
   doc,
@@ -18,7 +26,7 @@ export const CommentsSidebar = ({
 }: {
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
-  selection: SelectionRange;
+  selection: TextSelection;
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
@@ -26,7 +34,7 @@ export const CommentsSidebar = ({
   createComment: (target: string | MarkdownDocAnchor[]) => void;
 }) => {
   return (
-    <div>
+    <div className="relative">
       {annotationGroupsWithPosition.map((annotationGroup, index) => {
         const id = getAnnotationGroupId(annotationGroup);
 
@@ -77,6 +85,30 @@ export const CommentsSidebar = ({
           </div>
         );
       })}
+
+      {selection && selection.from !== selection.to && (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={() => alert("add comment")}
+              className="absolute"
+              style={{
+                top: selection.yCoord + 24,
+                left: -60,
+              }}
+              asChild
+            >
+              <Button variant="ghost" size="sm">
+                <MessageCircle size={20} className="text-gray-400" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="flex gap-2">
+              <span>comment</span>
+              <span className="text-gray-400 text-xs">(⌘ + shift + M)</span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
     </div>
   );
 };
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 4368e1f0..cddf0ce7 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -1,7 +1,7 @@
 import { next as A } from "@automerge/automerge";
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import { useDocument, useHandle } from "@automerge/automerge-repo-react-hooks";
-import { MarkdownDocEditor } from "./CodeMirrorEditor";
+import { MarkdownDocEditor, TextSelection } from "./CodeMirrorEditor";
 
 import {
   MarkdownDoc,
@@ -37,6 +37,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     createComment,
   } = props;
 
+  const [selection, setSelection] = useState<TextSelection>();
   const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
   const handle = useHandle<MarkdownDoc>(docUrl);
   const [editorView, setEditorView] = useState<EditorView>();
@@ -95,7 +96,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
          */}
         <div className="flex @xl:mt-4 @xl:mr-2 @xl:mb-8 @xl:ml-[-100px] @4xl:ml-[-200px] w-full @xl:w-4/5  max-w-[722px]">
           <div
-            className={`w-full bg-white box-border rounded-md px-8 py-4 transition-all duration-500 ${
+            className={`w-full bg-white box-border rounded-md px-10 py-4 transition-all duration-500 ${
               readOnly
                 ? " border-2 border-dashed border-slate-400"
                 : "border border-gray-200 "
@@ -107,6 +108,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               path={["content"]}
               setSelectedAnchors={setSelectedAnchors}
               setView={setEditorView}
+              setSelection={setSelection}
               annotations={resolvedAnnotations}
               readOnly={readOnly ?? false}
               docHeads={docHeads}
@@ -118,7 +120,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
             <CommentsSidebar
               doc={doc}
               handle={handle}
-              selection={null}
+              selection={selection}
               annotationGroupsWithPosition={annotationGroupsWithPosition}
               setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
               setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}

From f8eaf77de1e7abc9bdc7a4f9fcf64f29c02af73b Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 10:10:06 +0200
Subject: [PATCH 25/59] create pending discussion group when comment is added
 on new range

---
 src/os/versionControl/annotations.ts          | 30 ++++++++++++++++---
 .../essay/components/CommentsSidebar.tsx      | 16 ++++++++--
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index c537ac6f..b6886e35 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -10,6 +10,7 @@ import {
   AnnotationGroupWithUIState,
   AnnotationWithUIState,
   DiffWithProvenance,
+  Discussion,
 } from "./schema";
 import { HasVersionControlMetadata } from "./schema";
 
@@ -31,6 +32,10 @@ type ActiveGroupState = {
 type SelectionState<T> = SelectedAnchorsState<T> | ActiveGroupState;
 type HoverState<T> = HoverAnchorState<T> | ActiveGroupState;
 
+type PendingDiscussion<T> = {
+  anchors: T[];
+};
+
 export function useAnnotations<T>({
   doc,
   datatypeId,
@@ -131,7 +136,8 @@ export function useAnnotations<T>({
 
     const patchesToAnnotations = DATA_TYPES[datatypeId].patchesToAnnotations;
     const valueOfAnchor = DATA_TYPES[datatypeId].valueOfAnchor ?? (() => null);
-    const discussions = Object.values(doc?.discussions ?? []);
+    const discussions: (PendingDiscussion<unknown> | Discussion<unknown>)[] =
+      Object.values(doc?.discussions ?? []);
 
     const discussionGroups: AnnotationGroup<unknown, unknown>[] = [];
     const highlightAnnotations: HighlightAnnotation<unknown, unknown>[] = [];
@@ -149,8 +155,15 @@ export function useAnnotations<T>({
     // these annotations are filtered out and won't be passed to the annotation grouping function
     const claimedAnnotations = new Set<Annotation<unknown, unknown>>();
 
+    // add pending discussion if a new comment is being created on an anchor selection
+    if (commentState?.type === "create" && Array.isArray(commentState.target)) {
+      discussions.push({
+        anchors: commentState.target,
+      });
+    }
+
     discussions.forEach((discussion) => {
-      if (discussion.resolved) {
+      if ("resolved" in discussion && discussion.resolved) {
         return;
       }
 
@@ -198,7 +211,7 @@ export function useAnnotations<T>({
         annotations: discussionHighlightAnnotations.concat(
           overlappingAnnotations
         ),
-        discussion,
+        discussion: "id" in discussion ? discussion : undefined,
       });
     });
 
@@ -256,6 +269,7 @@ export function useAnnotations<T>({
     isCommentInputFocused,
     datatypeId,
     discussionsWithoutAnchors,
+    commentState,
   ]);
 
   const {
@@ -405,7 +419,15 @@ export function useAnnotations<T>({
               ? commentState
               : // a new comment is being created on this annotation group
               commentState.type === "create" &&
-                commentState.target === annotationGroup.discussion.id
+                // matches target groupId ?
+                (commentState.target === annotationGroup?.discussion?.id ||
+                  // ... or target anchors ?
+                  (Array.isArray(commentState.target) &&
+                    commentState.target.length ===
+                      annotationGroup.annotations.length &&
+                    commentState.target.every((anchor, index) =>
+                      isEqual(anchor, annotationGroup.annotations[index].anchor)
+                    )))
               ? { type: "create" }
               : undefined),
         };
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 6d7715fa..33c34f7a 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -1,5 +1,5 @@
+import * as A from "@automerge/automerge/next";
 import { AnnotationGroupWithPosition } from "../utils";
-
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -90,7 +90,6 @@ export const CommentsSidebar = ({
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger
-              onClick={() => alert("add comment")}
               className="absolute"
               style={{
                 top: selection.yCoord + 24,
@@ -98,7 +97,18 @@ export const CommentsSidebar = ({
               }}
               asChild
             >
-              <Button variant="ghost" size="sm">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  createComment([
+                    {
+                      fromCursor: A.getCursor(doc, ["content"], selection.from),
+                      toCursor: A.getCursor(doc, ["content"], selection.to),
+                    },
+                  ]);
+                }}
+              >
                 <MessageCircle size={20} className="text-gray-400" />
               </Button>
             </TooltipTrigger>

From cf8ed4325485950ff6061f5c982735f874421df4 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 11:03:17 +0200
Subject: [PATCH 26/59] hide comment button if editor is not focused

---
 src/os/versionControl/annotations.ts          | 57 ++++++++++++-------
 .../essay/components/CodeMirrorEditor.tsx     | 11 ++++
 .../essay/components/CommentsSidebar.tsx      |  4 +-
 src/tools/essay/components/EssayEditor.tsx    |  3 +
 4 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index b6886e35..0409197c 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -71,6 +71,7 @@ export function useAnnotations<T>({
 
   const createComment = useStaticCallback((target: string | T[]) => {
     setCommentState({ type: "create", target });
+    setSelectedAnnotationGroupId(undefined);
   });
 
   const setHoveredAnchor = useStaticCallback((anchor: unknown) => {
@@ -401,35 +402,47 @@ export function useAnnotations<T>({
       annotationGroups.map((annotationGroup) => {
         const id = getAnnotationGroupId(annotationGroup);
 
+        let isCommentBeingCreated = false;
+        let isCommentBeingEdited = false;
+
+        if (commentState) {
+          switch (commentState.type) {
+            case "create":
+              isCommentBeingCreated =
+                // matches target groupId ?
+                commentState.target === annotationGroup?.discussion?.id ||
+                // ... or target anchors ?
+                (Array.isArray(commentState.target) &&
+                  commentState.target.length ===
+                    annotationGroup.annotations.length &&
+                  commentState.target.every((anchor, index) =>
+                    isEqual(anchor, annotationGroup.annotations[index].anchor)
+                  ));
+              break;
+            case "edit":
+              isCommentBeingEdited =
+                commentState.type === "edit" &&
+                annotationGroup.discussion.comments.some(
+                  (comment) => comment.id === commentState.commentId
+                );
+              break;
+          }
+        }
+
         return {
           ...annotationGroup,
           state:
-            expandedAnnotationGroupId === id
+            expandedAnnotationGroupId === id ||
+            (!expandedAnnotationGroupId && isCommentBeingCreated)
               ? "expanded"
               : selectedAnnotationGroupIds.has(id)
               ? "focused"
               : "neutral",
-          comment:
-            commentState &&
-            // comment in this annotation group is being edited
-            (commentState.type === "edit" &&
-            annotationGroup.discussion.comments.some(
-              (comment) => comment.id === commentState.commentId
-            )
-              ? commentState
-              : // a new comment is being created on this annotation group
-              commentState.type === "create" &&
-                // matches target groupId ?
-                (commentState.target === annotationGroup?.discussion?.id ||
-                  // ... or target anchors ?
-                  (Array.isArray(commentState.target) &&
-                    commentState.target.length ===
-                      annotationGroup.annotations.length &&
-                    commentState.target.every((anchor, index) =>
-                      isEqual(anchor, annotationGroup.annotations[index].anchor)
-                    )))
-              ? { type: "create" }
-              : undefined),
+          comment: isCommentBeingEdited
+            ? commentState
+            : isCommentBeingCreated
+            ? { type: "create" }
+            : undefined,
         };
       }),
     [annotationGroups, expandedAnnotationGroupId, selectedAnnotationGroupIds]
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 7b024e7e..268182f3 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -157,6 +157,7 @@ export type MarkdownDocEditorProps = {
   handle: DocHandle<MarkdownDoc>;
   path: A.Prop[];
   setSelection?: (selection: TextSelection) => void;
+  setHasFocus?: (hasFocus) => void;
   setView?: (view: EditorView) => void;
   setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
   readOnly?: boolean;
@@ -170,6 +171,7 @@ export function MarkdownDocEditor({
   handle,
   path,
   setSelection = () => {},
+  setHasFocus = () => {},
   setSelectedAnchors = () => {},
   setView = () => {},
   readOnly,
@@ -208,6 +210,8 @@ export function MarkdownDocEditor({
     const docAtHeads = docHeads ? A.view(doc, docHeads) : doc;
     const source = docAtHeads.content; // this should use path
 
+    let previousHasFocus = false;
+
     const view = new EditorView({
       doc: source,
       extensions: [
@@ -259,6 +263,13 @@ export function MarkdownDocEditor({
         try {
           view.update([transaction]);
 
+          if (view.hasFocus !== previousHasFocus) {
+            // hack: delay focus update because otherwise click handlers don't work on elements
+            // that are hidden if the editor is not focused, because blur is triggered before click
+            setTimeout(() => setHasFocus(view.hasFocus), 100);
+            previousHasFocus = view.hasFocus;
+          }
+
           // only update selection if it has changed and the editor is focused
           // if the editor is not focused it can still trigger selection changes which resets selections made through the review sidebar
           if (transaction.newSelection && view.hasFocus) {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 33c34f7a..d4eb083c 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -18,6 +18,7 @@ export const CommentsSidebar = ({
   doc,
   handle,
   selection,
+  hasEditorFocus,
   annotationGroupsWithPosition,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
@@ -27,6 +28,7 @@ export const CommentsSidebar = ({
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
   selection: TextSelection;
+  hasEditorFocus: boolean;
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
@@ -86,7 +88,7 @@ export const CommentsSidebar = ({
         );
       })}
 
-      {selection && selection.from !== selection.to && (
+      {selection && selection.from !== selection.to && hasEditorFocus && (
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index cddf0ce7..bc2b4394 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -37,6 +37,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     createComment,
   } = props;
 
+  const [hasEditorFocus, setHasEditorFocus] = useState(false);
   const [selection, setSelection] = useState<TextSelection>();
   const [doc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
   const handle = useHandle<MarkdownDoc>(docUrl);
@@ -109,6 +110,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               setSelectedAnchors={setSelectedAnchors}
               setView={setEditorView}
               setSelection={setSelection}
+              setHasFocus={setHasEditorFocus}
               annotations={resolvedAnnotations}
               readOnly={readOnly ?? false}
               docHeads={docHeads}
@@ -121,6 +123,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
               doc={doc}
               handle={handle}
               selection={selection}
+              hasEditorFocus={hasEditorFocus}
               annotationGroupsWithPosition={annotationGroupsWithPosition}
               setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
               setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}

From d6eeee52d35bc4bdae74c1e7c099f7ceefa4197b Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 11:05:52 +0200
Subject: [PATCH 27/59] allow to comment on end of document

---
 src/tools/essay/components/CommentsSidebar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index d4eb083c..5b8542e4 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -103,10 +103,14 @@ export const CommentsSidebar = ({
                 variant="ghost"
                 size="sm"
                 onClick={() => {
+                  // todo: remove this once cursors can point to sides of characters
+                  // can't point after last character so we use the last character instead
+                  const to = Math.min(doc.content.length - 1, selection.to);
+
                   createComment([
                     {
                       fromCursor: A.getCursor(doc, ["content"], selection.from),
-                      toCursor: A.getCursor(doc, ["content"], selection.to),
+                      toCursor: A.getCursor(doc, ["content"], to),
                     },
                   ]);
                 }}

From 82cf2fc4d6c025f4366f22f2c592dfc1c16e8466 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 11:30:53 +0200
Subject: [PATCH 28/59] Add comment button in sidebar

---
 .../components/ReviewSidebar.tsx              | 116 +-----------------
 .../essay/components/CodeMirrorEditor.tsx     |  18 ++-
 .../essay/components/CommentsSidebar.tsx      | 101 +++++++--------
 src/tools/essay/components/EssayEditor.tsx    |  30 ++---
 4 files changed, 89 insertions(+), 176 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 530068df..b269cee0 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -21,14 +21,9 @@ type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
   handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
   datatypeId: DatatypeId;
-  annotationGroups: AnnotationGroupWithUIState<unknown, unknown>[];
   selectedAnchors: unknown[];
-  changeDoc: (
-    changeFn: (doc: HasVersionControlMetadata<unknown, unknown>) => void
-  ) => void;
-  onChangeCommentPositionMap: (map: PositionMap) => void;
+  annotationGroups: AnnotationGroupWithUIState<unknown, unknown>[];
   setSelectedAnnotationGroupId: (id: string) => void;
-  hoveredAnnotationGroupId: string | undefined;
   setHoveredAnnotationGroupId: (id: string) => void;
   isCommentInputFocused: boolean;
   setIsCommentInputFocused: (isFocused: boolean) => void;
@@ -45,78 +40,11 @@ export const ReviewSidebar = React.memo(
     datatypeId,
     annotationGroups,
     selectedAnchors,
-    changeDoc,
     setSelectedAnnotationGroupId,
     setHoveredAnnotationGroupId,
-    isCommentInputFocused,
-    setIsCommentInputFocused,
     editComment,
     createComment,
   }: ReviewSidebarProps) => {
-    const [pendingCommentText, setPendingCommentText] = useState("");
-    const [annotationGroupIdOfActiveReply, setAnnotationGroupIdOfActiveReply] =
-      useState<string>();
-    const account = useCurrentAccount();
-
-    const [commentInputElement, setCommentInputElement] =
-      useState<HTMLTextAreaElement>();
-
-    // sync focus state back to text area
-    useEffect(() => {
-      if (commentInputElement && isCommentInputFocused) {
-        setTimeout(() => {
-          commentInputElement.focus();
-        }, 100); // hack : add a bit of a delay otherwise focusing the element doesn't work when the sidebar hasn't been opened before
-      }
-    }, [commentInputElement, isCommentInputFocused]);
-
-    const pendingAnnotationsForComment: HighlightAnnotation<
-      unknown,
-      unknown
-    >[] = useMemo(() => {
-      if (!doc) return [];
-      const valueOfAnchor =
-        DATA_TYPES[datatypeId].valueOfAnchor ?? (() => null);
-      return selectedAnchors.map((anchor) => ({
-        type: "highlighted",
-        anchor: [anchor],
-        value: valueOfAnchor(doc, anchor),
-      }));
-    }, [selectedAnchors, doc, datatypeId]);
-
-    const createDiscussion = (content: string) => {
-      setPendingCommentText("");
-
-      const discussionId = uuid();
-
-      changeDoc((doc) => {
-        let discussions = doc.discussions;
-
-        // convert docs without discussions
-        if (!discussions) {
-          doc.discussions = {};
-          discussions = doc.discussions;
-        }
-
-        discussions[discussionId] = {
-          id: discussionId,
-          heads: A.getHeads(doc),
-          comments: [
-            {
-              id: uuid(),
-              content,
-              contactUrl: account.contactHandle.url,
-              timestamp: Date.now(),
-            },
-          ],
-          resolved: false,
-          anchors: selectedAnchors,
-        };
-      });
-
-      setSelectedAnnotationGroupId(discussionId);
-    };
-
     return (
       <div className="h-full flex flex-col">
         <div className="bg-gray-50 flex-1 p-2 flex flex-col z-20 m-h-[100%] overflow-y-auto overflow-x-visible">
@@ -160,50 +88,16 @@ export const ReviewSidebar = React.memo(
             );
           })}
         </div>
-        <div className="bg-gray-50 z-10 px-2 py-4 flex flex-col gap-3 border-t border-gray-400 ">
-          {/* We only want to show the AnnotationsView when the comment input is focused.
-              But we can't let it mount/unmount because then some viewers (eg TLDraw will steal
-              focus from the comment input. So instead we leave it in the UI tree, but hidden */}
-          <div
-            className={`${
-              isCommentInputFocused ? "opacity-100" : "h-0 overflow-hidden"
-            }`}
-          >
-            <AnnotationsView
-              doc={doc}
-              handle={handle}
-              datatypeId={datatypeId}
-              annotations={pendingAnnotationsForComment}
-            />
-          </div>
-
-          <div
-            className="rounded bg-white shadow px-2"
-            onKeyDownCapture={(event) => {
-              if (event.key === "Enter" && event.metaKey) {
-                createDiscussion(pendingCommentText);
-                event.preventDefault();
-                event.stopPropagation();
-              }
-            }}
-            onFocus={() => setIsCommentInputFocused(true)}
-            onBlur={() => setIsCommentInputFocused(false)}
-          >
-            <MarkdownInput
-              value={pendingCommentText}
-              onChange={setPendingCommentText}
-              docWithAssetsHandle={handle}
-            />
-          </div>
 
+        <div className="bg-gray-50 z-10 px-2 py-4 flex flex-col gap-3 border-b border-gray-200 ">
           <Button
             variant="outline"
             onClick={() => {
-              createDiscussion(pendingCommentText);
+              createComment(selectedAnchors);
             }}
           >
-            Comment
-            <span className="text-gray-400 ml-2 text-xs">⌘⏎</span>
+            Comment {selectedAnchors.length > 0 ? "on selection" : ""}
+            <span className="text-gray-400 ml-2 text-xs">(⌘ + shift + m)</span>
           </Button>
         </div>
       </div>
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 268182f3..927f0e45 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -295,9 +295,23 @@ export function MarkdownDocEditor({
                   );
 
                 setSelectedAnchors(selectedAnnotationAnchors);
+              } else {
+                const docLength = view.state.doc.length;
+                setSelectedAnchors([
+                  {
+                    fromCursor: A.getCursor(doc, path, selection.from),
+                    toCursor: A.getCursor(
+                      doc,
+                      path,
+                      // todo: remove once cursors can point to sides of characters
+                      // we can't get a cursor to the end the document because cursors always point to characters
+                      // in the future we want to have a cursor API in Automerge that allows to point to a side of a character similar to marks
+                      // as a workaround for now we just point to the last character instead if the end of the document is selected
+                      selection.to === docLength ? docLength - 1 : selection.to
+                    ),
+                  },
+                ]);
               }
-            } else {
-              setSelectedAnchors([]);
             }
           }
         } catch (e) {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 5b8542e4..081814b0 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -19,6 +19,7 @@ export const CommentsSidebar = ({
   handle,
   selection,
   hasEditorFocus,
+  hideInlineComments,
   annotationGroupsWithPosition,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
@@ -29,6 +30,7 @@ export const CommentsSidebar = ({
   handle: DocHandle<MarkdownDoc>;
   selection: TextSelection;
   hasEditorFocus: boolean;
+  hideInlineComments: boolean;
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
@@ -37,56 +39,59 @@ export const CommentsSidebar = ({
 }) => {
   return (
     <div className="relative">
-      {annotationGroupsWithPosition.map((annotationGroup, index) => {
-        const id = getAnnotationGroupId(annotationGroup);
+      {!hideInlineComments &&
+        annotationGroupsWithPosition.map((annotationGroup, index) => {
+          const id = getAnnotationGroupId(annotationGroup);
 
-        return (
-          <div
-            key={id}
-            className={`absolute transition-all ease-in-out w-[350px] ${
-              annotationGroup.state === "expanded"
-                ? "z-50 shadow-sm border-gray-500"
-                : "z-0"
-            }`}
-            style={{
-              top: annotationGroup.yCoord,
-            }}
-          >
-            <AnnotationGroupView
-              doc={doc}
-              handle={handle}
-              annotationGroup={annotationGroup}
-              datatypeId="essay"
-              setIsHovered={(isHovered) => {
-                setHoveredAnnotationGroupId(isHovered ? id : undefined);
-              }}
-              setIsSelected={(isSelected) => {
-                setSelectedAnnotationGroupId(isSelected ? id : undefined);
-              }}
-              onSelectNext={() => {
-                const nextAnnotation = annotationGroupsWithPosition[index + 1];
-                if (nextAnnotation) {
-                  setSelectedAnnotationGroupId(
-                    getAnnotationGroupId(nextAnnotation)
-                  );
-                }
-              }}
-              onSelectPrev={() => {
-                const prevAnnotation = annotationGroupsWithPosition[index - 1];
-                if (prevAnnotation) {
-                  setSelectedAnnotationGroupId(
-                    getAnnotationGroupId(prevAnnotation)
-                  );
-                }
+          return (
+            <div
+              key={id}
+              className={`absolute transition-all ease-in-out w-[350px] ${
+                annotationGroup.state === "expanded"
+                  ? "z-50 shadow-sm border-gray-500"
+                  : "z-0"
+              }`}
+              style={{
+                top: annotationGroup.yCoord,
               }}
-              hasNext={index < annotationGroupsWithPosition.length - 1}
-              hasPrev={index > 0}
-              editComment={editComment}
-              createComment={createComment}
-            />
-          </div>
-        );
-      })}
+            >
+              <AnnotationGroupView
+                doc={doc}
+                handle={handle}
+                annotationGroup={annotationGroup}
+                datatypeId="essay"
+                setIsHovered={(isHovered) => {
+                  setHoveredAnnotationGroupId(isHovered ? id : undefined);
+                }}
+                setIsSelected={(isSelected) => {
+                  setSelectedAnnotationGroupId(isSelected ? id : undefined);
+                }}
+                onSelectNext={() => {
+                  const nextAnnotation =
+                    annotationGroupsWithPosition[index + 1];
+                  if (nextAnnotation) {
+                    setSelectedAnnotationGroupId(
+                      getAnnotationGroupId(nextAnnotation)
+                    );
+                  }
+                }}
+                onSelectPrev={() => {
+                  const prevAnnotation =
+                    annotationGroupsWithPosition[index - 1];
+                  if (prevAnnotation) {
+                    setSelectedAnnotationGroupId(
+                      getAnnotationGroupId(prevAnnotation)
+                    );
+                  }
+                }}
+                hasNext={index < annotationGroupsWithPosition.length - 1}
+                hasPrev={index > 0}
+                editComment={editComment}
+                createComment={createComment}
+              />
+            </div>
+          );
+        })}
 
       {selection && selection.from !== selection.to && hasEditorFocus && (
         <TooltipProvider delayDuration={0}>
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index bc2b4394..41024730 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -117,21 +117,21 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
             />
           </div>
         </div>
-        {!hideInlineComments && (
-          <div>
-            <CommentsSidebar
-              doc={doc}
-              handle={handle}
-              selection={selection}
-              hasEditorFocus={hasEditorFocus}
-              annotationGroupsWithPosition={annotationGroupsWithPosition}
-              setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
-              setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
-              editComment={editComment}
-              createComment={createComment}
-            />
-          </div>
-        )}
+
+        <div>
+          <CommentsSidebar
+            doc={doc}
+            hideInlineComments={hideInlineComments}
+            handle={handle}
+            selection={selection}
+            hasEditorFocus={hasEditorFocus}
+            annotationGroupsWithPosition={annotationGroupsWithPosition}
+            setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+            setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+            editComment={editComment}
+            createComment={createComment}
+          />
+        </div>
       </div>
     </div>
   );

From 70523cb7921fe182603056aed759df8cc246ee73 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 13:28:51 +0200
Subject: [PATCH 29/59] replace edit/create comment with setCommentState

---
 src/os/tools.ts                               |  4 +-
 src/os/versionControl/annotations.ts          | 21 ++--------
 .../components/ReviewSidebar.tsx              | 39 ++++++++++---------
 .../components/VersionControlEditor.tsx       | 18 +++------
 src/os/versionControl/schema.ts               |  8 +++-
 .../essay/components/CommentsSidebar.tsx      | 29 ++++++++------
 src/tools/essay/components/EssayEditor.tsx    |  6 +--
 7 files changed, 58 insertions(+), 67 deletions(-)

diff --git a/src/os/tools.ts b/src/os/tools.ts
index b257bbb8..f98fc7e5 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -11,6 +11,7 @@ import { AutomergeUrl } from "@automerge/automerge-repo";
 import {
   Annotation,
   AnnotationGroupWithUIState,
+  CommentState,
   HasVersionControlMetadata,
 } from "@/os/versionControl/schema";
 import { AnnotationWithUIState } from "@/os/versionControl/schema";
@@ -42,8 +43,7 @@ export type EditorProps<T, V> = {
   setHoveredAnchor?: (anchors: T) => void;
   setSelectedAnnotationGroupId?: (groupId: string) => void;
   setHoveredAnnotationGroupId?: (groupId: string) => void;
-  editComment?: (commentId: string) => void;
-  createComment?: (groupIdOrAnchors: string | T[]) => void;
+  setCommentState?: (state: CommentState<T>) => void;
 
   hideInlineComments?: boolean;
 };
diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 0409197c..23e92070 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -11,6 +11,7 @@ import {
   AnnotationWithUIState,
   DiffWithProvenance,
   Discussion,
+  CommentState,
 } from "./schema";
 import { HasVersionControlMetadata } from "./schema";
 
@@ -55,25 +56,12 @@ export function useAnnotations<T>({
   hoveredAnnotationGroupId: string | undefined;
   setHoveredAnnotationGroupId: (id: string) => void;
   setSelectedAnnotationGroupId: (id: string) => void;
-  editComment: (commentId: string) => void;
-  createComment: (commentId: string) => void;
+  setCommentState: (state: CommentState<unknown>) => void;
 } {
-  const [commentState, setCommentState] = useState<
-    | { type: "edit"; commentId: string }
-    | { type: "create"; target: string | T[] }
-  >();
+  const [commentState, setCommentState] = useState<CommentState<unknown>>();
   const [hoveredState, setHoveredState] = useState<HoverState<unknown>>();
   const [selectedState, setSelectedState] = useState<SelectionState<unknown>>();
 
-  const editComment = useStaticCallback((commentId: string) => {
-    setCommentState({ type: "edit", commentId });
-  });
-
-  const createComment = useStaticCallback((target: string | T[]) => {
-    setCommentState({ type: "create", target });
-    setSelectedAnnotationGroupId(undefined);
-  });
-
   const setHoveredAnchor = useStaticCallback((anchor: unknown) => {
     // ingore set if it doesn't change the current state
     // the document editor might call setHoveredAnchors multiple times, even if it hasn't changed
@@ -458,8 +446,7 @@ export function useAnnotations<T>({
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
-    editComment,
-    createComment,
+    setCommentState,
   };
 }
 
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index b269cee0..ada264b8 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -1,20 +1,20 @@
 import { Button } from "@/components/ui/button";
-import { DATA_TYPES, DatatypeId } from "@/os/datatypes";
+import { DatatypeId } from "@/os/datatypes";
 import { useCurrentAccount } from "@/os/explorer/account";
 import { ContactAvatar } from "@/os/explorer/components/ContactAvatar";
 import { getRelativeTimeString } from "@/os/lib/dates";
 import { AnnotationsViewProps, TOOLS } from "@/os/tools";
 import {
   AnnotationGroupWithUIState,
+  CommentState,
   HasVersionControlMetadata,
-  HighlightAnnotation,
 } from "@/os/versionControl/schema";
 import { HasAssets } from "@/tools/essay/assets";
 import { MarkdownInput } from "@/tools/essay/components/CodeMirrorEditor";
 import { next as A, uuid } from "@automerge/automerge";
 import { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
 import { Check, MessageSquare, PencilIcon, XIcon } from "lucide-react";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
 
 type ReviewSidebarProps = {
@@ -27,8 +27,7 @@ type ReviewSidebarProps = {
   setHoveredAnnotationGroupId: (id: string) => void;
   isCommentInputFocused: boolean;
   setIsCommentInputFocused: (isFocused: boolean) => void;
-  editComment: (commentId: string) => void;
-  createComment: (target: string | unknown[]) => void;
+  setCommentState: (state: CommentState<unknown>) => void;
 };
 
 export type PositionMap = Record<string, { top: number; bottom: number }>;
@@ -42,8 +41,7 @@ export const ReviewSidebar = React.memo(
     selectedAnchors,
     setSelectedAnnotationGroupId,
     setHoveredAnnotationGroupId,
-    editComment,
-    createComment,
+    setCommentState,
   }: ReviewSidebarProps) => {
     return (
       <div className="h-full flex flex-col">
@@ -79,8 +77,7 @@ export const ReviewSidebar = React.memo(
                     );
                   }
                 }}
-                editComment={editComment}
-                createComment={createComment}
+                setCommentState={setCommentState}
                 hasNext={index < annotationGroups.length - 1}
                 hasPrev={index > 0}
                 enableScrollSync
@@ -93,7 +90,11 @@ export const ReviewSidebar = React.memo(
           <Button
             variant="outline"
             onClick={() => {
-              createComment(selectedAnchors);
+              setCommentState({
+                type: "create",
+                target:
+                  selectedAnchors.length > 0 ? selectedAnchors : undefined,
+              });
             }}
           >
             Comment {selectedAnchors.length > 0 ? "on selection" : ""}
@@ -117,8 +118,7 @@ export interface AnnotationGroupViewProps {
   enableScrollSync?: boolean; // todo: this shouldn't be a flag
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
-  editComment: (commentId: string) => void;
-  createComment: (target: string | unknown[]) => void;
+  setCommentState: (state: CommentState<unknown>) => void;
 }
 
 export const AnnotationGroupView = forwardRef<
@@ -137,8 +137,7 @@ export const AnnotationGroupView = forwardRef<
       hasPrev,
       onSelectNext,
       onSelectPrev,
-      editComment,
-      createComment,
+      setCommentState,
       enableScrollSync,
     }: AnnotationGroupViewProps,
     ref
@@ -181,7 +180,7 @@ export const AnnotationGroupView = forwardRef<
     };
 
     const onReply = () => {
-      createComment(getAnnotationGroupId(annotationGroup));
+      openCommentBox(getAnnotationGroupId(annotationGroup));
     };
 
     const onUpdateCommentContentWithId = (id: string, content: string) => {
@@ -357,7 +356,11 @@ export const AnnotationGroupView = forwardRef<
                   annotationGroup.comment?.commentId === comment.id
                 }
                 setIsBeingEdited={(isBeingEdited) =>
-                  editComment(isBeingEdited ? comment.id : undefined)
+                  setCommentState(
+                    isBeingEdited
+                      ? { type: "edit", commentId: comment.id }
+                      : undefined
+                  )
                 }
               />
             ))}
@@ -367,12 +370,12 @@ export const AnnotationGroupView = forwardRef<
                 contactUrl={account?.contactHandle.url}
                 docWithAssetsHandle={handle}
                 onChangeContent={(content) => {
+                  setCommentState(undefined);
                   addCommentToAnnotationGroup(content);
-                  createComment(undefined);
                 }}
                 isBeingEdited={true}
                 setIsBeingEdited={() => {
-                  createComment(undefined);
+                  setCommentState(undefined);
                 }}
               />
             )}
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 4d53e2e7..2d606298 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -337,8 +337,7 @@ export const VersionControlEditor: React.FC<{
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
-    editComment,
-    createComment,
+    setCommentState,
   } = useAnnotations({
     doc: activeDoc,
     datatypeId,
@@ -588,8 +587,7 @@ export const VersionControlEditor: React.FC<{
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
                   hideInlineComments={!!sidebarMode}
-                  editComment={editComment}
-                  createComment={createComment}
+                  setCommentState={setCommentState}
                 />
               ) : (
                 <DocEditor
@@ -605,8 +603,7 @@ export const VersionControlEditor: React.FC<{
                   setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
                   setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                   hideInlineComments={!!sidebarMode}
-                  editComment={editComment}
-                  createComment={createComment}
+                  setCommentState={setCommentState}
                 />
               )}
             </div>
@@ -675,8 +672,7 @@ export const VersionControlEditor: React.FC<{
                 setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                 isCommentInputFocused={isCommentInputFocused}
                 setIsCommentInputFocused={setIsCommentInputFocused}
-                editComment={editComment}
-                createComment={createComment}
+                setCommentState={setCommentState}
               />
             )}
           </div>
@@ -703,8 +699,7 @@ const DocEditor = <T, V>({
   setHoveredAnchor,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
-  editComment,
-  createComment,
+  setCommentState,
 }: EditorPropsWithDatatype<T, V>) => {
   // Currently we don't have a toolpicker so we just show the first tool for the doc type
   const Component = TOOLS[datatypeId][0].editorComponent;
@@ -721,8 +716,7 @@ const DocEditor = <T, V>({
       setHoveredAnchor={setHoveredAnchor}
       setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
       setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
-      editComment={editComment}
-      createComment={createComment}
+      setCommentState={setCommentState}
     />
   );
 };
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 8b4e5a54..15afae6b 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -86,13 +86,17 @@ export type AnnotationGroup<T, V> = {
   discussion?: Discussion<T>;
 };
 
-export type CommentState =
+export type CommentState<T> =
+  | { type: "edit"; commentId: string }
+  | { type: "create"; target: string | T[] | undefined };
+
+export type AnnotationGroupCommentState =
   | { type: "create" }
   | { type: "edit"; commentId: string };
 
 export type AnnotationGroupWithUIState<T, V> = AnnotationGroup<T, V> & {
   state: "focused" | "expanded" | "neutral";
-  comment?: CommentState;
+  comment?: AnnotationGroupCommentState;
 };
 
 export type Discussable<T> = {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 081814b0..f15d26ba 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -13,6 +13,7 @@ import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSideba
 import { DocHandle } from "@automerge/automerge-repo";
 import { MessageCircle } from "lucide-react";
 import { TextSelection } from "./CodeMirrorEditor";
+import { CommentState } from "@/os/versionControl/schema";
 
 export const CommentsSidebar = ({
   doc,
@@ -23,8 +24,7 @@ export const CommentsSidebar = ({
   annotationGroupsWithPosition,
   setSelectedAnnotationGroupId,
   setHoveredAnnotationGroupId,
-  editComment,
-  createComment,
+  setCommentState,
 }: {
   doc: MarkdownDoc;
   handle: DocHandle<MarkdownDoc>;
@@ -34,8 +34,7 @@ export const CommentsSidebar = ({
   annotationGroupsWithPosition: AnnotationGroupWithPosition[];
   setSelectedAnnotationGroupId: (id: string) => void;
   setHoveredAnnotationGroupId: (id: string) => void;
-  editComment: (commentId: string) => void;
-  createComment: (target: string | MarkdownDocAnchor[]) => void;
+  setCommentState: (state: CommentState<MarkdownDocAnchor>) => void;
 }) => {
   return (
     <div className="relative">
@@ -86,8 +85,7 @@ export const CommentsSidebar = ({
                 }}
                 hasNext={index < annotationGroupsWithPosition.length - 1}
                 hasPrev={index > 0}
-                editComment={editComment}
-                createComment={createComment}
+                setCommentState={setCommentState}
               />
             </div>
           );
@@ -112,12 +110,19 @@ export const CommentsSidebar = ({
                   // can't point after last character so we use the last character instead
                   const to = Math.min(doc.content.length - 1, selection.to);
 
-                  createComment([
-                    {
-                      fromCursor: A.getCursor(doc, ["content"], selection.from),
-                      toCursor: A.getCursor(doc, ["content"], to),
-                    },
-                  ]);
+                  setCommentState({
+                    type: "create",
+                    target: [
+                      {
+                        fromCursor: A.getCursor(
+                          doc,
+                          ["content"],
+                          selection.from
+                        ),
+                        toCursor: A.getCursor(doc, ["content"], to),
+                      },
+                    ],
+                  });
                 }}
               >
                 <MessageCircle size={20} className="text-gray-400" />
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 41024730..8aaf246a 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -33,8 +33,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     hideInlineComments,
     setSelectedAnnotationGroupId,
     setHoveredAnnotationGroupId,
-    editComment,
-    createComment,
+    setCommentState,
   } = props;
 
   const [hasEditorFocus, setHasEditorFocus] = useState(false);
@@ -128,8 +127,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
             annotationGroupsWithPosition={annotationGroupsWithPosition}
             setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
             setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
-            editComment={editComment}
-            createComment={createComment}
+            setCommentState={setCommentState}
           />
         </div>
       </div>

From 737980ac824d94eddc1cde53728839efc8decfc7 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 13:44:21 +0200
Subject: [PATCH 30/59] fix global comments

---
 src/os/versionControl/annotations.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 23e92070..7637f102 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -145,7 +145,11 @@ export function useAnnotations<T>({
     const claimedAnnotations = new Set<Annotation<unknown, unknown>>();
 
     // add pending discussion if a new comment is being created on an anchor selection
-    if (commentState?.type === "create" && Array.isArray(commentState.target)) {
+    // or without a target selection (global comment)
+    if (
+      commentState?.type === "create" &&
+      typeof commentState.target !== "string"
+    ) {
       discussions.push({
         anchors: commentState.target,
       });
@@ -176,7 +180,7 @@ export function useAnnotations<T>({
 
       // ingore discussions without highlight annotations
       // this can happen if the values that where referenced by a discussion have since been deleted
-      if (discussionHighlightAnnotations.length === 0) {
+      if (discussion.anchors && discussionHighlightAnnotations.length === 0) {
         return;
       }
 
@@ -480,6 +484,10 @@ export function getAnnotationGroupId<T, V>(
 ) {
   if (annotationGroup.discussion) return annotationGroup.discussion.id;
 
+  if (annotationGroup.annotations.length === 0) {
+    return undefined;
+  }
+
   // if the annotation group has no discussion we know that it's a computed annotation group
   // which means that the annotation doesn't appear in any other annotationGroup
   // so we can just pick the first annotation to generate a unique id

From de2b38296cd2680392bca95d8e33bd9a2600ee17 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 13:53:19 +0200
Subject: [PATCH 31/59] stop navigation key presses from bubbling up

---
 src/os/versionControl/components/ReviewSidebar.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index ada264b8..d2d71f57 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -483,6 +483,17 @@ const DiscussionCommentView = ({
               ? "border border-1 rounded-sm px-2 border-gray-300"
               : "border-white"
           }`}
+          onKeyDown={(event) => {
+            // stop navigation key presses from bubbling up
+            if (
+              event.key === "k" ||
+              event.key === "j" ||
+              event.key === "p" ||
+              event.key === "n"
+            ) {
+              event.stopPropagation();
+            }
+          }}
         >
           <MarkdownInput
             value={content}

From dfd480c528cd65b8a79198eda32107d286468294 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 14:03:08 +0200
Subject: [PATCH 32/59] Fix adding replies

---
 src/os/versionControl/components/ReviewSidebar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index d2d71f57..90451585 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -180,7 +180,10 @@ export const AnnotationGroupView = forwardRef<
     };
 
     const onReply = () => {
-      openCommentBox(getAnnotationGroupId(annotationGroup));
+      setCommentState({
+        type: "create",
+        target: getAnnotationGroupId(annotationGroup),
+      });
     };
 
     const onUpdateCommentContentWithId = (id: string, content: string) => {

From 29a8a9159d7d4a2d47773697551c4ec52bb15acb Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 14:10:32 +0200
Subject: [PATCH 33/59] fix keyboard shortcuts

---
 .../components/ReviewSidebar.tsx              | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 90451585..bf3119a9 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -275,7 +275,10 @@ export const AnnotationGroupView = forwardRef<
         }
 
         if (evt.key === "Enter" && isMetaOrControlPressed) {
-          //setIsReplyBoxOpen(true);
+          setCommentState({
+            type: "create",
+            target: getAnnotationGroupId(annotationGroup),
+          });
           evt.preventDefault();
           evt.stopPropagation();
         }
@@ -495,6 +498,23 @@ const DiscussionCommentView = ({
               event.key === "n"
             ) {
               event.stopPropagation();
+              return;
+            }
+
+            if (event.key === "Escape") {
+              event.preventDefault();
+              event.stopPropagation();
+              setIsBeingEdited(false);
+              return;
+            }
+
+            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+              console.log("enter pressed");
+              event.preventDefault();
+              event.stopPropagation();
+              onChangeContent(updatedText);
+              setIsBeingEdited(false);
+              return;
             }
           }}
         >

From ea5d72d2ae2fa4665e32de417f6779a36b658a05 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 14:21:30 +0200
Subject: [PATCH 34/59] fix filter out resolved discussions

---
 src/os/versionControl/annotations.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 7637f102..f91102c8 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -246,12 +246,15 @@ export function useAnnotations<T>({
     return {
       annotations: editAnnotations.concat(highlightAnnotations),
       annotationGroups: discussionsWithoutAnchors
-        .map(
-          (discussion) =>
-            ({
-              discussion,
-              annotations: [],
-            } as AnnotationGroup<unknown, unknown>)
+        .flatMap((discussion) =>
+          discussion.resolved
+            ? []
+            : [
+                {
+                  discussion,
+                  annotations: [],
+                } as AnnotationGroup<unknown, unknown>,
+              ]
         )
         .concat(sortedAnnotationGroups),
     };

From 8f7894482fff4e858dc1baa576b2d0dd7cad93dd Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 23 May 2024 14:27:59 +0200
Subject: [PATCH 35/59] adjust estimatedHeightOfAnnotationGroups function

---
 src/tools/essay/utils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
index f11a5c2f..30e61626 100644
--- a/src/tools/essay/utils.ts
+++ b/src/tools/essay/utils.ts
@@ -19,7 +19,7 @@ export type AnnotationGroupWithPosition = AnnotationGroupWithUIState<
 
 // a very rough approximation; needs to be better but being perfect seems hard
 const estimatedHeightOfAnnotationGroup = (
-  annotationGroup: AnnotationGroup<MarkdownDocAnchor, string>
+  annotationGroup: AnnotationGroupWithUIState<MarkdownDocAnchor, string>
 ) => {
   const commentHeights = annotationGroup.discussion
     ? annotationGroup.discussion.comments.map(
@@ -29,7 +29,8 @@ const estimatedHeightOfAnnotationGroup = (
   const commentsHeight = commentHeights.reduce((a, b) => a + b, 0);
   const PADDING = 32;
   const BUTTONS = 40;
-  return PADDING + BUTTONS + commentsHeight + 20;
+  const actionButtonsHeight = annotationGroup.state === "expanded" ? 50 : 0;
+  return PADDING + BUTTONS + commentsHeight + 20 + actionButtonsHeight;
 };
 
 // Given a list of comment threads, find a vertical position for each comment.

From df233ba97b8d67b2cd18e521ab12963341a25e3e Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 07:50:53 +0200
Subject: [PATCH 36/59] tweak styling

---
 src/os/versionControl/components/ReviewSidebar.tsx | 2 +-
 src/tools/essay/components/CodeMirrorEditor.tsx    | 8 ++++----
 src/tools/essay/components/CommentsSidebar.tsx     | 4 +---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index bf3119a9..999aeb15 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -337,7 +337,7 @@ export const AnnotationGroupView = forwardRef<
                 ? "border-blue-600 shadow-lg"
                 : annotationGroup.state === "focused"
                 ? "border-blue-600 shadow-lg"
-                : "border border-gray-200 "
+                : ""
             }`}
           >
             <AnnotationsView
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 927f0e45..e47da902 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -266,13 +266,11 @@ export function MarkdownDocEditor({
           if (view.hasFocus !== previousHasFocus) {
             // hack: delay focus update because otherwise click handlers don't work on elements
             // that are hidden if the editor is not focused, because blur is triggered before click
-            setTimeout(() => setHasFocus(view.hasFocus), 100);
+            setTimeout(() => setHasFocus(view.hasFocus), 200);
             previousHasFocus = view.hasFocus;
           }
 
-          // only update selection if it has changed and the editor is focused
-          // if the editor is not focused it can still trigger selection changes which resets selections made through the review sidebar
-          if (transaction.newSelection && view.hasFocus) {
+          if (transaction.newSelection) {
             const selection = view.state.selection.ranges[0];
 
             if (selection) {
@@ -312,6 +310,8 @@ export function MarkdownDocEditor({
                   },
                 ]);
               }
+            } else {
+              setSelectedAnchors([]);
             }
           }
         } catch (e) {
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index f15d26ba..202f521c 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -46,9 +46,7 @@ export const CommentsSidebar = ({
             <div
               key={id}
               className={`absolute transition-all ease-in-out w-[350px] ${
-                annotationGroup.state === "expanded"
-                  ? "z-50 shadow-sm border-gray-500"
-                  : "z-0"
+                annotationGroup.state === "expanded" ? "z-50" : "z-0"
               }`}
               style={{
                 top: annotationGroup.yCoord,

From f7bb64736df97d22334b215919540949615a19d3 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 08:04:30 +0200
Subject: [PATCH 37/59] codemirror: avoid triggering redundant events

ensure codemirror only triggers selectedAnchor changes if the selection changed
---
 src/tools/essay/components/CodeMirrorEditor.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index e47da902..1f1270ff 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -46,6 +46,7 @@ import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMark
 import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
 import { dropCursor } from "../codemirrorPlugins/dropCursor";
 import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
+import { isEqual } from "lodash";
 
 export type TextSelection = {
   from: number;
@@ -211,6 +212,7 @@ export function MarkdownDocEditor({
     const source = docAtHeads.content; // this should use path
 
     let previousHasFocus = false;
+    const _setSelectedAnchors = setSelectedAnchors;
 
     const view = new EditorView({
       doc: source,
@@ -259,6 +261,8 @@ export function MarkdownDocEditor({
         lineWrappingPlugin,
       ],
       dispatch(transaction, view) {
+        let previousSelection = view.state.selection;
+
         // TODO: can some of these dispatch handlers be factored out into plugins?
         try {
           view.update([transaction]);
@@ -270,7 +274,11 @@ export function MarkdownDocEditor({
             previousHasFocus = view.hasFocus;
           }
 
-          if (transaction.newSelection) {
+          // new selection is sometimes set
+          if (
+            transaction.newSelection &&
+            !isEqual(view.state.selection, previousSelection)
+          ) {
             const selection = view.state.selection.ranges[0];
 
             if (selection) {

From ed5ca1fe3367c9e687b22fd0a2dbfe4688c548a1 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 14:52:24 +0200
Subject: [PATCH 38/59] fix global add coment keyboard shortcut

---
 src/datatypes/markdown/datatype.ts            |  3 +-
 src/os/datatypes.ts                           |  4 ++
 .../components/VersionControlEditor.tsx       | 55 +++++++++++--------
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/datatypes/markdown/datatype.ts b/src/datatypes/markdown/datatype.ts
index b5564824..404f1164 100644
--- a/src/datatypes/markdown/datatype.ts
+++ b/src/datatypes/markdown/datatype.ts
@@ -12,7 +12,7 @@ import {
 } from "@/os/versionControl/utils";
 import { next as A } from "@automerge/automerge";
 import { Repo } from "@automerge/automerge-repo";
-import { Doc, splice } from "@automerge/automerge/next";
+import { splice } from "@automerge/automerge/next";
 import { pick } from "lodash";
 import { Text } from "lucide-react";
 import { AssetsDoc } from "../../tools/essay/assets";
@@ -314,4 +314,5 @@ export const MarkdownDatatype: DataType<
   doAnchorsOverlap,
   sortAnchorsBy,
   fileExportMethods,
+  supportsInlineComments: true, // todo: this should be part of the viewer
 };
diff --git a/src/os/datatypes.ts b/src/os/datatypes.ts
index 63622ffe..4ff0255f 100644
--- a/src/os/datatypes.ts
+++ b/src/os/datatypes.ts
@@ -108,6 +108,10 @@ export type VersionedDataType<D, T, V> = {
    *  If this method is not implemented the anchors will not be sorted.
    */
   sortAnchorsBy?: (doc: D, anchor: T) => any;
+
+  // flag wether or not this data type has support for rendering comments inline or if it
+  // relies exclusively on the review sidebar to show comments
+  supportsInlineComments?: boolean;
 };
 
 export type DataType<D, T, V> = CoreDataType<D> & VersionedDataType<D, T, V>;
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 2d606298..c987e84c 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -24,7 +24,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "@/os/explorer/components/ErrorFallback";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { isMarkdownDoc } from "@/datatypes/markdown";
-import { DatatypeId } from "@/os/datatypes";
+import { DATA_TYPES, DatatypeId } from "@/os/datatypes";
 import { getRelativeTimeString } from "@/os/lib/dates";
 import { isLLMActive } from "@/os/lib/llm";
 import { EditorProps, TOOLS } from "@/os/tools";
@@ -179,27 +179,6 @@ export const VersionControlEditor: React.FC<{
     }
   }, [doc, changeDoc]);
 
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.code === "KeyM"
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        setSidebarMode("review");
-        setIsCommentInputFocused(true);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyPress, true);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyPress, true);
-    };
-  }, []);
-
   const handleCreateBranch = useCallback(
     ({ name, heads }: MakeBranchOptions = {}) => {
       const branch = createBranch({
@@ -345,6 +324,38 @@ export const VersionControlEditor: React.FC<{
     isCommentInputFocused,
   });
 
+  // global comment keyboard shortcut
+  // with cmd + shift + m a new comment is created
+  const supportsInlineComments = DATA_TYPES[datatypeId].supportsInlineComments;
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.code === "KeyM"
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!supportsInlineComments || selectedAnchors.length === 0) {
+          setSidebarMode("review");
+        }
+
+        setCommentState({
+          type: "create",
+          target: selectedAnchors.length > 0 ? selectedAnchors : undefined,
+        });
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress, true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress, true);
+    };
+  }, [selectedAnchors]);
+
   const [
     annotationsPositionsInSidebarMap,
     setAnnotationsPositionsInSidebarMap,

From d925c55d53a52be56c69e105db428a5c66235776 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 09:41:13 +0200
Subject: [PATCH 39/59] show comments without anchors always on top

---
 src/os/versionControl/annotations.ts | 35 ++++++++++++----------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index f91102c8..b9318fd0 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -37,7 +37,7 @@ type PendingDiscussion<T> = {
   anchors: T[];
 };
 
-export function useAnnotations<T>({
+export function useAnnotations({
   doc,
   datatypeId,
   diff,
@@ -178,9 +178,13 @@ export function useAnnotations<T>({
           : [];
       });
 
-      // ingore discussions without highlight annotations
+      // filter out discussions that have anchors but none of them match a value in the current document
       // this can happen if the values that where referenced by a discussion have since been deleted
-      if (discussion.anchors && discussionHighlightAnnotations.length === 0) {
+      if (
+        discussion.anchors &&
+        discussion.anchors.length > 0 &&
+        discussionHighlightAnnotations.length === 0
+      ) {
         return;
       }
 
@@ -235,28 +239,19 @@ export function useAnnotations<T>({
     const sortAnchorsBy = DATA_TYPES[datatypeId].sortAnchorsBy;
     const sortedAnnotationGroups = sortAnchorsBy
       ? sortBy(combinedAnnotationGroups, (annotationGroup) =>
-          min(
-            annotationGroup.annotations.map((annotation) =>
-              sortAnchorsBy(doc, annotation.anchor)
-            )
-          )
+          annotationGroup.annotations.length === 0
+            ? -Infinity // annotation groups without annotations are global comments which are always shown on top
+            : min(
+                annotationGroup.annotations.map((annotation) =>
+                  sortAnchorsBy(doc, annotation.anchor)
+                )
+              )
         )
       : combinedAnnotationGroups;
 
     return {
       annotations: editAnnotations.concat(highlightAnnotations),
-      annotationGroups: discussionsWithoutAnchors
-        .flatMap((discussion) =>
-          discussion.resolved
-            ? []
-            : [
-                {
-                  discussion,
-                  annotations: [],
-                } as AnnotationGroup<unknown, unknown>,
-              ]
-        )
-        .concat(sortedAnnotationGroups),
+      annotationGroups: sortedAnnotationGroups,
     };
   }, [
     doc,

From 9c45b6f8c234fb72cf406f7d2ee259e84effbec5 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 10:20:38 +0200
Subject: [PATCH 40/59] render whitespaces in essay annotations correctly

---
 src/tools/essay/components/EssayAnnotations.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index 80c7a31a..fe51a9c4 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -19,7 +19,7 @@ export const EssayAnnotations = ({
                 key={index}
               >
                 <span className="font-serif bg-green-50 border-b border-green-400">
-                  {annotation.added}
+                  {annotation.added.replace(/ /g, "\u00A0")}
                 </span>
               </div>
             );
@@ -40,11 +40,15 @@ export const EssayAnnotations = ({
             return (
               <div className="text-md" key={index}>
                 <span className="font-serif bg-red-50 border-b border-red-400">
-                  {truncate(annotation.before, { length: 45 })}
+                  {truncate(annotation.before.replace(/ /g, "\u00A0"), {
+                    length: 45,
+                  })}
                 </span>{" "}
                 →{" "}
                 <span className="font-serif bg-green-50 border-b border-green-400">
-                  {truncate(annotation.after, { length: 45 })}
+                  {truncate(annotation.after.replace(/ /g, "\u00A0"), {
+                    length: 45,
+                  })}
                 </span>
               </div>
             );

From 555fa180c48236b162d1dd8bdf7ba687a79742ca Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 10:50:43 +0200
Subject: [PATCH 41/59] fix commenting on edits

---
 src/os/versionControl/annotations.ts               | 8 ++++----
 src/os/versionControl/components/ReviewSidebar.tsx | 2 --
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index b9318fd0..355a537b 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -400,13 +400,13 @@ export function useAnnotations({
             case "create":
               isCommentBeingCreated =
                 // matches target groupId ?
-                commentState.target === annotationGroup?.discussion?.id ||
+                commentState.target === getAnnotationGroupId(annotationGroup) ||
                 // ... or target anchors ?
                 (Array.isArray(commentState.target) &&
-                  commentState.target.length ===
-                    annotationGroup.annotations.length &&
                   commentState.target.every((anchor, index) =>
-                    isEqual(anchor, annotationGroup.annotations[index].anchor)
+                    annotationGroup.annotations.some((annotation) =>
+                      isEqual(annotation.anchor, anchor)
+                    )
                   ));
               break;
             case "edit":
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 999aeb15..0907ac8d 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -346,7 +346,6 @@ export const AnnotationGroupView = forwardRef<
               datatypeId={datatypeId}
               annotations={annotationGroup.annotations}
             />
-
             {annotationGroup.discussion?.comments.map((comment, index) => (
               <DiscussionCommentView
                 contactUrl={comment.contactUrl}
@@ -509,7 +508,6 @@ const DiscussionCommentView = ({
             }
 
             if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
-              console.log("enter pressed");
               event.preventDefault();
               event.stopPropagation();
               onChangeContent(updatedText);

From f69dd0173b7f61c2d0c6c92c2d2a833c1f83df6f Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 14:53:21 +0200
Subject: [PATCH 42/59] don't filter out annotations at beginning of text

---
 src/tools/essay/components/EssayEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 8aaf246a..1aaa006f 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -61,7 +61,7 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
       const fromPos = getCursorPositionSafely(doc, ["content"], fromCursor);
       const toPos = getCursorPositionSafely(doc, ["content"], toCursor);
 
-      return fromPos === undefined || toPos === undefined
+      return fromPos === null || toPos === null
         ? []
         : [
             {

From 5771f6d0b12daa655a7218c87b31dc248e861bf9 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 10:56:16 +0200
Subject: [PATCH 43/59] cleanup higlight renders in EssayAnnotations view

---
 src/tools/essay/components/EssayAnnotations.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index fe51a9c4..bc5b8327 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -58,7 +58,9 @@ export const EssayAnnotations = ({
             // this is a bit hacky patchwork should handle this for us
             if (
               annotations.some(
-                (a) => a.type === "added" && a.added === annotation.value
+                (a) =>
+                  (a.type === "added" && a.added === annotation.value) ||
+                  (a.type === "changed" && a.after === annotation.value)
               )
             ) {
               return null;

From a8500a22130b425a0827ef188ce79209056cacb2 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 11:08:50 +0200
Subject: [PATCH 44/59] fix side by side

---
 .../components/VersionControlEditor.tsx            | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index c987e84c..26444441 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -380,6 +380,9 @@ export const VersionControlEditor: React.FC<{
       ? annotations.filter((annotation) => annotation.type !== "highlighted")
       : annotations;
 
+  // for now hide inline comments if side by side is enabled because there is not enought space
+  const hideInlineComments = !!sidebarMode || compareWithMainFlag;
+
   return (
     <div className="flex h-full overflow-hidden">
       <div className="flex flex-col flex-1 overflow-hidden">
@@ -571,7 +574,7 @@ export const VersionControlEditor: React.FC<{
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <div className="flex-grow items-stretch justify-stretch relative flex flex-col overflow-hidden">
             {compareWithMainFlag && selectedBranch && (
-              <div className="w-full flex top-0 bg-gray-50 pt-4 text-sm font-medium">
+              <div className="w-full flex top-0 bg-gray-100 pt-4 text-sm font-medium">
                 <div className="flex-1 pl-4">
                   <div className="inline-flex items-center gap-1">
                     <CrownIcon className="inline mr-1" size={12} /> Main
@@ -597,7 +600,9 @@ export const VersionControlEditor: React.FC<{
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
-                  hideInlineComments={!!sidebarMode}
+                  setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+                  setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+                  hideInlineComments={hideInlineComments}
                   setCommentState={setCommentState}
                 />
               ) : (
@@ -613,7 +618,7 @@ export const VersionControlEditor: React.FC<{
                   setHoveredAnchor={setHoveredAnchor}
                   setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
                   setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
-                  hideInlineComments={!!sidebarMode}
+                  hideInlineComments={hideInlineComments}
                   setCommentState={setCommentState}
                 />
               )}
@@ -747,13 +752,14 @@ export const SideBySide = <T, V>(props: SideBySideProps<T, V>) => {
 
       return (
         <div className="flex h-full w-full">
-          <div className="h-full flex-1 overflow-auto">
+          <div className="h-full flex-1 overflow-auto bg-gray-200">
             {
               <DocEditor
                 {...props}
                 docUrl={mainDocUrl}
                 docHeads={undefined}
                 annotations={[]}
+                annotationGroups={[]}
               />
             }
           </div>

From b518cafc004744d828e627ca7742ad7f3255dbf1 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 11:22:18 +0200
Subject: [PATCH 45/59] only highlight sidebar button for datatypes without
 inline comments

---
 .../versionControl/components/VersionControlEditor.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 26444441..7cbced26 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -383,6 +383,11 @@ export const VersionControlEditor: React.FC<{
   // for now hide inline comments if side by side is enabled because there is not enought space
   const hideInlineComments = !!sidebarMode || compareWithMainFlag;
 
+  const highlightSidebarButton =
+    !sidebarMode &&
+    annotations.some((a) => a.type === "highlighted" && a.isEmphasized) &&
+    (!DATA_TYPES[datatypeId].supportsInlineComments || hideInlineComments);
+
   return (
     <div className="flex h-full overflow-hidden">
       <div className="flex flex-col flex-1 overflow-hidden">
@@ -556,9 +561,7 @@ export const VersionControlEditor: React.FC<{
                   onClick={() => setSidebarMode("review")}
                   variant="outline"
                   className={`h-8 text-x ${
-                    annotations.filter(
-                      (a) => a.type === "highlighted" && a.isEmphasized
-                    ).length > 0
+                    highlightSidebarButton
                       ? "bg-yellow-200 hover:bg-yellow-400"
                       : ""
                   }`}

From 7b1225e7e0e70288711ecab744c5f5f8c8a7a52a Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 14:53:51 +0200
Subject: [PATCH 46/59] fix type errors

---
 src/os/datatypes.ts                                    |  1 +
 src/os/versionControl/components/ReviewSidebar.tsx     |  4 ++--
 .../versionControl/components/VersionControlEditor.tsx |  8 --------
 src/os/versionControl/schema.ts                        | 10 +++++++++-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/os/datatypes.ts b/src/os/datatypes.ts
index 4ff0255f..f5c31008 100644
--- a/src/os/datatypes.ts
+++ b/src/os/datatypes.ts
@@ -19,6 +19,7 @@ import kanban from "@/datatypes/kanban";
 import markdown from "@/datatypes/markdown";
 import tldraw from "@/datatypes/tldraw";
 import { FileExportMethod } from "./fileExports";
+import { HasAssets } from "@/tools/essay/assets";
 
 export type CoreDataType<D> = {
   id: string;
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 0907ac8d..ee2f5367 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -18,8 +18,8 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
 
 type ReviewSidebarProps = {
-  doc: HasVersionControlMetadata<unknown, unknown> & HasAssets;
-  handle: DocHandle<HasVersionControlMetadata<unknown, unknown> & HasAssets>;
+  doc: HasVersionControlMetadata<unknown, unknown>;
+  handle: DocHandle<HasVersionControlMetadata<unknown, unknown>>;
   datatypeId: DatatypeId;
   selectedAnchors: unknown[];
   annotationGroups: AnnotationGroupWithUIState<unknown, unknown>[];
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 7cbced26..5a48fe00 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -679,14 +679,6 @@ export const VersionControlEditor: React.FC<{
                 datatypeId={datatypeId}
                 annotationGroups={annotationGroups}
                 selectedAnchors={selectedAnchors}
-                changeDoc={activeChangeDoc}
-                onChangeCommentPositionMap={(positions) => {
-                  // todo: without this condition there is an infinite loop
-                  if (!isEqual(positions, annotationsPositionsInSidebarMap)) {
-                    setAnnotationsPositionsInSidebarMap(positions);
-                  }
-                }}
-                hoveredAnnotationGroupId={hoveredAnnotationGroupId}
                 setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
                 setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
                 isCommentInputFocused={isCommentInputFocused}
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 15afae6b..785b6acd 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -1,6 +1,7 @@
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import * as A from "@automerge/automerge/next";
 import { TextPatch } from "./utils";
+import { HasAssets } from "@/tools/essay/assets";
 
 export type Branch = {
   name: string;
@@ -115,7 +116,14 @@ export type HasVersionControlMetadata<T, V> = HasChangeGroupSummaries &
   Branchable &
   Taggable &
   Diffable &
-  Discussable<T>;
+  Discussable<T> &
+  // @Paul 5/24/24
+  // todo: we should rethink how to structure core interfaces
+  // the application now assumes that all document types in the system implement HasVersionControlMetadata
+  // HasAssets is also a universal interface that can be used with any document but it's not really related to versioning
+  // We should create a base schema that's a union of all interfaces that we can assume all documents implement but
+  // split them up into logical sub interfaces like versioning, commenting, assets, etc
+  HasAssets;
 
 export type AnnotationId = string & { __annotationId: true };
 

From 50e224b7069f945efc3229cf9cc725da870059d4 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 15:01:21 +0200
Subject: [PATCH 47/59] fix view branch button

---
 src/os/explorer/components/Topbar.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/os/explorer/components/Topbar.tsx b/src/os/explorer/components/Topbar.tsx
index 4a1a3d5c..4cda2ca7 100644
--- a/src/os/explorer/components/Topbar.tsx
+++ b/src/os/explorer/components/Topbar.tsx
@@ -151,11 +151,10 @@ export const Topbar: React.FC<TopbarProps> = ({
                               </div>
                               <Button
                                 onClick={() => {
-                                  // todo: add branch to doclink
-                                  /* setSelectedBranch({
-                                  type: "branch",
-                                  url: result,
-                                })*/
+                                  selectDocLink({
+                                    ...selectedDocLink,
+                                    branchUrl: result,
+                                  });
                                 }}
                                 className="px-4 h-6"
                               >

From e05e2d50c3db836b8facb5525692ba70f5f25735 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Fri, 24 May 2024 15:16:35 +0200
Subject: [PATCH 48/59] fix accesing property on undefined

---
 src/os/versionControl/annotations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index 355a537b..baf58541 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -412,7 +412,7 @@ export function useAnnotations({
             case "edit":
               isCommentBeingEdited =
                 commentState.type === "edit" &&
-                annotationGroup.discussion.comments.some(
+                annotationGroup.discussion?.comments.some(
                   (comment) => comment.id === commentState.commentId
                 );
               break;

From 68c605c2f62d5ad3ebbe004344d3bbd888312d13 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 12:20:49 +0200
Subject: [PATCH 49/59] add naive invert

- add invert patches to annotations
---
 package.json                                  |  1 +
 src/datatypes/bot/datatype.ts                 |  4 +--
 src/datatypes/bot/essayEditingBot.ts          |  2 +-
 src/datatypes/{markdown => essay}/datatype.ts |  4 +++
 src/datatypes/{markdown => essay}/index.ts    |  0
 src/datatypes/{markdown => essay}/schema.ts   |  0
 src/datatypes/{markdown => essay}/utils.ts    |  0
 src/datatypes/tldraw/datatype.ts              |  3 ++
 src/os/datatypes.ts                           |  2 +-
 src/os/explorer/components/Topbar.tsx         |  2 +-
 src/os/versionControl/branches.ts             |  2 +-
 .../components/ReviewSidebar.tsx              | 28 +++++++++++++++++++
 .../components/VersionControlEditor.tsx       |  2 +-
 src/os/versionControl/schema.ts               |  3 ++
 src/tools/bot/BotEditor.tsx                   |  2 +-
 .../annotationDecorations.ts                  |  2 +-
 .../tableOfContentsPreview.tsx                |  2 +-
 .../essay/components/CodeMirrorEditor.tsx     |  2 +-
 .../essay/components/CommentsSidebar.tsx      |  2 +-
 .../essay/components/EssayAnnotations.tsx     |  2 +-
 src/tools/essay/components/EssayEditor.tsx    |  2 +-
 src/tools/essay/utils.ts                      |  2 +-
 yarn.lock                                     |  7 +++++
 23 files changed, 61 insertions(+), 15 deletions(-)
 rename src/datatypes/{markdown => essay}/datatype.ts (97%)
 rename src/datatypes/{markdown => essay}/index.ts (100%)
 rename src/datatypes/{markdown => essay}/schema.ts (100%)
 rename src/datatypes/{markdown => essay}/utils.ts (100%)

diff --git a/package.json b/package.json
index 653b2c27..d0ebf406 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@codemirror/view": "^6.21.3",
     "@handsontable/react": "^14.1.0",
     "@lezer/highlight": "^1.1.6",
+    "@onsetsoftware/automerge-patcher": "^0.13.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
diff --git a/src/datatypes/bot/datatype.ts b/src/datatypes/bot/datatype.ts
index 1780fe9f..00700679 100644
--- a/src/datatypes/bot/datatype.ts
+++ b/src/datatypes/bot/datatype.ts
@@ -1,6 +1,6 @@
 import { ContactDoc, RegisteredContactDoc } from "@/os/explorer/account";
-import { MarkdownDatatype } from "@/datatypes/markdown/datatype";
-import { MarkdownDoc } from "@/datatypes/markdown/schema";
+import { MarkdownDatatype } from "@/datatypes/essay/datatype";
+import { MarkdownDoc } from "@/datatypes/essay/schema";
 import { type DataType } from "@/os/datatypes";
 import { AutomergeUrl, Repo } from "@automerge/automerge-repo";
 import { Bot } from "lucide-react";
diff --git a/src/datatypes/bot/essayEditingBot.ts b/src/datatypes/bot/essayEditingBot.ts
index 6ba52a7a..41ac7376 100644
--- a/src/datatypes/bot/essayEditingBot.ts
+++ b/src/datatypes/bot/essayEditingBot.ts
@@ -1,7 +1,7 @@
 import { RegisteredContactDoc } from "@/os/explorer/account";
 import { DEFAULT_MODEL, openaiClient } from "@/os/lib/llm";
 import { createBranch } from "@/os/versionControl/branches";
-import { MarkdownDoc } from "@/datatypes/markdown/schema";
+import { MarkdownDoc } from "@/datatypes/essay/schema";
 import { AutomergeUrl, DocHandle, Repo } from "@automerge/automerge-repo";
 import { splice } from "@automerge/automerge/next";
 import { EssayEditingBotDoc } from "./schema";
diff --git a/src/datatypes/markdown/datatype.ts b/src/datatypes/essay/datatype.ts
similarity index 97%
rename from src/datatypes/markdown/datatype.ts
rename to src/datatypes/essay/datatype.ts
index 404f1164..c8b5722a 100644
--- a/src/datatypes/markdown/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -17,6 +17,7 @@ import { pick } from "lodash";
 import { Text } from "lucide-react";
 import { AssetsDoc } from "../../tools/essay/assets";
 import { MarkdownDoc, MarkdownDocAnchor } from "./schema";
+import { unpatchAll } from "@onsetsoftware/automerge-patcher";
 
 import JSZip from "jszip";
 
@@ -180,6 +181,7 @@ export const patchesToAnnotations = (
               fromCursor: fromCursor,
               toCursor: toCursor,
             },
+            inversePatches: unpatchAll(docBefore, [patch, nextPatch]),
           });
 
           offset += patch.value.length - nextPatch.length;
@@ -193,6 +195,7 @@ export const patchesToAnnotations = (
               fromCursor: fromCursor,
               toCursor: toCursor,
             },
+            inversePatches: unpatchAll(docBefore, [patch]),
           });
 
           offset += patch.value.length;
@@ -224,6 +227,7 @@ export const patchesToAnnotations = (
             fromCursor: fromCursor,
             toCursor: toCursor,
           },
+          inversePatches: unpatchAll(docBefore, [patch]),
         });
         break;
       }
diff --git a/src/datatypes/markdown/index.ts b/src/datatypes/essay/index.ts
similarity index 100%
rename from src/datatypes/markdown/index.ts
rename to src/datatypes/essay/index.ts
diff --git a/src/datatypes/markdown/schema.ts b/src/datatypes/essay/schema.ts
similarity index 100%
rename from src/datatypes/markdown/schema.ts
rename to src/datatypes/essay/schema.ts
diff --git a/src/datatypes/markdown/utils.ts b/src/datatypes/essay/utils.ts
similarity index 100%
rename from src/datatypes/markdown/utils.ts
rename to src/datatypes/essay/utils.ts
diff --git a/src/datatypes/tldraw/datatype.ts b/src/datatypes/tldraw/datatype.ts
index 08b99f74..1e94ec2a 100644
--- a/src/datatypes/tldraw/datatype.ts
+++ b/src/datatypes/tldraw/datatype.ts
@@ -11,6 +11,7 @@ import {
   initVersionControlMetadata,
 } from "@/os/versionControl/schema";
 import { defaultShapeUtils, Editor } from "@tldraw/tldraw";
+import { unpatch } from "@onsetsoftware/automerge-patcher";
 
 // When a copy of the document has been made,
 // update the title so it's more clear which one is the copy vs original.
@@ -119,6 +120,7 @@ export const patchesToAnnotations = (
             type: "deleted",
             deleted: docBefore.store[shapeId],
             anchor: shapeId,
+            inversePatches: [unpatch(docBefore, patch)],
           } as Annotation<TLDrawDocAnchor, TLShape>,
         ];
 
@@ -128,6 +130,7 @@ export const patchesToAnnotations = (
             type: "added",
             added: doc.store[shapeId],
             anchor: shapeId,
+            inversePatches: [unpatch(docBefore, patch)],
           } as Annotation<TLDrawDocAnchor, TLShape>,
         ];
 
diff --git a/src/os/datatypes.ts b/src/os/datatypes.ts
index f5c31008..3eec397b 100644
--- a/src/os/datatypes.ts
+++ b/src/os/datatypes.ts
@@ -16,7 +16,7 @@ import bot from "@/datatypes/bot";
 import datagrid from "@/datatypes/datagrid";
 import folder from "@/datatypes/folder";
 import kanban from "@/datatypes/kanban";
-import markdown from "@/datatypes/markdown";
+import markdown from "@/datatypes/essay";
 import tldraw from "@/datatypes/tldraw";
 import { FileExportMethod } from "./fileExports";
 import { HasAssets } from "@/tools/essay/assets";
diff --git a/src/os/explorer/components/Topbar.tsx b/src/os/explorer/components/Topbar.tsx
index 4cda2ca7..8fce5443 100644
--- a/src/os/explorer/components/Topbar.tsx
+++ b/src/os/explorer/components/Topbar.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 import { getHeads, save } from "@automerge/automerge";
-import { MarkdownDoc } from "@/datatypes/markdown/schema";
+import { MarkdownDoc } from "@/datatypes/essay/schema";
 import { DatatypeId, DATA_TYPES } from "../../datatypes";
 import { runBot } from "@/datatypes/bot/essayEditingBot";
 import { Button } from "@/components/ui/button";
diff --git a/src/os/versionControl/branches.ts b/src/os/versionControl/branches.ts
index 514ac85f..0f98883c 100644
--- a/src/os/versionControl/branches.ts
+++ b/src/os/versionControl/branches.ts
@@ -2,7 +2,7 @@ import * as A from "@automerge/automerge/next";
 import { AutomergeUrl, DocHandle, Repo } from "@automerge/automerge-repo";
 import { Branch, Branchable } from "./schema";
 import { getStringCompletion } from "@/os/lib/llm";
-import { MarkdownDoc } from "@/datatypes/markdown";
+import { MarkdownDoc } from "@/datatypes/essay";
 import { Hash } from "@automerge/automerge-wasm";
 
 export const createBranch = <DocType extends Branchable>({
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index ee2f5367..9bdcafcb 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -16,6 +16,7 @@ import { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
 import { Check, MessageSquare, PencilIcon, XIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
+import { patch } from "@onsetsoftware/automerge-patcher";
 
 type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown>;
@@ -159,6 +160,18 @@ export const AnnotationGroupView = forwardRef<
       }
     };
 
+    const onRevert = () => {
+      const patches = annotationGroup.annotations.flatMap((annotation) =>
+        "inversePatches" in annotation ? annotation.inversePatches : []
+      );
+
+      handle.change((doc) => {
+        for (const p of patches) {
+          patch(doc, p);
+        }
+      });
+    };
+
     const onResolveDiscussion = () => {
       handle.change((doc) => {
         doc.discussions[annotationGroup.discussion.id].resolved = true;
@@ -420,6 +433,21 @@ export const AnnotationGroupView = forwardRef<
                 </span>
               </Button>
             )}
+
+            {annotationGroup.annotations.length > 0 && (
+              <Button
+                variant="ghost"
+                className="select-none px-2 flex flex-col w-fi"
+                onClick={onRevert}
+              >
+                <div className="flex text-gray-600 gap-2">
+                  <Check size={16} /> Revert
+                </div>
+                <span className="text-gray-400 text-xs w-full text-center">
+                  (⌘ + z)
+                </span>
+              </Button>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 5a48fe00..de0e09bf 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -23,7 +23,7 @@ import {
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "@/os/explorer/components/ErrorFallback";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { isMarkdownDoc } from "@/datatypes/markdown";
+import { isMarkdownDoc } from "@/datatypes/essay";
 import { DATA_TYPES, DatatypeId } from "@/os/datatypes";
 import { getRelativeTimeString } from "@/os/lib/dates";
 import { isLLMActive } from "@/os/lib/llm";
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 785b6acd..b00044e6 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -131,12 +131,14 @@ interface AddAnnotation<A, V> {
   type: "added";
   anchor: A;
   added: V;
+  inversePatches: A.Patch[];
 }
 
 interface DeleteAnnotation<A, V> {
   type: "deleted";
   anchor: A;
   deleted: V;
+  inversePatches: A.Patch[];
 }
 
 interface ChangeAnnotation<A, V> {
@@ -144,6 +146,7 @@ interface ChangeAnnotation<A, V> {
   anchor: A;
   before: V;
   after: V;
+  inversePatches: A.Patch[];
 }
 
 export interface HighlightAnnotation<A, V> {
diff --git a/src/tools/bot/BotEditor.tsx b/src/tools/bot/BotEditor.tsx
index 6f73c15e..81e7d528 100644
--- a/src/tools/bot/BotEditor.tsx
+++ b/src/tools/bot/BotEditor.tsx
@@ -1,6 +1,6 @@
 import { RegisteredContactDoc } from "@/os/explorer/account";
 import { EssayEditor } from "@/tools/essay/components/EssayEditor";
-import { MarkdownDoc } from "@/datatypes/markdown/schema";
+import { MarkdownDoc } from "@/datatypes/essay/schema";
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import { useDocument } from "@automerge/automerge-repo-react-hooks";
 import { Bot } from "lucide-react";
diff --git a/src/tools/essay/codemirrorPlugins/annotationDecorations.ts b/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
index 79436a18..88968e58 100644
--- a/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
+++ b/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
@@ -2,7 +2,7 @@ import { Decoration, EditorView, WidgetType } from "@codemirror/view";
 import { StateEffect, StateField } from "@codemirror/state";
 
 import { AnnotationWithUIState } from "@/os/versionControl/schema";
-import { ResolvedMarkdownDocAnchor } from "../../../datatypes/markdown/schema";
+import { ResolvedMarkdownDocAnchor } from "../../../datatypes/essay/schema";
 
 export const setAnnotationsEffect =
   StateEffect.define<
diff --git a/src/tools/essay/codemirrorPlugins/tableOfContentsPreview.tsx b/src/tools/essay/codemirrorPlugins/tableOfContentsPreview.tsx
index 3230f274..45085faa 100644
--- a/src/tools/essay/codemirrorPlugins/tableOfContentsPreview.tsx
+++ b/src/tools/essay/codemirrorPlugins/tableOfContentsPreview.tsx
@@ -13,7 +13,7 @@ import {
 } from "@codemirror/view";
 import { isEqual } from "lodash";
 import { Tree } from "@lezer/common";
-import { jsxToHtmlElement } from "../../../datatypes/markdown/utils";
+import { jsxToHtmlElement } from "../../../datatypes/essay/utils";
 
 type Heading = { level: number; content: string; from: number; to: number };
 
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 1f1270ff..86af01d6 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -25,7 +25,7 @@ import {
   MarkdownDoc,
   MarkdownDocAnchor,
   ResolvedMarkdownDocAnchor,
-} from "../../../datatypes/markdown/schema";
+} from "../../../datatypes/essay/schema";
 import {
   annotationDecorations,
   annotationsField,
diff --git a/src/tools/essay/components/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
index 202f521c..d370f297 100644
--- a/src/tools/essay/components/CommentsSidebar.tsx
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -7,7 +7,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/markdown";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
 import { getAnnotationGroupId } from "@/os/versionControl/annotations";
 import { AnnotationGroupView } from "@/os/versionControl/components/ReviewSidebar";
 import { DocHandle } from "@automerge/automerge-repo";
diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index bc5b8327..75b9d935 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -1,7 +1,7 @@
 import {
   MarkdownDoc,
   MarkdownDocAnchor,
-} from "../../../datatypes/markdown/schema";
+} from "../../../datatypes/essay/schema";
 import { truncate } from "lodash";
 import { AnnotationsViewProps } from "@/os/tools";
 
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index 1aaa006f..39a5c2eb 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -7,7 +7,7 @@ import {
   MarkdownDoc,
   MarkdownDocAnchor,
   ResolvedMarkdownDocAnchor,
-} from "@/datatypes/markdown";
+} from "@/datatypes/essay";
 import { useEffect, useMemo, useState } from "react";
 
 import { EditorView } from "@codemirror/view";
diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
index 30e61626..fd896931 100644
--- a/src/tools/essay/utils.ts
+++ b/src/tools/essay/utils.ts
@@ -6,7 +6,7 @@ import {
   AnnotationGroup,
   AnnotationGroupWithUIState,
 } from "@/os/versionControl/schema";
-import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/markdown";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
 import { Annotation } from "@uiw/react-codemirror";
 import { useScrollPosition } from "@/os/hooks/useScrollPosition";
 
diff --git a/yarn.lock b/yarn.lock
index 0ad23e0b..36ed1c8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1148,6 +1148,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@onsetsoftware/automerge-patcher@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@onsetsoftware/automerge-patcher/-/automerge-patcher-0.13.0.tgz#28447f4d15f77efa601fd8b7a1164d8a3a68e025"
+  integrity sha512-ss9CFTfu8wAlD04QzWB70RlB4cnu/Ls9m507RZ6C5GGoq4/64v1iL/4x1X2w6NYiLW7xPWDZiJuWnVC+AsDhvw==
+  dependencies:
+    is-plain-object "^5.0.0"
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"

From a7609b95018816e96582619a89344b1ea3190839 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 15:51:22 +0200
Subject: [PATCH 50/59] normalize redundant patches in essay

---
 src/datatypes/essay/datatype.ts               | 161 ++++++++++++++++--
 .../annotationDecorations.ts                  |  10 +-
 .../essay/components/CodeMirrorEditor.tsx     |   1 -
 .../essay/components/EssayAnnotations.tsx     |   5 +-
 src/tools/essay/utils.ts                      |  14 +-
 5 files changed, 161 insertions(+), 30 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index c8b5722a..26eec9eb 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -131,6 +131,8 @@ export const patchesToAnnotations = (
       (patch.action === "splice" || patch.action === "del")
   );
 
+  const inversePatches = unpatchAll(docBefore, filteredPatches).reverse();
+
   const annotations: Annotation<MarkdownDocAnchor, string>[] = [];
 
   // We keep track of the offset between doc and docBefore.
@@ -168,24 +170,128 @@ export const patchesToAnnotations = (
           nextPatch.action === "del" &&
           nextPatch.path[1] === patchEnd
         ) {
-          const before = docBefore.content.slice(
+          const deleted = docBefore.content.slice(
             patchStart - offset,
             patchStart - offset + nextPatch.length
           );
-
-          annotations.push({
-            type: "changed",
-            before,
-            after: patch.value,
-            anchor: {
-              fromCursor: fromCursor,
-              toCursor: toCursor,
-            },
-            inversePatches: unpatchAll(docBefore, [patch, nextPatch]),
-          });
+          const inserted = patch.value;
+          const overlapStart = getOverlapStart(inserted, deleted);
+          const overlapEnd = getOverlapEnd(inserted, deleted);
+          const inverseInsertAndDelete = [
+            inversePatches[i + 1],
+            inversePatches[i],
+          ];
+
+          // handle overlap at the beginning
+          if (overlapStart > 0) {
+            const deleteHasEffect = inserted.length > overlapStart;
+            const insertHasEffect = deleted.length > overlapStart;
+
+            if (deleteHasEffect && !insertHasEffect) {
+              annotations.push({
+                type: "added",
+                added: inserted.slice(overlapStart),
+                anchor: {
+                  fromCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchStart + overlapStart
+                  ),
+                  toCursor,
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+
+            if (insertHasEffect && !deleteHasEffect) {
+              annotations.push({
+                type: "deleted",
+                deleted: deleted.slice(overlapStart),
+                anchor: {
+                  fromCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchStart + overlapStart
+                  ),
+                  toCursor,
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+
+            if (insertHasEffect && deleteHasEffect) {
+              annotations.push({
+                type: "changed",
+                before: deleted.slice(overlapStart),
+                after: inserted.slice(overlapStart),
+                anchor: {
+                  fromCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchStart + overlapStart
+                  ),
+                  toCursor,
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+
+            // handle overlap at the end
+          } else if (overlapEnd > 0) {
+            const deleteHasEffect = inserted.length > overlapStart;
+            const insertHasEffect = deleted.length > overlapStart;
+
+            if (deleteHasEffect && !insertHasEffect) {
+              annotations.push({
+                type: "added",
+                added: inserted.slice(0, -overlapEnd),
+                anchor: {
+                  fromCursor,
+                  toCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchEnd - overlapEnd
+                  ),
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+
+            if (insertHasEffect && !deleteHasEffect) {
+              annotations.push({
+                type: "deleted",
+                deleted: deleted.slice(0, -overlapEnd),
+                anchor: {
+                  fromCursor,
+                  toCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchEnd - overlapEnd
+                  ),
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+
+            if (insertHasEffect && deleteHasEffect) {
+              annotations.push({
+                type: "changed",
+                before: deleted.slice(0, -overlapEnd),
+                after: inserted.slice(0, -overlapEnd),
+                anchor: {
+                  fromCursor,
+                  toCursor: getCursorSafely(
+                    doc,
+                    ["content"],
+                    patchEnd - overlapEnd
+                  ),
+                },
+                inversePatches: inverseInsertAndDelete,
+              });
+            }
+          }
 
           offset += patch.value.length - nextPatch.length;
-
           i += 1;
         } else {
           annotations.push({
@@ -195,7 +301,7 @@ export const patchesToAnnotations = (
               fromCursor: fromCursor,
               toCursor: toCursor,
             },
-            inversePatches: unpatchAll(docBefore, [patch]),
+            inversePatches: [inversePatches[i]],
           });
 
           offset += patch.value.length;
@@ -227,7 +333,7 @@ export const patchesToAnnotations = (
             fromCursor: fromCursor,
             toCursor: toCursor,
           },
-          inversePatches: unpatchAll(docBefore, [patch]),
+          inversePatches: [inversePatches[i]],
         });
         break;
       }
@@ -240,6 +346,31 @@ export const patchesToAnnotations = (
   return annotations;
 };
 
+const getOverlapStart = (str1: string, str2: string) => {
+  let overlapLength = 0;
+  for (let i = 0; i < str1.length && i < str2.length; i++) {
+    if (str1[i] === str2[i]) {
+      overlapLength++;
+    } else {
+      break;
+    }
+  }
+  return overlapLength;
+};
+
+const getOverlapEnd = (str1: string, str2: string) => {
+  let overlapLength = 0;
+  const minLength = Math.min(str1.length, str2.length);
+  for (let i = 1; i <= minLength; i++) {
+    if (str1[str1.length - i] === str2[str2.length - i]) {
+      overlapLength++;
+    } else {
+      break;
+    }
+  }
+  return overlapLength;
+};
+
 const valueOfAnchor = (doc: MarkdownDoc, anchor: MarkdownDocAnchor) => {
   const from = getCursorPositionSafely(doc, ["content"], anchor.fromCursor);
   const to = getCursorPositionSafely(doc, ["content"], anchor.toCursor);
diff --git a/src/tools/essay/codemirrorPlugins/annotationDecorations.ts b/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
index 88968e58..26c834df 100644
--- a/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
+++ b/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
@@ -108,7 +108,7 @@ export const annotationDecorations = EditorView.decorations.compute(
 
     const decorations = annotations.flatMap((annotation) => {
       const { fromPos, toPos } = annotation.anchor;
-      if (fromPos >= toPos) {
+      if (fromPos > toPos) {
         return [];
       }
 
@@ -129,6 +129,10 @@ export const annotationDecorations = EditorView.decorations.compute(
         }
 
         case "changed": {
+          if (fromPos === toPos) {
+            return [];
+          }
+
           const decoration = annotation.isEmphasized
             ? spliceDecorationActive
             : spliceDecoration;
@@ -142,6 +146,10 @@ export const annotationDecorations = EditorView.decorations.compute(
         }
 
         case "highlighted": {
+          if (fromPos === toPos) {
+            return [];
+          }
+
           const decoration = annotation.isEmphasized
             ? highlightDecorationActive
             : highlightDecoration;
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 86af01d6..365adc06 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -212,7 +212,6 @@ export function MarkdownDocEditor({
     const source = docAtHeads.content; // this should use path
 
     let previousHasFocus = false;
-    const _setSelectedAnchors = setSelectedAnchors;
 
     const view = new EditorView({
       doc: source,
diff --git a/src/tools/essay/components/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index 75b9d935..94bbe7f8 100644
--- a/src/tools/essay/components/EssayAnnotations.tsx
+++ b/src/tools/essay/components/EssayAnnotations.tsx
@@ -1,7 +1,4 @@
-import {
-  MarkdownDoc,
-  MarkdownDocAnchor,
-} from "../../../datatypes/essay/schema";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
 import { truncate } from "lodash";
 import { AnnotationsViewProps } from "@/os/tools";
 
diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
index fd896931..0a3e7e62 100644
--- a/src/tools/essay/utils.ts
+++ b/src/tools/essay/utils.ts
@@ -1,14 +1,10 @@
-import { EditorView } from "@codemirror/view";
-import { next as A } from "@automerge/automerge";
-import { ReactElement, useEffect, useMemo, useState } from "react";
-import ReactDOMServer from "react-dom/server";
-import {
-  AnnotationGroup,
-  AnnotationGroupWithUIState,
-} from "@/os/versionControl/schema";
 import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
-import { Annotation } from "@uiw/react-codemirror";
 import { useScrollPosition } from "@/os/hooks/useScrollPosition";
+import { AnnotationGroupWithUIState } from "@/os/versionControl/schema";
+import { next as A } from "@automerge/automerge";
+import { EditorView } from "@codemirror/view";
+import { ReactElement, useMemo } from "react";
+import ReactDOMServer from "react-dom/server";
 
 export type AnnotationGroupWithPosition = AnnotationGroupWithUIState<
   MarkdownDocAnchor,

From 5665824437f2add86bfef3802ffc5ceeb8ce3c73 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 16:42:47 +0200
Subject: [PATCH 51/59] fix offset bugs

---
 src/datatypes/essay/datatype.ts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 26eec9eb..2e1cf413 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -184,10 +184,10 @@ export const patchesToAnnotations = (
 
           // handle overlap at the beginning
           if (overlapStart > 0) {
-            const deleteHasEffect = inserted.length > overlapStart;
-            const insertHasEffect = deleted.length > overlapStart;
+            const insertHasEffect = inserted.length > overlapStart;
+            const deleteHasEffect = deleted.length > overlapStart;
 
-            if (deleteHasEffect && !insertHasEffect) {
+            if (insertHasEffect && !deleteHasEffect) {
               annotations.push({
                 type: "added",
                 added: inserted.slice(overlapStart),
@@ -203,7 +203,7 @@ export const patchesToAnnotations = (
               });
             }
 
-            if (insertHasEffect && !deleteHasEffect) {
+            if (!insertHasEffect && deleteHasEffect) {
               annotations.push({
                 type: "deleted",
                 deleted: deleted.slice(overlapStart),
@@ -310,18 +310,17 @@ export const patchesToAnnotations = (
       }
       case "del": {
         const patchStart = patch.path[1] as number;
-        const patchEnd = (patch.path[1] as number) + 1;
-        const fromCursor = getCursorSafely(doc, ["content"], patchStart);
-        const toCursor = getCursorSafely(doc, ["content"], patchEnd);
+        const cursor = getCursorSafely(doc, ["content"], patchStart);
 
+        const patchLength = patch.length ?? 1; // length is undefined if only one character is deleted
         const deleted = docBefore.content.slice(
           patchStart - offset,
-          patchStart - offset + patch.length
+          patchStart - offset + patchLength
         );
 
         offset -= patch.length;
 
-        if (!fromCursor || !toCursor) {
+        if (!cursor) {
           console.warn("Failed to get cursor for patch", patch);
           break;
         }
@@ -330,8 +329,8 @@ export const patchesToAnnotations = (
           type: "deleted",
           deleted,
           anchor: {
-            fromCursor: fromCursor,
-            toCursor: toCursor,
+            fromCursor: cursor,
+            toCursor: cursor,
           },
           inversePatches: [inversePatches[i]],
         });

From 2c8261cdd30570610088be588bb1f65af28acfb4 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 16:50:02 +0200
Subject: [PATCH 52/59] When normalizing an insert followed by a delete try to
 display it as a full word replacement

---
 src/datatypes/essay/datatype.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 2e1cf413..c689e925 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -289,6 +289,18 @@ export const patchesToAnnotations = (
                 inversePatches: inverseInsertAndDelete,
               });
             }
+            // no overlap
+          } else {
+            annotations.push({
+              type: "changed",
+              before: deleted,
+              after: inserted,
+              anchor: {
+                fromCursor,
+                toCursor,
+              },
+              inversePatches: inverseInsertAndDelete,
+            });
           }
 
           offset += patch.value.length - nextPatch.length;
@@ -345,6 +357,8 @@ export const patchesToAnnotations = (
   return annotations;
 };
 
+const WORD_SEPARATOR_REGEX = /[\s.,:;?!(){}[\]<>]/;
+
 const getOverlapStart = (str1: string, str2: string) => {
   let overlapLength = 0;
   for (let i = 0; i < str1.length && i < str2.length; i++) {
@@ -354,6 +368,15 @@ const getOverlapStart = (str1: string, str2: string) => {
       break;
     }
   }
+
+  // reduce the overlap if this is not a full word
+  while (
+    overlapLength > 0 &&
+    !WORD_SEPARATOR_REGEX.test(str1[overlapLength - 1])
+  ) {
+    overlapLength--;
+  }
+
   return overlapLength;
 };
 

From 3ac26c55c962ab6522ef4288a420acd40efcb24c Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 16:59:12 +0200
Subject: [PATCH 53/59] handle complete overlaps correctly

---
 src/datatypes/essay/datatype.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index c689e925..32a89e07 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -360,6 +360,12 @@ export const patchesToAnnotations = (
 const WORD_SEPARATOR_REGEX = /[\s.,:;?!(){}[\]<>]/;
 
 const getOverlapStart = (str1: string, str2: string) => {
+  // full match
+  if (str1 === str2) {
+    return str1.length;
+  }
+
+  // partial match
   let overlapLength = 0;
   for (let i = 0; i < str1.length && i < str2.length; i++) {
     if (str1[i] === str2[i]) {

From 0e87a82a8e327fefb94a87f70730b81260ffe1cf Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Mon, 3 Jun 2024 17:12:57 +0200
Subject: [PATCH 54/59] try to create full word replacements when normalizing
 changes with overlap end

---
 src/datatypes/essay/datatype.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 32a89e07..b7481af6 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -396,6 +396,15 @@ const getOverlapEnd = (str1: string, str2: string) => {
       break;
     }
   }
+
+  // reduce the overlap if this is not a full word
+  while (
+    overlapLength > 0 &&
+    !WORD_SEPARATOR_REGEX.test(str1[str1.length - overlapLength])
+  ) {
+    overlapLength--;
+  }
+
   return overlapLength;
 };
 

From dd1e822758f6fb1a976976278113ec07e55a2aef Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 4 Jun 2024 10:07:19 +0200
Subject: [PATCH 55/59] Simplify diff normalization

---
 src/datatypes/essay/datatype.ts               | 164 +++++-------------
 .../components/ReviewSidebar.tsx              |   2 +-
 2 files changed, 43 insertions(+), 123 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index b7481af6..8b6b99d0 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -151,13 +151,13 @@ export const patchesToAnnotations = (
 
     switch (patch.action) {
       case "splice": {
-        const patchStart = patch.path[1] as number;
-        const patchEnd = Math.min(
+        let fromPos = patch.path[1] as number;
+        let toPos = Math.min(
           (patch.path[1] as number) + patch.value.length,
           doc.content.length - 1
         );
-        const fromCursor = getCursorSafely(doc, ["content"], patchStart);
-        const toCursor = getCursorSafely(doc, ["content"], patchEnd);
+        let fromCursor = A.getCursor(doc, ["content"], fromPos);
+        let toCursor = A.getCursor(doc, ["content"], toPos);
 
         if (!fromCursor || !toCursor) {
           console.warn("Failed to get cursor for patch", patch);
@@ -168,137 +168,57 @@ export const patchesToAnnotations = (
         if (
           nextPatch &&
           nextPatch.action === "del" &&
-          nextPatch.path[1] === patchEnd
+          nextPatch.path[1] === toPos
         ) {
-          const deleted = docBefore.content.slice(
-            patchStart - offset,
-            patchStart - offset + nextPatch.length
+          let deleted = docBefore.content.slice(
+            fromPos - offset,
+            fromPos - offset + (nextPatch.length ?? 1)
           );
-          const inserted = patch.value;
+          let inserted = patch.value;
+
           const overlapStart = getOverlapStart(inserted, deleted);
+          if (overlapStart > 0) {
+            inserted = inserted.slice(overlapStart);
+            deleted = deleted.slice(overlapStart);
+            fromPos += overlapStart;
+          }
+
           const overlapEnd = getOverlapEnd(inserted, deleted);
+          if (overlapEnd > 0) {
+            inserted = inserted.slice(0, -overlapEnd);
+            deleted = deleted.slice(0, -overlapEnd);
+            toPos -= overlapEnd;
+          }
+
+          const anchor = {
+            fromCursor: A.getCursor(doc, ["content"], fromPos),
+            toCursor: A.getCursor(doc, ["content"], toPos),
+          };
           const inverseInsertAndDelete = [
             inversePatches[i + 1],
             inversePatches[i],
           ];
 
-          // handle overlap at the beginning
-          if (overlapStart > 0) {
-            const insertHasEffect = inserted.length > overlapStart;
-            const deleteHasEffect = deleted.length > overlapStart;
-
-            if (insertHasEffect && !deleteHasEffect) {
-              annotations.push({
-                type: "added",
-                added: inserted.slice(overlapStart),
-                anchor: {
-                  fromCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchStart + overlapStart
-                  ),
-                  toCursor,
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-
-            if (!insertHasEffect && deleteHasEffect) {
-              annotations.push({
-                type: "deleted",
-                deleted: deleted.slice(overlapStart),
-                anchor: {
-                  fromCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchStart + overlapStart
-                  ),
-                  toCursor,
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-
-            if (insertHasEffect && deleteHasEffect) {
-              annotations.push({
-                type: "changed",
-                before: deleted.slice(overlapStart),
-                after: inserted.slice(overlapStart),
-                anchor: {
-                  fromCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchStart + overlapStart
-                  ),
-                  toCursor,
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-
-            // handle overlap at the end
-          } else if (overlapEnd > 0) {
-            const deleteHasEffect = inserted.length > overlapStart;
-            const insertHasEffect = deleted.length > overlapStart;
-
-            if (deleteHasEffect && !insertHasEffect) {
-              annotations.push({
-                type: "added",
-                added: inserted.slice(0, -overlapEnd),
-                anchor: {
-                  fromCursor,
-                  toCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchEnd - overlapEnd
-                  ),
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-
-            if (insertHasEffect && !deleteHasEffect) {
-              annotations.push({
-                type: "deleted",
-                deleted: deleted.slice(0, -overlapEnd),
-                anchor: {
-                  fromCursor,
-                  toCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchEnd - overlapEnd
-                  ),
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-
-            if (insertHasEffect && deleteHasEffect) {
-              annotations.push({
-                type: "changed",
-                before: deleted.slice(0, -overlapEnd),
-                after: inserted.slice(0, -overlapEnd),
-                anchor: {
-                  fromCursor,
-                  toCursor: getCursorSafely(
-                    doc,
-                    ["content"],
-                    patchEnd - overlapEnd
-                  ),
-                },
-                inversePatches: inverseInsertAndDelete,
-              });
-            }
-            // no overlap
-          } else {
+          if (inserted.length > 0 && deleted.length > 0) {
             annotations.push({
               type: "changed",
               before: deleted,
               after: inserted,
-              anchor: {
-                fromCursor,
-                toCursor,
-              },
+              anchor,
+              inversePatches: inverseInsertAndDelete,
+            });
+          } else if (inserted.length > 0) {
+            annotations.push({
+              type: "added",
+              added: inserted,
+              anchor,
+              inversePatches: inverseInsertAndDelete,
+            });
+          } else if (deleted.length > 0) {
+            annotations.push({
+              type: "deleted",
+              deleted: deleted,
+              anchor,
               inversePatches: inverseInsertAndDelete,
             });
           }
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 9bdcafcb..60daf391 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -444,7 +444,7 @@ export const AnnotationGroupView = forwardRef<
                   <Check size={16} /> Revert
                 </div>
                 <span className="text-gray-400 text-xs w-full text-center">
-                  (⌘ + z)
+                  (⌘ + ⌫)
                 </span>
               </Button>
             )}

From 2aa300b7171d111d0bacded13a409297af92813e Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 4 Jun 2024 11:44:42 +0200
Subject: [PATCH 56/59] do a content based diff on subsequent insert delete
 patches

---
 package.json                    |   2 +
 src/datatypes/essay/datatype.ts | 114 +++++++++++++++++++-------------
 src/datatypes/essay/utils.ts    |   2 +-
 yarn.lock                       |  10 +++
 4 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index d0ebf406..1cb2bc25 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "cmdk": "^0.2.0",
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",
+    "diff": "^5.2.0",
     "eventemitter3": "^5.0.1",
     "haikunator": "^2.1.2",
     "handsontable": "^14.1.0",
@@ -79,6 +80,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@testing-library/react": "^15.0.2",
+    "@types/diff": "^5.2.1",
     "@types/lodash": "^4.14.199",
     "@types/node": "^20.8.2",
     "@types/react": "^18.2.15",
diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 8b6b99d0..a85083f6 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -18,6 +18,7 @@ import { Text } from "lucide-react";
 import { AssetsDoc } from "../../tools/essay/assets";
 import { MarkdownDoc, MarkdownDocAnchor } from "./schema";
 import { unpatchAll } from "@onsetsoftware/automerge-patcher";
+import { diffWordsWithSpace } from "diff";
 
 import JSZip from "jszip";
 
@@ -176,52 +177,7 @@ export const patchesToAnnotations = (
           );
           let inserted = patch.value;
 
-          const overlapStart = getOverlapStart(inserted, deleted);
-          if (overlapStart > 0) {
-            inserted = inserted.slice(overlapStart);
-            deleted = deleted.slice(overlapStart);
-            fromPos += overlapStart;
-          }
-
-          const overlapEnd = getOverlapEnd(inserted, deleted);
-          if (overlapEnd > 0) {
-            inserted = inserted.slice(0, -overlapEnd);
-            deleted = deleted.slice(0, -overlapEnd);
-            toPos -= overlapEnd;
-          }
-
-          const anchor = {
-            fromCursor: A.getCursor(doc, ["content"], fromPos),
-            toCursor: A.getCursor(doc, ["content"], toPos),
-          };
-          const inverseInsertAndDelete = [
-            inversePatches[i + 1],
-            inversePatches[i],
-          ];
-
-          if (inserted.length > 0 && deleted.length > 0) {
-            annotations.push({
-              type: "changed",
-              before: deleted,
-              after: inserted,
-              anchor,
-              inversePatches: inverseInsertAndDelete,
-            });
-          } else if (inserted.length > 0) {
-            annotations.push({
-              type: "added",
-              added: inserted,
-              anchor,
-              inversePatches: inverseInsertAndDelete,
-            });
-          } else if (deleted.length > 0) {
-            annotations.push({
-              type: "deleted",
-              deleted: deleted,
-              anchor,
-              inversePatches: inverseInsertAndDelete,
-            });
-          }
+          annotations.push(...diffText(deleted, inserted, doc, fromPos));
 
           offset += patch.value.length - nextPatch.length;
           i += 1;
@@ -277,6 +233,72 @@ export const patchesToAnnotations = (
   return annotations;
 };
 
+const diffText = (
+  before: string,
+  after: string,
+  doc: MarkdownDoc,
+  offset: number
+): Annotation<MarkdownDocAnchor, string>[] => {
+  const annotations: Annotation<MarkdownDocAnchor, string>[] = [];
+  const parts = diffWordsWithSpace(before, after);
+
+  for (let i = 0; i < parts.length; i++) {
+    let part = parts[i];
+
+    if (part.removed) {
+      const nextPart = parts[i + 1];
+
+      if (nextPart && nextPart.added) {
+        annotations.push({
+          type: "changed",
+          anchor: {
+            fromCursor: A.getCursor(doc, ["content"], offset),
+            toCursor: A.getCursor(
+              doc,
+              ["content"],
+              offset + nextPart.value.length
+            ),
+          },
+          before: part.value,
+          after: nextPart.value,
+          inversePatches: [],
+        });
+
+        offset += nextPart.value.length;
+        // we already reconciled next part, so skip it
+        i += 1;
+      } else {
+        annotations.push({
+          type: "deleted",
+          anchor: {
+            fromCursor: A.getCursor(doc, ["content"], offset),
+            toCursor: A.getCursor(doc, ["content"], offset + part.value.length),
+          },
+          deleted: part.value,
+          inversePatches: [],
+        });
+      }
+    } else if (part.added) {
+      annotations.push({
+        type: "added",
+        anchor: {
+          fromCursor: A.getCursor(doc, ["content"], offset),
+          toCursor: A.getCursor(doc, ["content"], offset + part.value.length),
+        },
+        added: part.value,
+        inversePatches: [],
+      });
+
+      offset += part.value.length;
+    } else {
+      // don't add an annotation for ranges that haven't changed just increase the offset
+      offset += part.value.length;
+    }
+  }
+
+  return annotations;
+};
+
 const WORD_SEPARATOR_REGEX = /[\s.,:;?!(){}[\]<>]/;
 
 const getOverlapStart = (str1: string, str2: string) => {
diff --git a/src/datatypes/essay/utils.ts b/src/datatypes/essay/utils.ts
index 2101c603..89fb8dfe 100644
--- a/src/datatypes/essay/utils.ts
+++ b/src/datatypes/essay/utils.ts
@@ -1,5 +1,5 @@
 import * as A from "@automerge/automerge/next";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement } from "react";
 import ReactDOMServer from "react-dom/server";
 import { MarkdownDoc } from "./schema";
 
diff --git a/yarn.lock b/yarn.lock
index 36ed1c8b..70997195 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2383,6 +2383,11 @@
   resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.8.tgz#d5c6ec44f2f3328653dce385ae586bd8261f8e85"
   integrity sha512-VgnAj6tIAhJhZdJ8/IpxdatM8G4OD3VWGlp6xIxUGENZlpbob9Ty4VVdC1FIEp0aK6DBscDDjyzy5FB60TuNqg==
 
+"@types/diff@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@types/diff/-/diff-5.2.1.tgz#cceae9c4b2dae5c6b8ab1ce1263601c255d87fb3"
+  integrity sha512-uxpcuwWJGhe2AR1g8hD9F5OYGCqjqWnBUQFD8gMZsDbv8oPHzxJF6iMO6n8Tk0AdzlxoaaoQhOYlIg/PukVU8g==
+
 "@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -3502,6 +3507,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
+diff@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
+  integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"

From c0b027c00bf89aa403d841603dfa1a8b743ffd32 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 4 Jun 2024 12:08:16 +0200
Subject: [PATCH 57/59] add inverse patches to replace

---
 src/datatypes/essay/datatype.ts | 72 ++++++++-------------------------
 1 file changed, 16 insertions(+), 56 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index a85083f6..0701941f 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -248,7 +248,11 @@ const diffText = (
     if (part.removed) {
       const nextPart = parts[i + 1];
 
+      // combine remove if it's followed by an add
       if (nextPart && nextPart.added) {
+        const before = part.value;
+        const after = nextPart.value;
+
         annotations.push({
           type: "changed",
           anchor: {
@@ -259,13 +263,20 @@ const diffText = (
               offset + nextPart.value.length
             ),
           },
-          before: part.value,
-          after: nextPart.value,
-          inversePatches: [],
+          before,
+          after,
+          inversePatches: [
+            { action: "del", path: ["content", offset], length: after.length },
+            {
+              action: "splice",
+              path: ["content", offset],
+              value: before,
+            },
+          ],
         });
 
         offset += nextPart.value.length;
-        // we already reconciled next part, so skip it
+        // we already have reconciled the next part, so skip it
         i += 1;
       } else {
         annotations.push({
@@ -291,7 +302,7 @@ const diffText = (
 
       offset += part.value.length;
     } else {
-      // don't add an annotation for ranges that haven't changed just increase the offset
+      // skip ranges that haven't changed, just increase the offset
       offset += part.value.length;
     }
   }
@@ -299,57 +310,6 @@ const diffText = (
   return annotations;
 };
 
-const WORD_SEPARATOR_REGEX = /[\s.,:;?!(){}[\]<>]/;
-
-const getOverlapStart = (str1: string, str2: string) => {
-  // full match
-  if (str1 === str2) {
-    return str1.length;
-  }
-
-  // partial match
-  let overlapLength = 0;
-  for (let i = 0; i < str1.length && i < str2.length; i++) {
-    if (str1[i] === str2[i]) {
-      overlapLength++;
-    } else {
-      break;
-    }
-  }
-
-  // reduce the overlap if this is not a full word
-  while (
-    overlapLength > 0 &&
-    !WORD_SEPARATOR_REGEX.test(str1[overlapLength - 1])
-  ) {
-    overlapLength--;
-  }
-
-  return overlapLength;
-};
-
-const getOverlapEnd = (str1: string, str2: string) => {
-  let overlapLength = 0;
-  const minLength = Math.min(str1.length, str2.length);
-  for (let i = 1; i <= minLength; i++) {
-    if (str1[str1.length - i] === str2[str2.length - i]) {
-      overlapLength++;
-    } else {
-      break;
-    }
-  }
-
-  // reduce the overlap if this is not a full word
-  while (
-    overlapLength > 0 &&
-    !WORD_SEPARATOR_REGEX.test(str1[str1.length - overlapLength])
-  ) {
-    overlapLength--;
-  }
-
-  return overlapLength;
-};
-
 const valueOfAnchor = (doc: MarkdownDoc, anchor: MarkdownDocAnchor) => {
   const from = getCursorPositionSafely(doc, ["content"], anchor.fromCursor);
   const to = getCursorPositionSafely(doc, ["content"], anchor.toCursor);

From f6846834aaacc7bfa5cb4cb53291d0fab9823757 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 4 Jun 2024 13:18:49 +0200
Subject: [PATCH 58/59] combine words

---
 src/datatypes/essay/datatype.ts | 122 ++++++++++++++++++--------------
 1 file changed, 69 insertions(+), 53 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 0701941f..11446997 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -13,12 +13,12 @@ import {
 import { next as A } from "@automerge/automerge";
 import { Repo } from "@automerge/automerge-repo";
 import { splice } from "@automerge/automerge/next";
-import { pick } from "lodash";
+import { add, pick } from "lodash";
 import { Text } from "lucide-react";
 import { AssetsDoc } from "../../tools/essay/assets";
 import { MarkdownDoc, MarkdownDocAnchor } from "./schema";
 import { unpatchAll } from "@onsetsoftware/automerge-patcher";
-import { diffWordsWithSpace } from "diff";
+import { diffWords } from "diff";
 
 import JSZip from "jszip";
 
@@ -240,70 +240,86 @@ const diffText = (
   offset: number
 ): Annotation<MarkdownDocAnchor, string>[] => {
   const annotations: Annotation<MarkdownDocAnchor, string>[] = [];
-  const parts = diffWordsWithSpace(before, after);
+  const parts = diffWords(before, after);
 
   for (let i = 0; i < parts.length; i++) {
-    let part = parts[i];
+    let deleted = "";
+    let added = "";
 
-    if (part.removed) {
-      const nextPart = parts[i + 1];
+    for (; i < parts.length; i++) {
+      let part = parts[i];
 
-      // combine remove if it's followed by an add
-      if (nextPart && nextPart.added) {
-        const before = part.value;
-        const after = nextPart.value;
+      if (part.added) {
+        added += part.value;
+        offset += part.value.length;
+      } else if (part.removed) {
+        deleted += part.value;
+      } else {
+        if (part.value.trim() === "") {
+          added += part.value;
+          deleted += part.value;
+          offset += part.value.length;
+        } else if (deleted === "" && added === "") {
+          offset += part.value.length;
+        } else {
+          i--;
+          break;
+        }
+      }
 
-        annotations.push({
-          type: "changed",
-          anchor: {
-            fromCursor: A.getCursor(doc, ["content"], offset),
-            toCursor: A.getCursor(
-              doc,
-              ["content"],
-              offset + nextPart.value.length
-            ),
-          },
-          before,
-          after,
-          inversePatches: [
-            { action: "del", path: ["content", offset], length: after.length },
-            {
-              action: "splice",
-              path: ["content", offset],
-              value: before,
-            },
-          ],
-        });
+      const nextPart = parts[i + 1];
+      if (
+        nextPart &&
+        !nextPart.added &&
+        !nextPart.removed &&
+        nextPart.value.trim() !== ""
+      ) {
+        break;
+      }
+    }
 
-        offset += nextPart.value.length;
-        // we already have reconciled the next part, so skip it
-        i += 1;
-      } else {
-        annotations.push({
-          type: "deleted",
-          anchor: {
-            fromCursor: A.getCursor(doc, ["content"], offset),
-            toCursor: A.getCursor(doc, ["content"], offset + part.value.length),
+    if (deleted.length > 0 && added.length > 0) {
+      annotations.push({
+        type: "changed",
+        anchor: {
+          fromCursor: A.getCursor(doc, ["content"], offset - added.length),
+          toCursor: A.getCursor(doc, ["content"], offset),
+        },
+        before: deleted,
+        after: added,
+        inversePatches: [
+          {
+            action: "del",
+            path: ["content", offset - added.length],
+            length: added.length,
           },
-          deleted: part.value,
-          inversePatches: [],
-        });
-      }
-    } else if (part.added) {
+          {
+            action: "splice",
+            path: ["content", offset - added.length],
+            value: deleted,
+          },
+        ],
+      });
+    } else if (deleted.length > 0) {
       annotations.push({
-        type: "added",
+        type: "deleted",
         anchor: {
           fromCursor: A.getCursor(doc, ["content"], offset),
-          toCursor: A.getCursor(doc, ["content"], offset + part.value.length),
+          toCursor: A.getCursor(doc, ["content"], offset),
         },
-        added: part.value,
+        deleted,
+        inversePatches: [],
+      });
+    } else if (added.length > 0) {
+      annotations.push({
+        type: "added",
+        anchor: {
+          fromCursor: A.getCursor(doc, ["content"], offset - added.length),
+          toCursor: A.getCursor(doc, ["content"], offset),
+        },
+        added,
         inversePatches: [],
       });
-
-      offset += part.value.length;
-    } else {
-      // skip ranges that haven't changed, just increase the offset
-      offset += part.value.length;
     }
   }
 

From 5d92a2869c7d2e78f8df061fd2f91dc88dc47e8e Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Tue, 4 Jun 2024 14:01:42 +0200
Subject: [PATCH 59/59] make patches relative

---
 src/datatypes/essay/datatype.ts               | 72 +++++++++++++------
 .../components/ReviewSidebar.tsx              | 15 +++-
 src/os/versionControl/schema.ts               | 38 +++++++---
 3 files changed, 94 insertions(+), 31 deletions(-)

diff --git a/src/datatypes/essay/datatype.ts b/src/datatypes/essay/datatype.ts
index 11446997..42701e89 100644
--- a/src/datatypes/essay/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -13,11 +13,10 @@ import {
 import { next as A } from "@automerge/automerge";
 import { Repo } from "@automerge/automerge-repo";
 import { splice } from "@automerge/automerge/next";
-import { add, pick } from "lodash";
+import { pick } from "lodash";
 import { Text } from "lucide-react";
 import { AssetsDoc } from "../../tools/essay/assets";
 import { MarkdownDoc, MarkdownDocAnchor } from "./schema";
-import { unpatchAll } from "@onsetsoftware/automerge-patcher";
 import { diffWords } from "diff";
 
 import JSZip from "jszip";
@@ -132,8 +131,6 @@ export const patchesToAnnotations = (
       (patch.action === "splice" || patch.action === "del")
   );
 
-  const inversePatches = unpatchAll(docBefore, filteredPatches).reverse();
-
   const annotations: Annotation<MarkdownDocAnchor, string>[] = [];
 
   // We keep track of the offset between doc and docBefore.
@@ -189,7 +186,14 @@ export const patchesToAnnotations = (
               fromCursor: fromCursor,
               toCursor: toCursor,
             },
-            inversePatches: [inversePatches[i]],
+            inversePatches: [
+              {
+                action: "del",
+                path: ["content"],
+                cursor: fromCursor,
+                length: patch.value.length,
+              },
+            ],
           });
 
           offset += patch.value.length;
@@ -220,7 +224,14 @@ export const patchesToAnnotations = (
             fromCursor: cursor,
             toCursor: cursor,
           },
-          inversePatches: [inversePatches[i]],
+          inversePatches: [
+            {
+              action: "splice",
+              path: ["content"],
+              cursor,
+              value: deleted,
+            },
+          ],
         });
         break;
       }
@@ -279,46 +290,67 @@ const diffText = (
     }
 
     if (deleted.length > 0 && added.length > 0) {
+      const anchor = {
+        fromCursor: A.getCursor(doc, ["content"], offset - added.length),
+        toCursor: A.getCursor(doc, ["content"], offset),
+      };
+
       annotations.push({
         type: "changed",
-        anchor: {
-          fromCursor: A.getCursor(doc, ["content"], offset - added.length),
-          toCursor: A.getCursor(doc, ["content"], offset),
-        },
+        anchor,
         before: deleted,
         after: added,
         inversePatches: [
           {
             action: "del",
-            path: ["content", offset - added.length],
+            path: ["content"],
+            cursor: anchor.fromCursor,
             length: added.length,
           },
           {
             action: "splice",
-            path: ["content", offset - added.length],
+            path: ["content"],
+            cursor: anchor.fromCursor,
             value: deleted,
           },
         ],
       });
     } else if (deleted.length > 0) {
+      const cursor = A.getCursor(doc, ["content"], offset);
+
       annotations.push({
         type: "deleted",
         anchor: {
-          fromCursor: A.getCursor(doc, ["content"], offset),
-          toCursor: A.getCursor(doc, ["content"], offset),
+          fromCursor: cursor,
+          toCursor: cursor,
         },
         deleted,
-        inversePatches: [],
+        inversePatches: [
+          {
+            action: "splice",
+            path: ["content"],
+            cursor,
+            value: deleted,
+          },
+        ],
       });
     } else if (added.length > 0) {
+      const anchor = {
+        fromCursor: A.getCursor(doc, ["content"], offset - added.length),
+        toCursor: A.getCursor(doc, ["content"], offset),
+      };
       annotations.push({
         type: "added",
-        anchor: {
-          fromCursor: A.getCursor(doc, ["content"], offset - added.length),
-          toCursor: A.getCursor(doc, ["content"], offset),
-        },
+        anchor,
         added,
-        inversePatches: [],
+        inversePatches: [
+          {
+            action: "del",
+            path: ["content"],
+            cursor: anchor.fromCursor,
+            length: added.length,
+          },
+        ],
       });
     }
   }
diff --git a/src/os/versionControl/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 60daf391..f1d1b876 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -16,7 +16,6 @@ import { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
 import { Check, MessageSquare, PencilIcon, XIcon } from "lucide-react";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { getAnnotationGroupId } from "../annotations";
-import { patch } from "@onsetsoftware/automerge-patcher";
 
 type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown>;
@@ -167,7 +166,19 @@ export const AnnotationGroupView = forwardRef<
 
       handle.change((doc) => {
         for (const p of patches) {
-          patch(doc, p);
+          switch (p.action) {
+            case "del": {
+              const index = A.getCursorPosition(doc, p.path, p.cursor);
+              A.splice(doc, p.path, index, p.length);
+              break;
+            }
+
+            case "splice": {
+              const index = A.getCursorPosition(doc, p.path, p.cursor);
+              A.splice(doc, p.path, index, 0, p.value);
+              break;
+            }
+          }
         }
       });
     };
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index b00044e6..21a46bd3 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -2,6 +2,7 @@ import { AutomergeUrl } from "@automerge/automerge-repo";
 import * as A from "@automerge/automerge/next";
 import { TextPatch } from "./utils";
 import { HasAssets } from "@/tools/essay/assets";
+import { PatchValue } from "@/vendor/automerge-wasm";
 
 export type Branch = {
   name: string;
@@ -127,27 +128,46 @@ export type HasVersionControlMetadata<T, V> = HasChangeGroupSummaries &
 
 export type AnnotationId = string & { __annotationId: true };
 
-interface AddAnnotation<A, V> {
+type RelativeDelPatch = {
+  action: "del";
+  path: A.Prop[];
+  cursor: A.Cursor;
+  length: number;
+};
+
+type RelativeSpliceTextPatch = {
+  action: "splice";
+  path: A.Prop[];
+  cursor: A.Cursor;
+  value: string;
+};
+
+// todo: this is a workaround to create patches that can be applied
+// together with other patches
+
+type RelativePatch = RelativeDelPatch | RelativeSpliceTextPatch;
+
+type AddAnnotation<A, V> = {
   type: "added";
   anchor: A;
   added: V;
-  inversePatches: A.Patch[];
-}
+  inversePatches: RelativePatch[];
+};
 
-interface DeleteAnnotation<A, V> {
+type DeleteAnnotation<A, V> = {
   type: "deleted";
   anchor: A;
   deleted: V;
-  inversePatches: A.Patch[];
-}
+  inversePatches: RelativePatch[];
+};
 
-interface ChangeAnnotation<A, V> {
+type ChangeAnnotation<A, V> = {
   type: "changed";
   anchor: A;
   before: V;
   after: V;
-  inversePatches: A.Patch[];
-}
+  inversePatches: RelativePatch[];
+};
 
 export interface HighlightAnnotation<A, V> {
   type: "highlighted";