Merge remote-tracking branch 'origin/main' into lexical-eslint-plugin

facebook · May 3, 2024 · f814234 · f814234
2 parents f309cc3 + 0fb96a6
commit f814234
Show file tree

Hide file tree

Showing 59 changed files with 1,755 additions and 589 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,30 @@
+<!-- 
+Title format should be:
+[Affected Packages] PR Type: title
+
+Example:
+[lexical-playground][lexical-link] Feature: Add more emojis 
+
+Choose from the following PR Types:
+Breaking change / Refactor / Feature / Bug Fix / Documentation Update / Chore
+-->
+
+## Description
+<!-- 
+- What is the current behavior that you are modifying? 
+- What are the behavior or changes that are being added by this PR?
+-->
+*Describe the changes in this pull request*
+
+**Closes:** #<!-- issue number -->
+
+## Test plan
+
+### Before
+
+*Insert relevant screenshots/recordings/automated-tests*
+
+
+### After
+
+*Insert relevant screenshots/recordings/automated-tests*
diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -168,13 +168,7 @@ export class CodeNode extends ElementNode {
         const td = node as HTMLTableCellElement;
         const table: HTMLTableElement | null = td.closest('table');
 
-        if (isGitHubCodeCell(td)) {
-          return {
-            conversion: convertTableCellElement,
-            priority: 3,
-          };
-        }
-        if (table && isGitHubCodeTable(table)) {
+        if (isGitHubCodeCell(td) || (table && isGitHubCodeTable(table))) {
           // Return a no-op if it's a table cell in a code table, but not a code line.
           // Otherwise it'll fall back to the T
           return {
@@ -348,13 +342,6 @@ function convertDivElement(domNode: Node): DOMConversionOutput {
     };
   }
   return {
-    after: (childLexicalNodes) => {
-      const domParent = domNode.parentNode;
-      if (domParent != null && domNode !== domParent.lastChild) {
-        childLexicalNodes.push($createLineBreakNode());
-      }
-      return childLexicalNodes;
-    },
     node: isCode ? $createCodeNode() : null,
   };
 }
@@ -367,22 +354,6 @@ function convertCodeNoop(): DOMConversionOutput {
   return {node: null};
 }
 
-function convertTableCellElement(domNode: Node): DOMConversionOutput {
-  // domNode is a <td> since we matched it by nodeName
-  const cell = domNode as HTMLTableCellElement;
-
-  return {
-    after: (childLexicalNodes) => {
-      if (cell.parentNode && cell.parentNode.nextSibling) {
-        // Append newline between code lines
-        childLexicalNodes.push($createLineBreakNode());
-      }
-      return childLexicalNodes;
-    },
-    node: null,
-  };
-}
-
 function isCodeElement(div: HTMLElement): boolean {
   return div.style.fontFamily.match('monospace') !== null;
 }

diff --git a/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.ts b/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.ts
@@ -178,7 +178,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertText('function');
+        $getSelection()!.insertText('function');
       });
       await editor.dispatchCommand(KEY_TAB_COMMAND, tabKeyboardEvent());
       expect(testEnv.innerHTML).toBe(
@@ -187,12 +187,12 @@ describe('LexicalCodeNode tests', () => {
 
       // CodeNode should only render diffs, make sure that the TabNode is not cloned when
       // appending more text
-      let tabKey;
+      let tabKey: string;
       await editor.update(() => {
         tabKey = $dfs()
-          .find(({node}) => $isTabNode(node))
+          .find(({node}) => $isTabNode(node))!
           .node.getKey();
-        $getSelection().insertText('foo');
+        $getSelection()!.insertText('foo');
       });
       expect(
         editor.getEditorState().read(() => {
@@ -214,7 +214,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertText('function');
+        $getSelection()!.insertText('function');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
@@ -238,7 +238,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertText('function');
+        $getSelection()!.insertText('function');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
@@ -253,8 +253,8 @@ describe('LexicalCodeNode tests', () => {
 
       await editor.update(() => {
         const root = $getRoot();
-        const codeTab = root.getFirstDescendant();
-        const codeText = root.getLastDescendant();
+        const codeTab = root.getFirstDescendant()!;
+        const codeText = root.getLastDescendant()!;
         const selection = $createRangeSelection();
         selection.anchor.set(codeTab.getKey(), 0, 'text');
         selection.focus.set(codeText.getKey(), 'function'.length, 'text');
@@ -275,7 +275,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertText('function');
+        $getSelection()!.insertText('function');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
@@ -290,8 +290,8 @@ describe('LexicalCodeNode tests', () => {
 
       await editor.update(() => {
         const root = $getRoot();
-        const codeTab = root.getFirstDescendant();
-        const codeText = root.getLastDescendant();
+        const codeTab = root.getFirstDescendant()!;
+        const codeText = root.getLastDescendant()!;
         const selection = $createRangeSelection();
         selection.anchor.set(codeTab.getKey(), 0, 'text');
         selection.focus.set(codeText.getKey(), 0, 'text');
@@ -313,12 +313,12 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertRawText('hello\tworld\nhello\tworld');
+        $getSelection()!.insertRawText('hello\tworld\nhello\tworld');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
-        const firstCodeText = $getRoot().getFirstDescendant();
-        const lastCodeText = $getRoot().getLastDescendant();
+        const firstCodeText = $getRoot().getFirstDescendant()!;
+        const lastCodeText = $getRoot().getLastDescendant()!;
         const selection = $createRangeSelection();
         selection.anchor.set(firstCodeText.getKey(), 1, 'text');
         selection.focus.set(lastCodeText.getKey(), 1, 'text');
@@ -347,7 +347,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertRawText('hello\n');
+        $getSelection()!.insertRawText('hello\n');
       });
       await editor.dispatchCommand(KEY_TAB_COMMAND, tabKeyboardEvent());
       expect(testEnv.innerHTML)
@@ -365,7 +365,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertRawText('\thello');
+        $getSelection()!.insertRawText('\thello');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
@@ -389,7 +389,7 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertRawText('abc\tdef\nghi\tjkl');
+        $getSelection()!.insertRawText('abc\tdef\nghi\tjkl');
       });
       const keyEvent = new KeyboardEventMock();
       keyEvent.altKey = true;
@@ -409,16 +409,16 @@ describe('LexicalCodeNode tests', () => {
         const code = $createCodeNode();
         root.append(code);
         code.selectStart();
-        $getSelection().insertRawText('abc\tdef\nghi\tjkl\nmno\tpqr');
+        $getSelection()!.insertRawText('abc\tdef\nghi\tjkl\nmno\tpqr');
       });
       // TODO consolidate editor.update - there's some bad logic in updateAndRetainSelection
       await editor.update(() => {
-        const firstCodeText = $getRoot().getFirstDescendant();
+        const firstCodeText = $getRoot().getFirstDescendant()!;
         const secondCodeText = firstCodeText
-          .getNextSibling() // tab
-          .getNextSibling() // def
-          .getNextSibling() // linebreak
-          .getNextSibling(); // ghi;
+          .getNextSibling()! // tab
+          .getNextSibling()! // def
+          .getNextSibling()! // linebreak
+          .getNextSibling()!; // ghi;
         const selection = $createRangeSelection();
         selection.anchor.set(firstCodeText.getKey(), 1, 'text');
         selection.focus.set(secondCodeText.getKey(), 1, 'text');
@@ -455,7 +455,7 @@ describe('LexicalCodeNode tests', () => {
                 const code = $createCodeNode();
                 root.append(code);
                 code.selectStart();
-                const selection = $getSelection();
+                const selection = $getSelection()!;
                 if (tabOrSpaces === 'tab') {
                   selection.insertRawText('\t\tfunction foo\n\t\tfunction bar');
                 } else {
@@ -570,7 +570,7 @@ describe('LexicalCodeNode tests', () => {
               const firstChild = code.getFirstChild();
               invariant($isTextNode(firstChild));
               if (tabOrSpaces === 'tab') {
-                firstChild.getNextSibling().selectNext(0, 0);
+                firstChild.getNextSibling()!.selectNext(0, 0);
               } else {
                 firstChild.select(4, 4);
               }
@@ -605,7 +605,7 @@ describe('LexicalCodeNode tests', () => {
                 $isLineBreakNode(dfsNode.node),
               )[0].node;
               if (tabOrSpaces === 'tab') {
-                const firstTab = linebreak.getNextSibling();
+                const firstTab = linebreak.getNextSibling()!;
                 firstTab.selectNext();
               } else {
                 linebreak.selectNext(4, 4);
@@ -687,7 +687,7 @@ describe('LexicalCodeNode tests', () => {
                 $isLineBreakNode(dfsNode.node),
               )[0].node;
               if (tabOrSpaces === 'tab') {
-                const firstTab = linebreak.getNextSibling();
+                const firstTab = linebreak.getNextSibling()!;
                 firstTab.selectNext(0, 0);
               } else {
                 linebreak.selectNext(2, 2);

diff --git a/packages/lexical-devtools-core/flow/LexicalDevtoolsCore.js.flow b/packages/lexical-devtools-core/flow/LexicalDevtoolsCore.js.flow
@@ -6,3 +6,7 @@
  *
  * @flow strict
  */
+
+/**
+ * LexicalDevtoolsCore
+ */
diff --git a/packages/lexical-devtools-core/src/generateContent.ts b/packages/lexical-devtools-core/src/generateContent.ts
@@ -88,6 +88,7 @@ export function generateContent(
   editor: LexicalEditor,
   commandsLog: ReadonlyArray<LexicalCommand<unknown> & {payload: unknown}>,
   exportDOM: boolean,
+  obfuscateText: boolean = false,
 ): string {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
@@ -118,7 +119,10 @@ export function generateContent(
 
       res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(
         ' ',
-      )} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(node)}\n`;
+      )} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(
+        node,
+        obfuscateText,
+      )}\n`;
 
       res += printSelectedCharsLine({
         indent,
@@ -230,26 +234,32 @@ function visitTree(
   });
 }
 
-function normalize(text: string) {
-  return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce(
+function normalize(text: string, obfuscateText: boolean = false) {
+  const textToPrint = Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce(
     (acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)),
     text,
   );
+  if (obfuscateText) {
+    return textToPrint.replace(/[^\s]/g, '*');
+  }
+  return textToPrint;
 }
 
 // TODO Pass via props to allow customizability
-function printNode(node: LexicalNode) {
+function printNode(node: LexicalNode, obfuscateText: boolean = false) {
   if ($isTextNode(node)) {
     const text = node.getTextContent();
-    const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
+    const title =
+      text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
     const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null]
       .filter(Boolean)
       .join(' ')
       .trim();
   } else if ($isLinkNode(node)) {
     const link = node.getURL();
-    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    const title =
+      link.length === 0 ? '(empty)' : `"${normalize(link, obfuscateText)}"`;
     const properties = printAllLinkNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null]
       .filter(Boolean)

diff --git a/packages/lexical-headless/src/__tests__/unit/LexicalHeadlessEditor.test.ts b/packages/lexical-headless/src/__tests__/unit/LexicalHeadlessEditor.test.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import type {RangeSelection} from 'lexical';
+import type {EditorState, LexicalEditor, RangeSelection} from 'lexical';
 
 import {$generateHtmlFromNodes} from '@lexical/html';
 import {JSDOM} from 'jsdom';
@@ -33,14 +33,17 @@ import {
 import {createHeadlessEditor} from '../..';
 
 describe('LexicalHeadlessEditor', () => {
-  let editor;
+  let editor: LexicalEditor;
 
-  async function update(updateFn) {
+  async function update(updateFn: () => void) {
     editor.update(updateFn);
     await Promise.resolve();
   }
 
-  function assertEditorState(editorState, nodes) {
+  function assertEditorState(
+    editorState: EditorState,
+    nodes: Record<string, unknown>[],
+  ) {
     const nodesFromState = Array.from(editorState._nodeMap.values());
     expect(nodesFromState).toEqual(
       nodes.map((node) => expect.objectContaining(node)),

diff --git a/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx b/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx
@@ -34,12 +34,12 @@ import {
 } from 'lexical/src';
 import {createTestEditor, TestComposer} from 'lexical/src/__tests__/utils';
 import React from 'react';
-import {createRoot} from 'react-dom/client';
+import {createRoot, Root} from 'react-dom/client';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
 describe('LexicalHistory tests', () => {
   let container: HTMLDivElement | null = null;
-  let reactRoot;
+  let reactRoot: Root;
 
   beforeEach(() => {
     container = document.createElement('div');
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,3 +6,7 @@ @@
      *
      * @flow strict
      */
+    /**
+     * LexicalDevtoolsCore
+     */