fix: Set isInitialized to force immediate react node view rendering

apps/client/package.json

@@ -16,6 +16,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-864353b",
+    "@floating-ui/dom": "^1.7.3",
     "@mantine/core": "^8.1.3",
     "@mantine/dates": "^8.3.2",
     "@mantine/form": "^8.1.3",
@@ -25,7 +26,6 @@
     "@mantine/spotlight": "^8.1.3",
     "@tabler/icons-react": "^3.34.0",
     "@tanstack/react-query": "^5.80.6",
-    "@tiptap/extension-character-count": "^2.10.3",
     "alfaaz": "^1.1.0",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",

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

@@ -166,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);
     },
   }),

package.json

@@ -21,42 +21,40 @@
     "@braintree/sanitize-url": "^7.1.0",
     "@docmost/editor-ext": "workspace:*",
     "@floating-ui/dom": "^1.7.3",
-    "@hocuspocus/extension-redis": "3.4.1",
-    "@hocuspocus/provider": "3.4.1",
-    "@hocuspocus/server": "3.4.1",
-    "@hocuspocus/transformer": "3.4.1",
+    "@hocuspocus/extension-redis": "3.4.3",
+    "@hocuspocus/provider": "3.4.3",
+    "@hocuspocus/server": "3.4.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": "3.13.0",
-    "@tiptap/extension-code-block": "3.13.0",
-    "@tiptap/extension-collaboration": "3.13.0",
-    "@tiptap/extension-collaboration-caret": "3.13.0",
-    "@tiptap/extension-color": "3.13.0",
-    "@tiptap/extension-document": "3.13.0",
-    "@tiptap/extension-heading": "3.13.0",
-    "@tiptap/extension-highlight": "3.13.0",
-    "@tiptap/extension-history": "3.13.0",
-    "@tiptap/extension-image": "3.13.0",
-    "@tiptap/extension-link": "3.13.0",
-    "@tiptap/extension-list": "3.13.0",
-    "@tiptap/extension-list-item": "3.13.0",
-    "@tiptap/extension-list-keymap": "3.13.0",
-    "@tiptap/extension-placeholder": "3.13.0",
-    "@tiptap/extension-subscript": "3.13.0",
-    "@tiptap/extension-superscript": "3.13.0",
-    "@tiptap/extension-table": "3.13.0",
-    "@tiptap/extension-text": "3.13.0",
-    "@tiptap/extension-text-align": "3.13.0",
-    "@tiptap/extension-text-style": "3.13.0",
-    "@tiptap/extension-typography": "3.13.0",
-    "@tiptap/extension-unique-id": "^3.13.0",
-    "@tiptap/extension-youtube": "3.13.0",
-    "@tiptap/html": "3.13.0",
-    "@tiptap/pm": "3.13.0",
-    "@tiptap/react": "3.13.0",
-    "@tiptap/starter-kit": "3.13.0",
-    "@tiptap/suggestion": "3.13.0",
+    "@tiptap/core": "3.15.3",
+    "@tiptap/extension-code-block": "3.15.3",
+    "@tiptap/extension-collaboration": "3.15.3",
+    "@tiptap/extension-collaboration-caret": "3.15.3",
+    "@tiptap/extension-color": "3.15.3",
+    "@tiptap/extension-document": "3.15.3",
+    "@tiptap/extension-heading": "3.15.3",
+    "@tiptap/extension-highlight": "3.15.3",
+    "@tiptap/extension-history": "3.15.3",
+    "@tiptap/extension-image": "3.15.3",
+    "@tiptap/extension-link": "3.15.3",
+    "@tiptap/extension-list": "3.15.3",
+    "@tiptap/extension-placeholder": "3.15.3",
+    "@tiptap/extension-subscript": "3.15.3",
+    "@tiptap/extension-superscript": "3.15.3",
+    "@tiptap/extension-table": "3.15.3",
+    "@tiptap/extension-text": "3.15.3",
+    "@tiptap/extension-text-align": "3.15.3",
+    "@tiptap/extension-text-style": "3.15.3",
+    "@tiptap/extension-typography": "3.15.3",
+    "@tiptap/extension-unique-id": "^3.15.3",
+    "@tiptap/extension-youtube": "3.15.3",
+    "@tiptap/html": "3.15.3",
+    "@tiptap/pm": "3.15.3",
+    "@tiptap/react": "3.15.3",
+    "@tiptap/starter-kit": "3.15.3",
+    "@tiptap/suggestion": "3.15.3",
     "@types/qrcode": "^1.5.5",
     "bytes": "^3.1.2",
     "cross-env": "^7.0.3",
@@ -73,7 +71,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/custom-code-block.ts

@@ -1,14 +1,14 @@
-import type { CodeBlockOptions } from '@tiptap/extension-code-block'
-import CodeBlock from '@tiptap/extension-code-block'
+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';
+import { LowlightPlugin } from "./lowlight-plugin.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 
 export interface CodeBlockLowlightOptions extends CodeBlockOptions {
   /**
    * The lowlight instance.
    */
-  lowlight: any,
+  lowlight: any;
   view: any;
 }
 
@@ -25,13 +25,13 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
     return {
       ...this.parent?.(),
       lowlight: {},
-      languageClassPrefix: 'language-',
+      languageClassPrefix: "language-",
       exitOnTripleEnter: true,
       exitOnArrowDown: true,
       defaultLanguage: null,
       HTMLAttributes: {},
       view: null,
-    }
+    };
   },
 
   addKeyboardShortcuts() {
@@ -88,8 +88,10 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
     };
   },
 
-
   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);
   },
 
@@ -101,6 +103,6 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
         lowlight: this.options.lowlight,
         defaultLanguage: this.options.defaultLanguage,
       }),
-    ]
+    ];
   },
-})
+});

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);
   },
 });

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

@@ -1,6 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-import { sanitizeUrl } from './utils';
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+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: '',
-        parseHTML: (element) => element.getAttribute('data-provider'),
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-provider"),
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-provider': attributes.provider,
+          "data-provider": attributes.provider,
         }),
       },
       align: {
-        default: 'center',
-        parseHTML: (element) => element.getAttribute('data-align'),
+        default: "center",
+        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 { ReactNodeViewRenderer } from '@tiptap/react';
+import { Node, mergeAttributes } from "@tiptap/core";
+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: '',
-        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: ExcalidrawAttributes) => ({
-          '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: 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',
-        parseHTML: (element) => element.getAttribute('data-align'),
+        default: "center",
+        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/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/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);
   },