From 018c1933b075236c3520727d3e12ebb8465d5129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?=
 <43938777+GermanJablo@users.noreply.github.com>
Date: Thu, 2 Jan 2025 14:16:18 -0300
Subject: [PATCH] fix(richtext-lexical): allow any priority of FOCUS_COMMAND
 (#10128)

This revert patch behavior on indent in Firefox, in order to fix #10049
---
 .../src/features/indent/client/index.tsx      |  4 +-
 .../features/indent/client/plugins/index.tsx  | 61 -------------------
 .../src/lexical/LexicalEditor.tsx             |  2 +-
 .../collections/Lexical/e2e/main/e2e.spec.ts  |  7 +--
 4 files changed, 5 insertions(+), 69 deletions(-)
 delete mode 100644 packages/richtext-lexical/src/features/indent/client/plugins/index.tsx

diff --git a/packages/richtext-lexical/src/features/indent/client/index.tsx b/packages/richtext-lexical/src/features/indent/client/index.tsx
index 94cdb8d4800..f008315c9d9 100644
--- a/packages/richtext-lexical/src/features/indent/client/index.tsx
+++ b/packages/richtext-lexical/src/features/indent/client/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
 import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
 
 import type { ToolbarGroup } from '../../toolbars/types.js'
@@ -7,7 +8,6 @@ import type { ToolbarGroup } from '../../toolbars/types.js'
 import { IndentDecreaseIcon } from '../../../lexical/ui/icons/IndentDecrease/index.js'
 import { IndentIncreaseIcon } from '../../../lexical/ui/icons/IndentIncrease/index.js'
 import { createClientFeature } from '../../../utilities/createClientFeature.js'
-import { IndentPlugin } from './plugins/index.js'
 import { toolbarIndentGroupWithItems } from './toolbarIndentGroup.js'
 
 const toolbarGroups: ToolbarGroup[] = [
@@ -58,7 +58,7 @@ const toolbarGroups: ToolbarGroup[] = [
 export const IndentFeatureClient = createClientFeature({
   plugins: [
     {
-      Component: IndentPlugin,
+      Component: TabIndentationPlugin,
       position: 'normal',
     },
   ],
diff --git a/packages/richtext-lexical/src/features/indent/client/plugins/index.tsx b/packages/richtext-lexical/src/features/indent/client/plugins/index.tsx
deleted file mode 100644
index a64884ceea5..00000000000
--- a/packages/richtext-lexical/src/features/indent/client/plugins/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
-import { mergeRegister } from '@lexical/utils'
-import { COMMAND_PRIORITY_NORMAL, FOCUS_COMMAND, KEY_ESCAPE_COMMAND } from 'lexical'
-import { useEffect, useState } from 'react'
-
-import type { PluginComponent } from '../../../typesClient.js'
-
-export const IndentPlugin: PluginComponent<undefined> = () => {
-  const [editor] = useLexicalComposerContext()
-
-  const [firefoxFlag, setFirefoxFlag] = useState<boolean>(false)
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand<MouseEvent>(
-        FOCUS_COMMAND,
-        () => {
-          setFirefoxFlag(false)
-          return true
-        },
-        COMMAND_PRIORITY_NORMAL,
-      ),
-      editor.registerCommand(
-        KEY_ESCAPE_COMMAND,
-        () => {
-          setFirefoxFlag(true)
-          editor.getRootElement()?.blur()
-          return true
-        },
-        COMMAND_PRIORITY_NORMAL,
-      ),
-    )
-  }, [editor, setFirefoxFlag])
-
-  useEffect(() => {
-    if (!firefoxFlag) {
-      return
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!['Escape', 'Shift'].includes(e.key)) {
-        setFirefoxFlag(false)
-      }
-      // Pressing Shift+Tab after blurring refocuses the editor in Firefox
-      // we focus parent to allow exiting the editor
-      if (e.shiftKey && e.key === 'Tab') {
-        editor.getRootElement()?.parentElement?.focus()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [editor, firefoxFlag])
-
-  return <TabIndentationPlugin />
-}
diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.tsx b/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
index fedd776a140..25ea3184974 100644
--- a/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
+++ b/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
@@ -114,7 +114,7 @@ export const LexicalEditor: React.FC<
         <RichTextPlugin
           contentEditable={
             <div className="editor-scroller">
-              <div className="editor" ref={onRef} tabIndex={-1}>
+              <div className="editor" ref={onRef}>
                 <LexicalContentEditable editorConfig={editorConfig} />
               </div>
             </div>
diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
index 482df08f328..adb351f1120 100644
--- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
+++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
@@ -784,11 +784,8 @@ describe('lexicalMain', () => {
     })
   })
 
-  /**
-   * When the escape key is pressed, Firefox resets the active element to the beginning of the page instead of staying with the editor.
-   * By applying a keydown listener when the escape key is pressed, we can programatically focus the previous element if shift+tab is pressed.
-   */
-  test('ensure escape key can be used to move focus away from editor', async () => {
+  // NOTE: It's not worth it right now. Maybe later. See https://github.com/payloadcms/payload/issues/10049
+  test.skip('ensure escape key can be used to move focus away from editor', async () => {
     await navigateToLexicalFields()
 
     const richTextField = page.locator('.rich-text-lexical').first()