@liveblocks/react-lexical 2.18.3 → 2.18.4-uns2
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.mjs → classnames.cjs} +4 -2
- package/dist/{classnames.mjs.map → classnames.cjs.map} +1 -1
- package/dist/classnames.js +1 -3
- package/dist/classnames.js.map +1 -1
- package/dist/comments/{anchored-threads.mjs → anchored-threads.cjs} +44 -41
- package/dist/comments/{anchored-threads.mjs.map → anchored-threads.cjs.map} +1 -1
- package/dist/comments/anchored-threads.js +40 -43
- package/dist/comments/anchored-threads.js.map +1 -1
- package/dist/comments/{comment-plugin-provider.mjs → comment-plugin-provider.cjs} +62 -55
- package/dist/comments/{comment-plugin-provider.mjs.map → comment-plugin-provider.cjs.map} +1 -1
- package/dist/comments/comment-plugin-provider.js +54 -61
- package/dist/comments/comment-plugin-provider.js.map +1 -1
- package/dist/comments/{floating-composer.mjs → floating-composer.cjs} +68 -64
- package/dist/comments/{floating-composer.mjs.map → floating-composer.cjs.map} +1 -1
- package/dist/comments/floating-composer.js +63 -67
- package/dist/comments/floating-composer.js.map +1 -1
- package/dist/comments/{floating-threads.mjs → floating-threads.cjs} +51 -48
- package/dist/comments/{floating-threads.mjs.map → floating-threads.cjs.map} +1 -1
- package/dist/comments/floating-threads.js +47 -50
- package/dist/comments/floating-threads.js.map +1 -1
- package/dist/comments/get-thread-mark-ids.cjs +23 -0
- package/dist/comments/{get-thread-mark-ids.mjs.map → get-thread-mark-ids.cjs.map} +1 -1
- package/dist/comments/get-thread-mark-ids.js +6 -8
- package/dist/comments/get-thread-mark-ids.js.map +1 -1
- package/dist/comments/{thread-mark-node.mjs → thread-mark-node.cjs} +10 -6
- package/dist/comments/{thread-mark-node.mjs.map → thread-mark-node.cjs.map} +1 -1
- package/dist/comments/thread-mark-node.js +5 -9
- package/dist/comments/thread-mark-node.js.map +1 -1
- package/dist/comments/{unwrap-thread-mark-node.mjs → unwrap-thread-mark-node.cjs} +4 -2
- package/dist/comments/unwrap-thread-mark-node.cjs.map +1 -0
- package/dist/comments/unwrap-thread-mark-node.js +1 -3
- package/dist/comments/unwrap-thread-mark-node.js.map +1 -1
- package/dist/comments/{wrap-selection-in-thread-mark-node.mjs → wrap-selection-in-thread-mark-node.cjs} +12 -10
- package/dist/comments/{wrap-selection-in-thread-mark-node.mjs.map → wrap-selection-in-thread-mark-node.cjs.map} +1 -1
- package/dist/comments/wrap-selection-in-thread-mark-node.js +9 -11
- package/dist/comments/wrap-selection-in-thread-mark-node.js.map +1 -1
- package/dist/{create-dom-range.mjs → create-dom-range.cjs} +7 -5
- package/dist/{create-dom-range.mjs.map → create-dom-range.cjs.map} +1 -1
- package/dist/create-dom-range.js +4 -6
- package/dist/create-dom-range.js.map +1 -1
- package/dist/{create-rects-from-dom-range.mjs → create-rects-from-dom-range.cjs} +4 -2
- package/dist/{create-rects-from-dom-range.mjs.map → create-rects-from-dom-range.cjs.map} +1 -1
- package/dist/create-rects-from-dom-range.js +1 -3
- package/dist/create-rects-from-dom-range.js.map +1 -1
- package/dist/index.cjs +33 -0
- package/dist/{index.mjs.map → index.cjs.map} +1 -1
- package/dist/index.js +14 -31
- package/dist/index.js.map +1 -1
- package/dist/{is-block-node-active.mjs → is-block-node-active.cjs} +12 -10
- package/dist/{is-block-node-active.mjs.map → is-block-node-active.cjs.map} +1 -1
- package/dist/is-block-node-active.js +9 -11
- package/dist/is-block-node-active.js.map +1 -1
- package/dist/is-command-registered.cjs +11 -0
- package/dist/{is-command-registered.mjs.map → is-command-registered.cjs.map} +1 -1
- package/dist/is-command-registered.js +3 -5
- package/dist/is-command-registered.js.map +1 -1
- package/dist/is-text-format-active.cjs +16 -0
- package/dist/{is-text-format-active.mjs.map → is-text-format-active.cjs.map} +1 -1
- package/dist/is-text-format-active.js +4 -6
- package/dist/is-text-format-active.js.map +1 -1
- package/dist/liveblocks-config.cjs +17 -0
- package/dist/{liveblocks-config.mjs.map → liveblocks-config.cjs.map} +1 -1
- package/dist/liveblocks-config.js +4 -6
- package/dist/liveblocks-config.js.map +1 -1
- package/dist/liveblocks-plugin-provider.cjs +151 -0
- package/dist/liveblocks-plugin-provider.cjs.map +1 -0
- package/dist/liveblocks-plugin-provider.js +43 -47
- package/dist/liveblocks-plugin-provider.js.map +1 -1
- package/dist/mentions/{avatar.mjs → avatar.cjs} +16 -14
- package/dist/mentions/avatar.cjs.map +1 -0
- package/dist/mentions/avatar.js +13 -15
- package/dist/mentions/avatar.js.map +1 -1
- package/dist/mentions/mention-component.cjs +51 -0
- package/dist/mentions/{mention-component.mjs.map → mention-component.cjs.map} +1 -1
- package/dist/mentions/mention-component.js +14 -16
- package/dist/mentions/mention-component.js.map +1 -1
- package/dist/mentions/{mention-node.mjs → mention-node.cjs} +16 -12
- package/dist/mentions/{mention-node.mjs.map → mention-node.cjs.map} +1 -1
- package/dist/mentions/mention-node.js +11 -15
- package/dist/mentions/mention-node.js.map +1 -1
- package/dist/mentions/{mention-plugin.mjs → mention-plugin.cjs} +81 -78
- package/dist/mentions/{mention-plugin.mjs.map → mention-plugin.cjs.map} +1 -1
- package/dist/mentions/mention-plugin.js +77 -80
- package/dist/mentions/mention-plugin.js.map +1 -1
- package/dist/mentions/{suggestions.mjs → suggestions.cjs} +43 -37
- package/dist/mentions/{suggestions.mjs.map → suggestions.cjs.map} +1 -1
- package/dist/mentions/suggestions.js +36 -42
- package/dist/mentions/suggestions.js.map +1 -1
- package/dist/mentions/user.cjs +26 -0
- package/dist/mentions/{user.mjs.map → user.cjs.map} +1 -1
- package/dist/mentions/user.js +11 -13
- package/dist/mentions/user.js.map +1 -1
- package/dist/toolbar/{floating-toolbar.mjs → floating-toolbar.cjs} +73 -70
- package/dist/toolbar/{floating-toolbar.mjs.map → floating-toolbar.cjs.map} +1 -1
- package/dist/toolbar/floating-toolbar.js +69 -72
- package/dist/toolbar/floating-toolbar.js.map +1 -1
- package/dist/toolbar/shared.cjs +36 -0
- package/dist/toolbar/{shared.mjs.map → shared.cjs.map} +1 -1
- package/dist/toolbar/shared.js +12 -15
- package/dist/toolbar/shared.js.map +1 -1
- package/dist/toolbar/toolbar.cjs +433 -0
- package/dist/toolbar/{toolbar.mjs.map → toolbar.cjs.map} +1 -1
- package/dist/toolbar/toolbar.js +131 -156
- package/dist/toolbar/toolbar.js.map +1 -1
- package/dist/use-root-element.cjs +21 -0
- package/dist/use-root-element.cjs.map +1 -0
- package/dist/use-root-element.js +7 -9
- package/dist/use-root-element.js.map +1 -1
- package/dist/version-history/{history-version-preview.mjs → history-version-preview.cjs} +52 -50
- package/dist/version-history/{history-version-preview.mjs.map → history-version-preview.cjs.map} +1 -1
- package/dist/version-history/history-version-preview.js +49 -51
- package/dist/version-history/history-version-preview.js.map +1 -1
- package/dist/version.cjs +10 -0
- package/dist/{version.mjs.map → version.cjs.map} +1 -1
- package/dist/version.js +3 -7
- package/dist/version.js.map +1 -1
- package/package.json +18 -17
- package/styles.css.d.cts +1 -0
- package/dist/comments/get-thread-mark-ids.mjs +0 -21
- package/dist/comments/unwrap-thread-mark-node.mjs.map +0 -1
- package/dist/index.mjs +0 -16
- package/dist/is-command-registered.mjs +0 -9
- package/dist/is-text-format-active.mjs +0 -14
- package/dist/liveblocks-config.mjs +0 -15
- package/dist/liveblocks-plugin-provider.mjs +0 -147
- package/dist/liveblocks-plugin-provider.mjs.map +0 -1
- package/dist/mentions/avatar.mjs.map +0 -1
- package/dist/mentions/mention-component.mjs +0 -49
- package/dist/mentions/user.mjs +0 -24
- package/dist/toolbar/shared.mjs +0 -33
- package/dist/toolbar/toolbar.mjs +0 -408
- package/dist/use-root-element.mjs +0 -19
- package/dist/use-root-element.mjs.map +0 -1
- package/dist/version.mjs +0 -6
- /package/dist/{index.d.mts → index.d.cts} +0 -0
|
@@ -1,23 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
-
import { KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
|
|
4
|
-
import { createContext, forwardRef, useState, useEffect, useRef, useImperativeHandle, useContext } from 'react';
|
|
1
|
+
'use strict';
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
|
|
5
|
+
var lexical = require('lexical');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
const SuggestionsContext = react.createContext(null);
|
|
9
|
+
const OnValueSelectCallbackContext = react.createContext(null);
|
|
10
|
+
const OnResetMatchCallbackContext = react.createContext(
|
|
9
11
|
null
|
|
10
12
|
);
|
|
11
|
-
const HighlightedIndexContext = createContext(null);
|
|
12
|
-
const List = forwardRef(
|
|
13
|
+
const HighlightedIndexContext = react.createContext(null);
|
|
14
|
+
const List = react.forwardRef(
|
|
13
15
|
function(props, forwardedRef) {
|
|
14
16
|
const { children, ...divProps } = props;
|
|
15
|
-
const [editor] = useLexicalComposerContext();
|
|
16
|
-
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
|
17
|
+
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
18
|
+
const [highlightedIndex, setHighlightedIndex] = react.useState(0);
|
|
17
19
|
const values = useSuggestions();
|
|
18
20
|
const onValueSelect = useOnValueSelectCallback();
|
|
19
21
|
const onEscapeKeyDown = useOnResetMatchCallback();
|
|
20
|
-
useEffect(() => {
|
|
22
|
+
react.useEffect(() => {
|
|
21
23
|
function onKeyArrowDown(event) {
|
|
22
24
|
if (values.length === 0)
|
|
23
25
|
return true;
|
|
@@ -30,12 +32,12 @@ const List = forwardRef(
|
|
|
30
32
|
return true;
|
|
31
33
|
}
|
|
32
34
|
return editor.registerCommand(
|
|
33
|
-
KEY_ARROW_DOWN_COMMAND,
|
|
35
|
+
lexical.KEY_ARROW_DOWN_COMMAND,
|
|
34
36
|
onKeyArrowDown,
|
|
35
|
-
COMMAND_PRIORITY_LOW
|
|
37
|
+
lexical.COMMAND_PRIORITY_LOW
|
|
36
38
|
);
|
|
37
39
|
}, [editor, highlightedIndex, values]);
|
|
38
|
-
useEffect(() => {
|
|
40
|
+
react.useEffect(() => {
|
|
39
41
|
function onKeyArrowUp(event) {
|
|
40
42
|
if (values.length === 0)
|
|
41
43
|
return true;
|
|
@@ -48,12 +50,12 @@ const List = forwardRef(
|
|
|
48
50
|
return true;
|
|
49
51
|
}
|
|
50
52
|
return editor.registerCommand(
|
|
51
|
-
KEY_ARROW_UP_COMMAND,
|
|
53
|
+
lexical.KEY_ARROW_UP_COMMAND,
|
|
52
54
|
onKeyArrowUp,
|
|
53
|
-
COMMAND_PRIORITY_LOW
|
|
55
|
+
lexical.COMMAND_PRIORITY_LOW
|
|
54
56
|
);
|
|
55
57
|
}, [editor, highlightedIndex, values]);
|
|
56
|
-
useEffect(() => {
|
|
58
|
+
react.useEffect(() => {
|
|
57
59
|
function onKeyEscape(event) {
|
|
58
60
|
event.preventDefault();
|
|
59
61
|
event.stopImmediatePropagation();
|
|
@@ -61,12 +63,12 @@ const List = forwardRef(
|
|
|
61
63
|
return true;
|
|
62
64
|
}
|
|
63
65
|
return editor.registerCommand(
|
|
64
|
-
KEY_ESCAPE_COMMAND,
|
|
66
|
+
lexical.KEY_ESCAPE_COMMAND,
|
|
65
67
|
onKeyEscape,
|
|
66
|
-
COMMAND_PRIORITY_LOW
|
|
68
|
+
lexical.COMMAND_PRIORITY_LOW
|
|
67
69
|
);
|
|
68
70
|
}, [editor, onEscapeKeyDown]);
|
|
69
|
-
useEffect(() => {
|
|
71
|
+
react.useEffect(() => {
|
|
70
72
|
function onKeyEnter(event) {
|
|
71
73
|
if (values.length === 0)
|
|
72
74
|
return true;
|
|
@@ -78,12 +80,12 @@ const List = forwardRef(
|
|
|
78
80
|
return true;
|
|
79
81
|
}
|
|
80
82
|
return editor.registerCommand(
|
|
81
|
-
KEY_ENTER_COMMAND,
|
|
83
|
+
lexical.KEY_ENTER_COMMAND,
|
|
82
84
|
onKeyEnter,
|
|
83
|
-
COMMAND_PRIORITY_LOW
|
|
85
|
+
lexical.COMMAND_PRIORITY_LOW
|
|
84
86
|
);
|
|
85
87
|
}, [editor, onValueSelect, highlightedIndex, values]);
|
|
86
|
-
useEffect(() => {
|
|
88
|
+
react.useEffect(() => {
|
|
87
89
|
const root = editor.getRootElement();
|
|
88
90
|
if (root === null)
|
|
89
91
|
return;
|
|
@@ -95,9 +97,9 @@ const List = forwardRef(
|
|
|
95
97
|
root.removeAttribute("aria-activedescendant");
|
|
96
98
|
};
|
|
97
99
|
}, [editor, highlightedIndex]);
|
|
98
|
-
return /* @__PURE__ */ jsx(HighlightedIndexContext.Provider, {
|
|
100
|
+
return /* @__PURE__ */ jsxRuntime.jsx(HighlightedIndexContext.Provider, {
|
|
99
101
|
value: [highlightedIndex, setHighlightedIndex],
|
|
100
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
102
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
101
103
|
role: "listbox",
|
|
102
104
|
...divProps,
|
|
103
105
|
ref: forwardedRef,
|
|
@@ -106,19 +108,19 @@ const List = forwardRef(
|
|
|
106
108
|
});
|
|
107
109
|
}
|
|
108
110
|
);
|
|
109
|
-
const Item = forwardRef(
|
|
111
|
+
const Item = react.forwardRef(
|
|
110
112
|
function Item2(props, forwardedRef) {
|
|
111
113
|
const { children, value, onMouseEnter, onClick, ...divProps } = props;
|
|
112
|
-
const divRef = useRef(null);
|
|
114
|
+
const divRef = react.useRef(null);
|
|
113
115
|
const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();
|
|
114
116
|
const suggestions = useSuggestions();
|
|
115
117
|
const onValueSelect = useOnValueSelectCallback();
|
|
116
118
|
const isHighlighted = suggestions[highlightedIndex] === value;
|
|
117
|
-
useImperativeHandle(
|
|
119
|
+
react.useImperativeHandle(
|
|
118
120
|
forwardedRef,
|
|
119
121
|
() => divRef.current
|
|
120
122
|
);
|
|
121
|
-
useEffect(() => {
|
|
123
|
+
react.useEffect(() => {
|
|
122
124
|
if (!isHighlighted)
|
|
123
125
|
return;
|
|
124
126
|
const div = divRef.current;
|
|
@@ -141,7 +143,7 @@ const Item = forwardRef(
|
|
|
141
143
|
return;
|
|
142
144
|
onValueSelect(value);
|
|
143
145
|
}
|
|
144
|
-
return /* @__PURE__ */ jsx("div", {
|
|
146
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
145
147
|
role: "option",
|
|
146
148
|
"data-highlighted": isHighlighted || void 0,
|
|
147
149
|
onMouseEnter: handleMouseEnter,
|
|
@@ -153,7 +155,7 @@ const Item = forwardRef(
|
|
|
153
155
|
}
|
|
154
156
|
);
|
|
155
157
|
function useHighlightedIndex() {
|
|
156
|
-
const context = useContext(HighlightedIndexContext);
|
|
158
|
+
const context = react.useContext(HighlightedIndexContext);
|
|
157
159
|
if (context === null) {
|
|
158
160
|
throw new Error(
|
|
159
161
|
"useHighlightedIndex must be used within a HighlightedIndexProvider"
|
|
@@ -162,26 +164,30 @@ function useHighlightedIndex() {
|
|
|
162
164
|
return context;
|
|
163
165
|
}
|
|
164
166
|
function useSuggestions() {
|
|
165
|
-
const suggestions = useContext(SuggestionsContext);
|
|
167
|
+
const suggestions = react.useContext(SuggestionsContext);
|
|
166
168
|
if (suggestions === null) {
|
|
167
169
|
throw new Error("useSuggestions: SuggestionsContext not found");
|
|
168
170
|
}
|
|
169
171
|
return suggestions;
|
|
170
172
|
}
|
|
171
173
|
function useOnValueSelectCallback() {
|
|
172
|
-
const onValueSelect = useContext(OnValueSelectCallbackContext);
|
|
174
|
+
const onValueSelect = react.useContext(OnValueSelectCallbackContext);
|
|
173
175
|
if (onValueSelect === null) {
|
|
174
176
|
throw new Error("useOnValueSelectCallback: OnValueSelectContext not found");
|
|
175
177
|
}
|
|
176
178
|
return onValueSelect;
|
|
177
179
|
}
|
|
178
180
|
function useOnResetMatchCallback() {
|
|
179
|
-
const onResetMatch = useContext(OnResetMatchCallbackContext);
|
|
181
|
+
const onResetMatch = react.useContext(OnResetMatchCallbackContext);
|
|
180
182
|
if (onResetMatch === null) {
|
|
181
183
|
throw new Error("useOnResetMatchCallback: OnResetMatchContext not found");
|
|
182
184
|
}
|
|
183
185
|
return onResetMatch;
|
|
184
186
|
}
|
|
185
187
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
exports.Item = Item;
|
|
189
|
+
exports.List = List;
|
|
190
|
+
exports.OnResetMatchCallbackContext = OnResetMatchCallbackContext;
|
|
191
|
+
exports.OnValueSelectCallbackContext = OnValueSelectCallbackContext;
|
|
192
|
+
exports.SuggestionsContext = SuggestionsContext;
|
|
193
|
+
//# sourceMappingURL=suggestions.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestions.mjs","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n COMMAND_PRIORITY_LOW,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n Dispatch,\n HTMLAttributes,\n MouseEvent,\n ReactNode,\n SetStateAction,\n} from \"react\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nexport const SuggestionsContext = createContext<string[] | null>(null);\n\nexport const OnValueSelectCallbackContext = createContext<\n ((value: string) => void) | null\n>(null);\n\nexport const OnResetMatchCallbackContext = createContext<(() => void) | null>(\n null\n);\n\nconst HighlightedIndexContext = createContext<\n [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n function (props, forwardedRef) {\n const { children, ...divProps } = props;\n const [editor] = useLexicalComposerContext();\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const values = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n const onEscapeKeyDown = useOnResetMatchCallback();\n\n useEffect(() => {\n function onKeyArrowDown(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n const nextIndex =\n highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_DOWN_COMMAND,\n onKeyArrowDown,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyArrowUp(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n const nextIndex =\n highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_UP_COMMAND,\n onKeyArrowUp,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyEscape(event: KeyboardEvent): boolean {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n onEscapeKeyDown();\n return true;\n }\n\n return editor.registerCommand<KeyboardEvent>(\n KEY_ESCAPE_COMMAND,\n onKeyEscape,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onEscapeKeyDown]);\n\n useEffect(() => {\n function onKeyEnter(event: KeyboardEvent | null): boolean {\n if (values.length === 0) return true;\n\n onValueSelect(values[highlightedIndex]);\n\n if (event === null) return true;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ENTER_COMMAND,\n onKeyEnter,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onValueSelect, highlightedIndex, values]);\n\n useEffect(() => {\n const root = editor.getRootElement();\n if (root === null) return;\n\n root.setAttribute(\n \"aria-activedescendant\",\n `typeahead-item-${highlightedIndex}`\n );\n\n return () => {\n root.removeAttribute(\"aria-activedescendant\");\n };\n }, [editor, highlightedIndex]);\n\n return (\n <HighlightedIndexContext.Provider\n value={[highlightedIndex, setHighlightedIndex]}\n >\n <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n {children}\n </div>\n </HighlightedIndexContext.Provider>\n );\n }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n function Item(props, forwardedRef) {\n const { children, value, onMouseEnter, onClick, ...divProps } = props;\n const divRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n const suggestions = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n\n const isHighlighted = suggestions[highlightedIndex] === value;\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n forwardedRef,\n () => divRef.current\n );\n\n useEffect(() => {\n if (!isHighlighted) return;\n\n const div = divRef.current;\n if (div === null) return;\n\n div.scrollIntoView({ block: \"nearest\" });\n }, [isHighlighted]);\n\n function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n onMouseEnter?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n const index = suggestions.indexOf(value);\n if (index === -1) return;\n\n setHighlightedIndex(index);\n }\n\n function handleClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n onValueSelect(value);\n }\n\n return (\n <div\n role=\"option\"\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={handleMouseEnter}\n onClick={handleClick}\n {...divProps}\n ref={divRef}\n >\n {children}\n </div>\n );\n }\n);\n\nfunction useHighlightedIndex(): [number, Dispatch<SetStateAction<number>>] {\n const context = useContext(HighlightedIndexContext);\n if (context === null) {\n throw new Error(\n \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n );\n }\n return context;\n}\n\nfunction useSuggestions(): string[] {\n const suggestions = useContext(SuggestionsContext);\n if (suggestions === null) {\n throw new Error(\"useSuggestions: SuggestionsContext not found\");\n }\n\n return suggestions;\n}\n\nfunction useOnValueSelectCallback(): (value: string) => void {\n const onValueSelect = useContext(OnValueSelectCallbackContext);\n if (onValueSelect === null) {\n throw new Error(\"useOnValueSelectCallback: OnValueSelectContext not found\");\n }\n\n return onValueSelect;\n}\n\nfunction useOnResetMatchCallback(): () => void {\n const onResetMatch = useContext(OnResetMatchCallbackContext);\n if (onResetMatch === null) {\n throw new Error(\"useOnResetMatchCallback: OnResetMatchContext not found\");\n }\n\n return onResetMatch;\n}\n\nexport { Item, List };\n"],"names":["Item"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"suggestions.cjs","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n COMMAND_PRIORITY_LOW,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n Dispatch,\n HTMLAttributes,\n MouseEvent,\n ReactNode,\n SetStateAction,\n} from \"react\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nexport const SuggestionsContext = createContext<string[] | null>(null);\n\nexport const OnValueSelectCallbackContext = createContext<\n ((value: string) => void) | null\n>(null);\n\nexport const OnResetMatchCallbackContext = createContext<(() => void) | null>(\n null\n);\n\nconst HighlightedIndexContext = createContext<\n [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n function (props, forwardedRef) {\n const { children, ...divProps } = props;\n const [editor] = useLexicalComposerContext();\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const values = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n const onEscapeKeyDown = useOnResetMatchCallback();\n\n useEffect(() => {\n function onKeyArrowDown(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n const nextIndex =\n highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_DOWN_COMMAND,\n onKeyArrowDown,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyArrowUp(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n const nextIndex =\n highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_UP_COMMAND,\n onKeyArrowUp,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyEscape(event: KeyboardEvent): boolean {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n onEscapeKeyDown();\n return true;\n }\n\n return editor.registerCommand<KeyboardEvent>(\n KEY_ESCAPE_COMMAND,\n onKeyEscape,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onEscapeKeyDown]);\n\n useEffect(() => {\n function onKeyEnter(event: KeyboardEvent | null): boolean {\n if (values.length === 0) return true;\n\n onValueSelect(values[highlightedIndex]);\n\n if (event === null) return true;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ENTER_COMMAND,\n onKeyEnter,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onValueSelect, highlightedIndex, values]);\n\n useEffect(() => {\n const root = editor.getRootElement();\n if (root === null) return;\n\n root.setAttribute(\n \"aria-activedescendant\",\n `typeahead-item-${highlightedIndex}`\n );\n\n return () => {\n root.removeAttribute(\"aria-activedescendant\");\n };\n }, [editor, highlightedIndex]);\n\n return (\n <HighlightedIndexContext.Provider\n value={[highlightedIndex, setHighlightedIndex]}\n >\n <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n {children}\n </div>\n </HighlightedIndexContext.Provider>\n );\n }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n function Item(props, forwardedRef) {\n const { children, value, onMouseEnter, onClick, ...divProps } = props;\n const divRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n const suggestions = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n\n const isHighlighted = suggestions[highlightedIndex] === value;\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n forwardedRef,\n () => divRef.current\n );\n\n useEffect(() => {\n if (!isHighlighted) return;\n\n const div = divRef.current;\n if (div === null) return;\n\n div.scrollIntoView({ block: \"nearest\" });\n }, [isHighlighted]);\n\n function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n onMouseEnter?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n const index = suggestions.indexOf(value);\n if (index === -1) return;\n\n setHighlightedIndex(index);\n }\n\n function handleClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n onValueSelect(value);\n }\n\n return (\n <div\n role=\"option\"\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={handleMouseEnter}\n onClick={handleClick}\n {...divProps}\n ref={divRef}\n >\n {children}\n </div>\n );\n }\n);\n\nfunction useHighlightedIndex(): [number, Dispatch<SetStateAction<number>>] {\n const context = useContext(HighlightedIndexContext);\n if (context === null) {\n throw new Error(\n \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n );\n }\n return context;\n}\n\nfunction useSuggestions(): string[] {\n const suggestions = useContext(SuggestionsContext);\n if (suggestions === null) {\n throw new Error(\"useSuggestions: SuggestionsContext not found\");\n }\n\n return suggestions;\n}\n\nfunction useOnValueSelectCallback(): (value: string) => void {\n const onValueSelect = useContext(OnValueSelectCallbackContext);\n if (onValueSelect === null) {\n throw new Error(\"useOnValueSelectCallback: OnValueSelectContext not found\");\n }\n\n return onValueSelect;\n}\n\nfunction useOnResetMatchCallback(): () => void {\n const onResetMatch = useContext(OnResetMatchCallbackContext);\n if (onResetMatch === null) {\n throw new Error(\"useOnResetMatchCallback: OnResetMatchContext not found\");\n }\n\n return onResetMatch;\n}\n\nexport { Item, List };\n"],"names":["createContext","forwardRef","useLexicalComposerContext","useState","useEffect","KEY_ARROW_DOWN_COMMAND","COMMAND_PRIORITY_LOW","KEY_ARROW_UP_COMMAND","KEY_ESCAPE_COMMAND","KEY_ENTER_COMMAND","jsx","Item","useRef","useImperativeHandle","useContext"],"mappings":"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"}
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
+
import { KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
|
|
4
|
+
import { createContext, forwardRef, useState, useEffect, useRef, useImperativeHandle, useContext } from 'react';
|
|
2
5
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var react = require('react');
|
|
7
|
-
|
|
8
|
-
const SuggestionsContext = react.createContext(null);
|
|
9
|
-
const OnValueSelectCallbackContext = react.createContext(null);
|
|
10
|
-
const OnResetMatchCallbackContext = react.createContext(
|
|
6
|
+
const SuggestionsContext = createContext(null);
|
|
7
|
+
const OnValueSelectCallbackContext = createContext(null);
|
|
8
|
+
const OnResetMatchCallbackContext = createContext(
|
|
11
9
|
null
|
|
12
10
|
);
|
|
13
|
-
const HighlightedIndexContext =
|
|
14
|
-
const List =
|
|
11
|
+
const HighlightedIndexContext = createContext(null);
|
|
12
|
+
const List = forwardRef(
|
|
15
13
|
function(props, forwardedRef) {
|
|
16
14
|
const { children, ...divProps } = props;
|
|
17
|
-
const [editor] =
|
|
18
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
15
|
+
const [editor] = useLexicalComposerContext();
|
|
16
|
+
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
|
19
17
|
const values = useSuggestions();
|
|
20
18
|
const onValueSelect = useOnValueSelectCallback();
|
|
21
19
|
const onEscapeKeyDown = useOnResetMatchCallback();
|
|
22
|
-
|
|
20
|
+
useEffect(() => {
|
|
23
21
|
function onKeyArrowDown(event) {
|
|
24
22
|
if (values.length === 0)
|
|
25
23
|
return true;
|
|
@@ -32,12 +30,12 @@ const List = react.forwardRef(
|
|
|
32
30
|
return true;
|
|
33
31
|
}
|
|
34
32
|
return editor.registerCommand(
|
|
35
|
-
|
|
33
|
+
KEY_ARROW_DOWN_COMMAND,
|
|
36
34
|
onKeyArrowDown,
|
|
37
|
-
|
|
35
|
+
COMMAND_PRIORITY_LOW
|
|
38
36
|
);
|
|
39
37
|
}, [editor, highlightedIndex, values]);
|
|
40
|
-
|
|
38
|
+
useEffect(() => {
|
|
41
39
|
function onKeyArrowUp(event) {
|
|
42
40
|
if (values.length === 0)
|
|
43
41
|
return true;
|
|
@@ -50,12 +48,12 @@ const List = react.forwardRef(
|
|
|
50
48
|
return true;
|
|
51
49
|
}
|
|
52
50
|
return editor.registerCommand(
|
|
53
|
-
|
|
51
|
+
KEY_ARROW_UP_COMMAND,
|
|
54
52
|
onKeyArrowUp,
|
|
55
|
-
|
|
53
|
+
COMMAND_PRIORITY_LOW
|
|
56
54
|
);
|
|
57
55
|
}, [editor, highlightedIndex, values]);
|
|
58
|
-
|
|
56
|
+
useEffect(() => {
|
|
59
57
|
function onKeyEscape(event) {
|
|
60
58
|
event.preventDefault();
|
|
61
59
|
event.stopImmediatePropagation();
|
|
@@ -63,12 +61,12 @@ const List = react.forwardRef(
|
|
|
63
61
|
return true;
|
|
64
62
|
}
|
|
65
63
|
return editor.registerCommand(
|
|
66
|
-
|
|
64
|
+
KEY_ESCAPE_COMMAND,
|
|
67
65
|
onKeyEscape,
|
|
68
|
-
|
|
66
|
+
COMMAND_PRIORITY_LOW
|
|
69
67
|
);
|
|
70
68
|
}, [editor, onEscapeKeyDown]);
|
|
71
|
-
|
|
69
|
+
useEffect(() => {
|
|
72
70
|
function onKeyEnter(event) {
|
|
73
71
|
if (values.length === 0)
|
|
74
72
|
return true;
|
|
@@ -80,12 +78,12 @@ const List = react.forwardRef(
|
|
|
80
78
|
return true;
|
|
81
79
|
}
|
|
82
80
|
return editor.registerCommand(
|
|
83
|
-
|
|
81
|
+
KEY_ENTER_COMMAND,
|
|
84
82
|
onKeyEnter,
|
|
85
|
-
|
|
83
|
+
COMMAND_PRIORITY_LOW
|
|
86
84
|
);
|
|
87
85
|
}, [editor, onValueSelect, highlightedIndex, values]);
|
|
88
|
-
|
|
86
|
+
useEffect(() => {
|
|
89
87
|
const root = editor.getRootElement();
|
|
90
88
|
if (root === null)
|
|
91
89
|
return;
|
|
@@ -97,9 +95,9 @@ const List = react.forwardRef(
|
|
|
97
95
|
root.removeAttribute("aria-activedescendant");
|
|
98
96
|
};
|
|
99
97
|
}, [editor, highlightedIndex]);
|
|
100
|
-
return /* @__PURE__ */
|
|
98
|
+
return /* @__PURE__ */ jsx(HighlightedIndexContext.Provider, {
|
|
101
99
|
value: [highlightedIndex, setHighlightedIndex],
|
|
102
|
-
children: /* @__PURE__ */
|
|
100
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
103
101
|
role: "listbox",
|
|
104
102
|
...divProps,
|
|
105
103
|
ref: forwardedRef,
|
|
@@ -108,19 +106,19 @@ const List = react.forwardRef(
|
|
|
108
106
|
});
|
|
109
107
|
}
|
|
110
108
|
);
|
|
111
|
-
const Item =
|
|
109
|
+
const Item = forwardRef(
|
|
112
110
|
function Item2(props, forwardedRef) {
|
|
113
111
|
const { children, value, onMouseEnter, onClick, ...divProps } = props;
|
|
114
|
-
const divRef =
|
|
112
|
+
const divRef = useRef(null);
|
|
115
113
|
const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();
|
|
116
114
|
const suggestions = useSuggestions();
|
|
117
115
|
const onValueSelect = useOnValueSelectCallback();
|
|
118
116
|
const isHighlighted = suggestions[highlightedIndex] === value;
|
|
119
|
-
|
|
117
|
+
useImperativeHandle(
|
|
120
118
|
forwardedRef,
|
|
121
119
|
() => divRef.current
|
|
122
120
|
);
|
|
123
|
-
|
|
121
|
+
useEffect(() => {
|
|
124
122
|
if (!isHighlighted)
|
|
125
123
|
return;
|
|
126
124
|
const div = divRef.current;
|
|
@@ -143,7 +141,7 @@ const Item = react.forwardRef(
|
|
|
143
141
|
return;
|
|
144
142
|
onValueSelect(value);
|
|
145
143
|
}
|
|
146
|
-
return /* @__PURE__ */
|
|
144
|
+
return /* @__PURE__ */ jsx("div", {
|
|
147
145
|
role: "option",
|
|
148
146
|
"data-highlighted": isHighlighted || void 0,
|
|
149
147
|
onMouseEnter: handleMouseEnter,
|
|
@@ -155,7 +153,7 @@ const Item = react.forwardRef(
|
|
|
155
153
|
}
|
|
156
154
|
);
|
|
157
155
|
function useHighlightedIndex() {
|
|
158
|
-
const context =
|
|
156
|
+
const context = useContext(HighlightedIndexContext);
|
|
159
157
|
if (context === null) {
|
|
160
158
|
throw new Error(
|
|
161
159
|
"useHighlightedIndex must be used within a HighlightedIndexProvider"
|
|
@@ -164,30 +162,26 @@ function useHighlightedIndex() {
|
|
|
164
162
|
return context;
|
|
165
163
|
}
|
|
166
164
|
function useSuggestions() {
|
|
167
|
-
const suggestions =
|
|
165
|
+
const suggestions = useContext(SuggestionsContext);
|
|
168
166
|
if (suggestions === null) {
|
|
169
167
|
throw new Error("useSuggestions: SuggestionsContext not found");
|
|
170
168
|
}
|
|
171
169
|
return suggestions;
|
|
172
170
|
}
|
|
173
171
|
function useOnValueSelectCallback() {
|
|
174
|
-
const onValueSelect =
|
|
172
|
+
const onValueSelect = useContext(OnValueSelectCallbackContext);
|
|
175
173
|
if (onValueSelect === null) {
|
|
176
174
|
throw new Error("useOnValueSelectCallback: OnValueSelectContext not found");
|
|
177
175
|
}
|
|
178
176
|
return onValueSelect;
|
|
179
177
|
}
|
|
180
178
|
function useOnResetMatchCallback() {
|
|
181
|
-
const onResetMatch =
|
|
179
|
+
const onResetMatch = useContext(OnResetMatchCallbackContext);
|
|
182
180
|
if (onResetMatch === null) {
|
|
183
181
|
throw new Error("useOnResetMatchCallback: OnResetMatchContext not found");
|
|
184
182
|
}
|
|
185
183
|
return onResetMatch;
|
|
186
184
|
}
|
|
187
185
|
|
|
188
|
-
|
|
189
|
-
exports.List = List;
|
|
190
|
-
exports.OnResetMatchCallbackContext = OnResetMatchCallbackContext;
|
|
191
|
-
exports.OnValueSelectCallbackContext = OnValueSelectCallbackContext;
|
|
192
|
-
exports.SuggestionsContext = SuggestionsContext;
|
|
186
|
+
export { Item, List, OnResetMatchCallbackContext, OnValueSelectCallbackContext, SuggestionsContext };
|
|
193
187
|
//# sourceMappingURL=suggestions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestions.js","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n COMMAND_PRIORITY_LOW,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n Dispatch,\n HTMLAttributes,\n MouseEvent,\n ReactNode,\n SetStateAction,\n} from \"react\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nexport const SuggestionsContext = createContext<string[] | null>(null);\n\nexport const OnValueSelectCallbackContext = createContext<\n ((value: string) => void) | null\n>(null);\n\nexport const OnResetMatchCallbackContext = createContext<(() => void) | null>(\n null\n);\n\nconst HighlightedIndexContext = createContext<\n [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n function (props, forwardedRef) {\n const { children, ...divProps } = props;\n const [editor] = useLexicalComposerContext();\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const values = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n const onEscapeKeyDown = useOnResetMatchCallback();\n\n useEffect(() => {\n function onKeyArrowDown(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n const nextIndex =\n highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_DOWN_COMMAND,\n onKeyArrowDown,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyArrowUp(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n const nextIndex =\n highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_UP_COMMAND,\n onKeyArrowUp,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyEscape(event: KeyboardEvent): boolean {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n onEscapeKeyDown();\n return true;\n }\n\n return editor.registerCommand<KeyboardEvent>(\n KEY_ESCAPE_COMMAND,\n onKeyEscape,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onEscapeKeyDown]);\n\n useEffect(() => {\n function onKeyEnter(event: KeyboardEvent | null): boolean {\n if (values.length === 0) return true;\n\n onValueSelect(values[highlightedIndex]);\n\n if (event === null) return true;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ENTER_COMMAND,\n onKeyEnter,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onValueSelect, highlightedIndex, values]);\n\n useEffect(() => {\n const root = editor.getRootElement();\n if (root === null) return;\n\n root.setAttribute(\n \"aria-activedescendant\",\n `typeahead-item-${highlightedIndex}`\n );\n\n return () => {\n root.removeAttribute(\"aria-activedescendant\");\n };\n }, [editor, highlightedIndex]);\n\n return (\n <HighlightedIndexContext.Provider\n value={[highlightedIndex, setHighlightedIndex]}\n >\n <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n {children}\n </div>\n </HighlightedIndexContext.Provider>\n );\n }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n function Item(props, forwardedRef) {\n const { children, value, onMouseEnter, onClick, ...divProps } = props;\n const divRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n const suggestions = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n\n const isHighlighted = suggestions[highlightedIndex] === value;\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n forwardedRef,\n () => divRef.current\n );\n\n useEffect(() => {\n if (!isHighlighted) return;\n\n const div = divRef.current;\n if (div === null) return;\n\n div.scrollIntoView({ block: \"nearest\" });\n }, [isHighlighted]);\n\n function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n onMouseEnter?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n const index = suggestions.indexOf(value);\n if (index === -1) return;\n\n setHighlightedIndex(index);\n }\n\n function handleClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n onValueSelect(value);\n }\n\n return (\n <div\n role=\"option\"\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={handleMouseEnter}\n onClick={handleClick}\n {...divProps}\n ref={divRef}\n >\n {children}\n </div>\n );\n }\n);\n\nfunction useHighlightedIndex(): [number, Dispatch<SetStateAction<number>>] {\n const context = useContext(HighlightedIndexContext);\n if (context === null) {\n throw new Error(\n \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n );\n }\n return context;\n}\n\nfunction useSuggestions(): string[] {\n const suggestions = useContext(SuggestionsContext);\n if (suggestions === null) {\n throw new Error(\"useSuggestions: SuggestionsContext not found\");\n }\n\n return suggestions;\n}\n\nfunction useOnValueSelectCallback(): (value: string) => void {\n const onValueSelect = useContext(OnValueSelectCallbackContext);\n if (onValueSelect === null) {\n throw new Error(\"useOnValueSelectCallback: OnValueSelectContext not found\");\n }\n\n return onValueSelect;\n}\n\nfunction useOnResetMatchCallback(): () => void {\n const onResetMatch = useContext(OnResetMatchCallbackContext);\n if (onResetMatch === null) {\n throw new Error(\"useOnResetMatchCallback: OnResetMatchContext not found\");\n }\n\n return onResetMatch;\n}\n\nexport { Item, List };\n"],"names":["createContext","forwardRef","useLexicalComposerContext","useState","useEffect","KEY_ARROW_DOWN_COMMAND","COMMAND_PRIORITY_LOW","KEY_ARROW_UP_COMMAND","KEY_ESCAPE_COMMAND","KEY_ENTER_COMMAND","jsx","Item","useRef","useImperativeHandle","useContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"suggestions.js","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n COMMAND_PRIORITY_LOW,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n Dispatch,\n HTMLAttributes,\n MouseEvent,\n ReactNode,\n SetStateAction,\n} from \"react\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nexport const SuggestionsContext = createContext<string[] | null>(null);\n\nexport const OnValueSelectCallbackContext = createContext<\n ((value: string) => void) | null\n>(null);\n\nexport const OnResetMatchCallbackContext = createContext<(() => void) | null>(\n null\n);\n\nconst HighlightedIndexContext = createContext<\n [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n function (props, forwardedRef) {\n const { children, ...divProps } = props;\n const [editor] = useLexicalComposerContext();\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const values = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n const onEscapeKeyDown = useOnResetMatchCallback();\n\n useEffect(() => {\n function onKeyArrowDown(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n const nextIndex =\n highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_DOWN_COMMAND,\n onKeyArrowDown,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyArrowUp(event: KeyboardEvent): boolean {\n if (values.length === 0) return true;\n if (highlightedIndex === null) return true;\n\n // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n const nextIndex =\n highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n setHighlightedIndex(nextIndex);\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ARROW_UP_COMMAND,\n onKeyArrowUp,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, highlightedIndex, values]);\n\n useEffect(() => {\n function onKeyEscape(event: KeyboardEvent): boolean {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n onEscapeKeyDown();\n return true;\n }\n\n return editor.registerCommand<KeyboardEvent>(\n KEY_ESCAPE_COMMAND,\n onKeyEscape,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onEscapeKeyDown]);\n\n useEffect(() => {\n function onKeyEnter(event: KeyboardEvent | null): boolean {\n if (values.length === 0) return true;\n\n onValueSelect(values[highlightedIndex]);\n\n if (event === null) return true;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n return true;\n }\n\n return editor.registerCommand(\n KEY_ENTER_COMMAND,\n onKeyEnter,\n COMMAND_PRIORITY_LOW\n );\n }, [editor, onValueSelect, highlightedIndex, values]);\n\n useEffect(() => {\n const root = editor.getRootElement();\n if (root === null) return;\n\n root.setAttribute(\n \"aria-activedescendant\",\n `typeahead-item-${highlightedIndex}`\n );\n\n return () => {\n root.removeAttribute(\"aria-activedescendant\");\n };\n }, [editor, highlightedIndex]);\n\n return (\n <HighlightedIndexContext.Provider\n value={[highlightedIndex, setHighlightedIndex]}\n >\n <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n {children}\n </div>\n </HighlightedIndexContext.Provider>\n );\n }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n function Item(props, forwardedRef) {\n const { children, value, onMouseEnter, onClick, ...divProps } = props;\n const divRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n const suggestions = useSuggestions();\n const onValueSelect = useOnValueSelectCallback();\n\n const isHighlighted = suggestions[highlightedIndex] === value;\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n forwardedRef,\n () => divRef.current\n );\n\n useEffect(() => {\n if (!isHighlighted) return;\n\n const div = divRef.current;\n if (div === null) return;\n\n div.scrollIntoView({ block: \"nearest\" });\n }, [isHighlighted]);\n\n function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n onMouseEnter?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n const index = suggestions.indexOf(value);\n if (index === -1) return;\n\n setHighlightedIndex(index);\n }\n\n function handleClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n onValueSelect(value);\n }\n\n return (\n <div\n role=\"option\"\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={handleMouseEnter}\n onClick={handleClick}\n {...divProps}\n ref={divRef}\n >\n {children}\n </div>\n );\n }\n);\n\nfunction useHighlightedIndex(): [number, Dispatch<SetStateAction<number>>] {\n const context = useContext(HighlightedIndexContext);\n if (context === null) {\n throw new Error(\n \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n );\n }\n return context;\n}\n\nfunction useSuggestions(): string[] {\n const suggestions = useContext(SuggestionsContext);\n if (suggestions === null) {\n throw new Error(\"useSuggestions: SuggestionsContext not found\");\n }\n\n return suggestions;\n}\n\nfunction useOnValueSelectCallback(): (value: string) => void {\n const onValueSelect = useContext(OnValueSelectCallbackContext);\n if (onValueSelect === null) {\n throw new Error(\"useOnValueSelectCallback: OnValueSelectContext not found\");\n }\n\n return onValueSelect;\n}\n\nfunction useOnResetMatchCallback(): () => void {\n const onResetMatch = useContext(OnResetMatchCallbackContext);\n if (onResetMatch === null) {\n throw new Error(\"useOnResetMatchCallback: OnResetMatchContext not found\");\n }\n\n return onResetMatch;\n}\n\nexport { Item, List };\n"],"names":["Item"],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react$1 = require('@liveblocks/react');
|
|
5
|
+
var reactUi = require('@liveblocks/react-ui');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var classnames = require('../classnames.cjs');
|
|
8
|
+
|
|
9
|
+
const User = react.forwardRef(
|
|
10
|
+
function User2(props, forwardedRef) {
|
|
11
|
+
const { userId, className, ...spanProps } = props;
|
|
12
|
+
const { user, isLoading } = react$1.useUser(userId);
|
|
13
|
+
const $ = reactUi.useOverrides();
|
|
14
|
+
const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
16
|
+
"data-loading": isLoading ? "" : void 0,
|
|
17
|
+
...spanProps,
|
|
18
|
+
ref: forwardedRef,
|
|
19
|
+
className: classnames.classNames("lb-name lb-user", className),
|
|
20
|
+
children: isLoading ? null : name
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
exports.User = User;
|
|
26
|
+
//# sourceMappingURL=user.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user.
|
|
1
|
+
{"version":3,"file":"user.cjs","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface UserProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n function User(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n const $ = useOverrides();\n\n const name =\n user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n ref={forwardedRef}\n className={classNames(\"lb-name lb-user\", className)}\n >\n {isLoading ? null : name}\n </span>\n );\n }\n);\n"],"names":["forwardRef","User","useUser","useOverrides","jsx","classNames"],"mappings":";;;;;;;;AAYO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,gBAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAIC,oBAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,SAAA,EAAWC,qBAAW,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAEjD,sBAAY,IAAO,GAAA,IAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist/mentions/user.js
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useUser } from '@liveblocks/react';
|
|
3
|
+
import { useOverrides } from '@liveblocks/react-ui';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { classNames } from '../classnames.js';
|
|
2
6
|
|
|
3
|
-
|
|
4
|
-
var react$1 = require('@liveblocks/react');
|
|
5
|
-
var reactUi = require('@liveblocks/react-ui');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var classnames = require('../classnames.js');
|
|
8
|
-
|
|
9
|
-
const User = react.forwardRef(
|
|
7
|
+
const User = forwardRef(
|
|
10
8
|
function User2(props, forwardedRef) {
|
|
11
9
|
const { userId, className, ...spanProps } = props;
|
|
12
|
-
const { user, isLoading } =
|
|
13
|
-
const $ =
|
|
10
|
+
const { user, isLoading } = useUser(userId);
|
|
11
|
+
const $ = useOverrides();
|
|
14
12
|
const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
|
|
15
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */ jsx("span", {
|
|
16
14
|
"data-loading": isLoading ? "" : void 0,
|
|
17
15
|
...spanProps,
|
|
18
16
|
ref: forwardedRef,
|
|
19
|
-
className:
|
|
17
|
+
className: classNames("lb-name lb-user", className),
|
|
20
18
|
children: isLoading ? null : name
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
21
|
);
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
export { User };
|
|
26
24
|
//# sourceMappingURL=user.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user.js","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface UserProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n function User(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n const $ = useOverrides();\n\n const name =\n user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n ref={forwardedRef}\n className={classNames(\"lb-name lb-user\", className)}\n >\n {isLoading ? null : name}\n </span>\n );\n }\n);\n"],"names":["
|
|
1
|
+
{"version":3,"file":"user.js","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface UserProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n function User(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n const $ = useOverrides();\n\n const name =\n user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n ref={forwardedRef}\n className={classNames(\"lb-name lb-user\", className)}\n >\n {isLoading ? null : name}\n </span>\n );\n }\n);\n"],"names":["User"],"mappings":";;;;;;AAYO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAASA,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,SAAA,EAAW,UAAW,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAEjD,sBAAY,IAAO,GAAA,IAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|