@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.
- package/dist/classnames.js +8 -0
- package/dist/classnames.js.map +1 -0
- package/dist/classnames.mjs +6 -0
- package/dist/classnames.mjs.map +1 -0
- package/dist/comments/ThreadPanel.js +41 -16
- package/dist/comments/ThreadPanel.js.map +1 -1
- package/dist/comments/ThreadPanel.mjs +43 -18
- package/dist/comments/ThreadPanel.mjs.map +1 -1
- package/dist/comments/comment-plugin-provider.js +18 -106
- package/dist/comments/comment-plugin-provider.js.map +1 -1
- package/dist/comments/comment-plugin-provider.mjs +17 -104
- package/dist/comments/comment-plugin-provider.mjs.map +1 -1
- package/dist/comments/floating-composer.js +226 -15
- package/dist/comments/floating-composer.js.map +1 -1
- package/dist/comments/floating-composer.mjs +224 -15
- package/dist/comments/floating-composer.mjs.map +1 -1
- package/dist/create-dom-range.js +63 -0
- package/dist/create-dom-range.js.map +1 -0
- package/dist/create-dom-range.mjs +61 -0
- package/dist/create-dom-range.mjs.map +1 -0
- package/dist/create-rects-from-dom-range.js +36 -0
- package/dist/create-rects-from-dom-range.js.map +1 -0
- package/dist/create-rects-from-dom-range.mjs +34 -0
- package/dist/create-rects-from-dom-range.mjs.map +1 -0
- package/dist/index.d.mts +30 -40
- package/dist/index.d.ts +30 -40
- package/dist/index.js +5 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -4
- package/dist/index.mjs.map +1 -1
- package/dist/liveblocks-config.js +3 -75
- package/dist/liveblocks-config.js.map +1 -1
- package/dist/liveblocks-config.mjs +4 -56
- package/dist/liveblocks-config.mjs.map +1 -1
- package/dist/liveblocks-plugin-provider.js +39 -43
- package/dist/liveblocks-plugin-provider.js.map +1 -1
- package/dist/liveblocks-plugin-provider.mjs +41 -44
- package/dist/liveblocks-plugin-provider.mjs.map +1 -1
- package/dist/mentions/avatar.js +10 -6
- package/dist/mentions/avatar.js.map +1 -1
- package/dist/mentions/avatar.mjs +10 -6
- package/dist/mentions/avatar.mjs.map +1 -1
- package/dist/mentions/mention-component.js +5 -18
- package/dist/mentions/mention-component.js.map +1 -1
- package/dist/mentions/mention-component.mjs +7 -19
- package/dist/mentions/mention-component.mjs.map +1 -1
- package/dist/mentions/mention-node.js +76 -80
- package/dist/mentions/mention-node.js.map +1 -1
- package/dist/mentions/mention-node.mjs +75 -81
- package/dist/mentions/mention-node.mjs.map +1 -1
- package/dist/mentions/mention-plugin.js +102 -90
- package/dist/mentions/mention-plugin.js.map +1 -1
- package/dist/mentions/mention-plugin.mjs +87 -71
- package/dist/mentions/mention-plugin.mjs.map +1 -1
- package/dist/mentions/suggestions.js +34 -6
- package/dist/mentions/suggestions.js.map +1 -1
- package/dist/mentions/suggestions.mjs +28 -3
- package/dist/mentions/suggestions.mjs.map +1 -1
- package/dist/mentions/user.js +8 -5
- package/dist/mentions/user.js.map +1 -1
- package/dist/mentions/user.mjs +8 -5
- package/dist/mentions/user.mjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/dist/version.mjs +1 -1
- package/dist/version.mjs.map +1 -1
- package/package.json +13 -13
- package/src/styles/constants.css +1 -0
- package/src/styles/index.css +158 -5
- package/src/styles/utils.css +6 -0
- package/styles.css +1 -1
- package/styles.css.map +1 -1
- package/dist/active-selection.js +0 -143
- package/dist/active-selection.js.map +0 -1
- package/dist/active-selection.mjs +0 -123
- package/dist/active-selection.mjs.map +0 -1
- package/dist/floating-selection-container.js +0 -157
- package/dist/floating-selection-container.js.map +0 -1
- package/dist/floating-selection-container.mjs +0 -155
- package/dist/floating-selection-container.mjs.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,61 +1,51 @@
|
|
|
1
|
-
import
|
|
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
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
children?: React.ReactNode;
|
|
8
|
+
declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
|
|
9
|
+
declare type ThreadMetadata = {
|
|
10
|
+
resolved?: boolean;
|
|
11
11
|
};
|
|
12
|
-
declare
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
*
|
|
20
|
+
* Override the component's components.
|
|
33
21
|
*/
|
|
34
|
-
|
|
22
|
+
components?: Partial<ThreadPanelComponents>;
|
|
35
23
|
/**
|
|
36
|
-
*
|
|
24
|
+
* Override the component's strings.
|
|
37
25
|
*/
|
|
38
|
-
|
|
26
|
+
overrides?: Partial<GlobalOverrides & ThreadPanelOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
|
|
39
27
|
}
|
|
40
|
-
declare
|
|
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
|
|
52
|
-
|
|
53
|
-
declare type ThreadMetadata = {
|
|
54
|
-
resolved?: boolean;
|
|
41
|
+
declare type LiveblocksPluginProps = {
|
|
42
|
+
children?: React.ReactNode;
|
|
55
43
|
};
|
|
56
|
-
declare
|
|
57
|
-
declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
|
|
44
|
+
declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;
|
|
58
45
|
|
|
59
|
-
declare function
|
|
46
|
+
declare function Mention({ nodeKey, children, }: {
|
|
47
|
+
nodeKey: NodeKey;
|
|
48
|
+
children: ReactNode;
|
|
49
|
+
}): React.JSX.Element;
|
|
60
50
|
|
|
61
|
-
export { FloatingComposer,
|
|
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.
|
|
16
|
-
exports.
|
|
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 {
|
|
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 {
|
|
5
|
-
export {
|
|
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
|
package/dist/index.mjs.map
CHANGED
|
@@ -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 {
|
|
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
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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 {
|
|
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
|
-
|
|
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
|
-
|
|
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 {
|
|
14
|
+
export { liveblocksConfig };
|
|
67
15
|
//# sourceMappingURL=liveblocks-config.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.
|
|
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
|
|
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
|
|
15
|
-
const
|
|
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
|
|
24
|
-
const
|
|
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:
|
|
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
|
-
|
|
44
|
-
|
|
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
|
-
|
|
49
|
-
|
|
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
|
-
[
|
|
59
|
+
[room]
|
|
52
60
|
);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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.
|
|
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.
|
|
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 {
|
|
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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"}
|