a11y: Exit the lexical Editor and button a11y on tab index (#8139)

* a11y: Exit the lexical Editor and button a11y on tab index

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>

* chore: Updated lexical to v0.9.0

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>

* chore: Added ErrorBoundary for Lexical RichTextPlugin

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>

* chore: yarn install changes

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>

* fix: merge conflicts

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Update yarn.lock

---------

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>
Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>

Author: 4 people

packages/features/eventtypes/components/CreateEventTypeDialog.tsx

@@ -290,11 +290,11 @@ export default function CreateEventTypeDialog({
               </div>
             )}
           </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
+          <div className="mt-8 flex justify-end gap-x-2">
+            <DialogClose />
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
-            <DialogClose />
           </div>
         </Form>
       </DialogContent>

packages/features/package.json

@@ -10,10 +10,10 @@
     "@calcom/lib": "*",
     "@calcom/trpc": "*",
     "@calcom/ui": "*",
-    "@lexical/react": "^0.5.0",
+    "@lexical/react": "^0.9.0",
     "dompurify": "^2.4.1",
     "framer-motion": "^10.12.8",
-    "lexical": "^0.5.0",
+    "lexical": "^0.9.0",
     "react-select": "^5.7.0",
     "react-sticky-box": "^2.0.4",
     "zustand": "^4.3.2"

packages/ui/components/editor/Editor.tsx

@@ -4,6 +4,7 @@ import { ListItemNode, ListNode } from "@lexical/list";
 import { TRANSFORMERS } from "@lexical/markdown";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
@@ -84,6 +85,7 @@ export const Editor = (props: TextEditorProps) => {
             <RichTextPlugin
               contentEditable={<ContentEditable style={{ height: props.height }} className="editor-input" />}
               placeholder={<div className="text-muted -mt-11 p-3 text-sm">{props.placeholder || ""}</div>}
+              ErrorBoundary={LexicalErrorBoundary}
             />
             <ListPlugin />
             <LinkPlugin />