@lexical/react 0.1.10 → 0.1.13

package/LexicalPlainTextPlugin.dev.js

@@ -10,6 +10,7 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 var lexical = require('lexical');
 var reactDom = require('react-dom');
+var clipboard = require('@lexical/clipboard');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -181,54 +182,9 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
   const isRTL = $isParentElementRTL(selection);
   $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 resolveElement(element, isBackward, focusOffset) {
-  const parent = element.getParent();
-  let offset = focusOffset;
-  let block = element;
-
-  if (parent !== null) {
-    if (isBackward && focusOffset === 0) {
-      offset = block.getIndexWithinParent();
-      block = parent;
-    } else if (!isBackward && focusOffset === block.getChildrenSize()) {
-      offset = block.getIndexWithinParent() + 1;
-      block = parent;
-    }
-  }
-
-  return block.getChildAtIndex(isBackward ? offset - 1 : offset);
-}
-
-function getPossibleDecoratorNode(focus, isBackward) {
-  const focusOffset = focus.offset;
-
-  if (focus.type === 'element') {
-    const block = focus.getNode();
-    return resolveElement(block, isBackward, focusOffset);
-  } else {
-    const focusNode = focus.getNode();
-
-    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
-      const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
-
-      if (possibleNode === null) {
-        return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
-      }
-
-      return possibleNode;
-    }
-  }
-
-  return null;
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
 }
 
 /**
@@ -239,17 +195,6 @@ function getPossibleDecoratorNode(focus, isBackward) {
  *
  * 
  */
-function $insertDataTransferForPlainText(dataTransfer, selection) {
-  const text = dataTransfer.getData('text/plain');
-
-  if (text != null) {
-    selection.insertRawText(text);
-  }
-}
-function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleNode = getPossibleDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
-}
 function onPasteForPlainText(event, editor) {
   event.preventDefault();
   editor.update(() => {
@@ -257,7 +202,7 @@ function onPasteForPlainText(event, editor) {
     const clipboardData = event.clipboardData;
 
     if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      $insertDataTransferForPlainText(clipboardData, selection);
+      clipboard.$insertDataTransferForPlainText(clipboardData, selection);
     }
   });
 }
@@ -279,19 +224,10 @@ function onCopyForPlainText(event, editor) {
 
     if (selection !== null) {
       if (clipboardData != null) {
-        const domSelection = window.getSelection(); // If we haven't selected a range, then don't copy anything
-
-        if (domSelection.isCollapsed) {
-          return;
-        }
+        const htmlString = clipboard.getHtmlContent(editor);
 
-        const range = domSelection.getRangeAt(0);
-
-        if (range) {
-          const container = document.createElement('div');
-          const frag = range.cloneContents();
-          container.appendChild(frag);
-          clipboardData.setData('text/html', container.innerHTML);
+        if (htmlString !== null) {
+          clipboardData.setData('text/html', htmlString);
         }
 
         clipboardData.setData('text/plain', selection.getTextContent());
@@ -300,6 +236,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.
  *
@@ -396,8 +388,8 @@ function useLexicalDragonSupport(editor) {
  *
  * 
  */
-function usePlainTextSetup(editor) {
-  React.useEffect(() => {
+function usePlainTextSetup(editor, initialEditorState) {
+  useLayoutEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
@@ -437,7 +429,7 @@ function usePlainTextSetup(editor) {
               const dataTransfer = eventOrText.dataTransfer;
 
               if (dataTransfer != null) {
-                $insertDataTransferForPlainText(dataTransfer, selection);
+                clipboard.$insertDataTransferForPlainText(dataTransfer, selection);
               } else {
                 const data = eventOrText.data;
 
@@ -556,13 +548,9 @@ function usePlainTextSetup(editor) {
 
       return false;
     }, 0);
-    const bootstrapCommandHandled = editor.execCommand('bootstrapEditor');
-
-    if (!bootstrapCommandHandled) {
-      console.warn('bootstrapEditor command was not handled. Did you forget to add <BootstrapPlugin />?');
-    }
-
-    return removeListener;
+    initializeEditor(editor, initialEditorState);
+    return removeListener; // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   useLexicalDragonSupport(editor);
 }
@@ -577,11 +565,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,15 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-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 c=0;c<e;c++){var b=a[c];if(t.$isElementNode(b)){if("paragraph"!==b.__type||0!==b.__indent)return!1;b=b.getChildren();const d=b.length;for(let f=0;f<d;f++)if(!t.$isTextNode(b[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 [e,b]=h.useState(a.getEditorState().read(x(a.isComposing())));y(()=>a.addListener("update",({editorState:c})=>{const d=a.isComposing();c=c.read(x(d));b(c)}),[a]);return e}function A(a){const [e,b]=h.useState(()=>a.getDecorators());y(()=>a.addListener("decorator",c=>{u.flushSync(()=>{b(c)})}),[a]);return h.useMemo(()=>{const c=[],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&&c.push(u.createPortal(r,f))}return c},[e,a])}
-function C(a){a=a.anchor.getNode();return"rtl"===(t.$isRootNode(a)?a:a.getParentOrThrow()).getDirection()}function D(a,e,b){const c=a.getParent();let d=b;null!==c&&(e&&0===b?(d=a.getIndexWithinParent(),a=c):e||b!==a.getChildrenSize()||(d=a.getIndexWithinParent()+1,a=c));return a.getChildAtIndex(e?d-1:d)}function E(a,e){a=a.getData("text/plain");null!=a&&e.insertRawText(a)}
-function F(a,e){var b=a.focus;a=b.offset;"element"===b.type?(b=b.getNode(),e=D(b,e,a)):(b=b.getNode(),e&&0===a||!e&&a===b.getTextContentSize()?(a=e?b.getPreviousSibling():b.getNextSibling(),e=null===a?D(b.getParentOrThrow(),e,b.getIndexWithinParent()+(e?0:1)):a):e=null);return t.$isDecoratorNode(e)&&!e.isIsolated()}function G(a,e){a.preventDefault();e.update(()=>{const b=t.$getSelection(),c=a.clipboardData;null!=c&&t.$isRangeSelection(b)&&E(c,b)})}
-function H(a,e){I(a,e);e.update(()=>{const b=t.$getSelection();t.$isRangeSelection(b)&&b.removeText()})}function I(a,e){a.preventDefault();e.update(()=>{const b=a.clipboardData,c=t.$getSelection();if(null!==c&&null!=b){var d=window.getSelection();if(!d.isCollapsed){var f=d.getRangeAt(0);f&&(d=document.createElement("div"),f=f.cloneContents(),d.appendChild(f),b.setData("text/html",d.innerHTML));b.setData("text/plain",c.getTextContent())}}})}
-function J(a){h.useEffect(()=>{const e=b=>{var c=a.getRootElement();if(document.activeElement===c&&(c=b.data,"string"===typeof c)){try{var d=JSON.parse(c)}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,B,K]=d;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+K,n=k.getTextContentSize(),l=l>n?n:l,m=m>n?n:m,q.setTextNodeRange(k,l,k,m));b.stopImmediatePropagation()}})}}};window.addEventListener("message",e,!0);return()=>{window.removeEventListener("message",e,!0)}},[a])}
-function L(a){h.useEffect(()=>{const e=a.addListener("command",(b,c)=>{const d=t.$getSelection();if(!t.$isRangeSelection(d))return!1;switch(b){case "deleteCharacter":return d.deleteCharacter(c),!0;case "deleteWord":return d.deleteWord(c),!0;case "deleteLine":return d.deleteLine(c),!0;case "insertText":return"string"===typeof c?d.insertText(c):(b=c.dataTransfer,null!=b?E(b,d):(c=c.data)&&d.insertText(c)),!0;case "removeText":return d.removeText(),!0;case "insertLineBreak":return d.insertLineBreak(c),
-!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":b=c.shiftKey;if(F(d,!0))return c.preventDefault(),c=b,b=C(d),d.modify(c?"extend":"move",!b,"character"),!0;break;case "keyArrowRight":b=c.shiftKey;if(F(d,!1))return c.preventDefault(),c=b,b=C(d),d.modify(c?"extend":"move",b,"character"),!0;break;case "keyBackspace":return c.preventDefault(),
-a.execCommand("deleteCharacter",!0);case "keyDelete":return c.preventDefault(),a.execCommand("deleteCharacter",!1);case "keyEnter":return c.preventDefault(),a.execCommand("insertLineBreak");case "copy":return I(c,a),!0;case "cut":return H(c,a),!0;case "paste":return G(c,a),!0;case "drop":case "dragstart":return c.preventDefault(),!0}return!1},0);a.execCommand("bootstrapEditor");return e},[a]);J(a)}
-module.exports=function({contentEditable:a,placeholder:e}){var [b]=g.useLexicalComposerContext();const c=z(b);L(b);b=A(b);return h.createElement(h.Fragment,null,a,c&&e,b)};
+var g=require("@lexical/react/LexicalComposerContext"),h=require("react"),t=require("lexical"),u=require("react-dom"),v=require("@lexical/clipboard");function w(a,d=!0){if(a)return!1;a=t.$getRoot().getTextContent();d&&(a=a.trim());return""===a}
+function x(a){if(!w(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 y(a){return()=>x(a)}var z="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
+function A(a){const [d,e]=h.useState(a.getEditorState().read(y(a.isComposing())));z(()=>a.addListener("update",({editorState:c})=>{const b=a.isComposing();c=c.read(y(b));e(c)}),[a]);return d}function C(a){const [d,e]=h.useState(()=>a.getDecorators());z(()=>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 D(a){a=a.anchor.getNode();return"rtl"===(t.$isRootNode(a)?a:a.getParentOrThrow()).getDirection()}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)&&v.$insertDataTransferForPlainText(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){const b=v.getHtmlContent(d);null!==b&&e.setData("text/html",b);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){z(()=>{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?v.$insertDataTransferForPlainText(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=D(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=D(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=A(c);M(c,e);e=C(c);return h.createElement(h.Fragment,null,a,b&&d,e)};

package/LexicalRichTextPlugin.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 {EditorState} from 'lexical';
+type InitialEditorStateType = null | string | EditorState | (() => void);
+export default function RichTextPlugin(arg0: {
+  contentEditable: React.ReactNode;
+  initialEditorState?: InitialEditorStateType;
+  placeholder: React.ReactNode;
+}): React.ReactNode;