@depup/lexical__react 0.42.0-depup.0 → 0.43.0-depup.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.
Files changed (37) hide show
  1. package/LexicalAutoFocusPlugin.js.flow +1 -1
  2. package/LexicalBlockWithAlignableContents.js.flow +2 -2
  3. package/LexicalClearEditorPlugin.js.flow +1 -1
  4. package/LexicalComposer.js.flow +2 -2
  5. package/LexicalContentEditable.js.flow +6 -6
  6. package/LexicalDraggableBlockPlugin.js.flow +1 -1
  7. package/LexicalEditorRefPlugin.d.ts +1 -1
  8. package/LexicalEditorRefPlugin.dev.js +0 -1
  9. package/LexicalEditorRefPlugin.dev.mjs +0 -1
  10. package/LexicalEditorRefPlugin.js.flow +1 -1
  11. package/LexicalErrorBoundary.js.flow +1 -1
  12. package/LexicalHorizontalRulePlugin.js.flow +1 -1
  13. package/LexicalLinkPlugin.js.flow +1 -1
  14. package/LexicalNestedComposer.js.flow +1 -1
  15. package/LexicalPlainTextPlugin.dev.js +0 -3
  16. package/LexicalPlainTextPlugin.dev.mjs +0 -3
  17. package/LexicalReactExtension.dev.js +1 -3
  18. package/LexicalReactExtension.dev.mjs +1 -3
  19. package/LexicalReactExtension.js.flow +1 -1
  20. package/LexicalReactPluginHostExtension.js.flow +3 -3
  21. package/LexicalRichTextPlugin.dev.js +0 -3
  22. package/LexicalRichTextPlugin.dev.mjs +0 -3
  23. package/LexicalTabIndentationPlugin.js.flow +1 -1
  24. package/LexicalTablePlugin.js.flow +1 -1
  25. package/README.md +2 -2
  26. package/changes.json +1 -1
  27. package/package.json +50 -20
  28. package/useExtensionSignalValue.d.ts +61 -0
  29. package/useLexicalExtensionSignalValue.dev.js +84 -0
  30. package/useLexicalExtensionSignalValue.dev.mjs +81 -0
  31. package/useLexicalExtensionSignalValue.js +11 -0
  32. package/useLexicalExtensionSignalValue.js.flow +18 -0
  33. package/useLexicalExtensionSignalValue.mjs +13 -0
  34. package/useLexicalExtensionSignalValue.node.mjs +11 -0
  35. package/useLexicalExtensionSignalValue.prod.js +9 -0
  36. package/useLexicalExtensionSignalValue.prod.mjs +9 -0
  37. package/useLexicalTextEntity.js.flow +1 -1
@@ -7,7 +7,7 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- type Props = $ReadOnly<{
10
+ type Props = Readonly<{
11
11
  defaultSelection?: 'rootStart' | 'rootEnd',
12
12
  }>;
13
13
 
@@ -15,11 +15,11 @@ import type {
15
15
  NodeKey,
16
16
  } from 'lexical';
17
17
 
18
- type Props = $ReadOnly<{
18
+ type Props = Readonly<{
19
19
  children: React.Node,
20
20
  format: ?ElementFormatType,
21
21
  nodeKey: NodeKey,
22
- className: $ReadOnly<{
22
+ className: Readonly<{
23
23
  base: string,
24
24
  focus: string,
25
25
  }>,
@@ -7,7 +7,7 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- type Props = $ReadOnly<{
10
+ type Props = Readonly<{
11
11
  onClear?: () => void,
12
12
  }>;
13
13
 
@@ -22,10 +22,10 @@ export type InitialEditorStateType =
22
22
  | EditorState
23
23
  | ((editor: LexicalEditor) => void);
24
24
 
25
- export type InitialConfigType = $ReadOnly<{
25
+ export type InitialConfigType = Readonly<{
26
26
  editable?: boolean,
27
27
  namespace: string,
28
- nodes?: $ReadOnlyArray<Class<LexicalNode> | LexicalNodeReplacement>,
28
+ nodes?: ReadonlyArray<Class<LexicalNode> | LexicalNodeReplacement>,
29
29
  theme?: EditorThemeClasses,
30
30
  editorState?: InitialEditorStateType,
31
31
  onError: (error: Error, editor: LexicalEditor) => void,
@@ -14,11 +14,11 @@ import type {TRefFor} from 'CoreTypes.flow';
14
14
  import * as React from 'react';
15
15
 
16
16
  type InlineStyle = {
17
- [key: string]: mixed,
17
+ [key: string]: unknown,
18
18
  };
19
19
 
20
20
  // Due to Flow limitations, we prefer fixed types over the built-in inexact HTMLElement
21
- type HTMLDivElementDOMProps = $ReadOnly<{
21
+ type HTMLDivElementDOMProps = Readonly<{
22
22
  'aria-label'?: void | string,
23
23
  'aria-labeledby'?: void | string,
24
24
  'aria-activedescendant'?: void | string,
@@ -28,7 +28,7 @@ type HTMLDivElementDOMProps = $ReadOnly<{
28
28
  'aria-invalid'?: void | boolean,
29
29
  'aria-owns'?: void | string,
30
30
  'title'?: void | string,
31
- onClick?: void | ((e: SyntheticEvent<HTMLDivElement>) => mixed),
31
+ onClick?: void | ((e: SyntheticEvent<HTMLDivElement>) => unknown),
32
32
  autoCapitalize?: void | boolean,
33
33
  autoComplete?: void | boolean,
34
34
  autoCorrect?: void | boolean,
@@ -44,11 +44,11 @@ type HTMLDivElementDOMProps = $ReadOnly<{
44
44
  }>;
45
45
 
46
46
  export type PlaceholderProps =
47
- | $ReadOnly<{
47
+ | Readonly<{
48
48
  'aria-placeholder'?: void,
49
49
  placeholder?: null,
50
50
  }>
51
- | $ReadOnly<{
51
+ | Readonly<{
52
52
  'aria-placeholder': string,
53
53
  placeholder:
54
54
  | ((isEditable: boolean) => null | React.Node)
@@ -56,7 +56,7 @@ export type PlaceholderProps =
56
56
  | React.Node,
57
57
  }>;
58
58
 
59
- export type Props = $ReadOnly<{
59
+ export type Props = Readonly<{
60
60
  ...HTMLDivElementDOMProps,
61
61
  ariaActiveDescendant?: string,
62
62
  ariaAutoComplete?: string,
@@ -9,7 +9,7 @@
9
9
 
10
10
  import * as React from 'react';
11
11
 
12
- type Props = $ReadOnly<{
12
+ type Props = Readonly<{
13
13
  anchorElem?: ?HTMLElement,
14
14
  menuRef: React.RefObject<?HTMLElement>,
15
15
  targetLineRef: React.RefObject<?HTMLElement>,
@@ -6,8 +6,8 @@
6
6
  *
7
7
  */
8
8
  import { LexicalEditor } from 'lexical';
9
- import { RefObject } from 'react';
10
9
  import * as React from 'react';
10
+ import { RefObject } from 'react';
11
11
  /**
12
12
  *
13
13
  * Use this plugin to access the editor instance outside of the
@@ -32,7 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
32
32
  *
33
33
  */
34
34
 
35
-
36
35
  /**
37
36
  *
38
37
  * Use this plugin to access the editor instance outside of the
@@ -17,7 +17,6 @@ import * as React from 'react';
17
17
  *
18
18
  */
19
19
 
20
-
21
20
  /**
22
21
  *
23
22
  * Use this plugin to access the editor instance outside of the
@@ -12,7 +12,7 @@ import type {LexicalEditor} from 'lexical';
12
12
  import type {TRefFor} from 'CoreTypes.flow';
13
13
 
14
14
 
15
- type Props = $ReadOnly<{
15
+ type Props = Readonly<{
16
16
  editorRef: TRefFor<LexicalEditor>,
17
17
  }>;
18
18
 
@@ -7,7 +7,7 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- export type LexicalErrorBoundaryProps = $ReadOnly<{
10
+ export type LexicalErrorBoundaryProps = Readonly<{
11
11
  children: React.Node,
12
12
  onError: (error: Error) => void,
13
13
  }>;
@@ -7,6 +7,6 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- type Props = $ReadOnly<{}>;
10
+ type Props = Readonly<{}>;
11
11
 
12
12
  declare export function HorizontalRulePlugin(props: Props): null;
@@ -13,7 +13,7 @@ type LinkAttributes = {
13
13
  title?: null | string;
14
14
  };
15
15
 
16
- type Props = $ReadOnly<{
16
+ type Props = Readonly<{
17
17
  validateUrl?: (url: string) => boolean,
18
18
  attributes?: LinkAttributes,
19
19
  }>;
@@ -18,7 +18,7 @@ export type LexicalNestedComposerProps = {
18
18
  children?: React.Node;
19
19
  initialEditor: LexicalEditor;
20
20
  initialTheme?: EditorThemeClasses;
21
- initialNodes?: $ReadOnlyArray<Class<LexicalNode> | LexicalNodeReplacement>;
21
+ initialNodes?: ReadonlyArray<Class<LexicalNode> | LexicalNodeReplacement>;
22
22
  skipCollabChecks?: void | true;
23
23
  skipEditableListener?: void | true;
24
24
  };
@@ -183,9 +183,6 @@ function useCanShowPlaceholder(editor) {
183
183
  function usePlainTextSetup(editor) {
184
184
  useLayoutEffectImpl(() => {
185
185
  return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor));
186
-
187
- // We only do this for init
188
- // eslint-disable-next-line react-hooks/exhaustive-deps
189
186
  }, [editor]);
190
187
  }
191
188
 
@@ -181,9 +181,6 @@ function useCanShowPlaceholder(editor) {
181
181
  function usePlainTextSetup(editor) {
182
182
  useLayoutEffectImpl(() => {
183
183
  return mergeRegister(registerPlainText(editor), registerDragonSupport(editor));
184
-
185
- // We only do this for init
186
- // eslint-disable-next-line react-hooks/exhaustive-deps
187
184
  }, [editor]);
188
185
  }
189
186
 
@@ -91,9 +91,7 @@ function buildEditorComponent(config, context) {
91
91
  const configDecorators = react.useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
92
92
  onError: e => {
93
93
  editor._onError(e);
94
- }
95
- // eslint-disable-next-line react/no-array-index-key -- no natural key
96
- ,
94
+ },
97
95
  children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
98
96
  fallback: null,
99
97
  children: decorator
@@ -89,9 +89,7 @@ function buildEditorComponent(config, context) {
89
89
  const configDecorators = useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsx(ErrorBoundary, {
90
90
  onError: e => {
91
91
  editor._onError(e);
92
- }
93
- // eslint-disable-next-line react/no-array-index-key -- no natural key
94
- ,
92
+ },
95
93
  children: /*#__PURE__*/jsx(Suspense, {
96
94
  fallback: null,
97
95
  children: decorator
@@ -46,7 +46,7 @@ export type ReactConfig = {
46
46
  contentEditable: React.Node | null;
47
47
  ErrorBoundary: ErrorBoundaryType;
48
48
  EditorChildrenComponent: EditorChildrenComponentType;
49
- decorators: $ReadOnlyArray<DecoratorComponentType>;
49
+ decorators: ReadonlyArray<DecoratorComponentType>;
50
50
  };
51
51
 
52
52
  export type ReactOutputs = {
@@ -24,7 +24,7 @@ export type {DecoratorComponentProps};
24
24
 
25
25
  type Container = DocumentFragment | Element;
26
26
  // TODO: Not sure how to import RootType from react-dom/client
27
- type Root = mixed;
27
+ type Root = unknown;
28
28
 
29
29
  export interface HostMountCommandArg {
30
30
  root: Root;
@@ -37,7 +37,7 @@ export interface MountPluginCommandArg {
37
37
  }
38
38
 
39
39
  declare export function mountReactExtensionComponent<
40
- Extension: AnyLexicalExtension,
40
+ Extension extends AnyLexicalExtension,
41
41
  >(
42
42
  editor: LexicalEditor,
43
43
  opts: {
@@ -54,7 +54,7 @@ declare export function mountReactExtensionComponent<
54
54
  ): void;
55
55
 
56
56
  declare export function mountReactPluginComponent<
57
- P: {...} = {...},
57
+ P extends {...} = {...},
58
58
  >(
59
59
  editor: LexicalEditor,
60
60
  opts: {
@@ -183,9 +183,6 @@ function useCanShowPlaceholder(editor) {
183
183
  function useRichTextSetup(editor) {
184
184
  useLayoutEffectImpl(() => {
185
185
  return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor));
186
-
187
- // We only do this for init
188
- // eslint-disable-next-line react-hooks/exhaustive-deps
189
186
  }, [editor]);
190
187
  }
191
188
 
@@ -181,9 +181,6 @@ function useCanShowPlaceholder(editor) {
181
181
  function useRichTextSetup(editor) {
182
182
  useLayoutEffectImpl(() => {
183
183
  return mergeRegister(registerRichText(editor), registerDragonSupport(editor));
184
-
185
- // We only do this for init
186
- // eslint-disable-next-line react-hooks/exhaustive-deps
187
184
  }, [editor]);
188
185
  }
189
186
 
@@ -14,7 +14,7 @@ declare export function registerTabIndentation(
14
14
  maxIndent?: number,
15
15
  ): () => void;
16
16
 
17
- type Props = $ReadOnly<{
17
+ type Props = Readonly<{
18
18
  maxIndent?: number,
19
19
  }>;
20
20
 
@@ -7,7 +7,7 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- type Props = $ReadOnly<{
10
+ type Props = Readonly<{
11
11
  hasCellMerge?: boolean,
12
12
  hasCellBackgroundColor?: boolean,
13
13
  hasTabHandler?: boolean,
package/README.md CHANGED
@@ -13,8 +13,8 @@ npm install @depup/lexical__react
13
13
 
14
14
  | Field | Value |
15
15
  |-------|-------|
16
- | Original | [@lexical/react](https://www.npmjs.com/package/@lexical/react) @ 0.42.0 |
17
- | Processed | 2026-03-20 |
16
+ | Original | [@lexical/react](https://www.npmjs.com/package/@lexical/react) @ 0.43.0 |
17
+ | Processed | 2026-04-09 |
18
18
  | Smoke test | failed |
19
19
  | Deps updated | 2 |
20
20
 
package/changes.json CHANGED
@@ -9,6 +9,6 @@
9
9
  "to": "^6.1.1"
10
10
  }
11
11
  },
12
- "timestamp": "2026-03-20T00:35:04.264Z",
12
+ "timestamp": "2026-04-09T20:22:32.773Z",
13
13
  "totalUpdated": 2
14
14
  }
package/package.json CHANGED
@@ -14,26 +14,26 @@
14
14
  "rich-text"
15
15
  ],
16
16
  "license": "MIT",
17
- "version": "0.42.0-depup.0",
17
+ "version": "0.43.0-depup.0",
18
18
  "dependencies": {
19
19
  "@floating-ui/react": "^0.27.19",
20
- "@lexical/devtools-core": "0.42.0",
21
- "@lexical/dragon": "0.42.0",
22
- "@lexical/extension": "0.42.0",
23
- "@lexical/hashtag": "0.42.0",
24
- "@lexical/history": "0.42.0",
25
- "@lexical/link": "0.42.0",
26
- "@lexical/list": "0.42.0",
27
- "@lexical/mark": "0.42.0",
28
- "@lexical/markdown": "0.42.0",
29
- "@lexical/overflow": "0.42.0",
30
- "@lexical/plain-text": "0.42.0",
31
- "@lexical/rich-text": "0.42.0",
32
- "@lexical/table": "0.42.0",
33
- "@lexical/text": "0.42.0",
34
- "@lexical/utils": "0.42.0",
35
- "@lexical/yjs": "0.42.0",
36
- "lexical": "0.42.0",
20
+ "@lexical/devtools-core": "0.43.0",
21
+ "@lexical/dragon": "0.43.0",
22
+ "@lexical/extension": "0.43.0",
23
+ "@lexical/hashtag": "0.43.0",
24
+ "@lexical/history": "0.43.0",
25
+ "@lexical/link": "0.43.0",
26
+ "@lexical/list": "0.43.0",
27
+ "@lexical/mark": "0.43.0",
28
+ "@lexical/markdown": "0.43.0",
29
+ "@lexical/overflow": "0.43.0",
30
+ "@lexical/plain-text": "0.43.0",
31
+ "@lexical/rich-text": "0.43.0",
32
+ "@lexical/table": "0.43.0",
33
+ "@lexical/text": "0.43.0",
34
+ "@lexical/utils": "0.43.0",
35
+ "@lexical/yjs": "0.43.0",
36
+ "lexical": "0.43.0",
37
37
  "react-error-boundary": "^6.1.1"
38
38
  },
39
39
  "peerDependencies": {
@@ -1396,6 +1396,36 @@
1396
1396
  "default": "./useLexicalExtensionComponent.js"
1397
1397
  }
1398
1398
  },
1399
+ "./useExtensionSignalValue": {
1400
+ "import": {
1401
+ "types": "./useExtensionSignalValue.d.ts",
1402
+ "development": "./useLexicalExtensionSignalValue.dev.mjs",
1403
+ "production": "./useLexicalExtensionSignalValue.prod.mjs",
1404
+ "node": "./useLexicalExtensionSignalValue.node.mjs",
1405
+ "default": "./useLexicalExtensionSignalValue.mjs"
1406
+ },
1407
+ "require": {
1408
+ "types": "./useExtensionSignalValue.d.ts",
1409
+ "development": "./useLexicalExtensionSignalValue.dev.js",
1410
+ "production": "./useLexicalExtensionSignalValue.prod.js",
1411
+ "default": "./useLexicalExtensionSignalValue.js"
1412
+ }
1413
+ },
1414
+ "./useExtensionSignalValue.js": {
1415
+ "import": {
1416
+ "types": "./useExtensionSignalValue.d.ts",
1417
+ "development": "./useLexicalExtensionSignalValue.dev.mjs",
1418
+ "production": "./useLexicalExtensionSignalValue.prod.mjs",
1419
+ "node": "./useLexicalExtensionSignalValue.node.mjs",
1420
+ "default": "./useLexicalExtensionSignalValue.mjs"
1421
+ },
1422
+ "require": {
1423
+ "types": "./useExtensionSignalValue.d.ts",
1424
+ "development": "./useLexicalExtensionSignalValue.dev.js",
1425
+ "production": "./useLexicalExtensionSignalValue.prod.js",
1426
+ "default": "./useLexicalExtensionSignalValue.js"
1427
+ }
1428
+ },
1399
1429
  "./useLexicalEditable": {
1400
1430
  "import": {
1401
1431
  "types": "./useLexicalEditable.d.ts",
@@ -1565,8 +1595,8 @@
1565
1595
  },
1566
1596
  "depsUpdated": 2,
1567
1597
  "originalPackage": "@lexical/react",
1568
- "originalVersion": "0.42.0",
1569
- "processedAt": "2026-03-20T00:35:10.564Z",
1598
+ "originalVersion": "0.43.0",
1599
+ "processedAt": "2026-04-09T20:22:39.300Z",
1570
1600
  "smokeTest": "failed"
1571
1601
  }
1572
1602
  }
@@ -0,0 +1,61 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ import type { ReadonlySignal } from '@lexical/extension';
9
+ import type { AnyLexicalExtension, LexicalExtensionOutput } from 'lexical';
10
+ /**
11
+ * A React hook that subscribes to a signal and returns its current value.
12
+ * The component will re-render whenever the signal's value changes.
13
+ *
14
+ * @param s - The ReadonlySignal to subscribe to
15
+ * @returns The current value of the signal
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * const signal = new Signal(0);
20
+ * function MyComponent() {
21
+ * const value = useSignalValue(signal);
22
+ * return <div>Value: {value}</div>;
23
+ * }
24
+ * ```
25
+ */
26
+ export declare function useSignalValue<V>(s: ReadonlySignal<V>): V;
27
+ /**
28
+ * Type helper that extracts the value type from a ReadonlySignal.
29
+ * If the type is not a ReadonlySignal, it returns never.
30
+ *
31
+ * @example
32
+ * ```tsx
33
+ * type MySignal = ReadonlySignal<number>;
34
+ * type Value = SignalValue<MySignal>; // number
35
+ * ```
36
+ */
37
+ export type SignalValue<S> = S extends ReadonlySignal<infer V> ? V : never;
38
+ /**
39
+ * A React hook that subscribes to a signal property from a Lexical extension's output
40
+ * and returns its current value. The component will re-render whenever the signal's value changes.
41
+ *
42
+ * This hook combines the functionality of useExtensionDependency and useSignalValue,
43
+ * providing a convenient way to access reactive values from Lexical extensions.
44
+ *
45
+ * @param extension - The Lexical extension instance
46
+ * @param prop - The property name in the extension's output that contains a signal
47
+ * @returns The current value of the signal property
48
+ *
49
+ * @example
50
+ * ```tsx
51
+ * import {useExtensionSignalValue} from '@lexical/react/useExtensionSignalValue';
52
+ * import {MyExtension} from './MyExtension';
53
+ *
54
+ * function MyComponent() {
55
+ * // Assuming MyExtension has a signal property 'count' in its output
56
+ * const count = useExtensionSignalValue(MyExtension, 'count');
57
+ * return <div>Count: {count}</div>;
58
+ * }
59
+ * ```
60
+ */
61
+ export declare function useExtensionSignalValue<Extension extends AnyLexicalExtension, K extends keyof LexicalExtensionOutput<Extension>>(extension: Extension, prop: K): SignalValue<LexicalExtensionOutput<Extension>[K]>;
@@ -0,0 +1,84 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ 'use strict';
10
+
11
+ var useExtensionComponent = require('@lexical/react/useExtensionComponent');
12
+ var react = require('react');
13
+
14
+ /**
15
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
16
+ *
17
+ * This source code is licensed under the MIT license found in the
18
+ * LICENSE file in the root directory of this source tree.
19
+ *
20
+ */
21
+
22
+
23
+ /**
24
+ * A React hook that subscribes to a signal and returns its current value.
25
+ * The component will re-render whenever the signal's value changes.
26
+ *
27
+ * @param s - The ReadonlySignal to subscribe to
28
+ * @returns The current value of the signal
29
+ *
30
+ * @example
31
+ * ```tsx
32
+ * const signal = new Signal(0);
33
+ * function MyComponent() {
34
+ * const value = useSignalValue(signal);
35
+ * return <div>Value: {value}</div>;
36
+ * }
37
+ * ```
38
+ */
39
+ function useSignalValue(s) {
40
+ const [subscribe, getSnapshot] = react.useMemo(() => [s.subscribe.bind(s), s.peek.bind(s)], [s]);
41
+ return react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
42
+ }
43
+
44
+ /**
45
+ * Type helper that extracts the value type from a ReadonlySignal.
46
+ * If the type is not a ReadonlySignal, it returns never.
47
+ *
48
+ * @example
49
+ * ```tsx
50
+ * type MySignal = ReadonlySignal<number>;
51
+ * type Value = SignalValue<MySignal>; // number
52
+ * ```
53
+ */
54
+
55
+ /**
56
+ * A React hook that subscribes to a signal property from a Lexical extension's output
57
+ * and returns its current value. The component will re-render whenever the signal's value changes.
58
+ *
59
+ * This hook combines the functionality of useExtensionDependency and useSignalValue,
60
+ * providing a convenient way to access reactive values from Lexical extensions.
61
+ *
62
+ * @param extension - The Lexical extension instance
63
+ * @param prop - The property name in the extension's output that contains a signal
64
+ * @returns The current value of the signal property
65
+ *
66
+ * @example
67
+ * ```tsx
68
+ * import {useExtensionSignalValue} from '@lexical/react/useExtensionSignalValue';
69
+ * import {MyExtension} from './MyExtension';
70
+ *
71
+ * function MyComponent() {
72
+ * // Assuming MyExtension has a signal property 'count' in its output
73
+ * const count = useExtensionSignalValue(MyExtension, 'count');
74
+ * return <div>Count: {count}</div>;
75
+ * }
76
+ * ```
77
+ */
78
+ function useExtensionSignalValue(extension, prop) {
79
+ const signal = useExtensionComponent.useExtensionDependency(extension).output[prop];
80
+ return useSignalValue(signal);
81
+ }
82
+
83
+ exports.useExtensionSignalValue = useExtensionSignalValue;
84
+ exports.useSignalValue = useSignalValue;
@@ -0,0 +1,81 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import { useExtensionDependency } from '@lexical/react/useExtensionComponent';
10
+ import { useMemo, useSyncExternalStore } from 'react';
11
+
12
+ /**
13
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
14
+ *
15
+ * This source code is licensed under the MIT license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ *
18
+ */
19
+
20
+
21
+ /**
22
+ * A React hook that subscribes to a signal and returns its current value.
23
+ * The component will re-render whenever the signal's value changes.
24
+ *
25
+ * @param s - The ReadonlySignal to subscribe to
26
+ * @returns The current value of the signal
27
+ *
28
+ * @example
29
+ * ```tsx
30
+ * const signal = new Signal(0);
31
+ * function MyComponent() {
32
+ * const value = useSignalValue(signal);
33
+ * return <div>Value: {value}</div>;
34
+ * }
35
+ * ```
36
+ */
37
+ function useSignalValue(s) {
38
+ const [subscribe, getSnapshot] = useMemo(() => [s.subscribe.bind(s), s.peek.bind(s)], [s]);
39
+ return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
40
+ }
41
+
42
+ /**
43
+ * Type helper that extracts the value type from a ReadonlySignal.
44
+ * If the type is not a ReadonlySignal, it returns never.
45
+ *
46
+ * @example
47
+ * ```tsx
48
+ * type MySignal = ReadonlySignal<number>;
49
+ * type Value = SignalValue<MySignal>; // number
50
+ * ```
51
+ */
52
+
53
+ /**
54
+ * A React hook that subscribes to a signal property from a Lexical extension's output
55
+ * and returns its current value. The component will re-render whenever the signal's value changes.
56
+ *
57
+ * This hook combines the functionality of useExtensionDependency and useSignalValue,
58
+ * providing a convenient way to access reactive values from Lexical extensions.
59
+ *
60
+ * @param extension - The Lexical extension instance
61
+ * @param prop - The property name in the extension's output that contains a signal
62
+ * @returns The current value of the signal property
63
+ *
64
+ * @example
65
+ * ```tsx
66
+ * import {useExtensionSignalValue} from '@lexical/react/useExtensionSignalValue';
67
+ * import {MyExtension} from './MyExtension';
68
+ *
69
+ * function MyComponent() {
70
+ * // Assuming MyExtension has a signal property 'count' in its output
71
+ * const count = useExtensionSignalValue(MyExtension, 'count');
72
+ * return <div>Count: {count}</div>;
73
+ * }
74
+ * ```
75
+ */
76
+ function useExtensionSignalValue(extension, prop) {
77
+ const signal = useExtensionDependency(extension).output[prop];
78
+ return useSignalValue(signal);
79
+ }
80
+
81
+ export { useExtensionSignalValue, useSignalValue };
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ 'use strict'
10
+ const useLexicalExtensionSignalValue = process.env.NODE_ENV !== 'production' ? require('./useLexicalExtensionSignalValue.dev.js') : require('./useLexicalExtensionSignalValue.prod.js');
11
+ module.exports = useLexicalExtensionSignalValue;
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import type {ReadonlySignal} from '@lexical/extension';
11
+ import type {AnyLexicalExtension} from 'lexical';
12
+
13
+ declare export function useSignalValue<V>(s: ReadonlySignal<V>): V;
14
+
15
+ declare export function useExtensionSignalValue<V>(
16
+ extension: AnyLexicalExtension,
17
+ prop: string,
18
+ ): V;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import * as modDev from './useLexicalExtensionSignalValue.dev.mjs';
10
+ import * as modProd from './useLexicalExtensionSignalValue.prod.mjs';
11
+ const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
12
+ export const useExtensionSignalValue = mod.useExtensionSignalValue;
13
+ export const useSignalValue = mod.useSignalValue;
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ const mod = await (process.env.NODE_ENV !== 'production' ? import('./useLexicalExtensionSignalValue.dev.mjs') : import('./useLexicalExtensionSignalValue.prod.mjs'));
10
+ export const useExtensionSignalValue = mod.useExtensionSignalValue;
11
+ export const useSignalValue = mod.useSignalValue;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ "use strict";var e=require("@lexical/react/useExtensionComponent"),n=require("react");function t(e){const[t,u]=n.useMemo(()=>[e.subscribe.bind(e),e.peek.bind(e)],[e]);return n.useSyncExternalStore(t,u,u)}exports.useExtensionSignalValue=function(n,u){return t(e.useExtensionDependency(n).output[u])},exports.useSignalValue=t;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import{useExtensionDependency as t}from"@lexical/react/useExtensionComponent";import{useMemo as n,useSyncExternalStore as e}from"react";function o(t){const[o,r]=n(()=>[t.subscribe.bind(t),t.peek.bind(t)],[t]);return e(o,r,r)}function r(n,e){return o(t(n).output[e])}export{r as useExtensionSignalValue,o as useSignalValue};
@@ -11,7 +11,7 @@ import type {TextNode} from 'lexical';
11
11
 
12
12
  export type EntityMatch = {end: number, start: number};
13
13
 
14
- declare export function useLexicalTextEntity<N: TextNode>(
14
+ declare export function useLexicalTextEntity<N extends TextNode>(
15
15
  getMatch: (text: string) => null | EntityMatch,
16
16
  targetNode: Class<N>,
17
17
  createNode: (textNode: TextNode) => N,