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>

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

@@ -41,45 +41,45 @@ export const Drawio = Node.create<DrawioOptions>({
   addAttributes() {
     return {
       src: {
-        default: '',
-        parseHTML: (element) => element.getAttribute('data-src'),
+        default: "",
+        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%',
-        parseHTML: (element) => element.getAttribute('data-width'),
+        default: "100%",
+        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',
-        parseHTML: (element) => element.getAttribute('data-align'),
+        default: "center",
+        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);
   },
 });