@lexical/react 0.1.19 → 0.2.0

package/LexicalAutoLinkPlugin.d.ts

@@ -17,4 +17,4 @@ export type LinkMatcher = (text: string) => LinkMatcherResult | null;
 export default function LexicalAutoLinkPlugin(props: {
   matchers: Array<LinkMatcher>;
   onChange?: ChangeHandler;
-}): React.ReactNode;
+}): JSX.Element | null;

package/LexicalCharacterLimitPlugin.d.ts

@@ -8,4 +8,4 @@
 
 export default function LexicalCharacterLimitPlugin(props: {
   charset: 'UTF-8' | 'UTF-16';
-}): React.ReactNode;
+}): JSX.Element | null;

package/LexicalClearEditorPlugin.d.ts

@@ -11,4 +11,6 @@ import {$ReadOnly} from 'utility-types';
 type Props = $ReadOnly<{
   onClear?: () => void;
 }>;
-export default function LexicalClearEditorPlugin(arg0: Props): React.ReactNode;
+export default function LexicalClearEditorPlugin(
+  arg0: Props,
+): JSX.Element | null;

package/LexicalCollaborationPlugin.d.ts

@@ -51,6 +51,6 @@ export function CollaborationPlugin(arg0: {
   providerFactory: ProviderFactory;
   shouldBootstrap: boolean;
   username?: string;
-}): React.ReactNode;
+}): JSX.Element | null;
 export declare var CollaborationContext: React.Context<CollaborationContextType>;
 export function useCollaborationContext(): CollaborationContextType;

package/LexicalComposer.d.ts

@@ -17,6 +17,6 @@ type Props = {
     theme?: EditorThemeClasses;
     onError: (error: Error, editor: LexicalEditor) => void;
   };
-  children: React.ReactNode;
+  children: JSX.Element | null;
 };
-export default function LexicalComposer(arg0: Props): React.ReactNode;
+export default function LexicalComposer(arg0: Props): JSX.Element | null;

package/LexicalContentEditable.d.ts

@@ -29,4 +29,6 @@ export type Props = $ReadOnly<{
   tabIndex?: number;
   testid?: string;
 }>;
-export default function LexicalContentEditable(props: Props): React.ReactNode;
+export default function LexicalContentEditable(
+  props: Props,
+): JSX.Element | null;

package/LexicalHashtagPlugin.d.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export default function LexicalHashtagPlugin(): React.ReactNode;
+export default function LexicalHashtagPlugin(): JSX.Element | null;

package/LexicalHistoryPlugin.d.ts

@@ -25,5 +25,5 @@ export type HistoryState = {
 };
 export function HistoryPlugin(arg0: {
   externalHistoryState?: HistoryState;
-}): React.ReactNode;
+}): JSX.Element | null;
 export function createEmptyHistoryState(): HistoryState;

package/LexicalHorizontalRuleNode.d.ts

@@ -8,14 +8,14 @@
 
 import type {LexicalNode, LexicalCommand} from 'lexical';
 import {DecoratorNode} from 'lexical';
-export declare class HorizontalRuleNode extends DecoratorNode<React.ReactNode> {
+export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element | null> {
   getType(): string;
   clone(node: HorizontalRuleNode): HorizontalRuleNode;
   createDOM(): HTMLElement;
   getTextContent(): '\n';
   isTopLevel(): true;
   updateDOM(): false;
-  decorate(): React.ReactNode;
+  decorate(): JSX.Element | null;
 }
 export function $createHorizontalRuleNode(): HorizontalRuleNode;
 export function $isHorizontalRuleNode(

package/LexicalHorizontalRuleNode.dev.js

@@ -29,7 +29,22 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
   }
 
   static clone(node) {
-    return new HorizontalRuleNode(node.__state, node.__key);
+    return new HorizontalRuleNode(node.__key);
+  }
+
+  static importDOM() {
+    return {
+      hr: node => ({
+        conversion: convertHorizontalRuleElement,
+        priority: 0
+      })
+    };
+  }
+
+  exportDOM() {
+    return {
+      element: document.createElement('hr')
+    };
   }
 
   createDOM() {
@@ -55,6 +70,13 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
   }
 
 }
+
+function convertHorizontalRuleElement() {
+  return {
+    node: $createHorizontalRuleNode()
+  };
+}
+
 function $createHorizontalRuleNode() {
   return new HorizontalRuleNode();
 }

package/LexicalHorizontalRuleNode.prod.js

@@ -4,5 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b=require("lexical"),c=require("react");const d=b.createCommand();function e(){return c.createElement("hr",null)}class f extends b.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new f(a.__state,a.__key)}createDOM(){const a=document.createElement("div");a.style.display="contents";return a}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return c.createElement(e,null)}}exports.$createHorizontalRuleNode=function(){return new f};
-exports.$isHorizontalRuleNode=function(a){return a instanceof f};exports.HorizontalRuleNode=f;exports.INSERT_HORIZONTAL_RULE_COMMAND=d;
+var b=require("lexical"),c=require("react");const d=b.createCommand();function e(){return c.createElement("hr",null)}
+class f extends b.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new f(a.__key)}static importDOM(){return{hr:()=>({conversion:g,priority:0})}}exportDOM(){return{element:document.createElement("hr")}}createDOM(){const a=document.createElement("div");a.style.display="contents";return a}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return c.createElement(e,null)}}function g(){return{node:h()}}function h(){return new f}
+exports.$createHorizontalRuleNode=h;exports.$isHorizontalRuleNode=function(a){return a instanceof f};exports.HorizontalRuleNode=f;exports.INSERT_HORIZONTAL_RULE_COMMAND=d;

package/LexicalMarkdownShortcutPlugin.d.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export default function LexicalMarkdownShortcutPlugin(): React.ReactNode;
+export default function LexicalMarkdownShortcutPlugin(): JSX.Element | null;

package/LexicalNestedComposer.d.ts

@@ -6,12 +6,10 @@
  *
  */
 
-import type {DecoratorEditor, EditorThemeClasses} from 'lexical';
+import type {LexicalEditor, EditorThemeClasses} from 'lexical';
 
 export default function LexicalNestedComposer(arg0: {
-  initialConfig: {
-    decoratorEditor: DecoratorEditor;
-    theme?: EditorThemeClasses;
-  };
-  children: React.ReactNode;
-}): React.ReactNode;
+  initialEditor: LexicalEditor;
+  initialTheme?: EditorThemeClasses;
+  children: JSX.Element | null;
+}): JSX.Element | null;

package/LexicalNestedComposer.dev.js

@@ -7,8 +7,6 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
-var lexical = require('lexical');
 var React = require('react');
 
 /**
@@ -20,8 +18,9 @@ var React = require('react');
  * 
  */
 function LexicalNestedComposer({
-  initialConfig = {},
-  children
+  initialEditor,
+  children,
+  initialTheme
 }) {
   const parentContext = React.useContext(LexicalComposerContext.LexicalComposerContext);
 
@@ -31,45 +30,24 @@ function LexicalNestedComposer({
     }
   }
 
-  const [nestedEditor, setNestedEditor] = React.useState(null);
-  const {
-    decoratorEditor
-  } = initialConfig;
-  React.useEffect(() => {
-    if (!decoratorEditor.isEmpty() && nestedEditor !== null) {
-      decoratorEditor.init(nestedEditor);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [nestedEditor]);
   const composerContext = React.useMemo(() => {
     const [parentEditor, parentContextContext] = parentContext;
-    const composerTheme = initialConfig.theme || parentContextContext.getTheme() || undefined;
+    const composerTheme = initialTheme || parentContextContext.getTheme() || undefined;
     const context = LexicalComposerContext.createLexicalComposerContext(parentContext, composerTheme);
-    const editor = lexical.createEditor({
-      context,
-      namespace: parentEditor._config.namespace,
-      nodes: Array.from(parentEditor._nodes.values()).map(registeredNode => registeredNode.klass),
-      onError: parentEditor._onError,
-      parentEditor,
-      theme: composerTheme
-    });
-    return [editor, context];
+
+    if (composerTheme !== undefined) {
+      initialEditor._config.theme = composerTheme;
+    }
+
+    initialEditor._parentEditor = parentEditor;
+    initialEditor._nodes = parentEditor._nodes;
+    return [initialEditor, context];
   }, // We only do this for init
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const onChange = React.useCallback((editorState, nextNestedEditor) => {
-    if (!editorState.isEmpty()) {
-      decoratorEditor.set(nextNestedEditor);
-    } else {
-      setNestedEditor(nextNestedEditor);
-    }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
   return /*#__PURE__*/React.createElement(LexicalComposerContext.LexicalComposerContext.Provider, {
     value: composerContext
-  }, /*#__PURE__*/React.createElement(LexicalOnChangePlugin, {
-    onChange: onChange
-  }), children);
+  }, children);
 }
 
 module.exports = LexicalNestedComposer;

package/LexicalNestedComposer.js.flow

@@ -7,12 +7,10 @@
  * @flow strict
  */
 
-import type {DecoratorEditor, EditorThemeClasses, LexicalNode} from 'lexical';
+import type {LexicalEditor, EditorThemeClasses, LexicalNode} from 'lexical';
 
 declare export default function LexicalNestedComposer({
-  initialConfig: $ReadOnly<{
-    decoratorEditor: DecoratorEditor,
-    theme?: EditorThemeClasses,
-  }>,
   children: React$Node,
+  initialEditor: LexicalEditor,
+  initialTheme?: EditorThemeClasses,
 }): React$Node;

package/LexicalNestedComposer.prod.js

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/LexicalOnChangePlugin"),m=require("lexical"),n=require("react");
-module.exports=function({initialConfig:h={},children:p}){const e=n.useContext(a.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #72; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");const [f,q]=n.useState(null),{decoratorEditor:g}=h;n.useEffect(()=>{g.isEmpty()||null===f||g.init(f)},[f]);const t=n.useMemo(()=>{const [b,c]=e,k=h.theme||c.getTheme()||void 0,l=a.createLexicalComposerContext(e,k);return[m.createEditor({context:l,
-namespace:b._config.namespace,nodes:Array.from(b._nodes.values()).map(r=>r.klass),onError:b._onError,parentEditor:b,theme:k}),l]},[]),u=n.useCallback((b,c)=>{b.isEmpty()?q(c):g.set(c)},[]);return n.createElement(a.LexicalComposerContext.Provider,{value:t},n.createElement(d,{onChange:u}),p)};
+var b=require("@lexical/react/LexicalComposerContext"),c=require("react");
+module.exports=function({initialEditor:a,children:g,initialTheme:h}){const d=c.useContext(b.LexicalComposerContext);if(null==d)throw Error("Minified Lexical error #72; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");const m=c.useMemo(()=>{const [f,k]=d,e=h||k.getTheme()||void 0,l=b.createLexicalComposerContext(d,e);void 0!==e&&(a._config.theme=e);a._parentEditor=f;a._nodes=f._nodes;return[a,l]},[]);return c.createElement(b.LexicalComposerContext.Provider,
+{value:m},g)};

package/LexicalPlainTextPlugin.d.ts

@@ -9,7 +9,7 @@
 import type {EditorState} from 'lexical';
 type InitialEditorStateType = null | string | EditorState | (() => void);
 export default function PlainTextPlugin(arg0: {
-  contentEditable: React.ReactNode;
+  contentEditable: JSX.Element | null;
   initialEditorState?: InitialEditorStateType;
-  placeholder: React.ReactNode;
-}): React.ReactNode;
+  placeholder: JSX.Element | null;
+}): JSX.Element | null;

package/LexicalRichTextPlugin.d.ts

@@ -9,7 +9,7 @@
 import type {EditorState} from 'lexical';
 type InitialEditorStateType = null | string | EditorState | (() => void);
 export default function RichTextPlugin(arg0: {
-  contentEditable: React.ReactNode;
+  contentEditable: JSX.Element | null;
   initialEditorState?: InitialEditorStateType;
-  placeholder: React.ReactNode;
-}): React.ReactNode;
+  placeholder: JSX.Element | null;
+}): JSX.Element | null;

package/LexicalTreeView.d.ts

@@ -14,4 +14,4 @@ export default function TreeView(props: {
   timeTravelButtonClassName: string;
   viewClassName: string;
   editor: LexicalEditor;
-}): React.ReactNode;
+}): JSX.Element | null;

package/package.json

@@ -8,26 +8,27 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.1.19",
+  "version": "0.2.0",
   "dependencies": {
-    "@lexical/clipboard": "0.1.19",
-    "@lexical/list": "0.1.19",
-    "@lexical/table": "0.1.19",
-    "@lexical/yjs": "0.1.19",
-    "@lexical/hashtag": "0.1.19",
-    "@lexical/selection": "0.1.19",
-    "@lexical/utils": "0.1.19",
-    "@lexical/dragon": "0.1.19",
-    "@lexical/plain-text": "0.1.19",
-    "@lexical/rich-text": "0.1.19",
-    "@lexical/code": "0.1.19",
-    "@lexical/text": "0.1.19",
-    "@lexical/link": "0.1.19",
-    "@lexical/overflow": "0.1.19",
-    "@lexical/history": "0.1.19"
+    "@lexical/clipboard": "0.2.0",
+    "@lexical/list": "0.2.0",
+    "@lexical/table": "0.2.0",
+    "@lexical/yjs": "0.2.0",
+    "@lexical/hashtag": "0.2.0",
+    "@lexical/selection": "0.2.0",
+    "@lexical/utils": "0.2.0",
+    "@lexical/dragon": "0.2.0",
+    "@lexical/plain-text": "0.2.0",
+    "@lexical/rich-text": "0.2.0",
+    "@lexical/code": "0.2.0",
+    "@lexical/text": "0.2.0",
+    "@lexical/link": "0.2.0",
+    "@lexical/overflow": "0.2.0",
+    "@lexical/history": "0.2.0",
+    "@lexical/markdown": "0.2.0"
   },
   "peerDependencies": {
-    "lexical": "0.1.19",
+    "lexical": "0.2.0",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },

package/useLexicalDecoratorMap.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {DecoratorMap, DecoratorStateValue} from 'lexical';
-export default function useLexicalDecoratorMap<V extends DecoratorStateValue>(
-  decoratorMap: DecoratorMap,
-  key: string,
-  initialValue: (() => V) | V,
-): [V, (arg0: DecoratorStateValue) => void];

package/useLexicalDecoratorMap.dev.js

@@ -1,83 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';
-
-var lexical = require('lexical');
-var react = require('react');
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-const useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
-var useLayoutEffect = useLayoutEffectImpl;
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-function getInitialMapValue(decoratorMap, key, initialValue) {
-  // $FlowFixMe: Flow struggles with the generic
-  const value = decoratorMap.get(key);
-
-  if (value !== undefined) {
-    return value;
-  }
-
-  return typeof initialValue === 'function' ? initialValue() : initialValue;
-}
-
-function useLexicalDecoratorMap(decoratorMap, key, initialValue) {
-  const [latestValue, setReactValue] = react.useState(() => getInitialMapValue(decoratorMap, key, initialValue));
-  const [, triggerUpdate] = react.useState();
-  useLayoutEffect(() => {
-    const prevValue = decoratorMap.get(key);
-
-    if (prevValue !== latestValue) {
-      decoratorMap.set(key, latestValue);
-    }
-  }, [key, latestValue, decoratorMap]);
-  useLayoutEffect(() => {
-    if (lexical.isDecoratorArray(latestValue)) {
-      return latestValue.observe(() => {
-        triggerUpdate({});
-      });
-    }
-  }, [latestValue]);
-  useLayoutEffect(() => {
-    return decoratorMap.observe((changedKey, value) => {
-      if (changedKey === key) {
-        decoratorMap._map.set(changedKey, value);
-
-        setReactValue(value);
-      }
-    });
-  }, [decoratorMap, key]); // $FlowFixMe: needs refining
-
-  return [latestValue, setReactValue];
-}
-
-module.exports = useLexicalDecoratorMap;

package/useLexicalDecoratorMap.js

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict'
-const useLexicalDecoratorMap = process.env.NODE_ENV === 'development' ? require('./useLexicalDecoratorMap.dev.js') : require('./useLexicalDecoratorMap.prod.js')
-module.exports = useLexicalDecoratorMap;

package/useLexicalDecoratorMap.js.flow

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict
- */
-
-import type {DecoratorMap, DecoratorStateValue} from 'lexical';
-
-declare export default function useLexicalDecoratorMap<V: DecoratorStateValue>(
-  decoratorMap: DecoratorMap,
-  key: string,
-  initialValue: (() => V) | V,
-): [V, (DecoratorStateValue) => void];

package/useLexicalDecoratorMap.prod.js

@@ -1,8 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var e=require("lexical"),f=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;
-module.exports=function(a,d,g){const [b,h]=f.useState(()=>{var c=a.get(d);c=void 0!==c?c:"function"===typeof g?g():g;return c}),[,m]=f.useState();l(()=>{a.get(d)!==b&&a.set(d,b)},[d,b,a]);l(()=>{if(e.isDecoratorArray(b))return b.observe(()=>{m({})})},[b]);l(()=>a.observe((c,k)=>{c===d&&(a._map.set(c,k),h(k))}),[a,d]);return[b,h]};