@liveblocks/react-tiptap 2.12.1-test2 → 2.12.1-test3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,7 +10,7 @@ var reactDom$1 = require('react-dom');
|
|
|
10
10
|
const FLOATING_COMPOSER_COLLISION_PADDING = 10;
|
|
11
11
|
const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forwardedRef) {
|
|
12
12
|
const createThread = react.useCreateThread();
|
|
13
|
-
const { editor } = props;
|
|
13
|
+
const { editor, onComposerSubmit, onKeyDown } = props;
|
|
14
14
|
const { showComposer } = react$1.useEditorState({
|
|
15
15
|
editor,
|
|
16
16
|
selector: (ctx) => ({
|
|
@@ -66,18 +66,29 @@ const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forw
|
|
|
66
66
|
}, [editor, updateRef, showComposer]);
|
|
67
67
|
React.useLayoutEffect(updateRef, [updateRef]);
|
|
68
68
|
const handleComposerSubmit = React.useCallback(
|
|
69
|
-
(
|
|
69
|
+
(comment, event) => {
|
|
70
|
+
onComposerSubmit?.(comment, event);
|
|
71
|
+
if (event.defaultPrevented)
|
|
72
|
+
return;
|
|
70
73
|
if (!editor) {
|
|
71
74
|
return;
|
|
72
75
|
}
|
|
73
76
|
event.preventDefault();
|
|
74
77
|
const thread = createThread({
|
|
75
|
-
body
|
|
78
|
+
body: comment.body,
|
|
79
|
+
attachments: comment.attachments,
|
|
80
|
+
metadata: props.metadata ?? {}
|
|
76
81
|
});
|
|
77
82
|
editor.commands.addComment(thread.id);
|
|
78
83
|
},
|
|
79
|
-
[editor, createThread]
|
|
84
|
+
[onComposerSubmit, editor, createThread, props.metadata]
|
|
80
85
|
);
|
|
86
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
87
|
+
if (event.key === "Escape" && editor) {
|
|
88
|
+
editor.commands.focus();
|
|
89
|
+
}
|
|
90
|
+
onKeyDown?.(event);
|
|
91
|
+
}, [editor, onKeyDown]);
|
|
81
92
|
if (!showComposer || !editor) {
|
|
82
93
|
return null;
|
|
83
94
|
}
|
|
@@ -95,6 +106,7 @@ const FloatingComposer = React.forwardRef(function FloatingComposer2(props, forw
|
|
|
95
106
|
}, /* @__PURE__ */ React.createElement(reactUi.Composer, {
|
|
96
107
|
ref: forwardedRef,
|
|
97
108
|
...props,
|
|
109
|
+
onKeyDown: handleKeyDown,
|
|
98
110
|
onComposerSubmit: handleComposerSubmit,
|
|
99
111
|
onClick: (e) => {
|
|
100
112
|
e.stopPropagation();
|
|
@@ -1 +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 (
|
|
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, 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":"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"}
|
|
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
|
|
|
8
8
|
const FLOATING_COMPOSER_COLLISION_PADDING = 10;
|
|
9
9
|
const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedRef) {
|
|
10
10
|
const createThread = useCreateThread();
|
|
11
|
-
const { editor } = props;
|
|
11
|
+
const { editor, onComposerSubmit, onKeyDown } = props;
|
|
12
12
|
const { showComposer } = useEditorState({
|
|
13
13
|
editor,
|
|
14
14
|
selector: (ctx) => ({
|
|
@@ -64,18 +64,29 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
|
|
|
64
64
|
}, [editor, updateRef, showComposer]);
|
|
65
65
|
useLayoutEffect(updateRef, [updateRef]);
|
|
66
66
|
const handleComposerSubmit = useCallback(
|
|
67
|
-
(
|
|
67
|
+
(comment, event) => {
|
|
68
|
+
onComposerSubmit?.(comment, event);
|
|
69
|
+
if (event.defaultPrevented)
|
|
70
|
+
return;
|
|
68
71
|
if (!editor) {
|
|
69
72
|
return;
|
|
70
73
|
}
|
|
71
74
|
event.preventDefault();
|
|
72
75
|
const thread = createThread({
|
|
73
|
-
body
|
|
76
|
+
body: comment.body,
|
|
77
|
+
attachments: comment.attachments,
|
|
78
|
+
metadata: props.metadata ?? {}
|
|
74
79
|
});
|
|
75
80
|
editor.commands.addComment(thread.id);
|
|
76
81
|
},
|
|
77
|
-
[editor, createThread]
|
|
82
|
+
[onComposerSubmit, editor, createThread, props.metadata]
|
|
78
83
|
);
|
|
84
|
+
const handleKeyDown = useCallback((event) => {
|
|
85
|
+
if (event.key === "Escape" && editor) {
|
|
86
|
+
editor.commands.focus();
|
|
87
|
+
}
|
|
88
|
+
onKeyDown?.(event);
|
|
89
|
+
}, [editor, onKeyDown]);
|
|
79
90
|
if (!showComposer || !editor) {
|
|
80
91
|
return null;
|
|
81
92
|
}
|
|
@@ -93,6 +104,7 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
|
|
|
93
104
|
}, /* @__PURE__ */ React.createElement(Composer, {
|
|
94
105
|
ref: forwardedRef,
|
|
95
106
|
...props,
|
|
107
|
+
onKeyDown: handleKeyDown,
|
|
96
108
|
onComposerSubmit: handleComposerSubmit,
|
|
97
109
|
onClick: (e) => {
|
|
98
110
|
e.stopPropagation();
|
|
@@ -1 +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 (
|
|
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, 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/version.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const PKG_NAME = "@liveblocks/react-tiptap";
|
|
4
|
-
const PKG_VERSION = typeof "2.12.1-
|
|
4
|
+
const PKG_VERSION = typeof "2.12.1-test3" === "string" && "2.12.1-test3";
|
|
5
5
|
const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
|
|
6
6
|
|
|
7
7
|
exports.PKG_FORMAT = PKG_FORMAT;
|
package/dist/version.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const PKG_NAME = "@liveblocks/react-tiptap";
|
|
2
|
-
const PKG_VERSION = typeof "2.12.1-
|
|
2
|
+
const PKG_VERSION = typeof "2.12.1-test3" === "string" && "2.12.1-test3";
|
|
3
3
|
const PKG_FORMAT = typeof "esm" === "string" && "esm";
|
|
4
4
|
|
|
5
5
|
export { PKG_FORMAT, PKG_NAME, PKG_VERSION };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liveblocks/react-tiptap",
|
|
3
|
-
"version": "2.12.1-
|
|
3
|
+
"version": "2.12.1-test3",
|
|
4
4
|
"description": "A tiptap react plugin to enable collaboration, comments, live cursors, and more.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@floating-ui/react-dom": "^2.1.2",
|
|
45
|
-
"@liveblocks/client": "2.12.1-
|
|
46
|
-
"@liveblocks/core": "2.12.1-
|
|
47
|
-
"@liveblocks/react": "2.12.1-
|
|
48
|
-
"@liveblocks/react-ui": "2.12.1-
|
|
49
|
-
"@liveblocks/yjs": "2.12.1-
|
|
45
|
+
"@liveblocks/client": "2.12.1-test3",
|
|
46
|
+
"@liveblocks/core": "2.12.1-test3",
|
|
47
|
+
"@liveblocks/react": "2.12.1-test3",
|
|
48
|
+
"@liveblocks/react-ui": "2.12.1-test3",
|
|
49
|
+
"@liveblocks/yjs": "2.12.1-test3",
|
|
50
50
|
"@tiptap/core": "^2.7.2",
|
|
51
51
|
"@tiptap/react": "^2.7.2",
|
|
52
52
|
"@tiptap/suggestion": "^2.7.2",
|