@lexical/react 0.3.1 → 0.3.4

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 (75) hide show
  1. package/DEPRECATED_useLexical.d.ts +19 -0
  2. package/DEPRECATED_useLexical.js.flow +4 -1
  3. package/DEPRECATED_useLexicalAutoFormatter.d.ts +9 -0
  4. package/DEPRECATED_useLexicalAutoFormatter.js.flow +4 -1
  5. package/DEPRECATED_useLexicalCanShowPlaceholder.d.ts +9 -0
  6. package/DEPRECATED_useLexicalCanShowPlaceholder.js.flow +4 -1
  7. package/DEPRECATED_useLexicalCharacterLimit.d.ts +8 -0
  8. package/DEPRECATED_useLexicalCharacterLimit.js.flow +4 -1
  9. package/DEPRECATED_useLexicalDecorators.d.ts +9 -0
  10. package/DEPRECATED_useLexicalDecorators.js.flow +4 -1
  11. package/DEPRECATED_useLexicalEditor.d.ts +9 -0
  12. package/DEPRECATED_useLexicalEditorEvents.d.ts +10 -0
  13. package/DEPRECATED_useLexicalEditorEvents.js.flow +4 -1
  14. package/DEPRECATED_useLexicalHistory.d.ts +12 -0
  15. package/DEPRECATED_useLexicalHistory.js.flow +4 -1
  16. package/DEPRECATED_useLexicalList.d.ts +9 -0
  17. package/DEPRECATED_useLexicalList.js.flow +4 -1
  18. package/DEPRECATED_useLexicalPlainText.d.ts +10 -0
  19. package/DEPRECATED_useLexicalPlainText.js.flow +4 -1
  20. package/DEPRECATED_useLexicalRichText.d.ts +10 -0
  21. package/DEPRECATED_useLexicalRichText.js.flow +4 -1
  22. package/LexicalAutoFocusPlugin.d.ts +1 -2
  23. package/LexicalAutoLinkPlugin.d.ts +12 -12
  24. package/LexicalAutoScrollPlugin.d.ts +6 -4
  25. package/LexicalBlockWithAlignableContents.d.ts +11 -8
  26. package/LexicalBlockWithAlignableContents.dev.js +3 -2
  27. package/LexicalBlockWithAlignableContents.js.flow +4 -0
  28. package/LexicalBlockWithAlignableContents.prod.js +4 -4
  29. package/LexicalCharacterLimitPlugin.d.ts +3 -4
  30. package/LexicalCheckListPlugin.d.ts +1 -2
  31. package/LexicalClearEditorPlugin.d.ts +4 -4
  32. package/LexicalCollaborationPlugin.d.ts +17 -31
  33. package/LexicalComposer.d.ts +16 -14
  34. package/LexicalComposer.dev.js +41 -1
  35. package/LexicalComposer.js.flow +1 -1
  36. package/LexicalComposer.prod.js +3 -2
  37. package/LexicalComposerContext.d.ts +10 -15
  38. package/LexicalContentEditable.d.ts +24 -23
  39. package/LexicalContentEditable.js.flow +1 -1
  40. package/LexicalDecoratorBlockNode.d.ts +13 -24
  41. package/LexicalHashtagPlugin.d.ts +1 -2
  42. package/LexicalHistoryPlugin.d.ts +6 -23
  43. package/LexicalHorizontalRuleNode.d.ts +19 -17
  44. package/LexicalLinkPlugin.d.ts +1 -2
  45. package/LexicalLinkPlugin.dev.js +1 -0
  46. package/LexicalListPlugin.d.ts +1 -2
  47. package/LexicalMarkdownShortcutPlugin.d.ts +4 -6
  48. package/LexicalNestedComposer.d.ts +6 -8
  49. package/LexicalNestedComposer.dev.js +1 -0
  50. package/LexicalNestedComposer.prod.js +2 -2
  51. package/LexicalOnChangePlugin.d.ts +5 -7
  52. package/LexicalPlainTextPlugin.d.ts +6 -9
  53. package/LexicalPlainTextPlugin.dev.js +25 -1
  54. package/LexicalPlainTextPlugin.js.flow +6 -2
  55. package/LexicalPlainTextPlugin.prod.js +3 -3
  56. package/LexicalRichTextPlugin.d.ts +6 -9
  57. package/LexicalRichTextPlugin.dev.js +25 -1
  58. package/LexicalRichTextPlugin.js.flow +6 -2
  59. package/LexicalRichTextPlugin.prod.js +3 -3
  60. package/LexicalTablePlugin.d.ts +1 -2
  61. package/LexicalTreeView.d.ts +9 -11
  62. package/README.md +1 -2
  63. package/package.json +22 -19
  64. package/shared/useCanShowPlaceholder.d.ts +9 -0
  65. package/shared/useCharacterLimit.d.ts +16 -0
  66. package/shared/useDecorators.d.ts +9 -0
  67. package/shared/useEditorEvents.d.ts +10 -0
  68. package/shared/useHistory.d.ts +10 -0
  69. package/shared/useList.d.ts +9 -0
  70. package/shared/usePlainTextSetup.d.ts +10 -0
  71. package/shared/useRichTextSetup.d.ts +10 -0
  72. package/shared/useYjsCollaboration.d.ts +14 -0
  73. package/useLexicalIsTextContentEmpty.d.ts +2 -7
  74. package/useLexicalNodeSelection.d.ts +2 -6
  75. package/useLexicalTextEntity.d.ts +4 -13
@@ -5,27 +5,28 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- export type Props = Readonly<{
10
- ariaActiveDescendantID?: string;
11
- ariaAutoComplete?: string;
12
- ariaControls?: string;
13
- ariaDescribedBy?: string;
14
- ariaExpanded?: boolean;
15
- ariaLabel?: string;
16
- ariaLabelledBy?: string;
17
- ariaMultiline?: boolean;
18
- ariaOwneeID?: string;
19
- ariaRequired?: string;
20
- autoCapitalize?: boolean;
21
- autoComplete?: boolean;
22
- autoCorrect?: boolean;
23
- className?: string;
24
- readOnly?: boolean;
25
- role?: string;
26
- style?: StyleSheetList;
27
- spellCheck?: boolean;
28
- tabIndex?: number;
29
- testid?: string;
8
+ import { CSSProperties } from 'react';
9
+ export declare type Props = Readonly<{
10
+ ariaActiveDescendantID?: string;
11
+ ariaAutoComplete?: string;
12
+ ariaControls?: string;
13
+ ariaDescribedBy?: string;
14
+ ariaExpanded?: boolean;
15
+ ariaLabel?: string;
16
+ ariaLabelledBy?: string;
17
+ ariaMultiline?: boolean;
18
+ ariaOwneeID?: string;
19
+ ariaRequired?: string;
20
+ autoCapitalize?: boolean;
21
+ autoComplete?: boolean;
22
+ autoCorrect?: boolean;
23
+ className?: string;
24
+ id?: string;
25
+ readOnly?: boolean;
26
+ role?: string;
27
+ spellCheck?: boolean;
28
+ style?: CSSProperties;
29
+ tabIndex?: number;
30
+ testid?: string;
30
31
  }>;
31
- export function ContentEditable(props: Props): JSX.Element | null;
32
+ export declare function ContentEditable({ ariaActiveDescendantID, ariaAutoComplete, ariaControls, ariaDescribedBy, ariaExpanded, ariaLabel, ariaLabelledBy, ariaMultiline, ariaOwneeID, ariaRequired, autoCapitalize, autoComplete, autoCorrect, className, id, role, spellCheck, style, tabIndex, testid, }: Props): JSX.Element;
@@ -24,7 +24,7 @@ export type Props = $ReadOnly<{
24
24
  className?: string,
25
25
  readOnly?: boolean,
26
26
  role?: string,
27
- style?: StyleSheetList,
27
+ style?: $Shape<{[string]: string | number}>,
28
28
  spellCheck?: boolean,
29
29
  tabIndex?: number,
30
30
  testid?: string,
@@ -5,28 +5,17 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {
10
- ElementFormatType,
11
- LexicalNode,
12
- NodeKey,
13
- SerializedLexicalNode,
14
- } from 'lexical';
15
-
16
- import {DecoratorNode} from 'lexical';
17
-
18
- export type SerializedDecoratorBlockNode = SerializedLexicalNode & {
19
- format: ElementFormatType;
20
- };
21
-
22
- declare class DecoratorBlockNode<T> extends DecoratorNode<T> {
23
- __format: ElementFormatType;
24
- constructor(format?: ElementFormatType | null, key?: NodeKey);
25
- createDOM(): HTMLElement;
26
- setFormat(format: ElementFormatType): void;
27
- exportJSON(): SerializedDecoratorBlockNode;
8
+ import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
9
+ import { DecoratorNode } from 'lexical';
10
+ export declare type SerializedDecoratorBlockNode = Spread<{
11
+ format: ElementFormatType | '';
12
+ }, SerializedLexicalNode>;
13
+ export declare class DecoratorBlockNode extends DecoratorNode<JSX.Element> {
14
+ __format: ElementFormatType | null | undefined;
15
+ constructor(format?: ElementFormatType, key?: NodeKey);
16
+ exportJSON(): SerializedDecoratorBlockNode;
17
+ createDOM(): HTMLElement;
18
+ updateDOM(): false;
19
+ setFormat(format: ElementFormatType): void;
28
20
  }
29
-
30
- declare function $isDecoratorBlockNode<T>(
31
- node: LexicalNode,
32
- ): node is DecoratorBlockNode<T>;
21
+ export declare function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode;
@@ -5,5 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- export function HashtagPlugin(): JSX.Element | null;
8
+ export declare function HashtagPlugin(): JSX.Element;
@@ -5,26 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {
10
- EditorState,
11
- GridSelection,
12
- LexicalEditor,
13
- NodeSelection,
14
- RangeSelection,
15
- } from 'lexical';
16
-
17
- export type HistoryStateEntry = {
18
- editor: LexicalEditor;
19
- editorState: EditorState;
20
- undoSelection?: RangeSelection | NodeSelection | GridSelection | null;
21
- };
22
- export type HistoryState = {
23
- current: null | HistoryStateEntry;
24
- redoStack: Array<HistoryStateEntry>;
25
- undoStack: Array<HistoryStateEntry>;
26
- };
27
- export function HistoryPlugin(arg0: {
28
- externalHistoryState?: HistoryState;
29
- }): JSX.Element | null;
30
- export function createEmptyHistoryState(): HistoryState;
8
+ import type { HistoryState } from '@lexical/history';
9
+ export { createEmptyHistoryState } from '@lexical/history';
10
+ export type { HistoryState };
11
+ export declare function HistoryPlugin({ externalHistoryState, }: {
12
+ externalHistoryState?: HistoryState;
13
+ }): null;
@@ -5,21 +5,23 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {LexicalNode, LexicalCommand} from 'lexical';
10
- import {DecoratorNode} from 'lexical';
11
-
12
- export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element | null> {
13
- static getType(): string;
14
- static clone(node: HorizontalRuleNode): HorizontalRuleNode;
15
- createDOM(): HTMLElement;
16
- getTextContent(): '\n';
17
- isTopLevel(): true;
18
- updateDOM(): false;
19
- decorate(): JSX.Element | null;
8
+ import type { LexicalCommand, LexicalNode, SerializedLexicalNode } from 'lexical';
9
+ import { DecoratorNode } from 'lexical';
10
+ export declare type SerializedHorizontalRuleNode = SerializedLexicalNode & {
11
+ type: 'horizontalrule';
12
+ version: 1;
13
+ };
14
+ export declare const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
15
+ export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
16
+ static getType(): string;
17
+ static clone(node: HorizontalRuleNode): HorizontalRuleNode;
18
+ static importJSON(serializedNode: SerializedHorizontalRuleNode): HorizontalRuleNode;
19
+ exportJSON(): SerializedLexicalNode;
20
+ createDOM(): HTMLElement;
21
+ getTextContent(): '\n';
22
+ isTopLevel(): true;
23
+ updateDOM(): false;
24
+ decorate(): JSX.Element;
20
25
  }
21
- export function $createHorizontalRuleNode(): HorizontalRuleNode;
22
- export function $isHorizontalRuleNode(
23
- node: LexicalNode | null | undefined,
24
- ): node is HorizontalRuleNode;
25
- export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
26
+ export declare function $createHorizontalRuleNode(): HorizontalRuleNode;
27
+ export declare function $isHorizontalRuleNode(node: LexicalNode | null | undefined): node is HorizontalRuleNode;
@@ -5,5 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- export function LinkPlugin(): null;
8
+ export declare function LinkPlugin(): null;
@@ -16,6 +16,7 @@ var react = require('react');
16
16
  *
17
17
  * This source code is licensed under the MIT license found in the
18
18
  * LICENSE file in the root directory of this source tree.
19
+ *
19
20
  */
20
21
  function LinkPlugin() {
21
22
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -5,5 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- export function ListPlugin(): null;
8
+ export declare function ListPlugin(): null;
@@ -5,9 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {Transformer} from '@lexical/markdown';
10
-
11
- export function MarkdownShortcutPlugin(arg0: {
12
- transformers?: Array<Transformer>;
13
- }): JSX.Element | null;
8
+ import type { Transformer } from '@lexical/markdown';
9
+ export declare function MarkdownShortcutPlugin({ transformers, }: Readonly<{
10
+ transformers?: Array<Transformer>;
11
+ }>): null;
@@ -5,11 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {LexicalEditor, EditorThemeClasses} from 'lexical';
10
-
11
- export function LexicalNestedComposer(arg0: {
12
- initialEditor: LexicalEditor;
13
- initialTheme?: EditorThemeClasses;
14
- children: JSX.Element | (JSX.Element | string | null)[] | null;
15
- }): JSX.Element | null;
8
+ import type { EditorThemeClasses, LexicalEditor } from 'lexical';
9
+ export declare function LexicalNestedComposer({ initialEditor, children, initialTheme, }: {
10
+ children: JSX.Element | string | (JSX.Element | string)[];
11
+ initialEditor: LexicalEditor;
12
+ initialTheme?: EditorThemeClasses;
13
+ }): JSX.Element;
@@ -41,6 +41,7 @@ function LexicalNestedComposer({
41
41
 
42
42
  initialEditor._parentEditor = parentEditor;
43
43
  initialEditor._nodes = parentEditor._nodes;
44
+ initialEditor._config.namespace = parentEditor._config.namespace;
44
45
  return [initialEditor, context];
45
46
  }, // We only do this for init
46
47
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5,5 +5,5 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  'use strict';var c=require("@lexical/react/LexicalCollaborationPlugin"),d=require("@lexical/react/LexicalComposerContext"),h=require("react");
8
- exports.LexicalNestedComposer=function({initialEditor:a,children:k,initialTheme:l}){let e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #9; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let p=h.useMemo(()=>{const [g,m]=e,f=l||m.getTheme()||void 0,n=d.createLexicalComposerContext(e,f);void 0!==f&&(a._config.theme=f);a._parentEditor=g;a._nodes=g._nodes;return[a,n]},[]);var {yjsDocMap:b}=
9
- c.useCollaborationContext();let q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)}
8
+ exports.LexicalNestedComposer=function({initialEditor:a,children:k,initialTheme:l}){let e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #9; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let p=h.useMemo(()=>{const [f,m]=e,g=l||m.getTheme()||void 0,n=d.createLexicalComposerContext(e,g);void 0!==g&&(a._config.theme=g);a._parentEditor=f;a._nodes=f._nodes;a._config.namespace=f._config.namespace;
9
+ return[a,n]},[]);var {yjsDocMap:b}=c.useCollaborationContext();let q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)}
@@ -5,11 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {EditorState, LexicalEditor} from 'lexical';
10
-
11
- export function OnChangePlugin(arg0: {
12
- ignoreInitialChange?: boolean;
13
- ignoreSelectionChange?: boolean;
14
- onChange: (editorState: EditorState, editor: LexicalEditor) => void;
8
+ import type { EditorState, LexicalEditor } from 'lexical';
9
+ export declare function OnChangePlugin({ ignoreInitialChange, ignoreSelectionChange, onChange, }: {
10
+ ignoreInitialChange?: boolean;
11
+ ignoreSelectionChange?: boolean;
12
+ onChange: (editorState: EditorState, editor: LexicalEditor) => void;
15
13
  }): null;
@@ -5,12 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {EditorState} from 'lexical';
10
-
11
- type InitialEditorStateType = null | string | EditorState | (() => void);
12
- export function PlainTextPlugin(arg0: {
13
- contentEditable: JSX.Element | null;
14
- initialEditorState?: InitialEditorStateType;
15
- placeholder: JSX.Element | string | null;
16
- }): JSX.Element | null;
8
+ import { InitialEditorStateType } from '@lexical/plain-text';
9
+ export declare function PlainTextPlugin({ contentEditable, placeholder, initialEditorState, }: {
10
+ contentEditable: JSX.Element;
11
+ initialEditorState?: InitialEditorStateType;
12
+ placeholder: JSX.Element | string;
13
+ }): JSX.Element;
@@ -14,6 +14,25 @@ var dragon = require('@lexical/dragon');
14
14
  var plainText = require('@lexical/plain-text');
15
15
  var utils = require('@lexical/utils');
16
16
 
17
+ /**
18
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
19
+ *
20
+ * This source code is licensed under the MIT license found in the
21
+ * LICENSE file in the root directory of this source tree.
22
+ *
23
+ */
24
+ function warnOnlyOnce(message) {
25
+
26
+ let run = false;
27
+ return () => {
28
+ if (!run) {
29
+ console.warn(message);
30
+ }
31
+
32
+ run = true;
33
+ };
34
+ }
35
+
17
36
  /**
18
37
  * Copyright (c) Meta Platforms, Inc. and affiliates.
19
38
  *
@@ -119,15 +138,20 @@ function usePlainTextSetup(editor, initialEditorState) {
119
138
  * LICENSE file in the root directory of this source tree.
120
139
  *
121
140
  */
141
+ const deprecatedInitialEditorStateWarning = warnOnlyOnce('initialEditorState on PlainTextPlugin is deprecated and will be removed soon. Use LexicalComposer initialEditorState instead.');
122
142
  function PlainTextPlugin({
123
143
  contentEditable,
124
144
  placeholder,
125
145
  initialEditorState
126
146
  }) {
147
+ if (initialEditorState !== undefined) {
148
+ deprecatedInitialEditorStateWarning();
149
+ }
150
+
127
151
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
128
152
  const showPlaceholder = useCanShowPlaceholder(editor);
129
- usePlainTextSetup(editor, initialEditorState);
130
153
  const decorators = useDecorators(editor);
154
+ usePlainTextSetup(editor, initialEditorState);
131
155
  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
132
156
  }
133
157
 
@@ -7,9 +7,13 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- import type {EditorState} from 'lexical';
10
+ import type {EditorState, LexicalEditor} from 'lexical';
11
11
 
12
- type InitialEditorStateType = null | string | EditorState | (() => void);
12
+ type InitialEditorStateType =
13
+ | null
14
+ | string
15
+ | EditorState
16
+ | ((editor: LexicalEditor) => void);
13
17
 
14
18
  declare export function PlainTextPlugin({
15
19
  contentEditable: React$Node,
@@ -5,6 +5,6 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  'use strict';var e=require("@lexical/react/LexicalComposerContext"),h=require("react"),k=require("@lexical/text"),m=require("react-dom"),n=require("@lexical/dragon"),p=require("@lexical/plain-text"),q=require("@lexical/utils"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
8
- function t(a){let [c,d]=h.useState(a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing())));r(()=>{let b=a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing()));d(b);return a.registerUpdateListener(({editorState:g})=>{let f=a.isComposing();b=g.read(k.$canShowPlaceholderCurry(f));d(b)})},[a]);return c}
9
- function u(a){let [c,d]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{d(b)})}),[a]);h.useEffect(()=>{d(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let l=0;l<g.length;l++){var f=g[l];let v=c[f];f=a.getElementByKey(f);null!==f&&b.push(m.createPortal(v,f))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerPlainText(a,c),n.registerDragonSupport(a)),[a])}
10
- exports.PlainTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:d}){let [b]=e.useLexicalComposerContext(),g=t(b);w(b,d);d=u(b);return h.createElement(h.Fragment,null,a,g&&c,d)}
8
+ function t(a){let [c,f]=h.useState(a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing())));r(()=>{let b=a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing()));f(b);return a.registerUpdateListener(({editorState:g})=>{let d=a.isComposing();b=g.read(k.$canShowPlaceholderCurry(d));f(b)})},[a]);return c}
9
+ function u(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let l=0;l<g.length;l++){var d=g[l];let v=c[d];d=a.getElementByKey(d);null!==d&&b.push(m.createPortal(v,d))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerPlainText(a,c),n.registerDragonSupport(a)),[a])}
10
+ exports.PlainTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){void 0!==f&&(void 0)();let [b]=e.useLexicalComposerContext(),g=t(b),d=u(b);w(b,f);return h.createElement(h.Fragment,null,a,g&&c,d)}
@@ -5,12 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {EditorState} from 'lexical';
10
-
11
- type InitialEditorStateType = null | string | EditorState | (() => void);
12
- export function RichTextPlugin(arg0: {
13
- contentEditable: JSX.Element | null;
14
- initialEditorState?: InitialEditorStateType;
15
- placeholder: JSX.Element | string | null;
16
- }): JSX.Element | null;
8
+ import { InitialEditorStateType } from '@lexical/rich-text';
9
+ export declare function RichTextPlugin({ contentEditable, placeholder, initialEditorState, }: Readonly<{
10
+ contentEditable: JSX.Element;
11
+ initialEditorState?: InitialEditorStateType;
12
+ placeholder: JSX.Element | string;
13
+ }>): JSX.Element;
@@ -14,6 +14,25 @@ var dragon = require('@lexical/dragon');
14
14
  var richText = require('@lexical/rich-text');
15
15
  var utils = require('@lexical/utils');
16
16
 
17
+ /**
18
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
19
+ *
20
+ * This source code is licensed under the MIT license found in the
21
+ * LICENSE file in the root directory of this source tree.
22
+ *
23
+ */
24
+ function warnOnlyOnce(message) {
25
+
26
+ let run = false;
27
+ return () => {
28
+ if (!run) {
29
+ console.warn(message);
30
+ }
31
+
32
+ run = true;
33
+ };
34
+ }
35
+
17
36
  /**
18
37
  * Copyright (c) Meta Platforms, Inc. and affiliates.
19
38
  *
@@ -119,15 +138,20 @@ function useRichTextSetup(editor, initialEditorState) {
119
138
  * LICENSE file in the root directory of this source tree.
120
139
  *
121
140
  */
141
+ const deprecatedInitialEditorStateWarning = warnOnlyOnce('initialEditorState on RichTextPlugin is deprecated and will be removed soon. Use LexicalComposer initialEditorState instead.');
122
142
  function RichTextPlugin({
123
143
  contentEditable,
124
144
  placeholder,
125
145
  initialEditorState
126
146
  }) {
147
+ if (initialEditorState !== undefined) {
148
+ deprecatedInitialEditorStateWarning();
149
+ }
150
+
127
151
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
128
152
  const showPlaceholder = useCanShowPlaceholder(editor);
129
- useRichTextSetup(editor, initialEditorState);
130
153
  const decorators = useDecorators(editor);
154
+ useRichTextSetup(editor, initialEditorState);
131
155
  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
132
156
  }
133
157
 
@@ -7,9 +7,13 @@
7
7
  * @flow strict
8
8
  */
9
9
 
10
- import type {EditorState} from 'lexical';
10
+ import type {EditorState, LexicalEditor} from 'lexical';
11
11
 
12
- type InitialEditorStateType = null | string | EditorState | (() => void);
12
+ type InitialEditorStateType =
13
+ | null
14
+ | string
15
+ | EditorState
16
+ | ((editor: LexicalEditor) => void);
13
17
 
14
18
  declare export function RichTextPlugin({
15
19
  contentEditable: React$Node,
@@ -5,6 +5,6 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  'use strict';var e=require("@lexical/react/LexicalComposerContext"),h=require("react"),k=require("@lexical/text"),m=require("react-dom"),n=require("@lexical/dragon"),p=require("@lexical/rich-text"),q=require("@lexical/utils"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
8
- function t(a){let [c,d]=h.useState(a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing())));r(()=>{let b=a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing()));d(b);return a.registerUpdateListener(({editorState:g})=>{let f=a.isComposing();b=g.read(k.$canShowPlaceholderCurry(f));d(b)})},[a]);return c}
9
- function u(a){let [c,d]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{d(b)})}),[a]);h.useEffect(()=>{d(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let l=0;l<g.length;l++){var f=g[l];let v=c[f];f=a.getElementByKey(f);null!==f&&b.push(m.createPortal(v,f))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerRichText(a,c),n.registerDragonSupport(a)),[a])}
10
- exports.RichTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:d}){let [b]=e.useLexicalComposerContext(),g=t(b);w(b,d);d=u(b);return h.createElement(h.Fragment,null,a,g&&c,d)}
8
+ function t(a){let [c,f]=h.useState(a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing())));r(()=>{let b=a.getEditorState().read(k.$canShowPlaceholderCurry(a.isComposing()));f(b);return a.registerUpdateListener(({editorState:g})=>{let d=a.isComposing();b=g.read(k.$canShowPlaceholderCurry(d));f(b)})},[a]);return c}
9
+ function u(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let l=0;l<g.length;l++){var d=g[l];let v=c[d];d=a.getElementByKey(d);null!==d&&b.push(m.createPortal(v,d))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerRichText(a,c),n.registerDragonSupport(a)),[a])}
10
+ exports.RichTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){void 0!==f&&(void 0)();let [b]=e.useLexicalComposerContext(),g=t(b),d=u(b);w(b,f);return h.createElement(h.Fragment,null,a,g&&c,d)}
@@ -5,5 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- export function TablePlugin(): null;
8
+ export declare function TablePlugin(): JSX.Element;
@@ -5,14 +5,12 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
-
9
- import type {LexicalEditor} from 'lexical';
10
-
11
- export function TreeView(props: {
12
- timeTravelPanelClassName: string;
13
- timeTravelPanelSliderClassName: string;
14
- timeTravelPanelButtonClassName: string;
15
- timeTravelButtonClassName: string;
16
- viewClassName: string;
17
- editor: LexicalEditor;
18
- }): JSX.Element | null;
8
+ import type { LexicalEditor } from 'lexical';
9
+ export declare function TreeView({ timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
10
+ editor: LexicalEditor;
11
+ timeTravelButtonClassName: string;
12
+ timeTravelPanelButtonClassName: string;
13
+ timeTravelPanelClassName: string;
14
+ timeTravelPanelSliderClassName: string;
15
+ viewClassName: string;
16
+ }): JSX.Element;
package/README.md CHANGED
@@ -66,12 +66,11 @@ function onError(error) {
66
66
 
67
67
  function Editor() {
68
68
  const initialConfig = {
69
+ namespace: 'MyEditor',
69
70
  theme,
70
71
  onError,
71
72
  };
72
73
 
73
-
74
-
75
74
  return (
76
75
  <LexicalComposer initialConfig={initialConfig}>
77
76
  <LexicalPlainTextPlugin
package/package.json CHANGED
@@ -8,28 +8,28 @@
8
8
  "rich-text"
9
9
  ],
10
10
  "license": "MIT",
11
- "version": "0.3.1",
11
+ "version": "0.3.4",
12
12
  "dependencies": {
13
- "@lexical/clipboard": "0.3.1",
14
- "@lexical/list": "0.3.1",
15
- "@lexical/table": "0.3.1",
16
- "@lexical/yjs": "0.3.1",
17
- "@lexical/hashtag": "0.3.1",
18
- "@lexical/selection": "0.3.1",
19
- "@lexical/utils": "0.3.1",
20
- "@lexical/dragon": "0.3.1",
21
- "@lexical/plain-text": "0.3.1",
22
- "@lexical/rich-text": "0.3.1",
23
- "@lexical/code": "0.3.1",
24
- "@lexical/text": "0.3.1",
25
- "@lexical/link": "0.3.1",
26
- "@lexical/overflow": "0.3.1",
27
- "@lexical/history": "0.3.1",
28
- "@lexical/markdown": "0.3.1",
29
- "@lexical/mark": "0.3.1"
13
+ "@lexical/clipboard": "0.3.4",
14
+ "@lexical/code": "0.3.4",
15
+ "@lexical/dragon": "0.3.4",
16
+ "@lexical/hashtag": "0.3.4",
17
+ "@lexical/history": "0.3.4",
18
+ "@lexical/link": "0.3.4",
19
+ "@lexical/list": "0.3.4",
20
+ "@lexical/mark": "0.3.4",
21
+ "@lexical/markdown": "0.3.4",
22
+ "@lexical/overflow": "0.3.4",
23
+ "@lexical/plain-text": "0.3.4",
24
+ "@lexical/rich-text": "0.3.4",
25
+ "@lexical/selection": "0.3.4",
26
+ "@lexical/table": "0.3.4",
27
+ "@lexical/text": "0.3.4",
28
+ "@lexical/utils": "0.3.4",
29
+ "@lexical/yjs": "0.3.4"
30
30
  },
31
31
  "peerDependencies": {
32
- "lexical": "0.3.1",
32
+ "lexical": "0.3.4",
33
33
  "react": ">=17.x",
34
34
  "react-dom": ">=17.x"
35
35
  },
@@ -37,5 +37,8 @@
37
37
  "type": "git",
38
38
  "url": "https://github.com/facebook/lexical",
39
39
  "directory": "packages/lexical-react"
40
+ },
41
+ "devDependencies": {
42
+ "utility-types": "^3.10.0"
40
43
  }
41
44
  }
@@ -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
+ import type { LexicalEditor } from 'lexical';
9
+ export declare function useCanShowPlaceholder(editor: LexicalEditor): boolean;
@@ -0,0 +1,16 @@
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 { LexicalEditor } from 'lexical';
9
+ import { OverflowNode } from '@lexical/overflow';
10
+ declare type OptionalProps = {
11
+ remainingCharacters?: (characters: number) => void;
12
+ strlen?: (input: string) => number;
13
+ };
14
+ export declare function useCharacterLimit(editor: LexicalEditor, maxCharacters: number, optional?: OptionalProps): void;
15
+ export declare function mergePrevious(overflowNode: OverflowNode): void;
16
+ export {};
@@ -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
+ import type { LexicalEditor } from 'lexical';
9
+ export declare function useDecorators(editor: LexicalEditor): Array<JSX.Element>;
@@ -0,0 +1,10 @@
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 { EventHandler, LexicalEditor } from 'lexical';
9
+ export declare type InputEvents = Array<[string, EventHandler]>;
10
+ export declare function useEditorEvents(events: InputEvents, editor: LexicalEditor): void;