@liveblocks/react-lexical 2.16.0-toolbars5 → 2.17.0-channels1
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/comments/anchored-threads.js +2 -2
- package/dist/comments/anchored-threads.js.map +1 -1
- package/dist/comments/anchored-threads.mjs +1 -1
- package/dist/comments/anchored-threads.mjs.map +1 -1
- package/dist/comments/floating-composer.js +2 -4
- package/dist/comments/floating-composer.js.map +1 -1
- package/dist/comments/floating-composer.mjs +2 -4
- package/dist/comments/floating-composer.mjs.map +1 -1
- package/dist/index.d.mts +3 -239
- package/dist/index.d.ts +3 -239
- package/dist/index.js +0 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +0 -4
- package/dist/index.mjs.map +1 -1
- package/dist/liveblocks-plugin-provider.js +15 -2
- package/dist/liveblocks-plugin-provider.js.map +1 -1
- package/dist/liveblocks-plugin-provider.mjs +14 -2
- package/dist/liveblocks-plugin-provider.mjs.map +1 -1
- package/dist/version-history/history-version-preview.js +10 -3
- package/dist/version-history/history-version-preview.js.map +1 -1
- package/dist/version-history/history-version-preview.mjs +10 -3
- package/dist/version-history/history-version-preview.mjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.mjs +1 -1
- package/package.json +6 -10
- package/src/styles/constants.css +1 -1
- package/src/styles/index.css +6 -44
- package/styles.css +1 -1
- package/styles.css.map +1 -1
- package/dist/is-block-node-active.js +0 -51
- package/dist/is-block-node-active.js.map +0 -1
- package/dist/is-block-node-active.mjs +0 -49
- package/dist/is-block-node-active.mjs.map +0 -1
- package/dist/is-command-registered.js +0 -11
- package/dist/is-command-registered.js.map +0 -1
- package/dist/is-command-registered.mjs +0 -9
- package/dist/is-command-registered.mjs.map +0 -1
- package/dist/is-text-format-active.js +0 -16
- package/dist/is-text-format-active.js.map +0 -1
- package/dist/is-text-format-active.mjs +0 -14
- package/dist/is-text-format-active.mjs.map +0 -1
- package/dist/toolbar/floating-toolbar.js +0 -309
- package/dist/toolbar/floating-toolbar.js.map +0 -1
- package/dist/toolbar/floating-toolbar.mjs +0 -306
- package/dist/toolbar/floating-toolbar.mjs.map +0 -1
- package/dist/toolbar/shared.js +0 -39
- package/dist/toolbar/shared.js.map +0 -1
- package/dist/toolbar/shared.mjs +0 -36
- package/dist/toolbar/shared.mjs.map +0 -1
- package/dist/toolbar/toolbar.js +0 -448
- package/dist/toolbar/toolbar.js.map +0 -1
- package/dist/toolbar/toolbar.mjs +0 -423
- package/dist/toolbar/toolbar.mjs.map +0 -1
- package/dist/use-root-element.js +0 -21
- package/dist/use-root-element.js.map +0 -1
- package/dist/use-root-element.mjs +0 -19
- package/dist/use-root-element.mjs.map +0 -1
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { inline, flip, hide, shift, limitShift, offset, size, autoUpdate, useFloating } from '@floating-ui/react-dom';
|
|
3
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
4
|
-
import { useInitial, useRefs, TooltipProvider } from '@liveblocks/react-ui/_private';
|
|
5
|
-
import { FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
|
|
6
|
-
import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
|
|
7
|
-
import { createPortal } from 'react-dom';
|
|
8
|
-
import { classNames } from '../classnames.mjs';
|
|
9
|
-
import { OPEN_FLOATING_COMPOSER_COMMAND } from '../comments/floating-composer.mjs';
|
|
10
|
-
import { createDOMRange } from '../create-dom-range.mjs';
|
|
11
|
-
import { useIsCommandRegistered } from '../is-command-registered.mjs';
|
|
12
|
-
import { useRootElement } from '../use-root-element.mjs';
|
|
13
|
-
import { FloatingToolbarContext, FloatingToolbarExternal } from './shared.mjs';
|
|
14
|
-
import { Toolbar, applyToolbarSlot } from './toolbar.mjs';
|
|
15
|
-
|
|
16
|
-
const FLOATING_TOOLBAR_COLLISION_PADDING = 10;
|
|
17
|
-
const FLOATING_TOOLBAR_OPEN_DELAY = 50;
|
|
18
|
-
function DefaultFloatingToolbarContent() {
|
|
19
|
-
const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);
|
|
20
|
-
const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);
|
|
21
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
22
|
-
children: [
|
|
23
|
-
supportsTextFormat ? /* @__PURE__ */ jsxs(Fragment, {
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ jsx(Toolbar.BlockSelector, {}),
|
|
26
|
-
/* @__PURE__ */ jsx(Toolbar.SectionInline, {})
|
|
27
|
-
]
|
|
28
|
-
}) : null,
|
|
29
|
-
supportsThread ? /* @__PURE__ */ jsxs(Fragment, {
|
|
30
|
-
children: [
|
|
31
|
-
/* @__PURE__ */ jsx(Toolbar.Separator, {}),
|
|
32
|
-
/* @__PURE__ */ jsx(Toolbar.SectionCollaboration, {})
|
|
33
|
-
]
|
|
34
|
-
}) : null
|
|
35
|
-
]
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
const FloatingToolbar = Object.assign(
|
|
39
|
-
forwardRef(
|
|
40
|
-
({
|
|
41
|
-
children = DefaultFloatingToolbarContent,
|
|
42
|
-
before,
|
|
43
|
-
after,
|
|
44
|
-
position = "top",
|
|
45
|
-
offset: sideOffset = 6,
|
|
46
|
-
onPointerDown,
|
|
47
|
-
onFocus,
|
|
48
|
-
onBlur,
|
|
49
|
-
className,
|
|
50
|
-
...props
|
|
51
|
-
}, forwardedRef) => {
|
|
52
|
-
const toolbarRef = useRef(null);
|
|
53
|
-
const externalIds = useInitial(() => /* @__PURE__ */ new Set());
|
|
54
|
-
const [isPointerDown, setPointerDown] = useState(false);
|
|
55
|
-
const [editor] = useLexicalComposerContext();
|
|
56
|
-
const root = useRootElement();
|
|
57
|
-
const [isFocused, setFocused] = useState(false);
|
|
58
|
-
const [isManuallyClosed, setManuallyClosed] = useState(false);
|
|
59
|
-
const [hasSelectionRange, setHasSelectionRange] = useState(false);
|
|
60
|
-
const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
|
|
61
|
-
const [delayedIsOpen, setDelayedIsOpen] = useState(isOpen);
|
|
62
|
-
const delayedIsOpenTimeoutRef = useRef();
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
setManuallyClosed(false);
|
|
65
|
-
}, [isFocused, hasSelectionRange, editor]);
|
|
66
|
-
useEffect(() => {
|
|
67
|
-
if (!root) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
const handleFocus2 = () => {
|
|
71
|
-
setFocused(true);
|
|
72
|
-
};
|
|
73
|
-
const handleBlur2 = (event) => {
|
|
74
|
-
if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
if (event.relatedTarget === root) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
for (const externalId of externalIds) {
|
|
81
|
-
if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
setFocused(false);
|
|
86
|
-
};
|
|
87
|
-
root.addEventListener("focus", handleFocus2);
|
|
88
|
-
root.addEventListener("blur", handleBlur2);
|
|
89
|
-
return () => {
|
|
90
|
-
root.removeEventListener("focus", handleFocus2);
|
|
91
|
-
root.removeEventListener("blur", handleBlur2);
|
|
92
|
-
};
|
|
93
|
-
}, [root, externalIds]);
|
|
94
|
-
const handleFocus = useCallback(
|
|
95
|
-
(event) => {
|
|
96
|
-
onFocus?.(event);
|
|
97
|
-
if (!event.isDefaultPrevented()) {
|
|
98
|
-
setFocused(true);
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
[onFocus]
|
|
102
|
-
);
|
|
103
|
-
const handleBlur = useCallback(
|
|
104
|
-
(event) => {
|
|
105
|
-
onBlur?.(event);
|
|
106
|
-
if (!event.isDefaultPrevented()) {
|
|
107
|
-
if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
if (event.relatedTarget === root) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
for (const externalId of externalIds) {
|
|
114
|
-
if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
setFocused(false);
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
[onBlur, root, externalIds]
|
|
122
|
-
);
|
|
123
|
-
useEffect(() => {
|
|
124
|
-
if (isOpen) {
|
|
125
|
-
delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
|
|
126
|
-
setDelayedIsOpen(true);
|
|
127
|
-
}, FLOATING_TOOLBAR_OPEN_DELAY);
|
|
128
|
-
} else {
|
|
129
|
-
setDelayedIsOpen(false);
|
|
130
|
-
}
|
|
131
|
-
return () => {
|
|
132
|
-
window.clearTimeout(delayedIsOpenTimeoutRef.current);
|
|
133
|
-
};
|
|
134
|
-
}, [isOpen]);
|
|
135
|
-
const floatingOptions = useMemo(() => {
|
|
136
|
-
const detectOverflowOptions = {
|
|
137
|
-
padding: FLOATING_TOOLBAR_COLLISION_PADDING
|
|
138
|
-
};
|
|
139
|
-
return {
|
|
140
|
-
strategy: "fixed",
|
|
141
|
-
placement: position,
|
|
142
|
-
middleware: [
|
|
143
|
-
inline(detectOverflowOptions),
|
|
144
|
-
flip({ ...detectOverflowOptions, crossAxis: false }),
|
|
145
|
-
hide(detectOverflowOptions),
|
|
146
|
-
shift({
|
|
147
|
-
...detectOverflowOptions,
|
|
148
|
-
limiter: limitShift()
|
|
149
|
-
}),
|
|
150
|
-
offset(sideOffset),
|
|
151
|
-
size(detectOverflowOptions)
|
|
152
|
-
],
|
|
153
|
-
whileElementsMounted: (...args) => {
|
|
154
|
-
return autoUpdate(...args, {
|
|
155
|
-
animationFrame: true
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
}, [position, sideOffset]);
|
|
160
|
-
const {
|
|
161
|
-
refs: { setReference, setFloating },
|
|
162
|
-
strategy,
|
|
163
|
-
x,
|
|
164
|
-
y,
|
|
165
|
-
isPositioned
|
|
166
|
-
} = useFloating({
|
|
167
|
-
...floatingOptions,
|
|
168
|
-
open: delayedIsOpen
|
|
169
|
-
});
|
|
170
|
-
const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);
|
|
171
|
-
const handlePointerDown = useCallback(
|
|
172
|
-
(event) => {
|
|
173
|
-
onPointerDown?.(event);
|
|
174
|
-
event.stopPropagation();
|
|
175
|
-
if (event.target === toolbarRef.current) {
|
|
176
|
-
event.preventDefault();
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
[onPointerDown]
|
|
180
|
-
);
|
|
181
|
-
useEffect(() => {
|
|
182
|
-
const handlePointerDown2 = () => {
|
|
183
|
-
setPointerDown(true);
|
|
184
|
-
};
|
|
185
|
-
const handlePointerUp = () => {
|
|
186
|
-
setPointerDown(false);
|
|
187
|
-
};
|
|
188
|
-
if (!root) {
|
|
189
|
-
return;
|
|
190
|
-
}
|
|
191
|
-
root.addEventListener("pointerdown", handlePointerDown2);
|
|
192
|
-
document.addEventListener("pointercancel", handlePointerUp);
|
|
193
|
-
document.addEventListener("pointerup", handlePointerUp);
|
|
194
|
-
return () => {
|
|
195
|
-
root.removeEventListener("pointerdown", handlePointerDown2);
|
|
196
|
-
document.removeEventListener("pointercancel", handlePointerUp);
|
|
197
|
-
document.removeEventListener("pointerup", handlePointerUp);
|
|
198
|
-
};
|
|
199
|
-
}, [root]);
|
|
200
|
-
useEffect(() => {
|
|
201
|
-
const unregister = editor.registerUpdateListener(({ tags }) => {
|
|
202
|
-
return editor.getEditorState().read(() => {
|
|
203
|
-
if (tags.has("collaboration"))
|
|
204
|
-
return;
|
|
205
|
-
setManuallyClosed(false);
|
|
206
|
-
const selection = $getSelection();
|
|
207
|
-
if (!$isRangeSelection(selection) || selection.isCollapsed()) {
|
|
208
|
-
setHasSelectionRange(false);
|
|
209
|
-
setReference(null);
|
|
210
|
-
return;
|
|
211
|
-
}
|
|
212
|
-
const { anchor, focus } = selection;
|
|
213
|
-
const range = createDOMRange(
|
|
214
|
-
editor,
|
|
215
|
-
anchor.getNode(),
|
|
216
|
-
anchor.offset,
|
|
217
|
-
focus.getNode(),
|
|
218
|
-
focus.offset
|
|
219
|
-
);
|
|
220
|
-
setHasSelectionRange(true);
|
|
221
|
-
setReference(range);
|
|
222
|
-
});
|
|
223
|
-
});
|
|
224
|
-
return unregister;
|
|
225
|
-
}, [editor, setReference]);
|
|
226
|
-
useEffect(() => {
|
|
227
|
-
const root2 = editor.getRootElement();
|
|
228
|
-
if (!root2 || !delayedIsOpen) {
|
|
229
|
-
return;
|
|
230
|
-
}
|
|
231
|
-
const handleKeyDown = (event) => {
|
|
232
|
-
if (event.target !== root2 && event.defaultPrevented) {
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
if (event.key === "Escape") {
|
|
236
|
-
event.preventDefault();
|
|
237
|
-
event.stopPropagation();
|
|
238
|
-
editor.focus();
|
|
239
|
-
setManuallyClosed(true);
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
root2.addEventListener("keydown", handleKeyDown);
|
|
243
|
-
return () => {
|
|
244
|
-
root2.removeEventListener("keydown", handleKeyDown);
|
|
245
|
-
};
|
|
246
|
-
}, [editor, delayedIsOpen]);
|
|
247
|
-
const close = useCallback(() => {
|
|
248
|
-
editor.focus();
|
|
249
|
-
setManuallyClosed(true);
|
|
250
|
-
}, [editor, setManuallyClosed]);
|
|
251
|
-
const registerExternal = useCallback(
|
|
252
|
-
(id) => {
|
|
253
|
-
externalIds.add(id);
|
|
254
|
-
return () => {
|
|
255
|
-
externalIds.delete(id);
|
|
256
|
-
};
|
|
257
|
-
},
|
|
258
|
-
[externalIds]
|
|
259
|
-
);
|
|
260
|
-
if (!delayedIsOpen) {
|
|
261
|
-
return null;
|
|
262
|
-
}
|
|
263
|
-
const slotProps = { editor };
|
|
264
|
-
return createPortal(
|
|
265
|
-
/* @__PURE__ */ jsx(TooltipProvider, {
|
|
266
|
-
children: /* @__PURE__ */ jsx(FloatingToolbarContext.Provider, {
|
|
267
|
-
value: { close, registerExternal },
|
|
268
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
269
|
-
role: "toolbar",
|
|
270
|
-
"aria-label": "Floating toolbar",
|
|
271
|
-
"aria-orientation": "horizontal",
|
|
272
|
-
className: classNames(
|
|
273
|
-
"lb-root lb-portal lb-elevation lb-lexical-floating-toolbar lb-lexical-toolbar",
|
|
274
|
-
className
|
|
275
|
-
),
|
|
276
|
-
ref: mergedRefs,
|
|
277
|
-
style: {
|
|
278
|
-
position: strategy,
|
|
279
|
-
top: 0,
|
|
280
|
-
left: 0,
|
|
281
|
-
transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
|
|
282
|
-
minWidth: "max-content"
|
|
283
|
-
},
|
|
284
|
-
onPointerDown: handlePointerDown,
|
|
285
|
-
onFocus: handleFocus,
|
|
286
|
-
onBlur: handleBlur,
|
|
287
|
-
...props,
|
|
288
|
-
children: [
|
|
289
|
-
applyToolbarSlot(before, slotProps),
|
|
290
|
-
applyToolbarSlot(children, slotProps),
|
|
291
|
-
applyToolbarSlot(after, slotProps)
|
|
292
|
-
]
|
|
293
|
-
})
|
|
294
|
-
})
|
|
295
|
-
}),
|
|
296
|
-
document.body
|
|
297
|
-
);
|
|
298
|
-
}
|
|
299
|
-
),
|
|
300
|
-
{
|
|
301
|
-
External: FloatingToolbarExternal
|
|
302
|
-
}
|
|
303
|
-
);
|
|
304
|
-
|
|
305
|
-
export { FLOATING_TOOLBAR_COLLISION_PADDING, FloatingToolbar };
|
|
306
|
-
//# sourceMappingURL=floating-toolbar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"floating-toolbar.mjs","sources":["../../src/toolbar/floating-toolbar.tsx"],"sourcesContent":["import {\n autoUpdate,\n type DetectOverflowOptions,\n flip,\n hide,\n inline,\n limitShift,\n offset,\n shift,\n size,\n useFloating,\n type UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n TooltipProvider,\n useInitial,\n useRefs,\n} from \"@liveblocks/react-ui/_private\";\nimport { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from \"lexical\";\nimport type {\n ComponentProps,\n FocusEvent as ReactFocusEvent,\n PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport { OPEN_FLOATING_COMPOSER_COMMAND } from \"../comments/floating-composer\";\nimport { createDOMRange } from \"../create-dom-range\";\nimport { useIsCommandRegistered } from \"../is-command-registered\";\nimport type { FloatingPosition } from \"../types\";\nimport { useRootElement } from \"../use-root-element\";\nimport { FloatingToolbarContext, FloatingToolbarExternal } from \"./shared\";\nimport {\n applyToolbarSlot,\n Toolbar,\n type ToolbarSlot,\n type ToolbarSlotProps,\n} from \"./toolbar\";\n\nexport interface FloatingToolbarProps\n extends Omit<ComponentProps<\"div\">, \"children\"> {\n /**\n * The vertical position of the floating toolbar.\n */\n position?: FloatingPosition;\n\n /**\n * The vertical offset of the floating toolbar from the selection.\n */\n offset?: number;\n\n /**\n * The content of the floating toolbar, overriding the default content.\n * Use the `before` and `after` props if you want to keep and extend the default content.\n */\n children?: ToolbarSlot;\n\n /**\n * The content to display at the start of the floating toolbar.\n */\n before?: ToolbarSlot;\n\n /**\n * The content to display at the end of the floating toolbar.\n */\n after?: ToolbarSlot;\n}\n\nexport const FLOATING_TOOLBAR_COLLISION_PADDING = 10;\nconst FLOATING_TOOLBAR_OPEN_DELAY = 50;\n\nfunction DefaultFloatingToolbarContent() {\n const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);\n const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);\n\n return (\n <>\n {supportsTextFormat ? (\n <>\n <Toolbar.BlockSelector />\n <Toolbar.SectionInline />\n </>\n ) : null}\n {supportsThread ? (\n <>\n <Toolbar.Separator />\n <Toolbar.SectionCollaboration />\n </>\n ) : null}\n </>\n );\n}\n\n/**\n * A floating toolbar attached to the selection and containing actions and values related to the editor.\n *\n * @example\n * <FloatingToolbar />\n *\n * @example\n * <FloatingToolbar>\n * <Toolbar.BlockSelector />\n * <Toolbar.Separator />\n * <Toolbar.SectionInline />\n * <Toolbar.Separator />\n * <Toolbar.Button name=\"Custom action\" onClick={() => { ... }} icon={<Icon.QuestionMark />} />\n * </FloatingToolbar>\n */\nexport const FloatingToolbar = Object.assign(\n forwardRef<HTMLDivElement, FloatingToolbarProps>(\n (\n {\n children = DefaultFloatingToolbarContent,\n before,\n after,\n position = \"top\",\n offset: sideOffset = 6,\n onPointerDown,\n onFocus,\n onBlur,\n className,\n ...props\n },\n forwardedRef\n ) => {\n const toolbarRef = useRef<HTMLDivElement>(null);\n const externalIds = useInitial<Set<string>>(() => new Set());\n const [isPointerDown, setPointerDown] = useState(false);\n const [editor] = useLexicalComposerContext();\n const root = useRootElement();\n const [isFocused, setFocused] = useState(false);\n const [isManuallyClosed, setManuallyClosed] = useState(false);\n const [hasSelectionRange, setHasSelectionRange] = useState(false);\n\n const isOpen =\n isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;\n const [delayedIsOpen, setDelayedIsOpen] = useState(isOpen);\n const delayedIsOpenTimeoutRef = useRef<number>();\n\n // Reset the manually closed state when there's another change\n useEffect(() => {\n setManuallyClosed(false);\n }, [isFocused, hasSelectionRange, editor]);\n\n // Don't close when the focus moves from the editor to the toolbar\n useEffect(() => {\n if (!root) {\n return;\n }\n\n const handleFocus = () => {\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent) => {\n if (\n event.relatedTarget &&\n toolbarRef.current?.contains(event.relatedTarget as Node)\n ) {\n return;\n }\n\n if (event.relatedTarget === root) {\n return;\n }\n\n for (const externalId of externalIds) {\n if (\n document\n .getElementById(externalId)\n ?.contains(event.relatedTarget as Node)\n ) {\n return;\n }\n }\n\n setFocused(false);\n };\n\n root.addEventListener(\"focus\", handleFocus);\n root.addEventListener(\"blur\", handleBlur);\n\n return () => {\n root.removeEventListener(\"focus\", handleFocus);\n root.removeEventListener(\"blur\", handleBlur);\n };\n }, [root, externalIds]);\n\n const handleFocus = useCallback(\n (event: ReactFocusEvent<HTMLDivElement>) => {\n onFocus?.(event);\n\n if (!event.isDefaultPrevented()) {\n setFocused(true);\n }\n },\n [onFocus]\n );\n\n // Close the toolbar when the it loses focus to something else than the editor\n const handleBlur = useCallback(\n (event: ReactFocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n\n if (!event.isDefaultPrevented()) {\n if (\n event.relatedTarget &&\n toolbarRef.current?.contains(event.relatedTarget as Node)\n ) {\n return;\n }\n\n if (event.relatedTarget === root) {\n return;\n }\n\n for (const externalId of externalIds) {\n if (\n document\n .getElementById(externalId)\n ?.contains(event.relatedTarget as Node)\n ) {\n return;\n }\n }\n\n setFocused(false);\n }\n },\n [onBlur, root, externalIds]\n );\n\n // Delay the opening of the toolbar to avoid flickering issues\n useEffect(() => {\n if (isOpen) {\n delayedIsOpenTimeoutRef.current = window.setTimeout(() => {\n setDelayedIsOpen(true);\n }, FLOATING_TOOLBAR_OPEN_DELAY);\n } else {\n setDelayedIsOpen(false);\n }\n\n return () => {\n window.clearTimeout(delayedIsOpenTimeoutRef.current);\n };\n }, [isOpen]);\n\n const floatingOptions: UseFloatingOptions = useMemo(() => {\n const detectOverflowOptions: DetectOverflowOptions = {\n padding: FLOATING_TOOLBAR_COLLISION_PADDING,\n };\n\n return {\n strategy: \"fixed\",\n placement: position,\n middleware: [\n inline(detectOverflowOptions),\n flip({ ...detectOverflowOptions, crossAxis: false }),\n hide(detectOverflowOptions),\n shift({\n ...detectOverflowOptions,\n limiter: limitShift(),\n }),\n offset(sideOffset),\n size(detectOverflowOptions),\n ],\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n };\n }, [position, sideOffset]);\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n isPositioned,\n } = useFloating({\n ...floatingOptions,\n open: delayedIsOpen,\n });\n const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);\n\n const handlePointerDown = useCallback(\n (event: ReactPointerEvent<HTMLDivElement>) => {\n onPointerDown?.(event);\n\n event.stopPropagation();\n\n // Prevent the toolbar from closing when clicking on the toolbar itself\n if (event.target === toolbarRef.current) {\n event.preventDefault();\n }\n },\n [onPointerDown]\n );\n\n useEffect(() => {\n const handlePointerDown = () => {\n setPointerDown(true);\n };\n const handlePointerUp = () => {\n setPointerDown(false);\n };\n\n if (!root) {\n return;\n }\n\n root.addEventListener(\"pointerdown\", handlePointerDown);\n document.addEventListener(\"pointercancel\", handlePointerUp);\n document.addEventListener(\"pointerup\", handlePointerUp);\n\n return () => {\n root.removeEventListener(\"pointerdown\", handlePointerDown);\n document.removeEventListener(\"pointercancel\", handlePointerUp);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [root]);\n\n useEffect(() => {\n const unregister = editor.registerUpdateListener(({ tags }) => {\n return editor.getEditorState().read(() => {\n // Ignore selection updates related to collaboration\n if (tags.has(\"collaboration\")) return;\n\n setManuallyClosed(false);\n\n const selection = $getSelection();\n if (!$isRangeSelection(selection) || selection.isCollapsed()) {\n setHasSelectionRange(false);\n setReference(null);\n return;\n }\n\n const { anchor, focus } = selection;\n\n const range = createDOMRange(\n editor,\n anchor.getNode(),\n anchor.offset,\n focus.getNode(),\n focus.offset\n );\n\n setHasSelectionRange(true);\n setReference(range);\n });\n });\n\n return unregister;\n }, [editor, setReference]);\n\n useEffect(() => {\n const root = editor.getRootElement();\n\n if (!root || !delayedIsOpen) {\n return;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.target !== root && event.defaultPrevented) {\n return;\n }\n\n if (event.key === \"Escape\") {\n event.preventDefault();\n event.stopPropagation();\n\n editor.focus();\n setManuallyClosed(true);\n }\n };\n\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n root.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [editor, delayedIsOpen]);\n\n const close = useCallback(() => {\n editor.focus();\n setManuallyClosed(true);\n }, [editor, setManuallyClosed]);\n\n const registerExternal = useCallback(\n (id: string) => {\n externalIds.add(id);\n\n return () => {\n externalIds.delete(id);\n };\n },\n [externalIds]\n );\n\n if (!delayedIsOpen) {\n return null;\n }\n\n const slotProps: ToolbarSlotProps = { editor };\n\n return createPortal(\n <TooltipProvider>\n <FloatingToolbarContext.Provider value={{ close, registerExternal }}>\n <div\n role=\"toolbar\"\n aria-label=\"Floating toolbar\"\n aria-orientation=\"horizontal\"\n className={classNames(\n \"lb-root lb-portal lb-elevation lb-lexical-floating-toolbar lb-lexical-toolbar\",\n className\n )}\n ref={mergedRefs}\n style={{\n position: strategy,\n top: 0,\n left: 0,\n transform: isPositioned\n ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n : \"translate3d(0, -200%, 0)\",\n minWidth: \"max-content\",\n }}\n onPointerDown={handlePointerDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...props}\n >\n {applyToolbarSlot(before, slotProps)}\n {applyToolbarSlot(children, slotProps)}\n {applyToolbarSlot(after, slotProps)}\n </div>\n </FloatingToolbarContext.Provider>\n </TooltipProvider>,\n document.body\n );\n }\n ),\n {\n /**\n * A component that can be wrapped around elements which are rendered outside of the floating\n * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.\n *\n * @example\n * <FloatingToolbar>\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Toolbar.Button>Open popover</Toolbar.Button>\n * </Popover.Trigger>\n * <Popover.Portal>\n * <FloatingToolbar.External>\n * <Popover.Content>\n * This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.\n * </Popover.Content>\n * </FloatingToolbar.External>\n * </Popover.Portal>\n * </Popover.Root>\n * </FloatingToolbar>\n */\n External: FloatingToolbarExternal,\n }\n);\n"],"names":["handleFocus","handleBlur","handlePointerDown","root"],"mappings":"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"}
|
package/dist/toolbar/shared.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var _private = require('@liveblocks/react/_private');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const FloatingToolbarContext = react.createContext(null);
|
|
8
|
-
const FloatingToolbarExternal = react.forwardRef(({ children, style, ...props }, forwardedRef) => {
|
|
9
|
-
const id = react.useId();
|
|
10
|
-
const externalId = react.useMemo(
|
|
11
|
-
() => `liveblocks-floating-toolbar-external-${id}`,
|
|
12
|
-
[id]
|
|
13
|
-
);
|
|
14
|
-
const floatingToolbarContext = react.useContext(FloatingToolbarContext);
|
|
15
|
-
const registerExternal = floatingToolbarContext?.registerExternal;
|
|
16
|
-
_private.useLayoutEffect(() => {
|
|
17
|
-
if (!registerExternal) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
return registerExternal(externalId);
|
|
21
|
-
}, [registerExternal, externalId]);
|
|
22
|
-
if (!floatingToolbarContext || react.Children.count(children) === 0) {
|
|
23
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
24
|
-
children
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
28
|
-
ref: forwardedRef,
|
|
29
|
-
style: { display: "contents", ...style },
|
|
30
|
-
"data-liveblocks-floating-toolbar-external": id,
|
|
31
|
-
...props,
|
|
32
|
-
id: externalId,
|
|
33
|
-
children
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
exports.FloatingToolbarContext = FloatingToolbarContext;
|
|
38
|
-
exports.FloatingToolbarExternal = FloatingToolbarExternal;
|
|
39
|
-
//# sourceMappingURL=shared.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sources":["../../src/toolbar/shared.tsx"],"sourcesContent":["import { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Children,\n type ComponentProps,\n createContext,\n forwardRef,\n useContext,\n useId,\n useMemo,\n} from \"react\";\n\n// This file is separate to avoid circular dependencies\n\ntype FloatingToolbarContext = {\n close: () => void;\n registerExternal: (id: string) => () => void;\n};\n\nexport const FloatingToolbarContext =\n createContext<FloatingToolbarContext | null>(null);\n\nexport const FloatingToolbarExternal = forwardRef<\n HTMLDivElement,\n ComponentProps<\"div\">\n>(({ children, style, ...props }, forwardedRef) => {\n const id = useId();\n const externalId = useMemo(\n () => `liveblocks-floating-toolbar-external-${id}`,\n [id]\n );\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const registerExternal = floatingToolbarContext?.registerExternal;\n\n useLayoutEffect(() => {\n if (!registerExternal) {\n return;\n }\n\n return registerExternal(externalId);\n }, [registerExternal, externalId]);\n\n if (!floatingToolbarContext || Children.count(children) === 0) {\n return <>{children}</>;\n }\n\n return (\n <div\n ref={forwardedRef}\n style={{ display: \"contents\", ...style }}\n data-liveblocks-floating-toolbar-external={id}\n {...props}\n id={externalId}\n >\n {children}\n </div>\n );\n});\n"],"names":["createContext","forwardRef","useId","useMemo","useContext","useLayoutEffect","Children","jsx","Fragment"],"mappings":";;;;;;AAkBa,MAAA,sBAAA,GACXA,oBAA6C,IAAI,EAAA;AAEtC,MAAA,uBAAA,GAA0BC,iBAGrC,CAAC,EAAE,UAAU,KAAU,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,EAAA,MAAM,KAAKC,WAAM,EAAA,CAAA;AACjB,EAAA,MAAM,UAAa,GAAAC,aAAA;AAAA,IACjB,MAAM,CAAwC,qCAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IAC9C,CAAC,EAAE,CAAA;AAAA,GACL,CAAA;AACA,EAAM,MAAA,sBAAA,GAAyBC,iBAAW,sBAAsB,CAAA,CAAA;AAChE,EAAA,MAAM,mBAAmB,sBAAwB,EAAA,gBAAA,CAAA;AAEjD,EAAAC,wBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,OAAO,iBAAiB,UAAU,CAAA,CAAA;AAAA,GACjC,EAAA,CAAC,gBAAkB,EAAA,UAAU,CAAC,CAAA,CAAA;AAEjC,EAAA,IAAI,CAAC,sBAA0B,IAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,MAAM,CAAG,EAAA;AAC7D,IAAO,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,YAAA;AAAA,IACL,KAAO,EAAA,EAAE,OAAS,EAAA,UAAA,EAAY,GAAG,KAAM,EAAA;AAAA,IACvC,2CAA2C,EAAA,EAAA;AAAA,IAC1C,GAAG,KAAA;AAAA,IACJ,EAAI,EAAA,UAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;;"}
|
package/dist/toolbar/shared.mjs
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useLayoutEffect } from '@liveblocks/react/_private';
|
|
3
|
-
import { createContext, forwardRef, useId, useMemo, useContext, Children } from 'react';
|
|
4
|
-
|
|
5
|
-
const FloatingToolbarContext = createContext(null);
|
|
6
|
-
const FloatingToolbarExternal = forwardRef(({ children, style, ...props }, forwardedRef) => {
|
|
7
|
-
const id = useId();
|
|
8
|
-
const externalId = useMemo(
|
|
9
|
-
() => `liveblocks-floating-toolbar-external-${id}`,
|
|
10
|
-
[id]
|
|
11
|
-
);
|
|
12
|
-
const floatingToolbarContext = useContext(FloatingToolbarContext);
|
|
13
|
-
const registerExternal = floatingToolbarContext?.registerExternal;
|
|
14
|
-
useLayoutEffect(() => {
|
|
15
|
-
if (!registerExternal) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
return registerExternal(externalId);
|
|
19
|
-
}, [registerExternal, externalId]);
|
|
20
|
-
if (!floatingToolbarContext || Children.count(children) === 0) {
|
|
21
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
22
|
-
children
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
return /* @__PURE__ */ jsx("div", {
|
|
26
|
-
ref: forwardedRef,
|
|
27
|
-
style: { display: "contents", ...style },
|
|
28
|
-
"data-liveblocks-floating-toolbar-external": id,
|
|
29
|
-
...props,
|
|
30
|
-
id: externalId,
|
|
31
|
-
children
|
|
32
|
-
});
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
export { FloatingToolbarContext, FloatingToolbarExternal };
|
|
36
|
-
//# sourceMappingURL=shared.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shared.mjs","sources":["../../src/toolbar/shared.tsx"],"sourcesContent":["import { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Children,\n type ComponentProps,\n createContext,\n forwardRef,\n useContext,\n useId,\n useMemo,\n} from \"react\";\n\n// This file is separate to avoid circular dependencies\n\ntype FloatingToolbarContext = {\n close: () => void;\n registerExternal: (id: string) => () => void;\n};\n\nexport const FloatingToolbarContext =\n createContext<FloatingToolbarContext | null>(null);\n\nexport const FloatingToolbarExternal = forwardRef<\n HTMLDivElement,\n ComponentProps<\"div\">\n>(({ children, style, ...props }, forwardedRef) => {\n const id = useId();\n const externalId = useMemo(\n () => `liveblocks-floating-toolbar-external-${id}`,\n [id]\n );\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const registerExternal = floatingToolbarContext?.registerExternal;\n\n useLayoutEffect(() => {\n if (!registerExternal) {\n return;\n }\n\n return registerExternal(externalId);\n }, [registerExternal, externalId]);\n\n if (!floatingToolbarContext || Children.count(children) === 0) {\n return <>{children}</>;\n }\n\n return (\n <div\n ref={forwardedRef}\n style={{ display: \"contents\", ...style }}\n data-liveblocks-floating-toolbar-external={id}\n {...props}\n id={externalId}\n >\n {children}\n </div>\n );\n});\n"],"names":[],"mappings":";;;;AAkBa,MAAA,sBAAA,GACX,cAA6C,IAAI,EAAA;AAEtC,MAAA,uBAAA,GAA0B,WAGrC,CAAC,EAAE,UAAU,KAAU,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,EAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,CAAwC,qCAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IAC9C,CAAC,EAAE,CAAA;AAAA,GACL,CAAA;AACA,EAAM,MAAA,sBAAA,GAAyB,WAAW,sBAAsB,CAAA,CAAA;AAChE,EAAA,MAAM,mBAAmB,sBAAwB,EAAA,gBAAA,CAAA;AAEjD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,OAAO,iBAAiB,UAAU,CAAA,CAAA;AAAA,GACjC,EAAA,CAAC,gBAAkB,EAAA,UAAU,CAAC,CAAA,CAAA;AAEjC,EAAA,IAAI,CAAC,sBAA0B,IAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,MAAM,CAAG,EAAA;AAC7D,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,YAAA;AAAA,IACL,KAAO,EAAA,EAAE,OAAS,EAAA,UAAA,EAAY,GAAG,KAAM,EAAA;AAAA,IACvC,2CAA2C,EAAA,EAAA;AAAA,IAC1C,GAAG,KAAA;AAAA,IACJ,EAAI,EAAA,UAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|