feat: Super formatting toolbar on mobile now shows whether an option …

…is active in the selection, and also shows hints when an option is long-pressed (#2432)

packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts

@@ -63,13 +63,19 @@ const getStylesFromRect = (options: {
   side: PopoverSide
   align: PopoverAlignment
   disableMobileFullscreenTakeover?: boolean
+  disableApplyingMobileWidth?: boolean
   maxHeight?: number | 'none'
   offset?: number
 }): PopoverCSSProperties => {
-  const { rect, disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options
+  const {
+    rect,
+    disableMobileFullscreenTakeover = false,
+    disableApplyingMobileWidth = false,
+    maxHeight = 'none',
+  } = options
 
   const canApplyMaxHeight = maxHeight !== 'none' && (!isMobileScreen() || disableMobileFullscreenTakeover)
-  const shouldApplyMobileWidth = isMobileScreen() && disableMobileFullscreenTakeover
+  const shouldApplyMobileWidth = isMobileScreen() && disableMobileFullscreenTakeover && !disableApplyingMobileWidth
   const marginForMobile = percentOf(10, window.innerWidth)
 
   return {
@@ -96,6 +102,7 @@ type Options = {
   popoverRect?: DOMRect
   side: PopoverSide
   disableMobileFullscreenTakeover?: boolean
+  disableApplyingMobileWidth?: boolean
   maxHeightFunction?: (calculatedMaxHeight: number) => number | 'none'
   offset?: number
 }
@@ -107,6 +114,7 @@ export const getPositionedPopoverStyles = ({
   popoverRect,
   side,
   disableMobileFullscreenTakeover,
+  disableApplyingMobileWidth,
   maxHeightFunction,
   offset,
 }: Options): PopoverCSSProperties | null => {
@@ -159,6 +167,7 @@ export const getPositionedPopoverStyles = ({
     side: sideWithLessOverflows,
     align: finalAlignment,
     disableMobileFullscreenTakeover,
+    disableApplyingMobileWidth,
     maxHeight,
     offset,
   })

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -1,10 +1,11 @@
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useRef, useEffect } from 'react'
 import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
 import { getAdjustedStylesForNonPortalPopover } from '../Popover/Utils/getAdjustedStylesForNonPortal'
+import { useLongPressEvent } from '@/Hooks/useLongPress'
 
 const StyledTooltip = ({
   children,
@@ -24,13 +25,43 @@ const StyledTooltip = ({
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
+  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
   const tooltip = useTooltipStore({
-    timeout: 500,
+    timeout: isMobile && showOnMobile ? 100 : 500,
     hideTimeout: 0,
     skipTimeout: 0,
     open: forceOpen,
+    animated: true,
   })
-  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  const anchorRef = useRef<HTMLElement>(null)
+  const { attachEvents: attachLongPressEvents, cleanupEvents: cleanupLongPressEvents } = useLongPressEvent(
+    anchorRef,
+    () => {
+      tooltip.show()
+      setTimeout(() => {
+        tooltip.hide()
+      }, 2000)
+    },
+  )
+
+  useEffect(() => {
+    if (!isMobile || !showOnMobile) {
+      return
+    }
+
+    attachLongPressEvents()
+
+    return () => {
+      cleanupLongPressEvents()
+    }
+  }, [attachLongPressEvents, cleanupLongPressEvents, isMobile, showOnMobile])
+
+  const clickProps = isMobile
+    ? {}
+    : {
+        onClick: () => setForceOpen(false),
+      }
 
   if (isMobile && !showOnMobile) {
     return <>{children}</>
@@ -39,7 +70,8 @@ const StyledTooltip = ({
   return (
     <>
       <TooltipAnchor
-        onClick={() => setForceOpen(false)}
+        ref={anchorRef}
+        {...clickProps}
         onBlur={() => setForceOpen(undefined)}
         store={tooltip}
         as={Slot}
@@ -53,6 +85,7 @@ const StyledTooltip = ({
         store={tooltip}
         className={classNames(
           'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
+          'opacity-60 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60 transition-opacity duration-75',
           className,
         )}
         updatePosition={() => {
@@ -79,6 +112,7 @@ const StyledTooltip = ({
             popoverRect,
             documentRect,
             disableMobileFullscreenTakeover: true,
+            disableApplyingMobileWidth: true,
             offset: props.gutter ? props.gutter : 6,
           })
 

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -19,7 +19,7 @@ import AutoEmbedPlugin from './Plugins/AutoEmbedPlugin'
 import CollapsiblePlugin from './Plugins/CollapsiblePlugin'
 import DraggableBlockPlugin from './Plugins/DraggableBlockPlugin'
 import CodeHighlightPlugin from './Plugins/CodeHighlightPlugin'
-import FloatingTextFormatToolbarPlugin from './Plugins/FloatingTextFormatToolbarPlugin'
+import FloatingTextFormatToolbarPlugin from './Plugins/ToolbarPlugins/FloatingTextFormatToolbarPlugin'
 import { TabIndentationPlugin } from './Plugins/TabIndentationPlugin'
 import { handleEditorChange } from './Utils'
 import { SuperEditorContentId } from './Constants'

packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/BulletedList.tsx

@@ -1,11 +1,12 @@
 import { LexicalEditor } from 'lexical'
 import { INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list'
 
-export function GetBulletedListBlock(editor: LexicalEditor) {
+export function GetBulletedListBlock(editor: LexicalEditor, isActive = false) {
   return {
     name: 'Bulleted List',
     iconName: 'list-bulleted',
     keywords: ['bulleted list', 'unordered list', 'ul'],
     onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+    active: isActive,
   }
 }

packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/NumberedList.tsx

@@ -1,11 +1,12 @@
 import { LexicalEditor } from 'lexical'
 import { INSERT_ORDERED_LIST_COMMAND } from '@lexical/list'
 
-export function GetNumberedListBlock(editor: LexicalEditor) {
+export function GetNumberedListBlock(editor: LexicalEditor, isActive = false) {
   return {
     name: 'Numbered List',
     iconName: 'list-numbered',
     keywords: ['numbered list', 'ordered list', 'ol'],
     onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+    active: isActive,
   }
 }