@liveblocks/react-lexical 3.15.0-thread1 → 3.15.0
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/README.md +7 -17
- package/dist/comments/anchored-threads.cjs +7 -7
- package/dist/comments/anchored-threads.cjs.map +1 -1
- package/dist/comments/anchored-threads.js +2 -2
- package/dist/comments/anchored-threads.js.map +1 -1
- package/dist/comments/floating-composer.cjs +7 -7
- package/dist/comments/floating-composer.cjs.map +1 -1
- package/dist/comments/floating-composer.js +2 -2
- package/dist/comments/floating-composer.js.map +1 -1
- package/dist/comments/floating-threads.cjs +6 -6
- package/dist/comments/floating-threads.cjs.map +1 -1
- package/dist/comments/floating-threads.js +2 -2
- package/dist/comments/floating-threads.js.map +1 -1
- package/dist/toolbar/toolbar.cjs +7 -28
- package/dist/toolbar/toolbar.cjs.map +1 -1
- package/dist/toolbar/toolbar.js +7 -8
- package/dist/toolbar/toolbar.js.map +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.cjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +9 -9
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var reactDom = require('@floating-ui/react-dom');
|
|
5
5
|
var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
|
|
6
|
-
var _private = require('@liveblocks/react/_private');
|
|
6
|
+
var _private$1 = require('@liveblocks/react/_private');
|
|
7
7
|
var reactUi = require('@liveblocks/react-ui');
|
|
8
|
-
var _private
|
|
8
|
+
var _private = require('@liveblocks/react-ui/_private');
|
|
9
9
|
var lexical = require('lexical');
|
|
10
10
|
var react = require('react');
|
|
11
11
|
var anchoredThreads = require('./anchored-threads.cjs');
|
|
@@ -17,7 +17,7 @@ function FloatingThreads({
|
|
|
17
17
|
...props
|
|
18
18
|
}) {
|
|
19
19
|
const activeThreads = useActiveThreads();
|
|
20
|
-
const Thread = components?.Thread
|
|
20
|
+
const Thread = _private.useStableComponent(components?.Thread, reactUi.Thread);
|
|
21
21
|
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
22
22
|
const nodes = useThreadToNodes();
|
|
23
23
|
const [range, setRange] = react.useState(null);
|
|
@@ -134,12 +134,12 @@ function FloatingThreadPortal({
|
|
|
134
134
|
});
|
|
135
135
|
}
|
|
136
136
|
});
|
|
137
|
-
_private.useLayoutEffect(() => {
|
|
137
|
+
_private$1.useLayoutEffect(() => {
|
|
138
138
|
setReference({
|
|
139
139
|
getBoundingClientRect: () => range.getBoundingClientRect()
|
|
140
140
|
});
|
|
141
141
|
}, [setReference, range]);
|
|
142
|
-
return /* @__PURE__ */ jsxRuntime.jsx(_private
|
|
142
|
+
return /* @__PURE__ */ jsxRuntime.jsx(_private.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
143
143
|
"div",
|
|
144
144
|
{
|
|
145
145
|
ref: setFloating,
|
|
@@ -152,7 +152,7 @@ function FloatingThreadPortal({
|
|
|
152
152
|
transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
|
|
153
153
|
minWidth: "max-content"
|
|
154
154
|
},
|
|
155
|
-
className: _private
|
|
155
|
+
className: _private.cn(
|
|
156
156
|
"lb-root lb-portal lb-elevation lb-lexical-floating lb-lexical-floating-threads",
|
|
157
157
|
className
|
|
158
158
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-threads.cjs","sources":["../../src/comments/floating-threads.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n hide,\n limitShift,\n offset,\n shift,\n size,\n useFloating,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DCM, DTM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Thread as DefaultThread,\n type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { cn, Portal } from \"@liveblocks/react-ui/_private\";\nimport {\n $getSelection,\n COMMAND_PRIORITY_HIGH,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useState,\n useSyncExternalStore,\n} from \"react\";\n\nimport { compareNodes } from \"./anchored-threads\";\nimport {\n ActiveThreadsContext,\n type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\n\ntype FloatingThreadsComponents = {\n Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<\n TM extends BaseMetadata = DTM,\n CM extends BaseMetadata = DCM,\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * The threads to display.\n */\n threads: ThreadData<TM, CM>[];\n\n /**\n * Override the component's components.\n */\n components?: Partial<FloatingThreadsComponents>;\n}\n\nexport function FloatingThreads({\n threads,\n components,\n ...props\n}: FloatingThreadsProps) {\n const activeThreads = useActiveThreads();\n\n const Thread = components?.Thread ?? DefaultThread;\n\n const [editor] = useLexicalComposerContext();\n const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n const [range, setRange] = useState<{\n range: Range;\n threads: ThreadData[];\n } | null>(null);\n\n const handleUpdateRange = useCallback(() => {\n function getActiveRange(): Range | null {\n function getActiveElements() {\n const activeElements = new Set<HTMLElement>();\n\n for (const thread of activeThreads) {\n const keys = nodes.get(thread);\n if (keys === undefined) continue;\n\n for (const key of keys) {\n const element = editor.getElementByKey(key);\n if (element === null) continue;\n activeElements.add(element);\n }\n }\n return activeElements;\n }\n\n const activeElements = getActiveElements();\n\n const sortedElements = Array.from(activeElements).sort(compareNodes);\n if (sortedElements.length === 0) return null;\n\n const range = document.createRange();\n range.setStartBefore(sortedElements[0]);\n range.setEndAfter(sortedElements[sortedElements.length - 1]);\n\n return range;\n }\n\n const active = (threads ?? []).filter((thread) =>\n activeThreads.includes(thread.id)\n );\n\n const range = getActiveRange();\n if (range === null) {\n setRange(null);\n return;\n }\n\n setRange({ range, threads: active });\n }, [activeThreads, nodes, editor, threads]);\n\n useEffect(() => {\n handleUpdateRange();\n }, [handleUpdateRange]);\n\n useEffect(() => {\n return editor.registerUpdateListener(handleUpdateRange);\n }, [editor, handleUpdateRange]);\n\n const handleEscapeKeydown = useCallback((): boolean => {\n if (range === null) return false;\n setRange(null);\n return true;\n }, [range]);\n\n useEffect(() => {\n return editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n handleEscapeKeydown,\n COMMAND_PRIORITY_HIGH\n );\n }, [editor, handleEscapeKeydown]);\n\n const isCollapsed = useIsSelectionCollapsed();\n\n if (range === null || isCollapsed === null || !isCollapsed) return null;\n\n return (\n <FloatingThreadPortal range={range.range} {...props}>\n {range.threads.map((thread) => (\n <ThreadWrapper\n key={thread.id}\n thread={thread}\n Thread={Thread}\n onEscapeKeydown={handleEscapeKeydown}\n className=\"lb-lexical-floating-threads-thread\"\n />\n ))}\n </FloatingThreadPortal>\n );\n}\n\ninterface FloatingThreadPortalProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n range: Range;\n children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n range,\n children,\n className,\n style,\n ...props\n}: FloatingThreadPortalProps) {\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n } = useFloating({\n strategy: \"absolute\",\n placement: \"bottom\",\n middleware: [\n flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n offset(10),\n hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n shift({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n limiter: limitShift(),\n }),\n size({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n apply({ availableWidth, availableHeight, elements }) {\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-width\",\n `${availableWidth}px`\n );\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-height\",\n `${availableHeight}px`\n );\n },\n }),\n ],\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n });\n\n useLayoutEffect(() => {\n setReference({\n getBoundingClientRect: () => range.getBoundingClientRect(),\n });\n }, [setReference, range]);\n\n return (\n <Portal asChild>\n <div\n ref={setFloating}\n {...props}\n style={{\n ...style,\n position: strategy,\n top: 0,\n left: 0,\n transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n minWidth: \"max-content\",\n }}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-lexical-floating lb-lexical-floating-threads\",\n className\n )}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n thread: ThreadData;\n Thread: ComponentType<ThreadProps>;\n onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n thread,\n Thread,\n onEscapeKeydown,\n onKeyDown,\n ...threadProps\n}: ThreadWrapperProps) {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n if (event.key === \"Escape\") {\n onEscapeKeydown();\n }\n },\n [onEscapeKeydown, onKeyDown]\n );\n\n return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n const threadToNodes = useContext(ThreadToNodesContext);\n if (threadToNodes === null) {\n throw new Error(\n \"FloatingThreads component must be used within a LiveblocksPlugin component.\"\n );\n }\n return threadToNodes;\n}\n\nfunction useIsSelectionCollapsed(): boolean | null {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => {\n const selection = $getSelection();\n if (selection === null) return null;\n return selection.isCollapsed();\n });\n }, [editor]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nfunction useActiveThreads() {\n const activeThreads = useContext(ActiveThreadsContext);\n if (activeThreads === null) {\n throw new Error(\n \"FloatingThreads component must be used within LiveblocksPlugin.\"\n );\n }\n\n return activeThreads;\n}\n"],"names":["DefaultThread","useLexicalComposerContext","useState","useCallback","activeElements","compareNodes","range","useEffect","KEY_ESCAPE_COMMAND","COMMAND_PRIORITY_HIGH","jsx","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","Portal","cn","useContext","ThreadToNodesContext","$getSelection","useSyncExternalStore","ActiveThreadsContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"floating-threads.cjs","sources":["../../src/comments/floating-threads.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n hide,\n limitShift,\n offset,\n shift,\n size,\n useFloating,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DCM, DTM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Thread as DefaultThread,\n type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { cn, Portal, useStableComponent } from \"@liveblocks/react-ui/_private\";\nimport {\n $getSelection,\n COMMAND_PRIORITY_HIGH,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useState,\n useSyncExternalStore,\n} from \"react\";\n\nimport { compareNodes } from \"./anchored-threads\";\nimport {\n ActiveThreadsContext,\n type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\n\ntype FloatingThreadsComponents = {\n Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<\n TM extends BaseMetadata = DTM,\n CM extends BaseMetadata = DCM,\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * The threads to display.\n */\n threads: ThreadData<TM, CM>[];\n\n /**\n * Override the component's components.\n */\n components?: Partial<FloatingThreadsComponents>;\n}\n\nexport function FloatingThreads({\n threads,\n components,\n ...props\n}: FloatingThreadsProps) {\n const activeThreads = useActiveThreads();\n\n const Thread = useStableComponent(components?.Thread, DefaultThread);\n\n const [editor] = useLexicalComposerContext();\n const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n const [range, setRange] = useState<{\n range: Range;\n threads: ThreadData[];\n } | null>(null);\n\n const handleUpdateRange = useCallback(() => {\n function getActiveRange(): Range | null {\n function getActiveElements() {\n const activeElements = new Set<HTMLElement>();\n\n for (const thread of activeThreads) {\n const keys = nodes.get(thread);\n if (keys === undefined) continue;\n\n for (const key of keys) {\n const element = editor.getElementByKey(key);\n if (element === null) continue;\n activeElements.add(element);\n }\n }\n return activeElements;\n }\n\n const activeElements = getActiveElements();\n\n const sortedElements = Array.from(activeElements).sort(compareNodes);\n if (sortedElements.length === 0) return null;\n\n const range = document.createRange();\n range.setStartBefore(sortedElements[0]);\n range.setEndAfter(sortedElements[sortedElements.length - 1]);\n\n return range;\n }\n\n const active = (threads ?? []).filter((thread) =>\n activeThreads.includes(thread.id)\n );\n\n const range = getActiveRange();\n if (range === null) {\n setRange(null);\n return;\n }\n\n setRange({ range, threads: active });\n }, [activeThreads, nodes, editor, threads]);\n\n useEffect(() => {\n handleUpdateRange();\n }, [handleUpdateRange]);\n\n useEffect(() => {\n return editor.registerUpdateListener(handleUpdateRange);\n }, [editor, handleUpdateRange]);\n\n const handleEscapeKeydown = useCallback((): boolean => {\n if (range === null) return false;\n setRange(null);\n return true;\n }, [range]);\n\n useEffect(() => {\n return editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n handleEscapeKeydown,\n COMMAND_PRIORITY_HIGH\n );\n }, [editor, handleEscapeKeydown]);\n\n const isCollapsed = useIsSelectionCollapsed();\n\n if (range === null || isCollapsed === null || !isCollapsed) return null;\n\n return (\n <FloatingThreadPortal range={range.range} {...props}>\n {range.threads.map((thread) => (\n <ThreadWrapper\n key={thread.id}\n thread={thread}\n Thread={Thread}\n onEscapeKeydown={handleEscapeKeydown}\n className=\"lb-lexical-floating-threads-thread\"\n />\n ))}\n </FloatingThreadPortal>\n );\n}\n\ninterface FloatingThreadPortalProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n range: Range;\n children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n range,\n children,\n className,\n style,\n ...props\n}: FloatingThreadPortalProps) {\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n } = useFloating({\n strategy: \"absolute\",\n placement: \"bottom\",\n middleware: [\n flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n offset(10),\n hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n shift({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n limiter: limitShift(),\n }),\n size({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n apply({ availableWidth, availableHeight, elements }) {\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-width\",\n `${availableWidth}px`\n );\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-height\",\n `${availableHeight}px`\n );\n },\n }),\n ],\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n });\n\n useLayoutEffect(() => {\n setReference({\n getBoundingClientRect: () => range.getBoundingClientRect(),\n });\n }, [setReference, range]);\n\n return (\n <Portal asChild>\n <div\n ref={setFloating}\n {...props}\n style={{\n ...style,\n position: strategy,\n top: 0,\n left: 0,\n transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n minWidth: \"max-content\",\n }}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-lexical-floating lb-lexical-floating-threads\",\n className\n )}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n thread: ThreadData;\n Thread: ComponentType<ThreadProps>;\n onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n thread,\n Thread,\n onEscapeKeydown,\n onKeyDown,\n ...threadProps\n}: ThreadWrapperProps) {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n if (event.key === \"Escape\") {\n onEscapeKeydown();\n }\n },\n [onEscapeKeydown, onKeyDown]\n );\n\n return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n const threadToNodes = useContext(ThreadToNodesContext);\n if (threadToNodes === null) {\n throw new Error(\n \"FloatingThreads component must be used within a LiveblocksPlugin component.\"\n );\n }\n return threadToNodes;\n}\n\nfunction useIsSelectionCollapsed(): boolean | null {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => {\n const selection = $getSelection();\n if (selection === null) return null;\n return selection.isCollapsed();\n });\n }, [editor]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nfunction useActiveThreads() {\n const activeThreads = useContext(ActiveThreadsContext);\n if (activeThreads === null) {\n throw new Error(\n \"FloatingThreads component must be used within LiveblocksPlugin.\"\n );\n }\n\n return activeThreads;\n}\n"],"names":["useStableComponent","DefaultThread","useLexicalComposerContext","useState","useCallback","activeElements","compareNodes","range","useEffect","KEY_ESCAPE_COMMAND","COMMAND_PRIORITY_HIGH","jsx","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","Portal","cn","useContext","ThreadToNodesContext","$getSelection","useSyncExternalStore","ActiveThreadsContext"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate }
|
|
|
3
3
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
4
4
|
import { useLayoutEffect } from '@liveblocks/react/_private';
|
|
5
5
|
import { Thread } from '@liveblocks/react-ui';
|
|
6
|
-
import { Portal, cn } from '@liveblocks/react-ui/_private';
|
|
6
|
+
import { useStableComponent, Portal, cn } from '@liveblocks/react-ui/_private';
|
|
7
7
|
import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_HIGH, $getSelection } from 'lexical';
|
|
8
8
|
import { useState, useCallback, useEffect, useContext, useSyncExternalStore } from 'react';
|
|
9
9
|
import { compareNodes } from './anchored-threads.js';
|
|
@@ -15,7 +15,7 @@ function FloatingThreads({
|
|
|
15
15
|
...props
|
|
16
16
|
}) {
|
|
17
17
|
const activeThreads = useActiveThreads();
|
|
18
|
-
const Thread$1 = components?.Thread
|
|
18
|
+
const Thread$1 = useStableComponent(components?.Thread, Thread);
|
|
19
19
|
const [editor] = useLexicalComposerContext();
|
|
20
20
|
const nodes = useThreadToNodes();
|
|
21
21
|
const [range, setRange] = useState(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-threads.js","sources":["../../src/comments/floating-threads.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n hide,\n limitShift,\n offset,\n shift,\n size,\n useFloating,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DCM, DTM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Thread as DefaultThread,\n type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { cn, Portal } from \"@liveblocks/react-ui/_private\";\nimport {\n $getSelection,\n COMMAND_PRIORITY_HIGH,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useState,\n useSyncExternalStore,\n} from \"react\";\n\nimport { compareNodes } from \"./anchored-threads\";\nimport {\n ActiveThreadsContext,\n type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\n\ntype FloatingThreadsComponents = {\n Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<\n TM extends BaseMetadata = DTM,\n CM extends BaseMetadata = DCM,\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * The threads to display.\n */\n threads: ThreadData<TM, CM>[];\n\n /**\n * Override the component's components.\n */\n components?: Partial<FloatingThreadsComponents>;\n}\n\nexport function FloatingThreads({\n threads,\n components,\n ...props\n}: FloatingThreadsProps) {\n const activeThreads = useActiveThreads();\n\n const Thread = components?.Thread ?? DefaultThread;\n\n const [editor] = useLexicalComposerContext();\n const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n const [range, setRange] = useState<{\n range: Range;\n threads: ThreadData[];\n } | null>(null);\n\n const handleUpdateRange = useCallback(() => {\n function getActiveRange(): Range | null {\n function getActiveElements() {\n const activeElements = new Set<HTMLElement>();\n\n for (const thread of activeThreads) {\n const keys = nodes.get(thread);\n if (keys === undefined) continue;\n\n for (const key of keys) {\n const element = editor.getElementByKey(key);\n if (element === null) continue;\n activeElements.add(element);\n }\n }\n return activeElements;\n }\n\n const activeElements = getActiveElements();\n\n const sortedElements = Array.from(activeElements).sort(compareNodes);\n if (sortedElements.length === 0) return null;\n\n const range = document.createRange();\n range.setStartBefore(sortedElements[0]);\n range.setEndAfter(sortedElements[sortedElements.length - 1]);\n\n return range;\n }\n\n const active = (threads ?? []).filter((thread) =>\n activeThreads.includes(thread.id)\n );\n\n const range = getActiveRange();\n if (range === null) {\n setRange(null);\n return;\n }\n\n setRange({ range, threads: active });\n }, [activeThreads, nodes, editor, threads]);\n\n useEffect(() => {\n handleUpdateRange();\n }, [handleUpdateRange]);\n\n useEffect(() => {\n return editor.registerUpdateListener(handleUpdateRange);\n }, [editor, handleUpdateRange]);\n\n const handleEscapeKeydown = useCallback((): boolean => {\n if (range === null) return false;\n setRange(null);\n return true;\n }, [range]);\n\n useEffect(() => {\n return editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n handleEscapeKeydown,\n COMMAND_PRIORITY_HIGH\n );\n }, [editor, handleEscapeKeydown]);\n\n const isCollapsed = useIsSelectionCollapsed();\n\n if (range === null || isCollapsed === null || !isCollapsed) return null;\n\n return (\n <FloatingThreadPortal range={range.range} {...props}>\n {range.threads.map((thread) => (\n <ThreadWrapper\n key={thread.id}\n thread={thread}\n Thread={Thread}\n onEscapeKeydown={handleEscapeKeydown}\n className=\"lb-lexical-floating-threads-thread\"\n />\n ))}\n </FloatingThreadPortal>\n );\n}\n\ninterface FloatingThreadPortalProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n range: Range;\n children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n range,\n children,\n className,\n style,\n ...props\n}: FloatingThreadPortalProps) {\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n } = useFloating({\n strategy: \"absolute\",\n placement: \"bottom\",\n middleware: [\n flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n offset(10),\n hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n shift({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n limiter: limitShift(),\n }),\n size({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n apply({ availableWidth, availableHeight, elements }) {\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-width\",\n `${availableWidth}px`\n );\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-height\",\n `${availableHeight}px`\n );\n },\n }),\n ],\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n });\n\n useLayoutEffect(() => {\n setReference({\n getBoundingClientRect: () => range.getBoundingClientRect(),\n });\n }, [setReference, range]);\n\n return (\n <Portal asChild>\n <div\n ref={setFloating}\n {...props}\n style={{\n ...style,\n position: strategy,\n top: 0,\n left: 0,\n transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n minWidth: \"max-content\",\n }}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-lexical-floating lb-lexical-floating-threads\",\n className\n )}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n thread: ThreadData;\n Thread: ComponentType<ThreadProps>;\n onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n thread,\n Thread,\n onEscapeKeydown,\n onKeyDown,\n ...threadProps\n}: ThreadWrapperProps) {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n if (event.key === \"Escape\") {\n onEscapeKeydown();\n }\n },\n [onEscapeKeydown, onKeyDown]\n );\n\n return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n const threadToNodes = useContext(ThreadToNodesContext);\n if (threadToNodes === null) {\n throw new Error(\n \"FloatingThreads component must be used within a LiveblocksPlugin component.\"\n );\n }\n return threadToNodes;\n}\n\nfunction useIsSelectionCollapsed(): boolean | null {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => {\n const selection = $getSelection();\n if (selection === null) return null;\n return selection.isCollapsed();\n });\n }, [editor]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nfunction useActiveThreads() {\n const activeThreads = useContext(ActiveThreadsContext);\n if (activeThreads === null) {\n throw new Error(\n \"FloatingThreads component must be used within LiveblocksPlugin.\"\n );\n }\n\n return activeThreads;\n}\n"],"names":["Thread","DefaultThread","activeElements","range"],"mappings":";;;;;;;;;;;AA8DO,SAAS,eAAgB,CAAA;AAAA,EAC9B,OAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAyB,EAAA;AACvB,EAAA,MAAM,gBAAgB,gBAAiB,EAAA,CAAA;AAEvC,EAAM,MAAAA,QAAA,GAAS,YAAY,MAAU,IAAAC,MAAA,CAAA;AAErC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,QAAQ,gBAAiB,EAAA,CAAA;AAE/B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAGhB,IAAI,CAAA,CAAA;AAEd,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,SAAS,cAA+B,GAAA;AACtC,MAAA,SAAS,iBAAoB,GAAA;AAC3B,QAAMC,MAAAA,eAAAA,uBAAqB,GAAiB,EAAA,CAAA;AAE5C,QAAA,KAAA,MAAW,UAAU,aAAe,EAAA;AAClC,UAAM,MAAA,IAAA,GAAO,KAAM,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AAC7B,UAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,YAAA,SAAA;AAExB,UAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,YAAM,MAAA,OAAA,GAAU,MAAO,CAAA,eAAA,CAAgB,GAAG,CAAA,CAAA;AAC1C,YAAA,IAAI,OAAY,KAAA,IAAA;AAAM,cAAA,SAAA;AACtB,YAAAA,eAAAA,CAAe,IAAI,OAAO,CAAA,CAAA;AAAA,WAC5B;AAAA,SACF;AACA,QAAOA,OAAAA,eAAAA,CAAAA;AAAA,OACT;AAEA,MAAA,MAAM,iBAAiB,iBAAkB,EAAA,CAAA;AAEzC,MAAA,MAAM,iBAAiB,KAAM,CAAA,IAAA,CAAK,cAAc,CAAA,CAAE,KAAK,YAAY,CAAA,CAAA;AACnE,MAAA,IAAI,eAAe,MAAW,KAAA,CAAA;AAAG,QAAO,OAAA,IAAA,CAAA;AAExC,MAAMC,MAAAA,MAAAA,GAAQ,SAAS,WAAY,EAAA,CAAA;AACnC,MAAAA,MAAM,CAAA,cAAA,CAAe,cAAe,CAAA,CAAC,CAAC,CAAA,CAAA;AACtC,MAAAA,OAAM,WAAY,CAAA,cAAA,CAAe,cAAe,CAAA,MAAA,GAAS,CAAC,CAAC,CAAA,CAAA;AAE3D,MAAOA,OAAAA,MAAAA,CAAAA;AAAA,KACT;AAEA,IAAM,MAAA,MAAA,GAAA,CAAU,OAAW,IAAA,EAAI,EAAA,MAAA;AAAA,MAAO,CAAC,MAAA,KACrC,aAAc,CAAA,QAAA,CAAS,OAAO,EAAE,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,MAAMA,SAAQ,cAAe,EAAA,CAAA;AAC7B,IAAA,IAAIA,WAAU,IAAM,EAAA;AAClB,MAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACb,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,QAAA,CAAS,EAAE,KAAA,EAAAA,MAAO,EAAA,OAAA,EAAS,QAAQ,CAAA,CAAA;AAAA,KAClC,CAAC,aAAA,EAAe,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAC,CAAA,CAAA;AAE1C,EAAA,SAAA,CAAU,MAAM;AACd,IAAkB,iBAAA,EAAA,CAAA;AAAA,GACpB,EAAG,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAEtB,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,OAAA,MAAA,CAAO,uBAAuB,iBAAiB,CAAA,CAAA;AAAA,GACrD,EAAA,CAAC,MAAQ,EAAA,iBAAiB,CAAC,CAAA,CAAA;AAE9B,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAe;AACrD,IAAA,IAAI,KAAU,KAAA,IAAA;AAAM,MAAO,OAAA,KAAA,CAAA;AAC3B,IAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACb,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAO,CAAA,eAAA;AAAA,MACZ,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,qBAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,mBAAmB,CAAC,CAAA,CAAA;AAEhC,EAAA,MAAM,cAAc,uBAAwB,EAAA,CAAA;AAE5C,EAAA,IAAI,KAAU,KAAA,IAAA,IAAQ,WAAgB,KAAA,IAAA,IAAQ,CAAC,WAAA;AAAa,IAAO,OAAA,IAAA,CAAA;AAEnE,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAQ,GAAG,KAAA,EAC3C,QAAM,EAAA,KAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAClB,qBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MAEC,MAAA;AAAA,cACAH,QAAA;AAAA,MACA,eAAiB,EAAA,mBAAA;AAAA,MACjB,SAAU,EAAA,oCAAA;AAAA,KAAA;AAAA,IAJL,MAAO,CAAA,EAAA;AAAA,GAMf,CACH,EAAA,CAAA,CAAA;AAEJ,CAAA;AAQO,MAAM,iCAAoC,GAAA,GAAA;AAEjD,SAAS,oBAAqB,CAAA;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA8B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,QAAU,EAAA,UAAA;AAAA,IACV,SAAW,EAAA,QAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,KAAK,EAAE,OAAA,EAAS,iCAAmC,EAAA,SAAA,EAAW,OAAO,CAAA;AAAA,MACrE,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,CAAA,EAAE,OAAS,EAAA,iCAAA,EAAmC,CAAA;AAAA,MACnD,KAAM,CAAA;AAAA,QACJ,OAAS,EAAA,iCAAA;AAAA,QACT,SAAS,UAAW,EAAA;AAAA,OACrB,CAAA;AAAA,MACD,IAAK,CAAA;AAAA,QACH,OAAS,EAAA,iCAAA;AAAA,QACT,KAAM,CAAA,EAAE,cAAgB,EAAA,eAAA,EAAiB,UAAY,EAAA;AACnD,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,YACtB,+CAAA;AAAA,YACA,GAAG,cAAc,CAAA,EAAA,CAAA;AAAA,WACnB,CAAA;AACA,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,YACtB,gDAAA;AAAA,YACA,GAAG,eAAe,CAAA,EAAA,CAAA;AAAA,WACpB,CAAA;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH;AAAA,IACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAA,UAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAED,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAa,YAAA,CAAA;AAAA,MACX,qBAAA,EAAuB,MAAM,KAAA,CAAM,qBAAsB,EAAA;AAAA,KAC1D,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,KAAK,CAAC,CAAA,CAAA;AAExB,EACE,uBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAO,IACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,WAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,QAAU,EAAA,QAAA;AAAA,QACV,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,SAAA,EAAW,CAAe,YAAA,EAAA,IAAA,CAAK,KAAM,CAAA,CAAC,CAAC,CAAO,IAAA,EAAA,IAAA,CAAK,KAAM,CAAA,CAAC,CAAC,CAAA,MAAA,CAAA;AAAA,QAC3D,QAAU,EAAA,aAAA;AAAA,OACZ;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,gFAAA;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GAEL,EAAA,CAAA,CAAA;AAEJ,CAAA;AAQA,SAAS,aAAc,CAAA;AAAA,EACrB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAuB,EAAA;AACrB,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,KAAyC,KAAA;AACxC,MAAA,SAAA,GAAY,KAAK,CAAA,CAAA;AAGjB,MAAI,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AAC1B,QAAgB,eAAA,EAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,iBAAiB,SAAS,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,2BAAQ,MAAO,EAAA,EAAA,MAAA,EAAgB,SAAW,EAAA,aAAA,EAAgB,GAAG,WAAa,EAAA,CAAA,CAAA;AAC5E,CAAA;AAEA,SAAS,gBAAqC,GAAA;AAC5C,EAAM,MAAA,aAAA,GAAgB,WAAW,oBAAoB,CAAA,CAAA;AACrD,EAAA,IAAI,kBAAkB,IAAM,EAAA;AAC1B,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,6EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AAEA,SAAS,uBAA0C,GAAA;AACjD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,MAAO,CAAA,cAAA,EAAiB,CAAA,IAAA,CAAK,MAAM;AACxC,MAAA,MAAM,YAAY,aAAc,EAAA,CAAA;AAChC,MAAA,IAAI,SAAc,KAAA,IAAA;AAAM,QAAO,OAAA,IAAA,CAAA;AAC/B,MAAA,OAAO,UAAU,WAAY,EAAA,CAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE,CAAA;AAEA,SAAS,gBAAmB,GAAA;AAC1B,EAAM,MAAA,aAAA,GAAgB,WAAW,oBAAoB,CAAA,CAAA;AACrD,EAAA,IAAI,kBAAkB,IAAM,EAAA;AAC1B,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
|
|
1
|
+
{"version":3,"file":"floating-threads.js","sources":["../../src/comments/floating-threads.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n hide,\n limitShift,\n offset,\n shift,\n size,\n useFloating,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DCM, DTM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n Thread as DefaultThread,\n type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { cn, Portal, useStableComponent } from \"@liveblocks/react-ui/_private\";\nimport {\n $getSelection,\n COMMAND_PRIORITY_HIGH,\n KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useState,\n useSyncExternalStore,\n} from \"react\";\n\nimport { compareNodes } from \"./anchored-threads\";\nimport {\n ActiveThreadsContext,\n type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\n\ntype FloatingThreadsComponents = {\n Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<\n TM extends BaseMetadata = DTM,\n CM extends BaseMetadata = DCM,\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * The threads to display.\n */\n threads: ThreadData<TM, CM>[];\n\n /**\n * Override the component's components.\n */\n components?: Partial<FloatingThreadsComponents>;\n}\n\nexport function FloatingThreads({\n threads,\n components,\n ...props\n}: FloatingThreadsProps) {\n const activeThreads = useActiveThreads();\n\n const Thread = useStableComponent(components?.Thread, DefaultThread);\n\n const [editor] = useLexicalComposerContext();\n const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n const [range, setRange] = useState<{\n range: Range;\n threads: ThreadData[];\n } | null>(null);\n\n const handleUpdateRange = useCallback(() => {\n function getActiveRange(): Range | null {\n function getActiveElements() {\n const activeElements = new Set<HTMLElement>();\n\n for (const thread of activeThreads) {\n const keys = nodes.get(thread);\n if (keys === undefined) continue;\n\n for (const key of keys) {\n const element = editor.getElementByKey(key);\n if (element === null) continue;\n activeElements.add(element);\n }\n }\n return activeElements;\n }\n\n const activeElements = getActiveElements();\n\n const sortedElements = Array.from(activeElements).sort(compareNodes);\n if (sortedElements.length === 0) return null;\n\n const range = document.createRange();\n range.setStartBefore(sortedElements[0]);\n range.setEndAfter(sortedElements[sortedElements.length - 1]);\n\n return range;\n }\n\n const active = (threads ?? []).filter((thread) =>\n activeThreads.includes(thread.id)\n );\n\n const range = getActiveRange();\n if (range === null) {\n setRange(null);\n return;\n }\n\n setRange({ range, threads: active });\n }, [activeThreads, nodes, editor, threads]);\n\n useEffect(() => {\n handleUpdateRange();\n }, [handleUpdateRange]);\n\n useEffect(() => {\n return editor.registerUpdateListener(handleUpdateRange);\n }, [editor, handleUpdateRange]);\n\n const handleEscapeKeydown = useCallback((): boolean => {\n if (range === null) return false;\n setRange(null);\n return true;\n }, [range]);\n\n useEffect(() => {\n return editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n handleEscapeKeydown,\n COMMAND_PRIORITY_HIGH\n );\n }, [editor, handleEscapeKeydown]);\n\n const isCollapsed = useIsSelectionCollapsed();\n\n if (range === null || isCollapsed === null || !isCollapsed) return null;\n\n return (\n <FloatingThreadPortal range={range.range} {...props}>\n {range.threads.map((thread) => (\n <ThreadWrapper\n key={thread.id}\n thread={thread}\n Thread={Thread}\n onEscapeKeydown={handleEscapeKeydown}\n className=\"lb-lexical-floating-threads-thread\"\n />\n ))}\n </FloatingThreadPortal>\n );\n}\n\ninterface FloatingThreadPortalProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n range: Range;\n children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n range,\n children,\n className,\n style,\n ...props\n}: FloatingThreadPortalProps) {\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n } = useFloating({\n strategy: \"absolute\",\n placement: \"bottom\",\n middleware: [\n flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n offset(10),\n hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n shift({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n limiter: limitShift(),\n }),\n size({\n padding: FLOATING_THREAD_COLLISION_PADDING,\n apply({ availableWidth, availableHeight, elements }) {\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-width\",\n `${availableWidth}px`\n );\n elements.floating.style.setProperty(\n \"--lb-lexical-floating-threads-available-height\",\n `${availableHeight}px`\n );\n },\n }),\n ],\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n });\n\n useLayoutEffect(() => {\n setReference({\n getBoundingClientRect: () => range.getBoundingClientRect(),\n });\n }, [setReference, range]);\n\n return (\n <Portal asChild>\n <div\n ref={setFloating}\n {...props}\n style={{\n ...style,\n position: strategy,\n top: 0,\n left: 0,\n transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n minWidth: \"max-content\",\n }}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-lexical-floating lb-lexical-floating-threads\",\n className\n )}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n thread: ThreadData;\n Thread: ComponentType<ThreadProps>;\n onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n thread,\n Thread,\n onEscapeKeydown,\n onKeyDown,\n ...threadProps\n}: ThreadWrapperProps) {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n if (event.key === \"Escape\") {\n onEscapeKeydown();\n }\n },\n [onEscapeKeydown, onKeyDown]\n );\n\n return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n const threadToNodes = useContext(ThreadToNodesContext);\n if (threadToNodes === null) {\n throw new Error(\n \"FloatingThreads component must be used within a LiveblocksPlugin component.\"\n );\n }\n return threadToNodes;\n}\n\nfunction useIsSelectionCollapsed(): boolean | null {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => {\n const selection = $getSelection();\n if (selection === null) return null;\n return selection.isCollapsed();\n });\n }, [editor]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nfunction useActiveThreads() {\n const activeThreads = useContext(ActiveThreadsContext);\n if (activeThreads === null) {\n throw new Error(\n \"FloatingThreads component must be used within LiveblocksPlugin.\"\n );\n }\n\n return activeThreads;\n}\n"],"names":["Thread","DefaultThread","activeElements","range"],"mappings":"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"}
|
package/dist/toolbar/toolbar.cjs
CHANGED
|
@@ -6,9 +6,8 @@ var richText = require('@lexical/rich-text');
|
|
|
6
6
|
var selection = require('@lexical/selection');
|
|
7
7
|
var utils = require('@lexical/utils');
|
|
8
8
|
var _private = require('@liveblocks/react-ui/_private');
|
|
9
|
-
var SelectPrimitive = require('@radix-ui/react-select');
|
|
10
|
-
var TogglePrimitive = require('@radix-ui/react-toggle');
|
|
11
9
|
var lexical = require('lexical');
|
|
10
|
+
var radixUi = require('radix-ui');
|
|
12
11
|
var react = require('react');
|
|
13
12
|
var floatingComposer = require('../comments/floating-composer.cjs');
|
|
14
13
|
var isBlockNodeActive = require('../is-block-node-active.cjs');
|
|
@@ -16,26 +15,6 @@ var isCommandRegistered = require('../is-command-registered.cjs');
|
|
|
16
15
|
var isTextFormatActive = require('../is-text-format-active.cjs');
|
|
17
16
|
var shared = require('./shared.cjs');
|
|
18
17
|
|
|
19
|
-
function _interopNamespaceDefault(e) {
|
|
20
|
-
var n = Object.create(null);
|
|
21
|
-
if (e) {
|
|
22
|
-
Object.keys(e).forEach(function (k) {
|
|
23
|
-
if (k !== 'default') {
|
|
24
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
25
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function () { return e[k]; }
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
n.default = e;
|
|
33
|
-
return Object.freeze(n);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
|
|
37
|
-
var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
|
|
38
|
-
|
|
39
18
|
const BLOCK_SELECT_SIDE_OFFSET = 10;
|
|
40
19
|
const FLOATING_ELEMENT_COLLISION_PADDING = 10;
|
|
41
20
|
function applyToolbarSlot(slot, props) {
|
|
@@ -78,7 +57,7 @@ const ToolbarButton = react.forwardRef(
|
|
|
78
57
|
);
|
|
79
58
|
const ToolbarToggle = react.forwardRef(
|
|
80
59
|
({ active, ...props }, forwardedRef) => {
|
|
81
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Toggle.Root, { asChild: true, pressed: active, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { ref: forwardedRef, ...props }) });
|
|
82
61
|
}
|
|
83
62
|
);
|
|
84
63
|
const ToolbarSeparator = react.forwardRef(
|
|
@@ -323,13 +302,13 @@ const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, f
|
|
|
323
302
|
[onKeyDown, closeFloatingToolbar]
|
|
324
303
|
);
|
|
325
304
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
326
|
-
|
|
305
|
+
radixUi.Select.Root,
|
|
327
306
|
{
|
|
328
307
|
value: activeItem?.name,
|
|
329
308
|
onValueChange: handleItemChange,
|
|
330
309
|
children: [
|
|
331
310
|
/* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, { content: "Turn into\u2026", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
332
|
-
|
|
311
|
+
radixUi.Select.Trigger,
|
|
333
312
|
{
|
|
334
313
|
asChild: true,
|
|
335
314
|
...props,
|
|
@@ -339,15 +318,15 @@ const ToolbarBlockSelector = react.forwardRef(({ items, onKeyDown, ...props }, f
|
|
|
339
318
|
children: /* @__PURE__ */ jsxRuntime.jsx(_private.SelectButton, { variant: "toolbar", children: activeItem?.name ?? "Turn into\u2026" })
|
|
340
319
|
}
|
|
341
320
|
) }),
|
|
342
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
343
|
-
|
|
321
|
+
/* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(shared.FloatingToolbarExternal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
322
|
+
radixUi.Select.Content,
|
|
344
323
|
{
|
|
345
324
|
position: "popper",
|
|
346
325
|
sideOffset: BLOCK_SELECT_SIDE_OFFSET,
|
|
347
326
|
collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
|
|
348
327
|
className: "lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-lexical-block-selector-dropdown",
|
|
349
328
|
children: resolvedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
350
|
-
|
|
329
|
+
radixUi.Select.Item,
|
|
351
330
|
{
|
|
352
331
|
value: item.name,
|
|
353
332
|
className: "lb-dropdown-item",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.cjs","sources":["../../src/toolbar/toolbar.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n $createHeadingNode,\n $createQuoteNode,\n $isHeadingNode,\n} from \"@lexical/rich-text\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n BlockquoteIcon,\n BoldIcon,\n Button,\n CheckIcon,\n cn,\n CodeIcon,\n CommentIcon,\n H1Icon,\n H2Icon,\n H3Icon,\n ItalicIcon,\n RedoIcon,\n SelectButton,\n ShortcutTooltip,\n StrikethroughIcon,\n TextIcon,\n TooltipProvider,\n UnderlineIcon,\n UndoIcon,\n useLiveblocksUiConfig,\n} from \"@liveblocks/react-ui/_private\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport {\n $createParagraphNode,\n $getSelection,\n CAN_REDO_COMMAND,\n CAN_UNDO_COMMAND,\n COMMAND_PRIORITY_CRITICAL,\n COMMAND_PRIORITY_LOW,\n createCommand,\n FORMAT_TEXT_COMMAND,\n type LexicalCommand,\n type LexicalEditor,\n REDO_COMMAND,\n UNDO_COMMAND,\n} from \"lexical\";\nimport type {\n ComponentProps,\n ComponentType,\n KeyboardEvent,\n ReactNode,\n} from \"react\";\nimport {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\n\nimport { OPEN_FLOATING_COMPOSER_COMMAND } from \"../comments/floating-composer\";\nimport { isBlockNodeActive } from \"../is-block-node-active\";\nimport { useIsCommandRegistered } from \"../is-command-registered\";\nimport { isTextFormatActive } from \"../is-text-format-active\";\nimport { FloatingToolbarContext, FloatingToolbarExternal } from \"./shared\";\n\nexport const BLOCK_SELECT_SIDE_OFFSET = 10;\nexport const FLOATING_ELEMENT_COLLISION_PADDING = 10;\n\nexport interface ToolbarSlotProps {\n editor: LexicalEditor;\n}\n\nexport type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;\n\nexport interface ToolbarProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n /**\n * The content of the 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 toolbar.\n */\n before?: ToolbarSlot;\n\n /**\n * The content to display at the end of the toolbar.\n */\n after?: ToolbarSlot;\n}\n\nexport interface ToolbarButtonProps extends ComponentProps<\"button\"> {\n /**\n * The name of this button displayed in its tooltip.\n */\n name: string;\n\n /**\n * An optional icon displayed in this button.\n */\n icon?: ReactNode;\n\n /**\n * An optional keyboard shortcut displayed in this button's tooltip.\n *\n * @example\n * \"Mod-Alt-B\" → \"⌘⌥B\" in Apple environments, \"⌃⌥B\" otherwise\n * \"Ctrl-Shift-Escape\" → \"⌃⇧⎋\"\n * \"Space\" → \"␣\"\n */\n shortcut?: string;\n}\n\nexport interface ToolbarToggleProps extends ToolbarButtonProps {\n /**\n * Whether the button is toggled.\n */\n active: boolean;\n}\n\nexport type ToolbarSeparatorProps = ComponentProps<\"div\">;\n\nexport interface ToolbarBlockSelectorItem {\n /**\n * The name of this block element, displayed as the label of this item.\n */\n name: string;\n\n /**\n * Optionally replace the name used as the label of this item by any content.\n */\n label?: ReactNode;\n\n /**\n * An optional icon displayed in this item.\n */\n icon?: ReactNode;\n\n /**\n * Whether this block element is currently active.\n * Set to `\"default\"` to display this item when no other item is active.\n */\n isActive: ((editor: LexicalEditor) => boolean) | \"default\";\n\n /**\n * A callback invoked when this item is selected.\n */\n setActive: (editor: LexicalEditor) => void;\n}\n\nexport interface ToolbarBlockSelectorProps extends ComponentProps<\"button\"> {\n /**\n * The items displayed in this block selector.\n * When provided as an array, the default items are overridden. To avoid this,\n * a function can be provided instead and it will receive the default items.\n *\n * @example\n * <Toolbar.BlockSelector\n * items={[\n * {\n * name: \"Text\",\n * isActive: \"default\",\n * setActive: () => { ... },\n * },\n * {\n * name: \"Heading 1\",\n * isActive: () => { ... },\n * setActive: () => { ... },\n * },\n * ]}\n * />\n *\n * @example\n * <Toolbar.BlockSelector\n * items={(defaultItems) => [\n * ...defaultItems,\n * {\n * name: \"Custom block\",\n * isActive: () => { ... },\n * setActive: () => { ... },\n * },\n * ]}\n * />\n */\n items?:\n | ToolbarBlockSelectorItem[]\n | ((\n defaultItems: ToolbarBlockSelectorItem[]\n ) => ToolbarBlockSelectorItem[]);\n}\n\nexport function applyToolbarSlot(\n slot: ToolbarSlot,\n props: ToolbarSlotProps\n): ReactNode {\n if (typeof slot === \"function\") {\n const Component = slot;\n\n return <Component {...props} />;\n }\n\n return slot;\n}\n\nconst ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n ({ icon, children, name, shortcut, onKeyDown, ...props }, forwardedRef) => {\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const closeFloatingToolbar = floatingToolbarContext?.close;\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (\n !event.isDefaultPrevented() &&\n closeFloatingToolbar &&\n event.key === \"Escape\"\n ) {\n closeFloatingToolbar();\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [onKeyDown, closeFloatingToolbar]\n );\n\n return (\n <ShortcutTooltip content={name} shortcut={shortcut}>\n <Button\n type=\"button\"\n variant=\"toolbar\"\n ref={forwardedRef}\n icon={icon}\n aria-label={!children ? name : undefined}\n // Safari doesn't mark buttons as focusable, which breaks `relatedTarget`\n // in focus/blur events. https://bugs.webkit.org/show_bug.cgi?id=254655\n tabIndex={0}\n {...props}\n onKeyDown={handleKeyDown}\n >\n {!children && !icon ? name : children}\n </Button>\n </ShortcutTooltip>\n );\n }\n);\n\nconst ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>(\n ({ active, ...props }, forwardedRef) => {\n return (\n <TogglePrimitive.Root asChild pressed={active}>\n <ToolbarButton ref={forwardedRef} {...props} />\n </TogglePrimitive.Root>\n );\n }\n);\n\nconst ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <div\n ref={forwardedRef}\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={cn(\"lb-lexical-toolbar-separator\", className)}\n {...props}\n />\n );\n }\n);\n\nfunction ToolbarSectionHistory() {\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n useEffect(() => {\n const unregister = mergeRegister(\n editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n ),\n editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n )\n );\n\n return unregister;\n }, [editor]);\n\n return (\n <>\n <ToolbarButton\n name=\"Undo\"\n icon={<UndoIcon />}\n shortcut=\"Mod-Z\"\n onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}\n disabled={!canUndo}\n />\n <ToolbarButton\n name=\"Redo\"\n icon={<RedoIcon />}\n shortcut=\"Mod-Shift-Z\"\n onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}\n disabled={!canRedo}\n />\n </>\n );\n}\n\nfunction ToolbarSectionInline() {\n const [editor] = useLexicalComposerContext();\n const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);\n\n return supportsTextFormat ? (\n <>\n <ToolbarToggle\n name=\"Bold\"\n icon={<BoldIcon />}\n shortcut=\"Mod-B\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\")}\n active={isTextFormatActive(editor, \"bold\")}\n />\n\n <ToolbarToggle\n name=\"Italic\"\n icon={<ItalicIcon />}\n shortcut=\"Mod-I\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\")}\n active={isTextFormatActive(editor, \"italic\")}\n />\n <ToolbarToggle\n name=\"Underline\"\n icon={<UnderlineIcon />}\n shortcut=\"Mod-U\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\")}\n active={isTextFormatActive(editor, \"underline\")}\n />\n <ToolbarToggle\n name=\"Strikethrough\"\n icon={<StrikethroughIcon />}\n onClick={() =>\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"strikethrough\")\n }\n active={isTextFormatActive(editor, \"strikethrough\")}\n />\n <ToolbarToggle\n name=\"Inline code\"\n icon={<CodeIcon />}\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\")}\n active={isTextFormatActive(editor, \"code\")}\n />\n </>\n ) : null;\n}\n\nfunction ToolbarSectionCollaboration() {\n const [editor] = useLexicalComposerContext();\n const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);\n\n return (\n <>\n {supportsThread ? (\n <ToolbarButton\n name=\"Add a comment\"\n icon={<CommentIcon />}\n onClick={() =>\n editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND, undefined)\n }\n >\n Comment\n </ToolbarButton>\n ) : null}\n </>\n );\n}\n\nfunction DefaultToolbarContent() {\n const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);\n const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);\n\n return (\n <>\n <ToolbarSectionHistory />\n {supportsTextFormat ? (\n <>\n <ToolbarSeparator />\n <ToolbarBlockSelector />\n <ToolbarSectionInline />\n </>\n ) : null}\n {supportsThread ? (\n <>\n <ToolbarSeparator />\n <ToolbarSectionCollaboration />\n </>\n ) : null}\n </>\n );\n}\n\nconst INITIAL_COMMANDS_REGISTERED_COMMAND: LexicalCommand<void> = createCommand(\n \"INITIAL_COMMANDS_REGISTERED_COMMAND\"\n);\n\n// Re-renders its surrounding component.\nfunction useRerender() {\n const [, setRerender] = useState(false);\n\n return useCallback(() => {\n setRerender((toggle) => !toggle);\n }, [setRerender]);\n}\n\nfunction createDefaultBlockSelectorItems(): ToolbarBlockSelectorItem[] {\n const items: (ToolbarBlockSelectorItem | null)[] = [\n {\n name: \"Text\",\n icon: <TextIcon />,\n isActive: \"default\",\n setActive: () =>\n $setBlocksType($getSelection(), () => $createParagraphNode()),\n },\n {\n name: \"Heading 1\",\n icon: <H1Icon />,\n isActive: (editor) => {\n return isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h1\" : false\n );\n },\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h1\")),\n },\n {\n name: \"Heading 2\",\n icon: <H2Icon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h2\" : false\n ),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h2\")),\n },\n {\n name: \"Heading 3\",\n icon: <H3Icon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h3\" : false\n ),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h3\")),\n },\n {\n name: \"Blockquote\",\n icon: <BlockquoteIcon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) => node.getType() === \"quote\"),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createQuoteNode()),\n },\n ];\n\n return items.filter(Boolean) as ToolbarBlockSelectorItem[];\n}\n\nconst ToolbarBlockSelector = forwardRef<\n HTMLButtonElement,\n ToolbarBlockSelectorProps\n>(({ items, onKeyDown, ...props }, forwardedRef) => {\n const { portalContainer } = useLiveblocksUiConfig();\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const closeFloatingToolbar = floatingToolbarContext?.close;\n const [editor] = useLexicalComposerContext();\n const resolvedItems = useMemo(() => {\n if (Array.isArray(items)) {\n return items;\n }\n\n const defaultItems = createDefaultBlockSelectorItems();\n\n return items ? items(defaultItems) : defaultItems;\n }, [items]);\n let defaultItem: ToolbarBlockSelectorItem | undefined;\n let activeItem = resolvedItems.find((item) => {\n if (item.isActive === \"default\") {\n defaultItem = item;\n return false;\n }\n\n return item.isActive(editor);\n });\n\n if (!activeItem) {\n activeItem = defaultItem;\n }\n\n const handleItemChange = (name: string) => {\n const item = resolvedItems.find((item) => item.name === name);\n\n if (item) {\n editor.update(() => item.setActive(editor));\n\n // If present in a floating toolbar, close it on change\n floatingToolbarContext?.close();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (\n !event.isDefaultPrevented() &&\n closeFloatingToolbar &&\n event.key === \"Escape\"\n ) {\n closeFloatingToolbar();\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [onKeyDown, closeFloatingToolbar]\n );\n\n return (\n <SelectPrimitive.Root\n value={activeItem?.name}\n onValueChange={handleItemChange}\n >\n <ShortcutTooltip content=\"Turn into…\">\n <SelectPrimitive.Trigger\n asChild\n {...props}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n disabled={resolvedItems.length === 0}\n >\n <SelectButton variant=\"toolbar\">\n {activeItem?.name ?? \"Turn into…\"}\n </SelectButton>\n </SelectPrimitive.Trigger>\n </ShortcutTooltip>\n <SelectPrimitive.Portal container={portalContainer}>\n <FloatingToolbarExternal>\n <SelectPrimitive.Content\n position=\"popper\"\n sideOffset={BLOCK_SELECT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className=\"lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-lexical-block-selector-dropdown\"\n >\n {resolvedItems.map((item) => (\n <SelectPrimitive.Item\n key={item.name}\n value={item.name}\n className=\"lb-dropdown-item\"\n data-name={item.name}\n >\n {item.icon ? (\n <span className=\"lb-dropdown-item-icon lb-icon-container\">\n {item.icon}\n </span>\n ) : null}\n <span className=\"lb-dropdown-item-label\">\n {item.label ?? item.name}\n </span>\n {item.name === activeItem?.name ? (\n <span className=\"lb-dropdown-item-accessory lb-icon-container\">\n <CheckIcon />\n </span>\n ) : null}\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Content>\n </FloatingToolbarExternal>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n );\n});\n\n/**\n * A static toolbar containing actions and values related to the editor.\n *\n * @example\n * <Toolbar />\n *\n * @example\n * <Toolbar >\n * <Toolbar.BlockSelector />\n * <Toolbar.Separator />\n * <Toolbar.SectionInline />\n * <Toolbar.Separator />\n * <Toolbar.Button name=\"Custom action\" onClick={() => { ... }} icon={<Icon.QuestionMark />} />\n * </Toolbar>\n */\nexport const Toolbar = Object.assign(\n forwardRef<HTMLDivElement, ToolbarProps>(\n (\n { before, after, children = DefaultToolbarContent, className, ...props },\n forwardedRef\n ) => {\n const [editor] = useLexicalComposerContext();\n const [commandsRegistered, setCommandsRegistered] = useState(false);\n const rerender = useRerender();\n\n const slotProps: ToolbarSlotProps = { editor };\n\n // Ensures that `useIsCommandRegistered` returns correct values initially.\n // It registers a low-priority one-time command to re-render once all initial commands are registered.\n useEffect(() => {\n if (commandsRegistered) {\n return;\n }\n\n const unregister = editor.registerCommand(\n INITIAL_COMMANDS_REGISTERED_COMMAND,\n () => {\n setCommandsRegistered(true);\n return true;\n },\n COMMAND_PRIORITY_LOW\n );\n\n editor.dispatchCommand(INITIAL_COMMANDS_REGISTERED_COMMAND, undefined);\n\n return unregister;\n }, [editor, commandsRegistered]);\n\n // Re-render when the selection changes to ensure components like toggles are updated.\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 rerender();\n });\n });\n\n return unregister;\n }, [editor, rerender]);\n\n return (\n <TooltipProvider>\n <div\n ref={forwardedRef}\n role=\"toolbar\"\n aria-label=\"Toolbar\"\n aria-orientation=\"horizontal\"\n className={cn(\"lb-root lb-lexical-toolbar\", className)}\n {...props}\n >\n {applyToolbarSlot(before, slotProps)}\n {applyToolbarSlot(children, slotProps)}\n {applyToolbarSlot(after, slotProps)}\n </div>\n </TooltipProvider>\n );\n }\n ),\n {\n /**\n * A button for triggering actions.\n *\n * @example\n * <Toolbar.Button name=\"Comment\" shortcut=\"Mod-Shift-E\" onClick={() => { ... }} />\n *\n * @example\n * <Toolbar.Button name=\"Mention someone\" icon={<Icon.Mention />} onClick={() => { ... }} />\n */\n Button: ToolbarButton,\n\n /**\n * A toggle button for values that can be active or inactive.\n *\n * @example\n * <Toolbar.Toggle name=\"Bold\" active={isBold} />\n *\n * @example\n * <Toolbar.Toggle name=\"Italic\" icon={<Icon.Italic />} shortcut=\"Mod-I\" active={isItalic} onClick={() => { ... }} />\n */\n Toggle: ToolbarToggle,\n\n /**\n * A dropdown selector to switch between different block types.\n *\n * @example\n * <Toolbar.BlockSelector />\n */\n BlockSelector: ToolbarBlockSelector,\n\n /**\n * A visual (and accessible) separator to separate sections in a toolbar.\n */\n Separator: ToolbarSeparator,\n\n /**\n * A section containing history actions. (e.g. undo, redo)\n */\n SectionHistory: ToolbarSectionHistory,\n\n /**\n * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)\n */\n SectionInline: ToolbarSectionInline,\n\n /**\n * A section containing collaborative actions. (e.g. adding a comment)\n */\n SectionCollaboration: ToolbarSectionCollaboration,\n }\n);\n"],"names":["jsx","forwardRef","useContext","FloatingToolbarContext","useCallback","ShortcutTooltip","Button","TogglePrimitive","cn","useLexicalComposerContext","useState","useEffect","mergeRegister","CAN_UNDO_COMMAND","COMMAND_PRIORITY_CRITICAL","CAN_REDO_COMMAND","jsxs","Fragment","UndoIcon","UNDO_COMMAND","RedoIcon","REDO_COMMAND","useIsCommandRegistered","FORMAT_TEXT_COMMAND","BoldIcon","isTextFormatActive","ItalicIcon","UnderlineIcon","StrikethroughIcon","CodeIcon","OPEN_FLOATING_COMPOSER_COMMAND","CommentIcon","createCommand","TextIcon","$setBlocksType","$getSelection","$createParagraphNode","H1Icon","isBlockNodeActive","$isHeadingNode","$createHeadingNode","H2Icon","H3Icon","BlockquoteIcon","$createQuoteNode","useLiveblocksUiConfig","useMemo","item","SelectPrimitive","SelectButton","FloatingToolbarExternal","CheckIcon","COMMAND_PRIORITY_LOW","TooltipProvider"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toolbar.cjs","sources":["../../src/toolbar/toolbar.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n $createHeadingNode,\n $createQuoteNode,\n $isHeadingNode,\n} from \"@lexical/rich-text\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n BlockquoteIcon,\n BoldIcon,\n Button,\n CheckIcon,\n cn,\n CodeIcon,\n CommentIcon,\n H1Icon,\n H2Icon,\n H3Icon,\n ItalicIcon,\n RedoIcon,\n SelectButton,\n ShortcutTooltip,\n StrikethroughIcon,\n TextIcon,\n TooltipProvider,\n UnderlineIcon,\n UndoIcon,\n useLiveblocksUiConfig,\n} from \"@liveblocks/react-ui/_private\";\nimport {\n $createParagraphNode,\n $getSelection,\n CAN_REDO_COMMAND,\n CAN_UNDO_COMMAND,\n COMMAND_PRIORITY_CRITICAL,\n COMMAND_PRIORITY_LOW,\n createCommand,\n FORMAT_TEXT_COMMAND,\n type LexicalCommand,\n type LexicalEditor,\n REDO_COMMAND,\n UNDO_COMMAND,\n} from \"lexical\";\nimport { Select as SelectPrimitive, Toggle as TogglePrimitive } from \"radix-ui\";\nimport type {\n ComponentProps,\n ComponentType,\n KeyboardEvent,\n ReactNode,\n} from \"react\";\nimport {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\n\nimport { OPEN_FLOATING_COMPOSER_COMMAND } from \"../comments/floating-composer\";\nimport { isBlockNodeActive } from \"../is-block-node-active\";\nimport { useIsCommandRegistered } from \"../is-command-registered\";\nimport { isTextFormatActive } from \"../is-text-format-active\";\nimport { FloatingToolbarContext, FloatingToolbarExternal } from \"./shared\";\n\nexport const BLOCK_SELECT_SIDE_OFFSET = 10;\nexport const FLOATING_ELEMENT_COLLISION_PADDING = 10;\n\nexport interface ToolbarSlotProps {\n editor: LexicalEditor;\n}\n\nexport type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;\n\nexport interface ToolbarProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n /**\n * The content of the 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 toolbar.\n */\n before?: ToolbarSlot;\n\n /**\n * The content to display at the end of the toolbar.\n */\n after?: ToolbarSlot;\n}\n\nexport interface ToolbarButtonProps extends ComponentProps<\"button\"> {\n /**\n * The name of this button displayed in its tooltip.\n */\n name: string;\n\n /**\n * An optional icon displayed in this button.\n */\n icon?: ReactNode;\n\n /**\n * An optional keyboard shortcut displayed in this button's tooltip.\n *\n * @example\n * \"Mod-Alt-B\" → \"⌘⌥B\" in Apple environments, \"⌃⌥B\" otherwise\n * \"Ctrl-Shift-Escape\" → \"⌃⇧⎋\"\n * \"Space\" → \"␣\"\n */\n shortcut?: string;\n}\n\nexport interface ToolbarToggleProps extends ToolbarButtonProps {\n /**\n * Whether the button is toggled.\n */\n active: boolean;\n}\n\nexport type ToolbarSeparatorProps = ComponentProps<\"div\">;\n\nexport interface ToolbarBlockSelectorItem {\n /**\n * The name of this block element, displayed as the label of this item.\n */\n name: string;\n\n /**\n * Optionally replace the name used as the label of this item by any content.\n */\n label?: ReactNode;\n\n /**\n * An optional icon displayed in this item.\n */\n icon?: ReactNode;\n\n /**\n * Whether this block element is currently active.\n * Set to `\"default\"` to display this item when no other item is active.\n */\n isActive: ((editor: LexicalEditor) => boolean) | \"default\";\n\n /**\n * A callback invoked when this item is selected.\n */\n setActive: (editor: LexicalEditor) => void;\n}\n\nexport interface ToolbarBlockSelectorProps extends ComponentProps<\"button\"> {\n /**\n * The items displayed in this block selector.\n * When provided as an array, the default items are overridden. To avoid this,\n * a function can be provided instead and it will receive the default items.\n *\n * @example\n * <Toolbar.BlockSelector\n * items={[\n * {\n * name: \"Text\",\n * isActive: \"default\",\n * setActive: () => { ... },\n * },\n * {\n * name: \"Heading 1\",\n * isActive: () => { ... },\n * setActive: () => { ... },\n * },\n * ]}\n * />\n *\n * @example\n * <Toolbar.BlockSelector\n * items={(defaultItems) => [\n * ...defaultItems,\n * {\n * name: \"Custom block\",\n * isActive: () => { ... },\n * setActive: () => { ... },\n * },\n * ]}\n * />\n */\n items?:\n | ToolbarBlockSelectorItem[]\n | ((\n defaultItems: ToolbarBlockSelectorItem[]\n ) => ToolbarBlockSelectorItem[]);\n}\n\nexport function applyToolbarSlot(\n slot: ToolbarSlot,\n props: ToolbarSlotProps\n): ReactNode {\n if (typeof slot === \"function\") {\n const Component = slot;\n\n return <Component {...props} />;\n }\n\n return slot;\n}\n\nconst ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n ({ icon, children, name, shortcut, onKeyDown, ...props }, forwardedRef) => {\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const closeFloatingToolbar = floatingToolbarContext?.close;\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (\n !event.isDefaultPrevented() &&\n closeFloatingToolbar &&\n event.key === \"Escape\"\n ) {\n closeFloatingToolbar();\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [onKeyDown, closeFloatingToolbar]\n );\n\n return (\n <ShortcutTooltip content={name} shortcut={shortcut}>\n <Button\n type=\"button\"\n variant=\"toolbar\"\n ref={forwardedRef}\n icon={icon}\n aria-label={!children ? name : undefined}\n // Safari doesn't mark buttons as focusable, which breaks `relatedTarget`\n // in focus/blur events. https://bugs.webkit.org/show_bug.cgi?id=254655\n tabIndex={0}\n {...props}\n onKeyDown={handleKeyDown}\n >\n {!children && !icon ? name : children}\n </Button>\n </ShortcutTooltip>\n );\n }\n);\n\nconst ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>(\n ({ active, ...props }, forwardedRef) => {\n return (\n <TogglePrimitive.Root asChild pressed={active}>\n <ToolbarButton ref={forwardedRef} {...props} />\n </TogglePrimitive.Root>\n );\n }\n);\n\nconst ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <div\n ref={forwardedRef}\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={cn(\"lb-lexical-toolbar-separator\", className)}\n {...props}\n />\n );\n }\n);\n\nfunction ToolbarSectionHistory() {\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n useEffect(() => {\n const unregister = mergeRegister(\n editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n ),\n editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n )\n );\n\n return unregister;\n }, [editor]);\n\n return (\n <>\n <ToolbarButton\n name=\"Undo\"\n icon={<UndoIcon />}\n shortcut=\"Mod-Z\"\n onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}\n disabled={!canUndo}\n />\n <ToolbarButton\n name=\"Redo\"\n icon={<RedoIcon />}\n shortcut=\"Mod-Shift-Z\"\n onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}\n disabled={!canRedo}\n />\n </>\n );\n}\n\nfunction ToolbarSectionInline() {\n const [editor] = useLexicalComposerContext();\n const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);\n\n return supportsTextFormat ? (\n <>\n <ToolbarToggle\n name=\"Bold\"\n icon={<BoldIcon />}\n shortcut=\"Mod-B\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\")}\n active={isTextFormatActive(editor, \"bold\")}\n />\n\n <ToolbarToggle\n name=\"Italic\"\n icon={<ItalicIcon />}\n shortcut=\"Mod-I\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\")}\n active={isTextFormatActive(editor, \"italic\")}\n />\n <ToolbarToggle\n name=\"Underline\"\n icon={<UnderlineIcon />}\n shortcut=\"Mod-U\"\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\")}\n active={isTextFormatActive(editor, \"underline\")}\n />\n <ToolbarToggle\n name=\"Strikethrough\"\n icon={<StrikethroughIcon />}\n onClick={() =>\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"strikethrough\")\n }\n active={isTextFormatActive(editor, \"strikethrough\")}\n />\n <ToolbarToggle\n name=\"Inline code\"\n icon={<CodeIcon />}\n onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\")}\n active={isTextFormatActive(editor, \"code\")}\n />\n </>\n ) : null;\n}\n\nfunction ToolbarSectionCollaboration() {\n const [editor] = useLexicalComposerContext();\n const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);\n\n return (\n <>\n {supportsThread ? (\n <ToolbarButton\n name=\"Add a comment\"\n icon={<CommentIcon />}\n onClick={() =>\n editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND, undefined)\n }\n >\n Comment\n </ToolbarButton>\n ) : null}\n </>\n );\n}\n\nfunction DefaultToolbarContent() {\n const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);\n const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);\n\n return (\n <>\n <ToolbarSectionHistory />\n {supportsTextFormat ? (\n <>\n <ToolbarSeparator />\n <ToolbarBlockSelector />\n <ToolbarSectionInline />\n </>\n ) : null}\n {supportsThread ? (\n <>\n <ToolbarSeparator />\n <ToolbarSectionCollaboration />\n </>\n ) : null}\n </>\n );\n}\n\nconst INITIAL_COMMANDS_REGISTERED_COMMAND: LexicalCommand<void> = createCommand(\n \"INITIAL_COMMANDS_REGISTERED_COMMAND\"\n);\n\n// Re-renders its surrounding component.\nfunction useRerender() {\n const [, setRerender] = useState(false);\n\n return useCallback(() => {\n setRerender((toggle) => !toggle);\n }, [setRerender]);\n}\n\nfunction createDefaultBlockSelectorItems(): ToolbarBlockSelectorItem[] {\n const items: (ToolbarBlockSelectorItem | null)[] = [\n {\n name: \"Text\",\n icon: <TextIcon />,\n isActive: \"default\",\n setActive: () =>\n $setBlocksType($getSelection(), () => $createParagraphNode()),\n },\n {\n name: \"Heading 1\",\n icon: <H1Icon />,\n isActive: (editor) => {\n return isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h1\" : false\n );\n },\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h1\")),\n },\n {\n name: \"Heading 2\",\n icon: <H2Icon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h2\" : false\n ),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h2\")),\n },\n {\n name: \"Heading 3\",\n icon: <H3Icon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) =>\n $isHeadingNode(node) ? node.getTag() === \"h3\" : false\n ),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createHeadingNode(\"h3\")),\n },\n {\n name: \"Blockquote\",\n icon: <BlockquoteIcon />,\n isActive: (editor) =>\n isBlockNodeActive(editor, (node) => node.getType() === \"quote\"),\n setActive: () =>\n $setBlocksType($getSelection(), () => $createQuoteNode()),\n },\n ];\n\n return items.filter(Boolean) as ToolbarBlockSelectorItem[];\n}\n\nconst ToolbarBlockSelector = forwardRef<\n HTMLButtonElement,\n ToolbarBlockSelectorProps\n>(({ items, onKeyDown, ...props }, forwardedRef) => {\n const { portalContainer } = useLiveblocksUiConfig();\n const floatingToolbarContext = useContext(FloatingToolbarContext);\n const closeFloatingToolbar = floatingToolbarContext?.close;\n const [editor] = useLexicalComposerContext();\n const resolvedItems = useMemo(() => {\n if (Array.isArray(items)) {\n return items;\n }\n\n const defaultItems = createDefaultBlockSelectorItems();\n\n return items ? items(defaultItems) : defaultItems;\n }, [items]);\n let defaultItem: ToolbarBlockSelectorItem | undefined;\n let activeItem = resolvedItems.find((item) => {\n if (item.isActive === \"default\") {\n defaultItem = item;\n return false;\n }\n\n return item.isActive(editor);\n });\n\n if (!activeItem) {\n activeItem = defaultItem;\n }\n\n const handleItemChange = (name: string) => {\n const item = resolvedItems.find((item) => item.name === name);\n\n if (item) {\n editor.update(() => item.setActive(editor));\n\n // If present in a floating toolbar, close it on change\n floatingToolbarContext?.close();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (\n !event.isDefaultPrevented() &&\n closeFloatingToolbar &&\n event.key === \"Escape\"\n ) {\n closeFloatingToolbar();\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [onKeyDown, closeFloatingToolbar]\n );\n\n return (\n <SelectPrimitive.Root\n value={activeItem?.name}\n onValueChange={handleItemChange}\n >\n <ShortcutTooltip content=\"Turn into…\">\n <SelectPrimitive.Trigger\n asChild\n {...props}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n disabled={resolvedItems.length === 0}\n >\n <SelectButton variant=\"toolbar\">\n {activeItem?.name ?? \"Turn into…\"}\n </SelectButton>\n </SelectPrimitive.Trigger>\n </ShortcutTooltip>\n <SelectPrimitive.Portal container={portalContainer}>\n <FloatingToolbarExternal>\n <SelectPrimitive.Content\n position=\"popper\"\n sideOffset={BLOCK_SELECT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className=\"lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-lexical-block-selector-dropdown\"\n >\n {resolvedItems.map((item) => (\n <SelectPrimitive.Item\n key={item.name}\n value={item.name}\n className=\"lb-dropdown-item\"\n data-name={item.name}\n >\n {item.icon ? (\n <span className=\"lb-dropdown-item-icon lb-icon-container\">\n {item.icon}\n </span>\n ) : null}\n <span className=\"lb-dropdown-item-label\">\n {item.label ?? item.name}\n </span>\n {item.name === activeItem?.name ? (\n <span className=\"lb-dropdown-item-accessory lb-icon-container\">\n <CheckIcon />\n </span>\n ) : null}\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Content>\n </FloatingToolbarExternal>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n );\n});\n\n/**\n * A static toolbar containing actions and values related to the editor.\n *\n * @example\n * <Toolbar />\n *\n * @example\n * <Toolbar >\n * <Toolbar.BlockSelector />\n * <Toolbar.Separator />\n * <Toolbar.SectionInline />\n * <Toolbar.Separator />\n * <Toolbar.Button name=\"Custom action\" onClick={() => { ... }} icon={<Icon.QuestionMark />} />\n * </Toolbar>\n */\nexport const Toolbar = Object.assign(\n forwardRef<HTMLDivElement, ToolbarProps>(\n (\n { before, after, children = DefaultToolbarContent, className, ...props },\n forwardedRef\n ) => {\n const [editor] = useLexicalComposerContext();\n const [commandsRegistered, setCommandsRegistered] = useState(false);\n const rerender = useRerender();\n\n const slotProps: ToolbarSlotProps = { editor };\n\n // Ensures that `useIsCommandRegistered` returns correct values initially.\n // It registers a low-priority one-time command to re-render once all initial commands are registered.\n useEffect(() => {\n if (commandsRegistered) {\n return;\n }\n\n const unregister = editor.registerCommand(\n INITIAL_COMMANDS_REGISTERED_COMMAND,\n () => {\n setCommandsRegistered(true);\n return true;\n },\n COMMAND_PRIORITY_LOW\n );\n\n editor.dispatchCommand(INITIAL_COMMANDS_REGISTERED_COMMAND, undefined);\n\n return unregister;\n }, [editor, commandsRegistered]);\n\n // Re-render when the selection changes to ensure components like toggles are updated.\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 rerender();\n });\n });\n\n return unregister;\n }, [editor, rerender]);\n\n return (\n <TooltipProvider>\n <div\n ref={forwardedRef}\n role=\"toolbar\"\n aria-label=\"Toolbar\"\n aria-orientation=\"horizontal\"\n className={cn(\"lb-root lb-lexical-toolbar\", className)}\n {...props}\n >\n {applyToolbarSlot(before, slotProps)}\n {applyToolbarSlot(children, slotProps)}\n {applyToolbarSlot(after, slotProps)}\n </div>\n </TooltipProvider>\n );\n }\n ),\n {\n /**\n * A button for triggering actions.\n *\n * @example\n * <Toolbar.Button name=\"Comment\" shortcut=\"Mod-Shift-E\" onClick={() => { ... }} />\n *\n * @example\n * <Toolbar.Button name=\"Mention someone\" icon={<Icon.Mention />} onClick={() => { ... }} />\n */\n Button: ToolbarButton,\n\n /**\n * A toggle button for values that can be active or inactive.\n *\n * @example\n * <Toolbar.Toggle name=\"Bold\" active={isBold} />\n *\n * @example\n * <Toolbar.Toggle name=\"Italic\" icon={<Icon.Italic />} shortcut=\"Mod-I\" active={isItalic} onClick={() => { ... }} />\n */\n Toggle: ToolbarToggle,\n\n /**\n * A dropdown selector to switch between different block types.\n *\n * @example\n * <Toolbar.BlockSelector />\n */\n BlockSelector: ToolbarBlockSelector,\n\n /**\n * A visual (and accessible) separator to separate sections in a toolbar.\n */\n Separator: ToolbarSeparator,\n\n /**\n * A section containing history actions. (e.g. undo, redo)\n */\n SectionHistory: ToolbarSectionHistory,\n\n /**\n * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)\n */\n SectionInline: ToolbarSectionInline,\n\n /**\n * A section containing collaborative actions. (e.g. adding a comment)\n */\n SectionCollaboration: ToolbarSectionCollaboration,\n }\n);\n"],"names":["jsx","forwardRef","useContext","FloatingToolbarContext","useCallback","ShortcutTooltip","Button","TogglePrimitive","cn","useLexicalComposerContext","useState","useEffect","mergeRegister","CAN_UNDO_COMMAND","COMMAND_PRIORITY_CRITICAL","CAN_REDO_COMMAND","jsxs","Fragment","UndoIcon","UNDO_COMMAND","RedoIcon","REDO_COMMAND","useIsCommandRegistered","FORMAT_TEXT_COMMAND","BoldIcon","isTextFormatActive","ItalicIcon","UnderlineIcon","StrikethroughIcon","CodeIcon","OPEN_FLOATING_COMPOSER_COMMAND","CommentIcon","createCommand","TextIcon","$setBlocksType","$getSelection","$createParagraphNode","H1Icon","isBlockNodeActive","$isHeadingNode","$createHeadingNode","H2Icon","H3Icon","BlockquoteIcon","$createQuoteNode","useLiveblocksUiConfig","useMemo","item","SelectPrimitive","SelectButton","FloatingToolbarExternal","CheckIcon","COMMAND_PRIORITY_LOW","TooltipProvider"],"mappings":"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"}
|
package/dist/toolbar/toolbar.js
CHANGED
|
@@ -4,9 +4,8 @@ import { $isHeadingNode, $createHeadingNode, $createQuoteNode } from '@lexical/r
|
|
|
4
4
|
import { $setBlocksType } from '@lexical/selection';
|
|
5
5
|
import { mergeRegister } from '@lexical/utils';
|
|
6
6
|
import { ShortcutTooltip, Button, cn, UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, CommentIcon, TextIcon, H1Icon, H2Icon, H3Icon, BlockquoteIcon, useLiveblocksUiConfig, SelectButton, CheckIcon, TooltipProvider } from '@liveblocks/react-ui/_private';
|
|
7
|
-
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
8
|
-
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
9
7
|
import { CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND, FORMAT_TEXT_COMMAND, createCommand, $getSelection, $createParagraphNode, COMMAND_PRIORITY_LOW } from 'lexical';
|
|
8
|
+
import { Toggle, Select } from 'radix-ui';
|
|
10
9
|
import { forwardRef, useContext, useCallback, useState, useEffect, useMemo } from 'react';
|
|
11
10
|
import { OPEN_FLOATING_COMPOSER_COMMAND } from '../comments/floating-composer.js';
|
|
12
11
|
import { isBlockNodeActive } from '../is-block-node-active.js';
|
|
@@ -56,7 +55,7 @@ const ToolbarButton = forwardRef(
|
|
|
56
55
|
);
|
|
57
56
|
const ToolbarToggle = forwardRef(
|
|
58
57
|
({ active, ...props }, forwardedRef) => {
|
|
59
|
-
return /* @__PURE__ */ jsx(
|
|
58
|
+
return /* @__PURE__ */ jsx(Toggle.Root, { asChild: true, pressed: active, children: /* @__PURE__ */ jsx(ToolbarButton, { ref: forwardedRef, ...props }) });
|
|
60
59
|
}
|
|
61
60
|
);
|
|
62
61
|
const ToolbarSeparator = forwardRef(
|
|
@@ -301,13 +300,13 @@ const ToolbarBlockSelector = forwardRef(({ items, onKeyDown, ...props }, forward
|
|
|
301
300
|
[onKeyDown, closeFloatingToolbar]
|
|
302
301
|
);
|
|
303
302
|
return /* @__PURE__ */ jsxs(
|
|
304
|
-
|
|
303
|
+
Select.Root,
|
|
305
304
|
{
|
|
306
305
|
value: activeItem?.name,
|
|
307
306
|
onValueChange: handleItemChange,
|
|
308
307
|
children: [
|
|
309
308
|
/* @__PURE__ */ jsx(ShortcutTooltip, { content: "Turn into\u2026", children: /* @__PURE__ */ jsx(
|
|
310
|
-
|
|
309
|
+
Select.Trigger,
|
|
311
310
|
{
|
|
312
311
|
asChild: true,
|
|
313
312
|
...props,
|
|
@@ -317,15 +316,15 @@ const ToolbarBlockSelector = forwardRef(({ items, onKeyDown, ...props }, forward
|
|
|
317
316
|
children: /* @__PURE__ */ jsx(SelectButton, { variant: "toolbar", children: activeItem?.name ?? "Turn into\u2026" })
|
|
318
317
|
}
|
|
319
318
|
) }),
|
|
320
|
-
/* @__PURE__ */ jsx(
|
|
321
|
-
|
|
319
|
+
/* @__PURE__ */ jsx(Select.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(FloatingToolbarExternal, { children: /* @__PURE__ */ jsx(
|
|
320
|
+
Select.Content,
|
|
322
321
|
{
|
|
323
322
|
position: "popper",
|
|
324
323
|
sideOffset: BLOCK_SELECT_SIDE_OFFSET,
|
|
325
324
|
collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
|
|
326
325
|
className: "lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-lexical-block-selector-dropdown",
|
|
327
326
|
children: resolvedItems.map((item) => /* @__PURE__ */ jsxs(
|
|
328
|
-
|
|
327
|
+
Select.Item,
|
|
329
328
|
{
|
|
330
329
|
value: item.name,
|
|
331
330
|
className: "lb-dropdown-item",
|