fix tiptap editor types

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -1,26 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { Avatar, Dialog, Group, Stack, Text } from '@mantine/core';
+import { Avatar, Dialog, Group, Stack, Text } from "@mantine/core";
-import { useClickOutside } from '@mantine/hooks';
+import { useClickOutside } from "@mantine/hooks";
-import { useAtom } from 'jotai';
+import { useAtom } from "jotai";
 import {
   activeCommentIdAtom,
   draftCommentIdAtom,
   showCommentPopupAtom,
-} from '@/features/comment/atoms/comment-atom';
+} from "@/features/comment/atoms/comment-atom";
-import { Editor } from '@tiptap/core';
+import CommentEditor from "@/features/comment/components/comment-editor";
-import CommentEditor from '@/features/comment/components/comment-editor';
+import CommentActions from "@/features/comment/components/comment-actions";
-import CommentActions from '@/features/comment/components/comment-actions';
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useCreateCommentMutation } from "@/features/comment/queries/comment-query";
-import { useCreateCommentMutation } from '@/features/comment/queries/comment-query';
+import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom";
-import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { useEditor } from "@tiptap/react";
 
 interface CommentDialogProps {
-  editor: Editor,
+  editor: ReturnType<typeof useEditor>;
-  pageId: string,
+  pageId: string;
 }
 
 function CommentDialog({ editor, pageId }: CommentDialogProps) {
-  const [comment, setComment] = useState('');
+  const [comment, setComment] = useState("");
   const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
@@ -34,6 +34,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
 
   const handleDialogClose = () => {
     setShowCommentPopup(false);
+    // @ts-ignore
     editor.chain().focus().unsetCommentDecoration().run();
   };
 
@@ -52,11 +53,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         selection: selectedText,
       };
 
-      const createdComment = await createCommentMutation.mutateAsync(commentData);
+      const createdComment =
-      editor.chain().setComment(createdComment.id).unsetCommentDecoration().run();
+        await createCommentMutation.mutateAsync(commentData);
+      editor
+        .chain()
+        .setContent(createdComment.id)
+        // @ts-ignore
+        .unsetCommentDecoration()
+        .run();
       setActiveCommentId(createdComment.id);
 
-      setAsideState({ tab: 'comments', isAsideOpen: true });
+      setAsideState({ tab: "comments", isAsideOpen: true });
       setTimeout(() => {
         const selector = `div[data-comment-id="${createdComment.id}"]`;
         const commentElement = document.querySelector(selector);
@@ -64,7 +71,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
       });
     } finally {
       setShowCommentPopup(false);
-      setDraftCommentId('');
+      setDraftCommentId("");
     }
   };
 
@@ -73,24 +80,38 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   };
 
   return (
-    <Dialog opened={true} onClose={handleDialogClose} ref={useClickOutsideRef} size="lg" radius="md"
+    <Dialog
-            w={300} position={{ bottom: 500, right: 50 }} withCloseButton withBorder>
+      opened={true}
-
+      onClose={handleDialogClose}
+      ref={useClickOutsideRef}
+      size="lg"
+      radius="md"
+      w={300}
+      position={{ bottom: 500, right: 50 }}
+      withCloseButton
+      withBorder
+    >
       <Stack gap={2}>
         <Group>
-          <Avatar size="sm" c="blue">{currentUser.user.name.charAt(0)}</Avatar>
+          <Avatar size="sm" c="blue">
+            {currentUser.user.name.charAt(0)}
+          </Avatar>
           <div style={{ flex: 1 }}>
             <Group justify="space-between" wrap="nowrap">
-              <Text size="sm" fw={500} lineClamp={1}>{currentUser.user.name}</Text>
+              <Text size="sm" fw={500} lineClamp={1}>
+                {currentUser.user.name}
+              </Text>
             </Group>
           </div>
         </Group>
 
-        <CommentEditor onUpdate={handleCommentEditorChange} placeholder="Write a comment"
+        <CommentEditor
-                       editable={true} autofocus={true}
+          onUpdate={handleCommentEditorChange}
-        />
+          placeholder="Write a comment"
-        <CommentActions onSave={handleAddComment} isLoading={isPending}
+          editable={true}
+          autofocus={true}
         />
+        <CommentActions onSave={handleAddComment} isLoading={isPending} />
       </Stack>
     </Dialog>
   );

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

@@ -1,14 +1,29 @@
-import { BubbleMenu, BubbleMenuProps, isNodeSelection } from '@tiptap/react';
+import {
-import { FC, useState } from 'react';
+  BubbleMenu,
-import { IconBold, IconCode, IconItalic, IconStrikethrough, IconUnderline, IconMessage } from '@tabler/icons-react';
+  BubbleMenuProps,
-import clsx from 'clsx';
+  isNodeSelection,
-import classes from './bubble-menu.module.css';
+  useEditor,
-import { ActionIcon, rem, Tooltip } from '@mantine/core';
+} from "@tiptap/react";
-import { ColorSelector } from './color-selector';
+import { FC, useState } from "react";
-import { NodeSelector } from './node-selector';
+import {
-import { draftCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
+  IconBold,
-import { useAtom } from 'jotai';
+  IconCode,
-import { v4 as uuidv4 } from 'uuid';
+  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,7 +32,9 @@ export interface BubbleMenuItem {
   icon: typeof IconBold;
 }
 
-type EditorBubbleMenuProps = Omit<BubbleMenuProps, 'children'>;
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
+  editor: ReturnType<typeof useEditor>;
+};
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
@@ -25,44 +42,44 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
   const items: BubbleMenuItem[] = [
     {
-      name: 'bold',
+      name: "bold",
-      isActive: () => props.editor.isActive('bold'),
+      isActive: () => props.editor.isActive("bold"),
       command: () => props.editor.chain().focus().toggleBold().run(),
       icon: IconBold,
     },
     {
-      name: 'italic',
+      name: "italic",
-      isActive: () => props.editor.isActive('italic'),
+      isActive: () => props.editor.isActive("italic"),
       command: () => props.editor.chain().focus().toggleItalic().run(),
       icon: IconItalic,
     },
     {
-      name: 'underline',
+      name: "underline",
-      isActive: () => props.editor.isActive('underline'),
+      isActive: () => props.editor.isActive("underline"),
       command: () => props.editor.chain().focus().toggleUnderline().run(),
       icon: IconUnderline,
     },
     {
-      name: 'strike',
+      name: "strike",
-      isActive: () => props.editor.isActive('strike'),
+      isActive: () => props.editor.isActive("strike"),
       command: () => props.editor.chain().focus().toggleStrike().run(),
       icon: IconStrikethrough,
     },
     {
-      name: 'code',
+      name: "code",
-      isActive: () => props.editor.isActive('code'),
+      isActive: () => props.editor.isActive("code"),
       command: () => props.editor.chain().focus().toggleCode().run(),
       icon: IconCode,
     },
   ];
 
   const commentItem: BubbleMenuItem = {
-
+    name: "comment",
-    name: 'comment',
+    isActive: () => props.editor.isActive("comment"),
-    isActive: () => props.editor.isActive('comment'),
     command: () => {
       const commentId = uuidv4();
 
+      // @ts-ignore
       props.editor.chain().focus().setCommentDecoration().run();
       setDraftCommentId(commentId);
       setShowCommentPopup(true);
@@ -76,13 +93,17 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       const { selection } = state;
       const { empty } = selection;
 
-      if (editor.isActive('image') || empty || isNodeSelection(selection)) {
+      if (
+        props.editor.isActive("image") ||
+        empty ||
+        isNodeSelection(selection)
+      ) {
         return false;
       }
       return true;
     },
     tippyOptions: {
-      moveTransition: 'transform 0.15s ease-out',
+      moveTransition: "transform 0.15s ease-out",
       onHidden: () => {
         setIsNodeSelectorOpen(false);
         setIsColorSelectorOpen(false);
@@ -96,10 +117,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
 
   return (
-    <BubbleMenu
+    <BubbleMenu {...bubbleMenuProps} className={classes.bubbleMenu}>
-      {...bubbleMenuProps}
-      className={classes.bubbleMenu}
-    >
       <NodeSelector
         editor={props.editor}
         isOpen={isNodeSelectorOpen}
@@ -113,15 +131,19 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       <ActionIcon.Group>
         {items.map((item, index) => (
           <Tooltip key={index} label={item.name} withArrow>
-
+            <ActionIcon
-            <ActionIcon key={index} variant="default" size="lg" radius="0" aria-label={item.name}
+              key={index}
-                        className={clsx({ [classes.active]: item.isActive() })}
+              variant="default"
-                        style={{ border: 'none' }}
+              size="lg"
-                        onClick={item.command}>
+              radius="0"
+              aria-label={item.name}
+              className={clsx({ [classes.active]: item.isActive() })}
+              style={{ border: "none" }}
+              onClick={item.command}
+            >
               <item.icon style={{ width: rem(16) }} stroke={2} />
             </ActionIcon>
           </Tooltip>
-
         ))}
       </ActionIcon.Group>
 
@@ -136,14 +158,17 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       />
 
       <Tooltip label={commentItem.name} withArrow>
-
+        <ActionIcon
-        <ActionIcon variant="default" size="lg" radius="0" aria-label={commentItem.name}
+          variant="default"
-                    style={{ border: 'none' }}
+          size="lg"
-                    onClick={commentItem.command}>
+          radius="0"
+          aria-label={commentItem.name}
+          style={{ border: "none" }}
+          onClick={commentItem.command}
+        >
           <IconMessage style={{ width: rem(16) }} stroke={2} />
         </ActionIcon>
       </Tooltip>
-
     </BubbleMenu>
   );
 };

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -1,8 +1,8 @@
-import { Editor } from '@tiptap/core';
+import { Dispatch, FC, SetStateAction } from "react";
-import { Dispatch, FC, SetStateAction } from 'react';
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
-import { IconCheck, IconChevronDown } from '@tabler/icons-react';
+import { Button, Popover, rem, ScrollArea, Text } from "@mantine/core";
-import { Button, Popover, rem, ScrollArea, Text } from '@mantine/core';
+import classes from "./bubble-menu.module.css";
-import classes from './bubble-menu.module.css';
+import { useEditor } from "@tiptap/react";
 
 export interface BubbleColorMenuItem {
   name: string;
@@ -10,121 +10,125 @@ export interface BubbleColorMenuItem {
 }
 
 interface ColorSelectorProps {
-  editor: Editor;
+  editor: ReturnType<typeof useEditor>;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 const TEXT_COLORS: BubbleColorMenuItem[] = [
   {
-    name: 'Default',
+    name: "Default",
-    color: '',
+    color: "",
   },
   {
-    name: 'Blue',
+    name: "Blue",
-    color: '#2563EB',
+    color: "#2563EB",
   },
   {
-    name: 'Green',
+    name: "Green",
-    color: '#008A00',
+    color: "#008A00",
   },
   {
-    name: 'Purple',
+    name: "Purple",
-    color: '#9333EA',
+    color: "#9333EA",
   },
   {
-    name: 'Red',
+    name: "Red",
-    color: '#E00000',
+    color: "#E00000",
   },
   {
-    name: 'Yellow',
+    name: "Yellow",
-    color: '#EAB308',
+    color: "#EAB308",
   },
   {
-    name: 'Orange',
+    name: "Orange",
-    color: '#FFA500',
+    color: "#FFA500",
   },
   {
-    name: 'Pink',
+    name: "Pink",
-    color: '#BA4081',
+    color: "#BA4081",
   },
   {
-    name: 'Gray',
+    name: "Gray",
-    color: '#A8A29E',
+    color: "#A8A29E",
   },
 ];
 
 // TODO: handle dark mode
 const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   {
-    name: 'Default',
+    name: "Default",
-    color: '',
+    color: "",
   },
   {
-    name: 'Blue',
+    name: "Blue",
-    color: '#c1ecf9',
+    color: "#c1ecf9",
   },
   {
-    name: 'Green',
+    name: "Green",
-    color: '#acf79f',
+    color: "#acf79f",
   },
   {
-    name: 'Purple',
+    name: "Purple",
-    color: '#f6f3f8',
+    color: "#f6f3f8",
   },
   {
-    name: 'Red',
+    name: "Red",
-    color: '#fdebeb',
+    color: "#fdebeb",
   },
   {
-    name: 'Yellow',
+    name: "Yellow",
-    color: '#fbf4a2',
+    color: "#fbf4a2",
   },
   {
-    name: 'Orange',
+    name: "Orange",
-    color: '#faebdd',
+    color: "#faebdd",
   },
   {
-    name: 'Pink',
+    name: "Pink",
-    color: '#faf1f5',
+    color: "#faf1f5",
   },
   {
-    name: 'Gray',
+    name: "Gray",
-    color: '#f1f1ef',
+    color: "#f1f1ef",
   },
 ];
 
-export const ColorSelector: FC<ColorSelectorProps> =
+export const ColorSelector: FC<ColorSelectorProps> = ({
-  ({ editor, isOpen, setIsOpen }) => {
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
+  const activeColorItem = TEXT_COLORS.find(({ color }) =>
+    editor.isActive("textStyle", { color }),
+  );
 
-    const activeColorItem = TEXT_COLORS.find(({ color }) =>
+  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
-      editor.isActive('textStyle', { color }),
+    editor.isActive("highlight", { color }),
-    );
+  );
 
-    const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
+  return (
-      editor.isActive('highlight', { color }),
+    <Popover width={200} opened={isOpen} withArrow>
-    );
+      <Popover.Target>
+        <Button
+          variant="default"
+          radius="0"
+          leftSection="A"
+          rightSection={<IconChevronDown size={16} />}
+          className={classes.colorButton}
+          style={{
+            color: activeColorItem?.color,
+          }}
+          onClick={() => setIsOpen(!isOpen)}
+        />
+      </Popover.Target>
 
-    return (
+      <Popover.Dropdown>
-      <Popover width={200} opened={isOpen} withArrow>
+        {/* make mah responsive */}
-        <Popover.Target>
+        <ScrollArea.Autosize type="scroll" mah="400">
-
+          <Text span c="dimmed" inherit>
-          <Button variant="default" radius="0"
+            COLOR
-                  leftSection="A"
+          </Text>
-                  rightSection={<IconChevronDown size={16} />}
-                  className={classes.colorButton}
-                  style={{
-                    color: activeColorItem?.color,
-                  }}
-                  onClick={() => setIsOpen(!isOpen)}
-          />
-        </Popover.Target>
-
-        <Popover.Dropdown>
-          {/* make mah responsive */}
-          <ScrollArea.Autosize type="scroll" mah='400'>
-
-          <Text span c="dimmed" inherit>COLOR</Text>
 
           <Button.Group orientation="vertical">
             {TEXT_COLORS.map(({ name, color }, index) => (
@@ -134,56 +138,60 @@ export const ColorSelector: FC<ColorSelectorProps> =
                 leftSection={<span style={{ color }}>A</span>}
                 justify="left"
                 fullWidth
-                rightSection={editor.isActive('textStyle', { color })
+                rightSection={
-                  && (<IconCheck style={{ width: rem(16) }} />)}
+                  editor.isActive("textStyle", { color }) && (
-
+                    <IconCheck style={{ width: rem(16) }} />
+                  )
+                }
                 onClick={() => {
                   editor.commands.unsetColor();
-                  name !== 'Default' &&
+                  name !== "Default" &&
-                  editor
+                    editor
-                    .chain()
+                      .chain()
-                    .focus()
+                      .focus()
-                    .setColor(color || '')
+                      .setColor(color || "")
-                    .run();
+                      .run();
                   setIsOpen(false);
                 }}
-                style={{ border: 'none' }}
+                style={{ border: "none" }}
               >
                 {name}
               </Button>
             ))}
           </Button.Group>
 
-          <Text span c="dimmed" inherit>BACKGROUND</Text>
+          <Text span c="dimmed" inherit>
+            BACKGROUND
+          </Text>
 
           <Button.Group orientation="vertical">
             {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
               <Button
                 key={index}
                 variant="default"
-                leftSection={<span style={{ padding: '4px', background: color }}>A</span>}
+                leftSection={
+                  <span style={{ padding: "4px", background: color }}>A</span>
+                }
                 justify="left"
                 fullWidth
-                rightSection={editor.isActive('highlight', { color })
+                rightSection={
-                  && (<IconCheck style={{ width: rem(16) }} />)}
+                  editor.isActive("highlight", { color }) && (
-
+                    <IconCheck style={{ width: rem(16) }} />
+                  )
+                }
                 onClick={() => {
                   editor.commands.unsetHighlight();
-                  name !== 'Default' &&
+                  name !== "Default" && editor.commands.setHighlight({ color });
-                  editor
-                    .commands
-                    .setHighlight({ color });
                   setIsOpen(false);
                 }}
-                style={{ border: 'none' }}
+                style={{ border: "none" }}
               >
                 {name}
               </Button>
             ))}
           </Button.Group>
-
+        </ScrollArea.Autosize>
-          </ScrollArea.Autosize>
+      </Popover.Dropdown>
-        </Popover.Dropdown>
+    </Popover>
-      </Popover>
+  );
-    );
+};
-  };

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -1,20 +1,23 @@
-import { Editor } from '@tiptap/core';
+import React, { Dispatch, FC, SetStateAction } from "react";
-import React, { Dispatch, FC, SetStateAction } from 'react';
 import {
   IconBlockquote,
-  IconCheck, IconCheckbox, IconChevronDown, IconCode,
+  IconCheck,
+  IconCheckbox,
+  IconChevronDown,
+  IconCode,
   IconH1,
   IconH2,
   IconH3,
   IconList,
   IconListNumbers,
   IconTypography,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
-import { Popover, Button, rem, ScrollArea } from '@mantine/core';
+import { Popover, Button, rem, ScrollArea } from "@mantine/core";
-import classes from '@/features/editor/components/bubble-menu/bubble-menu.module.css';
+import classes from "@/features/editor/components/bubble-menu/bubble-menu.module.css";
+import { useEditor } from "@tiptap/react";
 
 interface NodeSelectorProps {
-  editor: Editor;
+  editor: ReturnType<typeof useEditor>;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -26,123 +29,121 @@ export interface BubbleMenuItem {
   isActive: () => boolean;
 }
 
-export const NodeSelector: FC<NodeSelectorProps> =
+export const NodeSelector: FC<NodeSelectorProps> = ({
-  ({ editor, isOpen, setIsOpen }) => {
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "Text",
+      icon: IconTypography,
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () =>
+        editor.isActive("paragraph") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("orderedList"),
+    },
+    {
+      name: "Heading 1",
+      icon: IconH1,
+      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+    },
+    {
+      name: "Heading 2",
+      icon: IconH2,
+      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+    },
+    {
+      name: "Heading 3",
+      icon: IconH3,
+      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+    },
+    {
+      name: "To-do List",
+      icon: IconCheckbox,
+      command: () => editor.chain().focus().toggleTaskList().run(),
+      isActive: () => editor.isActive("taskItem"),
+    },
+    {
+      name: "Bullet List",
+      icon: IconList,
+      command: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.isActive("bulletList"),
+    },
+    {
+      name: "Numbered List",
+      icon: IconListNumbers,
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.isActive("orderedList"),
+    },
+    {
+      name: "Blockquote",
+      icon: IconBlockquote,
+      command: () =>
+        editor
+          .chain()
+          .focus()
+          .toggleNode("paragraph", "paragraph")
+          .toggleBlockquote()
+          .run(),
+      isActive: () => editor.isActive("blockquote"),
+    },
+    {
+      name: "Code",
+      icon: IconCode,
+      command: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: () => editor.isActive("codeBlock"),
+    },
+  ];
 
-    const items: BubbleMenuItem[] = [
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
-      {
+    name: "Multiple",
-        name: 'Text',
-        icon: IconTypography,
-        command: () =>
-          editor.chain().focus().toggleNode('paragraph', 'paragraph').run(),
-        isActive: () =>
-          editor.isActive('paragraph') &&
-          !editor.isActive('bulletList') &&
-          !editor.isActive('orderedList'),
-      },
-      {
-        name: 'Heading 1',
-        icon: IconH1,
-        command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-        isActive: () => editor.isActive('heading', { level: 1 }),
-      },
-      {
-        name: 'Heading 2',
-        icon: IconH2,
-        command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-        isActive: () => editor.isActive('heading', { level: 2 }),
-      },
-      {
-        name: 'Heading 3',
-        icon: IconH3,
-        command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-        isActive: () => editor.isActive('heading', { level: 3 }),
-      },
-      {
-        name: 'To-do List',
-        icon: IconCheckbox,
-        command: () => editor.chain().focus().toggleTaskList().run(),
-        isActive: () => editor.isActive('taskItem'),
-      },
-      {
-        name: 'Bullet List',
-        icon: IconList,
-        command: () => editor.chain().focus().toggleBulletList().run(),
-        isActive: () => editor.isActive('bulletList'),
-      },
-      {
-        name: 'Numbered List',
-        icon: IconListNumbers,
-        command: () => editor.chain().focus().toggleOrderedList().run(),
-        isActive: () => editor.isActive('orderedList'),
-      },
-      {
-        name: 'Blockquote',
-        icon: IconBlockquote,
-        command: () =>
-          editor
-            .chain()
-            .focus()
-            .toggleNode('paragraph', 'paragraph')
-            .toggleBlockquote()
-            .run(),
-        isActive: () => editor.isActive('blockquote'),
-      },
-      {
-        name: 'Code',
-        icon: IconCode,
-        command: () => editor.chain().focus().toggleCodeBlock().run(),
-        isActive: () => editor.isActive('codeBlock'),
-      },
-    ];
-
-    const activeItem = items.filter((item) => item.isActive()).pop() ?? {
-      name: 'Multiple',
-    };
-
-    return (
-      <Popover opened={isOpen} withArrow>
-
-        <Popover.Target>
-          <Button variant="default" radius="0"
-                  rightSection={<IconChevronDown size={16} />}
-                  className={classes.colorButton}
-                  onClick={() => setIsOpen(!isOpen)}
-          >
-            {activeItem?.name}
-          </Button>
-
-        </Popover.Target>
-
-        <Popover.Dropdown>
-          <ScrollArea.Autosize type="scroll" mah={400}>
-
-            <Button.Group orientation="vertical">
-
-              {items.map((item, index) => (
-
-                <Button
-                  key={index}
-                  variant="default"
-                  leftSection={<item.icon size={16} />}
-                  rightSection={activeItem.name === item.name
-                    && (<IconCheck size={16} />)}
-                  justify="left"
-                  fullWidth
-                  onClick={() => {
-                    item.command();
-                    setIsOpen(false);
-                  }}
-                  style={{ border: 'none' }}
-                >
-                  {item.name}
-                </Button>
-              ))}
-
-            </Button.Group>
-          </ScrollArea.Autosize>
-
-        </Popover.Dropdown>
-      </Popover>
-    );
   };
+
+  return (
+    <Popover opened={isOpen} withArrow>
+      <Popover.Target>
+        <Button
+          variant="default"
+          radius="0"
+          rightSection={<IconChevronDown size={16} />}
+          className={classes.colorButton}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {activeItem?.name}
+        </Button>
+      </Popover.Target>
+
+      <Popover.Dropdown>
+        <ScrollArea.Autosize type="scroll" mah={400}>
+          <Button.Group orientation="vertical">
+            {items.map((item, index) => (
+              <Button
+                key={index}
+                variant="default"
+                leftSection={<item.icon size={16} />}
+                rightSection={
+                  activeItem.name === item.name && <IconCheck size={16} />
+                }
+                justify="left"
+                fullWidth
+                onClick={() => {
+                  item.command();
+                  setIsOpen(false);
+                }}
+                style={{ border: "none" }}
+              >
+                {item.name}
+              </Button>
+            ))}
+          </Button.Group>
+        </ScrollArea.Autosize>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

apps/client/src/features/editor/components/slash-menu/render-items.ts

@@ -1,14 +1,16 @@
-import { Editor } from '@tiptap/core';
+import { ReactRenderer, useEditor } from "@tiptap/react";
-import { ReactRenderer } from '@tiptap/react';
+import CommandList from "@/features/editor/components/slash-menu/command-list";
-import CommandList from '@/features/editor/components/slash-menu/command-list';
+import tippy from "tippy.js";
-import tippy from 'tippy.js';
 
 const renderItems = () => {
   let component: ReactRenderer | null = null;
   let popup: any | null = null;
 
   return {
-    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+    onStart: (props: {
+      editor: ReturnType<typeof useEditor>;
+      clientRect: DOMRect;
+    }) => {
       component = new ReactRenderer(CommandList, {
         props,
         editor: props.editor,
@@ -19,17 +21,20 @@ const renderItems = () => {
       }
 
       // @ts-ignore
-      popup = tippy('body', {
+      popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
         appendTo: () => document.body,
         content: component.element,
         showOnCreate: true,
         interactive: true,
-        trigger: 'manual',
+        trigger: "manual",
-        placement: 'bottom-start',
+        placement: "bottom-start",
       });
     },
-    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+    onUpdate: (props: {
+      editor: ReturnType<typeof useEditor>;
+      clientRect: DOMRect;
+    }) => {
       component?.updateProps(props);
 
       if (!props.clientRect) {
@@ -42,7 +47,7 @@ const renderItems = () => {
         });
     },
     onKeyDown: (props: { event: KeyboardEvent }) => {
-      if (props.event.key === 'Escape') {
+      if (props.event.key === "Escape") {
         popup?.[0].hide();
 
         return true;

apps/client/src/features/editor/components/slash-menu/types.ts

@@ -1,16 +1,17 @@
-import { Editor, Range } from '@tiptap/core';
+import { Range } from "@tiptap/core";
+import { useEditor } from "@tiptap/react";
 
 export type CommandProps = {
-  editor: Editor;
+  editor: ReturnType<typeof useEditor>;
   range: Range;
-}
+};
 
 export type CommandListProps = {
   items: SlashMenuGroupedItemsType;
   command: (item: SlashMenuItemType) => void;
-  editor: Editor;
+  editor: ReturnType<typeof useEditor>;
   range: Range;
-}
+};
 
 export type SlashMenuItemType = {
   title: string;
@@ -19,8 +20,8 @@ export type SlashMenuItemType = {
   separator?: true;
   searchTerms: string[];
   command: (props: CommandProps) => void;
-  disable?: (editor: Editor) => boolean;
+  disable?: (editor: ReturnType<typeof useEditor>) => boolean;
-}
+};
 
 export type SlashMenuGroupedItemsType = {
   [category: string]: SlashMenuItemType[];

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

@@ -1,35 +1,35 @@
-import { StarterKit } from '@tiptap/starter-kit';
+import { StarterKit } from "@tiptap/starter-kit";
-import { Placeholder } from '@tiptap/extension-placeholder';
+import { Placeholder } from "@tiptap/extension-placeholder";
-import { TextAlign } from '@tiptap/extension-text-align';
+import { TextAlign } from "@tiptap/extension-text-align";
-import { TaskList } from '@tiptap/extension-task-list';
+import { TaskList } from "@tiptap/extension-task-list";
-import { TaskItem } from '@tiptap/extension-task-item';
+import { TaskItem } from "@tiptap/extension-task-item";
-import { Underline } from '@tiptap/extension-underline';
+import { Underline } from "@tiptap/extension-underline";
-import { Link } from '@tiptap/extension-link';
+import { Link } from "@tiptap/extension-link";
-import { Superscript } from '@tiptap/extension-superscript';
+import { Superscript } from "@tiptap/extension-superscript";
-import SubScript from '@tiptap/extension-subscript';
+import SubScript from "@tiptap/extension-subscript";
-import { Highlight } from '@tiptap/extension-highlight';
+import { Highlight } from "@tiptap/extension-highlight";
-import { Typography } from '@tiptap/extension-typography';
+import { Typography } from "@tiptap/extension-typography";
-import DragAndDrop from '@/features/editor/extensions/drag-handle';
+import DragAndDrop from "@/features/editor/extensions/drag-handle";
-import { TextStyle } from '@tiptap/extension-text-style';
+import { TextStyle } from "@tiptap/extension-text-style";
-import { Color } from '@tiptap/extension-color';
+import { Color } from "@tiptap/extension-color";
-import SlashCommand from '@/features/editor/extensions/slash-command';
+import SlashCommand from "@/features/editor/extensions/slash-command";
-import { Collaboration } from '@tiptap/extension-collaboration';
+import { Collaboration } from "@tiptap/extension-collaboration";
-import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
+import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
-import { HocuspocusProvider } from '@hocuspocus/provider';
+import { HocuspocusProvider } from "@hocuspocus/provider";
-import { Comment, TrailingNode } from '@docmost/editor-ext';
+import { Comment, TrailingNode } from "@docmost/editor-ext";
 
 export const mainExtensions = [
   StarterKit.configure({
     history: false,
     dropcursor: {
       width: 3,
-      color: '#70CFF8',
+      color: "#70CFF8",
     },
   }),
   Placeholder.configure({
     placeholder: 'Enter "/" for commands',
   }),
-  TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  TextAlign.configure({ types: ["heading", "paragraph"] }),
   TaskList,
   TaskItem.configure({
     nested: true,
@@ -49,10 +49,10 @@ export const mainExtensions = [
   SlashCommand,
   Comment.configure({
     HTMLAttributes: {
-      class: 'comment-mark',
+      class: "comment-mark",
     },
   }),
-];
+] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider) => any[];
 

apps/client/src/features/editor/page-editor.tsx

@@ -1,28 +1,38 @@
-import '@/features/editor/styles/index.css';
+import "@/features/editor/styles/index.css";
-import React, {
+import React, { useEffect, useLayoutEffect, useMemo, useState } from "react";
-  useEffect,
+import { IndexeddbPersistence } from "y-indexeddb";
-  useLayoutEffect,
+import * as Y from "yjs";
-  useMemo,
+import { HocuspocusProvider } from "@hocuspocus/provider";
-  useState,
+import { EditorContent, useEditor } from "@tiptap/react";
-} from 'react';
+import {
-import { IndexeddbPersistence } from 'y-indexeddb';
+  collabExtensions,
-import * as Y from 'yjs';
+  mainExtensions,
-import { HocuspocusProvider } from '@hocuspocus/provider';
+} from "@/features/editor/extensions/extensions";
-import { EditorContent, useEditor } from '@tiptap/react';
+import { useAtom } from "jotai";
-import { collabExtensions, mainExtensions } from '@/features/editor/extensions/extensions';
+import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
-import { useAtom } from 'jotai';
+import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
-import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
+import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
-import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom";
-import { pageEditorAtom } from '@/features/editor/atoms/editor-atoms';
+import {
-import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
+  activeCommentIdAtom,
-import { activeCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
+  showCommentPopupAtom,
-import CommentDialog from '@/features/comment/components/comment-dialog';
+} from "@/features/comment/atoms/comment-atom";
-import EditorSkeleton from '@/features/editor/components/editor-skeleton';
+import CommentDialog from "@/features/comment/components/comment-dialog";
-import { EditorBubbleMenu } from '@/features/editor/components/bubble-menu/bubble-menu';
+import EditorSkeleton from "@/features/editor/components/editor-skeleton";
+import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 
-const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D'];
+const colors = [
-const getRandomElement = list => list[Math.floor(Math.random() * list.length)];
+  "#958DF1",
+  "#F98181",
+  "#FBBC88",
+  "#FAF594",
+  "#70CFF8",
+  "#94FADB",
+  "#B9F18D",
+];
+const getRandomElement = (list) =>
+  list[Math.floor(Math.random() * list.length)];
 const getRandomColor = () => getRandomElement(colors);
 
 interface PageEditorProps {
@@ -30,7 +40,10 @@ interface PageEditorProps {
   editable?: boolean;
 }
 
-export default function PageEditor({ pageId, editable = true }: PageEditorProps) {
+export default function PageEditor({
+  pageId,
+  editable = true,
+}: PageEditorProps) {
   const [token] = useAtom(authTokensAtom);
   const collaborationURL = useCollaborationUrl();
   const [currentUser] = useAtom(currentUserAtom);
@@ -46,12 +59,9 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
   const [isRemoteSynced, setRemoteSynced] = useState(false);
 
   const localProvider = useMemo(() => {
-    const provider = new IndexeddbPersistence(
+    const provider = new IndexeddbPersistence(pageId, ydoc);
-      pageId,
-      ydoc,
-    );
 
-    provider.on('synced', () => {
+    provider.on("synced", () => {
       setLocalSynced(true);
     });
 
@@ -67,7 +77,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
       connect: false,
     });
 
-    provider.on('synced', () => {
+    provider.on("synced", () => {
       setRemoteSynced(true);
     });
 
@@ -85,10 +95,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
     };
   }, [remoteProvider, localProvider]);
 
-  const extensions = [
+  const extensions = [...mainExtensions, ...collabExtensions(remoteProvider)];
-    ...mainExtensions,
-    ...collabExtensions(remoteProvider),
-  ];
 
   const editor = useEditor(
     {
@@ -97,8 +104,8 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
       editorProps: {
         handleDOMEvents: {
           keydown: (_view, event) => {
-            if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+            if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-              const slashCommand = document.querySelector('#slash-command');
+              const slashCommand = document.querySelector("#slash-command");
               if (slashCommand) {
                 return true;
               }
@@ -118,14 +125,18 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
 
   useEffect(() => {
     if (editor && currentUser.user) {
-      editor.chain().focus().updateUser({ ...currentUser.user, color: getRandomColor() }).run();
+      editor
+        .chain()
+        .focus()
+        .updateUser({ ...currentUser.user, color: getRandomColor() })
+        .run();
     }
   }, [editor, currentUser.user]);
 
   const handleActiveCommentEvent = (event) => {
     const { commentId } = event.detail;
     setActiveCommentId(commentId);
-    setAsideState({ tab: 'comments', isAsideOpen: true });
+    setAsideState({ tab: "comments", isAsideOpen: true });
 
     const selector = `div[data-comment-id="${commentId}"]`;
     const commentElement = document.querySelector(selector);
@@ -133,16 +144,19 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
   };
 
   useEffect(() => {
-    document.addEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
+    document.addEventListener("ACTIVE_COMMENT_EVENT", handleActiveCommentEvent);
     return () => {
-      document.removeEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
+      document.removeEventListener(
+        "ACTIVE_COMMENT_EVENT",
+        handleActiveCommentEvent,
+      );
     };
   }, []);
 
   useEffect(() => {
     setActiveCommentId(null);
     setShowCommentPopup(false);
-    setAsideState({ tab: '', isAsideOpen: false });
+    setAsideState({ tab: "", isAsideOpen: false });
   }, [pageId]);
 
   const isSynced = isLocalSynced || isRemoteSynced;
@@ -165,6 +179,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
         </div>
       )}
     </div>
-  ) : <EditorSkeleton />;
+  ) : (
-
+    <EditorSkeleton />
+  );
 }