@liveblocks/react-lexical 1.12.0-lexical6 → 2.0.0-alpha3

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.
Files changed (80) hide show
  1. package/dist/classnames.js +8 -0
  2. package/dist/classnames.js.map +1 -0
  3. package/dist/classnames.mjs +6 -0
  4. package/dist/classnames.mjs.map +1 -0
  5. package/dist/comments/ThreadPanel.js +41 -16
  6. package/dist/comments/ThreadPanel.js.map +1 -1
  7. package/dist/comments/ThreadPanel.mjs +43 -18
  8. package/dist/comments/ThreadPanel.mjs.map +1 -1
  9. package/dist/comments/comment-plugin-provider.js +18 -106
  10. package/dist/comments/comment-plugin-provider.js.map +1 -1
  11. package/dist/comments/comment-plugin-provider.mjs +17 -104
  12. package/dist/comments/comment-plugin-provider.mjs.map +1 -1
  13. package/dist/comments/floating-composer.js +226 -15
  14. package/dist/comments/floating-composer.js.map +1 -1
  15. package/dist/comments/floating-composer.mjs +224 -15
  16. package/dist/comments/floating-composer.mjs.map +1 -1
  17. package/dist/create-dom-range.js +63 -0
  18. package/dist/create-dom-range.js.map +1 -0
  19. package/dist/create-dom-range.mjs +61 -0
  20. package/dist/create-dom-range.mjs.map +1 -0
  21. package/dist/create-rects-from-dom-range.js +36 -0
  22. package/dist/create-rects-from-dom-range.js.map +1 -0
  23. package/dist/create-rects-from-dom-range.mjs +34 -0
  24. package/dist/create-rects-from-dom-range.mjs.map +1 -0
  25. package/dist/index.d.mts +30 -40
  26. package/dist/index.d.ts +30 -40
  27. package/dist/index.js +5 -6
  28. package/dist/index.js.map +1 -1
  29. package/dist/index.mjs +3 -4
  30. package/dist/index.mjs.map +1 -1
  31. package/dist/liveblocks-config.js +3 -75
  32. package/dist/liveblocks-config.js.map +1 -1
  33. package/dist/liveblocks-config.mjs +4 -56
  34. package/dist/liveblocks-config.mjs.map +1 -1
  35. package/dist/liveblocks-plugin-provider.js +39 -43
  36. package/dist/liveblocks-plugin-provider.js.map +1 -1
  37. package/dist/liveblocks-plugin-provider.mjs +41 -44
  38. package/dist/liveblocks-plugin-provider.mjs.map +1 -1
  39. package/dist/mentions/avatar.js +10 -6
  40. package/dist/mentions/avatar.js.map +1 -1
  41. package/dist/mentions/avatar.mjs +10 -6
  42. package/dist/mentions/avatar.mjs.map +1 -1
  43. package/dist/mentions/mention-component.js +5 -18
  44. package/dist/mentions/mention-component.js.map +1 -1
  45. package/dist/mentions/mention-component.mjs +7 -19
  46. package/dist/mentions/mention-component.mjs.map +1 -1
  47. package/dist/mentions/mention-node.js +76 -80
  48. package/dist/mentions/mention-node.js.map +1 -1
  49. package/dist/mentions/mention-node.mjs +75 -81
  50. package/dist/mentions/mention-node.mjs.map +1 -1
  51. package/dist/mentions/mention-plugin.js +102 -90
  52. package/dist/mentions/mention-plugin.js.map +1 -1
  53. package/dist/mentions/mention-plugin.mjs +87 -71
  54. package/dist/mentions/mention-plugin.mjs.map +1 -1
  55. package/dist/mentions/suggestions.js +34 -6
  56. package/dist/mentions/suggestions.js.map +1 -1
  57. package/dist/mentions/suggestions.mjs +28 -3
  58. package/dist/mentions/suggestions.mjs.map +1 -1
  59. package/dist/mentions/user.js +8 -5
  60. package/dist/mentions/user.js.map +1 -1
  61. package/dist/mentions/user.mjs +8 -5
  62. package/dist/mentions/user.mjs.map +1 -1
  63. package/dist/version.js +1 -1
  64. package/dist/version.js.map +1 -1
  65. package/dist/version.mjs +1 -1
  66. package/dist/version.mjs.map +1 -1
  67. package/package.json +13 -13
  68. package/src/styles/constants.css +1 -0
  69. package/src/styles/index.css +158 -5
  70. package/src/styles/utils.css +6 -0
  71. package/styles.css +1 -1
  72. package/styles.css.map +1 -1
  73. package/dist/active-selection.js +0 -143
  74. package/dist/active-selection.js.map +0 -1
  75. package/dist/active-selection.mjs +0 -123
  76. package/dist/active-selection.mjs.map +0 -1
  77. package/dist/floating-selection-container.js +0 -157
  78. package/dist/floating-selection-container.js.map +0 -1
  79. package/dist/floating-selection-container.mjs +0 -155
  80. package/dist/floating-selection-container.mjs.map +0 -1
package/dist/index.d.ts CHANGED
@@ -1,61 +1,51 @@
1
- import React, { ComponentType, HTMLAttributes } from 'react';
1
+ import { BaseMetadata } from '@liveblocks/core';
2
+ import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
2
3
  import * as lexical from 'lexical';
4
+ import { LexicalCommand, NodeKey } from 'lexical';
5
+ import React, { ComponentProps, ComponentType, ReactNode } from 'react';
3
6
  import { InitialConfigType } from '@lexical/react/LexicalComposer';
4
- import { ComposerProps } from '@liveblocks/react-comments';
5
- import { BaseMetadata } from '@liveblocks/core';
6
7
 
7
- declare const ThreadPanel: () => React.JSX.Element;
8
-
9
- declare type LiveblocksPluginProviderProps = {
10
- children?: React.ReactNode;
8
+ declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
9
+ declare type ThreadMetadata = {
10
+ resolved?: boolean;
11
11
  };
12
- declare const LiveblocksPluginProvider: ({ children, }: LiveblocksPluginProviderProps) => JSX.Element;
12
+ declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
13
+ declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
13
14
 
14
- interface MentionProps {
15
- /**
16
- * The mention's user ID.
17
- */
18
- userId: string;
19
- }
20
- interface MentionSuggestionsProps {
21
- /**
22
- * The list of suggested user IDs.
23
- */
24
- userIds: string[];
25
- }
26
- interface EditorComponents {
27
- Mention: ComponentType<MentionProps>;
28
- MentionSuggestions: ComponentType<MentionSuggestionsProps>;
29
- }
30
- interface LiveblocksConfig {
15
+ declare type ThreadPanelComponents = {
16
+ Thread: ComponentType<ThreadProps>;
17
+ };
18
+ interface ThreadPanelProps extends ComponentProps<"div"> {
31
19
  /**
32
- * Whether comments are enabled. Defaults to true.
20
+ * Override the component's components.
33
21
  */
34
- comments?: boolean;
22
+ components?: Partial<ThreadPanelComponents>;
35
23
  /**
36
- * The components displayed within the editor.
24
+ * Override the component's strings.
37
25
  */
38
- components?: Partial<EditorComponents>;
26
+ overrides?: Partial<GlobalOverrides & ThreadPanelOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
39
27
  }
40
- declare function liveblocksLexicalConfig(editorConfig: InitialConfigType, config?: LiveblocksConfig): {
28
+ declare const ThreadPanel: React.ForwardRefExoticComponent<Omit<ThreadPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
29
+
30
+ declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorState">): {
41
31
  nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
42
32
  editorState: null;
33
+ html?: lexical.HTMLConfig | undefined;
34
+ onError: (error: Error, editor: lexical.LexicalEditor) => void;
43
35
  editor__DEPRECATED?: lexical.LexicalEditor | null | undefined;
44
36
  namespace: string;
45
- onError: (error: Error, editor: lexical.LexicalEditor) => void;
46
37
  editable?: boolean | undefined;
47
38
  theme?: lexical.EditorThemeClasses | undefined;
48
- html?: lexical.HTMLConfig | undefined;
49
39
  };
50
40
 
51
- declare const Mention: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
52
-
53
- declare type ThreadMetadata = {
54
- resolved?: boolean;
41
+ declare type LiveblocksPluginProps = {
42
+ children?: React.ReactNode;
55
43
  };
56
- declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
57
- declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
44
+ declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;
58
45
 
59
- declare function useCreateThread(): () => void;
46
+ declare function Mention({ nodeKey, children, }: {
47
+ nodeKey: NodeKey;
48
+ children: ReactNode;
49
+ }): React.JSX.Element;
60
50
 
61
- export { FloatingComposer, LiveblocksPluginProvider, Mention, ThreadPanel, liveblocksLexicalConfig, useCreateThread };
51
+ export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };
package/dist/index.js CHANGED
@@ -2,19 +2,18 @@
2
2
 
3
3
  var core = require('@liveblocks/core');
4
4
  var version = require('./version.js');
5
+ var floatingComposer = require('./comments/floating-composer.js');
5
6
  var ThreadPanel = require('./comments/ThreadPanel.js');
6
7
  var liveblocksConfig = require('./liveblocks-config.js');
7
8
  var liveblocksPluginProvider = require('./liveblocks-plugin-provider.js');
8
9
  var mentionComponent = require('./mentions/mention-component.js');
9
- var floatingComposer = require('./comments/floating-composer.js');
10
- var commentPluginProvider = require('./comments/comment-plugin-provider.js');
11
10
 
12
11
  core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
13
12
 
13
+ exports.FloatingComposer = floatingComposer.FloatingComposer;
14
+ exports.OPEN_FLOATING_COMPOSER_COMMAND = floatingComposer.OPEN_FLOATING_COMPOSER_COMMAND;
14
15
  exports.ThreadPanel = ThreadPanel.ThreadPanel;
15
- exports.liveblocksLexicalConfig = liveblocksConfig.liveblocksLexicalConfig;
16
- exports.LiveblocksPluginProvider = liveblocksPluginProvider.LiveblocksPluginProvider;
16
+ exports.liveblocksConfig = liveblocksConfig.liveblocksConfig;
17
+ exports.LiveblocksPlugin = liveblocksPluginProvider.LiveblocksPlugin;
17
18
  exports.Mention = mentionComponent.Mention;
18
- exports.FloatingComposer = floatingComposer.FloatingComposer;
19
- exports.useCreateThread = commentPluginProvider.useCreateThread;
20
19
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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 { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}
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 {\n FloatingComposer,\n OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { ThreadPanelProps } from \"./comments/ThreadPanel\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}
package/dist/index.mjs CHANGED
@@ -1,11 +1,10 @@
1
1
  import { detectDupes } from '@liveblocks/core';
2
2
  import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
3
+ export { FloatingComposer, OPEN_FLOATING_COMPOSER_COMMAND } from './comments/floating-composer.mjs';
3
4
  export { ThreadPanel } from './comments/ThreadPanel.mjs';
4
- export { liveblocksLexicalConfig } from './liveblocks-config.mjs';
5
- export { LiveblocksPluginProvider } from './liveblocks-plugin-provider.mjs';
5
+ export { liveblocksConfig } from './liveblocks-config.mjs';
6
+ export { LiveblocksPlugin } from './liveblocks-plugin-provider.mjs';
6
7
  export { Mention } from './mentions/mention-component.mjs';
7
- export { FloatingComposer } from './comments/floating-composer.mjs';
8
- export { useCreateThread } from './comments/comment-plugin-provider.mjs';
9
8
 
10
9
  detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
11
10
  //# sourceMappingURL=index.mjs.map
@@ -1 +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 { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\n"],"names":[],"mappings":";;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
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 {\n FloatingComposer,\n OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { ThreadPanelProps } from \"./comments/ThreadPanel\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
@@ -1,89 +1,17 @@
1
1
  'use strict';
2
2
 
3
- var React = require('react');
4
3
  var threadMarkNode = require('./comments/thread-mark-node.js');
5
- var avatar = require('./mentions/avatar.js');
6
- var mentionComponent = require('./mentions/mention-component.js');
7
4
  var mentionNode = require('./mentions/mention-node.js');
8
- var suggestions = require('./mentions/suggestions.js');
9
- var user = require('./mentions/user.js');
10
5
 
11
- function _interopNamespaceDefault(e) {
12
- var n = Object.create(null);
13
- if (e) {
14
- Object.keys(e).forEach(function (k) {
15
- if (k !== 'default') {
16
- var d = Object.getOwnPropertyDescriptor(e, k);
17
- Object.defineProperty(n, k, d.get ? d : {
18
- enumerable: true,
19
- get: function () { return e[k]; }
20
- });
21
- }
22
- });
23
- }
24
- n.default = e;
25
- return Object.freeze(n);
26
- }
27
-
28
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
29
-
30
- let liveblocksConfig = null;
31
- const MENTION_CHARACTER = "@";
32
- const defaultComponents = {
33
- Mention: ({ userId }) => {
34
- return /* @__PURE__ */ React__namespace.createElement(mentionComponent.Mention, {
35
- className: "lb-lexical-mention"
36
- }, MENTION_CHARACTER, /* @__PURE__ */ React__namespace.createElement(user.User, {
37
- userId
38
- }));
39
- },
40
- MentionSuggestions: ({ userIds }) => {
41
- return /* @__PURE__ */ React__namespace.createElement(suggestions.List, {
42
- className: "lb-lexical-suggestions-list"
43
- }, userIds.map((userId) => /* @__PURE__ */ React__namespace.createElement(suggestions.Item, {
44
- key: userId,
45
- value: userId,
46
- className: "lb-lexical-suggestions-list-item"
47
- }, /* @__PURE__ */ React__namespace.createElement(avatar.Avatar, {
48
- userId,
49
- className: "lb-lexical-mention-suggestion-avatar"
50
- }), /* @__PURE__ */ React__namespace.createElement(user.User, {
51
- userId,
52
- className: "lb-lexical-mention-suggestion-user"
53
- }))));
54
- }
55
- };
56
- function liveblocksLexicalConfig(editorConfig, config = {}) {
57
- const { comments = true, components = {} } = config;
6
+ function liveblocksConfig(editorConfig) {
58
7
  const nodes = [...editorConfig.nodes ?? []];
59
- const Mention2 = components.Mention ?? defaultComponents.Mention;
60
- const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
61
- const mentionFactory = mentionNode.createMentionNodeFactory(Mention2);
62
- nodes.push(threadMarkNode.ThreadMarkNode, mentionFactory.MentionNode);
63
- liveblocksConfig = {
64
- comments,
65
- mentions: {
66
- factory: mentionFactory,
67
- components: {
68
- MentionSuggestions
69
- }
70
- }
71
- };
8
+ nodes.push(threadMarkNode.ThreadMarkNode, mentionNode.MentionNode);
72
9
  return {
73
10
  ...editorConfig,
74
11
  nodes,
75
12
  editorState: null
76
13
  };
77
14
  }
78
- function getLiveblocksLexicalConfig() {
79
- if (liveblocksConfig === null) {
80
- throw new Error("Liveblocks config is not initialized.");
81
- }
82
- return {
83
- ...liveblocksConfig
84
- };
85
- }
86
15
 
87
- exports.getLiveblocksLexicalConfig = getLiveblocksLexicalConfig;
88
- exports.liveblocksLexicalConfig = liveblocksLexicalConfig;
16
+ exports.liveblocksConfig = liveblocksConfig;
89
17
  //# sourceMappingURL=liveblocks-config.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport { Avatar } from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport { User } from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n /**\n * The mention's user ID.\n */\n userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n /**\n * The list of suggested user IDs.\n */\n userIds: string[];\n}\n\ninterface EditorComponents {\n Mention: ComponentType<MentionProps>;\n MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n /**\n * Whether comments are enabled. Defaults to true.\n */\n comments?: boolean;\n /**\n * The components displayed within the editor.\n */\n components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n Mention: ({ userId }) => {\n return (\n <Mention className=\"lb-lexical-mention\">\n {MENTION_CHARACTER}\n <User userId={userId} />\n </Mention>\n );\n },\n MentionSuggestions: ({ userIds }) => {\n return (\n <Suggestions.List className=\"lb-lexical-suggestions-list\">\n {userIds.map((userId) => (\n <Suggestions.Item\n key={userId}\n value={userId}\n className=\"lb-lexical-suggestions-list-item\"\n >\n <Avatar\n userId={userId}\n className=\"lb-lexical-mention-suggestion-avatar\"\n />\n <User\n userId={userId}\n className=\"lb-lexical-mention-suggestion-user\"\n />\n </Suggestions.Item>\n ))}\n </Suggestions.List>\n );\n },\n};\n\nexport function liveblocksLexicalConfig(\n editorConfig: InitialConfigType,\n config: LiveblocksConfig = {}\n) {\n const { comments = true, components = {} } = config;\n\n const nodes = [...(editorConfig.nodes ?? [])];\n\n const Mention = components.Mention ?? defaultComponents.Mention;\n const MentionSuggestions =\n components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n const mentionFactory = createMentionNodeFactory(Mention);\n\n nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n liveblocksConfig = {\n comments,\n mentions: {\n factory: mentionFactory,\n components: {\n MentionSuggestions,\n },\n },\n };\n\n return {\n ...editorConfig,\n nodes,\n editorState: null, // explicitly null because CollabProvider requires it\n };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n if (liveblocksConfig === null) {\n throw new Error(\"Liveblocks config is not initialized.\");\n }\n return {\n ...liveblocksConfig,\n };\n}\n"],"names":["React","Mention","User","Suggestions.List","Suggestions.Item","Avatar","createMentionNodeFactory","ThreadMarkNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACGA,gBAAA,CAAA,aAAA,CAAAC,wBAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACAD,gBAAA,CAAA,aAAA,CAAAE,SAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAAF,gBAAA,CAAA,aAAA,CAACG,gBAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAH,gBAAA,CAAA,aAAA,CAACI,gBAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAETJ,gBAAA,CAAA,aAAA,CAAAK,aAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACCL,gBAAA,CAAA,aAAA,CAAAE,SAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMD,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiBK,qCAAyBL,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAKM,6BAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,CAAA;AACF;;;;;"}
1
+ {"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\nexport function liveblocksConfig(\n editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n const nodes = [...(editorConfig.nodes ?? [])];\n\n nodes.push(ThreadMarkNode, MentionNode);\n\n return {\n ...editorConfig,\n nodes,\n editorState: null, // explicitly null because CollabProvider requires it\n };\n}\n"],"names":["ThreadMarkNode","MentionNode"],"mappings":";;;;;AAKO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAKA,+BAAgBC,uBAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}
@@ -1,67 +1,15 @@
1
- import * as React from 'react';
2
1
  import { ThreadMarkNode } from './comments/thread-mark-node.mjs';
3
- import { Avatar } from './mentions/avatar.mjs';
4
- import { Mention } from './mentions/mention-component.mjs';
5
- import { createMentionNodeFactory } from './mentions/mention-node.mjs';
6
- import { List, Item } from './mentions/suggestions.mjs';
7
- import { User } from './mentions/user.mjs';
2
+ import { MentionNode } from './mentions/mention-node.mjs';
8
3
 
9
- let liveblocksConfig = null;
10
- const MENTION_CHARACTER = "@";
11
- const defaultComponents = {
12
- Mention: ({ userId }) => {
13
- return /* @__PURE__ */ React.createElement(Mention, {
14
- className: "lb-lexical-mention"
15
- }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
16
- userId
17
- }));
18
- },
19
- MentionSuggestions: ({ userIds }) => {
20
- return /* @__PURE__ */ React.createElement(List, {
21
- className: "lb-lexical-suggestions-list"
22
- }, userIds.map((userId) => /* @__PURE__ */ React.createElement(Item, {
23
- key: userId,
24
- value: userId,
25
- className: "lb-lexical-suggestions-list-item"
26
- }, /* @__PURE__ */ React.createElement(Avatar, {
27
- userId,
28
- className: "lb-lexical-mention-suggestion-avatar"
29
- }), /* @__PURE__ */ React.createElement(User, {
30
- userId,
31
- className: "lb-lexical-mention-suggestion-user"
32
- }))));
33
- }
34
- };
35
- function liveblocksLexicalConfig(editorConfig, config = {}) {
36
- const { comments = true, components = {} } = config;
4
+ function liveblocksConfig(editorConfig) {
37
5
  const nodes = [...editorConfig.nodes ?? []];
38
- const Mention2 = components.Mention ?? defaultComponents.Mention;
39
- const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
40
- const mentionFactory = createMentionNodeFactory(Mention2);
41
- nodes.push(ThreadMarkNode, mentionFactory.MentionNode);
42
- liveblocksConfig = {
43
- comments,
44
- mentions: {
45
- factory: mentionFactory,
46
- components: {
47
- MentionSuggestions
48
- }
49
- }
50
- };
6
+ nodes.push(ThreadMarkNode, MentionNode);
51
7
  return {
52
8
  ...editorConfig,
53
9
  nodes,
54
10
  editorState: null
55
11
  };
56
12
  }
57
- function getLiveblocksLexicalConfig() {
58
- if (liveblocksConfig === null) {
59
- throw new Error("Liveblocks config is not initialized.");
60
- }
61
- return {
62
- ...liveblocksConfig
63
- };
64
- }
65
13
 
66
- export { getLiveblocksLexicalConfig, liveblocksLexicalConfig };
14
+ export { liveblocksConfig };
67
15
  //# sourceMappingURL=liveblocks-config.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport { Avatar } from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport { User } from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n /**\n * The mention's user ID.\n */\n userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n /**\n * The list of suggested user IDs.\n */\n userIds: string[];\n}\n\ninterface EditorComponents {\n Mention: ComponentType<MentionProps>;\n MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n /**\n * Whether comments are enabled. Defaults to true.\n */\n comments?: boolean;\n /**\n * The components displayed within the editor.\n */\n components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n Mention: ({ userId }) => {\n return (\n <Mention className=\"lb-lexical-mention\">\n {MENTION_CHARACTER}\n <User userId={userId} />\n </Mention>\n );\n },\n MentionSuggestions: ({ userIds }) => {\n return (\n <Suggestions.List className=\"lb-lexical-suggestions-list\">\n {userIds.map((userId) => (\n <Suggestions.Item\n key={userId}\n value={userId}\n className=\"lb-lexical-suggestions-list-item\"\n >\n <Avatar\n userId={userId}\n className=\"lb-lexical-mention-suggestion-avatar\"\n />\n <User\n userId={userId}\n className=\"lb-lexical-mention-suggestion-user\"\n />\n </Suggestions.Item>\n ))}\n </Suggestions.List>\n );\n },\n};\n\nexport function liveblocksLexicalConfig(\n editorConfig: InitialConfigType,\n config: LiveblocksConfig = {}\n) {\n const { comments = true, components = {} } = config;\n\n const nodes = [...(editorConfig.nodes ?? [])];\n\n const Mention = components.Mention ?? defaultComponents.Mention;\n const MentionSuggestions =\n components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n const mentionFactory = createMentionNodeFactory(Mention);\n\n nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n liveblocksConfig = {\n comments,\n mentions: {\n factory: mentionFactory,\n components: {\n MentionSuggestions,\n },\n },\n };\n\n return {\n ...editorConfig,\n nodes,\n editorState: null, // explicitly null because CollabProvider requires it\n };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n if (liveblocksConfig === null) {\n throw new Error(\"Liveblocks config is not initialized.\");\n }\n return {\n ...liveblocksConfig,\n };\n}\n"],"names":["Suggestions.List","Suggestions.Item","Mention"],"mappings":";;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAACA,IAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,KAAA,CAAA,aAAA,CAACC,IAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAET,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMC,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiB,yBAAyBA,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAK,cAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,CAAA;AACF;;;;"}
1
+ {"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\nexport function liveblocksConfig(\n editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n const nodes = [...(editorConfig.nodes ?? [])];\n\n nodes.push(ThreadMarkNode, MentionNode);\n\n return {\n ...editorConfig,\n nodes,\n editorState: null, // explicitly null because CollabProvider requires it\n };\n}\n"],"names":[],"mappings":";;;AAKO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAK,gBAAgB,WAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}
@@ -1,79 +1,75 @@
1
1
  'use strict';
2
2
 
3
+ var LexicalCollaborationContext = require('@lexical/react/LexicalCollaborationContext');
3
4
  var LexicalCollaborationPlugin = require('@lexical/react/LexicalCollaborationPlugin');
4
5
  var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
5
6
  var core = require('@liveblocks/core');
6
7
  var react = require('@liveblocks/react');
7
- var LiveblocksProvider = require('@liveblocks/yjs');
8
+ var yjs$1 = require('@liveblocks/yjs');
8
9
  var React = require('react');
9
10
  var yjs = require('yjs');
10
11
  var commentPluginProvider = require('./comments/comment-plugin-provider.js');
11
- var liveblocksConfig = require('./liveblocks-config.js');
12
12
  var mentionPlugin = require('./mentions/mention-plugin.js');
13
13
 
14
- const LiveblocksLexicalConfigContext = React.createContext(null);
15
- const LiveblocksPluginProvider = ({
14
+ const providersMap = /* @__PURE__ */ new Map();
15
+ const LiveblocksPlugin = ({
16
16
  children
17
17
  }) => {
18
18
  const client = react.useClient();
19
19
  const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
20
- const { useSelf, useRoom } = react.useRoomContextBundle();
21
20
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
22
- const room = useRoom();
23
- const [provider, setProvider] = React.useState();
24
- const doc = React.useMemo(() => new yjs.Doc(), []);
25
- React.useEffect(() => {
26
- const _provider = new LiveblocksProvider(room, doc);
27
- setProvider(_provider);
28
- return () => {
29
- _provider.destroy();
30
- setProvider(void 0);
31
- };
32
- }, [room, doc]);
21
+ const room = react.useRoom();
22
+ const collabContext = React.useContext(LexicalCollaborationContext.CollaborationContext);
23
+ const previousRoomIdRef = React.useRef(null);
33
24
  React.useEffect(() => {
34
25
  if (process.env.NODE_ENV !== "production") {
35
26
  if (!editor.getEditorState().isEmpty()) {
36
27
  console.warn(
37
- "Warning: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null."
28
+ "Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null."
38
29
  );
39
30
  }
40
31
  }
41
- room[core.kInternal].reportTextEditor("lexical", "root");
42
32
  }, []);
43
- const info = useSelf((me) => me.info);
44
- const username = info?.name;
33
+ React.useEffect(() => {
34
+ room[core.kInternal].reportTextEditor("lexical", "root");
35
+ }, [room]);
36
+ const info = react.useSelf((me) => me.info);
37
+ const username = info?.name || "";
45
38
  const cursorcolor = info?.color;
46
39
  const providerFactory = React.useCallback(
47
40
  (id, yjsDocMap) => {
48
- yjsDocMap.set(id, doc);
49
- return provider;
41
+ if (previousRoomIdRef.current !== null && previousRoomIdRef.current !== id) {
42
+ const previousProvider = providersMap.get(id);
43
+ if (previousProvider !== void 0) {
44
+ previousProvider.destroy();
45
+ }
46
+ }
47
+ let doc = yjsDocMap.get(id);
48
+ if (doc === void 0) {
49
+ doc = new yjs.Doc();
50
+ const provider = new yjs$1.LiveblocksYjsProvider(room, doc);
51
+ yjsDocMap.set(id, doc);
52
+ providersMap.set(id, provider);
53
+ }
54
+ return core.nn(
55
+ providersMap.get(id),
56
+ "Internal error. Should never happen"
57
+ );
50
58
  },
51
- [provider, doc]
59
+ [room]
52
60
  );
53
- const configRef = React.useRef(null);
54
- if (configRef.current === null) {
55
- configRef.current = liveblocksConfig.getLiveblocksLexicalConfig();
56
- }
57
- return /* @__PURE__ */ React.createElement(LiveblocksLexicalConfigContext.Provider, {
58
- value: configRef.current
59
- }, provider && /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
61
+ React.useEffect(() => {
62
+ collabContext.name = username || "";
63
+ }, [collabContext, username]);
64
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
65
+ key: room.id,
66
+ id: room.id,
60
67
  providerFactory,
61
- id: "liveblocks-document",
62
68
  username,
63
69
  cursorColor: cursorcolor,
64
70
  shouldBootstrap: true
65
- }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(mentionPlugin.default, null), configRef.current.comments && /* @__PURE__ */ React.createElement(commentPluginProvider.CommentPluginProvider, null, children));
71
+ }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(mentionPlugin.MentionPlugin, null), /* @__PURE__ */ React.createElement(commentPluginProvider.CommentPluginProvider, null, children));
66
72
  };
67
- function useLiveblocksLexicalConfigContext() {
68
- const config = React.useContext(LiveblocksLexicalConfigContext);
69
- if (config === null) {
70
- throw new Error(
71
- "useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider"
72
- );
73
- }
74
- return config;
75
- }
76
73
 
77
- exports.LiveblocksPluginProvider = LiveblocksPluginProvider;
78
- exports.useLiveblocksLexicalConfigContext = useLiveblocksLexicalConfigContext;
74
+ exports.LiveblocksPlugin = LiveblocksPlugin;
79
75
  //# sourceMappingURL=liveblocks-plugin-provider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport type {\n BaseUserMeta,\n Json,\n JsonObject,\n LsonObject,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useClient, useRoomContextBundle } from \"@liveblocks/react\";\nimport LiveblocksProvider from \"@liveblocks/yjs\";\nimport type { ComponentType } from \"react\";\nimport React, {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport type { MentionSuggestionsProps } from \"./liveblocks-config\";\nimport { getLiveblocksLexicalConfig } from \"./liveblocks-config\";\nimport type { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport MentionPlugin from \"./mentions/mention-plugin\";\n\nexport type LiveblocksPluginProviderProps = {\n // TODO: Move these configuration options (if applicable and necessary) to the `liveblocksLexicalConfig` function to have all configuration in one place\n // /**\n // * Optionally override user information. If not, user[\"info\"] from auth will be used.\n // */\n // userInfo?: {\n // name: string;\n // color?: string;\n // };\n // /**\n // * Whether or not the user can edit the document before it has been synced\n // * default: true\n // */\n // allowEditsBeforeSync?: boolean;\n\n // /**\n // * Modify the state with this function to set the initial state.\n // * Ex. $createTextNode('initial text content');\n // *\n // * @param editor\n // * @returns void\n // */\n // initialEditorState?: (editor: LexicalEditor) => void;\n\n children?: React.ReactNode;\n};\n\nexport interface LiveblocksLexicalInternalConfig {\n comments: boolean;\n mentions: {\n factory: ReturnType<typeof createMentionNodeFactory>;\n components: {\n MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n };\n };\n}\n\nconst LiveblocksLexicalConfigContext =\n createContext<LiveblocksLexicalInternalConfig | null>(null);\n\nexport const LiveblocksPluginProvider = ({\n // userInfo = undefined,\n // allowEditsBeforeSync = true,\n // initialEditorState = undefined,\n children,\n}: LiveblocksPluginProviderProps): JSX.Element => {\n const client = useClient();\n const hasResolveMentionSuggestions =\n client[kInternal].resolveMentionSuggestions !== undefined;\n const { useSelf, useRoom } = useRoomContextBundle();\n const [editor] = useLexicalComposerContext();\n const room = useRoom();\n\n const [provider, setProvider] = useState<\n LiveblocksProvider<JsonObject, LsonObject, BaseUserMeta, Json> | undefined\n >();\n\n const doc = useMemo(() => new Doc(), []);\n\n useEffect(() => {\n const _provider = new LiveblocksProvider(room, doc);\n setProvider(_provider);\n return () => {\n _provider.destroy();\n setProvider(undefined);\n };\n }, [room, doc]);\n\n // Warn users if initialConfig.editorState, set on the composer, is not null\n useEffect(() => {\n // only in dev mode\n if (process.env.NODE_ENV !== \"production\") {\n // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n if (!editor.getEditorState().isEmpty()) {\n console.warn(\n \"Warning: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null.\"\n );\n }\n }\n\n // Report that this is lexical and root is the rootKey\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n room[kInternal].reportTextEditor(\"lexical\", \"root\");\n\n // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Get user info or allow override from props\n const info = useSelf((me) => me.info);\n const username = info?.name;\n const cursorcolor = info?.color as string | undefined;\n\n // const [synced, setSynced] = useState(false);\n\n // useEffect(() => {\n // if (!provider) {\n // return;\n // }\n // provider.on(\"sync\", setSynced);\n // return () => {\n // provider.off(\"sync\", setSynced);\n // };\n // }, [provider]);\n\n // // Disable the editor before sync\n // useEffect(() => {\n // if (!allowEditsBeforeSync) {\n // editor.setEditable(synced);\n // }\n // }, [synced, editor, allowEditsBeforeSync]);\n\n // Create the provider factory\n const providerFactory = useCallback(\n (id: string, yjsDocMap: Map<string, Doc>) => {\n yjsDocMap.set(id, doc);\n return provider as Provider;\n },\n [provider, doc]\n );\n\n const configRef = useRef<LiveblocksLexicalInternalConfig | null>(null);\n if (configRef.current === null) {\n configRef.current = getLiveblocksLexicalConfig();\n }\n\n return (\n <LiveblocksLexicalConfigContext.Provider value={configRef.current}>\n {provider && (\n <CollaborationPlugin\n providerFactory={providerFactory}\n // initialEditorState={initialEditorState}\n id={\"liveblocks-document\"}\n username={username}\n cursorColor={cursorcolor}\n shouldBootstrap={true}\n />\n )}\n\n {hasResolveMentionSuggestions && <MentionPlugin />}\n\n {configRef.current.comments && (\n <CommentPluginProvider>{children}</CommentPluginProvider>\n )}\n </LiveblocksLexicalConfigContext.Provider>\n );\n};\n\nexport function useLiveblocksLexicalConfigContext(): LiveblocksLexicalInternalConfig {\n const config = useContext(LiveblocksLexicalConfigContext);\n if (config === null) {\n throw new Error(\n \"useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider\"\n );\n }\n return config;\n}\n"],"names":["createContext","useClient","kInternal","useRoomContextBundle","useLexicalComposerContext","useState","useMemo","Doc","useEffect","useCallback","useRef","getLiveblocksLexicalConfig","CollaborationPlugin","MentionPlugin","CommentPluginProvider","useContext"],"mappings":"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"}
1
+ {"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useContext, useEffect, useRef } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n string,\n LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type LiveblocksPluginProps = {\n children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n children,\n}: LiveblocksPluginProps): JSX.Element => {\n const client = useClient();\n const hasResolveMentionSuggestions =\n client[kInternal].resolveMentionSuggestions !== undefined;\n const [editor] = useLexicalComposerContext();\n const room = useRoom();\n const collabContext = useContext(CollaborationContext);\n const previousRoomIdRef = useRef<string | null>(null);\n\n // Warn users if initialConfig.editorState, set on the composer, is not null\n useEffect(() => {\n // only in dev mode\n if (process.env.NODE_ENV !== \"production\") {\n // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n if (!editor.getEditorState().isEmpty()) {\n console.warn(\n \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n );\n }\n }\n\n // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n // Report that this is lexical and root is the rootKey\n room[kInternal].reportTextEditor(\"lexical\", \"root\");\n }, [room]);\n\n // Get user info or allow override from props\n const info = useSelf((me) => me.info);\n const username = info?.name || \"\"; // use empty string to prevent random name\n const cursorcolor = info?.color as string | undefined;\n\n const providerFactory = useCallback(\n (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n // Destroy previously used provider to avoid memory leaks\n // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n if (\n previousRoomIdRef.current !== null &&\n previousRoomIdRef.current !== id\n ) {\n const previousProvider = providersMap.get(id);\n if (previousProvider !== undefined) {\n previousProvider.destroy();\n }\n }\n\n let doc = yjsDocMap.get(id);\n\n if (doc === undefined) {\n doc = new Doc();\n const provider = new LiveblocksYjsProvider(room, doc);\n yjsDocMap.set(id, doc);\n providersMap.set(id, provider);\n }\n\n return nn(\n providersMap.get(id),\n \"Internal error. Should never happen\"\n ) as Provider;\n },\n [room]\n );\n\n useEffect(() => {\n collabContext.name = username || \"\";\n }, [collabContext, username]);\n\n return (\n <>\n <CollaborationPlugin\n // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n // without implementing `reload` event\n key={room.id}\n id={room.id}\n providerFactory={providerFactory}\n username={username}\n cursorColor={cursorcolor}\n shouldBootstrap={true}\n />\n\n {hasResolveMentionSuggestions && <MentionPlugin />}\n\n <CommentPluginProvider>{children}</CommentPluginProvider>\n </>\n );\n};\n"],"names":["useClient","kInternal","useLexicalComposerContext","useRoom","useContext","CollaborationContext","useRef","useEffect","useSelf","useCallback","Doc","LiveblocksYjsProvider","nn","CollaborationPlugin","MentionPlugin","CommentPluginProvider"],"mappings":"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"}