@liveblocks/react-tiptap 2.12.1 → 2.12.2

package/dist/LiveblocksExtension.js

@@ -8,6 +8,7 @@ var core$1 = require('@tiptap/core');
 var Collaboration = require('@tiptap/extension-collaboration');
 var CollaborationCursor = require('@tiptap/extension-collaboration-cursor');
 var React = require('react');
+var index_js = require('use-sync-external-store/shim/index.js');
 var yjs = require('yjs');
 var CommentsExtension = require('./comments/CommentsExtension.js');
 var MentionExtension = require('./mentions/MentionExtension.js');
@@ -15,6 +16,12 @@ var types = require('./types.js');
 
 const providersMap = /* @__PURE__ */ new Map();
 const docMap = /* @__PURE__ */ new Map();
+const DEFAULT_OPTIONS = {
+  field: "default",
+  comments: true,
+  mentions: true,
+  offlineSupport_experimental: false
+};
 const LiveblocksCollab = Collaboration.extend({
   onCreate() {
     if (!this.editor.extensionManager.extensions.find((e) => e.name === "doc")) {
@@ -41,15 +48,65 @@ const LiveblocksCollab = Collaboration.extend({
     }
   }
 });
-const useLiveblocksExtension = () => {
+function useYjsProvider() {
+  const room = react.useRoom();
+  const subscribe = React.useCallback(
+    (onStoreChange) => {
+      return room[core.kInternal].yjsProviderDidChange.subscribe(onStoreChange);
+    },
+    [room]
+  );
+  const getSnapshot = React.useCallback(() => {
+    return room[core.kInternal].getYjsProvider();
+  }, [room]);
+  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useIsEditorReady() {
+  const yjsProvider = useYjsProvider();
+  const getSnapshot = React.useCallback(() => {
+    const status = yjsProvider?.getStatus();
+    return status === "synchronizing" || status === "synchronized";
+  }, [yjsProvider]);
+  const subscribe = React.useCallback(
+    (callback) => {
+      if (yjsProvider === void 0)
+        return () => {
+        };
+      yjsProvider.on("status", callback);
+      return () => {
+        yjsProvider.off("status", callback);
+      };
+    },
+    [yjsProvider]
+  );
+  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+const useLiveblocksExtension = (opts) => {
+  const options = {
+    ...DEFAULT_OPTIONS,
+    ...opts
+  };
+  const [editor, setEditor] = React.useState(null);
   const room = react.useRoom();
   react.useCommentsErrorListener((error) => {
     if (error instanceof _private.CreateThreadError) {
     }
   });
+  const isEditorReady = useIsEditorReady();
   const client = react.useClient();
   const store = _private.getUmbrellaStoreForClient(client);
   const roomId = room.id;
+  const yjsProvider = useYjsProvider();
+  React.useEffect(() => {
+    if (!isEditorReady || !yjsProvider || !options.initialContent || !editor)
+      return;
+    const ydoc = yjsProvider.getYDoc();
+    const hasContentSet = ydoc.getMap("liveblocks_config").get("hasContentSet");
+    if (!hasContentSet) {
+      ydoc.getMap("liveblocks_config").set("hasContentSet", true);
+      editor.commands.setContent(options.initialContent);
+    }
+  }, [isEditorReady, yjsProvider, options.initialContent, editor]);
   const reportTextEditorType = React.useCallback(
     (field) => {
       room[core.kInternal].reportTextEditor(core.TextEditorType.TipTap, field);
@@ -79,7 +136,13 @@ const useLiveblocksExtension = () => {
   return core$1.Extension.create({
     name: "liveblocksExtension",
     onCreate() {
-      if (this.options.mentions && this.editor.extensionManager.extensions.find(
+      setEditor(this.editor);
+      if (this.editor.options.content) {
+        console.warn(
+          "[Liveblocks] Initial content must be set in the useLiveblocksExtension hook option. Remove content from your editor options."
+        );
+      }
+      if (options.mentions && this.editor.extensionManager.extensions.find(
         (e) => e.name.toLowerCase() === "mention"
       )) {
         console.warn(
@@ -105,7 +168,7 @@ const useLiveblocksExtension = () => {
           }
         })
       );
-      if (this.options.comments) {
+      if (options.comments) {
         const commentMarkType = core$1.getMarkType(
           types.LIVEBLOCKS_COMMENT_MARK_TYPE,
           this.editor.schema
@@ -147,7 +210,7 @@ const useLiveblocksExtension = () => {
           })
         );
       }
-      reportTextEditorType(this.options.field ?? "default");
+      reportTextEditorType(options.field ?? DEFAULT_OPTIONS.field);
     },
     onDestroy() {
       this.storage.unsubs.forEach((unsub) => unsub());
@@ -156,7 +219,12 @@ const useLiveblocksExtension = () => {
       if (!providersMap.has(room.id)) {
         const doc = new yjs.Doc();
         docMap.set(room.id, doc);
-        providersMap.set(room.id, new yjs$1.LiveblocksYjsProvider(room, doc));
+        providersMap.set(
+          room.id,
+          new yjs$1.LiveblocksYjsProvider(room, doc, {
+            offlineSupport_experimental: options.offlineSupport_experimental
+          })
+        );
       }
       return {
         doc: docMap.get(room.id),
@@ -164,27 +232,20 @@ const useLiveblocksExtension = () => {
         unsubs: []
       };
     },
-    addOptions() {
-      return {
-        field: "default",
-        mentions: true,
-        comments: true
-      };
-    },
     addExtensions() {
       const extensions = [
         LiveblocksCollab.configure({
           document: this.storage.doc,
-          field: this.options.field
+          field: options.field
         }),
         CollaborationCursor.configure({
           provider: this.storage.provider
         })
       ];
-      if (this.options.comments) {
+      if (options.comments) {
         extensions.push(CommentsExtension.CommentsExtension);
       }
-      if (this.options.mentions) {
+      if (options.mentions) {
         extensions.push(
           MentionExtension.MentionExtension.configure({
             onCreateMention,
@@ -197,5 +258,6 @@ const useLiveblocksExtension = () => {
   });
 };
 
+exports.useIsEditorReady = useIsEditorReady;
 exports.useLiveblocksExtension = useLiveblocksExtension;
 //# sourceMappingURL=LiveblocksExtension.js.map

package/dist/LiveblocksExtension.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveblocksExtension.js","sources":["../src/LiveblocksExtension.ts"],"sourcesContent":["import { type IUserInfo, kInternal, TextEditorType } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n} from \"@liveblocks/react/_private\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { AnyExtension } from \"@tiptap/core\";\nimport { Extension, getMarkType } from \"@tiptap/core\";\nimport Collaboration from \"@tiptap/extension-collaboration\";\nimport CollaborationCursor from \"@tiptap/extension-collaboration-cursor\";\nimport type { Mark as PMMark } from \"@tiptap/pm/model\";\nimport { useCallback } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentsExtension } from \"./comments/CommentsExtension\";\nimport { MentionExtension } from \"./mentions/MentionExtension\";\nimport { LIVEBLOCKS_COMMENT_MARK_TYPE } from \"./types\";\n\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<any, any, any, any, any>\n>();\n\nconst docMap = new Map<string, Doc>();\n\ntype LiveblocksExtensionOptions = {\n  field?: string;\n  comments: boolean; // | CommentsConfiguration\n  mentions: boolean; // | MentionsConfiguration\n};\n\nconst LiveblocksCollab = Collaboration.extend({\n  // Override the onCreate method to warn users about potential misconfigurations\n  onCreate() {\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"doc\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap document extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      !this.editor.extensionManager.extensions.find(\n        (e) => e.name === \"paragraph\"\n      )\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap paragraph extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"text\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap text extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      this.editor.extensionManager.extensions.find((e) => e.name === \"history\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The history extension is enabled, Liveblocks extension provides its own. Please remove or disable the History plugin to prevent unwanted conflicts.\"\n      );\n    }\n  },\n});\n\nexport const useLiveblocksExtension = (): Extension => {\n  const room = useRoom();\n\n  // TODO: we don't need these things if comments isn't turned on...\n  // TODO: we don't have a reference to the editor here, need to figure this out\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      // handleThreadDelete(error.context.threadId);\n    }\n  });\n  const client = useClient();\n  const store = getUmbrellaStoreForClient(client);\n  const roomId = room.id;\n\n  const reportTextEditorType = useCallback(\n    (field: string) => {\n      room[kInternal].reportTextEditor(TextEditorType.TipTap, field);\n    },\n    [room]\n  );\n  const onCreateMention = useCallback(\n    (userId: string, notificationId: string) => {\n      try {\n        room[kInternal].createTextMention(userId, notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  const onDeleteMention = useCallback(\n    (notificationId: string) => {\n      try {\n        room[kInternal].deleteTextMention(notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  return Extension.create<\n    LiveblocksExtensionOptions,\n    {\n      unsubs: (() => void)[];\n      doc: Doc;\n      provider: LiveblocksYjsProvider<any, any, any, any, any>;\n    }\n  >({\n    name: \"liveblocksExtension\",\n\n    onCreate() {\n      if (\n        this.options.mentions &&\n        this.editor.extensionManager.extensions.find(\n          (e) => e.name.toLowerCase() === \"mention\"\n        )\n      ) {\n        console.warn(\n          \"[Liveblocks] Liveblocks own mention plugin is enabled, using another mention plugin may cause a conflict.\"\n        );\n      }\n      const self = room.getSelf();\n      if (self?.info) {\n        this.editor.commands.updateUser({\n          name: self.info.name,\n          color: self.info.color,\n        });\n      }\n      this.storage.unsubs.push(\n        room.events.self.subscribe(({ info }) => {\n          if (!info) {\n            return;\n          }\n          const { name, color } = info;\n          const { user } = this.storage.provider.awareness.getLocalState() as {\n            user: IUserInfo;\n          };\n          // TODO: maybe we need a deep compare here so other info can be provided\n          if (name !== user?.name || color !== user?.color) {\n            this.editor.commands.updateUser({ name, color });\n          }\n        })\n      );\n      if (this.options.comments) {\n        const commentMarkType = getMarkType(\n          LIVEBLOCKS_COMMENT_MARK_TYPE,\n          this.editor.schema\n        );\n        this.storage.unsubs.push(\n          // Subscribe to threads so we can update comment marks if they become resolved/deleted\n          store.subscribe(() => {\n            const threadMap = new Map(\n              store\n                .getFullState()\n                .threadsDB.findMany(roomId, { resolved: false }, \"asc\")\n                .map((thread) => [thread.id, true])\n            );\n            function isComment(mark: PMMark): mark is PMMark & {\n              attrs: { orphan: boolean; threadId: string };\n            } {\n              return mark.type.name === LIVEBLOCKS_COMMENT_MARK_TYPE;\n            }\n            // when threads change, find marks and update them if needed\n            this.editor.state.doc.descendants((node, pos) => {\n              node.marks.forEach((mark) => {\n                if (isComment(mark)) {\n                  const markThreadId = mark.attrs.threadId;\n                  const isOrphan = !threadMap.has(markThreadId);\n                  if (isOrphan !== mark.attrs.orphan) {\n                    const { tr } = this.editor.state;\n                    const trimmedFrom = Math.max(pos, 0);\n                    const trimmedTo = Math.min(\n                      pos + node.nodeSize,\n                      this.editor.state.doc.content.size - 1\n                    );\n                    tr.removeMark(trimmedFrom, trimmedTo, commentMarkType);\n                    tr.addMark(\n                      trimmedFrom,\n                      trimmedTo,\n                      commentMarkType.create({\n                        ...mark.attrs,\n                        orphan: isOrphan,\n                      })\n                    );\n                    this.editor.view.dispatch(tr);\n                  }\n                }\n              });\n            });\n          })\n        );\n      }\n\n      reportTextEditorType(this.options.field ?? \"default\");\n    },\n    onDestroy() {\n      this.storage.unsubs.forEach((unsub) => unsub());\n    },\n    addStorage() {\n      if (!providersMap.has(room.id)) {\n        const doc = new Doc();\n        docMap.set(room.id, doc);\n        providersMap.set(room.id, new LiveblocksYjsProvider(room, doc));\n      }\n      return {\n        doc: docMap.get(room.id)!,\n        provider: providersMap.get(room.id)!,\n        unsubs: [],\n      };\n    },\n\n    addOptions() {\n      return {\n        field: \"default\",\n        mentions: true,\n        comments: true,\n      };\n    },\n    addExtensions() {\n      const extensions: AnyExtension[] = [\n        LiveblocksCollab.configure({\n          document: this.storage.doc,\n          field: this.options.field,\n        }),\n        CollaborationCursor.configure({\n          provider: this.storage.provider, //todo change the ! to an assert\n        }),\n      ];\n\n      if (this.options.comments) {\n        extensions.push(CommentsExtension);\n      }\n      if (this.options.mentions) {\n        extensions.push(\n          MentionExtension.configure({\n            onCreateMention,\n            onDeleteMention,\n          })\n        );\n      }\n\n      return extensions;\n    },\n  });\n};\n"],"names":["useRoom","useCommentsErrorListener","CreateThreadError","useClient","getUmbrellaStoreForClient","useCallback","kInternal","TextEditorType","Extension","getMarkType","LIVEBLOCKS_COMMENT_MARK_TYPE","Doc","LiveblocksYjsProvider","CommentsExtension","MentionExtension"],"mappings":"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"}
+{"version":3,"file":"LiveblocksExtension.js","sources":["../src/LiveblocksExtension.ts"],"sourcesContent":["import { type IUserInfo, kInternal, TextEditorType } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n} from \"@liveblocks/react/_private\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { AnyExtension, Content, Editor } from \"@tiptap/core\";\nimport { Extension, getMarkType } from \"@tiptap/core\";\nimport Collaboration from \"@tiptap/extension-collaboration\";\nimport CollaborationCursor from \"@tiptap/extension-collaboration-cursor\";\nimport type { Mark as PMMark } from \"@tiptap/pm/model\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentsExtension } from \"./comments/CommentsExtension\";\nimport { MentionExtension } from \"./mentions/MentionExtension\";\nimport { LIVEBLOCKS_COMMENT_MARK_TYPE } from \"./types\";\n\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<any, any, any, any, any>\n>();\n\nconst docMap = new Map<string, Doc>();\n\ntype LiveblocksExtensionOptions = {\n  field?: string;\n  comments?: boolean; // | CommentsConfiguration\n  mentions?: boolean; // | MentionsConfiguration\n  offlineSupport_experimental?: boolean;\n  initialContent?: Content;\n};\n\nconst DEFAULT_OPTIONS = {\n  field: \"default\",\n  comments: true,\n  mentions: true,\n  offlineSupport_experimental: false,\n};\n\nconst LiveblocksCollab = Collaboration.extend({\n  // Override the onCreate method to warn users about potential misconfigurations\n  onCreate() {\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"doc\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap document extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      !this.editor.extensionManager.extensions.find(\n        (e) => e.name === \"paragraph\"\n      )\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap paragraph extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"text\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap text extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      this.editor.extensionManager.extensions.find((e) => e.name === \"history\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The history extension is enabled, Liveblocks extension provides its own. Please remove or disable the History plugin to prevent unwanted conflicts.\"\n      );\n    }\n  },\n});\n\nfunction useYjsProvider() {\n  const room = useRoom();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return room[kInternal].yjsProviderDidChange.subscribe(onStoreChange);\n    },\n    [room]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return room[kInternal].getYjsProvider();\n  }, [room]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Returns whether the editor has loaded the initial text contents from the\n * server and is ready to be used.\n */\nexport function useIsEditorReady(): boolean {\n  const yjsProvider = useYjsProvider();\n\n  const getSnapshot = useCallback(() => {\n    const status = yjsProvider?.getStatus();\n    return status === \"synchronizing\" || status === \"synchronized\";\n  }, [yjsProvider]);\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      if (yjsProvider === undefined) return () => {};\n      yjsProvider.on(\"status\", callback);\n      return () => {\n        yjsProvider.off(\"status\", callback);\n      };\n    },\n    [yjsProvider]\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nexport const useLiveblocksExtension = (\n  opts?: LiveblocksExtensionOptions\n): Extension => {\n  const options = {\n    ...DEFAULT_OPTIONS,\n    ...opts,\n  };\n  const [editor, setEditor] = useState<Editor | null>(null);\n  const room = useRoom();\n\n  // TODO: we don't need these things if comments isn't turned on...\n  // TODO: we don't have a reference to the editor here, need to figure this out\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      // handleThreadDelete(error.context.threadId);\n    }\n  });\n  const isEditorReady = useIsEditorReady();\n  const client = useClient();\n  const store = getUmbrellaStoreForClient(client);\n  const roomId = room.id;\n  const yjsProvider = useYjsProvider();\n\n  // If the user provided initialContent, wait for ready and then set it\n  useEffect(() => {\n    if (!isEditorReady || !yjsProvider || !options.initialContent || !editor)\n      return;\n\n    // As noted in the tiptap documentation, you may not set initial content with collaboration.\n    // The docs provide the following workaround:\n    const ydoc = (yjsProvider as LiveblocksYjsProvider).getYDoc();\n    const hasContentSet = ydoc.getMap(\"liveblocks_config\").get(\"hasContentSet\");\n    if (!hasContentSet) {\n      ydoc.getMap(\"liveblocks_config\").set(\"hasContentSet\", true);\n      editor.commands.setContent(options.initialContent);\n    }\n  }, [isEditorReady, yjsProvider, options.initialContent, editor]);\n\n  const reportTextEditorType = useCallback(\n    (field: string) => {\n      room[kInternal].reportTextEditor(TextEditorType.TipTap, field);\n    },\n    [room]\n  );\n  const onCreateMention = useCallback(\n    (userId: string, notificationId: string) => {\n      try {\n        room[kInternal].createTextMention(userId, notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  const onDeleteMention = useCallback(\n    (notificationId: string) => {\n      try {\n        room[kInternal].deleteTextMention(notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  return Extension.create<\n    never,\n    {\n      unsubs: (() => void)[];\n      doc: Doc;\n      provider: LiveblocksYjsProvider<any, any, any, any, any>;\n    }\n  >({\n    name: \"liveblocksExtension\",\n\n    onCreate() {\n      setEditor(this.editor);\n      if (this.editor.options.content) {\n        console.warn(\n          \"[Liveblocks] Initial content must be set in the useLiveblocksExtension hook option. Remove content from your editor options.\"\n        );\n      }\n      if (\n        options.mentions &&\n        this.editor.extensionManager.extensions.find(\n          (e) => e.name.toLowerCase() === \"mention\"\n        )\n      ) {\n        console.warn(\n          \"[Liveblocks] Liveblocks own mention plugin is enabled, using another mention plugin may cause a conflict.\"\n        );\n      }\n      const self = room.getSelf();\n      if (self?.info) {\n        this.editor.commands.updateUser({\n          name: self.info.name,\n          color: self.info.color,\n        });\n      }\n      this.storage.unsubs.push(\n        room.events.self.subscribe(({ info }) => {\n          if (!info) {\n            return;\n          }\n          const { name, color } = info;\n          const { user } = this.storage.provider.awareness.getLocalState() as {\n            user: IUserInfo;\n          };\n          // TODO: maybe we need a deep compare here so other info can be provided\n          if (name !== user?.name || color !== user?.color) {\n            this.editor.commands.updateUser({ name, color });\n          }\n        })\n      );\n      if (options.comments) {\n        const commentMarkType = getMarkType(\n          LIVEBLOCKS_COMMENT_MARK_TYPE,\n          this.editor.schema\n        );\n        this.storage.unsubs.push(\n          // Subscribe to threads so we can update comment marks if they become resolved/deleted\n          store.subscribe(() => {\n            const threadMap = new Map(\n              store\n                .getFullState()\n                .threadsDB.findMany(roomId, { resolved: false }, \"asc\")\n                .map((thread) => [thread.id, true])\n            );\n            function isComment(mark: PMMark): mark is PMMark & {\n              attrs: { orphan: boolean; threadId: string };\n            } {\n              return mark.type.name === LIVEBLOCKS_COMMENT_MARK_TYPE;\n            }\n            // when threads change, find marks and update them if needed\n            this.editor.state.doc.descendants((node, pos) => {\n              node.marks.forEach((mark) => {\n                if (isComment(mark)) {\n                  const markThreadId = mark.attrs.threadId;\n                  const isOrphan = !threadMap.has(markThreadId);\n                  if (isOrphan !== mark.attrs.orphan) {\n                    const { tr } = this.editor.state;\n                    const trimmedFrom = Math.max(pos, 0);\n                    const trimmedTo = Math.min(\n                      pos + node.nodeSize,\n                      this.editor.state.doc.content.size - 1\n                    );\n                    tr.removeMark(trimmedFrom, trimmedTo, commentMarkType);\n                    tr.addMark(\n                      trimmedFrom,\n                      trimmedTo,\n                      commentMarkType.create({\n                        ...mark.attrs,\n                        orphan: isOrphan,\n                      })\n                    );\n                    this.editor.view.dispatch(tr);\n                  }\n                }\n              });\n            });\n          })\n        );\n      }\n\n      reportTextEditorType(options.field ?? DEFAULT_OPTIONS.field);\n    },\n    onDestroy() {\n      this.storage.unsubs.forEach((unsub) => unsub());\n    },\n    addStorage() {\n      if (!providersMap.has(room.id)) {\n        const doc = new Doc();\n        docMap.set(room.id, doc);\n        providersMap.set(\n          room.id,\n          new LiveblocksYjsProvider(room, doc, {\n            offlineSupport_experimental: options.offlineSupport_experimental,\n          })\n        );\n      }\n      return {\n        doc: docMap.get(room.id)!,\n        provider: providersMap.get(room.id)!,\n        unsubs: [],\n      };\n    },\n    addExtensions() {\n      const extensions: AnyExtension[] = [\n        LiveblocksCollab.configure({\n          document: this.storage.doc,\n          field: options.field,\n        }),\n        CollaborationCursor.configure({\n          provider: this.storage.provider, //todo change the ! to an assert\n        }),\n      ];\n\n      if (options.comments) {\n        extensions.push(CommentsExtension);\n      }\n      if (options.mentions) {\n        extensions.push(\n          MentionExtension.configure({\n            onCreateMention,\n            onDeleteMention,\n          })\n        );\n      }\n\n      return extensions;\n    },\n  });\n};\n"],"names":["useRoom","useCallback","kInternal","useSyncExternalStore","useState","useCommentsErrorListener","CreateThreadError","useClient","getUmbrellaStoreForClient","useEffect","TextEditorType","Extension","getMarkType","LIVEBLOCKS_COMMENT_MARK_TYPE","Doc","LiveblocksYjsProvider","CommentsExtension","MentionExtension"],"mappings":"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"}

package/dist/LiveblocksExtension.mjs

@@ -5,7 +5,8 @@ import { LiveblocksYjsProvider } from '@liveblocks/yjs';
 import { Extension, getMarkType } from '@tiptap/core';
 import Collaboration from '@tiptap/extension-collaboration';
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
-import { useCallback } from 'react';
+import { useCallback, useState, useEffect } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { Doc } from 'yjs';
 import { CommentsExtension } from './comments/CommentsExtension.mjs';
 import { MentionExtension } from './mentions/MentionExtension.mjs';
@@ -13,6 +14,12 @@ import { LIVEBLOCKS_COMMENT_MARK_TYPE } from './types.mjs';
 
 const providersMap = /* @__PURE__ */ new Map();
 const docMap = /* @__PURE__ */ new Map();
+const DEFAULT_OPTIONS = {
+  field: "default",
+  comments: true,
+  mentions: true,
+  offlineSupport_experimental: false
+};
 const LiveblocksCollab = Collaboration.extend({
   onCreate() {
     if (!this.editor.extensionManager.extensions.find((e) => e.name === "doc")) {
@@ -39,15 +46,65 @@ const LiveblocksCollab = Collaboration.extend({
     }
   }
 });
-const useLiveblocksExtension = () => {
+function useYjsProvider() {
+  const room = useRoom();
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      return room[kInternal].yjsProviderDidChange.subscribe(onStoreChange);
+    },
+    [room]
+  );
+  const getSnapshot = useCallback(() => {
+    return room[kInternal].getYjsProvider();
+  }, [room]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useIsEditorReady() {
+  const yjsProvider = useYjsProvider();
+  const getSnapshot = useCallback(() => {
+    const status = yjsProvider?.getStatus();
+    return status === "synchronizing" || status === "synchronized";
+  }, [yjsProvider]);
+  const subscribe = useCallback(
+    (callback) => {
+      if (yjsProvider === void 0)
+        return () => {
+        };
+      yjsProvider.on("status", callback);
+      return () => {
+        yjsProvider.off("status", callback);
+      };
+    },
+    [yjsProvider]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+const useLiveblocksExtension = (opts) => {
+  const options = {
+    ...DEFAULT_OPTIONS,
+    ...opts
+  };
+  const [editor, setEditor] = useState(null);
   const room = useRoom();
   useCommentsErrorListener((error) => {
     if (error instanceof CreateThreadError) {
     }
   });
+  const isEditorReady = useIsEditorReady();
   const client = useClient();
   const store = getUmbrellaStoreForClient(client);
   const roomId = room.id;
+  const yjsProvider = useYjsProvider();
+  useEffect(() => {
+    if (!isEditorReady || !yjsProvider || !options.initialContent || !editor)
+      return;
+    const ydoc = yjsProvider.getYDoc();
+    const hasContentSet = ydoc.getMap("liveblocks_config").get("hasContentSet");
+    if (!hasContentSet) {
+      ydoc.getMap("liveblocks_config").set("hasContentSet", true);
+      editor.commands.setContent(options.initialContent);
+    }
+  }, [isEditorReady, yjsProvider, options.initialContent, editor]);
   const reportTextEditorType = useCallback(
     (field) => {
       room[kInternal].reportTextEditor(TextEditorType.TipTap, field);
@@ -77,7 +134,13 @@ const useLiveblocksExtension = () => {
   return Extension.create({
     name: "liveblocksExtension",
     onCreate() {
-      if (this.options.mentions && this.editor.extensionManager.extensions.find(
+      setEditor(this.editor);
+      if (this.editor.options.content) {
+        console.warn(
+          "[Liveblocks] Initial content must be set in the useLiveblocksExtension hook option. Remove content from your editor options."
+        );
+      }
+      if (options.mentions && this.editor.extensionManager.extensions.find(
         (e) => e.name.toLowerCase() === "mention"
       )) {
         console.warn(
@@ -103,7 +166,7 @@ const useLiveblocksExtension = () => {
           }
         })
       );
-      if (this.options.comments) {
+      if (options.comments) {
         const commentMarkType = getMarkType(
           LIVEBLOCKS_COMMENT_MARK_TYPE,
           this.editor.schema
@@ -145,7 +208,7 @@ const useLiveblocksExtension = () => {
           })
         );
       }
-      reportTextEditorType(this.options.field ?? "default");
+      reportTextEditorType(options.field ?? DEFAULT_OPTIONS.field);
     },
     onDestroy() {
       this.storage.unsubs.forEach((unsub) => unsub());
@@ -154,7 +217,12 @@ const useLiveblocksExtension = () => {
       if (!providersMap.has(room.id)) {
         const doc = new Doc();
         docMap.set(room.id, doc);
-        providersMap.set(room.id, new LiveblocksYjsProvider(room, doc));
+        providersMap.set(
+          room.id,
+          new LiveblocksYjsProvider(room, doc, {
+            offlineSupport_experimental: options.offlineSupport_experimental
+          })
+        );
       }
       return {
         doc: docMap.get(room.id),
@@ -162,27 +230,20 @@ const useLiveblocksExtension = () => {
         unsubs: []
       };
     },
-    addOptions() {
-      return {
-        field: "default",
-        mentions: true,
-        comments: true
-      };
-    },
     addExtensions() {
       const extensions = [
         LiveblocksCollab.configure({
           document: this.storage.doc,
-          field: this.options.field
+          field: options.field
         }),
         CollaborationCursor.configure({
           provider: this.storage.provider
         })
       ];
-      if (this.options.comments) {
+      if (options.comments) {
         extensions.push(CommentsExtension);
       }
-      if (this.options.mentions) {
+      if (options.mentions) {
         extensions.push(
           MentionExtension.configure({
             onCreateMention,
@@ -195,5 +256,5 @@ const useLiveblocksExtension = () => {
   });
 };
 
-export { useLiveblocksExtension };
+export { useIsEditorReady, useLiveblocksExtension };
 //# sourceMappingURL=LiveblocksExtension.mjs.map

package/dist/LiveblocksExtension.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LiveblocksExtension.mjs","sources":["../src/LiveblocksExtension.ts"],"sourcesContent":["import { type IUserInfo, kInternal, TextEditorType } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n} from \"@liveblocks/react/_private\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { AnyExtension } from \"@tiptap/core\";\nimport { Extension, getMarkType } from \"@tiptap/core\";\nimport Collaboration from \"@tiptap/extension-collaboration\";\nimport CollaborationCursor from \"@tiptap/extension-collaboration-cursor\";\nimport type { Mark as PMMark } from \"@tiptap/pm/model\";\nimport { useCallback } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentsExtension } from \"./comments/CommentsExtension\";\nimport { MentionExtension } from \"./mentions/MentionExtension\";\nimport { LIVEBLOCKS_COMMENT_MARK_TYPE } from \"./types\";\n\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<any, any, any, any, any>\n>();\n\nconst docMap = new Map<string, Doc>();\n\ntype LiveblocksExtensionOptions = {\n  field?: string;\n  comments: boolean; // | CommentsConfiguration\n  mentions: boolean; // | MentionsConfiguration\n};\n\nconst LiveblocksCollab = Collaboration.extend({\n  // Override the onCreate method to warn users about potential misconfigurations\n  onCreate() {\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"doc\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap document extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      !this.editor.extensionManager.extensions.find(\n        (e) => e.name === \"paragraph\"\n      )\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap paragraph extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"text\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap text extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      this.editor.extensionManager.extensions.find((e) => e.name === \"history\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The history extension is enabled, Liveblocks extension provides its own. Please remove or disable the History plugin to prevent unwanted conflicts.\"\n      );\n    }\n  },\n});\n\nexport const useLiveblocksExtension = (): Extension => {\n  const room = useRoom();\n\n  // TODO: we don't need these things if comments isn't turned on...\n  // TODO: we don't have a reference to the editor here, need to figure this out\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      // handleThreadDelete(error.context.threadId);\n    }\n  });\n  const client = useClient();\n  const store = getUmbrellaStoreForClient(client);\n  const roomId = room.id;\n\n  const reportTextEditorType = useCallback(\n    (field: string) => {\n      room[kInternal].reportTextEditor(TextEditorType.TipTap, field);\n    },\n    [room]\n  );\n  const onCreateMention = useCallback(\n    (userId: string, notificationId: string) => {\n      try {\n        room[kInternal].createTextMention(userId, notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  const onDeleteMention = useCallback(\n    (notificationId: string) => {\n      try {\n        room[kInternal].deleteTextMention(notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  return Extension.create<\n    LiveblocksExtensionOptions,\n    {\n      unsubs: (() => void)[];\n      doc: Doc;\n      provider: LiveblocksYjsProvider<any, any, any, any, any>;\n    }\n  >({\n    name: \"liveblocksExtension\",\n\n    onCreate() {\n      if (\n        this.options.mentions &&\n        this.editor.extensionManager.extensions.find(\n          (e) => e.name.toLowerCase() === \"mention\"\n        )\n      ) {\n        console.warn(\n          \"[Liveblocks] Liveblocks own mention plugin is enabled, using another mention plugin may cause a conflict.\"\n        );\n      }\n      const self = room.getSelf();\n      if (self?.info) {\n        this.editor.commands.updateUser({\n          name: self.info.name,\n          color: self.info.color,\n        });\n      }\n      this.storage.unsubs.push(\n        room.events.self.subscribe(({ info }) => {\n          if (!info) {\n            return;\n          }\n          const { name, color } = info;\n          const { user } = this.storage.provider.awareness.getLocalState() as {\n            user: IUserInfo;\n          };\n          // TODO: maybe we need a deep compare here so other info can be provided\n          if (name !== user?.name || color !== user?.color) {\n            this.editor.commands.updateUser({ name, color });\n          }\n        })\n      );\n      if (this.options.comments) {\n        const commentMarkType = getMarkType(\n          LIVEBLOCKS_COMMENT_MARK_TYPE,\n          this.editor.schema\n        );\n        this.storage.unsubs.push(\n          // Subscribe to threads so we can update comment marks if they become resolved/deleted\n          store.subscribe(() => {\n            const threadMap = new Map(\n              store\n                .getFullState()\n                .threadsDB.findMany(roomId, { resolved: false }, \"asc\")\n                .map((thread) => [thread.id, true])\n            );\n            function isComment(mark: PMMark): mark is PMMark & {\n              attrs: { orphan: boolean; threadId: string };\n            } {\n              return mark.type.name === LIVEBLOCKS_COMMENT_MARK_TYPE;\n            }\n            // when threads change, find marks and update them if needed\n            this.editor.state.doc.descendants((node, pos) => {\n              node.marks.forEach((mark) => {\n                if (isComment(mark)) {\n                  const markThreadId = mark.attrs.threadId;\n                  const isOrphan = !threadMap.has(markThreadId);\n                  if (isOrphan !== mark.attrs.orphan) {\n                    const { tr } = this.editor.state;\n                    const trimmedFrom = Math.max(pos, 0);\n                    const trimmedTo = Math.min(\n                      pos + node.nodeSize,\n                      this.editor.state.doc.content.size - 1\n                    );\n                    tr.removeMark(trimmedFrom, trimmedTo, commentMarkType);\n                    tr.addMark(\n                      trimmedFrom,\n                      trimmedTo,\n                      commentMarkType.create({\n                        ...mark.attrs,\n                        orphan: isOrphan,\n                      })\n                    );\n                    this.editor.view.dispatch(tr);\n                  }\n                }\n              });\n            });\n          })\n        );\n      }\n\n      reportTextEditorType(this.options.field ?? \"default\");\n    },\n    onDestroy() {\n      this.storage.unsubs.forEach((unsub) => unsub());\n    },\n    addStorage() {\n      if (!providersMap.has(room.id)) {\n        const doc = new Doc();\n        docMap.set(room.id, doc);\n        providersMap.set(room.id, new LiveblocksYjsProvider(room, doc));\n      }\n      return {\n        doc: docMap.get(room.id)!,\n        provider: providersMap.get(room.id)!,\n        unsubs: [],\n      };\n    },\n\n    addOptions() {\n      return {\n        field: \"default\",\n        mentions: true,\n        comments: true,\n      };\n    },\n    addExtensions() {\n      const extensions: AnyExtension[] = [\n        LiveblocksCollab.configure({\n          document: this.storage.doc,\n          field: this.options.field,\n        }),\n        CollaborationCursor.configure({\n          provider: this.storage.provider, //todo change the ! to an assert\n        }),\n      ];\n\n      if (this.options.comments) {\n        extensions.push(CommentsExtension);\n      }\n      if (this.options.mentions) {\n        extensions.push(\n          MentionExtension.configure({\n            onCreateMention,\n            onDeleteMention,\n          })\n        );\n      }\n\n      return extensions;\n    },\n  });\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LiveblocksExtension.mjs","sources":["../src/LiveblocksExtension.ts"],"sourcesContent":["import { type IUserInfo, kInternal, TextEditorType } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n} from \"@liveblocks/react/_private\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { AnyExtension, Content, Editor } from \"@tiptap/core\";\nimport { Extension, getMarkType } from \"@tiptap/core\";\nimport Collaboration from \"@tiptap/extension-collaboration\";\nimport CollaborationCursor from \"@tiptap/extension-collaboration-cursor\";\nimport type { Mark as PMMark } from \"@tiptap/pm/model\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentsExtension } from \"./comments/CommentsExtension\";\nimport { MentionExtension } from \"./mentions/MentionExtension\";\nimport { LIVEBLOCKS_COMMENT_MARK_TYPE } from \"./types\";\n\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<any, any, any, any, any>\n>();\n\nconst docMap = new Map<string, Doc>();\n\ntype LiveblocksExtensionOptions = {\n  field?: string;\n  comments?: boolean; // | CommentsConfiguration\n  mentions?: boolean; // | MentionsConfiguration\n  offlineSupport_experimental?: boolean;\n  initialContent?: Content;\n};\n\nconst DEFAULT_OPTIONS = {\n  field: \"default\",\n  comments: true,\n  mentions: true,\n  offlineSupport_experimental: false,\n};\n\nconst LiveblocksCollab = Collaboration.extend({\n  // Override the onCreate method to warn users about potential misconfigurations\n  onCreate() {\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"doc\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap document extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      !this.editor.extensionManager.extensions.find(\n        (e) => e.name === \"paragraph\"\n      )\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap paragraph extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n\n    if (\n      !this.editor.extensionManager.extensions.find((e) => e.name === \"text\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The tiptap text extension is required for Liveblocks collaboration. Please add it or use Tiptap StarterKit extension.\"\n      );\n    }\n    if (\n      this.editor.extensionManager.extensions.find((e) => e.name === \"history\")\n    ) {\n      console.warn(\n        \"[Liveblocks] The history extension is enabled, Liveblocks extension provides its own. Please remove or disable the History plugin to prevent unwanted conflicts.\"\n      );\n    }\n  },\n});\n\nfunction useYjsProvider() {\n  const room = useRoom();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return room[kInternal].yjsProviderDidChange.subscribe(onStoreChange);\n    },\n    [room]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return room[kInternal].getYjsProvider();\n  }, [room]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Returns whether the editor has loaded the initial text contents from the\n * server and is ready to be used.\n */\nexport function useIsEditorReady(): boolean {\n  const yjsProvider = useYjsProvider();\n\n  const getSnapshot = useCallback(() => {\n    const status = yjsProvider?.getStatus();\n    return status === \"synchronizing\" || status === \"synchronized\";\n  }, [yjsProvider]);\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      if (yjsProvider === undefined) return () => {};\n      yjsProvider.on(\"status\", callback);\n      return () => {\n        yjsProvider.off(\"status\", callback);\n      };\n    },\n    [yjsProvider]\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nexport const useLiveblocksExtension = (\n  opts?: LiveblocksExtensionOptions\n): Extension => {\n  const options = {\n    ...DEFAULT_OPTIONS,\n    ...opts,\n  };\n  const [editor, setEditor] = useState<Editor | null>(null);\n  const room = useRoom();\n\n  // TODO: we don't need these things if comments isn't turned on...\n  // TODO: we don't have a reference to the editor here, need to figure this out\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      // handleThreadDelete(error.context.threadId);\n    }\n  });\n  const isEditorReady = useIsEditorReady();\n  const client = useClient();\n  const store = getUmbrellaStoreForClient(client);\n  const roomId = room.id;\n  const yjsProvider = useYjsProvider();\n\n  // If the user provided initialContent, wait for ready and then set it\n  useEffect(() => {\n    if (!isEditorReady || !yjsProvider || !options.initialContent || !editor)\n      return;\n\n    // As noted in the tiptap documentation, you may not set initial content with collaboration.\n    // The docs provide the following workaround:\n    const ydoc = (yjsProvider as LiveblocksYjsProvider).getYDoc();\n    const hasContentSet = ydoc.getMap(\"liveblocks_config\").get(\"hasContentSet\");\n    if (!hasContentSet) {\n      ydoc.getMap(\"liveblocks_config\").set(\"hasContentSet\", true);\n      editor.commands.setContent(options.initialContent);\n    }\n  }, [isEditorReady, yjsProvider, options.initialContent, editor]);\n\n  const reportTextEditorType = useCallback(\n    (field: string) => {\n      room[kInternal].reportTextEditor(TextEditorType.TipTap, field);\n    },\n    [room]\n  );\n  const onCreateMention = useCallback(\n    (userId: string, notificationId: string) => {\n      try {\n        room[kInternal].createTextMention(userId, notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  const onDeleteMention = useCallback(\n    (notificationId: string) => {\n      try {\n        room[kInternal].deleteTextMention(notificationId);\n      } catch (err) {\n        console.warn(err);\n      }\n    },\n    [room]\n  );\n  return Extension.create<\n    never,\n    {\n      unsubs: (() => void)[];\n      doc: Doc;\n      provider: LiveblocksYjsProvider<any, any, any, any, any>;\n    }\n  >({\n    name: \"liveblocksExtension\",\n\n    onCreate() {\n      setEditor(this.editor);\n      if (this.editor.options.content) {\n        console.warn(\n          \"[Liveblocks] Initial content must be set in the useLiveblocksExtension hook option. Remove content from your editor options.\"\n        );\n      }\n      if (\n        options.mentions &&\n        this.editor.extensionManager.extensions.find(\n          (e) => e.name.toLowerCase() === \"mention\"\n        )\n      ) {\n        console.warn(\n          \"[Liveblocks] Liveblocks own mention plugin is enabled, using another mention plugin may cause a conflict.\"\n        );\n      }\n      const self = room.getSelf();\n      if (self?.info) {\n        this.editor.commands.updateUser({\n          name: self.info.name,\n          color: self.info.color,\n        });\n      }\n      this.storage.unsubs.push(\n        room.events.self.subscribe(({ info }) => {\n          if (!info) {\n            return;\n          }\n          const { name, color } = info;\n          const { user } = this.storage.provider.awareness.getLocalState() as {\n            user: IUserInfo;\n          };\n          // TODO: maybe we need a deep compare here so other info can be provided\n          if (name !== user?.name || color !== user?.color) {\n            this.editor.commands.updateUser({ name, color });\n          }\n        })\n      );\n      if (options.comments) {\n        const commentMarkType = getMarkType(\n          LIVEBLOCKS_COMMENT_MARK_TYPE,\n          this.editor.schema\n        );\n        this.storage.unsubs.push(\n          // Subscribe to threads so we can update comment marks if they become resolved/deleted\n          store.subscribe(() => {\n            const threadMap = new Map(\n              store\n                .getFullState()\n                .threadsDB.findMany(roomId, { resolved: false }, \"asc\")\n                .map((thread) => [thread.id, true])\n            );\n            function isComment(mark: PMMark): mark is PMMark & {\n              attrs: { orphan: boolean; threadId: string };\n            } {\n              return mark.type.name === LIVEBLOCKS_COMMENT_MARK_TYPE;\n            }\n            // when threads change, find marks and update them if needed\n            this.editor.state.doc.descendants((node, pos) => {\n              node.marks.forEach((mark) => {\n                if (isComment(mark)) {\n                  const markThreadId = mark.attrs.threadId;\n                  const isOrphan = !threadMap.has(markThreadId);\n                  if (isOrphan !== mark.attrs.orphan) {\n                    const { tr } = this.editor.state;\n                    const trimmedFrom = Math.max(pos, 0);\n                    const trimmedTo = Math.min(\n                      pos + node.nodeSize,\n                      this.editor.state.doc.content.size - 1\n                    );\n                    tr.removeMark(trimmedFrom, trimmedTo, commentMarkType);\n                    tr.addMark(\n                      trimmedFrom,\n                      trimmedTo,\n                      commentMarkType.create({\n                        ...mark.attrs,\n                        orphan: isOrphan,\n                      })\n                    );\n                    this.editor.view.dispatch(tr);\n                  }\n                }\n              });\n            });\n          })\n        );\n      }\n\n      reportTextEditorType(options.field ?? DEFAULT_OPTIONS.field);\n    },\n    onDestroy() {\n      this.storage.unsubs.forEach((unsub) => unsub());\n    },\n    addStorage() {\n      if (!providersMap.has(room.id)) {\n        const doc = new Doc();\n        docMap.set(room.id, doc);\n        providersMap.set(\n          room.id,\n          new LiveblocksYjsProvider(room, doc, {\n            offlineSupport_experimental: options.offlineSupport_experimental,\n          })\n        );\n      }\n      return {\n        doc: docMap.get(room.id)!,\n        provider: providersMap.get(room.id)!,\n        unsubs: [],\n      };\n    },\n    addExtensions() {\n      const extensions: AnyExtension[] = [\n        LiveblocksCollab.configure({\n          document: this.storage.doc,\n          field: options.field,\n        }),\n        CollaborationCursor.configure({\n          provider: this.storage.provider, //todo change the ! to an assert\n        }),\n      ];\n\n      if (options.comments) {\n        extensions.push(CommentsExtension);\n      }\n      if (options.mentions) {\n        extensions.push(\n          MentionExtension.configure({\n            onCreateMention,\n            onDeleteMention,\n          })\n        );\n      }\n\n      return extensions;\n    },\n  });\n};\n"],"names":[],"mappings":"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"}

package/dist/comments/FloatingComposer.js

@@ -10,7 +10,7 @@ var reactDom$1 = require('react-dom');
 const FLOATING_COMPOSER_COLLISION_PADDING = 10;
 const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forwardedRef) {
   const createThread = react.useCreateThread();
-  const { editor } = props;
+  const { editor, onComposerSubmit, onKeyDown } = props;
   const { showComposer } = react$1.useEditorState({
     editor,
     selector: (ctx) => ({
@@ -66,18 +66,29 @@ const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forw
   }, [editor, updateRef, showComposer]);
   React.useLayoutEffect(updateRef, [updateRef]);
   const handleComposerSubmit = React.useCallback(
-    ({ body }, event) => {
+    (comment, event) => {
+      onComposerSubmit?.(comment, event);
+      if (event.defaultPrevented)
+        return;
       if (!editor) {
         return;
       }
       event.preventDefault();
       const thread = createThread({
-        body
+        body: comment.body,
+        attachments: comment.attachments,
+        metadata: props.metadata ?? {}
       });
       editor.commands.addComment(thread.id);
     },
-    [editor, createThread]
+    [onComposerSubmit, editor, createThread, props.metadata]
   );
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "Escape" && editor) {
+      editor.commands.focus();
+    }
+    onKeyDown?.(event);
+  }, [editor, onKeyDown]);
   if (!showComposer || !editor) {
     return null;
   }
@@ -95,6 +106,7 @@ const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forw
     }, /* @__PURE__ */ React.createElement(reactUi.Composer, {
       ref: forwardedRef,
       ...props,
+      onKeyDown: handleKeyDown,
       onComposerSubmit: handleComposerSubmit,
       onClick: (e) => {
         e.stopPropagation();

package/dist/comments/FloatingComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.js","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport type { ComposerProps, ComposerSubmitComment } from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent } from \"react\";\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { CommentsExtensionStorage } from \"../types\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor } = props;\n  const { showComposer } = useEditorState({\n    editor,\n    selector: (ctx) => ({\n      showComposer: !!(ctx.editor?.storage.liveblocksComments as CommentsExtensionStorage | undefined)?.pendingCommentSelection,\n    }),\n    equalityFn: (prev, next) => {\n      if (!next) return false;\n      return prev.showComposer === next.showComposer;\n    },\n  }) ?? { showComposer: false };\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n\n  const updateRef = useCallback(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    const el = editor.view.dom.querySelector(\".lb-tiptap-active-selection\");\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, showComposer]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef, showComposer]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    ({ body }: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body,\n      });\n      editor.commands.addComment(thread.id);\n\n    },\n    [editor, createThread]\n  );\n\n  if (!showComposer || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating} style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}>\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});"],"names":["forwardRef","FloatingComposer","useCreateThread","useEditorState","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useCallback","useEffect","useLayoutEffect","createPortal","Composer"],"mappings":"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"}
+{"version":3,"file":"FloatingComposer.js","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport type { ComposerProps, ComposerSubmitComment } from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { CommentsExtensionStorage } from \"../types\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const { showComposer } = useEditorState({\n    editor,\n    selector: (ctx) => ({\n      showComposer: !!(ctx.editor?.storage.liveblocksComments as CommentsExtensionStorage | undefined)?.pendingCommentSelection,\n    }),\n    equalityFn: (prev, next) => {\n      if (!next) return false;\n      return prev.showComposer === next.showComposer;\n    },\n  }) ?? { showComposer: false };\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n\n  const updateRef = useCallback(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    const el = editor.view.dom.querySelector(\".lb-tiptap-active-selection\");\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, showComposer]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef, showComposer]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLFormElement>) => {\n    if (event.key === \"Escape\" && editor) {\n      editor.commands.focus();\n    }\n    onKeyDown?.(event);\n  }, [editor, onKeyDown]);\n\n\n  if (!showComposer || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating} style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}>\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});"],"names":["forwardRef","FloatingComposer","useCreateThread","useEditorState","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useCallback","useEffect","useLayoutEffect","createPortal","Composer"],"mappings":";;;;;;;;;AAsBO,MAAM,mCAAsC,GAAA,GAAA;AAE5C,MAAM,gBAAmB,GAAAA,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,YAAc,EAAA;AAC/C,EAAA,MAAM,eAAeC,qBAAgB,EAAA,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAQ,gBAAkB,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAChD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,sBAAe,CAAA;AAAA,IACtC,MAAA;AAAA,IACA,QAAA,EAAU,CAAC,GAAS,MAAA;AAAA,MAClB,cAAc,CAAC,CAAE,GAAI,CAAA,MAAA,EAAQ,QAAQ,kBAA6D,EAAA,uBAAA;AAAA,KACpG,CAAA;AAAA,IACA,UAAA,EAAY,CAAC,IAAA,EAAM,IAAS,KAAA;AAC1B,MAAA,IAAI,CAAC,IAAA;AAAM,QAAO,OAAA,KAAA,CAAA;AAClB,MAAO,OAAA,IAAA,CAAK,iBAAiB,IAAK,CAAA,YAAA,CAAA;AAAA,KACpC;AAAA,GACD,CAAA,IAAK,EAAE,YAAA,EAAc,KAAM,EAAA,CAAA;AAE5B,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACEC,oBAAY,CAAA;AAAA,IACd,QAAU,EAAA,OAAA;AAAA,IACV,SAAW,EAAA,QAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,cAAK,EAAE,OAAA,EAAS,mCAAqC,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACvEC,gBAAO,EAAE,CAAA;AAAA,MACTC,aAAK,CAAA,EAAE,OAAS,EAAA,mCAAA,EAAqC,CAAA;AAAA,MACrDC,cAAM,CAAA;AAAA,QACJ,OAAS,EAAA,mCAAA;AAAA,QACT,SAASC,mBAAW,EAAA;AAAA,OACrB,CAAA;AAAA,MACDC,aAAK,CAAA,EAAE,OAAS,EAAA,mCAAA,EAAqC,CAAA;AAAA,KACvD;AAAA,IACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAAC,mBAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAGD,EAAM,MAAA,SAAA,GAAYC,kBAAY,MAAM;AAClC,IAAI,IAAA,CAAC,MAAU,IAAA,CAAC,YAAc,EAAA;AAC5B,MAAA,OAAA;AAAA,KACF;AACA,IAAA,MAAM,EAAK,GAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,cAAc,6BAA6B,CAAA,CAAA;AACtE,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,MAAA,EAAQ,YAAY,CAAC,CAAA,CAAA;AAGvC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAU,IAAA,CAAC,YAAc,EAAA;AAC5B,MAAA,OAAA;AAAA,KACF;AACA,IAAO,MAAA,CAAA,EAAA,CAAG,eAAe,SAAS,CAAA,CAAA;AAClC,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,GAAA,CAAI,eAAe,SAAS,CAAA,CAAA;AAAA,KACrC,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAA,EAAW,YAAY,CAAC,CAAA,CAAA;AAEpC,EAAgBC,qBAAA,CAAA,SAAA,EAAW,CAAC,SAAS,CAAC,CAAA,CAAA;AAItC,EAAA,MAAM,oBAAuB,GAAAF,iBAAA;AAAA,IAC3B,CAAC,SAAgC,KAAsC,KAAA;AACrE,MAAA,gBAAA,GAAmB,SAAS,KAAK,CAAA,CAAA;AACjC,MAAA,IAAI,KAAM,CAAA,gBAAA;AAAkB,QAAA,OAAA;AAE5B,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,SAAS,YAAa,CAAA;AAAA,QAC1B,MAAM,OAAQ,CAAA,IAAA;AAAA,QACd,aAAa,OAAQ,CAAA,WAAA;AAAA,QACrB,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,EAAC;AAAA,OAC9B,CAAA,CAAA;AACD,MAAO,MAAA,CAAA,QAAA,CAAS,UAAW,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,KAEtC;AAAA,IACA,CAAC,gBAAA,EAAkB,MAAQ,EAAA,YAAA,EAAc,MAAM,QAAQ,CAAA;AAAA,GACzD,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgBA,iBAAY,CAAA,CAAC,KAA0C,KAAA;AAC3E,IAAI,IAAA,KAAA,CAAM,GAAQ,KAAA,QAAA,IAAY,MAAQ,EAAA;AACpC,MAAA,MAAA,CAAO,SAAS,KAAM,EAAA,CAAA;AAAA,KACxB;AACA,IAAA,SAAA,GAAY,KAAK,CAAA,CAAA;AAAA,GAChB,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAGtB,EAAI,IAAA,CAAC,YAAgB,IAAA,CAAC,MAAQ,EAAA;AAC5B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,OAAAG,uBAAA;AAAA,oBACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAU,EAAA,+EAAA;AAAA,MACV,GAAK,EAAA,WAAA;AAAA,MAAa,KAAO,EAAA;AAAA,QACvB,QAAU,EAAA,QAAA;AAAA,QACV,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,SAAA,EAAW,eAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA,MAAA,CAAA;AAAA,QAC1D,QAAU,EAAA,aAAA;AAAA,OACZ;AAAA,KAAA,kBACC,KAAA,CAAA,aAAA,CAAAC,gBAAA,EAAA;AAAA,MACC,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,gBAAkB,EAAA,oBAAA;AAAA,MAClB,OAAA,EAAS,CAAC,CAAM,KAAA;AAEd,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,OACpB;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,KACb,CACF,CAAA;AAAA,IACA,QAAS,CAAA,IAAA;AAAA,GACX,CAAA;AACF,CAAC;;;;;"}

package/dist/comments/FloatingComposer.mjs

@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 const FLOATING_COMPOSER_COLLISION_PADDING = 10;
 const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedRef) {
   const createThread = useCreateThread();
-  const { editor } = props;
+  const { editor, onComposerSubmit, onKeyDown } = props;
   const { showComposer } = useEditorState({
     editor,
     selector: (ctx) => ({
@@ -64,18 +64,29 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
   }, [editor, updateRef, showComposer]);
   useLayoutEffect(updateRef, [updateRef]);
   const handleComposerSubmit = useCallback(
-    ({ body }, event) => {
+    (comment, event) => {
+      onComposerSubmit?.(comment, event);
+      if (event.defaultPrevented)
+        return;
       if (!editor) {
         return;
       }
       event.preventDefault();
       const thread = createThread({
-        body
+        body: comment.body,
+        attachments: comment.attachments,
+        metadata: props.metadata ?? {}
       });
       editor.commands.addComment(thread.id);
     },
-    [editor, createThread]
+    [onComposerSubmit, editor, createThread, props.metadata]
   );
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Escape" && editor) {
+      editor.commands.focus();
+    }
+    onKeyDown?.(event);
+  }, [editor, onKeyDown]);
   if (!showComposer || !editor) {
     return null;
   }
@@ -93,6 +104,7 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
     }, /* @__PURE__ */ React.createElement(Composer, {
       ref: forwardedRef,
       ...props,
+      onKeyDown: handleKeyDown,
       onComposerSubmit: handleComposerSubmit,
       onClick: (e) => {
         e.stopPropagation();

package/dist/comments/FloatingComposer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport type { ComposerProps, ComposerSubmitComment } from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent } from \"react\";\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { CommentsExtensionStorage } from \"../types\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor } = props;\n  const { showComposer } = useEditorState({\n    editor,\n    selector: (ctx) => ({\n      showComposer: !!(ctx.editor?.storage.liveblocksComments as CommentsExtensionStorage | undefined)?.pendingCommentSelection,\n    }),\n    equalityFn: (prev, next) => {\n      if (!next) return false;\n      return prev.showComposer === next.showComposer;\n    },\n  }) ?? { showComposer: false };\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n\n  const updateRef = useCallback(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    const el = editor.view.dom.querySelector(\".lb-tiptap-active-selection\");\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, showComposer]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef, showComposer]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    ({ body }: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body,\n      });\n      editor.commands.addComment(thread.id);\n\n    },\n    [editor, createThread]\n  );\n\n  if (!showComposer || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating} style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}>\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});"],"names":["FloatingComposer"],"mappings":"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"}
+{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport type { ComposerProps, ComposerSubmitComment } from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { CommentsExtensionStorage } from \"../types\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const { showComposer } = useEditorState({\n    editor,\n    selector: (ctx) => ({\n      showComposer: !!(ctx.editor?.storage.liveblocksComments as CommentsExtensionStorage | undefined)?.pendingCommentSelection,\n    }),\n    equalityFn: (prev, next) => {\n      if (!next) return false;\n      return prev.showComposer === next.showComposer;\n    },\n  }) ?? { showComposer: false };\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n\n  const updateRef = useCallback(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    const el = editor.view.dom.querySelector(\".lb-tiptap-active-selection\");\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, showComposer]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    if (!editor || !showComposer) {\n      return;\n    }\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef, showComposer]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLFormElement>) => {\n    if (event.key === \"Escape\" && editor) {\n      editor.commands.focus();\n    }\n    onKeyDown?.(event);\n  }, [editor, onKeyDown]);\n\n\n  if (!showComposer || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating} style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}>\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});"],"names":["FloatingComposer"],"mappings":"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"}

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import React, { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
-import { Extension } from '@tiptap/core';
+import { Extension, Content } from '@tiptap/core';
 
 declare type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
@@ -47,7 +47,19 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
 
-declare const useLiveblocksExtension: () => Extension;
+declare type LiveblocksExtensionOptions = {
+    field?: string;
+    comments?: boolean;
+    mentions?: boolean;
+    offlineSupport_experimental?: boolean;
+    initialContent?: Content;
+};
+/**
+ * Returns whether the editor has loaded the initial text contents from the
+ * server and is ready to be used.
+ */
+declare function useIsEditorReady(): boolean;
+declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;
@@ -75,4 +87,4 @@ declare module "@tiptap/core" {
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };
+export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import React, { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
-import { Extension } from '@tiptap/core';
+import { Extension, Content } from '@tiptap/core';
 
 declare type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
@@ -47,7 +47,19 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
 
-declare const useLiveblocksExtension: () => Extension;
+declare type LiveblocksExtensionOptions = {
+    field?: string;
+    comments?: boolean;
+    mentions?: boolean;
+    offlineSupport_experimental?: boolean;
+    initialContent?: Content;
+};
+/**
+ * Returns whether the editor has loaded the initial text contents from the
+ * server and is ready to be used.
+ */
+declare function useIsEditorReady(): boolean;
+declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;
@@ -75,4 +87,4 @@ declare module "@tiptap/core" {
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };
+export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };

package/dist/index.js

@@ -13,6 +13,7 @@ core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
 exports.AnchoredThreads = AnchoredThreads.AnchoredThreads;
 exports.FloatingComposer = FloatingComposer.FloatingComposer;
 exports.FloatingThreads = FloatingThreads.FloatingThreads;
+exports.useIsEditorReady = LiveblocksExtension.useIsEditorReady;
 exports.useLiveblocksExtension = LiveblocksExtension.useLiveblocksExtension;
 exports.HistoryVersionPreview = HistoryVersionPreview.HistoryVersionPreview;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
 export { AnchoredThreads } from './comments/AnchoredThreads.mjs';
 export { FloatingComposer } from './comments/FloatingComposer.mjs';
 export { FloatingThreads } from './comments/FloatingThreads.mjs';
-export { useLiveblocksExtension } from './LiveblocksExtension.mjs';
+export { useIsEditorReady, useLiveblocksExtension } from './LiveblocksExtension.mjs';
 export { HistoryVersionPreview } from './version-history/HistoryVersionPreview.mjs';
 
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-tiptap";
-const PKG_VERSION = typeof "2.12.1" === "string" && "2.12.1";
+const PKG_VERSION = typeof "2.12.2" === "string" && "2.12.2";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-tiptap";
-const PKG_VERSION = typeof "2.12.1" === "string" && "2.12.1";
+const PKG_VERSION = typeof "2.12.2" === "string" && "2.12.2";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-tiptap",
-  "version": "2.12.1",
+  "version": "2.12.2",
   "description": "A tiptap react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.12.1",
-    "@liveblocks/core": "2.12.1",
-    "@liveblocks/react": "2.12.1",
-    "@liveblocks/react-ui": "2.12.1",
-    "@liveblocks/yjs": "2.12.1",
+    "@liveblocks/client": "2.12.2",
+    "@liveblocks/core": "2.12.2",
+    "@liveblocks/react": "2.12.2",
+    "@liveblocks/react-ui": "2.12.2",
+    "@liveblocks/yjs": "2.12.2",
     "@tiptap/core": "^2.7.2",
     "@tiptap/react": "^2.7.2",
     "@tiptap/suggestion": "^2.7.2",