@lexical/react 0.2.7 → 0.3.0

package/LexicalPlainTextPlugin.dev.js

@@ -20,7 +20,6 @@ var utils = require('@lexical/utils');
  * 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';
 
@@ -30,7 +29,6 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * 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;
@@ -41,16 +39,17 @@ var useLayoutEffect = useLayoutEffectImpl;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
-function useLexicalCanShowPlaceholder(editor) {
+function useCanShowPlaceholder(editor) {
   const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing())));
   useLayoutEffect(() => {
+    let currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
+    setCanShowPlaceholder(currentCanShowPlaceholder);
     return editor.registerUpdateListener(({
       editorState
     }) => {
       const isComposing = editor.isComposing();
-      const currentCanShowPlaceholder = editorState.read(text.$canShowPlaceholderCurry(isComposing));
+      currentCanShowPlaceholder = editorState.read(text.$canShowPlaceholderCurry(isComposing));
       setCanShowPlaceholder(currentCanShowPlaceholder);
     });
   }, [editor]);
@@ -63,7 +62,6 @@ function useLexicalCanShowPlaceholder(editor) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function useDecorators(editor) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
@@ -74,6 +72,12 @@ function useDecorators(editor) {
         setDecorators(nextDecorators);
       });
     });
+  }, [editor]);
+  React.useEffect(() => {
+    // If the content editable mounts before the subscription is added, then
+    // nothing will be rendered on initial pass. We can get around that by
+    // ensuring that we set the value.
+    setDecorators(editor.getDecorators());
   }, [editor]); // Return decorators defined as React Portals
 
   return React.useMemo(() => {
@@ -100,7 +104,6 @@ function useDecorators(editor) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function usePlainTextSetup(editor, initialEditorState) {
   useLayoutEffect(() => {
@@ -115,7 +118,6 @@ function usePlainTextSetup(editor, initialEditorState) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function PlainTextPlugin({
   contentEditable,
@@ -123,10 +125,10 @@ function PlainTextPlugin({
   initialEditorState
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const showPlaceholder = useLexicalCanShowPlaceholder(editor);
+  const showPlaceholder = useCanShowPlaceholder(editor);
   usePlainTextSetup(editor, initialEditorState);
   const decorators = useDecorators(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 
-module.exports = PlainTextPlugin;
+exports.PlainTextPlugin = PlainTextPlugin;

package/LexicalPlainTextPlugin.js.flow

@@ -11,7 +11,7 @@ import type {EditorState} from 'lexical';
 
 type InitialEditorStateType = null | string | EditorState | (() => void);
 
-declare export default function PlainTextPlugin({
+declare export function PlainTextPlugin({
   contentEditable: React$Node,
   initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=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;
-function t(a){const [c,e]=h.useState(a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing())));r(()=>a.registerUpdateListener(({editorState:b})=>{const f=a.isComposing();b=b.read(l.$canShowPlaceholderCurry(f));e(b)}),[a]);return c}
-function u(a){const [c,e]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{e(b)})}),[a]);return h.useMemo(()=>{const b=[],f=Object.keys(c);for(let k=0;k<f.length;k++){var g=f[k];const v=c[g];g=a.getElementByKey(g);null!==g&&b.push(m.createPortal(v,g))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerPlainText(a,c),n.registerDragonSupport(a)),[a])}
-module.exports=function({contentEditable:a,placeholder:c,initialEditorState:e}){const [b]=d.useLexicalComposerContext(),f=t(b);w(b,e);e=u(b);return h.createElement(h.Fragment,null,a,f&&c,e)};
+'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;
+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}
+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])}
+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)}

package/LexicalRichTextPlugin.d.ts

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

package/LexicalRichTextPlugin.dev.js

@@ -20,7 +20,6 @@ var utils = require('@lexical/utils');
  * 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';
 
@@ -30,7 +29,6 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * 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;
@@ -41,16 +39,17 @@ var useLayoutEffect = useLayoutEffectImpl;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
-function useLexicalCanShowPlaceholder(editor) {
+function useCanShowPlaceholder(editor) {
   const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing())));
   useLayoutEffect(() => {
+    let currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
+    setCanShowPlaceholder(currentCanShowPlaceholder);
     return editor.registerUpdateListener(({
       editorState
     }) => {
       const isComposing = editor.isComposing();
-      const currentCanShowPlaceholder = editorState.read(text.$canShowPlaceholderCurry(isComposing));
+      currentCanShowPlaceholder = editorState.read(text.$canShowPlaceholderCurry(isComposing));
       setCanShowPlaceholder(currentCanShowPlaceholder);
     });
   }, [editor]);
@@ -63,7 +62,6 @@ function useLexicalCanShowPlaceholder(editor) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function useDecorators(editor) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
@@ -74,6 +72,12 @@ function useDecorators(editor) {
         setDecorators(nextDecorators);
       });
     });
+  }, [editor]);
+  React.useEffect(() => {
+    // If the content editable mounts before the subscription is added, then
+    // nothing will be rendered on initial pass. We can get around that by
+    // ensuring that we set the value.
+    setDecorators(editor.getDecorators());
   }, [editor]); // Return decorators defined as React Portals
 
   return React.useMemo(() => {
@@ -100,7 +104,6 @@ function useDecorators(editor) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function useRichTextSetup(editor, initialEditorState) {
   useLayoutEffect(() => {
@@ -115,7 +118,6 @@ function useRichTextSetup(editor, initialEditorState) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function RichTextPlugin({
   contentEditable,
@@ -123,10 +125,10 @@ function RichTextPlugin({
   initialEditorState
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const showPlaceholder = useLexicalCanShowPlaceholder(editor);
+  const showPlaceholder = useCanShowPlaceholder(editor);
   useRichTextSetup(editor, initialEditorState);
   const decorators = useDecorators(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 
-module.exports = RichTextPlugin;
+exports.RichTextPlugin = RichTextPlugin;

package/LexicalRichTextPlugin.js.flow

@@ -11,7 +11,7 @@ import type {EditorState} from 'lexical';
 
 type InitialEditorStateType = null | string | EditorState | (() => void);
 
-declare export default function RichTextPlugin({
+declare export function RichTextPlugin({
   contentEditable: React$Node,
   initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=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;
-function t(a){const [c,e]=h.useState(a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing())));r(()=>a.registerUpdateListener(({editorState:b})=>{const f=a.isComposing();b=b.read(l.$canShowPlaceholderCurry(f));e(b)}),[a]);return c}
-function u(a){const [c,e]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{e(b)})}),[a]);return h.useMemo(()=>{const b=[],f=Object.keys(c);for(let k=0;k<f.length;k++){var g=f[k];const v=c[g];g=a.getElementByKey(g);null!==g&&b.push(m.createPortal(v,g))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerRichText(a,c),n.registerDragonSupport(a)),[a])}
-module.exports=function({contentEditable:a,placeholder:c,initialEditorState:e}){const [b]=d.useLexicalComposerContext(),f=t(b);w(b,e);e=u(b);return h.createElement(h.Fragment,null,a,f&&c,e)};
+'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;
+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}
+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])}
+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)}

package/LexicalTablePlugin.d.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export default function LexicalTablePlugin(): null;
+export function TablePlugin(): null;

package/LexicalTablePlugin.dev.js

@@ -17,7 +17,6 @@ var react = require('react');
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function TablePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -28,11 +27,11 @@ function TablePlugin() {
       }
     }
 
-    return editor.registerCommand(table.INSERT_TABLE_COMMAND, payload => {
-      const {
-        columns,
-        rows
-      } = payload;
+    return editor.registerCommand(table.INSERT_TABLE_COMMAND, ({
+      columns,
+      rows,
+      includeHeaders
+    }) => {
       const selection = lexical.$getSelection();
 
       if (!lexical.$isRangeSelection(selection)) {
@@ -43,7 +42,7 @@ function TablePlugin() {
       const focusNode = focus.getNode();
 
       if (focusNode !== null) {
-        const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns));
+        const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
 
         if (lexical.$isRootNode(focusNode)) {
           const target = focusNode.getChildAtIndex(focus.offset);
@@ -96,4 +95,4 @@ function TablePlugin() {
   return null;
 }
 
-module.exports = TablePlugin;
+exports.TablePlugin = TablePlugin;

package/LexicalTablePlugin.js.flow

@@ -7,4 +7,4 @@
  * @flow strict
  */
 
-declare export default function LexicalTablePlugin(): null;
+declare export function TablePlugin(): null;

package/LexicalTablePlugin.prod.js

@@ -4,7 +4,7 @@
  * 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/react/LexicalComposerContext"),f=require("@lexical/table"),k=require("lexical"),m=require("react");
-module.exports=function(){const [c]=e.useLexicalComposerContext();m.useEffect(()=>{if(!c.hasNodes([f.TableNode,f.TableCellNode,f.TableRowNode]))throw Error("Minified Lexical error #7; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return c.registerCommand(f.INSERT_TABLE_COMMAND,a=>{const {columns:h,rows:g}=a;a=k.$getSelection();if(!k.$isRangeSelection(a))return!0;var d=a.focus;a=d.getNode();if(null!==a){const b=f.$createTableNodeWithDimensions(Number(g),
-Number(h));k.$isRootNode(a)?(d=a.getChildAtIndex(d.offset),null!==d?d.insertBefore(b):a.append(b),b.insertBefore(k.$createParagraphNode())):a.getTopLevelElementOrThrow().insertAfter(b);b.insertAfter(k.$createParagraphNode());b.getFirstChildOrThrow().getFirstChildOrThrow().select()}return!0},k.COMMAND_PRIORITY_EDITOR)},[c]);m.useEffect(()=>{const a=new Map;return c.registerMutationListener(f.TableNode,h=>{for(const [g,d]of h)"created"===d?c.update(()=>{var b=c.getElementByKey(g);const l=k.$getNodeByKey(g);
-b&&l&&(b=f.applyTableHandlers(l,b,c),a.set(g,b))}):"destroyed"===d&&(h=a.get(g))&&(h.removeListeners(),a.delete(g))})},[c]);return null};
+'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/table"),k=require("lexical"),m=require("react");
+exports.TablePlugin=function(){let [c]=e.useLexicalComposerContext();m.useEffect(()=>{if(!c.hasNodes([f.TableNode,f.TableCellNode,f.TableRowNode]))throw Error("Minified Lexical error #10; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return c.registerCommand(f.INSERT_TABLE_COMMAND,({columns:a,rows:d,includeHeaders:g})=>{var b=k.$getSelection();if(!k.$isRangeSelection(b))return!0;let h=b.focus;b=h.getNode();null!==b&&
+(a=f.$createTableNodeWithDimensions(Number(d),Number(a),g),k.$isRootNode(b)?(d=b.getChildAtIndex(h.offset),null!==d?d.insertBefore(a):b.append(a),a.insertBefore(k.$createParagraphNode())):b.getTopLevelElementOrThrow().insertAfter(a),a.insertAfter(k.$createParagraphNode()),a.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},k.COMMAND_PRIORITY_EDITOR)},[c]);m.useEffect(()=>{let a=new Map;return c.registerMutationListener(f.TableNode,d=>{for(let [g,b]of d)"created"===b?c.update(()=>{var h=
+c.getElementByKey(g);let l=k.$getNodeByKey(g);h&&l&&(h=f.applyTableHandlers(l,h,c),a.set(g,h))}):"destroyed"===b&&(d=a.get(g))&&(d.removeListeners(),a.delete(g))})},[c]);return null}

package/LexicalTreeView.d.ts

@@ -7,7 +7,8 @@
  */
 
 import type {LexicalEditor} from 'lexical';
-export default function TreeView(props: {
+
+export function TreeView(props: {
   timeTravelPanelClassName: string;
   timeTravelPanelSliderClassName: string;
   timeTravelPanelButtonClassName: string;

package/LexicalTreeView.dev.js

@@ -16,7 +16,6 @@ var React = require('react');
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
   '\t': '\\t',
@@ -101,10 +100,10 @@ function TreeView({
     const element = treeElementRef.current;
 
     if (element !== null) {
-      // $FlowExpectedError[prop-missing] Internal field
+      // @ts-ignore Internal field
       element.__lexicalEditor = editor;
       return () => {
-        // $FlowExpectedError[prop-missing] Internal field
+        // @ts-ignore Internal field
         element.__lexicalEditor = null;
       };
     }
@@ -309,7 +308,7 @@ function printSelectedCharsLine({
 
   const selectionLastIndent = indent[indent.length - 1] === SYMBOLS.hasNextSibling ? SYMBOLS.ancestorHasNextSibling : SYMBOLS.ancestorIsLastChild;
   const indentionChars = [...indent.slice(0, indent.length - 1), selectionLastIndent];
-  const unselectedChars = Array(start).fill(' ');
+  const unselectedChars = Array(start + 1).fill(' ');
   const selectedChars = Array(end - start).fill(SYMBOLS.selectedChar);
   const paddingLength = typeDisplay.length + 3; // 2 for the spaces around + 1 for the double quote.
 
@@ -347,4 +346,4 @@ function $getSelectionStartEnd(node, selection) {
   return [start + numNonSingleWidthCharBeforeSelection, end + numNonSingleWidthCharBeforeSelection + numNonSingleWidthCharInSelection];
 }
 
-module.exports = TreeView;
+exports.TreeView = TreeView;

package/LexicalTreeView.js.flow

@@ -9,7 +9,7 @@
 
 import type {LexicalEditor} from 'lexical';
 
-declare export default function TreeView(props: {
+declare export function TreeView(props: {
   timeTravelPanelClassName: string,
   timeTravelPanelSliderClassName: string,
   timeTravelPanelButtonClassName: string,

package/LexicalTreeView.prod.js

@@ -4,17 +4,17 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var l=require("@lexical/mark"),p=require("lexical"),r=require("react");const D=Object.freeze({"\t":"\\t","\n":"\\n"}),E=new RegExp(Object.keys(D).join("|"),"g"),F=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function G(a){let b="";const c=H(a),e=a.anchor;a=a.focus;const d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
-function J(a){let b=" root\n";a=a.read(()=>{const c=p.$getSelection();K(p.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected(),v=l.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var u=b,q=m?F.selectedLine:" ",w=d.join(" ");if(p.$isTextNode(e)){var k=e.getTextContent(!0);const t=0===k.length?"(empty)":`"${L(k)}"`;k=[H(e),M(e),N(e)].filter(Boolean).join(", ");k=[t,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else k="";b=u+`${q} ${w} ${f} ${g} ${v} ${k}\n`;
+'use strict';var l=require("@lexical/mark"),p=require("lexical"),r=require("react");let D=Object.freeze({"\t":"\\t","\n":"\\n"}),E=new RegExp(Object.keys(D).join("|"),"g"),F=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function G(a){let b="",c=H(a),e=a.anchor;a=a.focus;let d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
+function J(a){let b=" root\n";a=a.read(()=>{const c=p.$getSelection();K(p.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected(),v=l.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var u=b,q=m?F.selectedLine:" ",w=d.join(" ");if(p.$isTextNode(e)){var k=e.getTextContent(!0);let t=0===k.length?"(empty)":`"${L(k)}"`;k=[H(e),M(e),N(e)].filter(Boolean).join(", ");k=[t,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else k="";b=u+`${q} ${w} ${f} ${g} ${v} ${k}\n`;
 b+=O({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,typeDisplay:g})});return null===c?": null":p.$isRangeSelection(c)?G(c):p.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}
-function K(a,b,c=[]){a=a.getChildren();const e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?F.isLastChild:F.hasNextSibling));p.$isElementNode(d)&&K(d,b,c.concat(f===e-1?F.ancestorIsLastChild:F.ancestorHasNextSibling))})}function L(a){return Object.entries(D).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
-const P=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],Q=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],R=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
+function K(a,b,c=[]){a=a.getChildren();let e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?F.isLastChild:F.hasNextSibling));p.$isElementNode(d)&&K(d,b,c.concat(f===e-1?F.ancestorIsLastChild:F.ancestorHasNextSibling))})}function L(a){return Object.entries(D).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
+let P=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],Q=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],R=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
 function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function H(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function O({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!p.$isTextNode(c)||!p.$isRangeSelection(d)||!b||p.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;const m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){const k=g.getNode(),t=m.getNode();k===t&&c===k&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
-g.offset]:c===k?[d,b]=k.isBefore(t)?[g.offset,u]:[0,g.offset]:c===t?[d,b]=t.isBefore(k)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(E)||[]).length;g=(v.slice(d,b).match(E)||[]).length;const [q,w]=[d+c,b+c+g];if(q===w)return"";c=a[a.length-1]===F.hasNextSibling?F.ancestorHasNextSibling:F.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(q).fill(" ");d=Array(w-q).fill(F.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[F.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
+function O({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!p.$isTextNode(c)||!p.$isRangeSelection(d)||!b||p.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;let m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){let k=g.getNode(),t=m.getNode();k===t&&c===k&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
+g.offset]:c===k?[d,b]=k.isBefore(t)?[g.offset,u]:[0,g.offset]:c===t?[d,b]=t.isBefore(k)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(E)||[]).length;g=(v.slice(d,b).match(E)||[]).length;let [q,w]=[d+c,b+c+g];if(q===w)return"";c=a[a.length-1]===F.hasNextSibling?F.ancestorHasNextSibling:F.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(q+1).fill(" ");d=Array(w-q).fill(F.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[F.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
 "\n"}
-module.exports=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){const [g,m]=r.useState([]),[v,u]=r.useState(""),[q,w]=r.useState(!1),k=r.useRef(0),t=r.useRef(null),B=r.useRef(null),[z,C]=r.useState(!1);r.useEffect(()=>{u(J(f.getEditorState()));return f.registerUpdateListener(({editorState:h})=>{const n=f._compositionKey,x=J(f.getEditorState());u([x,null!==n&&`Composition key: ${n}`].filter(Boolean).join("\n\n"));q||
-m(A=>[...A,[Date.now(),h]])})},[q,f]);const y=g.length;r.useEffect(()=>{if(z){let h;const n=()=>{const x=k.current;x===y-1?C(!1):h=setTimeout(()=>{k.current++;const A=k.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);n()},g[x+1][0]-g[x][0])};n();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);r.useEffect(()=>{const h=t.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return r.createElement("div",{className:e},!q&&2<y&&r.createElement("button",
-{onClick:()=>{const h=f.getRootElement();null!==h&&(h.contentEditable="false",k.current=y-1,w(!0))},className:a},"Time Travel"),r.createElement("pre",{ref:t},v),q&&r.createElement("div",{className:d},r.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),r.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);const n=g[h];n&&(k.current=h,f.setEditorState(n[1]))},type:"range",min:"1",max:y-1}),r.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
-if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);const n=B.current;null!==n&&(n.value=String(h));w(!1);C(!1)}}},"Exit")))};
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){let [g,m]=r.useState([]),[v,u]=r.useState(""),[q,w]=r.useState(!1),k=r.useRef(0),t=r.useRef(null),B=r.useRef(null),[z,C]=r.useState(!1);r.useEffect(()=>{u(J(f.getEditorState()));return f.registerUpdateListener(({editorState:h})=>{let n=f._compositionKey,x=J(f.getEditorState());u([x,null!==n&&`Composition key: ${n}`].filter(Boolean).join("\n\n"));q||
+m(A=>[...A,[Date.now(),h]])})},[q,f]);let y=g.length;r.useEffect(()=>{if(z){let h,n=()=>{const x=k.current;x===y-1?C(!1):h=setTimeout(()=>{k.current++;const A=k.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);n()},g[x+1][0]-g[x][0])};n();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);r.useEffect(()=>{let h=t.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return r.createElement("div",{className:e},!q&&2<y&&r.createElement("button",{onClick:()=>
+{let h=f.getRootElement();null!==h&&(h.contentEditable="false",k.current=y-1,w(!0))},className:a},"Time Travel"),r.createElement("pre",{ref:t},v),q&&r.createElement("div",{className:d},r.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),r.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);let n=g[h];n&&(k.current=h,f.setEditorState(n[1]))},type:"range",min:"1",max:y-1}),r.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
+if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);let n=B.current;null!==n&&(n.value=String(h));w(!1);C(!1)}}},"Exit")))}

package/README.md

@@ -16,11 +16,11 @@ Below is an example of a basic plain text editor using `lexical` and `@lexical/r
 import {$getRoot, $getSelection} from 'lexical';
 import {useEffect} from 'react';
 
-import LexicalComposer from '@lexical/react/LexicalComposer';
-import LexicalPlainTextPlugin from '@lexical/react/LexicalPlainTextPlugin';
-import LexicalContentEditable from '@lexical/react/LexicalContentEditable';
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {LexicalPlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
+import {LexicalContentEditable} from '@lexical/react/LexicalContentEditable';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import LexicalOnChangePlugin from '@lexical/react/LexicalOnChangePlugin';
+import {LexicalOnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 const theme = {
@@ -47,7 +47,9 @@ function onChange(editorState) {
 function MyCustomAutoFocusPlugin() {
   const [editor] = useLexicalComposerContext();
 
-  useEffect(() => {
+  
+
+useEffect(() => {
     // Focus the editor when the effect fires!
     editor.focus();
   }, [editor]);
@@ -68,7 +70,9 @@ function Editor() {
     onError,
   };
 
-  return (
+  
+
+return (
     <LexicalComposer initialConfig={initialConfig}>
       <LexicalPlainTextPlugin
         contentEditable={<LexicalContentEditable />}

package/package.json

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

package/useLexicalIsTextContentEmpty.d.ts

@@ -7,7 +7,8 @@
  */
 
 import type {LexicalEditor} from 'lexical';
-export default function useLexicalIsTextContentEmpty(
+
+export function useLexicalIsTextContentEmpty(
   editor: LexicalEditor,
   trim?: boolean,
 ): boolean;

package/useLexicalIsTextContentEmpty.dev.js

@@ -15,7 +15,6 @@ var react = require('react');
  * 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';
 
@@ -25,18 +24,16 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * 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) Facebook, Inc. and its affiliates.
+ * 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 useLexicalIsTextContentEmpty(editor, trim) {
   const [isEmpty, setIsEmpty] = react.useState(editor.getEditorState().read(text.$isRootTextContentEmptyCurry(editor.isComposing(), trim)));
@@ -52,4 +49,4 @@ function useLexicalIsTextContentEmpty(editor, trim) {
   return isEmpty;
 }
 
-module.exports = useLexicalIsTextContentEmpty;
+exports.useLexicalIsTextContentEmpty = useLexicalIsTextContentEmpty;

package/useLexicalIsTextContentEmpty.js.flow

@@ -9,7 +9,7 @@
 
 import type {LexicalEditor} from 'lexical';
 
-declare export default function useLexicalIsTextContentEmpty(
+declare export function useLexicalIsTextContentEmpty(
   editor: LexicalEditor,
   trim?: boolean,
 ): boolean;

package/useLexicalIsTextContentEmpty.prod.js

@@ -4,4 +4,4 @@
  * 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/text"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;module.exports=function(a,c){const [g,h]=e.useState(a.getEditorState().read(b.$isRootTextContentEmptyCurry(a.isComposing(),c)));f(()=>a.registerUpdateListener(({editorState:d})=>{const k=a.isComposing();d=d.read(b.$isRootTextContentEmptyCurry(k,c));h(d)}),[a,c]);return g};
+'use strict';var b=require("@lexical/text"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;exports.useLexicalIsTextContentEmpty=function(a,c){let [g,h]=e.useState(a.getEditorState().read(b.$isRootTextContentEmptyCurry(a.isComposing(),c)));f(()=>a.registerUpdateListener(({editorState:d})=>{let k=a.isComposing();d=d.read(b.$isRootTextContentEmptyCurry(k,c));h(d)}),[a,c]);return g}

package/useLexicalNodeSelection.d.ts

@@ -7,6 +7,7 @@
  */
 
 import type {NodeKey} from 'lexical';
-export default function useLexicalNodeSelection(
+
+export function useLexicalNodeSelection(
   key: NodeKey,
 ): [boolean, (arg0: boolean) => void, () => void];

package/useLexicalNodeSelection.dev.js

@@ -16,7 +16,6 @@ var react = require('react');
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 
 function isNodeSelected(editor, key) {
@@ -67,4 +66,4 @@ function useLexicalNodeSelection(key) {
   return [isSelected, setSelected, clearSelected];
 }
 
-module.exports = useLexicalNodeSelection;
+exports.useLexicalNodeSelection = useLexicalNodeSelection;

package/useLexicalNodeSelection.js.flow

@@ -9,6 +9,6 @@
 
 import type {NodeKey} from 'lexical';
 
-declare export default function useLexicalNodeSelection(
+declare export function useLexicalNodeSelection(
   key: NodeKey,
 ): [boolean, (boolean) => void, () => void];

package/useLexicalNodeSelection.prod.js

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var c=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),h=require("react");function k(b,a){return b.getEditorState().read(()=>{const f=e.$getNodeByKey(a);return null===f?!1:f.isSelected()})}
-module.exports=function(b){const [a]=c.useLexicalComposerContext(),[f,l]=h.useState(()=>k(a,b));h.useEffect(()=>a.registerUpdateListener(()=>{l(k(a,b))}),[a,b]);const m=h.useCallback(g=>{a.update(()=>{let d=e.$getSelection();e.$isNodeSelection(d)||(d=e.$createNodeSelection(),e.$setSelection(d));g?d.add(b):d.delete(b)})},[a,b]),n=h.useCallback(()=>{a.update(()=>{const g=e.$getSelection();e.$isNodeSelection(g)&&g.clear()})},[a]);return[f,m,n]};
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),h=require("react");function k(b,a){return b.getEditorState().read(()=>{let f=e.$getNodeByKey(a);return null===f?!1:f.isSelected()})}
+exports.useLexicalNodeSelection=function(b){let [a]=c.useLexicalComposerContext(),[f,l]=h.useState(()=>k(a,b));h.useEffect(()=>a.registerUpdateListener(()=>{l(k(a,b))}),[a,b]);let m=h.useCallback(g=>{a.update(()=>{let d=e.$getSelection();e.$isNodeSelection(d)||(d=e.$createNodeSelection(),e.$setSelection(d));g?d.add(b):d.delete(b)})},[a,b]),n=h.useCallback(()=>{a.update(()=>{const g=e.$getSelection();e.$isNodeSelection(g)&&g.clear()})},[a]);return[f,m,n]}

package/useLexicalTextEntity.d.ts

@@ -8,11 +8,12 @@
 
 import {Class} from 'utility-types';
 import type {TextNode} from 'lexical';
+
 export type EntityMatch = {
   end: number;
   start: number;
 };
-export default function useLexicalTextEntity<N extends TextNode>(
+export function useLexicalTextEntity<N extends TextNode>(
   getMatch: (text: string) => null | EntityMatch,
   targetNode: Class<N>,
   createNode: (textNode: TextNode) => N,