fix: Fixed performance regression in Super notes and improved toolbar

packages/icons/src/Icons/index.ts

@@ -213,6 +213,7 @@ import UserSwitch from './ic-user-switch.svg'
 import ViewIcon from './ic-view.svg'
 import WarningIcon from './ic-warning.svg'
 import WindowIcon from './ic-window.svg'
+import DetailsBlockIcon from './ic-details-block.svg'
 
 export {
   AccessibilityIcon,
@@ -267,6 +268,7 @@ export {
   CopyIcon,
   CreateAccountIllustration,
   DashboardIcon,
+  DetailsBlockIcon,
   DiamondFilledIcon,
   DiamondIcon,
   DownloadIcon,

packages/models/src/Domain/Utilities/Icon/IconType.ts

@@ -189,3 +189,4 @@ export type IconType =
   | 'view'
   | 'warning'
   | 'window'
+  | 'details-block'

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -24,6 +24,8 @@ export const IconNameToSvgMapping = {
   'chevron-up': icons.ChevronUpIcon,
   'clear-circle-filled': icons.ClearCircleFilledIcon,
   'cloud-off': icons.CloudOffIcon,
+  'code-tags': icons.CodeTagsIcon,
+  'details-block': icons.DetailsBlockIcon,
   'diamond-filled': icons.DiamondFilledIcon,
   'email-filled': icons.EmailFilledIcon,
   'eye-off': icons.EyeOffIcon,

packages/web/src/javascripts/Components/Panes/usePaneGesture.ts

@@ -3,18 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useApplication } from '../ApplicationProvider'
 import { ApplicationEvent, PrefKey, PrefDefaults } from '@standardnotes/snjs'
-
-function getScrollParent(node: HTMLElement | null): HTMLElement | null {
-  if (!node) {
-    return null
-  }
-
-  if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
-    return node
-  } else {
-    return getScrollParent(node.parentElement)
-  }
-}
+import { getScrollParent } from '@/Utils'
 
 const supportsPassive = (() => {
   let supportsPassive = false

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

@@ -6,6 +6,8 @@ import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/u
 import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
 import { getAdjustedStylesForNonPortalPopover } from '../Popover/Utils/getAdjustedStylesForNonPortal'
 import { useLongPressEvent } from '@/Hooks/useLongPress'
+import { PopoverSide } from '../Popover/Types'
+import { getScrollParent } from '@/Utils'
 
 const StyledTooltip = ({
   children,
@@ -15,6 +17,7 @@ const StyledTooltip = ({
   showOnHover = true,
   interactive = false,
   type = 'label',
+  side,
   ...props
 }: {
   children: ReactNode
@@ -24,6 +27,7 @@ const StyledTooltip = ({
   showOnHover?: boolean
   interactive?: boolean
   type?: TooltipStoreProps['type']
+  side?: PopoverSide
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
@@ -66,6 +70,27 @@ const StyledTooltip = ({
         onClick: () => setForceOpen(false),
       }
 
+  useEffect(() => {
+    const anchor = anchorRef.current
+    if (!anchor) {
+      return
+    }
+
+    const scrollParent = getScrollParent(anchor)
+    if (!scrollParent) {
+      return
+    }
+
+    const handleScroll = () => {
+      tooltip.hide()
+    }
+
+    scrollParent.addEventListener('scroll', handleScroll)
+    return () => {
+      scrollParent.removeEventListener('scroll', handleScroll)
+    }
+  }, [tooltip])
+
   if (isMobile && !showOnMobile) {
     return <>{children}</>
   }
@@ -110,7 +135,7 @@ const StyledTooltip = ({
 
           const styles = getPositionedPopoverStyles({
             align: 'center',
-            side: 'bottom',
+            side: side || 'bottom',
             anchorRect,
             popoverRect,
             documentRect,

packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx

@@ -6,27 +6,30 @@ import useModal from '../../Lexical/Hooks/useModal'
 import { InsertTableDialog } from '../../Plugins/TablePlugin'
 import { BlockPickerOption } from './BlockPickerOption'
 import { BlockPickerMenuItem } from './BlockPickerMenuItem'
-import { GetNumberedListBlockOption } from './Options/NumberedList'
-import { GetBulletedListBlockOption } from './Options/BulletedList'
-import { GetChecklistBlockOption } from './Options/Checklist'
-import { GetDividerBlockOption } from './Options/Divider'
-import { GetCollapsibleBlockOption } from './Options/Collapsible'
-import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from './Options/Password'
-import { GetParagraphBlockOption } from './Options/Paragraph'
-import { GetHeadingsBlockOptions } from './Options/Headings'
-import { GetQuoteBlockOption } from './Options/Quote'
-import { GetAlignmentBlockOptions } from './Options/Alignment'
-import { GetCodeBlockOption } from './Options/Code'
-import { GetEmbedsBlockOptions } from './Options/Embeds'
-import { GetDynamicTableBlocks, GetTableBlockOption } from './Options/Table'
+import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
+import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
 import Popover from '@/Components/Popover/Popover'
 import { PopoverClassNames } from '../ClassNames'
-import { GetDatetimeBlockOptions } from './Options/DateTime'
+import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
 import { isMobileScreen } from '@/Utils'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { GetIndentOutdentBlockOptions } from './Options/IndentOutdent'
-import { GetRemoteImageBlockOption } from './Options/RemoteImage'
+import { GetRemoteImageBlockOption } from '../Blocks/RemoteImage'
 import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
+import { GetParagraphBlockOption } from '../Blocks/Paragraph'
+import { GetH1BlockOption, GetH2BlockOption, GetH3BlockOption } from '../Blocks/Headings'
+import { GetIndentBlockOption, GetOutdentBlockOption } from '../Blocks/IndentOutdent'
+import {
+  GetCenterAlignBlockOption,
+  GetJustifyAlignBlockOption,
+  GetLeftAlignBlockOption,
+  GetRightAlignBlockOption,
+} from '../Blocks/Alignment'
+import { GetNumberedListBlockOption, GetBulletedListBlockOption, GetChecklistBlockOption } from '../Blocks/List'
+import { GetCodeBlockOption } from '../Blocks/Code'
+import { GetQuoteBlockOption } from '../Blocks/Quote'
+import { GetDividerBlockOption } from '../Blocks/Divider'
+import { GetCollapsibleBlockOption } from '../Blocks/Collapsible'
+import { GetEmbedsBlockOptions } from '../Blocks/Embeds'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
@@ -39,11 +42,15 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
   })
 
   const options = useMemo(() => {
-    const indentOutdentOptions = application.isNativeMobileWeb() ? GetIndentOutdentBlockOptions(editor) : []
+    const indentOutdentOptions = application.isNativeMobileWeb()
+      ? [GetIndentBlockOption(editor), GetOutdentBlockOption(editor)]
+      : []
 
     const baseOptions = [
       GetParagraphBlockOption(editor),
-      ...GetHeadingsBlockOptions(editor),
+      GetH1BlockOption(editor),
+      GetH2BlockOption(editor),
+      GetH3BlockOption(editor),
       ...indentOutdentOptions,
       GetTableBlockOption(() =>
         showModal('Insert Table', (onClose) => <InsertTableDialog activeEditor={editor} onClose={onClose} />),
@@ -58,7 +65,10 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
       GetCodeBlockOption(editor),
       GetDividerBlockOption(editor),
       ...GetDatetimeBlockOptions(editor),
-      ...GetAlignmentBlockOptions(editor),
+      GetLeftAlignBlockOption(editor),
+      GetCenterAlignBlockOption(editor),
+      GetRightAlignBlockOption(editor),
+      GetJustifyAlignBlockOption(editor),
       GetPasswordBlockOption(editor),
       GetCollapsibleBlockOption(editor),
       ...GetEmbedsBlockOptions(editor),