@payloadcms/richtext-lexical 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/features/debug/testRecorder/client/plugin/index.js

@@ -126,39 +126,23 @@ function getPathFromNodeToEditor(node, rootElement) {
 }
 const keyPresses = new Set(['Enter', 'Backspace', 'Delete', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
 function useTestRecorder(editor) {
-  const $ = _c(55);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = [];
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const [steps, setSteps] = useState(t0);
+  const [steps, setSteps] = useState([]);
   const [isRecording, setIsRecording] = useState(false);
-  const [, setCurrentInnerHTML] = useState("");
-  const [templatedTest, setTemplatedTest] = useState("");
+  const [, setCurrentInnerHTML] = useState('');
+  const [templatedTest, setTemplatedTest] = useState('');
   const previousSelectionRef = useRef(null);
   const skipNextSelectionChangeRef = useRef(false);
   const preRef = useRef(null);
-  let t1;
-  if ($[1] !== editor) {
-    t1 = () => editor;
-    $[1] = editor;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const getCurrentEditor = t1;
-  let t2;
-  if ($[3] !== editor || $[4] !== steps) {
-    t2 = () => {
-      const rootElement = editor.getRootElement();
-      const browserSelection = window.getSelection();
-      if (rootElement == null || browserSelection == null || browserSelection.anchorNode == null || browserSelection.focusNode == null || !rootElement.contains(browserSelection.anchorNode) || !rootElement.contains(browserSelection.focusNode)) {
-        return null;
-      }
-      return `
+  const getCurrentEditor = useCallback(() => {
+    return editor;
+  }, [editor]);
+  const generateTestContent = useCallback(() => {
+    const rootElement = editor.getRootElement();
+    const browserSelection = window.getSelection();
+    if (rootElement == null || browserSelection == null || browserSelection.anchorNode == null || browserSelection.focusNode == null || !rootElement.contains(browserSelection.anchorNode) || !rootElement.contains(browserSelection.focusNode)) {
+      return null;
+    }
+    return `
 import {
   initializeE2E,
   assertHTMLSnapshot,
@@ -179,126 +163,82 @@ ${steps.map(formatStep).join(`\n`)}
     });
 });
     `;
-    };
-    $[3] = editor;
-    $[4] = steps;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const generateTestContent = t2;
-  let t3;
-  if ($[6] !== steps) {
-    t3 = (name, value) => {
-      setSteps(currentSteps => {
-        const currentIndex = steps.length - 1;
-        const lastStep = steps[currentIndex];
-        if (lastStep) {
-          if (lastStep.name === name) {
-            if (name === "type") {
+  }, [editor, steps]);
+  // just a wrapper around inserting new actions so that we can
+  // coalesce some actions like insertText/moveNativeSelection
+  const pushStep = useCallback((name, value) => {
+    setSteps(currentSteps => {
+      // trying to group steps
+      const currentIndex = steps.length - 1;
+      const lastStep = steps[currentIndex];
+      if (lastStep) {
+        if (lastStep.name === name) {
+          if (name === 'type') {
+            // for typing events we just append the text
+            return [...steps.slice(0, currentIndex), {
+              ...lastStep,
+              value: lastStep.value + value
+            }];
+          } else {
+            // for other events we bump the counter if their values are the same
+            if (lastStep.value === value) {
               return [...steps.slice(0, currentIndex), {
                 ...lastStep,
-                value: lastStep.value + value
+                count: lastStep.count + 1
               }];
-            } else {
-              if (lastStep.value === value) {
-                return [...steps.slice(0, currentIndex), {
-                  ...lastStep,
-                  count: lastStep.count + 1
-                }];
-              }
             }
           }
         }
-        return [...currentSteps, {
-          name,
-          count: 1,
-          value
-        }];
-      });
+      }
+      // could not group, just append a new one
+      return [...currentSteps, {
+        name,
+        count: 1,
+        value
+      }];
+    });
+  }, [steps, setSteps]);
+  useLayoutEffect(() => {
+    const onKeyDown = event => {
+      if (!isRecording) {
+        return;
+      }
+      const key = event.key;
+      if (isSelectAll(event)) {
+        pushStep('selectAll', '');
+      } else if (keyPresses.has(key)) {
+        pushStep('press', event.key);
+      } else if ([...key].length > 1) {
+        pushStep('keydown', event.key);
+      } else {
+        pushStep('type', event.key);
+      }
     };
-    $[6] = steps;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const pushStep = t3;
-  let t4;
-  let t5;
-  if ($[8] !== isRecording || $[9] !== pushStep || $[10] !== editor) {
-    t4 = () => {
-      const onKeyDown = event => {
-        if (!isRecording) {
-          return;
-        }
-        const key = event.key;
-        if (isSelectAll(event)) {
-          pushStep("selectAll", "");
-        } else {
-          if (keyPresses.has(key)) {
-            pushStep("press", event.key);
-          } else {
-            if ([...key].length > 1) {
-              pushStep("keydown", event.key);
-            } else {
-              pushStep("type", event.key);
-            }
-          }
-        }
-      };
-      const onKeyUp = event_0 => {
-        if (!isRecording) {
-          return;
-        }
-        const key_0 = event_0.key;
-        if (!keyPresses.has(key_0) && [...key_0].length > 1) {
-          pushStep("keyup", event_0.key);
-        }
-      };
-      return editor.registerRootListener((rootElement_0, prevRootElement) => {
-        if (prevRootElement !== null) {
-          prevRootElement.removeEventListener("keydown", onKeyDown);
-          prevRootElement.removeEventListener("keyup", onKeyUp);
-        }
-        if (rootElement_0 !== null) {
-          rootElement_0.addEventListener("keydown", onKeyDown);
-          rootElement_0.addEventListener("keyup", onKeyUp);
-        }
-      });
+    const onKeyUp = event_0 => {
+      if (!isRecording) {
+        return;
+      }
+      const key_0 = event_0.key;
+      if (!keyPresses.has(key_0) && [...key_0].length > 1) {
+        pushStep('keyup', event_0.key);
+      }
     };
-    t5 = [editor, isRecording, pushStep];
-    $[8] = isRecording;
-    $[9] = pushStep;
-    $[10] = editor;
-    $[11] = t4;
-    $[12] = t5;
-  } else {
-    t4 = $[11];
-    t5 = $[12];
-  }
-  useLayoutEffect(t4, t5);
-  let t6;
-  if ($[13] !== generateTestContent) {
-    t6 = [generateTestContent];
-    $[13] = generateTestContent;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
-  }
+    return editor.registerRootListener((rootElement_0, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('keydown', onKeyDown);
+        prevRootElement.removeEventListener('keyup', onKeyUp);
+      }
+      if (rootElement_0 !== null) {
+        rootElement_0.addEventListener('keydown', onKeyDown);
+        rootElement_0.addEventListener('keyup', onKeyUp);
+      }
+    });
+  }, [editor, isRecording, pushStep]);
   useLayoutEffect(() => {
     if (preRef.current) {
       preRef.current.scrollTo(0, preRef.current.scrollHeight);
     }
-  }, t6);
-  let t7;
-  if ($[15] !== generateTestContent || $[16] !== steps) {
-    t7 = [generateTestContent, steps];
-    $[15] = generateTestContent;
-    $[16] = steps;
-    $[17] = t7;
-  } else {
-    t7 = $[17];
-  }
+  }, [generateTestContent]);
   useEffect(() => {
     if (steps) {
       const testContent = generateTestContent();
@@ -309,213 +249,117 @@ ${steps.map(formatStep).join(`\n`)}
         preRef.current.scrollTo(0, preRef.current.scrollHeight);
       }
     }
-  }, t7);
-  let t8;
-  if ($[18] !== editor || $[19] !== isRecording || $[20] !== generateTestContent) {
-    t8 = () => {
-      const removeUpdateListener = editor.registerUpdateListener(t9 => {
-        const {
-          dirtyElements,
-          dirtyLeaves,
-          editorState
-        } = t9;
-        if (!isRecording) {
-          return;
-        }
-        const currentSelection = editorState._selection;
-        const previousSelection = previousSelectionRef.current;
-        const skipNextSelectionChange = skipNextSelectionChangeRef.current;
-        if (previousSelection !== currentSelection) {
-          if (dirtyLeaves.size === 0 && dirtyElements.size === 0 && !skipNextSelectionChange) {
-            const browserSelection_0 = window.getSelection();
-            if (browserSelection_0 && (browserSelection_0.anchorNode == null || browserSelection_0.focusNode == null)) {
-              return;
-            }
-          }
-          previousSelectionRef.current = currentSelection;
-        }
-        skipNextSelectionChangeRef.current = false;
-        const testContent_0 = generateTestContent();
-        if (testContent_0 !== null) {
-          setTemplatedTest(testContent_0);
-        }
-      });
-      return removeUpdateListener;
-    };
-    $[18] = editor;
-    $[19] = isRecording;
-    $[20] = generateTestContent;
-    $[21] = t8;
-  } else {
-    t8 = $[21];
-  }
-  let t9;
-  if ($[22] !== editor || $[23] !== generateTestContent || $[24] !== isRecording || $[25] !== pushStep) {
-    t9 = [editor, generateTestContent, isRecording, pushStep];
-    $[22] = editor;
-    $[23] = generateTestContent;
-    $[24] = isRecording;
-    $[25] = pushStep;
-    $[26] = t9;
-  } else {
-    t9 = $[26];
-  }
-  useEffect(t8, t9);
-  let t10;
-  if ($[27] !== isRecording || $[28] !== editor || $[29] !== setCurrentInnerHTML) {
-    t10 = () => {
+  }, [generateTestContent, steps]);
+  useEffect(() => {
+    const removeUpdateListener = editor.registerUpdateListener(({
+      dirtyElements,
+      dirtyLeaves,
+      editorState
+    }) => {
       if (!isRecording) {
         return;
       }
-      const removeUpdateListener_0 = editor.registerUpdateListener(() => {
-        const rootElement_1 = editor.getRootElement();
-        if (rootElement_1 !== null) {
-          setCurrentInnerHTML(rootElement_1?.innerHTML);
+      const currentSelection = editorState._selection;
+      const previousSelection = previousSelectionRef.current;
+      const skipNextSelectionChange = skipNextSelectionChangeRef.current;
+      if (previousSelection !== currentSelection) {
+        if (dirtyLeaves.size === 0 && dirtyElements.size === 0 && !skipNextSelectionChange) {
+          const browserSelection_0 = window.getSelection();
+          if (browserSelection_0 && (browserSelection_0.anchorNode == null || browserSelection_0.focusNode == null)) {
+            return;
+          }
         }
-      });
-      return removeUpdateListener_0;
-    };
-    $[27] = isRecording;
-    $[28] = editor;
-    $[29] = setCurrentInnerHTML;
-    $[30] = t10;
-  } else {
-    t10 = $[30];
-  }
-  let t11;
-  if ($[31] !== editor || $[32] !== isRecording) {
-    t11 = [editor, isRecording];
-    $[31] = editor;
-    $[32] = isRecording;
-    $[33] = t11;
-  } else {
-    t11 = $[33];
-  }
-  useEffect(t10, t11);
-  let t12;
-  if ($[34] !== isRecording) {
-    t12 = currentEditor => {
-      if (!isRecording) {
-        currentEditor.update(() => {
-          const root = $getRoot();
-          root.clear();
-          const text = $createTextNode();
-          root.append($createParagraphNode().append(text));
-          text.select();
-        });
-        setSteps([]);
-      }
-      setIsRecording(currentIsRecording => !currentIsRecording);
-    };
-    $[34] = isRecording;
-    $[35] = t12;
-  } else {
-    t12 = $[35];
-  }
-  const toggleEditorSelection = t12;
-  let t13;
-  if ($[36] !== isRecording || $[37] !== getCurrentEditor || $[38] !== pushStep) {
-    t13 = () => {
-      if (!isRecording) {
-        return;
-      }
-      const browserSelection_1 = window.getSelection();
-      if (browserSelection_1 === null || browserSelection_1.anchorNode == null || browserSelection_1.focusNode == null) {
-        return;
+        previousSelectionRef.current = currentSelection;
       }
-      const {
-        anchorNode,
-        anchorOffset,
-        focusNode,
-        focusOffset
-      } = sanitizeSelection(browserSelection_1);
-      const rootElement_2 = getCurrentEditor().getRootElement();
-      let anchorPath;
-      if (anchorNode !== null) {
-        anchorPath = getPathFromNodeToEditor(anchorNode, rootElement_2);
+      skipNextSelectionChangeRef.current = false;
+      const testContent_0 = generateTestContent();
+      if (testContent_0 !== null) {
+        setTemplatedTest(testContent_0);
       }
-      let focusPath;
-      if (focusNode !== null) {
-        focusPath = getPathFromNodeToEditor(focusNode, rootElement_2);
+    });
+    return removeUpdateListener;
+  }, [editor, generateTestContent, isRecording, pushStep]);
+  // save innerHTML
+  useEffect(() => {
+    if (!isRecording) {
+      return;
+    }
+    const removeUpdateListener_0 = editor.registerUpdateListener(() => {
+      const rootElement_1 = editor.getRootElement();
+      if (rootElement_1 !== null) {
+        setCurrentInnerHTML(rootElement_1?.innerHTML);
       }
-      pushStep("snapshot", {
-        anchorNode,
-        anchorOffset,
-        anchorPath,
-        focusNode,
-        focusOffset,
-        focusPath
+    });
+    return removeUpdateListener_0;
+  }, [editor, isRecording]);
+  // clear editor and start recording
+  const toggleEditorSelection = useCallback(currentEditor => {
+    if (!isRecording) {
+      currentEditor.update(() => {
+        const root = $getRoot();
+        root.clear();
+        const text = $createTextNode();
+        root.append($createParagraphNode().append(text));
+        text.select();
       });
-    };
-    $[36] = isRecording;
-    $[37] = getCurrentEditor;
-    $[38] = pushStep;
-    $[39] = t13;
-  } else {
-    t13 = $[39];
-  }
-  const onSnapshotClick = t13;
-  let t14;
-  if ($[40] !== generateTestContent) {
-    t14 = () => {
-      copy(generateTestContent());
-    };
-    $[40] = generateTestContent;
-    $[41] = t14;
-  } else {
-    t14 = $[41];
-  }
-  const onCopyClick = t14;
-  let t15;
-  if ($[42] !== generateTestContent) {
-    t15 = () => {
-      download("test.js", generateTestContent());
-    };
-    $[42] = generateTestContent;
-    $[43] = t15;
-  } else {
-    t15 = $[43];
-  }
-  const onDownloadClick = t15;
-  const t16 = `editor-dev-button ${isRecording ? "active" : ""}`;
-  let t17;
-  if ($[44] !== toggleEditorSelection || $[45] !== getCurrentEditor) {
-    t17 = e => {
+      setSteps([]);
+    }
+    setIsRecording(currentIsRecording => !currentIsRecording);
+  }, [isRecording]);
+  const onSnapshotClick = useCallback(() => {
+    if (!isRecording) {
+      return;
+    }
+    const browserSelection_1 = window.getSelection();
+    if (browserSelection_1 === null || browserSelection_1.anchorNode == null || browserSelection_1.focusNode == null) {
+      return;
+    }
+    const {
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset
+    } = sanitizeSelection(browserSelection_1);
+    const rootElement_2 = getCurrentEditor().getRootElement();
+    let anchorPath;
+    if (anchorNode !== null) {
+      anchorPath = getPathFromNodeToEditor(anchorNode, rootElement_2);
+    }
+    let focusPath;
+    if (focusNode !== null) {
+      focusPath = getPathFromNodeToEditor(focusNode, rootElement_2);
+    }
+    pushStep('snapshot', {
+      anchorNode,
+      anchorOffset,
+      anchorPath,
+      focusNode,
+      focusOffset,
+      focusPath
+    });
+  }, [pushStep, isRecording, getCurrentEditor]);
+  const onCopyClick = useCallback(() => {
+    copy(generateTestContent());
+  }, [generateTestContent]);
+  const onDownloadClick = useCallback(() => {
+    download('test.js', generateTestContent());
+  }, [generateTestContent]);
+  const button = /*#__PURE__*/_jsx("button", {
+    className: `editor-dev-button ${isRecording ? 'active' : ''}`,
+    id: "test-recorder-button",
+    onClick: e => {
       toggleEditorSelection(getCurrentEditor());
       e.preventDefault();
-    };
-    $[44] = toggleEditorSelection;
-    $[45] = getCurrentEditor;
-    $[46] = t17;
-  } else {
-    t17 = $[46];
-  }
-  const t18 = isRecording ? "Disable test recorder" : "Enable test recorder";
-  const t19 = isRecording ? "Disable test recorder" : "Enable test recorder";
-  let t20;
-  if ($[47] !== t16 || $[48] !== t17 || $[49] !== t18 || $[50] !== t19) {
-    t20 = _jsx("button", {
-      className: t16,
-      id: "test-recorder-button",
-      onClick: t17,
-      title: t18,
-      type: "button",
-      children: t19
-    });
-    $[47] = t16;
-    $[48] = t17;
-    $[49] = t18;
-    $[50] = t19;
-    $[51] = t20;
-  } else {
-    t20 = $[51];
-  }
-  const button = t20;
-  const output = isRecording ? _jsxs("div", {
+    },
+    title: isRecording ? 'Disable test recorder' : 'Enable test recorder',
+    type: "button",
+    children: isRecording ? 'Disable test recorder' : 'Enable test recorder'
+  });
+  const output = isRecording ? /*#__PURE__*/_jsxs("div", {
     className: "test-recorder-output",
-    children: [_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: "test-recorder-toolbar",
-      children: [_jsx("button", {
+      children: [/*#__PURE__*/_jsx("button", {
         className: "test-recorder-button",
         id: "test-recorder-button-snapshot",
         onClick: e_0 => {
@@ -525,7 +369,7 @@ ${steps.map(formatStep).join(`\n`)}
         title: "Insert snapshot",
         type: "button",
         children: "Insert Snapshot"
-      }), _jsx("button", {
+      }), /*#__PURE__*/_jsx("button", {
         className: "test-recorder-button",
         id: "test-recorder-button-copy",
         onClick: e_1 => {
@@ -535,7 +379,7 @@ ${steps.map(formatStep).join(`\n`)}
         title: "Copy to clipboard",
         type: "button",
         children: "Copy"
-      }), _jsx("button", {
+      }), /*#__PURE__*/_jsx("button", {
         className: "test-recorder-button",
         id: "test-recorder-button-download",
         onClick: e_2 => {
@@ -546,22 +390,13 @@ ${steps.map(formatStep).join(`\n`)}
         type: "button",
         children: "Download"
       })]
-    }), _jsx("pre", {
+    }), /*#__PURE__*/_jsx("pre", {
       id: "test-recorder",
       ref: preRef,
       children: templatedTest
     })]
   }) : null;
-  let t21;
-  if ($[52] !== button || $[53] !== output) {
-    t21 = [button, output];
-    $[52] = button;
-    $[53] = output;
-    $[54] = t21;
-  } else {
-    t21 = $[54];
-  }
-  return t21;
+  return [button, output];
 }
 export const TestRecorderPlugin = () => {
   const $ = _c(3);