@lexical/react 0.1.8 → 0.1.11

package/LexicalOnChangePlugin.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.
  */
-'use strict';var c=require("@lexical/react/LexicalComposerContext"),d=require("react"),e="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;module.exports=function({onChange:a}){const [b]=c.useLexicalComposerContext();e(()=>{if(a)return b.addListener("update",({editorState:f})=>{a(f,b)})},[b,a]);return null};
+var c=require("@lexical/react/LexicalComposerContext"),d=require("react"),e="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;module.exports=function({onChange:a}){const [b]=c.useLexicalComposerContext();e(()=>{if(a)return b.addListener("update",({editorState:f})=>{a(f,b)})},[b,a]);return null};

package/LexicalPlainTextPlugin.dev.js

@@ -174,7 +174,7 @@ function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity)
 }
 function $isParentElementRTL(selection) {
   const anchorNode = selection.anchor.getNode();
-  const parent = anchorNode.getParentOrThrow();
+  const parent = lexical.$isRootNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
   return parent.getDirection() === 'rtl';
 }
 function $moveCharacter(selection, isHoldingShift, isBackward) {
@@ -182,31 +182,6 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
   $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
 }
 
-/**
- * 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 getPossibleDecoratorNode(focus, isBackward) {
-  const focusOffset = focus.offset;
-
-  if (focus.type === 'element') {
-    const block = focus.getNode();
-    return block.getChildAtIndex(isBackward ? focusOffset - 1 : focusOffset);
-  } else {
-    const focusNode = focus.getNode();
-
-    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
-      return isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
-    }
-  }
-
-  return null;
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -223,17 +198,16 @@ function $insertDataTransferForPlainText(dataTransfer, selection) {
   }
 }
 function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleDecoratorNode = getPossibleDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleDecoratorNode);
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
 }
 function onPasteForPlainText(event, editor) {
   event.preventDefault();
   editor.update(() => {
-    lexical.$log('onPasteForPlainText');
     const selection = lexical.$getSelection();
     const clipboardData = event.clipboardData;
 
-    if (clipboardData != null && selection !== null) {
+    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
       $insertDataTransferForPlainText(clipboardData, selection);
     }
   });
@@ -241,10 +215,9 @@ function onPasteForPlainText(event, editor) {
 function onCutForPlainText(event, editor) {
   onCopyForPlainText(event, editor);
   editor.update(() => {
-    lexical.$log('onCutForPlainText');
     const selection = lexical.$getSelection();
 
-    if (selection !== null) {
+    if (lexical.$isRangeSelection(selection)) {
       selection.removeText();
     }
   });
@@ -252,7 +225,6 @@ function onCutForPlainText(event, editor) {
 function onCopyForPlainText(event, editor) {
   event.preventDefault();
   editor.update(() => {
-    lexical.$log('onCopyForPlainText');
     const clipboardData = event.clipboardData;
     const selection = lexical.$getSelection();
 
@@ -279,6 +251,62 @@ function onCopyForPlainText(event, editor) {
   });
 }
 
+/**
+ * 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.
+ *
+ * 
+ */
+// Convoluted logic to make this work with Flow. Order matters.
+const options = {
+  tag: 'history-merge'
+};
+const setEditorOptions = options;
+const updateOptions = options;
+function initializeEditor(editor, initialEditorState) {
+  if (initialEditorState === null) {
+    return;
+  } else if (initialEditorState === undefined) {
+    editor.update(() => {
+      const root = lexical.$getRoot();
+      const firstChild = root.getFirstChild();
+
+      if (firstChild === null) {
+        const paragraph = lexical.$createParagraphNode();
+        root.append(paragraph);
+        const activeElement = document.activeElement;
+
+        if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
+      }
+    }, updateOptions);
+  } else if (initialEditorState !== null) {
+    switch (typeof initialEditorState) {
+      case 'string':
+        {
+          const parsedEditorState = editor.parseEditorState(initialEditorState);
+          editor.setEditorState(parsedEditorState, setEditorOptions);
+          break;
+        }
+
+      case 'object':
+        {
+          editor.setEditorState(initialEditorState, setEditorOptions);
+          break;
+        }
+
+      case 'function':
+        {
+          editor.update(initialEditorState, updateOptions);
+          break;
+        }
+    }
+  }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -316,10 +344,9 @@ function useLexicalDragonSupport(editor) {
             if (args) {
               const [elementStart, elementLength, text, selStart, selLength, formatCommand] = args; // TODO: we should probably handle formatCommand somehow?
               editor.update(() => {
-                lexical.$log('useLexicalDragonSupport');
                 const selection = lexical.$getSelection();
 
-                if (selection !== null) {
+                if (lexical.$isRangeSelection(selection)) {
                   const anchor = selection.anchor;
                   let anchorNode = anchor.getNode();
                   let setSelStart = 0;
@@ -376,13 +403,12 @@ function useLexicalDragonSupport(editor) {
  *
  * 
  */
-const EditorPriority = 0;
-function usePlainTextSetup(editor) {
-  useLayoutEffect(() => {
+function usePlainTextSetup(editor, initialEditorState) {
+  React.useEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
-      if (selection === null) {
+      if (!lexical.$isRangeSelection(selection)) {
         return false;
       }
 
@@ -536,9 +562,10 @@ function usePlainTextSetup(editor) {
       }
 
       return false;
-    }, EditorPriority);
-    editor.execCommand('bootstrapEditor');
-    return removeListener;
+    }, 0);
+    initializeEditor(editor, initialEditorState);
+    return removeListener; // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   useLexicalDragonSupport(editor);
 }
@@ -553,11 +580,12 @@ function usePlainTextSetup(editor) {
  */
 function PlainTextPlugin({
   contentEditable,
-  placeholder
+  placeholder,
+  initialEditorState
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useLexicalCanShowPlaceholder(editor);
-  usePlainTextSetup(editor);
+  usePlainTextSetup(editor, initialEditorState);
   const decorators = useDecorators(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }

package/LexicalPlainTextPlugin.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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 {EditorState} from 'lexical';
+
+type InitialEditorStateType = null | string | EditorState | (() => void);
+
+declare export default function PlainTextPlugin({
+  contentEditable: React$Node,
+  initialEditorState?: InitialEditorStateType,
+  placeholder: React$Node,
+}): React$Node;

package/LexicalPlainTextPlugin.prod.js

@@ -4,14 +4,15 @@
  * 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 g=require("@lexical/react/LexicalComposerContext"),h=require("react"),t=require("lexical"),u=require("react-dom");function v(a,e=!0){if(a)return!1;a=t.$getRoot().getTextContent();e&&(a=a.trim());return""===a}
-function w(a){if(!v(a,!1))return!1;a=t.$getRoot().getChildren();const e=a.length;if(1<e)return!1;for(let b=0;b<e;b++){var c=a[b];if(t.$isElementNode(c)){if("paragraph"!==c.__type||0!==c.__indent)return!1;c=c.getChildren();const d=c.length;for(let f=0;f<d;f++)if(!t.$isTextNode(c[b]))return!1}}return!0}function x(a){return()=>w(a)}var y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
-function A(a){const [e,c]=h.useState(a.getEditorState().read(x(a.isComposing())));y(()=>a.addListener("update",({editorState:b})=>{const d=a.isComposing();b=b.read(x(d));c(b)}),[a]);return e}function B(a){const [e,c]=h.useState(()=>a.getDecorators());y(()=>a.addListener("decorator",b=>{u.flushSync(()=>{c(b)})}),[a]);return h.useMemo(()=>{const b=[],d=Object.keys(e);for(let p=0;p<d.length;p++){var f=d[p];const r=e[f];f=a.getElementByKey(f);null!==f&&b.push(u.createPortal(r,f))}return b},[e,a])}
-function C(a,e){a=a.getData("text/plain");null!=a&&e.insertRawText(a)}function D(a,e){var c=a.focus;a=c.offset;"element"===c.type?e=c.getNode().getChildAtIndex(e?a-1:a):(c=c.getNode(),e=e&&0===a||!e&&a===c.getTextContentSize()?e?c.getPreviousSibling():c.getNextSibling():null);return t.$isDecoratorNode(e)}function E(a,e){a.preventDefault();e.update(()=>{t.$log("onPasteForPlainText");const c=t.$getSelection(),b=a.clipboardData;null!=b&&null!==c&&C(b,c)})}
-function F(a,e){G(a,e);e.update(()=>{t.$log("onCutForPlainText");const c=t.$getSelection();null!==c&&c.removeText()})}function G(a,e){a.preventDefault();e.update(()=>{t.$log("onCopyForPlainText");const c=a.clipboardData,b=t.$getSelection();if(null!==b&&null!=c){var d=window.getSelection();if(!d.isCollapsed){var f=d.getRangeAt(0);f&&(d=document.createElement("div"),f=f.cloneContents(),d.appendChild(f),c.setData("text/html",d.innerHTML));c.setData("text/plain",b.getTextContent())}}})}
-function H(a){h.useEffect(()=>{const e=c=>{var b=a.getRootElement();if(document.activeElement===b&&(b=c.data,"string"===typeof b)){try{var d=JSON.parse(b)}catch(f){return}if(d&&"nuanria_messaging"===d.protocol&&"request"===d.type&&(d=d.payload)&&"makeChanges"===d.functionId&&(d=d.args)){const [f,p,r,z,I]=d;a.update(()=>{t.$log("useLexicalDragonSupport");const q=t.$getSelection();if(null!==q){var n=q.anchor;let k=n.getNode(),l=0,m=0;t.$isTextNode(k)&&0<=f&&0<=p&&(l=f,m=f+p,q.setTextNodeRange(k,l,k,
-m));if(l!==m||""!==r)q.insertRawText(r),k=n.getNode();t.$isTextNode(k)&&(l=z,m=z+I,n=k.getTextContentSize(),l=l>n?n:l,m=m>n?n:m,q.setTextNodeRange(k,l,k,m));c.stopImmediatePropagation()}})}}};window.addEventListener("message",e,!0);return()=>{window.removeEventListener("message",e,!0)}},[a])}
-function J(a){y(()=>{const e=a.addListener("command",(c,b)=>{const d=t.$getSelection();if(null===d)return!1;switch(c){case "deleteCharacter":return d.deleteCharacter(b),!0;case "deleteWord":return d.deleteWord(b),!0;case "deleteLine":return d.deleteLine(b),!0;case "insertText":return"string"===typeof b?d.insertText(b):(c=b.dataTransfer,null!=c?C(c,d):(b=b.data)&&d.insertText(b)),!0;case "removeText":return d.removeText(),!0;case "insertLineBreak":return d.insertLineBreak(b),!0;case "insertParagraph":return d.insertLineBreak(),
-!0;case "indentContent":case "outdentContent":case "insertHorizontalRule":case "insertImage":case "insertTable":case "formatElement":case "formatText":return!0;case "keyArrowLeft":c=b.shiftKey;if(D(d,!0))return b.preventDefault(),b=c,c="rtl"===d.anchor.getNode().getParentOrThrow().getDirection(),d.modify(b?"extend":"move",!c,"character"),!0;break;case "keyArrowRight":c=b.shiftKey;if(D(d,!1))return b.preventDefault(),b=c,c="rtl"===d.anchor.getNode().getParentOrThrow().getDirection(),d.modify(b?"extend":
-"move",c,"character"),!0;break;case "keyBackspace":return b.preventDefault(),a.execCommand("deleteCharacter",!0);case "keyDelete":return b.preventDefault(),a.execCommand("deleteCharacter",!1);case "keyEnter":return b.preventDefault(),a.execCommand("insertLineBreak");case "copy":return G(b,a),!0;case "cut":return F(b,a),!0;case "paste":return E(b,a),!0;case "drop":case "dragstart":return b.preventDefault(),!0}return!1},0);a.execCommand("bootstrapEditor");return e},[a]);H(a)}
-module.exports=function({contentEditable:a,placeholder:e}){var [c]=g.useLexicalComposerContext();const b=A(c);J(c);c=B(c);return h.createElement(h.Fragment,null,a,b&&e,c)};
+var g=require("@lexical/react/LexicalComposerContext"),h=require("react"),t=require("lexical"),u=require("react-dom");function v(a,d=!0){if(a)return!1;a=t.$getRoot().getTextContent();d&&(a=a.trim());return""===a}
+function w(a){if(!v(a,!1))return!1;a=t.$getRoot().getChildren();const d=a.length;if(1<d)return!1;for(let c=0;c<d;c++){var e=a[c];if(t.$isElementNode(e)){if("paragraph"!==e.__type||0!==e.__indent)return!1;e=e.getChildren();const b=e.length;for(let f=0;f<b;f++)if(!t.$isTextNode(e[c]))return!1}}return!0}function x(a){return()=>w(a)}var y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
+function z(a){const [d,e]=h.useState(a.getEditorState().read(x(a.isComposing())));y(()=>a.addListener("update",({editorState:c})=>{const b=a.isComposing();c=c.read(x(b));e(c)}),[a]);return d}function A(a){const [d,e]=h.useState(()=>a.getDecorators());y(()=>a.addListener("decorator",c=>{u.flushSync(()=>{e(c)})}),[a]);return h.useMemo(()=>{const c=[],b=Object.keys(d);for(let p=0;p<b.length;p++){var f=b[p];const r=d[f];f=a.getElementByKey(f);null!==f&&c.push(u.createPortal(r,f))}return c},[d,a])}
+function C(a){a=a.anchor.getNode();return"rtl"===(t.$isRootNode(a)?a:a.getParentOrThrow()).getDirection()}function D(a,d){a=a.getData("text/plain");null!=a&&d.insertRawText(a)}function E(a,d){a=t.$getDecoratorNode(a.focus,d);return t.$isDecoratorNode(a)&&!a.isIsolated()}function F(a,d){a.preventDefault();d.update(()=>{const e=t.$getSelection(),c=a.clipboardData;null!=c&&t.$isRangeSelection(e)&&D(c,e)})}
+function G(a,d){H(a,d);d.update(()=>{const e=t.$getSelection();t.$isRangeSelection(e)&&e.removeText()})}function H(a,d){a.preventDefault();d.update(()=>{const e=a.clipboardData,c=t.$getSelection();if(null!==c&&null!=e){var b=window.getSelection();if(!b.isCollapsed){var f=b.getRangeAt(0);f&&(b=document.createElement("div"),f=f.cloneContents(),b.appendChild(f),e.setData("text/html",b.innerHTML));e.setData("text/plain",c.getTextContent())}}})}const I={tag:"history-merge"};
+function J(a,d){if(null!==d)if(void 0===d)a.update(()=>{var e=t.$getRoot();if(null===e.getFirstChild()){const c=t.$createParagraphNode();e.append(c);e=document.activeElement;(null!==t.$getSelection()||null!==e&&e===a.getRootElement())&&c.select()}},I);else if(null!==d)switch(typeof d){case "string":d=a.parseEditorState(d);a.setEditorState(d,I);break;case "object":a.setEditorState(d,I);break;case "function":a.update(d,I)}}
+function K(a){h.useEffect(()=>{const d=e=>{var c=a.getRootElement();if(document.activeElement===c&&(c=e.data,"string"===typeof c)){try{var b=JSON.parse(c)}catch(f){return}if(b&&"nuanria_messaging"===b.protocol&&"request"===b.type&&(b=b.payload)&&"makeChanges"===b.functionId&&(b=b.args)){const [f,p,r,B,L]=b;a.update(()=>{const q=t.$getSelection();if(t.$isRangeSelection(q)){var n=q.anchor;let k=n.getNode(),l=0,m=0;t.$isTextNode(k)&&0<=f&&0<=p&&(l=f,m=f+p,q.setTextNodeRange(k,l,k,m));if(l!==m||""!==
+r)q.insertRawText(r),k=n.getNode();t.$isTextNode(k)&&(l=B,m=B+L,n=k.getTextContentSize(),l=l>n?n:l,m=m>n?n:m,q.setTextNodeRange(k,l,k,m));e.stopImmediatePropagation()}})}}};window.addEventListener("message",d,!0);return()=>{window.removeEventListener("message",d,!0)}},[a])}
+function M(a,d){h.useEffect(()=>{const e=a.addListener("command",(c,b)=>{const f=t.$getSelection();if(!t.$isRangeSelection(f))return!1;switch(c){case "deleteCharacter":return f.deleteCharacter(b),!0;case "deleteWord":return f.deleteWord(b),!0;case "deleteLine":return f.deleteLine(b),!0;case "insertText":return"string"===typeof b?f.insertText(b):(c=b.dataTransfer,null!=c?D(c,f):(b=b.data)&&f.insertText(b)),!0;case "removeText":return f.removeText(),!0;case "insertLineBreak":return f.insertLineBreak(b),
+!0;case "insertParagraph":return f.insertLineBreak(),!0;case "indentContent":case "outdentContent":case "insertHorizontalRule":case "insertImage":case "insertTable":case "formatElement":case "formatText":return!0;case "keyArrowLeft":c=b.shiftKey;if(E(f,!0))return b.preventDefault(),b=c,c=C(f),f.modify(b?"extend":"move",!c,"character"),!0;break;case "keyArrowRight":c=b.shiftKey;if(E(f,!1))return b.preventDefault(),b=c,c=C(f),f.modify(b?"extend":"move",c,"character"),!0;break;case "keyBackspace":return b.preventDefault(),
+a.execCommand("deleteCharacter",!0);case "keyDelete":return b.preventDefault(),a.execCommand("deleteCharacter",!1);case "keyEnter":return b.preventDefault(),a.execCommand("insertLineBreak");case "copy":return H(b,a),!0;case "cut":return G(b,a),!0;case "paste":return F(b,a),!0;case "drop":case "dragstart":return b.preventDefault(),!0}return!1},0);J(a,d);return e},[a]);K(a)}
+module.exports=function({contentEditable:a,placeholder:d,initialEditorState:e}){const [c]=g.useLexicalComposerContext(),b=z(c);M(c,e);e=A(c);return h.createElement(h.Fragment,null,a,b&&d,e)};