feat: comments

* create comment
* reply to comment thread
* edit comment
* delete comment
* resolve comment

client/src/features/editor/atoms/editorAtom.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+import { Editor } from '@tiptap/core';
+
+export const editorAtom = atom<Editor | null>(null);

client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -1,11 +1,14 @@
 import { BubbleMenu, BubbleMenuProps, isNodeSelection } from '@tiptap/react';
 import { FC, useState } from 'react';
-import { IconBold, IconCode, IconItalic, IconStrikethrough, IconUnderline } from '@tabler/icons-react';
+import { IconBold, IconCode, IconItalic, IconStrikethrough, IconUnderline, IconMessage } from '@tabler/icons-react';
 import clsx from 'clsx';
 import classes from './bubble-menu.module.css';
 import { ActionIcon, rem, Tooltip } from '@mantine/core';
 import { ColorSelector } from './color-selector';
 import { NodeSelector } from './node-selector';
+import { draftCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
+import { useAtom } from 'jotai';
+import { v4 as uuidv4 } from 'uuid';
 
 export interface BubbleMenuItem {
   name: string;
@@ -17,6 +20,9 @@ export interface BubbleMenuItem {
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, 'children'>;
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
+  const [showCommentPopup, setShowCommentPopup] = useAtom<boolean>(showCommentPopupAtom);
+  const [draftCommentId, setDraftCommentId] = useAtom<string | null>(draftCommentIdAtom);
+
   const items: BubbleMenuItem[] = [
     {
       name: 'bold',
@@ -50,6 +56,20 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     },
   ];
 
+  const commentItem: BubbleMenuItem = {
+
+    name: 'comment',
+    isActive: () => props.editor.isActive('comment'),
+    command: () => {
+      const commentId = uuidv4();
+
+      props.editor.chain().focus().setCommentDecoration().run();
+      setDraftCommentId(commentId);
+      setShowCommentPopup(true);
+    },
+    icon: IconMessage,
+  };
+
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
     shouldShow: ({ state, editor }) => {
@@ -92,7 +112,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
       <ActionIcon.Group>
         {items.map((item, index) => (
-          <Tooltip key={index} label={item.name}>
+          <Tooltip key={index} label={item.name} withArrow>
 
             <ActionIcon key={index} variant="default" size="lg" radius="0" aria-label={item.name}
                         className={clsx({ [classes.active]: item.isActive() })}
@@ -115,6 +135,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         }}
       />
 
+      <Tooltip label={commentItem.name} withArrow>
+
+        <ActionIcon variant="default" size="lg" radius="0" aria-label={commentItem.name}
+                    style={{ border: 'none' }}
+                    onClick={commentItem.command}>
+          <IconMessage style={{ width: rem(16) }} stroke={2} />
+        </ActionIcon>
+      </Tooltip>
+
     </BubbleMenu>
   );
 };

client/src/features/editor/editor.tsx

@@ -1,40 +1,29 @@
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 import { EditorContent, useEditor } from '@tiptap/react';
-import { StarterKit } from '@tiptap/starter-kit';
 import { Placeholder } from '@tiptap/extension-placeholder';
-import { Collaboration } from '@tiptap/extension-collaboration';
-import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
 import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
 import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
 import { IndexeddbPersistence } from 'y-indexeddb';
-import { TextAlign } from '@tiptap/extension-text-align';
-import { Highlight } from '@tiptap/extension-highlight';
-import { Superscript } from '@tiptap/extension-superscript';
-import SubScript from '@tiptap/extension-subscript';
-import { Link } from '@tiptap/extension-link';
-import { Underline } from '@tiptap/extension-underline';
-import { Typography } from '@tiptap/extension-typography';
-import { TaskItem } from '@tiptap/extension-task-item';
-import { TaskList } from '@tiptap/extension-task-list';
 import classes from '@/features/editor/styles/editor.module.css';
 import '@/features/editor/styles/index.css';
-import { TrailingNode } from '@/features/editor/extensions/trailing-node';
-import DragAndDrop from '@/features/editor/extensions/drag-handle';
 import { EditorBubbleMenu } from '@/features/editor/components/bubble-menu/bubble-menu';
-import { TextStyle } from '@tiptap/extension-text-style';
-import { Color } from '@tiptap/extension-color';
-import SlashCommand from '@/features/editor/extensions/slash-command';
 import { Document } from '@tiptap/extension-document';
 import { Text } from '@tiptap/extension-text';
 import { Heading } from '@tiptap/extension-heading';
-import usePage from '@/features/page/hooks/usePage';
+import usePage from '@/features/page/hooks/use-page';
 import { useDebouncedValue } from '@mantine/hooks';
 import { pageAtom } from '@/features/page/atoms/page-atom';
 import { IPage } from '@/features/page/types/page.types';
+import { Comment } from '@/features/editor/extensions/comment/comment';
+import { desktopAsideAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { activeCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
+import CommentDialog from '@/features/comment/components/comment-dialog';
+import { editorAtom } from '@/features/editor/atoms/editorAtom';
+import { collabExtensions, mainExtensions } from '@/features/editor/extensions';
 
 interface EditorProps {
   pageId: string,
@@ -100,10 +89,14 @@ interface TiptapEditorProps {
 
 function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
   const [currentUser] = useAtom(currentUserAtom);
+  const [, setEditor] = useAtom(editorAtom);
   const [page, setPage] = useAtom(pageAtom<IPage>(pageId));
   const [debouncedTitleState, setDebouncedTitleState] = useState('');
   const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 1000);
   const { updatePageMutation } = usePage();
+  const [desktopAsideOpened, setDesktopAsideOpened] = useAtom<boolean>(desktopAsideAtom);
+  const [activeCommentId, setActiveCommentId] = useAtom<string | null>(activeCommentIdAtom);
+  const [showCommentPopup, setShowCommentPopup] = useAtom<boolean>(showCommentPopupAtom);
 
   const titleEditor = useEditor({
     extensions: [
@@ -133,46 +126,20 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
   }, []);
 
   useEffect(() => {
-    if (debouncedTitle !== "") {
+    if (debouncedTitle !== '') {
       updatePageMutation({ id: pageId, title: debouncedTitle });
     }
   }, [debouncedTitle]);
 
   const extensions = [
-    StarterKit.configure({
-      history: false,
-      dropcursor: {
-        width: 3,
-        color: '#70CFF8',
+    ...mainExtensions,
+    ...collabExtensions(ydoc, provider),
+    Comment.configure({
+      HTMLAttributes: {
+        class: 'comment-mark',
       },
     }),
-    Collaboration.configure({
-      document: ydoc,
-    }),
-    CollaborationCursor.configure({
-      provider,
-    }),
-    Placeholder.configure({
-      placeholder: 'Enter "/" for commands',
-    }),
-    TextAlign.configure({ types: ['heading', 'paragraph'] }),
-    TaskList,
-    TaskItem.configure({
-      nested: true,
-    }),
-    Underline,
-    Link,
-    Superscript,
-    SubScript,
-    Highlight.configure({
-      multicolor: true,
-    }),
-    Typography,
-    TrailingNode,
-    DragAndDrop,
-    TextStyle,
-    Color,
-    SlashCommand,
+
   ];
 
   const editor = useEditor({
@@ -190,6 +157,11 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
         },
       },
     },
+    onCreate({ editor }) {
+      if (editor) {
+        setEditor(editor);
+      }
+    },
     onUpdate({ editor }) {
       const { selection } = editor.state;
       if (!selection.empty) {
@@ -225,6 +197,29 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
     }
   }
 
+  const handleActiveCommentEvent = (event) => {
+    const { commentId } = event.detail;
+    setActiveCommentId(commentId);
+    setDesktopAsideOpened(true);
+
+    const selector = `div[data-comment-id="${commentId}"]`;
+    const commentElement = document.querySelector(selector);
+    commentElement?.scrollIntoView();
+  };
+
+  useEffect(() => {
+    document.addEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
+    return () => {
+      document.removeEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
+    };
+  }, []);
+
+  useEffect(() => {
+    setActiveCommentId(null);
+    setDesktopAsideOpened(false);
+    setShowCommentPopup(false);
+  }, [pageId]);
+
   return (
     <>
       <div className={classes.editor}>
@@ -232,6 +227,10 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
         <EditorContent editor={titleEditor} onKeyDown={handleTitleKeyDown} />
         <EditorContent editor={editor} />
       </div>
+
+      {showCommentPopup && (
+        <CommentDialog editor={editor} pageId={pageId} />
+      )}
     </>
   );
 }

client/src/features/editor/extensions.ts

@@ -0,0 +1,61 @@
+import { StarterKit } from '@tiptap/starter-kit';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { TaskList } from '@tiptap/extension-task-list';
+import { TaskItem } from '@tiptap/extension-task-item';
+import { Underline } from '@tiptap/extension-underline';
+import { Link } from '@tiptap/extension-link';
+import { Superscript } from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { Highlight } from '@tiptap/extension-highlight';
+import { Typography } from '@tiptap/extension-typography';
+import { TrailingNode } from '@/features/editor/extensions/trailing-node';
+import DragAndDrop from '@/features/editor/extensions/drag-handle';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
+import SlashCommand from '@/features/editor/extensions/slash-command';
+import { Collaboration } from '@tiptap/extension-collaboration';
+import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
+import * as Y from 'yjs';
+
+export const mainExtensions = [
+  StarterKit.configure({
+    history: false,
+    dropcursor: {
+      width: 3,
+      color: '#70CFF8',
+    },
+  }),
+  Placeholder.configure({
+    placeholder: 'Enter "/" for commands',
+  }),
+  TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  TaskList,
+  TaskItem.configure({
+    nested: true,
+  }),
+  Underline,
+  Link,
+  Superscript,
+  SubScript,
+  Highlight.configure({
+    multicolor: true,
+  }),
+  Typography,
+  TrailingNode,
+  DragAndDrop,
+  TextStyle,
+  Color,
+  SlashCommand,
+];
+
+type CollabExtensions = (ydoc: Y.Doc, provider: any) => any[];
+
+export const collabExtensions: CollabExtensions = (ydoc, provider) => [
+  Collaboration.configure({
+    document: ydoc,
+  }),
+  CollaborationCursor.configure({
+    provider,
+  }),
+];

client/src/features/editor/extensions/comment/comment-decoration.ts

@@ -0,0 +1,35 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { commentDecorationMetaKey, commentMarkClass } from '@/features/editor/extensions/comment/comment';
+
+export function commentDecoration(): Plugin {
+  const commentDecorationPlugin = new PluginKey('commentDecoration');
+
+  return new Plugin({
+    key: commentDecorationPlugin,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, oldSet) {
+        const decorationMeta = tr.getMeta(commentDecorationMetaKey);
+
+        if (decorationMeta) {
+          const { from, to } = tr.selection;
+          const decoration = Decoration.inline(from, to, { class: commentMarkClass });
+          return DecorationSet.create(tr.doc, [decoration]);
+        } else if (decorationMeta === false) {
+          return DecorationSet.empty;
+        }
+
+        return oldSet.map(tr.mapping, tr.doc);
+      },
+    },
+
+    props: {
+      decorations: (state) => {
+        return commentDecorationPlugin.getState(state);
+      },
+    },
+  });
+}

client/src/features/editor/extensions/comment/comment.ts

@@ -0,0 +1,136 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { commentDecoration } from '@/features/editor/extensions/comment/comment-decoration';
+
+export interface ICommentOptions {
+  HTMLAttributes: Record<string, any>,
+}
+
+export interface ICommentStorage {
+  activeCommentId: string | null;
+}
+
+export const commentMarkClass = 'comment-mark';
+export const commentDecorationMetaKey = 'decorateComment';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    comment: {
+      setCommentDecoration: () => ReturnType,
+      unsetCommentDecoration: () => ReturnType,
+      setComment: (commentId: string) => ReturnType,
+      unsetComment: (commentId: string) => ReturnType,
+    };
+  }
+}
+
+export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
+    name: 'comment',
+    exitable: true,
+    inclusive: false,
+
+    addOptions() {
+      return {
+        HTMLAttributes: {},
+      };
+    },
+
+    addStorage() {
+      return {
+        activeCommentId: null,
+      };
+    },
+
+    addAttributes() {
+      return {
+        commentId: {
+          default: null,
+          parseHTML: element => element.getAttribute('data-comment-id'),
+          renderHTML: (attributes) => {
+            if (!attributes.commentId) return;
+
+            return {
+              'data-comment-id': attributes.commentId,
+            };
+          },
+        },
+      };
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: 'span[data-comment-id]',
+          getAttrs: (el) => !!(el as HTMLSpanElement).getAttribute('data-comment-id')?.trim() && null,
+        },
+      ];
+    },
+
+    addCommands() {
+      return {
+        setCommentDecoration: () => ({ tr, dispatch }) => {
+          tr.setMeta(commentDecorationMetaKey, true);
+          if (dispatch) dispatch(tr);
+          return true;
+        },
+        unsetCommentDecoration: () => ({ tr, dispatch }) => {
+          tr.setMeta(commentDecorationMetaKey, false);
+          if (dispatch) dispatch(tr);
+          return true;
+        },
+        setComment: (commentId) => ({ commands }) => {
+          if (!commentId) return false;
+          return commands.setMark(this.name, { commentId });
+        },
+        unsetComment:
+          (commentId) =>
+            ({ tr, dispatch }) => {
+              if (!commentId) return false;
+
+              tr.doc.descendants((node, pos) => {
+                const from = pos;
+                const to = pos + node.nodeSize;
+
+                const commentMark = node.marks.find(mark =>
+                  mark.type.name === this.name && mark.attrs.commentId === commentId);
+
+                if (commentMark) {
+                  tr = tr.removeMark(from, to, commentMark);
+                }
+              });
+
+              return dispatch?.(tr);
+            },
+      };
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      const commentId = HTMLAttributes?.['data-comment-id'] || null;
+      const elem = document.createElement('span');
+
+      Object.entries(
+        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ).forEach(([attr, val]) => elem.setAttribute(attr, val));
+
+      elem.addEventListener('click', (e) => {
+        const selection = document.getSelection();
+        if (selection.type === 'Range') return;
+
+        this.storage.activeCommentId = commentId;
+        const commentEventClick = new CustomEvent('ACTIVE_COMMENT_EVENT', {
+          bubbles: true,
+          detail: { commentId },
+        });
+
+        elem.dispatchEvent(commentEventClick);
+      });
+
+      return elem;
+    },
+
+    addProseMirrorPlugins(): Plugin[] {
+      // @ts-ignore
+      return [commentDecoration()];
+    },
+
+  },
+);

client/src/features/editor/styles/core.css

@@ -94,3 +94,7 @@
     cursor: col-resize;
 }
 
+.comment-mark {
+    background: rgba(0,203,15,0.2);
+    border-bottom: 2px solid #0ca678;
+}