rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use ariakit for super note popovers

Browse Source
This commit is contained in:
Aman Harwara
2023-12-14 16:03:18 +05:30
parent caab23d8d1
commit 3c5c6723ac
4 changed files with 90 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
View File

@@ -19,9 +19,7 @@ export function BlockPickerMenuItem({
<li <li
key={option.key} key={option.key}
tabIndex={-1} tabIndex={-1}
className={`border-bottom gap-3 border-[0.5px] border-border ${PopoverItemClassNames} ${ className={`gap-3 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
isSelected ? PopoverItemSelectedClassNames : ''
}`}
ref={option.setRefElement} ref={option.setRefElement}
role="option" role="option"
aria-selected={isSelected} aria-selected={isSelected}

86
packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
View File

@@ -8,9 +8,7 @@ import { BlockPickerOption } from './BlockPickerOption'
import { BlockPickerMenuItem } from './BlockPickerMenuItem' import { BlockPickerMenuItem } from './BlockPickerMenuItem'
import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password' import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table' import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
import Popover from '@/Components/Popover/Popover'
import { GetDatetimeBlockOptions } from '../Blocks/DateTime' import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
import { isMobileScreen } from '@/Utils'
import { useApplication } from '@/Components/ApplicationProvider' import { useApplication } from '@/Components/ApplicationProvider'
import { GetRemoteImageBlockOption } from '../Blocks/RemoteImage' import { GetRemoteImageBlockOption } from '../Blocks/RemoteImage'
import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin' import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
@@ -29,6 +27,8 @@ import { GetQuoteBlockOption } from '../Blocks/Quote'
import { GetDividerBlockOption } from '../Blocks/Divider' import { GetDividerBlockOption } from '../Blocks/Divider'
import { GetCollapsibleBlockOption } from '../Blocks/Collapsible' import { GetCollapsibleBlockOption } from '../Blocks/Collapsible'
import { GetEmbedsBlockOptions } from '../Blocks/Embeds' import { GetEmbedsBlockOptions } from '../Blocks/Embeds'
import { Popover, PopoverProvider } from '@ariakit/react'
import { PopoverClassNames } from '../ClassNames'
export default function BlockPickerMenuPlugin(): JSX.Element { export default function BlockPickerMenuPlugin(): JSX.Element {
const [editor] = useLexicalComposerContext() const [editor] = useLexicalComposerContext()
@@ -111,47 +111,47 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
return ( return (
<> <>
{modal} {modal}
<LexicalTypeaheadMenuPlugin<BlockPickerOption> <PopoverProvider>
onQueryChange={setQueryString} <LexicalTypeaheadMenuPlugin<BlockPickerOption>
onSelectOption={onSelectOption} onQueryChange={setQueryString}
triggerFn={checkForTriggerMatch} onSelectOption={onSelectOption}
options={options} triggerFn={checkForTriggerMatch}
menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => { options={options}
if (!anchorElementRef.current || !options.length) { menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
return null if (!anchorElementRef.current || !options.length) {
} return null
}
return ( return (
<Popover <Popover
title="Block picker" open
align="start" getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
anchorElement={anchorElementRef.current} autoFocus={false}
open={true} autoFocusOnShow={false}
disableMobileFullscreenTakeover={true} className={PopoverClassNames}
side={isMobileScreen() ? 'top' : 'bottom'} fitViewport
maxHeight={(mh) => mh / 2} >
> <ul className="divide-y divide-border">
<ul> {options.map((option, i: number) => (
{options.map((option, i: number) => ( <BlockPickerMenuItem
<BlockPickerMenuItem index={i}
index={i} isSelected={selectedIndex === i}
isSelected={selectedIndex === i} onClick={() => {
onClick={() => { setHighlightedIndex(i)
setHighlightedIndex(i) selectOptionAndCleanUp(option)
selectOptionAndCleanUp(option) }}
}} onMouseEnter={() => {
onMouseEnter={() => { setHighlightedIndex(i)
setHighlightedIndex(i) }}
}} key={option.key}
key={option.key} option={option}
option={option} />
/> ))}
))} </ul>
</ul> </Popover>
</Popover> )
) }}
}} />
/> </PopoverProvider>
</> </>
) )
} }

6
packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
View File

@@ -1,9 +1,7 @@
import { classNames } from '@standardnotes/utils' import { classNames } from '@standardnotes/utils'
export const PopoverClassNames = classNames( export const PopoverClassNames =
'z-dropdown-menu w-full', 'max-h-[min(var(--popover-available-height,_50vh),_50vh)] w-[--popover-available-width] overflow-y-auto rounded border border-[--popover-border-color] bg-default shadow-main [backdrop-filter:var(--popover-backdrop-filter)] md:max-w-xs md:bg-[--popover-background-color]'
'cursor-auto flex-col overflow-y-auto rounded bg-default h-auto',
)
export const PopoverItemClassNames = classNames( export const PopoverItemClassNames = classNames(
'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground', 'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',

88
packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
View File

@@ -7,11 +7,11 @@ import { ItemOption } from './ItemOption'
import { useApplication } from '@/Components/ApplicationProvider' import { useApplication } from '@/Components/ApplicationProvider'
import { ContentType, SNNote } from '@standardnotes/snjs' import { ContentType, SNNote } from '@standardnotes/snjs'
import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults' import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
import Popover from '@/Components/Popover/Popover'
import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands' import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider' import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
import { isMobileScreen } from '@/Utils'
import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation' import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
import { Popover, PopoverProvider } from '@ariakit/react'
import { PopoverClassNames } from '../ClassNames'
type Props = { type Props = {
currentNote: SNNote currentNote: SNNote
@@ -83,47 +83,47 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
}, [application, editor, currentNote, queryString, linkingController]) }, [application, editor, currentNote, queryString, linkingController])
return ( return (
<LexicalTypeaheadMenuPlugin<ItemOption> <PopoverProvider>
onQueryChange={setQueryString} <LexicalTypeaheadMenuPlugin<ItemOption>
onSelectOption={onSelectOption} onQueryChange={setQueryString}
triggerFn={checkForTriggerMatch} onSelectOption={onSelectOption}
options={options} triggerFn={checkForTriggerMatch}
menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => { options={options}
if (!anchorElementRef.current || !options.length) { menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
return null if (!anchorElementRef.current || !options.length) {
} return null
}
return ( return (
<Popover <Popover
title="Select item" open
align="start" getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
anchorElement={anchorElementRef} autoFocus={false}
open={true} autoFocusOnShow={false}
disableMobileFullscreenTakeover={true} className={PopoverClassNames}
side={isMobileScreen() ? 'top' : 'bottom'} fitViewport
maxHeight={(mh) => mh / 2} >
> <ul className="divide-y divide-border">
<ul> {options.map((option, i: number) => (
{options.map((option, i: number) => ( <ItemSelectionItemComponent
<ItemSelectionItemComponent searchQuery={queryString || ''}
searchQuery={queryString || ''} index={i}
index={i} isSelected={selectedIndex === i}
isSelected={selectedIndex === i} onClick={() => {
onClick={() => { setHighlightedIndex(i)
setHighlightedIndex(i) selectOptionAndCleanUp(option)
selectOptionAndCleanUp(option) }}
}} onMouseEnter={() => {
onMouseEnter={() => { setHighlightedIndex(i)
setHighlightedIndex(i) }}
}} key={option.key}
key={option.key} option={option}
option={option} />
/> ))}
))} </ul>
</ul> </Popover>
</Popover> )
) }}
}} />
/> </PopoverProvider>
) )
} }