@liveblocks/react-lexical 2.18.2 → 2.18.4-uns1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{classnames.mjs → classnames.cjs} +4 -2
- package/dist/{classnames.mjs.map → classnames.cjs.map} +1 -1
- package/dist/classnames.js +1 -3
- package/dist/classnames.js.map +1 -1
- package/dist/comments/{anchored-threads.mjs → anchored-threads.cjs} +44 -41
- package/dist/comments/{anchored-threads.mjs.map → anchored-threads.cjs.map} +1 -1
- package/dist/comments/anchored-threads.js +40 -43
- package/dist/comments/anchored-threads.js.map +1 -1
- package/dist/comments/{comment-plugin-provider.mjs → comment-plugin-provider.cjs} +62 -55
- package/dist/comments/{comment-plugin-provider.mjs.map → comment-plugin-provider.cjs.map} +1 -1
- package/dist/comments/comment-plugin-provider.js +54 -61
- package/dist/comments/comment-plugin-provider.js.map +1 -1
- package/dist/comments/{floating-composer.mjs → floating-composer.cjs} +68 -64
- package/dist/comments/{floating-composer.mjs.map → floating-composer.cjs.map} +1 -1
- package/dist/comments/floating-composer.js +63 -67
- package/dist/comments/floating-composer.js.map +1 -1
- package/dist/comments/{floating-threads.mjs → floating-threads.cjs} +51 -48
- package/dist/comments/{floating-threads.mjs.map → floating-threads.cjs.map} +1 -1
- package/dist/comments/floating-threads.js +47 -50
- package/dist/comments/floating-threads.js.map +1 -1
- package/dist/comments/get-thread-mark-ids.cjs +23 -0
- package/dist/comments/{get-thread-mark-ids.mjs.map → get-thread-mark-ids.cjs.map} +1 -1
- package/dist/comments/get-thread-mark-ids.js +6 -8
- package/dist/comments/get-thread-mark-ids.js.map +1 -1
- package/dist/comments/{thread-mark-node.mjs → thread-mark-node.cjs} +10 -6
- package/dist/comments/{thread-mark-node.mjs.map → thread-mark-node.cjs.map} +1 -1
- package/dist/comments/thread-mark-node.js +5 -9
- package/dist/comments/thread-mark-node.js.map +1 -1
- package/dist/comments/{unwrap-thread-mark-node.mjs → unwrap-thread-mark-node.cjs} +4 -2
- package/dist/comments/unwrap-thread-mark-node.cjs.map +1 -0
- package/dist/comments/unwrap-thread-mark-node.js +1 -3
- package/dist/comments/unwrap-thread-mark-node.js.map +1 -1
- package/dist/comments/{wrap-selection-in-thread-mark-node.mjs → wrap-selection-in-thread-mark-node.cjs} +12 -10
- package/dist/comments/{wrap-selection-in-thread-mark-node.mjs.map → wrap-selection-in-thread-mark-node.cjs.map} +1 -1
- package/dist/comments/wrap-selection-in-thread-mark-node.js +9 -11
- package/dist/comments/wrap-selection-in-thread-mark-node.js.map +1 -1
- package/dist/{create-dom-range.mjs → create-dom-range.cjs} +7 -5
- package/dist/{create-dom-range.mjs.map → create-dom-range.cjs.map} +1 -1
- package/dist/create-dom-range.js +4 -6
- package/dist/create-dom-range.js.map +1 -1
- package/dist/{create-rects-from-dom-range.mjs → create-rects-from-dom-range.cjs} +4 -2
- package/dist/{create-rects-from-dom-range.mjs.map → create-rects-from-dom-range.cjs.map} +1 -1
- package/dist/create-rects-from-dom-range.js +1 -3
- package/dist/create-rects-from-dom-range.js.map +1 -1
- package/dist/index.cjs +33 -0
- package/dist/{index.mjs.map → index.cjs.map} +1 -1
- package/dist/{index.d.mts → index.d.cts} +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +14 -31
- package/dist/index.js.map +1 -1
- package/dist/{is-block-node-active.mjs → is-block-node-active.cjs} +12 -10
- package/dist/{is-block-node-active.mjs.map → is-block-node-active.cjs.map} +1 -1
- package/dist/is-block-node-active.js +9 -11
- package/dist/is-block-node-active.js.map +1 -1
- package/dist/is-command-registered.cjs +11 -0
- package/dist/{is-command-registered.mjs.map → is-command-registered.cjs.map} +1 -1
- package/dist/is-command-registered.js +3 -5
- package/dist/is-command-registered.js.map +1 -1
- package/dist/is-text-format-active.cjs +16 -0
- package/dist/{is-text-format-active.mjs.map → is-text-format-active.cjs.map} +1 -1
- package/dist/is-text-format-active.js +4 -6
- package/dist/is-text-format-active.js.map +1 -1
- package/dist/liveblocks-config.cjs +17 -0
- package/dist/{liveblocks-config.mjs.map → liveblocks-config.cjs.map} +1 -1
- package/dist/liveblocks-config.js +4 -6
- package/dist/liveblocks-config.js.map +1 -1
- package/dist/liveblocks-plugin-provider.cjs +151 -0
- package/dist/liveblocks-plugin-provider.cjs.map +1 -0
- package/dist/liveblocks-plugin-provider.js +45 -66
- package/dist/liveblocks-plugin-provider.js.map +1 -1
- package/dist/mentions/{avatar.mjs → avatar.cjs} +16 -14
- package/dist/mentions/avatar.cjs.map +1 -0
- package/dist/mentions/avatar.js +13 -15
- package/dist/mentions/avatar.js.map +1 -1
- package/dist/mentions/mention-component.cjs +51 -0
- package/dist/mentions/{mention-component.mjs.map → mention-component.cjs.map} +1 -1
- package/dist/mentions/mention-component.js +14 -16
- package/dist/mentions/mention-component.js.map +1 -1
- package/dist/mentions/{mention-node.mjs → mention-node.cjs} +17 -13
- package/dist/mentions/mention-node.cjs.map +1 -0
- package/dist/mentions/mention-node.js +12 -16
- package/dist/mentions/mention-node.js.map +1 -1
- package/dist/mentions/{mention-plugin.mjs → mention-plugin.cjs} +81 -78
- package/dist/mentions/{mention-plugin.mjs.map → mention-plugin.cjs.map} +1 -1
- package/dist/mentions/mention-plugin.js +77 -80
- package/dist/mentions/mention-plugin.js.map +1 -1
- package/dist/mentions/{suggestions.mjs → suggestions.cjs} +43 -37
- package/dist/mentions/{suggestions.mjs.map → suggestions.cjs.map} +1 -1
- package/dist/mentions/suggestions.js +36 -42
- package/dist/mentions/suggestions.js.map +1 -1
- package/dist/mentions/user.cjs +26 -0
- package/dist/mentions/{user.mjs.map → user.cjs.map} +1 -1
- package/dist/mentions/user.js +11 -13
- package/dist/mentions/user.js.map +1 -1
- package/dist/toolbar/{floating-toolbar.mjs → floating-toolbar.cjs} +73 -70
- package/dist/toolbar/{floating-toolbar.mjs.map → floating-toolbar.cjs.map} +1 -1
- package/dist/toolbar/floating-toolbar.js +69 -72
- package/dist/toolbar/floating-toolbar.js.map +1 -1
- package/dist/toolbar/shared.cjs +36 -0
- package/dist/toolbar/{shared.mjs.map → shared.cjs.map} +1 -1
- package/dist/toolbar/shared.js +12 -15
- package/dist/toolbar/shared.js.map +1 -1
- package/dist/toolbar/toolbar.cjs +433 -0
- package/dist/toolbar/{toolbar.mjs.map → toolbar.cjs.map} +1 -1
- package/dist/toolbar/toolbar.js +131 -156
- package/dist/toolbar/toolbar.js.map +1 -1
- package/dist/use-root-element.cjs +21 -0
- package/dist/use-root-element.cjs.map +1 -0
- package/dist/use-root-element.js +7 -9
- package/dist/use-root-element.js.map +1 -1
- package/dist/version-history/{history-version-preview.mjs → history-version-preview.cjs} +53 -50
- package/dist/version-history/history-version-preview.cjs.map +1 -0
- package/dist/version-history/history-version-preview.js +50 -51
- package/dist/version-history/history-version-preview.js.map +1 -1
- package/dist/version.cjs +10 -0
- package/dist/{version.mjs.map → version.cjs.map} +1 -1
- package/dist/version.js +3 -7
- package/dist/version.js.map +1 -1
- package/package.json +24 -23
- package/styles.css.d.cts +1 -0
- package/dist/comments/get-thread-mark-ids.mjs +0 -21
- package/dist/comments/unwrap-thread-mark-node.mjs.map +0 -1
- package/dist/index.mjs +0 -16
- package/dist/is-command-registered.mjs +0 -9
- package/dist/is-text-format-active.mjs +0 -14
- package/dist/liveblocks-config.mjs +0 -15
- package/dist/liveblocks-plugin-provider.mjs +0 -164
- package/dist/liveblocks-plugin-provider.mjs.map +0 -1
- package/dist/mentions/avatar.mjs.map +0 -1
- package/dist/mentions/mention-component.mjs +0 -49
- package/dist/mentions/mention-node.mjs.map +0 -1
- package/dist/mentions/user.mjs +0 -24
- package/dist/toolbar/shared.mjs +0 -33
- package/dist/toolbar/toolbar.mjs +0 -408
- package/dist/use-root-element.mjs +0 -19
- package/dist/use-root-element.mjs.map +0 -1
- package/dist/version-history/history-version-preview.mjs.map +0 -1
- package/dist/version.mjs +0 -6
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"liveblocks-plugin-provider.mjs","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { nn, TextEditorType } from \"@liveblocks/core\";\nimport { useRoom, useSelf } from \"@liveblocks/react\";\nimport {\n useLayoutEffect,\n useReportTextEditor,\n useResolveMentionSuggestions,\n useYjsProvider,\n} from \"@liveblocks/react/_private\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { MutableRefObject, ReactNode } from \"react\";\nimport {\n useCallback,\n useEffect,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\nimport { useRootElement } from \"./use-root-element\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n string,\n LiveblocksYjsProvider\n>();\n\nexport type EditorStatus =\n /* The editor state is not loaded and has not been requested. */\n | \"not-loaded\"\n /* The editor state is loading from Liveblocks servers */\n | \"loading\"\n /**\n * Not working yet! Will be available in a future release.\n * Some editor state modifications has not been acknowledged yet by the server\n */\n | \"synchronizing\"\n /* The editor state is sync with Liveblocks servers */\n | \"synchronized\";\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`: The editor state is sync with Liveblocks servers.\n *\n * @deprecated Prefer `useIsEditorReady` or `useSyncStatus` (from @liveblocks/react)\n */\nexport function useEditorStatus(): EditorStatus {\n const provider = useYjsProvider();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n if (provider === undefined) return () => { };\n provider.on(\"status\", onStoreChange);\n return () => {\n provider.off(\"status\", onStoreChange);\n };\n },\n [provider]\n );\n\n const getSnapshot = useCallback(() => {\n if (provider === undefined) {\n return \"not-loaded\";\n }\n return provider.getStatus();\n }, [provider]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Returns whether the editor has loaded the initial text contents from the\n * server and is ready to be used.\n */\nexport function useIsEditorReady(): boolean {\n const yjsProvider = useYjsProvider();\n\n const getSnapshot = useCallback(() => {\n const status = yjsProvider?.getStatus();\n return status === \"synchronizing\" || status === \"synchronized\";\n }, [yjsProvider]);\n\n const subscribe = useCallback(\n (callback: () => void) => {\n if (yjsProvider === undefined) return () => { };\n yjsProvider.on(\"status\", callback);\n return () => {\n yjsProvider.off(\"status\", callback);\n };\n },\n [yjsProvider]\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nexport type LiveblocksPluginProps = {\n children?: ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n * namespace: \"MyEditor\",\n * theme: {},\n * nodes: [],\n * onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n * return (\n * <LexicalComposer initialConfig={initialConfig}>\n * <LiveblocksPlugin />\n * <RichTextPlugin\n * contentEditable={<ContentEditable />}\n * placeholder={<div>Enter some text...</div>}\n * ErrorBoundary={LexicalErrorBoundary}\n * />\n * </LexicalComposer>\n * );\n * }\n */\nexport const LiveblocksPlugin = ({\n children,\n}: LiveblocksPluginProps): JSX.Element => {\n const isResolveMentionSuggestionsDefined =\n useResolveMentionSuggestions() !== undefined;\n const [editor] = useLexicalComposerContext();\n const room = useRoom();\n const previousRoomIdRef = useRef<string | null>(null);\n\n if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n throw new Error(\n \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n );\n }\n\n const [containerRef, setContainerRef] = useState<\n MutableRefObject<HTMLDivElement | null> | undefined\n >(undefined);\n\n const {\n refs: { setReference, setFloating },\n strategy,\n x,\n y,\n } = useFloating({\n strategy: \"fixed\",\n placement: \"bottom\",\n whileElementsMounted: (...args) => {\n return autoUpdate(...args, {\n animationFrame: true,\n });\n },\n });\n\n // Warn users if initialConfig.editorState, set on the composer, is not null\n useEffect(() => {\n // only in dev mode\n if (process.env.NODE_ENV !== \"production\") {\n // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n if (!editor.getEditorState().isEmpty()) {\n console.warn(\n \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n );\n }\n }\n\n // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useReportTextEditor(TextEditorType.Lexical, \"root\");\n\n // Get user info or allow override from props\n const self = useSelf();\n\n const providerFactory = useCallback(\n (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n // Destroy previously used provider to avoid memory leaks\n // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n if (\n previousRoomIdRef.current !== null &&\n previousRoomIdRef.current !== id\n ) {\n const previousProvider = providersMap.get(id);\n if (previousProvider !== undefined) {\n previousProvider.destroy();\n }\n }\n\n let doc = yjsDocMap.get(id);\n\n if (doc === undefined) {\n doc = new Doc();\n const provider = new LiveblocksYjsProvider(room, doc);\n yjsDocMap.set(id, doc);\n providersMap.set(id, provider);\n }\n\n return nn(\n providersMap.get(id),\n \"Internal error. Should never happen\"\n ) as Provider;\n },\n [room]\n );\n\n const root = useRootElement();\n\n useLayoutEffect(() => {\n if (root === null) return;\n setReference({\n getBoundingClientRect: () => root.getBoundingClientRect(),\n });\n }, [setReference, root]);\n\n const handleFloatingRef = useCallback(\n (node: HTMLDivElement) => {\n setFloating(node);\n setContainerRef({ current: node });\n },\n [setFloating, setContainerRef]\n );\n\n return (\n <>\n <div\n ref={handleFloatingRef}\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 />\n\n {self && (\n <CollaborationPlugin\n // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n // without implementing `reload` event\n key={room.id}\n id={room.id}\n providerFactory={providerFactory}\n username={self.info?.name ?? \"\"} // use empty string to prevent random name\n cursorColor={self.info?.color as string | undefined}\n cursorsContainerRef={containerRef}\n shouldBootstrap={true}\n />\n )}\n\n {isResolveMentionSuggestionsDefined && <MentionPlugin />}\n <CommentPluginProvider>{children}</CommentPluginProvider>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.mjs","sources":["../../src/mentions/avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n\n const avatar = user ? user.avatar : undefined;\n\n const name = user ? user.name : undefined;\n\n function Initials() {\n const initials = name ? getInitials(name) : undefined;\n if (initials) {\n return (\n <span aria-hidden className=\"lb-avatar-fallback\">\n {initials}\n </span>\n );\n }\n\n if (isLoading) return null;\n\n if (user === undefined) return null;\n\n return (\n <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n {getInitials(userId)}\n </span>\n );\n }\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n className={classNames(\"lb-avatar\", className)}\n ref={forwardedRef}\n >\n {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n <Initials />\n </span>\n );\n }\n);\n\nfunction getInitials(name: string) {\n return name\n .trim()\n .split(\" \")\n .reduce((initials, name, index, array) => {\n if (index === 0 || index === array.length - 1) {\n initials += name.charAt(0).toLocaleUpperCase();\n }\n\n return initials;\n }, \"\");\n}\n"],"names":["Avatar","name"],"mappings":";;;;;AAWO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,UACzB,QAAA,EAAA,QAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,QAChD,sBAAY,MAAM,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAW,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,MAAA;AAAA,UAAQ,GAAK,EAAA,IAAA;AAAA,UAAM,SAAU,EAAA,iBAAA;AAAA,SAAkB,CAAA;AAAA,4BAEnE,QAAS,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUC,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
-
import { $createNodeSelection, $setSelection, $getNodeByKey } from 'lexical';
|
|
4
|
-
import { useCallback, useSyncExternalStore } from 'react';
|
|
5
|
-
|
|
6
|
-
function Mention({
|
|
7
|
-
nodeKey,
|
|
8
|
-
children
|
|
9
|
-
}) {
|
|
10
|
-
const [editor] = useLexicalComposerContext();
|
|
11
|
-
const isSelected = useIsNodeSelected(nodeKey);
|
|
12
|
-
function handleClick(event) {
|
|
13
|
-
editor.update(() => {
|
|
14
|
-
event.stopPropagation();
|
|
15
|
-
event.preventDefault();
|
|
16
|
-
const selection = $createNodeSelection();
|
|
17
|
-
selection.add(nodeKey);
|
|
18
|
-
$setSelection(selection);
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
return /* @__PURE__ */ jsx("span", {
|
|
22
|
-
onClick: handleClick,
|
|
23
|
-
"data-selected": isSelected ? "" : void 0,
|
|
24
|
-
className: "lb-root lb-lexical-mention",
|
|
25
|
-
children
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
function $isNodeSelected(key) {
|
|
29
|
-
const node = $getNodeByKey(key);
|
|
30
|
-
if (node === null)
|
|
31
|
-
return false;
|
|
32
|
-
return node.isSelected();
|
|
33
|
-
}
|
|
34
|
-
function useIsNodeSelected(key) {
|
|
35
|
-
const [editor] = useLexicalComposerContext();
|
|
36
|
-
const subscribe = useCallback(
|
|
37
|
-
(onStoreChange) => {
|
|
38
|
-
return editor.registerUpdateListener(onStoreChange);
|
|
39
|
-
},
|
|
40
|
-
[editor]
|
|
41
|
-
);
|
|
42
|
-
const getSnapshot = useCallback(() => {
|
|
43
|
-
return editor.getEditorState().read(() => $isNodeSelected(key));
|
|
44
|
-
}, [editor, key]);
|
|
45
|
-
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export { Mention };
|
|
49
|
-
//# sourceMappingURL=mention-component.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"mention-node.mjs","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport type {\n DOMConversionMap,\n DOMExportOutput,\n LexicalNode,\n NodeKey,\n SerializedLexicalNode,\n Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { JSX } from \"react\";\n\nimport { Mention } from \"./mention-component\";\nimport { User } from \"./user\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport type SerializedMentionNode = Spread<\n {\n userId: string;\n },\n SerializedLexicalNode\n>;\nexport class MentionNode extends DecoratorNode<JSX.Element> {\n __id: string;\n __userId: string;\n\n constructor(id: string, userId: string, key?: NodeKey) {\n super(key);\n this.__id = id;\n this.__userId = userId;\n }\n\n static getType(): string {\n return \"lb-mention\";\n }\n\n static clone(node: MentionNode): MentionNode {\n return new MentionNode(node.__id, node.__userId);\n }\n\n createDOM(): HTMLElement {\n const element = document.createElement(\"span\");\n element.style.display = \"inline-block\";\n element.style.userSelect = \"none\";\n return element;\n }\n\n updateDOM(): boolean {\n return false;\n }\n\n static importDom(): DOMConversionMap<HTMLElement> | null {\n return {\n span: () => ({\n conversion: (element) => {\n const value = atob(element.getAttribute(\"data-lexical-lb-mention\")!);\n const node = $createMentionNode(value);\n return { node };\n },\n priority: 1,\n }),\n };\n }\n\n exportDOM(): DOMExportOutput {\n const element = document.createElement(\"span\");\n const value = this.getTextContent();\n element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n element.textContent = this.getTextContent();\n return { element };\n }\n\n static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n const node = $createMentionNode(serializedNode.userId);\n return node;\n }\n\n exportJSON(): SerializedMentionNode {\n return {\n userId: this.__userId,\n type: \"lb-mention\",\n version: 1,\n };\n }\n\n getUserId(): string {\n const self = this.getLatest();\n return self.__userId;\n }\n\n getId(): string {\n const self = this.getLatest();\n return self.__id;\n }\n\n decorate(): JSX.Element {\n return (\n <Mention nodeKey={this.getKey()}>\n {MENTION_CHARACTER}\n <User userId={this.getUserId()} />\n </Mention>\n );\n }\n}\n\nexport function $isMentionNode(\n node: LexicalNode | null | undefined\n): node is MentionNode {\n return node instanceof MentionNode;\n}\n\nexport function $createMentionNode(userId: string): MentionNode {\n const node = new MentionNode(createInboxNotificationId(), userId);\n return $applyNodeReplacement(node);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/mentions/user.mjs
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useUser } from '@liveblocks/react';
|
|
3
|
-
import { useOverrides } from '@liveblocks/react-ui';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { classNames } from '../classnames.mjs';
|
|
6
|
-
|
|
7
|
-
const User = forwardRef(
|
|
8
|
-
function User2(props, forwardedRef) {
|
|
9
|
-
const { userId, className, ...spanProps } = props;
|
|
10
|
-
const { user, isLoading } = useUser(userId);
|
|
11
|
-
const $ = useOverrides();
|
|
12
|
-
const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
|
|
13
|
-
return /* @__PURE__ */ jsx("span", {
|
|
14
|
-
"data-loading": isLoading ? "" : void 0,
|
|
15
|
-
...spanProps,
|
|
16
|
-
ref: forwardedRef,
|
|
17
|
-
className: classNames("lb-name lb-user", className),
|
|
18
|
-
children: isLoading ? null : name
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
export { User };
|
|
24
|
-
//# sourceMappingURL=user.mjs.map
|
package/dist/toolbar/shared.mjs
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useLayoutEffect } from '@liveblocks/react/_private';
|
|
3
|
-
import { createContext, forwardRef, useId, 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 = `liveblocks-floating-toolbar-external-${id}`;
|
|
9
|
-
const floatingToolbarContext = useContext(FloatingToolbarContext);
|
|
10
|
-
const registerExternal = floatingToolbarContext?.registerExternal;
|
|
11
|
-
useLayoutEffect(() => {
|
|
12
|
-
if (!registerExternal) {
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
return registerExternal(externalId);
|
|
16
|
-
}, [registerExternal, externalId]);
|
|
17
|
-
if (!floatingToolbarContext || Children.count(children) === 0) {
|
|
18
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
19
|
-
children
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
return /* @__PURE__ */ jsx("div", {
|
|
23
|
-
ref: forwardedRef,
|
|
24
|
-
style: { display: "contents", ...style },
|
|
25
|
-
"data-liveblocks-floating-toolbar-external": id,
|
|
26
|
-
...props,
|
|
27
|
-
id: externalId,
|
|
28
|
-
children
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
export { FloatingToolbarContext, FloatingToolbarExternal };
|
|
33
|
-
//# sourceMappingURL=shared.mjs.map
|
package/dist/toolbar/toolbar.mjs
DELETED
|
@@ -1,408 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
-
import { $isHeadingNode, $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
|
|
4
|
-
import { $setBlocksType } from '@lexical/selection';
|
|
5
|
-
import { mergeRegister } from '@lexical/utils';
|
|
6
|
-
import { ShortcutTooltip, Button, UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, CommentIcon, TextIcon, H1Icon, H2Icon, H3Icon, BlockquoteIcon, 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
|
-
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';
|
|
10
|
-
import { forwardRef, useContext, useCallback, useState, useEffect, useMemo } from 'react';
|
|
11
|
-
import { classNames } from '../classnames.mjs';
|
|
12
|
-
import { OPEN_FLOATING_COMPOSER_COMMAND } from '../comments/floating-composer.mjs';
|
|
13
|
-
import { isBlockNodeActive } from '../is-block-node-active.mjs';
|
|
14
|
-
import { useIsCommandRegistered } from '../is-command-registered.mjs';
|
|
15
|
-
import { isTextFormatActive } from '../is-text-format-active.mjs';
|
|
16
|
-
import { FloatingToolbarContext, FloatingToolbarExternal } from './shared.mjs';
|
|
17
|
-
|
|
18
|
-
const BLOCK_SELECT_SIDE_OFFSET = 10;
|
|
19
|
-
const FLOATING_ELEMENT_COLLISION_PADDING = 10;
|
|
20
|
-
function applyToolbarSlot(slot, props) {
|
|
21
|
-
if (typeof slot === "function") {
|
|
22
|
-
const Component = slot;
|
|
23
|
-
return /* @__PURE__ */ jsx(Component, {
|
|
24
|
-
...props
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
return slot;
|
|
28
|
-
}
|
|
29
|
-
const ToolbarButton = forwardRef(
|
|
30
|
-
({ icon, children, name, shortcut, onKeyDown, ...props }, forwardedRef) => {
|
|
31
|
-
const floatingToolbarContext = useContext(FloatingToolbarContext);
|
|
32
|
-
const closeFloatingToolbar = floatingToolbarContext?.close;
|
|
33
|
-
const handleKeyDown = useCallback(
|
|
34
|
-
(event) => {
|
|
35
|
-
onKeyDown?.(event);
|
|
36
|
-
if (!event.isDefaultPrevented() && closeFloatingToolbar && event.key === "Escape") {
|
|
37
|
-
closeFloatingToolbar();
|
|
38
|
-
event.preventDefault();
|
|
39
|
-
event.stopPropagation();
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
[onKeyDown, closeFloatingToolbar]
|
|
43
|
-
);
|
|
44
|
-
return /* @__PURE__ */ jsx(ShortcutTooltip, {
|
|
45
|
-
content: name,
|
|
46
|
-
shortcut,
|
|
47
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
48
|
-
type: "button",
|
|
49
|
-
variant: "toolbar",
|
|
50
|
-
ref: forwardedRef,
|
|
51
|
-
icon,
|
|
52
|
-
"aria-label": !children ? name : void 0,
|
|
53
|
-
...props,
|
|
54
|
-
onKeyDown: handleKeyDown,
|
|
55
|
-
children: !children && !icon ? name : children
|
|
56
|
-
})
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
const ToolbarToggle = forwardRef(
|
|
61
|
-
({ active, ...props }, forwardedRef) => {
|
|
62
|
-
return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
|
|
63
|
-
asChild: true,
|
|
64
|
-
pressed: active,
|
|
65
|
-
children: /* @__PURE__ */ jsx(ToolbarButton, {
|
|
66
|
-
ref: forwardedRef,
|
|
67
|
-
...props
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
const ToolbarSeparator = forwardRef(
|
|
73
|
-
({ className, ...props }, forwardedRef) => {
|
|
74
|
-
return /* @__PURE__ */ jsx("div", {
|
|
75
|
-
ref: forwardedRef,
|
|
76
|
-
role: "separator",
|
|
77
|
-
"aria-orientation": "vertical",
|
|
78
|
-
className: classNames("lb-lexical-toolbar-separator", className),
|
|
79
|
-
...props
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
function ToolbarSectionHistory() {
|
|
84
|
-
const [editor] = useLexicalComposerContext();
|
|
85
|
-
const [canUndo, setCanUndo] = useState(false);
|
|
86
|
-
const [canRedo, setCanRedo] = useState(false);
|
|
87
|
-
useEffect(() => {
|
|
88
|
-
const unregister = mergeRegister(
|
|
89
|
-
editor.registerCommand(
|
|
90
|
-
CAN_UNDO_COMMAND,
|
|
91
|
-
(payload) => {
|
|
92
|
-
setCanUndo(payload);
|
|
93
|
-
return false;
|
|
94
|
-
},
|
|
95
|
-
COMMAND_PRIORITY_CRITICAL
|
|
96
|
-
),
|
|
97
|
-
editor.registerCommand(
|
|
98
|
-
CAN_REDO_COMMAND,
|
|
99
|
-
(payload) => {
|
|
100
|
-
setCanRedo(payload);
|
|
101
|
-
return false;
|
|
102
|
-
},
|
|
103
|
-
COMMAND_PRIORITY_CRITICAL
|
|
104
|
-
)
|
|
105
|
-
);
|
|
106
|
-
return unregister;
|
|
107
|
-
}, [editor]);
|
|
108
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
109
|
-
children: [
|
|
110
|
-
/* @__PURE__ */ jsx(ToolbarButton, {
|
|
111
|
-
name: "Undo",
|
|
112
|
-
icon: /* @__PURE__ */ jsx(UndoIcon, {}),
|
|
113
|
-
shortcut: "Mod-Z",
|
|
114
|
-
onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0),
|
|
115
|
-
disabled: !canUndo
|
|
116
|
-
}),
|
|
117
|
-
/* @__PURE__ */ jsx(ToolbarButton, {
|
|
118
|
-
name: "Redo",
|
|
119
|
-
icon: /* @__PURE__ */ jsx(RedoIcon, {}),
|
|
120
|
-
shortcut: "Mod-Shift-Z",
|
|
121
|
-
onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0),
|
|
122
|
-
disabled: !canRedo
|
|
123
|
-
})
|
|
124
|
-
]
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
function ToolbarSectionInline() {
|
|
128
|
-
const [editor] = useLexicalComposerContext();
|
|
129
|
-
const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);
|
|
130
|
-
return supportsTextFormat ? /* @__PURE__ */ jsxs(Fragment, {
|
|
131
|
-
children: [
|
|
132
|
-
/* @__PURE__ */ jsx(ToolbarToggle, {
|
|
133
|
-
name: "Bold",
|
|
134
|
-
icon: /* @__PURE__ */ jsx(BoldIcon, {}),
|
|
135
|
-
shortcut: "Mod-B",
|
|
136
|
-
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
|
|
137
|
-
active: isTextFormatActive(editor, "bold")
|
|
138
|
-
}),
|
|
139
|
-
/* @__PURE__ */ jsx(ToolbarToggle, {
|
|
140
|
-
name: "Italic",
|
|
141
|
-
icon: /* @__PURE__ */ jsx(ItalicIcon, {}),
|
|
142
|
-
shortcut: "Mod-I",
|
|
143
|
-
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
|
|
144
|
-
active: isTextFormatActive(editor, "italic")
|
|
145
|
-
}),
|
|
146
|
-
/* @__PURE__ */ jsx(ToolbarToggle, {
|
|
147
|
-
name: "Underline",
|
|
148
|
-
icon: /* @__PURE__ */ jsx(UnderlineIcon, {}),
|
|
149
|
-
shortcut: "Mod-U",
|
|
150
|
-
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
|
|
151
|
-
active: isTextFormatActive(editor, "underline")
|
|
152
|
-
}),
|
|
153
|
-
/* @__PURE__ */ jsx(ToolbarToggle, {
|
|
154
|
-
name: "Strikethrough",
|
|
155
|
-
icon: /* @__PURE__ */ jsx(StrikethroughIcon, {}),
|
|
156
|
-
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
|
|
157
|
-
active: isTextFormatActive(editor, "strikethrough")
|
|
158
|
-
}),
|
|
159
|
-
/* @__PURE__ */ jsx(ToolbarToggle, {
|
|
160
|
-
name: "Inline code",
|
|
161
|
-
icon: /* @__PURE__ */ jsx(CodeIcon, {}),
|
|
162
|
-
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"),
|
|
163
|
-
active: isTextFormatActive(editor, "code")
|
|
164
|
-
})
|
|
165
|
-
]
|
|
166
|
-
}) : null;
|
|
167
|
-
}
|
|
168
|
-
function ToolbarSectionCollaboration() {
|
|
169
|
-
const [editor] = useLexicalComposerContext();
|
|
170
|
-
const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);
|
|
171
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
172
|
-
children: supportsThread ? /* @__PURE__ */ jsx(ToolbarButton, {
|
|
173
|
-
name: "Add a comment",
|
|
174
|
-
icon: /* @__PURE__ */ jsx(CommentIcon, {}),
|
|
175
|
-
onClick: () => editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND, void 0),
|
|
176
|
-
children: "Comment"
|
|
177
|
-
}) : null
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
function DefaultToolbarContent() {
|
|
181
|
-
const supportsTextFormat = useIsCommandRegistered(FORMAT_TEXT_COMMAND);
|
|
182
|
-
const supportsThread = useIsCommandRegistered(OPEN_FLOATING_COMPOSER_COMMAND);
|
|
183
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
184
|
-
children: [
|
|
185
|
-
/* @__PURE__ */ jsx(ToolbarSectionHistory, {}),
|
|
186
|
-
supportsTextFormat ? /* @__PURE__ */ jsxs(Fragment, {
|
|
187
|
-
children: [
|
|
188
|
-
/* @__PURE__ */ jsx(ToolbarSeparator, {}),
|
|
189
|
-
/* @__PURE__ */ jsx(ToolbarBlockSelector, {}),
|
|
190
|
-
/* @__PURE__ */ jsx(ToolbarSectionInline, {})
|
|
191
|
-
]
|
|
192
|
-
}) : null,
|
|
193
|
-
supportsThread ? /* @__PURE__ */ jsxs(Fragment, {
|
|
194
|
-
children: [
|
|
195
|
-
/* @__PURE__ */ jsx(ToolbarSeparator, {}),
|
|
196
|
-
/* @__PURE__ */ jsx(ToolbarSectionCollaboration, {})
|
|
197
|
-
]
|
|
198
|
-
}) : null
|
|
199
|
-
]
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
const INITIAL_COMMANDS_REGISTERED_COMMAND = createCommand(
|
|
203
|
-
"INITIAL_COMMANDS_REGISTERED_COMMAND"
|
|
204
|
-
);
|
|
205
|
-
function useRerender() {
|
|
206
|
-
const [, setRerender] = useState(false);
|
|
207
|
-
return useCallback(() => {
|
|
208
|
-
setRerender((toggle) => !toggle);
|
|
209
|
-
}, [setRerender]);
|
|
210
|
-
}
|
|
211
|
-
function createDefaultBlockSelectorItems() {
|
|
212
|
-
const items = [
|
|
213
|
-
{
|
|
214
|
-
name: "Text",
|
|
215
|
-
icon: /* @__PURE__ */ jsx(TextIcon, {}),
|
|
216
|
-
isActive: "default",
|
|
217
|
-
setActive: () => $setBlocksType($getSelection(), () => $createParagraphNode())
|
|
218
|
-
},
|
|
219
|
-
{
|
|
220
|
-
name: "Heading 1",
|
|
221
|
-
icon: /* @__PURE__ */ jsx(H1Icon, {}),
|
|
222
|
-
isActive: (editor) => {
|
|
223
|
-
return isBlockNodeActive(
|
|
224
|
-
editor,
|
|
225
|
-
(node) => $isHeadingNode(node) ? node.getTag() === "h1" : false
|
|
226
|
-
);
|
|
227
|
-
},
|
|
228
|
-
setActive: () => $setBlocksType($getSelection(), () => $createHeadingNode("h1"))
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
name: "Heading 2",
|
|
232
|
-
icon: /* @__PURE__ */ jsx(H2Icon, {}),
|
|
233
|
-
isActive: (editor) => isBlockNodeActive(
|
|
234
|
-
editor,
|
|
235
|
-
(node) => $isHeadingNode(node) ? node.getTag() === "h2" : false
|
|
236
|
-
),
|
|
237
|
-
setActive: () => $setBlocksType($getSelection(), () => $createHeadingNode("h2"))
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
name: "Heading 3",
|
|
241
|
-
icon: /* @__PURE__ */ jsx(H3Icon, {}),
|
|
242
|
-
isActive: (editor) => isBlockNodeActive(
|
|
243
|
-
editor,
|
|
244
|
-
(node) => $isHeadingNode(node) ? node.getTag() === "h3" : false
|
|
245
|
-
),
|
|
246
|
-
setActive: () => $setBlocksType($getSelection(), () => $createHeadingNode("h3"))
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
name: "Blockquote",
|
|
250
|
-
icon: /* @__PURE__ */ jsx(BlockquoteIcon, {}),
|
|
251
|
-
isActive: (editor) => isBlockNodeActive(editor, (node) => node.getType() === "quote"),
|
|
252
|
-
setActive: () => $setBlocksType($getSelection(), () => $createQuoteNode())
|
|
253
|
-
}
|
|
254
|
-
];
|
|
255
|
-
return items.filter(Boolean);
|
|
256
|
-
}
|
|
257
|
-
const ToolbarBlockSelector = forwardRef(({ items, onKeyDown, ...props }, forwardedRef) => {
|
|
258
|
-
const floatingToolbarContext = useContext(FloatingToolbarContext);
|
|
259
|
-
const closeFloatingToolbar = floatingToolbarContext?.close;
|
|
260
|
-
const [editor] = useLexicalComposerContext();
|
|
261
|
-
const resolvedItems = useMemo(() => {
|
|
262
|
-
if (Array.isArray(items)) {
|
|
263
|
-
return items;
|
|
264
|
-
}
|
|
265
|
-
const defaultItems = createDefaultBlockSelectorItems();
|
|
266
|
-
return items ? items(defaultItems) : defaultItems;
|
|
267
|
-
}, [items]);
|
|
268
|
-
let defaultItem;
|
|
269
|
-
let activeItem = resolvedItems.find((item) => {
|
|
270
|
-
if (item.isActive === "default") {
|
|
271
|
-
defaultItem = item;
|
|
272
|
-
return false;
|
|
273
|
-
}
|
|
274
|
-
return item.isActive(editor);
|
|
275
|
-
});
|
|
276
|
-
if (!activeItem) {
|
|
277
|
-
activeItem = defaultItem;
|
|
278
|
-
}
|
|
279
|
-
const handleItemChange = (name) => {
|
|
280
|
-
const item = resolvedItems.find((item2) => item2.name === name);
|
|
281
|
-
if (item) {
|
|
282
|
-
editor.update(() => item.setActive(editor));
|
|
283
|
-
floatingToolbarContext?.close();
|
|
284
|
-
}
|
|
285
|
-
};
|
|
286
|
-
const handleKeyDown = useCallback(
|
|
287
|
-
(event) => {
|
|
288
|
-
onKeyDown?.(event);
|
|
289
|
-
if (!event.isDefaultPrevented() && closeFloatingToolbar && event.key === "Escape") {
|
|
290
|
-
closeFloatingToolbar();
|
|
291
|
-
event.preventDefault();
|
|
292
|
-
event.stopPropagation();
|
|
293
|
-
}
|
|
294
|
-
},
|
|
295
|
-
[onKeyDown, closeFloatingToolbar]
|
|
296
|
-
);
|
|
297
|
-
return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
|
|
298
|
-
value: activeItem?.name,
|
|
299
|
-
onValueChange: handleItemChange,
|
|
300
|
-
children: [
|
|
301
|
-
/* @__PURE__ */ jsx(ShortcutTooltip, {
|
|
302
|
-
content: "Turn into\u2026",
|
|
303
|
-
children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, {
|
|
304
|
-
asChild: true,
|
|
305
|
-
...props,
|
|
306
|
-
ref: forwardedRef,
|
|
307
|
-
onKeyDown: handleKeyDown,
|
|
308
|
-
disabled: resolvedItems.length === 0,
|
|
309
|
-
children: /* @__PURE__ */ jsx(SelectButton, {
|
|
310
|
-
variant: "toolbar",
|
|
311
|
-
children: activeItem?.name ?? "Turn into\u2026"
|
|
312
|
-
})
|
|
313
|
-
})
|
|
314
|
-
}),
|
|
315
|
-
/* @__PURE__ */ jsx(SelectPrimitive.Portal, {
|
|
316
|
-
children: /* @__PURE__ */ jsx(FloatingToolbarExternal, {
|
|
317
|
-
children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
|
|
318
|
-
position: "popper",
|
|
319
|
-
sideOffset: BLOCK_SELECT_SIDE_OFFSET,
|
|
320
|
-
collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
|
|
321
|
-
className: "lb-root lb-portal lb-elevation lb-dropdown lb-select-dropdown lb-lexical-block-selector-dropdown",
|
|
322
|
-
children: resolvedItems.map((item) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
323
|
-
value: item.name,
|
|
324
|
-
className: "lb-dropdown-item",
|
|
325
|
-
"data-name": item.name,
|
|
326
|
-
children: [
|
|
327
|
-
item.icon ? /* @__PURE__ */ jsx("span", {
|
|
328
|
-
className: "lb-dropdown-item-icon lb-icon-container",
|
|
329
|
-
children: item.icon
|
|
330
|
-
}) : null,
|
|
331
|
-
/* @__PURE__ */ jsx("span", {
|
|
332
|
-
className: "lb-dropdown-item-label",
|
|
333
|
-
children: item.label ?? item.name
|
|
334
|
-
}),
|
|
335
|
-
item.name === activeItem?.name ? /* @__PURE__ */ jsx("span", {
|
|
336
|
-
className: "lb-dropdown-item-accessory lb-icon-container",
|
|
337
|
-
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
338
|
-
}) : null
|
|
339
|
-
]
|
|
340
|
-
}, item.name))
|
|
341
|
-
})
|
|
342
|
-
})
|
|
343
|
-
})
|
|
344
|
-
]
|
|
345
|
-
});
|
|
346
|
-
});
|
|
347
|
-
const Toolbar = Object.assign(
|
|
348
|
-
forwardRef(
|
|
349
|
-
({ before, after, children = DefaultToolbarContent, className, ...props }, forwardedRef) => {
|
|
350
|
-
const [editor] = useLexicalComposerContext();
|
|
351
|
-
const [commandsRegistered, setCommandsRegistered] = useState(false);
|
|
352
|
-
const rerender = useRerender();
|
|
353
|
-
const slotProps = { editor };
|
|
354
|
-
useEffect(() => {
|
|
355
|
-
if (commandsRegistered) {
|
|
356
|
-
return;
|
|
357
|
-
}
|
|
358
|
-
const unregister = editor.registerCommand(
|
|
359
|
-
INITIAL_COMMANDS_REGISTERED_COMMAND,
|
|
360
|
-
() => {
|
|
361
|
-
setCommandsRegistered(true);
|
|
362
|
-
return true;
|
|
363
|
-
},
|
|
364
|
-
COMMAND_PRIORITY_LOW
|
|
365
|
-
);
|
|
366
|
-
editor.dispatchCommand(INITIAL_COMMANDS_REGISTERED_COMMAND, void 0);
|
|
367
|
-
return unregister;
|
|
368
|
-
}, [editor, commandsRegistered]);
|
|
369
|
-
useEffect(() => {
|
|
370
|
-
const unregister = editor.registerUpdateListener(({ tags }) => {
|
|
371
|
-
return editor.getEditorState().read(() => {
|
|
372
|
-
if (tags.has("collaboration"))
|
|
373
|
-
return;
|
|
374
|
-
rerender();
|
|
375
|
-
});
|
|
376
|
-
});
|
|
377
|
-
return unregister;
|
|
378
|
-
}, [editor, rerender]);
|
|
379
|
-
return /* @__PURE__ */ jsx(TooltipProvider, {
|
|
380
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
381
|
-
ref: forwardedRef,
|
|
382
|
-
role: "toolbar",
|
|
383
|
-
"aria-label": "Toolbar",
|
|
384
|
-
"aria-orientation": "horizontal",
|
|
385
|
-
className: classNames("lb-root lb-lexical-toolbar", className),
|
|
386
|
-
...props,
|
|
387
|
-
children: [
|
|
388
|
-
applyToolbarSlot(before, slotProps),
|
|
389
|
-
applyToolbarSlot(children, slotProps),
|
|
390
|
-
applyToolbarSlot(after, slotProps)
|
|
391
|
-
]
|
|
392
|
-
})
|
|
393
|
-
});
|
|
394
|
-
}
|
|
395
|
-
),
|
|
396
|
-
{
|
|
397
|
-
Button: ToolbarButton,
|
|
398
|
-
Toggle: ToolbarToggle,
|
|
399
|
-
BlockSelector: ToolbarBlockSelector,
|
|
400
|
-
Separator: ToolbarSeparator,
|
|
401
|
-
SectionHistory: ToolbarSectionHistory,
|
|
402
|
-
SectionInline: ToolbarSectionInline,
|
|
403
|
-
SectionCollaboration: ToolbarSectionCollaboration
|
|
404
|
-
}
|
|
405
|
-
);
|
|
406
|
-
|
|
407
|
-
export { BLOCK_SELECT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING, Toolbar, applyToolbarSlot };
|
|
408
|
-
//# sourceMappingURL=toolbar.mjs.map
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
2
|
-
import { useCallback, useSyncExternalStore } from 'react';
|
|
3
|
-
|
|
4
|
-
function useRootElement() {
|
|
5
|
-
const [editor] = useLexicalComposerContext();
|
|
6
|
-
const subscribe = useCallback(
|
|
7
|
-
(onStoreChange) => {
|
|
8
|
-
return editor.registerRootListener(onStoreChange);
|
|
9
|
-
},
|
|
10
|
-
[editor]
|
|
11
|
-
);
|
|
12
|
-
const getSnapshot = useCallback(() => {
|
|
13
|
-
return editor.getRootElement();
|
|
14
|
-
}, [editor]);
|
|
15
|
-
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { useRootElement };
|
|
19
|
-
//# sourceMappingURL=use-root-element.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-root-element.mjs","sources":["../src/use-root-element.ts"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nexport function useRootElement(): HTMLElement | null {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerRootListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getRootElement();\n }, [editor]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,cAAqC,GAAA;AACnD,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,qBAAqB,aAAa,CAAA,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAA;AAAA,GAC/B,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"history-version-preview.mjs","sources":["../../src/version-history/history-version-preview.tsx"],"sourcesContent":["import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { EditorRefPlugin } from \"@lexical/react/LexicalEditorRefPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport type { Binding, Provider } from \"@lexical/yjs\";\nimport {\n createBinding,\n syncLexicalUpdateToYjs,\n syncYjsChangesToLexical,\n} from \"@lexical/yjs\";\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport { useHistoryVersionData } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport {\n Button,\n List,\n RestoreIcon,\n SpinnerIcon,\n User,\n} from \"@liveblocks/react-ui/_private\";\nimport type { LexicalEditor } from \"lexical\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport type { Transaction, YEvent } from \"yjs\";\nimport { applyUpdate, Doc } from \"yjs\";\n\nimport { classNames } from \"../classnames\";\nimport { liveblocksConfig } from \"../liveblocks-config\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionPreviewProps\n extends ComponentPropsWithoutRef<\"div\"> {\n version: HistoryVersion;\n onVersionRestore?: (version: HistoryVersion) => void;\n}\n\nfunction createNoOpProvider(): Provider {\n const emptyFunction = () => {};\n\n return {\n awareness: {\n getLocalState: () => null,\n getStates: () => new Map(),\n off: emptyFunction,\n on: emptyFunction,\n setLocalState: emptyFunction,\n },\n connect: emptyFunction,\n disconnect: emptyFunction,\n off: emptyFunction,\n on: emptyFunction,\n };\n}\n\nfunction registerCollaborationListeners(\n editor: LexicalEditor,\n provider: Provider,\n binding: Binding\n): () => void {\n const unsubscribeUpdateListener = editor.registerUpdateListener(\n ({\n dirtyElements,\n dirtyLeaves,\n editorState,\n normalizedNodes,\n prevEditorState,\n tags,\n }) => {\n if (tags.has(\"skip-collab\") === false) {\n syncLexicalUpdateToYjs(\n binding,\n provider,\n prevEditorState,\n editorState,\n dirtyElements,\n dirtyLeaves,\n normalizedNodes,\n tags\n );\n }\n }\n );\n\n const observer = (events: Array<YEvent<any>>, transaction: Transaction) => {\n if (transaction.origin !== binding) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n syncYjsChangesToLexical(binding, provider, events, false);\n }\n };\n\n binding.root.getSharedType().observeDeep(observer);\n\n return () => {\n unsubscribeUpdateListener();\n binding.root.getSharedType().unobserveDeep(observer);\n };\n}\n\n/**\n * Displays a specific version of the current Lexical document.\n *\n * @example\n * <HistoryVersionPreview version={version} />\n */\nexport const HistoryVersionPreview = forwardRef<\n HTMLDivElement,\n HistoryVersionPreviewProps\n>(({ version, onVersionRestore, className, ...props }, forwardedRef) => {\n const [parentEditor, parentContext] = useLexicalComposerContext();\n const editor = useRef<LexicalEditor>();\n const $ = useOverrides();\n const { isLoading, data, error } = useHistoryVersionData(version.id);\n\n const initialConfig = useMemo(() => {\n const nodes = Array.from(parentEditor._nodes.values()).map((n) => n.klass);\n\n return liveblocksConfig({\n namespace: \"VersionPreview\",\n theme: parentContext.getTheme() || {},\n nodes,\n editable: false,\n onError: (err) => console.error(err),\n });\n }, [parentEditor, parentContext]);\n\n useEffect(() => {\n if (error || !data || !editor.current || !data.length) {\n return;\n }\n const doc = new Doc();\n const docMap = new Map([[version.id, doc]]);\n const provider = createNoOpProvider();\n const binding = createBinding(\n editor.current,\n provider,\n version.id,\n doc,\n docMap\n );\n const unsubscribe = registerCollaborationListeners(\n editor.current,\n provider,\n binding\n );\n\n try {\n applyUpdate(doc, data);\n } catch (err) {\n console.warn(err);\n }\n\n return unsubscribe;\n }, [data, version.id, isLoading, error]);\n\n const restore = useCallback(() => {\n if (!editor.current || !parentEditor) {\n return;\n }\n\n parentEditor.setEditorState(editor.current.getEditorState());\n onVersionRestore?.(version);\n }, [parentEditor, onVersionRestore, version]);\n\n return (\n <div\n {...props}\n className={classNames(\n \"lb-root lb-history-version-preview lb-lexical-version-preview\",\n className\n )}\n ref={forwardedRef}\n >\n {isLoading ? (\n <div className=\"lb-loading lb-history-version-preview-loading\">\n <SpinnerIcon />\n </div>\n ) : error ? (\n <div className=\"lb-error lb-history-version-preview-error\">\n {$.HISTORY_VERSION_PREVIEW_ERROR(error)}\n </div>\n ) : (\n <div className=\"lb-history-version-preview-content lb-lexical-editor-container lb-lexical-version-preview-editor-container\">\n <LexicalComposer initialConfig={initialConfig}>\n <EditorRefPlugin editorRef={editor} />\n <RichTextPlugin\n contentEditable={<ContentEditable />}\n placeholder={\n <div className=\"lb-empty lb-history-version-preview-empty\">\n {$.HISTORY_VERSION_PREVIEW_EMPTY}\n </div>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalComposer>\n </div>\n )}\n <div className=\"lb-history-version-preview-footer\">\n <span className=\"lb-history-version-preview-authors\">\n {$.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(\n <List\n values={version.authors.map((author) => (\n <User key={author.id} userId={author.id} replaceSelf />\n ))}\n formatRemaining={$.LIST_REMAINING_USERS}\n truncate={AUTHORS_TRUNCATE}\n locale={$.locale}\n />\n )}\n </span>\n <div className=\"lb-history-version-preview-actions\">\n <Button\n onClick={restore}\n disabled={!data || !parentEditor}\n variant=\"primary\"\n size=\"large\"\n className=\"lb-history-version-preview-action\"\n icon={<RestoreIcon />}\n >\n {$.HISTORY_VERSION_PREVIEW_RESTORE}\n </Button>\n </div>\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
package/dist/version.mjs
DELETED