Merge branch 'tiptap3-migration' into feat/content

apps/client/package.json

@@ -24,7 +24,6 @@
     "@mantine/spotlight": "^8.3.12",
     "@tabler/icons-react": "^3.36.1",
     "@tanstack/react-query": "^5.90.17",
-    "@tiptap/extension-character-count": "^2.27.1",
     "alfaaz": "^1.1.0",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
@@ -54,7 +53,6 @@
     "react-router-dom": "^7.12.0",
     "semver": "^7.7.3",
     "socket.io-client": "^4.8.3",
-    "tippy.js": "^6.3.7",
     "tiptap-extension-global-drag-handle": "^0.1.18",
     "zod": "^3.25.76"
   },

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

@@ -1,10 +1,6 @@
-import {
+import { BubbleMenu, BubbleMenuProps } from "@tiptap/react/menus";
-  BubbleMenu,
+import { isNodeSelection, useEditorState } from "@tiptap/react";
-  BubbleMenuProps,
+import type { Editor } from "@tiptap/react";
-  isNodeSelection,
-  useEditor,
-  useEditorState,
-} from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
   IconBold,
@@ -38,7 +34,7 @@ export interface BubbleMenuItem {
 }
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 };
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
@@ -133,14 +129,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       }
       return isTextSelected(editor);
     },
-    tippyOptions: {
+    options: {
-      moveTransition: "transform 0.15s ease-out",
+      placement: "top",
-      onCreate: (instance) => {
+      offset: 8,
-        instance.popper.firstChild?.addEventListener("blur", (event) => {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-        });
-      },
       onHide: () => {
         setIsNodeSelectorOpen(false);
         setIsTextAlignmentOpen(false);
@@ -156,7 +147,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
   return (
-    <BubbleMenu {...bubbleMenuProps}>
+    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
       <div className={classes.bubbleMenu}>
         <NodeSelector
           editor={props.editor}

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

@@ -1,9 +1,5 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
@@ -53,17 +49,26 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
     },
   });
 
-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "callout";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
       const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
     }
 
-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
   }, [editor]);
 
   const setCalloutType = useCallback(
@@ -112,14 +117,12 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
       editor={editor}
       pluginKey={`callout-menu`}
       updateDelay={0}
-      tippyOptions={{
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferenceClientRect,
+      options={{
-        offset: [0, 10],
         placement: "bottom",
-        zIndex: 99,
+        // offset: 233, //      //         offset: [0, 10],
-        popperOptions: {
+        // zIndex: 99,
-          modifiers: [{ name: "flip", enabled: false }],
+        flip: false,
-        },
       }}
       shouldShow={shouldShow}
     >

apps/client/src/features/editor/components/code-block/code-block-view.tsx

@@ -90,6 +90,7 @@ export default function CodeBlockView(props: NodeViewProps) {
           node.textContent.length > 0
         }
       >
+        {/* @ts-ignore */}
         <NodeViewContent as="code" className={`language-${language}`} />
       </pre>
 

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

@@ -1,11 +1,6 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
 import { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
@@ -40,17 +35,26 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     },
   });
 
-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "drawio";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
       const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
     }
 
-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
   }, [editor]);
 
   const onWidthChange = useCallback(
@@ -65,15 +69,11 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
       editor={editor}
       pluginKey={`drawio-menu`}
       updateDelay={0}
-      tippyOptions={{
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferenceClientRect,
+      options={{
-        offset: [0, 8],
+        placement: "top",
-        zIndex: 99,
+        offset: 8,
-        popperOptions: {
+        flip: false,
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
       }}
       shouldShow={shouldShow}
     >

apps/client/src/features/editor/components/drawio/drawio-view.tsx

@@ -66,6 +66,7 @@ export default function DrawioView(props: NodeViewProps) {
     const fileName = "diagram.drawio.svg";
     const drawioSVGFile = await svgStringToFile(svgString, fileName);
 
+    //@ts-ignore
     const pageId = editor.storage?.pageId;
 
     let attachment: IAttachment = null;

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

@@ -1,16 +1,41 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
-import tippy from "tippy.js";
 import { init } from "emoji-mart";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
 
 const renderEmojiItems = () => {
   let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let popup: HTMLDivElement | null = null;
+  let cleanup: (() => void) | null = null;
+  let getReferenceClientRect: (() => DOMRect) | null = null;
+
+  const destroy = () => {
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+
+    if (popup) {
+      popup.remove();
+      popup = null;
+    }
+
+    if (component) {
+      component.destroy();
+      component = null;
+    }
+  };
 
   return {
     onBeforeStart: (props: {
       editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
     }) => {
       init({
         data: async () => (await import("@emoji-mart/data")).default,
@@ -25,51 +50,61 @@ const renderEmojiItems = () => {
         return;
       }
 
-      // @ts-ignore
+      getReferenceClientRect = props.clientRect;
-      popup = tippy("body", {
+      popup = document.createElement("div");
-        getReferenceClientRect: props.clientRect,
+      popup.style.zIndex = "9999";
-        appendTo: () => document.body,
+      popup.style.position = "absolute";
-        content: component.element,
+      popup.style.top = "0";
-        showOnCreate: true,
+      popup.style.left = "0";
-        interactive: true,
+      popup.appendChild(component.element);
-        trigger: "manual",
+      document.body.appendChild(popup);
-        placement: "bottom",
+
+      const virtualElement = {
+        getBoundingClientRect: () => {
+          return getReferenceClientRect
+            ? getReferenceClientRect()
+            : new DOMRect(0, 0, 0, 0);
+        },
+      };
+
+      cleanup = autoUpdate(virtualElement, popup, () => {
+        if (!popup) return;
+
+        computePosition(virtualElement, popup, {
+          placement: "bottom-start",
+          middleware: [offset(10), flip(), shift()],
+        }).then(({ x, y }) => {
+          if (!popup) return;
+
+          Object.assign(popup.style, {
+            transform: `translate(${x}px, ${y}px)`,
+          });
+        });
       });
     },
     onStart: (props: {
       editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
     }) => {
-      component?.updateProps({...props, isLoading: false});
+      component?.updateProps({ ...props, isLoading: false });
 
-      if (!props.clientRect) {
+      if (props.clientRect) {
-        return;
+        getReferenceClientRect = props.clientRect;
       }
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
     },
     onUpdate: (props: {
       editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
     }) => {
       component?.updateProps(props);
 
-      if (!props.clientRect) {
+      if (props.clientRect) {
-        return;
+        getReferenceClientRect = props.clientRect;
       }
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
     },
     onKeyDown: (props: { event: KeyboardEvent }) => {
       if (props.event.key === "Escape") {
-        popup?.[0].hide();
+        destroy();
-        component?.destroy()
 
         return true;
       }
@@ -78,13 +113,7 @@ const renderEmojiItems = () => {
       return component?.ref?.onKeyDown(props);
     },
     onExit: () => {
-      if (popup && !popup[0]?.state.isDestroyed) {
+      destroy();
-        popup[0]?.destroy();
-      }
-
-      if (component) {
-        component?.destroy();
-      }
     },
   };
 };

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

@@ -1,11 +1,6 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
 import { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
@@ -42,17 +37,26 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     },
   });
 
-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "excalidraw";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
       const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
     }
 
-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
   }, [editor]);
 
   const onWidthChange = useCallback(
@@ -65,17 +69,13 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`excalidraw-menu}`}
+      pluginKey={`excalidraw-menu`}
       updateDelay={0}
-      tippyOptions={{
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferenceClientRect,
+      options={{
-        offset: [0, 8],
+        placement: "top",
-        zIndex: 99,
+        offset: 8,
-        popperOptions: {
+        flip: false,
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
       }}
       shouldShow={shouldShow}
     >

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -98,6 +98,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
     const fileName = "diagram.excalidraw.svg";
     const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
 
+    // @ts-ignore
     const pageId = editor.storage?.pageId;
 
     let attachment: IAttachment = null;

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

@@ -1,11 +1,6 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
 import React, { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
@@ -22,16 +17,6 @@ import { useTranslation } from "react-i18next";
 
 export function ImageMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return editor.isActive("image");
-    },
-    [editor],
-  );
 
   const editorState = useEditorState({
     editor,
@@ -52,17 +37,37 @@ export function ImageMenu({ editor }: EditorMenuProps) {
     },
   });
 
-  const getReferenceClientRect = useCallback(() => {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("image");
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "image";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
       const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
     }
 
-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
   }, [editor]);
 
   const alignImageLeft = useCallback(() => {
@@ -105,15 +110,11 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       editor={editor}
       pluginKey={`image-menu`}
       updateDelay={0}
-      tippyOptions={{
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferenceClientRect,
+      options={{
-        offset: [0, 8],
+        placement: "top",
-        zIndex: 99,
+        offset: 8,
-        popperOptions: {
+        flip: false,
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
       }}
       shouldShow={shouldShow}
     >

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

@@ -1,9 +1,10 @@
-import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
 import { LinkPreviewPanel } from "@/features/editor/components/link/link-preview.tsx";
 import { Card } from "@mantine/core";
+import { useEditorState } from "@tiptap/react";
 
 export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
   const [showEdit, setShowEdit] = useState(false);
@@ -59,18 +60,15 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`link-menu}`}
+      pluginKey={`link-menu`}
       updateDelay={0}
-      tippyOptions={{
+      options={{
-        appendTo: () => {
+        onHide: () => {
-          return appendTo?.current;
-        },
-        onHidden: () => {
           setShowEdit(false);
         },
         placement: "bottom",
-        offset: [0, 5],
+        offset: 5,
-        zIndex: 101,
+        // zIndex: 101,
       }}
       shouldShow={shouldShow}
     >

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -106,6 +106,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
 
       setRenderItems(items);
       // update editor storage
+      //@ts-ignore
       props.editor.storage.mentionItems = items;
     }
   }, [suggestion, isLoading]);

apps/client/src/features/editor/components/mention/mention-suggestion.ts

@@ -1,5 +1,11 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
-import tippy from "tippy.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
 import MentionList from "@/features/editor/components/mention/mention-list.tsx";
 
 function getWhitespaceCount(query: string) {
@@ -9,16 +15,27 @@ function getWhitespaceCount(query: string) {
 
 const mentionRenderItems = () => {
   let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let activeClientRect: (() => DOMRect) | null = null;
+  let updatePositionCleanup: (() => void) | null = null;
+
+  const destroy = () => {
+    updatePositionCleanup?.();
+    updatePositionCleanup = null;
+    component?.destroy();
+    if (component?.element?.parentNode) {
+      component.element.parentNode.removeChild(component.element);
+    }
+    component = null;
+  };
 
   return {
     onStart: (props: {
       editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
       query: string;
     }) => {
       // query must not start with a whitespace
-      if (props.query.charAt(0) === ' '){
+      if (props.query.charAt(0) === " ") {
         return;
       }
 
@@ -37,75 +54,88 @@ const mentionRenderItems = () => {
         return;
       }
 
-      // @ts-ignore
+      activeClientRect = props.clientRect;
-      popup = tippy("body", {
+
-        getReferenceClientRect: props.clientRect,
+      const { element } = component;
-        appendTo: () => document.body,
+      document.body.appendChild(element);
-        content: component.element,
+
-        showOnCreate: true,
+      updatePositionCleanup = autoUpdate(
-        interactive: true,
+        {
-        trigger: "manual",
+          getBoundingClientRect: () =>
-        placement: "bottom-start",
+            activeClientRect ? activeClientRect() : new DOMRect(),
-      });
+        },
+        element,
+        () => {
+          if (!component?.element) return;
+          computePosition(
+            {
+              getBoundingClientRect: () => {
+                return activeClientRect ? activeClientRect() : new DOMRect();
+              },
+            },
+            element,
+            {
+              placement: "bottom-start",
+              middleware: [offset(0), flip(), shift()],
+            }
+          ).then(({ x, y }) => {
+            Object.assign(element.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              position: "absolute",
+              zIndex: "9999",
+            });
+          });
+        }
+      );
     },
     onUpdate: (props: {
       editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
       query: string;
     }) => {
       // query must not start with a whitespace
-      if (props.query.charAt(0) === ' '){
+      if (props.query.charAt(0) === " ") {
-        component?.destroy();
+        destroy();
         return;
       }
 
       // only update component if popup is not destroyed
-      if (!popup?.[0].state.isDestroyed) {
+      if (component) {
-        component?.updateProps(props);
+        component.updateProps(props);
       }
 
       if (!props || !props.clientRect) {
         return;
       }
 
+      activeClientRect = props.clientRect;
+
       const whitespaceCount = getWhitespaceCount(props.query);
 
       // destroy component if space is greater 3 without a match
       if (
         whitespaceCount > 3 &&
+        //@ts-ignore
         props.editor.storage.mentionItems.length === 0
       ) {
-        popup?.[0]?.destroy();
+        destroy();
-        component?.destroy();
         return;
       }
-
-      popup &&
-        !popup?.[0].state.isDestroyed &&
-        popup?.[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
     },
     onKeyDown: (props: { event: KeyboardEvent }) => {
       if (props.event.key)
         if (
           props.event.key === "Escape" ||
-          (props.event.key === "Enter" && !popup?.[0].state.isShown)
+          (props.event.key === "Enter" && !component)
         ) {
-          popup?.[0].destroy();
+          destroy();
-          component?.destroy();
           return false;
         }
       return (component?.ref as any)?.onKeyDown(props);
     },
     onExit: () => {
-      if (popup && !popup?.[0].state.isDestroyed) {
+      destroy();
-        popup[0].destroy();
-      }
-
-      if (component) {
-        component.destroy();
-      }
     },
   };
 };

apps/client/src/features/editor/components/search-and-replace/search-and-replace-dialog.tsx

@@ -73,6 +73,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
     if (!editor) return;
 
     const { results, resultIndex } = editor.storage.searchAndReplace;
+    //TODO: check type error
+    //@ts-ignore
     const position: Range = results[resultIndex];
 
     if (!position) return;

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

@@ -161,6 +161,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
 
+        // @ts-ignore
         const pageId = editor.storage?.pageId;
         if (!pageId) return;
 
@@ -188,6 +189,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
 
+        // @ts-ignore
         const pageId = editor.storage?.pageId;
         if (!pageId) return;
 
@@ -213,6 +215,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
 
+        // @ts-ignore
         const pageId = editor.storage?.pageId;
         if (!pageId) return;
 

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

@@ -1,10 +1,35 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import CommandList from "@/features/editor/components/slash-menu/command-list";
-import tippy from "tippy.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
 
 const renderItems = () => {
   let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let popup: HTMLElement | null = null;
+  let cleanup: (() => void) | null = null;
+  let getReferenceClientRect: (() => DOMRect) | null = null;
+
+  const updatePosition = () => {
+    if (!popup || !getReferenceClientRect) return;
+
+    // @ts-ignore
+    const rect = getReferenceClientRect();
+
+    computePosition({ getBoundingClientRect: () => rect }, popup, {
+      placement: "bottom-start",
+      middleware: [offset(0), flip(), shift()],
+    }).then(({ x, y }) => {
+      if (popup) {
+        popup.style.left = `${x}px`;
+        popup.style.top = `${y}px`;
+      }
+    });
+  };
 
   return {
     onStart: (props: {
@@ -21,15 +46,29 @@ const renderItems = () => {
       }
 
       // @ts-ignore
-      popup = tippy("body", {
+      getReferenceClientRect = props.clientRect;
-        getReferenceClientRect: props.clientRect,
+
-        appendTo: () => document.body,
+      popup = document.createElement("div");
-        content: component.element,
+      popup.style.zIndex = "9999";
-        showOnCreate: true,
+      popup.style.position = "absolute";
-        interactive: true,
+      popup.style.top = "0";
-        trigger: "manual",
+      popup.style.left = "0";
-        placement: "bottom-start",
+
-      });
+      document.body.appendChild(popup);
+      popup.appendChild(component.element);
+
+      cleanup = autoUpdate(
+        // @ts-ignore
+        {
+          getBoundingClientRect: () => {
+            return getReferenceClientRect
+              ? getReferenceClientRect()
+              : new DOMRect();
+          },
+        },
+        popup,
+        updatePosition
+      );
     },
     onUpdate: (props: {
       editor: ReturnType<typeof useEditor>;
@@ -41,14 +80,15 @@ const renderItems = () => {
         return;
       }
 
-      popup &&
+      // @ts-ignore
-        popup[0].setProps({
+      getReferenceClientRect = props.clientRect;
-          getReferenceClientRect: props.clientRect,
+      updatePosition();
-        });
     },
     onKeyDown: (props: { event: KeyboardEvent }) => {
       if (props.event.key === "Escape") {
-        popup?.[0].hide();
+        if (popup) {
+          popup.style.display = "none";
+        }
 
         return true;
       }
@@ -57,12 +97,19 @@ const renderItems = () => {
       return component?.ref?.onKeyDown(props);
     },
     onExit: () => {
-      if (popup && !popup[0].state.isDestroyed) {
+      if (cleanup) {
-        popup[0].destroy();
+        cleanup();
+        cleanup = null;
+      }
+
+      if (popup) {
+        popup.remove();
+        popup = null;
       }
 
       if (component) {
         component.destroy();
+        component = null;
       }
     },
   };

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

@@ -1,15 +1,11 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { posToDOMRect, findParentNode } from "@tiptap/react";
-  posToDOMRect,
-  findParentNode,
-} from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import React, { useCallback } from "react";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { Editor } from "@tiptap/core";
-import { sticky } from "tippy.js";
 
 interface SubpagesMenuProps {
   editor: Editor;
@@ -33,7 +29,7 @@ export const SubpagesMenu = React.memo(
 
         return editor.isActive("subpages");
       },
-      [editor],
+      [editor]
     );
 
     const getReferenceClientRect = useCallback(() => {
@@ -62,18 +58,8 @@ export const SubpagesMenu = React.memo(
     return (
       <BaseBubbleMenu
         editor={editor}
-        pluginKey={`subpages-menu}`}
+        pluginKey={`subpages-menu`}
         updateDelay={0}
-        tippyOptions={{
-          getReferenceClientRect,
-          offset: [0, 8],
-          zIndex: 99,
-          popperOptions: {
-            modifiers: [{ name: "flip", enabled: false }],
-          },
-          plugins: [sticky],
-          sticky: "popper",
-        }}
         shouldShow={shouldShow}
       >
         <Tooltip position="top" label={t("Delete")}>
@@ -89,7 +75,7 @@ export const SubpagesMenu = React.memo(
         </Tooltip>
       </BaseBubbleMenu>
     );
-  },
+  }
 );
 
 export default SubpagesMenu;

apps/client/src/features/editor/components/subpages/subpages-view.tsx

@@ -19,6 +19,7 @@ export default function SubpagesView(props: NodeViewProps) {
   const { spaceSlug, shareId } = useParams();
   const { t } = useTranslation();
 
+  //@ts-ignore
   const currentPageId = editor.storage.pageId;
 
   // Get subpages from shared tree if we're in a shared context

apps/client/src/features/editor/components/table/table-cell-menu.tsx

@@ -1,6 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import React, { useCallback } from "react";
-
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -17,6 +15,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { TableBackgroundColor } from "./table-background-color";
 import { TableTextAlignment } from "./table-text-alignment";
+import { BubbleMenu } from "@tiptap/react/menus";
 
 export const TableCellMenu = React.memo(
   ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -29,7 +28,7 @@ export const TableCellMenu = React.memo(
 
         return isCellSelection(state.selection);
       },
-      [editor],
+      [editor]
     );
 
     const mergeCells = useCallback(() => {
@@ -53,23 +52,27 @@ export const TableCellMenu = React.memo(
     }, [editor]);
 
     return (
-      <BaseBubbleMenu
+      <BubbleMenu
         editor={editor}
         pluginKey="table-cell-menu"
         updateDelay={0}
-        tippyOptions={{
+        appendTo={() => {
-          appendTo: () => {
+          return appendTo?.current;
-            return appendTo?.current;
+        }}
+        ref={(element) => {
+          element.style.zIndex = "99";
+        }}
+        options={{
+          offset: {
+            mainAxis: 15,
           },
-          offset: [0, 15],
-          zIndex: 99,
         }}
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>
           <TableBackgroundColor editor={editor} />
           <TableTextAlignment editor={editor} />
-          
+
           <Tooltip position="top" label={t("Merge cells")}>
             <ActionIcon
               onClick={mergeCells}
@@ -125,9 +128,9 @@ export const TableCellMenu = React.memo(
             </ActionIcon>
           </Tooltip>
         </ActionIcon.Group>
-      </BaseBubbleMenu>
+      </BubbleMenu>
     );
-  },
+  }
 );
 
 export default TableCellMenu;

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

@@ -1,11 +1,6 @@
-import {
+import { posToDOMRect, findParentNode } from "@tiptap/react";
-  BubbleMenu as BaseBubbleMenu,
-  posToDOMRect,
-  findParentNode,
-} from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import React, { useCallback } from "react";
-
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -17,9 +12,12 @@ import {
   IconColumnRemove,
   IconRowInsertBottom,
   IconRowInsertTop,
-  IconRowRemove, IconTableColumn, IconTableRow,
+  IconRowRemove,
+  IconTableColumn,
+  IconTableRow,
   IconTrashX,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
+import { BubbleMenu } from "@tiptap/react/menus";
 import { isCellSelection } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 
@@ -34,20 +32,28 @@ export const TableMenu = React.memo(
 
         return editor.isActive("table") && !isCellSelection(state.selection);
       },
-      [editor],
+      [editor]
     );
 
-    const getReferenceClientRect = useCallback(() => {
+    const getReferencedVirtualElement = useCallback(() => {
       const { selection } = editor.state;
       const predicate = (node: PMNode) => node.type.name === "table";
       const parent = findParentNode(predicate)(selection);
 
       if (parent) {
         const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-        return dom.getBoundingClientRect();
+        const rect = dom.getBoundingClientRect();
+        return {
+          getBoundingClientRect: () => rect,
+          getClientRects: () => [rect],
+        };
       }
 
-      return posToDOMRect(editor.view, selection.from, selection.to);
+      const rect = posToDOMRect(editor.view, selection.from, selection.to);
+      return {
+        getBoundingClientRect: () => rect,
+        getClientRects: () => [rect],
+      };
     }, [editor]);
 
     const toggleHeaderColumn = useCallback(() => {
@@ -87,42 +93,33 @@ export const TableMenu = React.memo(
     }, [editor]);
 
     return (
-      <BaseBubbleMenu
+      <BubbleMenu
         editor={editor}
         pluginKey="table-menu"
-        updateDelay={0}
+        resizeDelay={0}
-        tippyOptions={{
+        getReferencedVirtualElement={getReferencedVirtualElement}
-          getReferenceClientRect: getReferenceClientRect,
+        ref={(element) => {
-          offset: [0, 15],
+          element.style.zIndex = "99";
-          zIndex: 99,
+        }}
-          popperOptions: {
+        options={{
-            modifiers: [
+          placement: "top",
-              {
+          offset: {
-                name: "preventOverflow",
+            mainAxis: 15,
-                enabled: true,
+          },
-                options: {
+          flip: {
-                  altAxis: true,
+            fallbackPlacements: ["top", "bottom"],
-                  boundary: "clippingParents",
+            padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
-                  padding: 8,
+            boundary: editor.options.element as HTMLElement,
-                },
+          },
-              },
+          shift: {
-              {
+            padding: 8 + 15,
-                name: "flip",
+            crossAxis: true,
-                enabled: true,
-                options: {
-                  boundary: editor.options.element,
-                  fallbackPlacements: ["top", "bottom"],
-                  padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
-                },
-              },
-            ],
           },
         }}
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>
-          <Tooltip position="top" label={t("Add left column")}
+          <Tooltip position="top" label={t("Add left column")}>
-          >
             <ActionIcon
               onClick={addColumnLeft}
               variant="default"
@@ -188,8 +185,7 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Toggle header row")}
+          <Tooltip position="top" label={t("Toggle header row")}>
-          >
             <ActionIcon
               onClick={toggleHeaderRow}
               variant="default"
@@ -200,8 +196,7 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Toggle header column")}
+          <Tooltip position="top" label={t("Toggle header column")}>
-          >
             <ActionIcon
               onClick={toggleHeaderColumn}
               variant="default"
@@ -224,9 +219,9 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
         </ActionIcon.Group>
-      </BaseBubbleMenu>
+      </BubbleMenu>
     );
-  },
+  }
 );
 
 export default TableMenu;

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

@@ -1,11 +1,6 @@
-import {
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-  BubbleMenu as BaseBubbleMenu,
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
 import React, { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
@@ -22,20 +17,10 @@ import { useTranslation } from "react-i18next";
 
 export function VideoMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return editor.isActive("video");
-    },
-    [editor],
-  );
 
   const editorState = useEditorState({
     editor,
-    selector: (ctx) => {
+    selector: ctx => {
       if (!ctx.editor) {
         return null;
       }
@@ -52,17 +37,37 @@ export function VideoMenu({ editor }: EditorMenuProps) {
     },
   });
 
-  const getReferenceClientRect = useCallback(() => {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("video");
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "video";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
       const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
     }
 
-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
   }, [editor]);
 
   const alignVideoLeft = useCallback(() => {
@@ -105,15 +110,11 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       editor={editor}
       pluginKey={`video-menu`}
       updateDelay={0}
-      tippyOptions={{
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferenceClientRect,
+      options={{
-        offset: [0, 8],
+        placement: "top",
-        zIndex: 99,
+        offset: 8,
-        popperOptions: {
+        flip: false,
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
       }}
       shouldShow={shouldShow}
     >

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

@@ -1,11 +1,7 @@
 import { StarterKit } from "@tiptap/starter-kit";
-import { Placeholder } from "@tiptap/extension-placeholder";
 import { TextAlign } from "@tiptap/extension-text-align";
-import { CharacterCount } from "@tiptap/extension-character-count";
+import { TaskList, TaskItem } from "@tiptap/extension-list";
-import { TaskList } from "@tiptap/extension-task-list";
+import { Placeholder, CharacterCount } from "@tiptap/extensions";
-import { ListKeymap } from "@tiptap/extension-list-keymap";
-import { TaskItem } from "@tiptap/extension-task-item";
-import { Underline } from "@tiptap/extension-underline";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Typography } from "@tiptap/extension-typography";
@@ -15,7 +11,7 @@ import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
 import SlashCommand from "@/features/editor/extensions/slash-command";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
-import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
   Comment,
@@ -41,8 +37,8 @@ import {
   Embed,
   SearchAndReplace,
   Mention,
-  Subpages,
   TableDndExtension,
+  Subpages,
   Heading,
   Highlight,
   UniqueID,
@@ -97,7 +93,9 @@ lowlight.register("scala", scala);
 export const mainExtensions = [
   StarterKit.configure({
     heading: false,
-    history: false,
+    undoRedo: false,
+    link: false,
+    trailingNode: false,
     dropcursor: {
       width: 3,
       color: "#70CFF8",
@@ -134,8 +132,6 @@ export const mainExtensions = [
   TaskItem.configure({
     nested: true,
   }),
-  ListKeymap,
-  Underline,
   LinkExtension.configure({
     openOnClick: false,
   }),
@@ -170,6 +166,9 @@ export const mainExtensions = [
     },
   }).extend({
     addNodeView() {
+      // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+      this.editor.isInitialized = true;
+
       return ReactNodeViewRenderer(MentionView);
     },
   }),
@@ -208,6 +207,7 @@ export const mainExtensions = [
   }),
   CustomCodeBlock.configure({
     view: CodeBlockView,
+    //@ts-ignore
     lowlight,
     HTMLAttributes: {
       spellcheck: false,
@@ -258,8 +258,9 @@ type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
 export const collabExtensions: CollabExtensions = (provider, user) => [
   Collaboration.configure({
     document: provider.document,
+    provider,
   }),
-  CollaborationCursor.configure({
+  CollaborationCaret.configure({
     provider,
     user: {
       name: user.name,

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

@@ -1,11 +1,19 @@
 import "@/features/editor/styles/index.css";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 import {
   HocuspocusProvider,
-  onAuthenticationFailedParameters,
+  onStatusParameters,
   WebSocketStatus,
+  HocuspocusProviderWebsocket,
+  onSyncedParameters,
 } from "@hocuspocus/provider";
 import {
   EditorContent,
@@ -69,8 +77,6 @@ export default function PageEditor({
   editable,
   content,
 }: PageEditorProps) {
-
-  
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
   const editorCreated = useRef(false);
@@ -78,152 +84,133 @@ export default function PageEditor({
   useEffect(() => {
     isComponentMounted.current = true;
   }, []);
-  
+
   const [currentUser] = useAtom(currentUserAtom);
   const [, setEditor] = useAtom(pageEditorAtom);
   const [, setAsideState] = useAtom(asideStateAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
-  const ydocRef = useRef<Y.Doc | null>(null);
+  const [isLocalSynced, setIsLocalSynced] = useState(false);
-  if (!ydocRef.current) {
+  const [isRemoteSynced, setIsRemoteSynced] = useState(false);
-    ydocRef.current = new Y.Doc();
-  }
-  const ydoc = ydocRef.current;
-  const [isLocalSynced, setLocalSynced] = useState(false);
-  const [isRemoteSynced, setRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
-    yjsConnectionStatusAtom,
+    yjsConnectionStatusAtom
   );
   const menuContainerRef = useRef(null);
-  const documentName = `page.${pageId}`;
   const { data: collabQuery, refetch: refetchCollabToken } = useCollabToken();
   const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
   const documentState = useDocumentVisibility();
-  const [isCollabReady, setIsCollabReady] = useState(false);
   const { pageSlug } = useParams();
   const slugId = extractPageSlugId(pageSlug);
   const userPageEditMode =
     currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-  
+  const canScroll = useCallback(
-    const canScroll = useCallback(() => isComponentMounted.current && editorCreated.current, [isComponentMounted, editorCreated]);
+    () => isComponentMounted.current && editorCreated.current,
+    [isComponentMounted, editorCreated]
+  );
   const { handleScrollTo } = useEditorScroll({ canScroll });
   // Providers only created once per pageId
   const providersRef = useRef<{
     local: IndexeddbPersistence;
     remote: HocuspocusProvider;
+    socket: HocuspocusProviderWebsocket;
   } | null>(null);
   const [providersReady, setProvidersReady] = useState(false);
 
-  const localProvider = providersRef.current?.local;
-  const remoteProvider = providersRef.current?.remote;
-
-  // Track when collaborative provider is ready and synced
-  const [collabReady, setCollabReady] = useState(false);
-  useEffect(() => {
-    if (
-      remoteProvider?.status === WebSocketStatus.Connected &&
-      isLocalSynced &&
-      isRemoteSynced
-    ) {
-      setCollabReady(true);
-    }
-  }, [remoteProvider?.status, isLocalSynced, isRemoteSynced]);
-
   useEffect(() => {
     if (!providersRef.current) {
+      const documentName = `page.${pageId}`;
+      const ydoc = new Y.Doc();
       const local = new IndexeddbPersistence(documentName, ydoc);
-      local.on("synced", () => setLocalSynced(true));
+      const socket = new HocuspocusProviderWebsocket({
-      const remote = new HocuspocusProvider({
-        name: documentName,
         url: collaborationURL,
+      });
+      const onLocalSyncedHandler = () => {
+        setIsLocalSynced(true);
+      };
+      const onStatusHandler = (event: onStatusParameters) => {
+        setYjsConnectionStatus(event.status);
+      };
+      const onSyncedHandler = (event: onSyncedParameters) => {
+        setIsRemoteSynced(event.state);
+      };
+      const onAuthenticationFailedHandler = () => {
+        const payload = jwtDecode(collabQuery?.token);
+        const now = Date.now().valueOf() / 1000;
+        const isTokenExpired = now >= payload.exp;
+        if (isTokenExpired) {
+          refetchCollabToken().then((result) => {
+            if (result.data?.token) {
+              socket.disconnect();
+              setTimeout(() => {
+                remote.configuration.token = result.data.token;
+                socket.connect();
+              }, 100);
+            }
+          });
+        }
+      };
+      const remote = new HocuspocusProvider({
+        websocketProvider: socket,
+        name: documentName,
         document: ydoc,
         token: collabQuery?.token,
-        connect: true,
+        onAuthenticationFailed: onAuthenticationFailedHandler,
-        preserveConnection: false,
+        onStatus: onStatusHandler,
-        onAuthenticationFailed: (auth: onAuthenticationFailedParameters) => {
+        onSynced: onSyncedHandler,
-          const payload = jwtDecode(collabQuery?.token);
-          const now = Date.now().valueOf() / 1000;
-          const isTokenExpired = now >= payload.exp;
-          if (isTokenExpired) {
-            refetchCollabToken().then((result) => {
-              if (result.data?.token) {
-                remote.disconnect();
-                setTimeout(() => {
-                  remote.configuration.token = result.data.token;
-                  remote.connect();
-                }, 100);
-              }
-            });
-          }
-        },
-        onStatus: (status) => {
-          if (status.status === "connected") {
-            setYjsConnectionStatus(status.status);
-          }
-        },
       });
-      remote.on("synced", () => setRemoteSynced(true));
+
-      remote.on("disconnect", () => {
+      local.on("synced", onLocalSyncedHandler);
-        setYjsConnectionStatus(WebSocketStatus.Disconnected);
+      providersRef.current = { socket, local, remote };
-      });
-      providersRef.current = { local, remote };
       setProvidersReady(true);
     } else {
       setProvidersReady(true);
     }
     // Only destroy on final unmount
     return () => {
+      providersRef.current?.socket.destroy();
       providersRef.current?.remote.destroy();
       providersRef.current?.local.destroy();
       providersRef.current = null;
     };
   }, [pageId]);
 
-  /*
-  useEffect(() => {
-    // Handle token updates by reconnecting with new token
-    if (providersRef.current?.remote && collabQuery?.token) {
-      const currentToken = providersRef.current.remote.configuration.token;
-      if (currentToken !== collabQuery.token) {
-        // Token has changed, need to reconnect with new token
-        providersRef.current.remote.disconnect();
-        providersRef.current.remote.configuration.token = collabQuery.token;
-        providersRef.current.remote.connect();
-      }
-    }
-  }, [collabQuery?.token]);
-   */
-
   // Only connect/disconnect on tab/idle, not destroy
   useEffect(() => {
     if (!providersReady || !providersRef.current) return;
-    const remoteProvider = providersRef.current.remote;
+    const socket = providersRef.current.socket;
+
     if (
       isIdle &&
       documentState === "hidden" &&
-      remoteProvider.status === WebSocketStatus.Connected
+      yjsConnectionStatus === WebSocketStatus.Connected
     ) {
-      remoteProvider.disconnect();
+      socket.disconnect();
-      setIsCollabReady(false);
       return;
     }
     if (
       documentState === "visible" &&
-      remoteProvider.status === WebSocketStatus.Disconnected
+      yjsConnectionStatus === WebSocketStatus.Disconnected
     ) {
       resetIdle();
-      remoteProvider.connect();
+      socket.connect();
-      setTimeout(() => setIsCollabReady(true), 500);
     }
   }, [isIdle, documentState, providersReady, resetIdle]);
 
+  // Attach here, to make sure the connection gets properly established
+  providersRef.current?.remote.attach();
+
   const extensions = useMemo(() => {
-    if (!remoteProvider || !currentUser?.user) return mainExtensions;
+    if (!providersReady || !providersRef.current || !currentUser?.user) {
+      return mainExtensions;
+    }
+
+    const remoteProvider = providersRef.current.remote;
+
     return [
       ...mainExtensions,
       ...collabExtensions(remoteProvider, currentUser?.user),
     ];
-  }, [remoteProvider, currentUser?.user]);
+  }, [providersReady, currentUser?.user]);
 
   const editor = useEditor(
     {
@@ -275,6 +262,7 @@ export default function PageEditor({
         if (editor) {
           // @ts-ignore
           setEditor(editor);
+          // @ts-ignore
           editor.storage.pageId = pageId;
           handleScrollTo(editor);
           editorCreated.current = true;
@@ -287,7 +275,7 @@ export default function PageEditor({
         debouncedUpdateContent(editorJson);
       },
     },
-    [pageId, editable, remoteProvider],
+    [pageId, editable, extensions]
   );
 
   const editorIsEditable = useEditorState({
@@ -332,7 +320,7 @@ export default function PageEditor({
     return () => {
       document.removeEventListener(
         "ACTIVE_COMMENT_EVENT",
-        handleActiveCommentEvent,
+        handleActiveCommentEvent
       );
     };
   }, []);
@@ -343,30 +331,17 @@ export default function PageEditor({
     setAsideState({ tab: "", isAsideOpen: false });
   }, [pageId]);
 
-  useEffect(() => {
-    if (remoteProvider?.status === WebSocketStatus.Connecting) {
-      const timeout = setTimeout(() => {
-        setYjsConnectionStatus(WebSocketStatus.Disconnected);
-      }, 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [remoteProvider?.status]);
-
   const isSynced = isLocalSynced && isRemoteSynced;
 
   useEffect(() => {
-    const collabReadyTimeout = setTimeout(() => {
+    const timeout = setTimeout(() => {
-      if (
+      if (yjsConnectionStatus === WebSocketStatus.Connecting || !isSynced) {
-        !isCollabReady &&
+        setYjsConnectionStatus(WebSocketStatus.Disconnected);
-        isSynced &&
-        remoteProvider?.status === WebSocketStatus.Connected
-      ) {
-        setIsCollabReady(true);
       }
-    }, 500);
+    }, 7500);
-    return () => clearTimeout(collabReadyTimeout);
-  }, [isRemoteSynced, isLocalSynced, remoteProvider?.status]);
 
+    return () => clearTimeout(timeout);
+  }, [yjsConnectionStatus, isSynced]);
   useEffect(() => {
     // Only honor user default page edit mode preference and permissions
     if (editor) {
@@ -388,12 +363,13 @@ export default function PageEditor({
   useEffect(() => {
     if (
       !hasConnectedOnceRef.current &&
-      remoteProvider?.status === WebSocketStatus.Connected
+      yjsConnectionStatus === WebSocketStatus.Connected &&
+      isSynced
     ) {
       hasConnectedOnceRef.current = true;
       setShowStatic(false);
     }
-  }, [remoteProvider?.status]);
+  }, [yjsConnectionStatus, isSynced]);
 
   if (showStatic) {
     return (

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

@@ -81,6 +81,7 @@ export default function ReadonlyPageEditor({
         onCreate={({ editor }) => {
           if (editor) {
             if (pageId) {
+              // @ts-ignore
               editor.storage.pageId = pageId;
             }
             // @ts-ignore

apps/client/src/features/editor/styles/collaboration.css

@@ -1,5 +1,5 @@
 /* Give a remote user a caret */
-.collaboration-cursor__caret {
+.collaboration-carets__caret {
     border-left: 1px solid #0d0d0d;
     border-right: 1px solid #0d0d0d;
     margin-left: -1px;
@@ -10,7 +10,7 @@
 }
 
 /* Render the username above the caret */
-.collaboration-cursor__label {
+.collaboration-carets__label {
     border-radius: 3px 3px 3px 0;
     color: #0d0d0d;
     font-size: 0.75rem;

apps/client/src/features/page-history/components/history-list.tsx

@@ -67,7 +67,7 @@ function HistoryList({ pageId }: Props) {
       mainEditorTitle
         .chain()
         .clearContent()
-        .setContent(activeHistoryData.title, true)
+        .setContent(activeHistoryData.title, { emitUpdate: true })
         .run();
       mainEditor
         .chain()

apps/server/src/collaboration/collaboration.gateway.ts

@@ -26,7 +26,7 @@ export class CollaborationGateway {
   ) {
     this.redisConfig = parseRedisUrl(this.environmentService.getRedisUrl());
 
-    this.hocuspocus = HocuspocusServer.configure({
+    this.hocuspocus = new Hocuspocus({
       debounce: 10000,
       maxDebounce: 45000,
       unloadImmediately: false,
@@ -69,6 +69,6 @@ export class CollaborationGateway {
   }
 
   async destroy(): Promise<void> {
-    await this.hocuspocus.destroy();
+    //await this.hocuspocus.destroy();
   }
 }

apps/server/src/collaboration/collaboration.util.ts

@@ -1,14 +1,12 @@
 import { StarterKit } from '@tiptap/starter-kit';
 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 { Superscript } from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import { Typography } from '@tiptap/extension-typography';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Youtube } from '@tiptap/extension-youtube';
+import { TaskList, TaskItem } from '@tiptap/extension-list';
 import {
   Heading,
   Callout,
@@ -42,6 +40,7 @@ import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
 // @tiptap/html library works best for generating prosemirror json state but not HTML
 // see: https://github.com/ueberdosis/tiptap/issues/5352
 // see:https://github.com/ueberdosis/tiptap/issues/4089
+//import { generateJSON } from '@tiptap/html';
 import { Node } from '@tiptap/pm/model';
 import * as Y from 'yjs';
 import { turndown } from '../integrations/export/turndown-utils';
@@ -49,6 +48,8 @@ import { turndown } from '../integrations/export/turndown-utils';
 export const tiptapExtensions = [
   StarterKit.configure({
     codeBlock: false,
+    link: false,
+    trailingNode: false,
     heading: false,
   }),
   Heading,
@@ -61,7 +62,6 @@ export const tiptapExtensions = [
   TaskItem.configure({
     nested: true,
   }),
-  Underline,
   LinkExtension,
   Superscript,
   SubScript,

apps/server/src/collaboration/extensions/authentication.extension.ts

@@ -69,7 +69,7 @@ export class AuthenticationExtension implements Extension {
     }
 
     if (userSpaceRole === SpaceRole.READER) {
-      data.connection.readOnly = true;
+      data.connectionConfig.readOnly = true;
       this.logger.debug(`User granted readonly access to page: ${pageId}`);
     }
 

package.json

@@ -15,60 +15,55 @@
     "server:dev": "nx run server:start:dev",
     "server:start": "nx run server:start:prod",
     "email:dev": "nx run server:email:dev",
-    "dev": "pnpm concurrently -n \"frontend,backend\" -c \"cyan,green\" \"pnpm run client:dev\" \"pnpm run server:dev\""
+    "dev": "pnpm concurrently -n \"frontend,backend\" -c \"cyan,green\" \"pnpm run client:dev\" \"pnpm run server:dev\"",
+    "clean": "rm -rf apps/*/dist packages/*/dist"
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.1.0",
     "@casl/ability": "^6.7.5",
     "@docmost/editor-ext": "workspace:*",
     "@floating-ui/dom": "^1.7.3",
-    "@hocuspocus/extension-redis": "^2.15.3",
+    "@hocuspocus/extension-redis": "3.4.3",
-    "@hocuspocus/provider": "^2.15.3",
+    "@hocuspocus/provider": "3.4.3",
-    "@hocuspocus/server": "^2.15.3",
+    "@hocuspocus/server": "3.4.3",
-    "@hocuspocus/transformer": "^2.15.3",
+    "@hocuspocus/transformer": "3.4.3",
     "@joplin/turndown": "^4.0.74",
     "@joplin/turndown-plugin-gfm": "^1.0.56",
     "@sindresorhus/slugify": "1.1.0",
-    "@tiptap/core": "2.27.1",
+    "@tiptap/core": "3.15.3",
-    "@tiptap/extension-code-block": "2.27.1",
+    "@tiptap/extension-code-block": "3.15.3",
-    "@tiptap/extension-code-block-lowlight": "2.27.1",
+    "@tiptap/extension-collaboration": "3.15.3",
-    "@tiptap/extension-collaboration": "2.27.1",
+    "@tiptap/extension-collaboration-caret": "3.15.3",
-    "@tiptap/extension-collaboration-cursor": "2.27.1",
+    "@tiptap/extension-color": "3.15.3",
-    "@tiptap/extension-color": "2.27.1",
+    "@tiptap/extension-document": "3.15.3",
-    "@tiptap/extension-document": "2.27.1",
+    "@tiptap/extension-heading": "3.15.3",
-    "@tiptap/extension-heading": "2.27.1",
+    "@tiptap/extension-highlight": "3.15.3",
-    "@tiptap/extension-highlight": "2.27.1",
+    "@tiptap/extension-history": "3.15.3",
-    "@tiptap/extension-history": "2.27.1",
+    "@tiptap/extension-image": "3.15.3",
-    "@tiptap/extension-image": "2.27.1",
+    "@tiptap/extension-link": "3.15.3",
-    "@tiptap/extension-link": "2.27.1",
+    "@tiptap/extension-list": "3.15.3",
-    "@tiptap/extension-list-item": "2.27.1",
+    "@tiptap/extension-placeholder": "3.15.3",
-    "@tiptap/extension-list-keymap": "2.27.1",
+    "@tiptap/extension-subscript": "3.15.3",
-    "@tiptap/extension-placeholder": "2.27.1",
+    "@tiptap/extension-superscript": "3.15.3",
-    "@tiptap/extension-subscript": "2.27.1",
+    "@tiptap/extension-table": "3.15.3",
-    "@tiptap/extension-superscript": "2.27.1",
+    "@tiptap/extension-text": "3.15.3",
-    "@tiptap/extension-table": "2.27.1",
+    "@tiptap/extension-text-align": "3.15.3",
-    "@tiptap/extension-table-cell": "2.27.1",
+    "@tiptap/extension-text-style": "3.15.3",
-    "@tiptap/extension-table-header": "2.27.1",
+    "@tiptap/extension-typography": "3.15.3",
-    "@tiptap/extension-table-row": "2.27.1",
+    "@tiptap/extension-unique-id": "^3.15.3",
-    "@tiptap/extension-task-item": "2.27.1",
+    "@tiptap/extension-youtube": "3.15.3",
-    "@tiptap/extension-task-list": "2.27.1",
+    "@tiptap/html": "3.15.3",
-    "@tiptap/extension-text": "2.27.1",
+    "@tiptap/pm": "3.15.3",
-    "@tiptap/extension-text-align": "2.27.1",
+    "@tiptap/react": "3.15.3",
-    "@tiptap/extension-text-style": "2.27.1",
+    "@tiptap/starter-kit": "3.15.3",
-    "@tiptap/extension-typography": "2.27.1",
+    "@tiptap/suggestion": "3.15.3",
-    "@tiptap/extension-underline": "2.27.1",
-    "@tiptap/extension-youtube": "2.27.1",
-    "@tiptap/html": "2.27.1",
-    "@tiptap/pm": "2.27.1",
-    "@tiptap/react": "2.27.1",
-    "@tiptap/starter-kit": "2.27.1",
-    "@tiptap/suggestion": "2.27.1",
     "@types/qrcode": "^1.5.5",
     "bytes": "^3.1.2",
     "cross-env": "^7.0.3",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.6",
     "fractional-indexing-jittered": "^1.0.0",
+    "highlight.js": "^11.11.1",
     "ioredis": "^5.4.1",
     "jszip": "^3.10.1",
     "linkifyjs": "^4.3.2",
@@ -78,7 +73,7 @@
     "uuid": "^11.1.0",
     "y-indexeddb": "^9.0.12",
     "y-prosemirror": "1.3.7",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.29"
   },
   "devDependencies": {
     "@nx/js": "20.4.5",

packages/editor-ext/src/lib/attachment/attachment.ts

@@ -92,7 +92,7 @@ export const Attachment = Node.create<AttachmentOptions>({
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
       [
         "a",
@@ -120,6 +120,9 @@ export const Attachment = Node.create<AttachmentOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 

packages/editor-ext/src/lib/callout/callout.ts

@@ -87,7 +87,7 @@ export const Callout = Node.create<CalloutOptions>({
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
       0,
     ];
@@ -130,6 +130,9 @@ export const Callout = Node.create<CalloutOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 
@@ -193,7 +196,7 @@ export const Callout = Node.create<CalloutOptions>({
 
           tr.delete(pos, pos + nodeSize);
           tr.setSelection(
-            TextSelection.near(tr.doc.resolve(previousPosition - 1)),
+            TextSelection.near(tr.doc.resolve(previousPosition - 1))
           );
           tr.insert(previousPosition - 1, content);
 

packages/editor-ext/src/lib/custom-code-block.ts

@@ -1,81 +0,0 @@
-import CodeBlockLowlight, {
-  CodeBlockLowlightOptions,
-} from "@tiptap/extension-code-block-lowlight";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-
-export interface CustomCodeBlockOptions extends CodeBlockLowlightOptions {
-  view: any;
-}
-
-const TAB_CHAR = "\u00A0\u00A0";
-
-export const CustomCodeBlock = CodeBlockLowlight.extend<CustomCodeBlockOptions>(
-  {
-    selectable: true,
-
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        view: null,
-      };
-    },
-
-    addKeyboardShortcuts() {
-      return {
-        ...this.parent?.(),
-        Tab: () => {
-          if (this.editor.isActive("codeBlock")) {
-            this.editor
-              .chain()
-              .command(({ tr }) => {
-                tr.insertText(TAB_CHAR);
-                return true;
-              })
-              .run();
-            return true;
-          }
-        },
-        "Mod-a": () => {
-          if (this.editor.isActive("codeBlock")) {
-            const { state } = this.editor;
-            const { $from } = state.selection;
-            
-            let codeBlockNode = null;
-            let codeBlockPos = null;
-            let depth = 0;
-            
-            for (depth = $from.depth; depth > 0; depth--) {
-              const node = $from.node(depth);
-              if (node.type.name === "codeBlock") {
-                codeBlockNode = node;
-                codeBlockPos = $from.start(depth) - 1;
-                break;
-              }
-            }
-            
-            if (codeBlockNode && codeBlockPos !== null) {
-              const codeBlockStart = codeBlockPos;
-              const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
-              
-              const contentStart = codeBlockStart + 1;
-              const contentEnd = codeBlockEnd - 1;
-              
-              this.editor.commands.setTextSelection({
-                from: contentStart,
-                to: contentEnd,
-              });
-              
-              return true;
-            }
-          }
-          
-          return false;
-        },
-      };
-    },
-
-    addNodeView() {
-      return ReactNodeViewRenderer(this.options.view);
-    },
-  }
-);

packages/editor-ext/src/lib/custom-code-block/custom-code-block.ts

@@ -0,0 +1,108 @@
+import type { CodeBlockOptions } from "@tiptap/extension-code-block";
+import CodeBlock from "@tiptap/extension-code-block";
+
+import { LowlightPlugin } from "./lowlight-plugin.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+  /**
+   * The lowlight instance.
+   */
+  lowlight: any;
+  view: any;
+}
+
+const TAB_CHAR = "\u00A0\u00A0";
+
+/**
+ * This extension allows you to highlight code blocks with lowlight.
+ * @see https://tiptap.dev/api/nodes/code-block-lowlight
+ */
+export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
+  selectable: true,
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      lowlight: {},
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      defaultLanguage: null,
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Tab: () => {
+        if (this.editor.isActive("codeBlock")) {
+          this.editor
+            .chain()
+            .command(({ tr }) => {
+              tr.insertText(TAB_CHAR);
+              return true;
+            })
+            .run();
+          return true;
+        }
+      },
+      "Mod-a": () => {
+        if (this.editor.isActive("codeBlock")) {
+          const { state } = this.editor;
+          const { $from } = state.selection;
+
+          let codeBlockNode = null;
+          let codeBlockPos = null;
+          let depth = 0;
+
+          for (depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === "codeBlock") {
+              codeBlockNode = node;
+              codeBlockPos = $from.start(depth) - 1;
+              break;
+            }
+          }
+
+          if (codeBlockNode && codeBlockPos !== null) {
+            const codeBlockStart = codeBlockPos;
+            const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
+
+            const contentStart = codeBlockStart + 1;
+            const contentEnd = codeBlockEnd - 1;
+
+            this.editor.commands.setTextSelection({
+              from: contentStart,
+              to: contentEnd,
+            });
+
+            return true;
+          }
+        }
+
+        return false;
+      },
+    };
+  },
+
+  addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
+    return ReactNodeViewRenderer(this.options.view);
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.parent?.() || []),
+      LowlightPlugin({
+        name: this.name,
+        lowlight: this.options.lowlight,
+        defaultLanguage: this.options.defaultLanguage,
+      }),
+    ];
+  },
+});

packages/editor-ext/src/lib/custom-code-block/index.ts

@@ -0,0 +1 @@
+export { CustomCodeBlock } from "./custom-code-block";

packages/editor-ext/src/lib/custom-code-block/lowlight-plugin.ts

@@ -0,0 +1,159 @@
+import { findChildren } from '@tiptap/core'
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+// @ts-ignore
+import highlight from 'highlight.js/lib/core'
+
+function parseNodes(nodes: any[], className: string[] = []): { text: string; classes: string[] }[] {
+  return nodes
+    .map(node => {
+      const classes = [...className, ...(node.properties ? node.properties.className : [])]
+
+      if (node.children) {
+        return parseNodes(node.children, classes)
+      }
+
+      return {
+        text: node.value,
+        classes,
+      }
+    })
+    .flat()
+}
+
+function getHighlightNodes(result: any) {
+  // `.value` for lowlight v1, `.children` for lowlight v2
+  return result.value || result.children || []
+}
+
+function registered(aliasOrLanguage: string) {
+  return Boolean(highlight.getLanguage(aliasOrLanguage))
+}
+
+function getDecorations({
+  doc,
+  name,
+  lowlight,
+  defaultLanguage,
+}: {
+  doc: ProsemirrorNode
+  name: string
+  lowlight: any
+  defaultLanguage: string | null | undefined
+}) {
+  const decorations: Decoration[] = []
+
+  findChildren(doc, node => node.type.name === name).forEach(block => {
+    let from = block.pos + 1
+    const language = block.node.attrs.language || defaultLanguage
+    const languages = lowlight.listLanguages()
+
+    const nodes =
+      language && (languages.includes(language) || registered(language) || lowlight.registered?.(language))
+        ? getHighlightNodes(lowlight.highlight(language, block.node.textContent))
+        : getHighlightNodes(lowlight.highlightAuto(block.node.textContent))
+
+    parseNodes(nodes).forEach(node => {
+      const to = from + node.text.length
+
+      if (node.classes.length) {
+        const decoration = Decoration.inline(from, to, {
+          class: node.classes.join(' '),
+        })
+
+        decorations.push(decoration)
+      }
+
+      from = to
+    })
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+function isFunction(param: any): param is Function {
+  return typeof param === 'function'
+}
+
+export function LowlightPlugin({
+  name,
+  lowlight,
+  defaultLanguage,
+}: {
+  name: string
+  lowlight: any
+  defaultLanguage: string | null | undefined
+}) {
+  if (!['highlight', 'highlightAuto', 'listLanguages'].every(api => isFunction(lowlight[api]))) {
+    throw Error('You should provide an instance of lowlight to use the code-block-lowlight extension')
+  }
+
+  const lowlightPlugin: Plugin<any> = new Plugin({
+    key: new PluginKey('lowlight'),
+
+    state: {
+      init: (_, { doc }) =>
+        getDecorations({
+          doc,
+          name,
+          lowlight,
+          defaultLanguage,
+        }),
+      apply: (transaction, decorationSet, oldState, newState) => {
+        const oldNodeName = oldState.selection.$head.parent.type.name
+        const newNodeName = newState.selection.$head.parent.type.name
+        const oldNodes = findChildren(oldState.doc, node => node.type.name === name)
+        const newNodes = findChildren(newState.doc, node => node.type.name === name)
+
+        if (
+          transaction.docChanged &&
+          // Apply decorations if:
+          // selection includes named node,
+          ([oldNodeName, newNodeName].includes(name) ||
+            // OR transaction adds/removes named node,
+            newNodes.length !== oldNodes.length ||
+            // OR transaction has changes that completely encapsulte a node
+            // (for example, a transaction that affects the entire document).
+            // Such transactions can happen during collab syncing via y-prosemirror, for example.
+            transaction.steps.some(step => {
+              // @ts-ignore
+              return (
+                // @ts-ignore
+                step.from !== undefined &&
+                // @ts-ignore
+                step.to !== undefined &&
+                oldNodes.some(node => {
+                  // @ts-ignore
+                  return (
+                    // @ts-ignore
+                    node.pos >= step.from &&
+                    // @ts-ignore
+                    node.pos + node.node.nodeSize <= step.to
+                  )
+                })
+              )
+            }))
+        ) {
+          return getDecorations({
+            doc: transaction.doc,
+            name,
+            lowlight,
+            defaultLanguage,
+          })
+        }
+
+        return decorationSet.map(transaction.mapping, transaction.doc)
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return lowlightPlugin.getState(state)
+      },
+    },
+  })
+
+  return lowlightPlugin
+}

packages/editor-ext/src/lib/details/details.ts

@@ -27,6 +27,7 @@ export const Details = Node.create<DetailsOptions>({
   content: "detailsSummary detailsContent",
   defining: true,
   isolating: true,
+  // @ts-ignore
   allowGapCursor: false,
   addOptions() {
     return {

packages/editor-ext/src/lib/drawio.ts

@@ -41,45 +41,45 @@ export const Drawio = Node.create<DrawioOptions>({
   addAttributes() {
     return {
       src: {
-        default: '',
+        default: "",
-        parseHTML: (element) => element.getAttribute('data-src'),
+        parseHTML: (element) => element.getAttribute("data-src"),
         renderHTML: (attributes) => ({
-          'data-src': attributes.src,
+          "data-src": attributes.src,
         }),
       },
       title: {
         default: undefined,
-        parseHTML: (element) => element.getAttribute('data-title'),
+        parseHTML: (element) => element.getAttribute("data-title"),
         renderHTML: (attributes: DrawioAttributes) => ({
-          'data-title': attributes.title,
+          "data-title": attributes.title,
         }),
       },
       width: {
-        default: '100%',
+        default: "100%",
-        parseHTML: (element) => element.getAttribute('data-width'),
+        parseHTML: (element) => element.getAttribute("data-width"),
         renderHTML: (attributes: DrawioAttributes) => ({
-          'data-width': attributes.width,
+          "data-width": attributes.width,
         }),
       },
       size: {
         default: null,
-        parseHTML: (element) => element.getAttribute('data-size'),
+        parseHTML: (element) => element.getAttribute("data-size"),
         renderHTML: (attributes: DrawioAttributes) => ({
-          'data-size': attributes.size,
+          "data-size": attributes.size,
         }),
       },
       align: {
-        default: 'center',
+        default: "center",
-        parseHTML: (element) => element.getAttribute('data-align'),
+        parseHTML: (element) => element.getAttribute("data-align"),
         renderHTML: (attributes: DrawioAttributes) => ({
-          'data-align': attributes.align,
+          "data-align": attributes.align,
         }),
       },
       attachmentId: {
         default: undefined,
-        parseHTML: (element) => element.getAttribute('data-attachment-id'),
+        parseHTML: (element) => element.getAttribute("data-attachment-id"),
         renderHTML: (attributes: DrawioAttributes) => ({
-          'data-attachment-id': attributes.attachmentId,
+          "data-attachment-id": attributes.attachmentId,
         }),
       },
     };
@@ -95,13 +95,20 @@ export const Drawio = Node.create<DrawioOptions>({
 
   renderHTML({ HTMLAttributes }) {
     return [
-      'div',
+      "div",
       mergeAttributes(
-        { 'data-type': this.name },
+        { "data-type": this.name },
         this.options.HTMLAttributes,
         HTMLAttributes
       ),
-      ['img', { src: HTMLAttributes['data-src'], alt: HTMLAttributes['data-title'], width: HTMLAttributes['data-width'] }],
+      [
+        "img",
+        {
+          src: HTMLAttributes["data-src"],
+          alt: HTMLAttributes["data-title"],
+          width: HTMLAttributes["data-width"],
+        },
+      ],
     ];
   },
 
@@ -119,6 +126,9 @@ export const Drawio = Node.create<DrawioOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 });

packages/editor-ext/src/lib/embed.ts

@@ -1,6 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core';
+import { Node, mergeAttributes } from "@tiptap/core";
-import { ReactNodeViewRenderer } from '@tiptap/react';
+import { ReactNodeViewRenderer } from "@tiptap/react";
-import { sanitizeUrl } from './utils';
+import { sanitizeUrl } from "./utils";
 
 export interface EmbedOptions {
   HTMLAttributes: Record<string, any>;
@@ -14,7 +14,7 @@ export interface EmbedAttributes {
   height?: number;
 }
 
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     embeds: {
       setEmbed: (attributes?: EmbedAttributes) => ReturnType;
@@ -23,9 +23,9 @@ declare module '@tiptap/core' {
 }
 
 export const Embed = Node.create<EmbedOptions>({
-  name: 'embed',
+  name: "embed",
   inline: false,
-  group: 'block',
+  group: "block",
   isolating: true,
   atom: true,
   defining: true,
@@ -40,41 +40,41 @@ export const Embed = Node.create<EmbedOptions>({
   addAttributes() {
     return {
       src: {
-        default: '',
+        default: "",
         parseHTML: (element) => {
-          const src = element.getAttribute('data-src');
+          const src = element.getAttribute("data-src");
           return sanitizeUrl(src);
         },
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-src': sanitizeUrl(attributes.src),
+          "data-src": sanitizeUrl(attributes.src),
         }),
       },
       provider: {
-        default: '',
+        default: "",
-        parseHTML: (element) => element.getAttribute('data-provider'),
+        parseHTML: (element) => element.getAttribute("data-provider"),
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-provider': attributes.provider,
+          "data-provider": attributes.provider,
         }),
       },
       align: {
-        default: 'center',
+        default: "center",
-        parseHTML: (element) => element.getAttribute('data-align'),
+        parseHTML: (element) => element.getAttribute("data-align"),
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-align': attributes.align,
+          "data-align": attributes.align,
         }),
       },
       width: {
         default: 640,
-        parseHTML: (element) => element.getAttribute('data-width'),
+        parseHTML: (element) => element.getAttribute("data-width"),
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-width': attributes.width,
+          "data-width": attributes.width,
         }),
       },
       height: {
         default: 480,
-        parseHTML: (element) => element.getAttribute('data-height'),
+        parseHTML: (element) => element.getAttribute("data-height"),
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-height': attributes.height,
+          "data-height": attributes.height,
         }),
       },
     };
@@ -91,13 +91,13 @@ export const Embed = Node.create<EmbedOptions>({
   renderHTML({ HTMLAttributes }) {
     const src = HTMLAttributes["data-src"];
     const safeHref = sanitizeUrl(src);
-    
+
     return [
       "div",
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
       [
         "a",
@@ -120,9 +120,9 @@ export const Embed = Node.create<EmbedOptions>({
             ...attrs,
             src: sanitizeUrl(attrs.src),
           };
-          
+
           return commands.insertContent({
-            type: 'embed',
+            type: "embed",
             attrs: validatedAttrs,
           });
         },
@@ -130,6 +130,9 @@ export const Embed = Node.create<EmbedOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 });

packages/editor-ext/src/lib/excalidraw.ts

@@ -1,5 +1,5 @@
-import { Node, mergeAttributes } from '@tiptap/core';
+import { Node, mergeAttributes } from "@tiptap/core";
-import { ReactNodeViewRenderer } from '@tiptap/react';
+import { ReactNodeViewRenderer } from "@tiptap/react";
 
 export interface ExcalidrawOptions {
   HTMLAttributes: Record<string, any>;
@@ -14,7 +14,7 @@ export interface ExcalidrawAttributes {
   attachmentId?: string;
 }
 
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     excalidraw: {
       setExcalidraw: (attributes?: ExcalidrawAttributes) => ReturnType;
@@ -23,9 +23,9 @@ declare module '@tiptap/core' {
 }
 
 export const Excalidraw = Node.create<ExcalidrawOptions>({
-  name: 'excalidraw',
+  name: "excalidraw",
   inline: false,
-  group: 'block',
+  group: "block",
   isolating: true,
   atom: true,
   defining: true,
@@ -40,45 +40,45 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
   addAttributes() {
     return {
       src: {
-        default: '',
+        default: "",
-        parseHTML: (element) => element.getAttribute('data-src'),
+        parseHTML: (element) => element.getAttribute("data-src"),
         renderHTML: (attributes) => ({
-          'data-src': attributes.src,
+          "data-src": attributes.src,
         }),
       },
       title: {
         default: undefined,
-        parseHTML: (element) => element.getAttribute('data-title'),
+        parseHTML: (element) => element.getAttribute("data-title"),
         renderHTML: (attributes: ExcalidrawAttributes) => ({
-          'data-title': attributes.title,
+          "data-title": attributes.title,
         }),
       },
       width: {
-        default: '100%',
+        default: "100%",
-        parseHTML: (element) => element.getAttribute('data-width'),
+        parseHTML: (element) => element.getAttribute("data-width"),
         renderHTML: (attributes: ExcalidrawAttributes) => ({
-          'data-width': attributes.width,
+          "data-width": attributes.width,
         }),
       },
       size: {
         default: null,
-        parseHTML: (element) => element.getAttribute('data-size'),
+        parseHTML: (element) => element.getAttribute("data-size"),
         renderHTML: (attributes: ExcalidrawAttributes) => ({
-          'data-size': attributes.size,
+          "data-size": attributes.size,
         }),
       },
       align: {
-        default: 'center',
+        default: "center",
-        parseHTML: (element) => element.getAttribute('data-align'),
+        parseHTML: (element) => element.getAttribute("data-align"),
         renderHTML: (attributes: ExcalidrawAttributes) => ({
-          'data-align': attributes.align,
+          "data-align": attributes.align,
         }),
       },
       attachmentId: {
         default: undefined,
-        parseHTML: (element) => element.getAttribute('data-attachment-id'),
+        parseHTML: (element) => element.getAttribute("data-attachment-id"),
         renderHTML: (attributes: ExcalidrawAttributes) => ({
-          'data-attachment-id': attributes.attachmentId,
+          "data-attachment-id": attributes.attachmentId,
         }),
       },
     };
@@ -94,13 +94,20 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
 
   renderHTML({ HTMLAttributes }) {
     return [
-      'div',
+      "div",
       mergeAttributes(
-        { 'data-type': this.name },
+        { "data-type": this.name },
         this.options.HTMLAttributes,
         HTMLAttributes
       ),
-      ['img', { src: HTMLAttributes['data-src'], alt: HTMLAttributes['data-title'], width: HTMLAttributes['data-width'] }],
+      [
+        "img",
+        {
+          src: HTMLAttributes["data-src"],
+          alt: HTMLAttributes["data-title"],
+          width: HTMLAttributes["data-width"],
+        },
+      ],
     ];
   },
 
@@ -110,7 +117,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
         (attrs: ExcalidrawAttributes) =>
         ({ commands }) => {
           return commands.insertContent({
-            type: 'excalidraw',
+            type: "excalidraw",
             attrs: attrs,
           });
         },
@@ -118,6 +125,9 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 });

packages/editor-ext/src/lib/image/image.ts

@@ -22,7 +22,7 @@ declare module "@tiptap/core" {
     imageBlock: {
       setImage: (attributes: ImageAttributes) => ReturnType;
       setImageAt: (
-        attributes: ImageAttributes & { pos: number | Range },
+        attributes: ImageAttributes & { pos: number | Range }
       ) => ReturnType;
       setImageAlign: (align: "left" | "center" | "right") => ReturnType;
       setImageWidth: (width: number) => ReturnType;
@@ -135,6 +135,9 @@ export const TiptapImage = Image.extend<ImageOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 

packages/editor-ext/src/lib/math/math-block.ts

@@ -63,6 +63,9 @@ export const MathBlock = Node.create({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 

packages/editor-ext/src/lib/math/math-inline.ts

@@ -64,6 +64,9 @@ export const MathInline = Node.create<MathInlineOption>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 

packages/editor-ext/src/lib/search-and-replace/search-and-replace.ts

@@ -31,6 +31,9 @@ import {
 import { Node as PMNode, Mark } from "@tiptap/pm/model";
 
 declare module "@tiptap/core" {
+  interface Storage {
+    searchAndReplace: SearchAndReplaceStorage;
+  }
   interface Commands<ReturnType> {
     search: {
       /**
@@ -184,21 +187,21 @@ const replace = (
 
   if (dispatch) {
     const tr = state.tr;
-    
+
     // Get all marks that span the text being replaced
     const marksSet = new Set<Mark>();
     state.doc.nodesBetween(from, to, (node) => {
       if (node.isText && node.marks) {
-        node.marks.forEach(mark => marksSet.add(mark));
+        node.marks.forEach((mark) => marksSet.add(mark));
       }
     });
-    
+
     const marks = Array.from(marksSet);
-    
+
     // Delete the old text and insert new text with preserved marks
     tr.delete(from, to);
     tr.insert(from, state.schema.text(replaceTerm, marks));
-    
+
     dispatch(tr);
   }
 };
@@ -215,17 +218,17 @@ const replaceAll = (
   // Process replacements in reverse order to avoid position shifting issues
   for (let i = resultsCopy.length - 1; i >= 0; i -= 1) {
     const { from, to } = resultsCopy[i];
-    
+
     // Get all marks that span the text being replaced
     const marksSet = new Set<Mark>();
     tr.doc.nodesBetween(from, to, (node) => {
       if (node.isText && node.marks) {
-        node.marks.forEach(mark => marksSet.add(mark));
+        node.marks.forEach((mark) => marksSet.add(mark));
       }
     });
-    
+
     const marks = Array.from(marksSet);
-    
+
     // Delete and insert with preserved marks
     tr.delete(from, to);
     tr.insert(from, tr.doc.type.schema.text(replaceTerm, marks));
@@ -352,10 +355,17 @@ export const SearchAndReplace = Extension.create<
           // The results will be recalculated by the plugin, but we need to ensure
           // the index doesn't exceed the new bounds
           setTimeout(() => {
-            const newResultsLength = editor.storage.searchAndReplace.results.length;
+            const newResultsLength =
-            if (newResultsLength > 0 && editor.storage.searchAndReplace.resultIndex >= newResultsLength) {
+              editor.storage.searchAndReplace.results.length;
+            if (
+              newResultsLength > 0 &&
+              editor.storage.searchAndReplace.resultIndex >= newResultsLength
+            ) {
               // Keep the same position if possible, otherwise go to the last result
-              editor.storage.searchAndReplace.resultIndex = Math.min(resultIndex, newResultsLength - 1);
+              editor.storage.searchAndReplace.resultIndex = Math.min(
+                resultIndex,
+                newResultsLength - 1,
+              );
             }
           }, 0);
 

packages/editor-ext/src/lib/subpages/subpages.ts

@@ -44,7 +44,7 @@ export const Subpages = Node.create<SubpagesOptions>({
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
     ];
   },
@@ -63,6 +63,9 @@ export const Subpages = Node.create<SubpagesOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 });

packages/editor-ext/src/lib/table/cell.ts

@@ -1,4 +1,4 @@
-import { TableCell as TiptapTableCell } from "@tiptap/extension-table-cell";
+import { TableCell as TiptapTableCell } from "@tiptap/extension-table";
 
 export const TableCell = TiptapTableCell.extend({
   name: "tableCell",

packages/editor-ext/src/lib/table/dnd/dnd-extension.ts

@@ -1,7 +1,12 @@
 import { Editor, Extension } from "@tiptap/core";
 import { PluginKey, Plugin, PluginSpec } from "@tiptap/pm/state";
 import { EditorProps, EditorView } from "@tiptap/pm/view";
-import { DraggingDOMs, getDndRelatedDOMs, getHoveringCell, HoveringCellInfo } from "./utils";
+import {
+  DraggingDOMs,
+  getDndRelatedDOMs,
+  getHoveringCell,
+  HoveringCellInfo,
+} from "./utils";
 import { getDragOverColumn, getDragOverRow } from "./calc-drag-over";
 import { moveColumn, moveRow } from "../utils";
 import { PreviewController } from "./preview/preview-controller";
@@ -10,268 +15,302 @@ import { DragHandleController } from "./handle/drag-handle-controller";
 import { EmptyImageController } from "./handle/empty-image-controller";
 import { AutoScrollController } from "./auto-scroll-controller";
 
-export const TableDndKey = new PluginKey('table-drag-and-drop')
+export const TableDndKey = new PluginKey("table-drag-and-drop");
 
 class TableDragHandlePluginSpec implements PluginSpec<void> {
-    key = TableDndKey
+  key = TableDndKey;
-    props: EditorProps<Plugin<void>>
+  props: EditorProps<Plugin<void>>;
 
-    private _colDragHandle: HTMLElement;
+  private _colDragHandle: HTMLElement;
-    private _rowDragHandle: HTMLElement;
+  private _rowDragHandle: HTMLElement;
-    private _hoveringCell?: HoveringCellInfo;
+  private _hoveringCell?: HoveringCellInfo;
-    private _disposables: (() => void)[] = [];
+  private _disposables: (() => void)[] = [];
-    private _draggingCoords: { x: number; y: number } = { x: 0, y: 0 };
+  private _draggingCoords: { x: number; y: number } = { x: 0, y: 0 };
-    private _dragging = false;
+  private _dragging = false;
-    private _draggingDirection: 'col' | 'row' = 'col';
+  private _draggingDirection: "col" | "row" = "col";
-    private _draggingIndex = -1;
+  private _draggingIndex = -1;
-    private _droppingIndex = -1;
+  private _droppingIndex = -1;
-    private _draggingDOMs?: DraggingDOMs | undefined
+  private _draggingDOMs?: DraggingDOMs | undefined;
-    private _startCoords: { x: number; y: number } = { x: 0, y: 0 };
+  private _startCoords: { x: number; y: number } = { x: 0, y: 0 };
-    private _previewController: PreviewController;
+  private _previewController: PreviewController;
-    private _dropIndicatorController: DropIndicatorController;
+  private _dropIndicatorController: DropIndicatorController;
-    private _dragHandleController: DragHandleController;
+  private _dragHandleController: DragHandleController;
-    private _emptyImageController: EmptyImageController;
+  private _emptyImageController: EmptyImageController;
-    private _autoScrollController: AutoScrollController;
+  private _autoScrollController: AutoScrollController;
 
-    constructor(public editor: Editor) {
+  constructor(public editor: Editor) {
-        this.props = {
+    this.props = {
-            handleDOMEvents: {
+      handleDOMEvents: {
-                pointerover: this._pointerOver,
+        pointerover: this._pointerOver,
-            }
+      },
-        }
+    };
 
-        this._dragHandleController = new DragHandleController();
+    this._dragHandleController = new DragHandleController();
-        this._colDragHandle = this._dragHandleController.colDragHandle;
+    this._colDragHandle = this._dragHandleController.colDragHandle;
-        this._rowDragHandle = this._dragHandleController.rowDragHandle;
+    this._rowDragHandle = this._dragHandleController.rowDragHandle;
 
-        this._previewController = new PreviewController();
+    this._previewController = new PreviewController();
-        this._dropIndicatorController = new DropIndicatorController();
+    this._dropIndicatorController = new DropIndicatorController();
-        this._emptyImageController = new EmptyImageController();
+    this._emptyImageController = new EmptyImageController();
 
-        this._autoScrollController = new AutoScrollController();
+    this._autoScrollController = new AutoScrollController();
 
-        this._bindDragEvents();
+    this._bindDragEvents();
+  }
+
+  view = () => {
+    const wrapper = this.editor.options.element;
+    //@ts-ignore
+    wrapper.appendChild(this._colDragHandle);
+    //@ts-ignore
+    wrapper.appendChild(this._rowDragHandle);
+    //@ts-ignore
+    wrapper.appendChild(this._previewController.previewRoot);
+    //@ts-ignore
+    wrapper.appendChild(this._dropIndicatorController.dropIndicatorRoot);
+
+    return {
+      update: this.update,
+      destroy: this.destroy,
+    };
+  };
+
+  update = () => {};
+
+  destroy = () => {
+    if (!this.editor.isDestroyed) return;
+    this._dragHandleController.destroy();
+    this._emptyImageController.destroy();
+    this._previewController.destroy();
+    this._dropIndicatorController.destroy();
+    this._autoScrollController.stop();
+
+    this._disposables.forEach((disposable) => disposable());
+  };
+
+  private _pointerOver = (view: EditorView, event: PointerEvent) => {
+    if (this._dragging) return;
+
+    // Don't show drag handles in readonly mode
+    if (!this.editor.isEditable) {
+      this._dragHandleController.hide();
+      return;
     }
 
-    view = () => {
+    const hoveringCell = getHoveringCell(view, event);
-        const wrapper = this.editor.options.element;
+    this._hoveringCell = hoveringCell;
-        wrapper.appendChild(this._colDragHandle)
+    if (!hoveringCell) {
-        wrapper.appendChild(this._rowDragHandle)
+      this._dragHandleController.hide();
-        wrapper.appendChild(this._previewController.previewRoot)
+    } else {
-        wrapper.appendChild(this._dropIndicatorController.dropIndicatorRoot)
+      this._dragHandleController.show(this.editor, hoveringCell);
+    }
+  };
 
-        return {
+  private _onDragColStart = (event: DragEvent) => {
-            update: this.update,
+    this._onDragStart(event, "col");
-            destroy: this.destroy,
+  };
-        }
+
+  private _onDraggingCol = (event: DragEvent) => {
+    const draggingDOMs = this._draggingDOMs;
+    if (!draggingDOMs) return;
+
+    this._draggingCoords = { x: event.clientX, y: event.clientY };
+    this._previewController.onDragging(
+      draggingDOMs,
+      this._draggingCoords.x,
+      this._draggingCoords.y,
+      "col",
+    );
+
+    this._autoScrollController.checkXAutoScroll(event.clientX, draggingDOMs);
+
+    const direction =
+      this._startCoords.x > this._draggingCoords.x ? "left" : "right";
+    const dragOverColumn = getDragOverColumn(
+      draggingDOMs.table,
+      this._draggingCoords.x,
+    );
+    if (!dragOverColumn) return;
+
+    const [col, index] = dragOverColumn;
+    this._droppingIndex = index;
+    this._dropIndicatorController.onDragging(col, direction, "col");
+  };
+
+  private _onDragRowStart = (event: DragEvent) => {
+    this._onDragStart(event, "row");
+  };
+
+  private _onDraggingRow = (event: DragEvent) => {
+    const draggingDOMs = this._draggingDOMs;
+    if (!draggingDOMs) return;
+
+    this._draggingCoords = { x: event.clientX, y: event.clientY };
+    this._previewController.onDragging(
+      draggingDOMs,
+      this._draggingCoords.x,
+      this._draggingCoords.y,
+      "row",
+    );
+
+    this._autoScrollController.checkYAutoScroll(event.clientY);
+
+    const direction =
+      this._startCoords.y > this._draggingCoords.y ? "up" : "down";
+    const dragOverRow = getDragOverRow(
+      draggingDOMs.table,
+      this._draggingCoords.y,
+    );
+    if (!dragOverRow) return;
+
+    const [row, index] = dragOverRow;
+    this._droppingIndex = index;
+    this._dropIndicatorController.onDragging(row, direction, "row");
+  };
+
+  private _onDragEnd = () => {
+    this._dragging = false;
+    this._draggingIndex = -1;
+    this._droppingIndex = -1;
+    this._startCoords = { x: 0, y: 0 };
+    this._autoScrollController.stop();
+    this._dropIndicatorController.onDragEnd();
+    this._previewController.onDragEnd();
+  };
+
+  private _bindDragEvents = () => {
+    this._colDragHandle.addEventListener("dragstart", this._onDragColStart);
+    this._disposables.push(() => {
+      this._colDragHandle.removeEventListener(
+        "dragstart",
+        this._onDragColStart,
+      );
+    });
+
+    this._colDragHandle.addEventListener("dragend", this._onDragEnd);
+    this._disposables.push(() => {
+      this._colDragHandle.removeEventListener("dragend", this._onDragEnd);
+    });
+
+    this._rowDragHandle.addEventListener("dragstart", this._onDragRowStart);
+    this._disposables.push(() => {
+      this._rowDragHandle.removeEventListener(
+        "dragstart",
+        this._onDragRowStart,
+      );
+    });
+
+    this._rowDragHandle.addEventListener("dragend", this._onDragEnd);
+    this._disposables.push(() => {
+      this._rowDragHandle.removeEventListener("dragend", this._onDragEnd);
+    });
+
+    const ownerDocument = this.editor.view.dom?.ownerDocument;
+    if (ownerDocument) {
+      // To make `drop` event work, we need to prevent the default behavior of the
+      // `dragover` event for drop zone. Here we set the whole document as the
+      // drop zone so that even the mouse moves outside the editor, the `drop`
+      // event will still be triggered.
+      ownerDocument.addEventListener("drop", this._onDrop);
+      ownerDocument.addEventListener("dragover", this._onDrag);
+      this._disposables.push(() => {
+        ownerDocument.removeEventListener("drop", this._onDrop);
+        ownerDocument.removeEventListener("dragover", this._onDrag);
+      });
+    }
+  };
+
+  private _onDragStart = (event: DragEvent, type: "col" | "row") => {
+    const dataTransfer = event.dataTransfer;
+    if (dataTransfer) {
+      dataTransfer.effectAllowed = "move";
+      this._emptyImageController.hideDragImage(dataTransfer);
+    }
+    this._dragging = true;
+    this._draggingDirection = type;
+    this._startCoords = { x: event.clientX, y: event.clientY };
+    const draggingIndex =
+      (type === "col"
+        ? this._hoveringCell?.colIndex
+        : this._hoveringCell?.rowIndex) ?? 0;
+
+    this._draggingIndex = draggingIndex;
+
+    const relatedDoms = getDndRelatedDOMs(
+      this.editor.view,
+      this._hoveringCell?.cellPos,
+      draggingIndex,
+      type,
+    );
+    this._draggingDOMs = relatedDoms;
+
+    const index =
+      type === "col"
+        ? this._hoveringCell?.colIndex
+        : this._hoveringCell?.rowIndex;
+
+    this._previewController.onDragStart(relatedDoms, index, type);
+    this._dropIndicatorController.onDragStart(relatedDoms, type);
+  };
+
+  private _onDrag = (event: DragEvent) => {
+    event.preventDefault();
+    if (!this._dragging) return;
+    if (this._draggingDirection === "col") {
+      this._onDraggingCol(event);
+    } else {
+      this._onDraggingRow(event);
+    }
+  };
+
+  private _onDrop = () => {
+    if (!this._dragging) return;
+    const direction = this._draggingDirection;
+    const from = this._draggingIndex;
+    const to = this._droppingIndex;
+    const tr = this.editor.state.tr;
+    const pos = this.editor.state.selection.from;
+
+    if (direction === "col") {
+      const canMove = moveColumn({
+        tr,
+        originIndex: from,
+        targetIndex: to,
+        select: true,
+        pos,
+      });
+      if (canMove) {
+        this.editor.view.dispatch(tr);
+      }
+
+      return;
     }
 
-    update = () => {}
+    if (direction === "row") {
+      const canMove = moveRow({
+        tr,
+        originIndex: from,
+        targetIndex: to,
+        select: true,
+        pos,
+      });
+      if (canMove) {
+        this.editor.view.dispatch(tr);
+      }
 
-    destroy = () => {
+      return;
-        if (!this.editor.isDestroyed) return;
-        this._dragHandleController.destroy();
-        this._emptyImageController.destroy();
-        this._previewController.destroy();
-        this._dropIndicatorController.destroy();
-        this._autoScrollController.stop();
-
-        this._disposables.forEach(disposable => disposable());
-    }
-
-    private _pointerOver = (view: EditorView, event: PointerEvent) => {
-        if (this._dragging) return;
-        
-        // Don't show drag handles in readonly mode
-        if (!this.editor.isEditable) {
-            this._dragHandleController.hide();
-            return;
-        }
-
-        const hoveringCell = getHoveringCell(view, event)
-        this._hoveringCell = hoveringCell;
-        if (!hoveringCell) {
-            this._dragHandleController.hide();
-        } else {
-            this._dragHandleController.show(this.editor, hoveringCell);
-        }
-    }
-
-    private _onDragColStart = (event: DragEvent) => {
-        this._onDragStart(event, 'col');
-    }
-
-    private _onDraggingCol = (event: DragEvent) => {
-        const draggingDOMs = this._draggingDOMs;
-        if (!draggingDOMs) return;
-
-        this._draggingCoords = { x: event.clientX, y: event.clientY };
-        this._previewController.onDragging(draggingDOMs, this._draggingCoords.x, this._draggingCoords.y, 'col');
-
-        this._autoScrollController.checkXAutoScroll(event.clientX, draggingDOMs);
-
-        const direction = this._startCoords.x > this._draggingCoords.x ? 'left' : 'right';
-        const dragOverColumn = getDragOverColumn(draggingDOMs.table, this._draggingCoords.x);
-        if (!dragOverColumn) return;
-
-        const [col, index] = dragOverColumn;
-        this._droppingIndex = index;
-        this._dropIndicatorController.onDragging(col, direction, 'col');
-    }
-
-    private _onDragRowStart = (event: DragEvent) => {
-        this._onDragStart(event, 'row');
-    }
-
-    private _onDraggingRow = (event: DragEvent) => {
-        const draggingDOMs = this._draggingDOMs;
-        if (!draggingDOMs) return;
-
-        this._draggingCoords = { x: event.clientX, y: event.clientY };
-        this._previewController.onDragging(draggingDOMs, this._draggingCoords.x, this._draggingCoords.y, 'row');
-
-        this._autoScrollController.checkYAutoScroll(event.clientY);
-
-        const direction = this._startCoords.y > this._draggingCoords.y ? 'up' : 'down';
-        const dragOverRow = getDragOverRow(draggingDOMs.table, this._draggingCoords.y);
-        if (!dragOverRow) return;
-
-        const [row, index] = dragOverRow;
-        this._droppingIndex = index;
-        this._dropIndicatorController.onDragging(row, direction, 'row');
-    }
-
-    private _onDragEnd = () => {
-        this._dragging = false;
-        this._draggingIndex = -1;
-        this._droppingIndex = -1;
-        this._startCoords = { x: 0, y: 0 };
-        this._autoScrollController.stop();
-        this._dropIndicatorController.onDragEnd();
-        this._previewController.onDragEnd();
-    }
-
-    private _bindDragEvents = () => {
-        this._colDragHandle.addEventListener('dragstart', this._onDragColStart);
-        this._disposables.push(() => {
-            this._colDragHandle.removeEventListener('dragstart', this._onDragColStart);
-        })
-
-        this._colDragHandle.addEventListener('dragend', this._onDragEnd);
-        this._disposables.push(() => {
-            this._colDragHandle.removeEventListener('dragend', this._onDragEnd);
-        })
-
-        this._rowDragHandle.addEventListener('dragstart', this._onDragRowStart);
-        this._disposables.push(() => {
-            this._rowDragHandle.removeEventListener('dragstart', this._onDragRowStart);
-        })
-
-        this._rowDragHandle.addEventListener('dragend', this._onDragEnd);
-        this._disposables.push(() => {
-            this._rowDragHandle.removeEventListener('dragend', this._onDragEnd);
-        })
-
-        const ownerDocument = this.editor.view.dom?.ownerDocument
-        if (ownerDocument) {
-            // To make `drop` event work, we need to prevent the default behavior of the
-            // `dragover` event for drop zone. Here we set the whole document as the
-            // drop zone so that even the mouse moves outside the editor, the `drop`
-            // event will still be triggered.
-            ownerDocument.addEventListener('drop', this._onDrop);
-            ownerDocument.addEventListener('dragover', this._onDrag);
-            this._disposables.push(() => {
-                ownerDocument.removeEventListener('drop', this._onDrop);
-                ownerDocument.removeEventListener('dragover', this._onDrag);
-            });
-        }
-    }
-
-    private _onDragStart = (event: DragEvent, type: 'col' | 'row') => {
-        const dataTransfer = event.dataTransfer;
-        if (dataTransfer) {
-            dataTransfer.effectAllowed = 'move';
-            this._emptyImageController.hideDragImage(dataTransfer);
-        }
-        this._dragging = true;
-        this._draggingDirection = type;
-        this._startCoords = { x: event.clientX, y: event.clientY };
-        const draggingIndex = (type === 'col' ? this._hoveringCell?.colIndex : this._hoveringCell?.rowIndex) ?? 0;
-
-        this._draggingIndex = draggingIndex;
-
-        const relatedDoms = getDndRelatedDOMs(
-            this.editor.view,
-            this._hoveringCell?.cellPos,
-            draggingIndex,
-            type
-        )
-        this._draggingDOMs = relatedDoms;
-
-        const index = type === 'col' ? this._hoveringCell?.colIndex : this._hoveringCell?.rowIndex;
-
-        this._previewController.onDragStart(relatedDoms, index, type);
-        this._dropIndicatorController.onDragStart(relatedDoms, type);
-    }
-
-    private _onDrag = (event: DragEvent) => {
-        event.preventDefault()
-        if (!this._dragging) return;
-        if (this._draggingDirection === 'col') {
-            this._onDraggingCol(event);
-        } else {
-            this._onDraggingRow(event);
-        }
-    }
-
-    private _onDrop = () => {
-        if (!this._dragging) return;
-        const direction = this._draggingDirection;
-        const from = this._draggingIndex;
-        const to = this._droppingIndex;
-        const tr = this.editor.state.tr;
-        const pos = this.editor.state.selection.from;
-
-        if (direction === 'col') {
-            const canMove = moveColumn({
-                tr,
-                originIndex: from,
-                targetIndex: to,
-                select: true,
-                pos,
-            })
-            if (canMove) {
-                this.editor.view.dispatch(tr);
-            }
-
-            return;
-        }
-
-        if (direction === 'row') {
-            const canMove = moveRow({
-                tr,
-                originIndex: from,
-                targetIndex: to,
-                select: true,
-                pos,
-            })
-            if (canMove) {
-                this.editor.view.dispatch(tr);
-            }
-
-            return;
-        }
     }
+  };
 }
 
 export const TableDndExtension = Extension.create({
-    name: 'table-drag-and-drop',
+  name: "table-drag-and-drop",
-    addProseMirrorPlugins() {
+  addProseMirrorPlugins() {
-        const editor = this.editor
+    const editor = this.editor;
 
-        const dragHandlePluginSpec = new TableDragHandlePluginSpec(editor)
+    const dragHandlePluginSpec = new TableDragHandlePluginSpec(editor);
-        const dragHandlePlugin = new Plugin(dragHandlePluginSpec)
+    const dragHandlePlugin = new Plugin(dragHandlePluginSpec);
 
-        return [dragHandlePlugin]
+    return [dragHandlePlugin];
-    }
+  },
-})
+});

packages/editor-ext/src/lib/table/header.ts

@@ -1,4 +1,4 @@
-import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table-header";
+import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table";
 
 export const TableHeader = TiptapTableHeader.extend({
   name: "tableHeader",

packages/editor-ext/src/lib/table/row.ts

@@ -1,6 +1,5 @@
-import TiptapTableRow from "@tiptap/extension-table-row";
+import { TableRow as TiptapTableRow } from "@tiptap/extension-table";
 
 export const TableRow = TiptapTableRow.extend({
-  allowGapCursor: false,
   content: "(tableCell | tableHeader)*",
 });

packages/editor-ext/src/lib/table/table.ts

@@ -1,4 +1,4 @@
-import Table from "@tiptap/extension-table";
+import { Table } from "@tiptap/extension-table";
 import { Editor } from "@tiptap/core";
 import { DOMOutputSpec } from "@tiptap/pm/model";
 

packages/editor-ext/src/lib/unique-id/helpers/findDuplicates.ts

@@ -1,11 +0,0 @@
-import { removeDuplicates } from './removeDuplicates.js'
-
-/**
- * Returns a list of duplicated items within an array.
- */
-export function findDuplicates(items: any[]): any[] {
-  const filtered = items.filter((el, index) => items.indexOf(el) !== index)
-  const duplicates = removeDuplicates(filtered)
-
-  return duplicates
-}

packages/editor-ext/src/lib/unique-id/helpers/removeDuplicates.ts

@@ -1,15 +0,0 @@
-/**
- * Removes duplicated values within an array.
- * Supports numbers, strings and objects.
- */
-export function removeDuplicates<T>(array: T[], by = JSON.stringify): T[] {
-  const seen: Record<any, any> = {}
-
-  return array.filter(item => {
-    const key = by(item)
-
-    return Object.prototype.hasOwnProperty.call(seen, key)
-      ? false
-      : (seen[key] = true)
-  })
-}

packages/editor-ext/src/lib/unique-id/unique-id.ts

@@ -1,386 +1,11 @@
-import {
-  combineTransactionSteps,
-  Extension,
-  findChildren,
-  findChildrenInRange,
-  getChangedRanges,
-} from "@tiptap/core";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { Fragment, Slice } from "@tiptap/pm/model";
-import type { Transaction } from "@tiptap/pm/state";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-
-import { findDuplicates } from "./helpers/findDuplicates.js";
 import { generateNodeId } from "../utils";
+import { UniqueID as TiptapUniqueID } from "@tiptap/extension-unique-id";
 
-export type UniqueIDGenerationContext = {
+export const UniqueID = TiptapUniqueID.extend({
-  node: ProseMirrorNode;
-  pos: number;
-};
-
-export interface UniqueIDOptions {
-  /**
-   * The name of the attribute to add the unique ID to.
-   * @default "id"
-   */
-  attributeName: string;
-  /**
-   * The types of nodes to add unique IDs to.
-   * @default []
-   */
-  types: string[];
-  /**
-   * The function that generates the unique ID. By default, a UUID v4 is
-   * generated. However, you can provide your own function to generate the
-   * unique ID based on the node type and the position.
-   */
-  generateID: (ctx: UniqueIDGenerationContext) => any;
-  /**
-   * Ignore some mutations, for example applied from other users through the collaboration plugin.
-   *
-   * @default null
-   */
-  filterTransaction: ((transaction: Transaction) => boolean) | null;
-  /**
-   * Whether to update the document by adding unique IDs to the nodes. Set this
-   * property to `false` if the document is in `readonly` mode, is immutable, or
-   * you don't want it to be modified.
-   *
-   * @default true
-   */
-  updateDocument: boolean;
-}
-
-export const UniqueID = Extension.create<UniqueIDOptions>({
-  name: "uniqueID",
-
-  // we’ll set a very high priority to make sure this runs first
-  // and is compatible with `appendTransaction` hooks of other extensions
-  priority: 10000,
-
   addOptions() {
     return {
-      attributeName: "id",
+      ...this.parent?.(),
-      types: [],
       generateID: () => generateNodeId(),
-      filterTransaction: null,
-      updateDocument: true,
     };
   },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          [this.options.attributeName]: {
-            default: null,
-            parseHTML: (element) =>
-              element.getAttribute(`data-${this.options.attributeName}`),
-            renderHTML: (attributes) => {
-              if (!attributes[this.options.attributeName]) {
-                return {};
-              }
-
-              return {
-                [`data-${this.options.attributeName}`]:
-                  attributes[this.options.attributeName],
-              };
-            },
-          },
-        },
-      },
-    ];
-  },
-
-  // check initial content for missing ids
-  onCreate() {
-    if (!this.options.updateDocument) {
-      return;
-    }
-
-    const collaboration = this.editor.extensionManager.extensions.find(
-      (ext) => ext.name === "collaboration",
-    );
-    const collaborationCursor = this.editor.extensionManager.extensions.find(
-      (ext) => ext.name === "collaborationCursor",
-    );
-
-    const collabExtensions = [collaboration, collaborationCursor].filter(
-      Boolean,
-    );
-    const collab = collabExtensions.find((ext) => ext?.options?.provider);
-    const provider = collab?.options?.provider;
-
-    const createIds = () => {
-      const { view, state } = this.editor;
-      const { tr, doc } = state;
-      const { types, attributeName, generateID } = this.options;
-      const nodesWithoutId = findChildren(doc, (node) => {
-        return (
-          types.includes(node.type.name) && node.attrs[attributeName] === null
-        );
-      });
-
-      nodesWithoutId.forEach(({ node, pos }) => {
-        tr.setNodeMarkup(pos, undefined, {
-          ...node.attrs,
-          [attributeName]: generateID({ node, pos }),
-        });
-      });
-
-      tr.setMeta("addToHistory", false);
-
-      view.dispatch(tr);
-
-      if (provider) {
-        provider.off("synced", createIds);
-      }
-    };
-
-    /**
-     * We need to handle collaboration a bit different here
-     * because we can't automatically add IDs when the provider is not yet synced
-     * otherwise we end up with empty paragraphs
-     */
-    if (collab) {
-      if (!provider) {
-        return createIds();
-      }
-
-      provider.on("synced", createIds);
-    } else {
-      return createIds();
-    }
-  },
-
-  addProseMirrorPlugins() {
-    if (!this.options.updateDocument) {
-      return [];
-    }
-
-    let dragSourceElement: Element | null = null;
-    let transformPasted = false;
-
-    return [
-      new Plugin({
-        key: new PluginKey("uniqueID"),
-
-        appendTransaction: (transactions, oldState, newState) => {
-          const hasDocChanges =
-            transactions.some((transaction) => transaction.docChanged) &&
-            !oldState.doc.eq(newState.doc);
-          const filterTransactions =
-            this.options.filterTransaction &&
-            transactions.some((tr) => !this.options.filterTransaction?.(tr));
-
-          const isCollabTransaction = transactions.find((tr) =>
-            tr.getMeta("y-sync$"),
-          );
-
-          if (isCollabTransaction) {
-            return;
-          }
-
-          if (!hasDocChanges || filterTransactions) {
-            return;
-          }
-
-          const { tr } = newState;
-
-          const { types, attributeName, generateID } = this.options;
-          const transform = combineTransactionSteps(
-            oldState.doc,
-            transactions as Transaction[],
-          );
-          const { mapping } = transform;
-
-          // get changed ranges based on the old state
-          const changes = getChangedRanges(transform);
-
-          changes.forEach(({ newRange }) => {
-            const newNodes = findChildrenInRange(
-              newState.doc,
-              newRange,
-              (node) => {
-                return types.includes(node.type.name);
-              },
-            );
-
-            const newIds = newNodes
-              .map(({ node }) => node.attrs[attributeName])
-              .filter((id) => id !== null);
-
-            newNodes.forEach(({ node, pos }, i) => {
-              // instead of checking `node.attrs[attributeName]` directly
-              // we look at the current state of the node within `tr.doc`.
-              // this helps to prevent adding new ids to the same node
-              // if the node changed multiple times within one transaction
-              const id = tr.doc.nodeAt(pos)?.attrs[attributeName];
-
-              if (id === null) {
-                tr.setNodeMarkup(pos, undefined, {
-                  ...node.attrs,
-                  [attributeName]: generateID({ node, pos }),
-                });
-
-                return;
-              }
-
-              const nextNode = newNodes[i + 1];
-
-              if (nextNode && node.content.size === 0) {
-                tr.setNodeMarkup(nextNode.pos, undefined, {
-                  ...nextNode.node.attrs,
-                  [attributeName]: id,
-                });
-                newIds[i + 1] = id;
-
-                if (nextNode.node.attrs[attributeName]) {
-                  return;
-                }
-
-                const generatedId = generateID({ node, pos });
-
-                tr.setNodeMarkup(pos, undefined, {
-                  ...node.attrs,
-                  [attributeName]: generatedId,
-                });
-                newIds[i] = generatedId;
-
-                return tr;
-              }
-
-              const duplicatedNewIds = findDuplicates(newIds);
-
-              // check if the node doesn’t exist in the old state
-              const { deleted } = mapping.invert().mapResult(pos);
-
-              const newNode = deleted && duplicatedNewIds.includes(id);
-
-              if (newNode) {
-                tr.setNodeMarkup(pos, undefined, {
-                  ...node.attrs,
-                  [attributeName]: generateID({ node, pos }),
-                });
-              }
-            });
-          });
-
-          if (!tr.steps.length) {
-            return;
-          }
-
-          // `tr.setNodeMarkup` resets the stored marks
-          // so we'll restore them if they exist
-          tr.setStoredMarks(newState.tr.storedMarks);
-
-          // Mark this transaction as coming from UniqueID
-          // to prevent infinite loops with other extensions (e.g., TrailingNode)
-          tr.setMeta("__uniqueIDTransaction", true);
-
-          return tr;
-        },
-
-        // we register a global drag handler to track the current drag source element
-        view(view) {
-          const handleDragstart = (event: DragEvent) => {
-            dragSourceElement = view.dom.parentElement?.contains(
-              event.target as Element,
-            )
-              ? view.dom.parentElement
-              : null;
-          };
-
-          window.addEventListener("dragstart", handleDragstart);
-
-          return {
-            destroy() {
-              window.removeEventListener("dragstart", handleDragstart);
-            },
-          };
-        },
-
-        props: {
-          // `handleDOMEvents` is called before `transformPasted`
-          // so we can do some checks before
-          handleDOMEvents: {
-            // only create new ids for dropped content
-            // or dropped content while holding `alt`
-            // or content is dragged from another editor
-            drop: (view, event) => {
-              if (
-                dragSourceElement !== view.dom.parentElement ||
-                event.dataTransfer?.effectAllowed === "copyMove" ||
-                event.dataTransfer?.effectAllowed === "copy"
-              ) {
-                dragSourceElement = null;
-                transformPasted = true;
-              }
-
-              return false;
-            },
-            // always create new ids on pasted content
-            paste: () => {
-              transformPasted = true;
-
-              return false;
-            },
-          },
-
-          // we’ll remove ids for every pasted node
-          // so we can create a new one within `appendTransaction`
-          transformPasted: (slice) => {
-            if (!transformPasted) {
-              return slice;
-            }
-
-            const { types, attributeName } = this.options;
-            const removeId = (fragment: Fragment): Fragment => {
-              const list: ProseMirrorNode[] = [];
-
-              fragment.forEach((node) => {
-                // don’t touch text nodes
-                if (node.isText) {
-                  list.push(node);
-
-                  return;
-                }
-
-                // check for any other child nodes
-                if (!types.includes(node.type.name)) {
-                  list.push(node.copy(removeId(node.content)));
-
-                  return;
-                }
-
-                // remove id
-                const nodeWithoutId = node.type.create(
-                  {
-                    ...node.attrs,
-                    [attributeName]: null,
-                  },
-                  removeId(node.content),
-                  node.marks,
-                );
-
-                list.push(nodeWithoutId);
-              });
-
-              return Fragment.from(list);
-            };
-
-            // reset check
-            transformPasted = false;
-
-            return new Slice(
-              removeId(slice.content),
-              slice.openStart,
-              slice.openEnd,
-            );
-          },
-        },
-      }),
-    ];
-  },
 });

packages/editor-ext/src/lib/utils.ts

@@ -1,6 +1,6 @@
-// @ts-nocheck
 import { Editor, findParentNode, isTextSelection } from "@tiptap/core";
-import { Selection, Transaction } from "@tiptap/pm/state";
+import { EditorState, Selection, Transaction } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
 import { CellSelection, TableMap } from "@tiptap/pm/tables";
 import { Node, ResolvedPos } from "@tiptap/pm/model";
 import { sanitizeUrl as braintreeSanitizeUrl } from "@braintree/sanitize-url";
@@ -287,11 +287,7 @@ export const isColumnGripSelected = ({
   const nodeDOM = view.nodeDOM(from) as HTMLElement;
   const node = nodeDOM || domAtPos;
 
-  if (
+  if (!editor.isActive("table") || !node || isTableSelected(state.selection)) {
-    !editor.isActive("table") ||
-    !node ||
-    isTableSelected(state.selection)
-  ) {
     return false;
   }
 
@@ -324,11 +320,7 @@ export const isRowGripSelected = ({
   const nodeDOM = view.nodeDOM(from) as HTMLElement;
   const node = nodeDOM || domAtPos;
 
-  if (
+  if (!editor.isActive("table") || !node || isTableSelected(state.selection)) {
-    !editor.isActive(Table.name) ||
-    !node ||
-    isTableSelected(state.selection)
-  ) {
     return false;
   }
 

packages/editor-ext/src/lib/video/video.ts

@@ -20,7 +20,7 @@ declare module "@tiptap/core" {
     videoBlock: {
       setVideo: (attributes: VideoAttributes) => ReturnType;
       setVideoAt: (
-        attributes: VideoAttributes & { pos: number | Range },
+        attributes: VideoAttributes & { pos: number | Range }
       ) => ReturnType;
       setVideoAlign: (align: "left" | "center" | "right") => ReturnType;
       setVideoWidth: (width: number) => ReturnType;
@@ -87,9 +87,9 @@ export const TiptapVideo = Node.create<VideoOptions>({
   parseHTML() {
     return [
       {
-        tag: 'video',
+        tag: "video",
       },
-    ]
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -126,6 +126,9 @@ export const TiptapVideo = Node.create<VideoOptions>({
   },
 
   addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
     return ReactNodeViewRenderer(this.options.view);
   },
 

packages/editor-ext/tsconfig.json

@@ -8,6 +8,7 @@
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "target": "ES2022",
+    "jsx": "react-jsx",
     "sourceMap": true,
     "outDir": "./dist",
     "baseUrl": "./",