From ba67f8b8ce664d79a4374b6d36003db8789e5de0 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 31 Jan 2023 13:38:45 +0530
Subject: [PATCH] feat: Changed floating toolbar in Super to be always visible
 above keyboard on mobile (#2188)

---
 .../FloatingTextFormatToolbarPlugin/index.css | 15 ++++++++++++++
 .../FloatingTextFormatToolbarPlugin/index.tsx | 20 +++++++++++++------
 .../Lexical/Utils/setFloatingElemPosition.ts  |  7 +++++++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.css b/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.css
index c45b46279..fce6d7a48 100644
--- a/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.css
+++ b/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.css
@@ -13,6 +13,21 @@
   will-change: transform;
 }
 
+@media screen and (max-width: 768px) {
+  .floating-text-format-popup {
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    overflow-x: scroll;
+    opacity: 1;
+  }
+  .floating-text-format-popup::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    background: transparent;
+  }
+}
+
 .floating-text-format-popup button.popup-item {
   border: 0;
   display: flex;
diff --git a/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
index 102c0659b..63fd6d9f5 100644
--- a/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -316,7 +316,7 @@ function TextFormatFloatingToolbar({
 
 function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLElement): JSX.Element | null {
   const [activeEditor, setActiveEditor] = useState(editor)
-  const [isText, setIsText] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
   const [isLink, setIsLink] = useState(false)
   const [isBold, setIsBold] = useState(false)
   const [isItalic, setIsItalic] = useState(false)
@@ -337,11 +337,17 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       const nativeSelection = window.getSelection()
       const rootElement = editor.getRootElement()
 
+      const isMobile = window.matchMedia('(max-width: 768px)').matches
+
       if (
         nativeSelection !== null &&
         (!$isRangeSelection(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))
       ) {
-        setIsText(false)
+        if (isMobile) {
+          setIsVisible(true)
+        } else {
+          setIsVisible(false)
+        }
         return
       }
 
@@ -398,9 +404,11 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       }
 
       if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== '') {
-        setIsText($isTextNode(node))
+        setIsVisible($isTextNode(node))
+      } else if (isMobile) {
+        setIsVisible(true)
       } else {
-        setIsText(false)
+        setIsVisible(false)
       }
     })
   }, [editor, activeEditor])
@@ -424,13 +432,13 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       }),
       editor.registerRootListener(() => {
         if (editor.getRootElement() === null) {
-          setIsText(false)
+          setIsVisible(false)
         }
       }),
     )
   }, [editor, updatePopup])
 
-  if (!isText || isLink) {
+  if (!isVisible || isLink) {
     return null
   }
 
diff --git a/packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts b/packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts
index 4f501182b..76fe1ffbf 100644
--- a/packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts
+++ b/packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts
@@ -17,6 +17,13 @@ export function setFloatingElemPosition(
 ): void {
   const scrollerElem = anchorElem.parentElement
 
+  const isMobileScreen = window.innerWidth < 768
+
+  if (isMobileScreen) {
+    floatingElem.style.opacity = '1'
+    return
+  }
+
   if (targetRect === null || !scrollerElem) {
     floatingElem.style.opacity = '0'
     floatingElem.style.transform = 'translate(-10000px, -10000px)'