diff --git a/package.json b/package.json
index 653b2c27..1cb2bc25 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",
@@ -51,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",
@@ -78,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/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 65%
rename from src/datatypes/markdown/datatype.ts
rename to src/datatypes/essay/datatype.ts
index a651187d..42701e89 100644
--- a/src/datatypes/markdown/datatype.ts
+++ b/src/datatypes/essay/datatype.ts
@@ -12,11 +12,12 @@ 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";
 import { MarkdownDoc, MarkdownDocAnchor } from "./schema";
+import { diffWords } from "diff";
 
 import JSZip from "jszip";
 
@@ -148,13 +149,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);
@@ -165,25 +166,17 @@ export const patchesToAnnotations = (
         if (
           nextPatch &&
           nextPatch.action === "del" &&
-          nextPatch.path[1] === patchEnd
+          nextPatch.path[1] === toPos
         ) {
-          const before = docBefore.content.slice(
-            patchStart - offset,
-            patchStart - offset + nextPatch.length
+          let deleted = docBefore.content.slice(
+            fromPos - offset,
+            fromPos - offset + (nextPatch.length ?? 1)
           );
+          let inserted = patch.value;
 
-          annotations.push({
-            type: "changed",
-            before,
-            after: patch.value,
-            anchor: {
-              fromCursor: fromCursor,
-              toCursor: toCursor,
-            },
-          });
+          annotations.push(...diffText(deleted, inserted, doc, fromPos));
 
           offset += patch.value.length - nextPatch.length;
-
           i += 1;
         } else {
           annotations.push({
@@ -193,6 +186,14 @@ export const patchesToAnnotations = (
               fromCursor: fromCursor,
               toCursor: toCursor,
             },
+            inversePatches: [
+              {
+                action: "del",
+                path: ["content"],
+                cursor: fromCursor,
+                length: patch.value.length,
+              },
+            ],
           });
 
           offset += patch.value.length;
@@ -201,18 +202,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;
         }
@@ -221,9 +221,17 @@ export const patchesToAnnotations = (
           type: "deleted",
           deleted,
           anchor: {
-            fromCursor: fromCursor,
-            toCursor: toCursor,
+            fromCursor: cursor,
+            toCursor: cursor,
           },
+          inversePatches: [
+            {
+              action: "splice",
+              path: ["content"],
+              cursor,
+              value: deleted,
+            },
+          ],
         });
         break;
       }
@@ -236,10 +244,130 @@ 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 = diffWords(before, after);
+
+  for (let i = 0; i < parts.length; i++) {
+    let deleted = "";
+    let added = "";
+
+    for (; i < parts.length; i++) {
+      let part = parts[i];
+
+      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;
+        }
+      }
+
+      const nextPart = parts[i + 1];
+      if (
+        nextPart &&
+        !nextPart.added &&
+        !nextPart.removed &&
+        nextPart.value.trim() !== ""
+      ) {
+        break;
+      }
+    }
+
+    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,
+        before: deleted,
+        after: added,
+        inversePatches: [
+          {
+            action: "del",
+            path: ["content"],
+            cursor: anchor.fromCursor,
+            length: added.length,
+          },
+          {
+            action: "splice",
+            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: cursor,
+          toCursor: cursor,
+        },
+        deleted,
+        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,
+        added,
+        inversePatches: [
+          {
+            action: "del",
+            path: ["content"],
+            cursor: anchor.fromCursor,
+            length: added.length,
+          },
+        ],
+      });
+    }
+  }
+
+  return annotations;
+};
+
 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);
 };
 
@@ -308,4 +436,5 @@ export const MarkdownDatatype: DataType<
   doAnchorsOverlap,
   sortAnchorsBy,
   fileExportMethods,
+  supportsInlineComments: true, // todo: this should be part of the viewer
 };
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 67%
rename from src/datatypes/markdown/utils.ts
rename to src/datatypes/essay/utils.ts
index 5a88836d..89fb8dfe 100644
--- a/src/datatypes/markdown/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";
 
@@ -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/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 63622ffe..3eec397b 100644
--- a/src/os/datatypes.ts
+++ b/src/os/datatypes.ts
@@ -16,9 +16,10 @@ 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";
 
 export type CoreDataType<D> = {
   id: string;
@@ -108,6 +109,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/explorer/components/Topbar.tsx b/src/os/explorer/components/Topbar.tsx
index 4a1a3d5c..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";
@@ -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"
                               >
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..f98fc7e5 100644
--- a/src/os/tools.ts
+++ b/src/os/tools.ts
@@ -10,6 +10,8 @@ import kanban from "@/tools/kanban";
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import {
   Annotation,
+  AnnotationGroupWithUIState,
+  CommentState,
   HasVersionControlMetadata,
 } from "@/os/versionControl/schema";
 import { AnnotationWithUIState } from "@/os/versionControl/schema";
@@ -34,10 +36,16 @@ 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;
+  setHoveredAnnotationGroupId?: (groupId: string) => void;
+  setCommentState?: (state: CommentState<T>) => void;
+
+  hideInlineComments?: boolean;
 };
 
 export type AnnotationsViewProps<
diff --git a/src/os/versionControl/annotations.ts b/src/os/versionControl/annotations.ts
index a7e1c399..baf58541 100644
--- a/src/os/versionControl/annotations.ts
+++ b/src/os/versionControl/annotations.ts
@@ -7,9 +7,11 @@ import {
   Annotation,
   HighlightAnnotation,
   AnnotationGroup,
-  AnnotationGroupWithState,
+  AnnotationGroupWithUIState,
   AnnotationWithUIState,
   DiffWithProvenance,
+  Discussion,
+  CommentState,
 } from "./schema";
 import { HasVersionControlMetadata } from "./schema";
 
@@ -31,6 +33,10 @@ type ActiveGroupState = {
 type SelectionState<T> = SelectedAnchorsState<T> | ActiveGroupState;
 type HoverState<T> = HoverAnchorState<T> | ActiveGroupState;
 
+type PendingDiscussion<T> = {
+  anchors: T[];
+};
+
 export function useAnnotations({
   doc,
   datatypeId,
@@ -43,14 +49,16 @@ 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;
   hoveredAnnotationGroupId: string | undefined;
   setHoveredAnnotationGroupId: (id: string) => void;
   setSelectedAnnotationGroupId: (id: string) => void;
+  setCommentState: (state: CommentState<unknown>) => void;
 } {
+  const [commentState, setCommentState] = useState<CommentState<unknown>>();
   const [hoveredState, setHoveredState] = useState<HoverState<unknown>>();
   const [selectedState, setSelectedState] = useState<SelectionState<unknown>>();
 
@@ -99,8 +107,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]
   );
 
@@ -111,7 +125,8 @@ export function useAnnotations({
 
     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>[] = [];
@@ -129,8 +144,19 @@ export function useAnnotations({
     // 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
+    // or without a target selection (global comment)
+    if (
+      commentState?.type === "create" &&
+      typeof commentState.target !== "string"
+    ) {
+      discussions.push({
+        anchors: commentState.target,
+      });
+    }
+
     discussions.forEach((discussion) => {
-      if (discussion.resolved) {
+      if ("resolved" in discussion && discussion.resolved) {
         return;
       }
 
@@ -152,9 +178,13 @@ export function useAnnotations({
           : [];
       });
 
-      // 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 (discussionHighlightAnnotations.length === 0) {
+      if (
+        discussion.anchors &&
+        discussion.anchors.length > 0 &&
+        discussionHighlightAnnotations.length === 0
+      ) {
         return;
       }
 
@@ -178,7 +208,7 @@ export function useAnnotations({
         annotations: discussionHighlightAnnotations.concat(
           overlappingAnnotations
         ),
-        discussion,
+        discussion: "id" in discussion ? discussion : undefined,
       });
     });
 
@@ -207,20 +237,31 @@ export function useAnnotations({
     }
 
     const sortAnchorsBy = DATA_TYPES[datatypeId].sortAnchorsBy;
+    const sortedAnnotationGroups = sortAnchorsBy
+      ? sortBy(combinedAnnotationGroups, (annotationGroup) =>
+          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: sortAnchorsBy
-        ? sortBy(combinedAnnotationGroups, (annotationGroup) =>
-            min(
-              annotationGroup.annotations.map((annotation) =>
-                sortAnchorsBy(doc, annotation.anchor)
-              )
-            )
-          )
-        : combinedAnnotationGroups,
+      annotationGroups: sortedAnnotationGroups,
     };
-  }, [doc, diff, selectedState, isCommentInputFocused, datatypeId]);
+  }, [
+    doc,
+    diff,
+    selectedState,
+    isCommentInputFocused,
+    datatypeId,
+    discussionsWithoutAnchors,
+    commentState,
+  ]);
 
   const {
     selectedAnchors,
@@ -343,21 +384,55 @@ export function useAnnotations({
       [annotations, selectedAnchors]
     );
 
-  const annotationGroupsWithState: AnnotationGroupWithState<
+  const annotationGroupsWithState: AnnotationGroupWithUIState<
     unknown,
     unknown
   >[] = useMemo(
     () =>
       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 === getAnnotationGroupId(annotationGroup) ||
+                // ... or target anchors ?
+                (Array.isArray(commentState.target) &&
+                  commentState.target.every((anchor, index) =>
+                    annotationGroup.annotations.some((annotation) =>
+                      isEqual(annotation.anchor, 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: isCommentBeingEdited
+            ? commentState
+            : isCommentBeingCreated
+            ? { type: "create" }
+            : undefined,
         };
       }),
     [annotationGroups, expandedAnnotationGroupId, selectedAnnotationGroupIds]
@@ -373,6 +448,7 @@ export function useAnnotations({
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
+    setCommentState,
   };
 }
 
@@ -406,6 +482,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
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/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/components/ReviewSidebar.tsx b/src/os/versionControl/components/ReviewSidebar.tsx
index 3c626824..f1d1b876 100644
--- a/src/os/versionControl/components/ReviewSidebar.tsx
+++ b/src/os/versionControl/components/ReviewSidebar.tsx
@@ -1,44 +1,33 @@
 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 { 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,
-  AnnotationGroupWithState,
-  DiscussionComment,
+  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 { DocHandle } from "@automerge/automerge-repo";
-import { Check, MessageCircleIcon } from "lucide-react";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+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";
 
 type ReviewSidebarProps = {
   doc: HasVersionControlMetadata<unknown, unknown>;
   handle: DocHandle<HasVersionControlMetadata<unknown, unknown>>;
   datatypeId: DatatypeId;
-  annotationGroups: AnnotationGroupWithState<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;
+  setCommentState: (state: CommentState<unknown>) => void;
 };
 
 export type PositionMap = Record<string, { top: number; bottom: number }>;
@@ -50,126 +39,10 @@ export const ReviewSidebar = React.memo(
     datatypeId,
     annotationGroups,
     selectedAnchors,
-    changeDoc,
     setSelectedAnnotationGroupId,
-    hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
-    isCommentInputFocused,
-    setIsCommentInputFocused,
+    setCommentState,
   }: ReviewSidebarProps) => {
-    const [pendingCommentText, setPendingCommentText] = useState("");
-    const [annotationGroupIdOfActiveReply, setAnnotationGroupIdOfActiveReply] =
-      useState<string>();
-    const account = useCurrentAccount();
-
-    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 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("");
-
-      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);
-    };
-
-    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">
@@ -182,27 +55,12 @@ 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);
-                }}
-                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) {
@@ -219,49 +77,28 @@ export const ReviewSidebar = React.memo(
                     );
                   }
                 }}
+                setCommentState={setCommentState}
+                hasNext={index < annotationGroups.length - 1}
+                hasPrev={index > 0}
+                enableScrollSync
               />
             );
           })}
         </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>
-
-          <Textarea
-            value={pendingCommentText}
-            onChange={(event) => setPendingCommentText(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && event.metaKey) {
-                createDiscussion(pendingCommentText);
-                event.preventDefault();
-              }
-              event.stopPropagation();
-            }}
-            onFocus={() => setIsCommentInputFocused(true)}
-            onBlur={() => setIsCommentInputFocused(false)}
-          />
 
+        <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);
+              setCommentState({
+                type: "create",
+                target:
+                  selectedAnchors.length > 0 ? selectedAnchors : undefined,
+              });
             }}
           >
-            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>
@@ -270,22 +107,21 @@ 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;
-  setIsReplyBoxOpen: (isOpen: boolean) => void;
-  onResolveDiscussion: () => void;
-  onAddComment: (content: string) => void;
+  annotationGroup: AnnotationGroupWithUIState<unknown, unknown>;
   onSelectNext: () => void;
   onSelectPrev: () => void;
-  isHovered: boolean;
+  hasNext: boolean;
+  hasPrev: boolean;
+  enableScrollSync?: boolean; // todo: this shouldn't be a flag
   setIsHovered: (isHovered: boolean) => void;
   setIsSelected: (isSelected: boolean) => void;
+  setCommentState: (state: CommentState<unknown>) => void;
 }
 
-const AnnotationGroupView = forwardRef<
+export const AnnotationGroupView = forwardRef<
   HTMLDivElement,
   AnnotationGroupViewProps
 >(
@@ -295,24 +131,23 @@ const AnnotationGroupView = forwardRef<
       handle,
       datatypeId,
       annotationGroup,
-      isReplyBoxOpen,
-      setIsReplyBoxOpen,
-      onResolveDiscussion,
-      onAddComment: onReply,
-      isHovered,
       setIsHovered,
       setIsSelected,
+      hasNext,
+      hasPrev,
       onSelectNext,
       onSelectPrev,
+      setCommentState,
+      enableScrollSync,
     }: 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
     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
@@ -324,6 +159,42 @@ const AnnotationGroupView = forwardRef<
       }
     };
 
+    const onRevert = () => {
+      const patches = annotationGroup.annotations.flatMap((annotation) =>
+        "inversePatches" in annotation ? annotation.inversePatches : []
+      );
+
+      handle.change((doc) => {
+        for (const p of patches) {
+          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;
+            }
+          }
+        }
+      });
+    };
+
+    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
@@ -332,6 +203,67 @@ const AnnotationGroupView = forwardRef<
       });
     };
 
+    const onReply = () => {
+      setCommentState({
+        type: "create",
+        target: getAnnotationGroupId(annotationGroup),
+      });
+    };
+
+    const onUpdateCommentContentWithId = (id: string, content: string) => {
+      handle.change((doc) => {
+        const index = doc.discussions[
+          annotationGroup.discussion.id
+        ].comments.findIndex((comment) => comment.id === id);
+
+        A.updateText(
+          doc,
+          [
+            "discussions",
+            annotationGroup.discussion.id,
+            "comments",
+            index,
+            "content",
+          ],
+          content
+        );
+      });
+    };
+
+    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
@@ -351,9 +283,6 @@ const AnnotationGroupView = forwardRef<
         // select previous discussion
         if (evt.key === "k" || (evt.key === "p" && isMetaOrControlPressed)) {
           onSelectPrev();
-          evt.preventDefault();
-          evt.stopPropagation();
-
           return;
         }
 
@@ -370,7 +299,10 @@ const AnnotationGroupView = forwardRef<
         }
 
         if (evt.key === "Enter" && isMetaOrControlPressed) {
-          setIsReplyBoxOpen(true);
+          setCommentState({
+            type: "create",
+            target: getAnnotationGroupId(annotationGroup),
+          });
           evt.preventDefault();
           evt.stopPropagation();
         }
@@ -392,10 +324,10 @@ 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
@@ -427,9 +359,9 @@ 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 "
+                : ""
             }`}
           >
             <AnnotationsView
@@ -438,73 +370,65 @@ const AnnotationGroupView = forwardRef<
               datatypeId={datatypeId}
               annotations={annotationGroup.annotations}
             />
-
             {annotationGroup.discussion?.comments.map((comment, index) => (
-              <DiscussionCommentView comment={comment} key={comment.id} />
+              <DiscussionCommentView
+                contactUrl={comment.contactUrl}
+                timestamp={comment.timestamp}
+                content={comment.content}
+                key={comment.id}
+                docWithAssetsHandle={handle}
+                onChangeContent={(content) =>
+                  onUpdateCommentContentWithId(comment.id, content)
+                }
+                isBeingEdited={
+                  annotationGroup.comment?.type === "edit" &&
+                  annotationGroup.comment?.commentId === comment.id
+                }
+                setIsBeingEdited={(isBeingEdited) =>
+                  setCommentState(
+                    isBeingEdited
+                      ? { type: "edit", commentId: comment.id }
+                      : undefined
+                  )
+                }
+              />
             ))}
+
+            {annotationGroup.comment?.type === "create" && (
+              <DiscussionCommentView
+                contactUrl={account?.contactHandle.url}
+                docWithAssetsHandle={handle}
+                onChangeContent={(content) => {
+                  setCommentState(undefined);
+                  addCommentToAnnotationGroup(content);
+                }}
+                isBeingEdited={true}
+                setIsBeingEdited={() => {
+                  setCommentState(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"
             }`}
           >
-            <Popover
-              open={isReplyBoxOpen}
-              onOpenChange={(isOpen) => setIsReplyBoxOpen(isOpen)}
+            <Button
+              variant="ghost"
+              className="select-none px-2 flex flex-col w-fi"
+              onClick={onReply}
             >
-              <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>
+              <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
@@ -520,6 +444,21 @@ 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">
+                  (⌘ + ⌫)
+                </span>
+              </Button>
+            )}
           </div>
         </div>
       </div>
@@ -527,21 +466,130 @@ const AnnotationGroupView = forwardRef<
   }
 );
 
-const DiscussionCommentView = ({ comment }: { comment: DiscussionComment }) => {
+const DiscussionCommentView = ({
+  contactUrl,
+  timestamp,
+  content = "",
+  docWithAssetsHandle,
+  onChangeContent,
+  isBeingEdited,
+  setIsBeingEdited,
+}: {
+  contactUrl: AutomergeUrl;
+  timestamp?: number;
+  content?: string;
+  onChangeContent: (value: string) => void;
+  docWithAssetsHandle: DocHandle<HasAssets>;
+  isBeingEdited: boolean;
+  setIsBeingEdited: (isBeingEdited: boolean) => void;
+}) => {
+  const [isBeingHovered, setIsBeingHovered] = useState(false);
+  const [updatedText, setUpdatedContent] = useState<string>();
+  const account = useCurrentAccount();
+  const isOwnComment = account?.contactHandle.url === 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="">
-          <ContactAvatar url={comment.contactUrl} showName={true} size="sm" />
+        <div className="flex items-center gap-2">
+          <ContactAvatar url={contactUrl} showName={true} size="sm" />
+
+          {timestamp !== undefined && (
+            <div className="text-xs text-gray-400">
+              {getRelativeTimeString(timestamp)}
+            </div>
+          )}
         </div>
 
-        <div className="text-xs text-gray-400">
-          {getRelativeTimeString(comment.timestamp)}
-        </div>
+        {isOwnComment && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className={!isBeingHovered || isBeingEdited ? "invisible" : ""}
+            onClick={() => {
+              setIsBeingEdited(true);
+              setUpdatedContent(content);
+            }}
+          >
+            <PencilIcon size={14} />
+          </Button>
+        )}
       </div>
 
-      <div className="text-sm">
-        <p>{comment.content}</p>
+      <div className="flex flex-col gap-2">
+        <div
+          className={`text-sm ${
+            isBeingEdited
+              ? "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();
+              return;
+            }
+
+            if (event.key === "Escape") {
+              event.preventDefault();
+              event.stopPropagation();
+              setIsBeingEdited(false);
+              return;
+            }
+
+            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+              event.preventDefault();
+              event.stopPropagation();
+              onChangeContent(updatedText);
+              setIsBeingEdited(false);
+              return;
+            }
+          }}
+        >
+          <MarkdownInput
+            value={content}
+            onChange={isBeingEdited ? setUpdatedContent : undefined}
+            docWithAssetsHandle={docWithAssetsHandle}
+          />
+        </div>
+
+        {isBeingEdited && (
+          <div className="flex gap-1 justify-end">
+            <Button
+              variant="ghost"
+              className="py-0 px-2"
+              onClick={() => {
+                onChangeContent(updatedText);
+                setIsBeingEdited(false);
+                setUpdatedContent(undefined);
+              }}
+            >
+              <Check size={16} />
+            </Button>
+
+            <Button
+              variant="ghost"
+              className="py-0 px-2"
+              onClick={() => {
+                setIsBeingEdited(false);
+                setUpdatedContent(undefined);
+              }}
+            >
+              <XIcon size={16} />
+            </Button>
+          </div>
+        )}
+
+        <div className="right"></div>
       </div>
     </div>
   );
diff --git a/src/os/versionControl/components/VersionControlEditor.tsx b/src/os/versionControl/components/VersionControlEditor.tsx
index 36a2aa5a..de0e09bf 100644
--- a/src/os/versionControl/components/VersionControlEditor.tsx
+++ b/src/os/versionControl/components/VersionControlEditor.tsx
@@ -23,8 +23,8 @@ 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 { DatatypeId } from "@/os/datatypes";
+import { isMarkdownDoc } from "@/datatypes/essay";
+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";
@@ -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] =
@@ -312,6 +316,7 @@ export const VersionControlEditor: React.FC<{
     hoveredAnnotationGroupId,
     setHoveredAnnotationGroupId,
     setSelectedAnnotationGroupId,
+    setCommentState,
   } = useAnnotations({
     doc: activeDoc,
     datatypeId,
@@ -319,7 +324,37 @@ export const VersionControlEditor: React.FC<{
     isCommentInputFocused,
   });
 
-  const [sidebarMode, setSidebarMode] = useState<SidebarMode>("comments");
+  // 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,
@@ -334,6 +369,25 @@ 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 === "history"
+      ? 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;
+
+  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">
@@ -500,16 +554,14 @@ 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(
-                      (a) => a.type === "highlighted" && a.isEmphasized
-                    ).length > 0
+                    highlightSidebarButton
                       ? "bg-yellow-200 hover:bg-yellow-400"
                       : ""
                   }`}
@@ -525,7 +577,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
@@ -546,10 +598,15 @@ export const VersionControlEditor: React.FC<{
                   datatypeId={datatypeId}
                   docUrl={selectedBranch.url}
                   docHeads={docHeads}
-                  annotations={annotations}
+                  annotations={visibleAnnotations}
+                  annotationGroups={annotationGroups}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
+                  setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+                  setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+                  hideInlineComments={hideInlineComments}
+                  setCommentState={setCommentState}
                 />
               ) : (
                 <DocEditor
@@ -557,10 +614,15 @@ export const VersionControlEditor: React.FC<{
                   datatypeId={datatypeId}
                   docUrl={selectedBranch?.url ?? mainDocUrl}
                   docHeads={docHeads}
-                  annotations={annotations}
+                  annotations={visibleAnnotations}
+                  annotationGroups={annotationGroups}
                   actorIdToAuthor={actorIdToAuthor}
                   setSelectedAnchors={setSelectedAnchors}
                   setHoveredAnchor={setHoveredAnchor}
+                  setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+                  setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+                  hideInlineComments={hideInlineComments}
+                  setCommentState={setCommentState}
                 />
               )}
             </div>
@@ -568,11 +630,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>
@@ -580,14 +642,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>
@@ -596,7 +660,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}
@@ -608,25 +672,18 @@ export const VersionControlEditor: React.FC<{
                 setSelectedBranch={setSelectedBranch}
               />
             )}
-            {sidebarMode === "comments" && (
+            {sidebarMode === "review" && (
               <ReviewSidebar
                 doc={activeDoc}
                 handle={activeHandle}
                 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}
                 setIsCommentInputFocused={setIsCommentInputFocused}
+                setCommentState={setCommentState}
               />
             )}
           </div>
@@ -646,9 +703,14 @@ const DocEditor = <T, V>({
   docUrl,
   docHeads,
   annotations,
+  annotationGroups,
   actorIdToAuthor,
+  hideInlineComments,
   setSelectedAnchors,
   setHoveredAnchor,
+  setSelectedAnnotationGroupId,
+  setHoveredAnnotationGroupId,
+  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;
@@ -658,9 +720,14 @@ const DocEditor = <T, V>({
       docUrl={docUrl}
       docHeads={docHeads}
       annotations={annotations}
+      annotationGroups={annotationGroups}
       actorIdToAuthor={actorIdToAuthor}
+      hideInlineComments={hideInlineComments}
       setSelectedAnchors={setSelectedAnchors}
       setHoveredAnchor={setHoveredAnchor}
+      setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+      setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+      setCommentState={setCommentState}
     />
   );
 };
@@ -680,13 +747,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>
diff --git a/src/os/versionControl/schema.ts b/src/os/versionControl/schema.ts
index 7d6fa7b5..21a46bd3 100644
--- a/src/os/versionControl/schema.ts
+++ b/src/os/versionControl/schema.ts
@@ -1,6 +1,8 @@
 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;
@@ -76,8 +78,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> = {
@@ -85,8 +88,17 @@ export type AnnotationGroup<T, V> = {
   discussion?: Discussion<T>;
 };
 
-export type AnnotationGroupWithState<T, V> = AnnotationGroup<T, V> & {
+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?: AnnotationGroupCommentState;
 };
 
 export type Discussable<T> = {
@@ -105,28 +117,57 @@ 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 };
 
-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: RelativePatch[];
+};
 
-interface DeleteAnnotation<A, V> {
+type DeleteAnnotation<A, V> = {
   type: "deleted";
   anchor: A;
   deleted: V;
-}
+  inversePatches: RelativePatch[];
+};
 
-interface ChangeAnnotation<A, V> {
+type ChangeAnnotation<A, V> = {
   type: "changed";
   anchor: A;
   before: V;
   after: V;
-}
+  inversePatches: RelativePatch[];
+};
 
 export interface HighlightAnnotation<A, V> {
   type: "highlighted";
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/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/annotationDecorations.ts b/src/tools/essay/codemirrorPlugins/annotationDecorations.ts
index 79436a18..26c834df 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<
@@ -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/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/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/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",
diff --git a/src/tools/essay/components/CodeMirrorEditor.tsx b/src/tools/essay/components/CodeMirrorEditor.tsx
index 10a9d694..365adc06 100644
--- a/src/tools/essay/components/CodeMirrorEditor.tsx
+++ b/src/tools/essay/components/CodeMirrorEditor.tsx
@@ -5,62 +5,48 @@ 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/essay/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 { getCursorSafely } from "@/os/versionControl/utils";
-import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
-import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
+import { AnnotationWithUIState } from "@/os/versionControl/schema";
 import { useRepo } from "@automerge/automerge-repo-react-hooks";
-import { AssetsDoc } from "../assets";
-import { dropCursor } from "../codemirrorPlugins/dropCursor";
+import { AssetsDoc, HasAssets } from "../assets";
 import { clickableMarkdownLinksPlugin } from "../codemirrorPlugins/clickableMarkdownLinks";
+import { dragAndDropFilesPlugin } from "../codemirrorPlugins/dragAndDropFiles";
+import { dropCursor } from "../codemirrorPlugins/dropCursor";
+import { previewImagesPlugin } from "../codemirrorPlugins/previewMarkdownImages";
+import { isEqual } from "lodash";
 
 export type TextSelection = {
   from: number;
@@ -68,59 +54,145 @@ export type TextSelection = {
   yCoord: number;
 };
 
-export type DiffStyle = "normal" | "private";
+type MarkdownInputProps = {
+  value: string;
+
+  // 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
+  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);
+
+  // trigger a remount when value has changed from the outside
+  useEffect(() => {
+    if (editorView && editorView.state.doc.toString() !== value) {
+      setRemountEditor({});
+    }
+  }, [value, editorView]);
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    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([
+          ...defaultKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...foldKeymap,
+          ...completionKeymap,
+          indentWithTab,
+        ]),
+        EditorView.lineWrapping,
+        essayTheme,
+        markdown({
+          codeLanguages: languages,
+        }),
+        indentUnit.of("    "),
+        syntaxHighlighting(markdownStyles),
 
-export type EditorProps = {
+        frontmatterPlugin,
+        annotationsField,
+        annotationDecorations,
+        previewFiguresPlugin,
+        docWithAssetsHandle
+          ? [
+              dragAndDropFilesPlugin({
+                createFileReference: (file) =>
+                  createFileReferenceInDoc(repo, docWithAssetsHandle, file),
+              }),
+              previewImagesPlugin(docWithAssetsHandle, repo),
+            ]
+          : [],
+        highlightKeywordsPlugin,
+        tableOfContentsPreviewPlugin,
+        codeMonospacePlugin,
+        lineWrappingPlugin,
+        onChange
+          ? EditorView.updateListener.of((update) => {
+              if (update.docChanged) {
+                onChange(update.state.doc.toString());
+              }
+            })
+          : [],
+      ],
+
+      parent: container,
+    });
+
+    view.focus();
+
+    setEditorView(view);
+
+    return () => {
+      view.destroy();
+    };
+  }, [container, remountEditor, onChange]);
+
+  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;
+  setSelection?: (selection: TextSelection) => void;
+  setHasFocus?: (hasFocus) => void;
+  setView?: (view: EditorView) => void;
+  setSelectedAnchors?: (anchors: MarkdownDocAnchor[]) => void;
   readOnly?: boolean;
   docHeads?: A.Heads;
   annotations?: AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[];
-  diffStyle: DiffStyle;
-  debugHighlights?: DebugHighlight[];
-  onOpenSnippet?: (range: SelectionRange) => void;
-  foldRanges?: { from: number; to: number }[];
-  isCommentBoxOpen?: boolean;
   setEditorContainerElement?: (container: HTMLDivElement) => void;
 };
 
-export function MarkdownEditor({
+export function MarkdownDocEditor({
   editorContainer,
   handle,
   path,
-  setSelectedAnchors,
-  setView,
+  setSelection = () => {},
+  setHasFocus = () => {},
+  setSelectedAnchors = () => {},
+  setView = () => {},
   readOnly,
   docHeads,
   annotations,
-  debugHighlights,
-  onOpenSnippet,
-  foldRanges,
   setEditorContainerElement,
-}: EditorProps) {
+}: MarkdownDocEditorProps) {
   const repo = useRepo();
   const containerRef = useRef(null);
   const editorRoot = useRef<EditorView>(null);
   const [editorCrashed, setEditorCrashed] = useState<boolean>(false);
 
-  const handleReady = handle.isReady();
+  const annotationsRef = useRef<
+    AnnotationWithUIState<ResolvedMarkdownDocAnchor, string>[]
+  >([]);
+  annotationsRef.current = annotations;
 
-  // Propagate debug highlights into codemirror
-  useEffect(() => {
-    editorRoot.current?.dispatch({
-      effects: setDebugHighlightsEffect.of(debugHighlights ?? []),
-    });
-  }, [debugHighlights]);
+  const handleReady = handle.isReady();
 
-  // propagate fold ranges into codemirror
-  useEffect(() => {
-    editorRoot.current?.dispatch({
-      effects: (foldRanges ?? []).map((range) => foldEffect.of(range)),
-    });
-  }, [foldRanges]);
+  useScrollAnnotationsIntoView(annotations, editorRoot);
 
   // Propagate annotations into codemirror
   useEffect(() => {
@@ -130,8 +202,6 @@ export function MarkdownEditor({
     });
   }, [annotations, editorRoot.current]);
 
-  useScrollAnnotationsIntoView(annotations, editorRoot);
-
   // This big useEffect sets up the editor view
   useEffect(() => {
     if (!handleReady || !editorContainer) {
@@ -141,6 +211,8 @@ export function MarkdownEditor({
     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: [
@@ -151,71 +223,16 @@ 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([
-          {
-            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,
@@ -229,7 +246,7 @@ export function MarkdownEditor({
         // Now our custom stuff: Automerge collab, comment threads, etc.
         automergeSyncPlugin({
           handle,
-          path: ["content"],
+          path,
         }),
         frontmatterPlugin,
         annotationsField,
@@ -241,41 +258,65 @@ export function MarkdownEditor({
         tableOfContentsPreviewPlugin,
         codeMonospacePlugin,
         lineWrappingPlugin,
-        debugHighlightsField,
-        debugHighlightsDecorations,
-        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) {
+        let previousSelection = view.state.selection;
+
         // TODO: can some of these dispatch handlers be factored out into plugins?
         try {
           view.update([transaction]);
 
-          // 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 (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), 200);
+            previousHasFocus = view.hasFocus;
+          }
+
+          // new selection is sometimes set
+          if (
+            transaction.newSelection &&
+            !isEqual(view.state.selection, previousSelection)
+          ) {
             const selection = view.state.selection.ranges[0];
 
             if (selection) {
-              setSelectedAnchors([
-                {
-                  fromCursor: getCursorSafely(doc, ["content"], selection.from),
-                  toCursor: getCursorSafely(doc, ["content"], selection.to),
-                },
-              ]);
+              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 =
+                  annotationsRef.current.flatMap((annotation) =>
+                    annotation.anchor.fromPos <= cursorPos &&
+                    annotation.anchor.toPos > cursorPos
+                      ? [annotation.anchor]
+                      : []
+                  );
+
+                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([]);
             }
@@ -360,6 +401,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/CommentsSidebar.tsx b/src/tools/essay/components/CommentsSidebar.tsx
new file mode 100644
index 00000000..d370f297
--- /dev/null
+++ b/src/tools/essay/components/CommentsSidebar.tsx
@@ -0,0 +1,138 @@
+import * as A from "@automerge/automerge/next";
+import { AnnotationGroupWithPosition } from "../utils";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+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";
+import { MessageCircle } from "lucide-react";
+import { TextSelection } from "./CodeMirrorEditor";
+import { CommentState } from "@/os/versionControl/schema";
+
+export const CommentsSidebar = ({
+  doc,
+  handle,
+  selection,
+  hasEditorFocus,
+  hideInlineComments,
+  annotationGroupsWithPosition,
+  setSelectedAnnotationGroupId,
+  setHoveredAnnotationGroupId,
+  setCommentState,
+}: {
+  doc: MarkdownDoc;
+  handle: DocHandle<MarkdownDoc>;
+  selection: TextSelection;
+  hasEditorFocus: boolean;
+  hideInlineComments: boolean;
+  annotationGroupsWithPosition: AnnotationGroupWithPosition[];
+  setSelectedAnnotationGroupId: (id: string) => void;
+  setHoveredAnnotationGroupId: (id: string) => void;
+  setCommentState: (state: CommentState<MarkdownDocAnchor>) => void;
+}) => {
+  return (
+    <div className="relative">
+      {!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" : "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)
+                    );
+                  }
+                }}
+                hasNext={index < annotationGroupsWithPosition.length - 1}
+                hasPrev={index > 0}
+                setCommentState={setCommentState}
+              />
+            </div>
+          );
+        })}
+
+      {selection && selection.from !== selection.to && hasEditorFocus && (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger
+              className="absolute"
+              style={{
+                top: selection.yCoord + 24,
+                left: -60,
+              }}
+              asChild
+            >
+              <Button
+                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);
+
+                  setCommentState({
+                    type: "create",
+                    target: [
+                      {
+                        fromCursor: A.getCursor(
+                          doc,
+                          ["content"],
+                          selection.from
+                        ),
+                        toCursor: A.getCursor(doc, ["content"], to),
+                      },
+                    ],
+                  });
+                }}
+              >
+                <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/EssayAnnotations.tsx b/src/tools/essay/components/EssayAnnotations.tsx
index f8e65a61..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/markdown/schema";
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
 import { truncate } from "lodash";
 import { AnnotationsViewProps } from "@/os/tools";
 
@@ -10,20 +7,26 @@ 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}
+                  {annotation.added.replace(/ /g, "\u00A0")}
                 </span>
               </div>
             );
 
           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,27 +35,39 @@ 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 })}
+                  {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>
             );
 
           case "highlighted":
-            if (annotation.value.length === 0) {
-              return (
-                <div className="text-xs text-gray-500 italic">
-                  No text selected
-                </div>
-              );
+            // 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) ||
+                  (a.type === "changed" && a.after === annotation.value)
+              )
+            ) {
+              return null;
             }
+
             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>
diff --git a/src/tools/essay/components/EssayEditor.tsx b/src/tools/essay/components/EssayEditor.tsx
index ea5d9a78..39a5c2eb 100644
--- a/src/tools/essay/components/EssayEditor.tsx
+++ b/src/tools/essay/components/EssayEditor.tsx
@@ -1,40 +1,46 @@
 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, TextSelection } from "./CodeMirrorEditor";
 
-import { useEffect, useMemo, useState } from "react";
 import {
   MarkdownDoc,
   MarkdownDocAnchor,
   ResolvedMarkdownDocAnchor,
-} from "@/datatypes/markdown";
+} from "@/datatypes/essay";
+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 { AnnotationWithUIState } from "@/os/versionControl/schema";
 import { getCursorPositionSafely } from "@/os/versionControl/utils";
 import { isEqual, uniq } from "lodash";
 import "../index.css";
+import { useAnnotationGroupsWithPosition } from "../utils";
+import { CommentsSidebar } from "./CommentsSidebar";
 
 export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
   const {
     docUrl,
     docHeads,
     annotations = [],
+    annotationGroups = [],
     setSelectedAnchors = () => {},
     actorIdToAuthor,
+    hideInlineComments,
+    setSelectedAnnotationGroupId,
+    setHoveredAnnotationGroupId,
+    setCommentState,
   } = props;
 
-  const account = useCurrentAccount();
-  const [doc, changeDoc] = useDocument<MarkdownDoc>(docUrl); // used to trigger re-rendering when the doc loads
+  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);
   const [editorView, setEditorView] = useState<EditorView>();
-  const [isCommentBoxOpen, setIsCommentBoxOpen] = useState(false);
   const [editorContainer, setEditorContainer] = useState<HTMLDivElement>(null);
   const readOnly = docHeads && !isEqual(docHeads, A.getHeads(doc));
 
@@ -55,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
         ? []
         : [
             {
@@ -66,6 +72,13 @@ export const EssayEditor = (props: EditorProps<MarkdownDocAnchor, string>) => {
     });
   }, [doc, annotations]);
 
+  const annotationGroupsWithPosition = useAnnotationGroupsWithPosition({
+    doc,
+    editorView,
+    editorContainer,
+    annotationGroups,
+  });
+
   if (!doc) {
     return null;
   }
@@ -83,26 +96,40 @@ 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 "
             }`}
           >
-            <MarkdownEditor
+            <MarkdownDocEditor
               editorContainer={editorContainer}
-              diffStyle="normal"
               handle={handle}
               path={["content"]}
-              setSelectedAnchors={setSelectedAnchors ?? (() => {})}
+              setSelectedAnchors={setSelectedAnchors}
               setView={setEditorView}
+              setSelection={setSelection}
+              setHasFocus={setHasEditorFocus}
               annotations={resolvedAnnotations}
               readOnly={readOnly ?? false}
               docHeads={docHeads}
-              isCommentBoxOpen={isCommentBoxOpen}
             />
           </div>
         </div>
+
+        <div>
+          <CommentsSidebar
+            doc={doc}
+            hideInlineComments={hideInlineComments}
+            handle={handle}
+            selection={selection}
+            hasEditorFocus={hasEditorFocus}
+            annotationGroupsWithPosition={annotationGroupsWithPosition}
+            setSelectedAnnotationGroupId={setSelectedAnnotationGroupId}
+            setHoveredAnnotationGroupId={setHoveredAnnotationGroupId}
+            setCommentState={setCommentState}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/tools/essay/utils.ts b/src/tools/essay/utils.ts
new file mode 100644
index 00000000..0a3e7e62
--- /dev/null
+++ b/src/tools/essay/utils.ts
@@ -0,0 +1,189 @@
+import { MarkdownDoc, MarkdownDocAnchor } from "@/datatypes/essay";
+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,
+  string
+> & {
+  yCoord: number;
+};
+
+// a very rough approximation; needs to be better but being perfect seems hard
+const estimatedHeightOfAnnotationGroup = (
+  annotationGroup: AnnotationGroupWithUIState<MarkdownDocAnchor, string>
+) => {
+  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;
+  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.
+// 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;
+};
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 (
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 = ({
diff --git a/yarn.lock b/yarn.lock
index 0ad23e0b..70997195 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"
@@ -2376,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"
@@ -3495,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"