@lexical/react 0.1.11 → 0.1.12

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,6 +182,10 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
   const isRTL = $isParentElementRTL(selection);
   $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
 }
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -190,17 +195,6 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
  *
  * 
  */
-function $insertDataTransferForPlainText(dataTransfer, selection) {
-  const text = dataTransfer.getData('text/plain');
-
-  if (text != null) {
-    selection.insertRawText(text);
-  }
-}
-function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
-}
 function onPasteForPlainText(event, editor) {
   event.preventDefault();
   editor.update(() => {
@@ -208,7 +202,7 @@ function onPasteForPlainText(event, editor) {
     const clipboardData = event.clipboardData;
 
     if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      $insertDataTransferForPlainText(clipboardData, selection);
+      clipboard.$insertDataTransferForPlainText(clipboardData, selection);
     }
   });
 }
@@ -230,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 range = domSelection.getRangeAt(0);
+        const htmlString = clipboard.getHtmlContent(editor);
 
-        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());
@@ -404,7 +389,7 @@ function useLexicalDragonSupport(editor) {
  * 
  */
 function usePlainTextSetup(editor, initialEditorState) {
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
@@ -444,7 +429,7 @@ function usePlainTextSetup(editor, initialEditorState) {
               const dataTransfer = eventOrText.dataTransfer;
 
               if (dataTransfer != null) {
-                $insertDataTransferForPlainText(dataTransfer, selection);
+                clipboard.$insertDataTransferForPlainText(dataTransfer, selection);
               } else {
                 const data = eventOrText.data;
 

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,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"};
+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){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(),
+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=z(c);M(c,e);e=A(c);return h.createElement(h.Fragment,null,a,b&&d,e)};
+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;

package/LexicalRichTextPlugin.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.
@@ -169,188 +170,6 @@ function useDecorators(editor) {
  * 
  */
 
-function $cloneWithProperties(node) {
-  const latest = node.getLatest();
-  const constructor = latest.constructor;
-  const clone = constructor.clone(latest);
-  clone.__parent = latest.__parent;
-
-  if (lexical.$isElementNode(latest) && lexical.$isElementNode(clone)) {
-    clone.__children = Array.from(latest.__children);
-    clone.__format = latest.__format;
-    clone.__indent = latest.__indent;
-    clone.__dir = latest.__dir;
-  } else if (lexical.$isTextNode(latest) && lexical.$isTextNode(clone)) {
-    clone.__format = latest.__format;
-    clone.__style = latest.__style;
-    clone.__mode = latest.__mode;
-    clone.__detail = latest.__detail;
-  } else if (lexical.$isDecoratorNode(latest) && lexical.$isDecoratorNode(clone)) {
-    clone.__state = latest.__state;
-  } // $FlowFixMe
-
-
-  return clone;
-}
-
-function $getIndexFromPossibleClone(node, parent, nodeMap) {
-  const parentClone = nodeMap.get(parent.getKey());
-
-  if (lexical.$isElementNode(parentClone)) {
-    return parentClone.__children.indexOf(node.getKey());
-  }
-
-  return node.getIndexWithinParent();
-}
-
-function $getParentAvoidingExcludedElements(node) {
-  let parent = node.getParent();
-
-  while (parent !== null && parent.excludeFromCopy()) {
-    parent = parent.getParent();
-  }
-
-  return parent;
-}
-
-function $copyLeafNodeBranchToRoot(leaf, startingOffset, isLeftSide, range, nodeMap) {
-  let node = leaf;
-  let offset = startingOffset;
-
-  while (node !== null) {
-    const parent = $getParentAvoidingExcludedElements(node);
-
-    if (parent === null) {
-      break;
-    }
-
-    if (!lexical.$isElementNode(node) || !node.excludeFromCopy()) {
-      const key = node.getKey();
-      let clone = nodeMap.get(key);
-      const needsClone = clone === undefined;
-
-      if (needsClone) {
-        clone = $cloneWithProperties(node);
-        nodeMap.set(key, clone);
-      }
-
-      if (lexical.$isTextNode(clone) && !clone.isSegmented() && !clone.isToken()) {
-        clone.__text = clone.__text.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : offset);
-      } else if (lexical.$isElementNode(clone)) {
-        clone.__children = clone.__children.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : offset + 1);
-      }
-
-      if (lexical.$isRootNode(parent)) {
-        if (needsClone) {
-          // We only want to collect a range of top level nodes.
-          // So if the parent is the root, we know this is a top level.
-          range.push(key);
-        }
-
-        break;
-      }
-    }
-
-    offset = $getIndexFromPossibleClone(node, parent, nodeMap);
-    node = parent;
-  }
-}
-
-function $cloneContents(selection) {
-  if (!lexical.$isRangeSelection(selection)) {
-    {
-      throw Error(`TODO`);
-    }
-  }
-
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const anchorOffset = anchor.getCharacterOffset();
-  const focusOffset = focus.getCharacterOffset();
-  const anchorNode = anchor.getNode();
-  const focusNode = focus.getNode();
-  const anchorNodeParent = anchorNode.getParentOrThrow(); // Handle a single text node extraction
-
-  if (anchorNode === focusNode && lexical.$isTextNode(anchorNode) && (anchorNodeParent.canBeEmpty() || anchorNodeParent.getChildrenSize() > 1)) {
-    const clonedFirstNode = $cloneWithProperties(anchorNode);
-    const isBefore = focusOffset > anchorOffset;
-    const startOffset = isBefore ? anchorOffset : focusOffset;
-    const endOffset = isBefore ? focusOffset : anchorOffset;
-    clonedFirstNode.__text = clonedFirstNode.__text.slice(startOffset, endOffset);
-    const key = clonedFirstNode.getKey();
-    return {
-      nodeMap: [[key, clonedFirstNode]],
-      range: [key]
-    };
-  }
-
-  const nodes = selection.getNodes();
-
-  if (nodes.length === 0) {
-    return {
-      nodeMap: [],
-      range: []
-    };
-  } // Check if we can use the parent of the nodes, if the
-  // parent can't be empty, then it's important that we
-  // also copy that element node along with its children.
-
-
-  let nodesLength = nodes.length;
-  const firstNode = nodes[0];
-  const firstNodeParent = firstNode.getParent();
-
-  if (firstNodeParent !== null && (!firstNodeParent.canBeEmpty() || lexical.$isRootNode(firstNodeParent))) {
-    const parentChildren = firstNodeParent.__children;
-    const parentChildrenLength = parentChildren.length;
-
-    if (parentChildrenLength === nodesLength) {
-      let areTheSame = true;
-
-      for (let i = 0; i < parentChildren.length; i++) {
-        if (parentChildren[i] !== nodes[i].__key) {
-          areTheSame = false;
-          break;
-        }
-      }
-
-      if (areTheSame) {
-        nodesLength++;
-        nodes.push(firstNodeParent);
-      }
-    }
-  }
-
-  const lastNode = nodes[nodesLength - 1];
-  const isBefore = anchor.isBefore(focus);
-  const nodeMap = new Map();
-  const range = []; // Do first node to root
-
-  $copyLeafNodeBranchToRoot(firstNode, isBefore ? anchorOffset : focusOffset, true, range, nodeMap); // Copy all nodes between
-
-  for (let i = 0; i < nodesLength; i++) {
-    const node = nodes[i];
-    const key = node.getKey();
-
-    if (!nodeMap.has(key) && (!lexical.$isElementNode(node) || !node.excludeFromCopy())) {
-      const clone = $cloneWithProperties(node);
-
-      if (lexical.$isRootNode(node.getParent())) {
-        range.push(node.getKey());
-      }
-
-      nodeMap.set(key, clone);
-    }
-  } // Do last node to root
-
-
-  $copyLeafNodeBranchToRoot(lastNode, isBefore ? focusOffset : anchorOffset, false, range, nodeMap);
-  return {
-    nodeMap: Array.from(nodeMap.entries()),
-    range
-  };
-}
-
 function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity) {
   selection.modify(isHoldingShift ? 'extend' : 'move', isBackward, granularity);
 }
@@ -363,6 +182,10 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
   const isRTL = $isParentElementRTL(selection);
   $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
 }
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -372,197 +195,6 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
  *
  * 
  */
-
-function $generateNodes(nodeRange) {
-  const {
-    range,
-    nodeMap
-  } = nodeRange;
-  const parsedNodeMap = new Map(nodeMap);
-  const nodes = [];
-
-  for (let i = 0; i < range.length; i++) {
-    const key = range[i];
-    const parsedNode = parsedNodeMap.get(key);
-
-    if (parsedNode !== undefined) {
-      const node = lexical.$createNodeFromParse(parsedNode, parsedNodeMap);
-      nodes.push(node);
-    }
-  }
-
-  return nodes;
-}
-
-function getConversionFunction(domNode, editor) {
-  const {
-    nodeName
-  } = domNode;
-
-  const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase());
-
-  let currentConversion = null;
-
-  if (cachedConversions !== undefined) {
-    cachedConversions.forEach(cachedConversion => {
-      const domConversion = cachedConversion(domNode);
-
-      if (domConversion !== null) {
-        if (currentConversion === null || currentConversion.priority < domConversion.priority) {
-          currentConversion = domConversion;
-        }
-      }
-    });
-  }
-
-  return currentConversion !== null ? currentConversion.conversion : null;
-}
-
-function $createNodesFromDOM(node, editor, forChildMap = new Map()) {
-  let lexicalNodes = [];
-  let currentLexicalNode = null;
-  const transformFunction = getConversionFunction(node, editor);
-  const transformOutput = transformFunction ? transformFunction(node) : null;
-  let postTransform = null;
-
-  if (transformOutput !== null) {
-    postTransform = transformOutput.after;
-    currentLexicalNode = transformOutput.node;
-
-    if (currentLexicalNode !== null) {
-      lexicalNodes.push(currentLexicalNode);
-      const forChildFunctions = Array.from(forChildMap.values());
-
-      for (let i = 0; i < forChildFunctions.length; i++) {
-        forChildFunctions[i](currentLexicalNode);
-      }
-    }
-
-    if (transformOutput.forChild != null) {
-      forChildMap.set(node.nodeName, transformOutput.forChild);
-    }
-  } // If the DOM node doesn't have a transformer, we don't know what
-  // to do with it but we still need to process any childNodes.
-
-
-  const children = node.childNodes;
-  let childLexicalNodes = [];
-
-  for (let i = 0; i < children.length; i++) {
-    childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, forChildMap));
-  }
-
-  if (postTransform != null) {
-    childLexicalNodes = postTransform(childLexicalNodes);
-  }
-
-  if (currentLexicalNode == null) {
-    // If it hasn't been converted to a LexicalNode, we hoist its children
-    // up to the same level as it.
-    lexicalNodes = lexicalNodes.concat(childLexicalNodes);
-  } else {
-    if (lexical.$isElementNode(currentLexicalNode)) {
-      // If the current node is a ElementNode after conversion,
-      // we can append all the children to it.
-      currentLexicalNode.append(...childLexicalNodes);
-    }
-  }
-
-  return lexicalNodes;
-}
-
-function $generateNodesFromDOM(dom, editor) {
-  let lexicalNodes = [];
-  const elements = dom.body ? Array.from(dom.body.childNodes) : [];
-  const elementsLength = elements.length;
-
-  for (let i = 0; i < elementsLength; i++) {
-    const lexicalNode = $createNodesFromDOM(elements[i], editor);
-
-    if (lexicalNode !== null) {
-      lexicalNodes = lexicalNodes.concat(lexicalNode);
-    }
-  }
-
-  return lexicalNodes;
-}
-
-function $insertDataTransferForRichText(dataTransfer, selection, editor) {
-  const lexicalNodesString = dataTransfer.getData('application/x-lexical-editor');
-
-  if (lexicalNodesString) {
-    const namespace = editor._config.namespace;
-
-    try {
-      const lexicalClipboardData = JSON.parse(lexicalNodesString);
-
-      if (lexicalClipboardData.namespace === namespace) {
-        const nodeRange = lexicalClipboardData.state;
-        const nodes = $generateNodes(nodeRange);
-        selection.insertNodes(nodes);
-        return;
-      }
-    } catch (e) {// Malformed, missing nodes..
-    }
-  }
-
-  const textHtmlMimeType = 'text/html';
-  const htmlString = dataTransfer.getData(textHtmlMimeType);
-
-  if (htmlString) {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString, textHtmlMimeType);
-    const nodes = $generateNodesFromDOM(dom, editor); // Wrap text and inline nodes in paragraph nodes so we have all blocks at the top-level
-
-    const topLevelBlocks = [];
-    let currentBlock = null;
-
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-
-      if (!lexical.$isElementNode(node) || node.isInline()) {
-        if (currentBlock === null) {
-          currentBlock = lexical.$createParagraphNode();
-          topLevelBlocks.push(currentBlock);
-        }
-
-        if (currentBlock !== null) {
-          currentBlock.append(node);
-        }
-      } else {
-        topLevelBlocks.push(node);
-        currentBlock = null;
-      }
-    }
-
-    selection.insertNodes(topLevelBlocks);
-    return;
-  }
-
-  $insertDataTransferForPlainText(dataTransfer, selection);
-}
-function $insertDataTransferForPlainText(dataTransfer, selection) {
-  const text = dataTransfer.getData('text/plain');
-
-  if (text != null) {
-    selection.insertRawText(text);
-  }
-}
-function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
-}
-function onPasteForRichText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-    const clipboardData = event.clipboardData;
-
-    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      $insertDataTransferForRichText(clipboardData, selection, editor);
-    }
-  });
-}
 function onCutForRichText(event, editor) {
   onCopyForRichText(event, editor);
   editor.update(() => {
@@ -581,31 +213,33 @@ function onCopyForRichText(event, editor) {
 
     if (selection !== null) {
       if (clipboardData != null) {
-        const domSelection = window.getSelection(); // If we haven't selected a range, then don't copy anything
+        const htmlString = clipboard.getHtmlContent(editor);
+        const lexicalString = clipboard.$getLexicalContent(editor);
 
-        if (domSelection.isCollapsed) {
-          return;
+        if (htmlString !== null) {
+          clipboardData.setData('text/html', htmlString);
         }
 
-        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 (lexicalString !== null) {
+          clipboardData.setData('application/x-lexical-editor', lexicalString);
         }
 
         clipboardData.setData('text/plain', selection.getTextContent());
-        const namespace = editor._config.namespace;
-        clipboardData.setData('application/x-lexical-editor', JSON.stringify({
-          namespace,
-          state: $cloneContents(selection)
-        }));
       }
     }
   });
 }
+function onPasteForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    const selection = lexical.$getSelection();
+    const clipboardData = event.clipboardData;
+
+    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
+      clipboard.$insertDataTransferForRichText(clipboardData, selection, editor);
+    }
+  });
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -760,7 +394,7 @@ function useLexicalDragonSupport(editor) {
  * 
  */
 function useRichTextSetup(editor, initialEditorState) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
@@ -805,7 +439,7 @@ function useRichTextSetup(editor, initialEditorState) {
               const dataTransfer = eventOrText.dataTransfer;
 
               if (dataTransfer != null) {
-                $insertDataTransferForRichText(dataTransfer, selection, editor);
+                clipboard.$insertDataTransferForRichText(dataTransfer, selection, editor);
               } else {
                 const data = eventOrText.data;