feat: Tiptap V3 migration (#1854)

* Tiptap3 migration - WIP

* fix collaboration

* remove unused code

* fix flicker

* disable duplicate extensions

* update tiptap version

* Switch to useEditorState
- Set shouldRerenderOnTransaction to false

* fix editable state

* add tippyoptions for reference

* merge main

* tiptap 3.6.1

* fix bubble menu

* fix converter

* fix menus

* fix collaboration caret css

* fix: Set `isInitialized` to force immediate react node view rendering

* feat: Migrate tippy.js menus to Floating UI

* feat: Update collaboration connection for HocusPocus v3

* fix: Connect/disconnect websocketProvider

* cleanup

* cleanup

* feat: Improved placeholder and upload handling for images

* feat: Improved placeholder and upload handling for videos

* refactor: Image node and view clean-up

* feat: Improved placeholder and upload handling for attachments

* fix: Video view styles

* fix: Transaction handling on asset upload

* fix: Use imageDimensionsFromStream

* feat: Multiple file upload, improved placeholders, local previews

* fix: Drag & drop, paste upload

* fix: Allow media as attachment

* * add skeleton pulse animation
* add translation strings
* fix attachment view responsiveness

* fix collab connection status display

* Tiptap v3.17.0

* fix suggestion menu exit bug

* fix search shortcut

* fix history editor css

* tiptap 3.17.1

---------

Co-authored-by: Arek Nawo <areknawo@areknawo.com>

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: () => {
-            return appendTo?.current;
+        appendTo={() => {
+          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;