@lexical/react 0.2.9 → 0.3.0

package/LexicalHorizontalRuleNode.d.ts

@@ -8,6 +8,7 @@
 
 import type {LexicalNode, LexicalCommand} from 'lexical';
 import {DecoratorNode} from 'lexical';
+
 export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element | null> {
   static getType(): string;
   static clone(node: HorizontalRuleNode): HorizontalRuleNode;
@@ -21,5 +22,4 @@ export function $createHorizontalRuleNode(): HorizontalRuleNode;
 export function $isHorizontalRuleNode(
   node: LexicalNode | null | undefined,
 ): node is HorizontalRuleNode;
-
 export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;

package/LexicalHorizontalRuleNode.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 INSERT_HORIZONTAL_RULE_COMMAND = lexical.createCommand();
 
@@ -47,6 +46,17 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
     };
   }
 
+  static importJSON(serializedNode) {
+    return $createHorizontalRuleNode();
+  }
+
+  exportJSON() {
+    return {
+      type: 'horizontalrule',
+      version: 1
+    };
+  }
+
   createDOM() {
     const div = document.createElement('div');
     div.style.display = 'contents';

package/LexicalHorizontalRuleNode.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 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;
+'use strict';var b=require("lexical"),c=require("react");let 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")}}static importJSON(){return h()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let 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/LexicalLinkPlugin.d.ts

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

package/LexicalLinkPlugin.dev.js

@@ -16,110 +16,7 @@ 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 toggleLink(url) {
-  const selection = lexical.$getSelection();
-
-  if (selection !== null) {
-    lexical.$setSelection(selection);
-  }
-
-  const sel = lexical.$getSelection();
-
-  if (sel !== null) {
-    const nodes = sel.extract();
-
-    if (url === null) {
-      // Remove LinkNodes
-      nodes.forEach(node => {
-        const parent = node.getParent();
-
-        if (link.$isLinkNode(parent)) {
-          const children = parent.getChildren();
-
-          for (let i = 0; i < children.length; i++) {
-            parent.insertBefore(children[i]);
-          }
-
-          parent.remove();
-        }
-      });
-    } else {
-      // Add or merge LinkNodes
-      if (nodes.length === 1) {
-        const firstNode = nodes[0]; // if the first node is a LinkNode or if its
-        // parent is a LinkNode, we update the URL.
-
-        if (link.$isLinkNode(firstNode)) {
-          firstNode.setURL(url);
-          return;
-        } else {
-          const parent = firstNode.getParent();
-
-          if (link.$isLinkNode(parent)) {
-            // set parent to be the current linkNode
-            // so that other nodes in the same parent
-            // aren't handled separately below.
-            parent.setURL(url);
-            return;
-          }
-        }
-      }
-
-      let prevParent = null;
-      let linkNode = null;
-      nodes.forEach(node => {
-        const parent = node.getParent();
-
-        if (parent === linkNode || parent === null || lexical.$isElementNode(node) && !node.isInline()) {
-          return;
-        }
-
-        if (link.$isLinkNode(parent)) {
-          linkNode = parent;
-          parent.setURL(url);
-          return;
-        }
-
-        if (!parent.is(prevParent)) {
-          prevParent = parent;
-          linkNode = link.$createLinkNode(url);
-
-          if (link.$isLinkNode(parent)) {
-            if (node.getPreviousSibling() === null) {
-              parent.insertBefore(linkNode);
-            } else {
-              parent.insertAfter(linkNode);
-            }
-          } else {
-            node.insertBefore(linkNode);
-          }
-        }
-
-        if (link.$isLinkNode(node)) {
-          if (linkNode !== null) {
-            const children = node.getChildren();
-
-            for (let i = 0; i < children.length; i++) {
-              linkNode.append(children[i]);
-            }
-          }
-
-          node.remove();
-          return;
-        }
-
-        if (linkNode !== null) {
-          linkNode.append(node);
-        }
-      });
-    }
-  }
-}
-
 function LinkPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
@@ -128,13 +25,12 @@ function LinkPlugin() {
     }
   }, [editor]);
   react.useEffect(() => {
-    return editor.registerCommand(link.TOGGLE_LINK_COMMAND, payload => {
-      const url = payload;
-      toggleLink(url);
+    return editor.registerCommand(link.TOGGLE_LINK_COMMAND, url => {
+      link.toggleLink(url);
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [editor]);
   return null;
 }
 
-module.exports = LinkPlugin;
+exports.LinkPlugin = LinkPlugin;

package/LexicalLinkPlugin.js.flow

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

package/LexicalLinkPlugin.prod.js

@@ -4,7 +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 f=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("lexical"),n=require("react");
-function p(e){var d=m.$getSelection();null!==d&&m.$setSelection(d);d=m.$getSelection();if(null!==d)if(d=d.extract(),null===e)d.forEach(g=>{g=g.getParent();if(f.$isLinkNode(g)){const a=g.getChildren();for(let b=0;b<a.length;b++)g.insertBefore(a[b]);g.remove()}});else{if(1===d.length){var h=d[0];if(f.$isLinkNode(h)){h.setURL(e);return}h=h.getParent();if(f.$isLinkNode(h)){h.setURL(e);return}}let g=null,a=null;d.forEach(b=>{var c=b.getParent();if(c!==a&&null!==c&&(!m.$isElementNode(b)||b.isInline()))if(f.$isLinkNode(c))a=
-c,c.setURL(e);else if(c.is(g)||(g=c,a=f.$createLinkNode(e),f.$isLinkNode(c)?null===b.getPreviousSibling()?c.insertBefore(a):c.insertAfter(a):b.insertBefore(a)),f.$isLinkNode(b)){if(null!==a){c=b.getChildren();for(let l=0;l<c.length;l++)a.append(c[l])}b.remove()}else null!==a&&a.append(b)})}}
-module.exports=function(){const [e]=k.useLexicalComposerContext();n.useEffect(()=>{if(!e.hasNodes([f.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[e]);n.useEffect(()=>e.registerCommand(f.TOGGLE_LINK_COMMAND,d=>{p(d);return!0},m.COMMAND_PRIORITY_EDITOR),[e]);return null};
+'use strict';var b=require("@lexical/link"),c=require("@lexical/react/LexicalComposerContext"),d=require("lexical"),e=require("react");exports.LinkPlugin=function(){let [a]=c.useLexicalComposerContext();e.useEffect(()=>{if(!a.hasNodes([b.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[a]);e.useEffect(()=>a.registerCommand(b.TOGGLE_LINK_COMMAND,f=>{b.toggleLink(f);return!0},d.COMMAND_PRIORITY_EDITOR),[a]);return null}

package/LexicalListPlugin.d.ts

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

package/LexicalListPlugin.dev.js

@@ -6,19 +6,18 @@
  */
 'use strict';
 
-var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var list = require('@lexical/list');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
-var react = require('react');
 
 /**
- * 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 useList(editor) {
   react.useEffect(() => {
@@ -55,12 +54,16 @@ function useList(editor) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 function ListPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    if (!editor.hasNodes([list.ListNode, list.ListItemNode])) {
+      throw new Error('ListPlugin: ListNode and/or ListItemNode not registered on editor');
+    }
+  }, [editor]);
   useList(editor);
   return null;
 }
 
-module.exports = ListPlugin;
+exports.ListPlugin = ListPlugin;

package/LexicalListPlugin.js.flow

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

package/LexicalListPlugin.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 b=require("@lexical/react/LexicalComposerContext"),c=require("@lexical/list"),d=require("@lexical/utils"),e=require("lexical"),f=require("react");
-function g(a){f.useEffect(()=>d.mergeRegister(a.registerCommand(e.INDENT_CONTENT_COMMAND,()=>{c.indentList();return!1},e.COMMAND_PRIORITY_LOW),a.registerCommand(e.OUTDENT_CONTENT_COMMAND,()=>{c.outdentList();return!1},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_ORDERED_LIST_COMMAND,()=>{c.insertList(a,"number");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_UNORDERED_LIST_COMMAND,()=>{c.insertList(a,"bullet");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.REMOVE_LIST_COMMAND,
-()=>{c.removeList(a);return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(e.INSERT_PARAGRAPH_COMMAND,()=>c.$handleListInsertParagraph()?!0:!1,e.COMMAND_PRIORITY_LOW)),[a])}module.exports=function(){const [a]=b.useLexicalComposerContext();g(a);return null};
+'use strict';var b=require("@lexical/list"),c=require("@lexical/react/LexicalComposerContext"),d=require("react"),e=require("@lexical/utils"),f=require("lexical");
+function g(a){d.useEffect(()=>e.mergeRegister(a.registerCommand(f.INDENT_CONTENT_COMMAND,()=>{b.indentList();return!1},f.COMMAND_PRIORITY_LOW),a.registerCommand(f.OUTDENT_CONTENT_COMMAND,()=>{b.outdentList();return!1},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_ORDERED_LIST_COMMAND,()=>{b.insertList(a,"number");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_UNORDERED_LIST_COMMAND,()=>{b.insertList(a,"bullet");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.REMOVE_LIST_COMMAND,
+()=>{b.removeList(a);return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(f.INSERT_PARAGRAPH_COMMAND,()=>b.$handleListInsertParagraph()?!0:!1,f.COMMAND_PRIORITY_LOW)),[a])}exports.ListPlugin=function(){let [a]=c.useLexicalComposerContext();d.useEffect(()=>{if(!a.hasNodes([b.ListNode,b.ListItemNode]))throw Error("ListPlugin: ListNode and/or ListItemNode not registered on editor");},[a]);g(a);return null}

package/LexicalMarkdownShortcutPlugin.d.ts

@@ -8,6 +8,6 @@
 
 import type {Transformer} from '@lexical/markdown';
 
-export default function LexicalMarkdownShortcutPlugin(arg0: {
-  transformers: Array<Transformer>;
+export function MarkdownShortcutPlugin(arg0: {
+  transformers?: Array<Transformer>;
 }): JSX.Element | null;

package/LexicalMarkdownShortcutPlugin.dev.js

@@ -8,8 +8,8 @@
 
 var markdown = require('@lexical/markdown');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var React = require('react');
-var lexical = require('lexical');
+var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
+var react = require('react');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -17,90 +17,14 @@ var lexical = require('lexical');
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
- */
-lexical.createCommand();
-
-function HorizontalRuleComponent() {
-  return /*#__PURE__*/React.createElement("hr", null);
-}
-
-class HorizontalRuleNode extends lexical.DecoratorNode {
-  static getType() {
-    return 'horizontalrule';
-  }
-
-  static clone(node) {
-    return new HorizontalRuleNode(node.__key);
-  }
-
-  static importDOM() {
-    return {
-      hr: node => ({
-        conversion: convertHorizontalRuleElement,
-        priority: 0
-      })
-    };
-  }
-
-  exportDOM() {
-    return {
-      element: document.createElement('hr')
-    };
-  }
-
-  createDOM() {
-    const div = document.createElement('div');
-    div.style.display = 'contents';
-    return div;
-  }
-
-  getTextContent() {
-    return '\n';
-  }
-
-  isTopLevel() {
-    return true;
-  }
-
-  updateDOM() {
-    return false;
-  }
-
-  decorate() {
-    return /*#__PURE__*/React.createElement(HorizontalRuleComponent, null);
-  }
-
-}
-
-function convertHorizontalRuleElement() {
-  return {
-    node: $createHorizontalRuleNode()
-  };
-}
-
-function $createHorizontalRuleNode() {
-  return new HorizontalRuleNode();
-}
-function $isHorizontalRuleNode(node) {
-  return node instanceof HorizontalRuleNode;
-}
-
-/**
- * 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 HR = {
   export: node => {
-    return $isHorizontalRuleNode(node) ? '***' : null;
+    return LexicalHorizontalRuleNode.$isHorizontalRuleNode(node) ? '***' : null;
   },
   regExp: /^(---|\*\*\*|___)\s?$/,
   replace: (parentNode, _1, _2, isImport) => {
-    const line = $createHorizontalRuleNode(); // TODO: Get rid of isImport flag
+    const line = LexicalHorizontalRuleNode.$createHorizontalRuleNode(); // TODO: Get rid of isImport flag
 
     if (isImport || parentNode.getNextSibling() != null) {
       parentNode.replace(line);
@@ -113,14 +37,14 @@ const HR = {
   type: 'element'
 };
 const DEFAULT_TRANSFORMERS = [HR, ...markdown.TRANSFORMERS];
-function LexicalMarkdownShortcutPlugin({
+function MarkdownShortcutPlugin({
   transformers = DEFAULT_TRANSFORMERS
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React.useEffect(() => {
+  react.useEffect(() => {
     return markdown.registerMarkdownShortcuts(editor, transformers);
   }, [editor, transformers]);
   return null;
 }
 
-module.exports = LexicalMarkdownShortcutPlugin;
+exports.MarkdownShortcutPlugin = MarkdownShortcutPlugin;

package/LexicalMarkdownShortcutPlugin.js.flow

@@ -9,6 +9,6 @@
 
 import type {Transformer} from '@lexical/markdown';
 
-declare export default function LexicalMarkdownShortcutPlugin({
-  transformers: Array<Transformer>,
+declare export function MarkdownShortcutPlugin({
+  transformers?: Array<Transformer>,
 }): React$Node;

package/LexicalMarkdownShortcutPlugin.prod.js

@@ -4,6 +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/markdown"),d=require("@lexical/react/LexicalComposerContext"),e=require("react"),f=require("lexical");f.createCommand();function g(){return e.createElement("hr",null)}
-class h extends f.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new h(a.__key)}static importDOM(){return{hr:()=>({conversion:k,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 e.createElement(g,null)}}function k(){return{node:new h}}
-const m=[{export:a=>a instanceof h?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(a,b,n,l)=>{b=new h;l||null!=a.getNextSibling()?a.replace(b):a.insertBefore(b);b.selectNext()},type:"element"},...c.TRANSFORMERS];module.exports=function({transformers:a=m}){const [b]=d.useLexicalComposerContext();e.useEffect(()=>c.registerMarkdownShortcuts(b,a),[b,a]);return null};
+'use strict';var c=require("@lexical/markdown"),d=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/react/LexicalHorizontalRuleNode"),f=require("react");let h=[{export:a=>e.$isHorizontalRuleNode(a)?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(a,b,k,g)=>{b=e.$createHorizontalRuleNode();g||null!=a.getNextSibling()?a.replace(b):a.insertBefore(b);b.selectNext()},type:"element"},...c.TRANSFORMERS];
+exports.MarkdownShortcutPlugin=function({transformers:a=h}){let [b]=d.useLexicalComposerContext();f.useEffect(()=>c.registerMarkdownShortcuts(b,a),[b,a]);return null}

package/LexicalNestedComposer.d.ts

@@ -8,7 +8,7 @@
 
 import type {LexicalEditor, EditorThemeClasses} from 'lexical';
 
-export default function LexicalNestedComposer(arg0: {
+export function LexicalNestedComposer(arg0: {
   initialEditor: LexicalEditor;
   initialTheme?: EditorThemeClasses;
   children: JSX.Element | (JSX.Element | string | null)[] | null;

package/LexicalNestedComposer.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 LexicalNestedComposer({
   initialEditor,
@@ -58,4 +57,4 @@ function LexicalNestedComposer({
   }, !isCollab || isCollabReady ? children : null);
 }
 
-module.exports = LexicalNestedComposer;
+exports.LexicalNestedComposer = LexicalNestedComposer;

package/LexicalNestedComposer.js.flow

@@ -9,7 +9,7 @@
 
 import type {LexicalEditor, EditorThemeClasses, LexicalNode} from 'lexical';
 
-declare export default function LexicalNestedComposer({
+declare export function LexicalNestedComposer({
   children: React$Node,
   initialEditor: LexicalEditor,
   initialTheme?: EditorThemeClasses,

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 c=require("@lexical/react/LexicalCollaborationPlugin"),d=require("@lexical/react/LexicalComposerContext"),h=require("react");
-module.exports=function({initialEditor:a,children:k,initialTheme:l}){const e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #8; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");const 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}=c.useCollaborationContext();
-const q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)};
+'use strict';var c=require("@lexical/react/LexicalCollaborationPlugin"),d=require("@lexical/react/LexicalComposerContext"),h=require("react");
+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}=
+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)}

package/LexicalOnChangePlugin.d.ts

@@ -7,7 +7,8 @@
  */
 
 import type {EditorState, LexicalEditor} from 'lexical';
-export default function OnChangePlugin(arg0: {
+
+export function OnChangePlugin(arg0: {
   ignoreInitialChange?: boolean;
   ignoreSelectionChange?: boolean;
   onChange: (editorState: EditorState, editor: LexicalEditor) => void;

package/LexicalOnChangePlugin.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,7 +24,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;
@@ -36,7 +34,6 @@ 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 OnChangePlugin({
   ignoreInitialChange = true,
@@ -67,4 +64,4 @@ function OnChangePlugin({
   return null;
 }
 
-module.exports = OnChangePlugin;
+exports.OnChangePlugin = OnChangePlugin;

package/LexicalOnChangePlugin.js.flow

@@ -9,7 +9,7 @@
 
 import type {EditorState, LexicalEditor} from 'lexical';
 
-declare export default function OnChangePlugin({
+declare export function OnChangePlugin({
   ignoreInitialChange?: boolean,
   ignoreSelectionChange?: boolean,
   onChange: (editorState: EditorState, editor: LexicalEditor) => void,

package/LexicalOnChangePlugin.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"),f=require("react"),g="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;
-module.exports=function({ignoreInitialChange:d=!0,ignoreSelectionChange:e=!1,onChange:a}){const [b]=c.useLexicalComposerContext();g(()=>{if(a)return b.registerUpdateListener(({editorState:h,dirtyElements:k,dirtyLeaves:l,prevEditorState:m})=>{e&&0===k.size&&0===l.size||d&&m.isEmpty()||a(h,b)})},[b,d,e,a]);return null};
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),f=require("react"),g="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;
+exports.OnChangePlugin=function({ignoreInitialChange:d=!0,ignoreSelectionChange:e=!1,onChange:a}){let [b]=c.useLexicalComposerContext();g(()=>{if(a)return b.registerUpdateListener(({editorState:h,dirtyElements:k,dirtyLeaves:l,prevEditorState:m})=>{e&&0===k.size&&0===l.size||d&&m.isEmpty()||a(h,b)})},[b,d,e,a]);return null}

package/LexicalPlainTextPlugin.d.ts

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

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,