From 8fd997ba1920499a3b63693e1ecb724533606d57 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 24 Oct 2023 20:22:22 +0530
Subject: [PATCH] chore: link editor on mobile [skip e2e]

---
 .../Components/SuperEditor/BlocksEditor.tsx           |  6 +++++-
 .../Plugins/ToolbarPlugin/FloatingLinkEditor.tsx      | 11 ++++++++---
 .../Plugins/ToolbarPlugin/ToolbarPlugin.tsx           |  5 ++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
index 34d52f7cd..a03b3f7fe 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
@@ -27,6 +27,7 @@ import { MarkdownTransformers } from './MarkdownTransformers'
 import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin'
 import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin'
 import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 type BlocksEditorProps = {
   onChange?: (value: string, preview: string) => void
@@ -72,9 +73,11 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
     }
   }
 
+  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
   return (
     <>
-      <ToolbarPlugin />
+      {!isMobile && <ToolbarPlugin />}
       <RichTextPlugin
         contentEditable={
           <div id="blocks-editor" className="editor-scroller h-full min-h-0">
@@ -92,6 +95,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
         placeholder={null}
         ErrorBoundary={LexicalErrorBoundary}
       />
+      {isMobile && <ToolbarPlugin />}
       <ListPlugin />
       <MarkdownShortcutPlugin transformers={MarkdownTransformers} />
       <TablePlugin hasCellMerge />
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx
index c1161ecbd..566de3cbb 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx
@@ -143,11 +143,16 @@ const FloatingLinkEditor = ({
   return (
     <Portal>
       <div
-        ref={linkEditorRef}
-        className="absolute left-0 top-0 z-modal rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:opacity-0"
+        id="super-link-editor"
+        className="absolute bottom-12 left-1/2 z-modal w-[calc(100%_-_1rem)] -translate-x-1/2 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:bottom-0 md:left-0 md:w-auto md:translate-x-0 md:opacity-0"
       >
         {isEditMode ? (
-          <div className="flex flex-col gap-2 py-1">
+          <div
+            className="flex flex-col gap-2 py-1"
+            onBlur={() => {
+              setEditMode(false)
+            }}
+          >
             {isLinkText && (
               <div className="flex items-center gap-1.5">
                 <Icon type="plain-text" className="flex-shrink-0" />
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
index d2a782aeb..7ed7e8999 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -339,8 +339,11 @@ const ToolbarPlugin = () => {
     const handleRootBlur = (event: FocusEvent) => {
       const elementToBeFocused = event.relatedTarget as Node
       const containerContainsElementToFocus = container?.contains(elementToBeFocused)
+      const linkEditorContainsElementToFocus = document
+        .getElementById('super-link-editor')
+        ?.contains(elementToBeFocused)
       const willFocusDismissButton = dismissButtonRef.current === elementToBeFocused
-      if (containerContainsElementToFocus && !willFocusDismissButton) {
+      if ((containerContainsElementToFocus || linkEditorContainsElementToFocus) && !willFocusDismissButton) {
         return
       }
       setIsFocusInEditor(false)