feat: Added above-keyboard toolbar to Super notes on mobile for formatting & selecting blocks (#2189)

packages/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -93,10 +93,9 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
 
   return (
     <>
-      {children}
       <RichTextPlugin
         contentEditable={
-          <div id="blocks-editor" className="editor-scroller h-full">
+          <div id="blocks-editor" className="editor-scroller h-full min-h-0">
             <div className="editor z-0 overflow-hidden" ref={onRef}>
               <ContentEditable
                 id={SuperEditorContentId}
@@ -133,6 +132,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
           <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
         </>
       )}
+      {children}
     </>
   )
 }

packages/blocks-editor/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -13,21 +13,6 @@
   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;

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 [isVisible, setIsVisible] = useState(false)
+  const [isText, setIsText] = useState(false)
   const [isLink, setIsLink] = useState(false)
   const [isBold, setIsBold] = useState(false)
   const [isItalic, setIsItalic] = useState(false)
@@ -339,15 +339,15 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
 
       const isMobile = window.matchMedia('(max-width: 768px)').matches
 
+      if (isMobile) {
+        return
+      }
+
       if (
         nativeSelection !== null &&
         (!$isRangeSelection(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))
       ) {
-        if (isMobile) {
-          setIsVisible(true)
-        } else {
-          setIsVisible(false)
-        }
+        setIsText(false)
         return
       }
 
@@ -404,11 +404,9 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       }
 
       if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== '') {
-        setIsVisible($isTextNode(node))
-      } else if (isMobile) {
-        setIsVisible(true)
+        setIsText($isTextNode(node))
       } else {
-        setIsVisible(false)
+        setIsText(false)
       }
     })
   }, [editor, activeEditor])
@@ -432,13 +430,13 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       }),
       editor.registerRootListener(() => {
         if (editor.getRootElement() === null) {
-          setIsVisible(false)
+          setIsText(false)
         }
       }),
     )
   }, [editor, updatePopup])
 
-  if (!isVisible || isLink) {
+  if (!isText || isLink) {
     return null
   }
 

packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts

@@ -17,13 +17,6 @@ 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)'