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

Revert "refactor: use ariakit for super note popovers"

Browse Source 
This reverts commit 3c5c6723ac.
This commit is contained in:
Aman Harwara
2023-12-14 23:28:24 +05:30
parent 9054d5e356
commit ba11551dfa
4 changed files with 94 additions and 90 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,7 +19,9 @@ export function BlockPickerMenuItem({
<li <li
key={option.key} key={option.key}
tabIndex={-1} tabIndex={-1}
className={`gap-3 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`} className={`border-bottom gap-3 border-[0.5px] border-border ${PopoverItemClassNames} ${
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,7 +8,9 @@ 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'
@@ -27,8 +29,6 @@ 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}
<PopoverProvider> <LexicalTypeaheadMenuPlugin<BlockPickerOption>
<LexicalTypeaheadMenuPlugin<BlockPickerOption> onQueryChange={setQueryString}
onQueryChange={setQueryString} onSelectOption={onSelectOption}
onSelectOption={onSelectOption} triggerFn={checkForTriggerMatch}
triggerFn={checkForTriggerMatch} options={options}
options={options} menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => { if (!anchorElementRef.current || !options.length) {
if (!anchorElementRef.current || !options.length) { return null
return null }
}
return ( return (
<Popover <Popover
open title="Block picker"
getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()} align="start"
autoFocus={false} anchorElement={anchorElementRef.current}
autoFocusOnShow={false} open={true}
className={PopoverClassNames} disableMobileFullscreenTakeover={true}
fitViewport side={isMobileScreen() ? 'top' : 'bottom'}
> maxHeight={(mh) => mh / 2}
<ul className="divide-y divide-border"> >
{options.map((option, i: number) => ( <ul>
<BlockPickerMenuItem {options.map((option, i: number) => (
index={i} <BlockPickerMenuItem
isSelected={selectedIndex === i} index={i}
onClick={() => { isSelected={selectedIndex === i}
setHighlightedIndex(i) onClick={() => {
selectOptionAndCleanUp(option) setHighlightedIndex(i)
}} selectOptionAndCleanUp(option)
onMouseEnter={() => { }}
setHighlightedIndex(i) onMouseEnter={() => {
}} setHighlightedIndex(i)
key={option.key} }}
option={option} key={option.key}
/> option={option}
))} />
</ul> ))}
</Popover> </ul>
) </Popover>
}} )
/> }}
</PopoverProvider> />
</> </>
) )
} }

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

@@ -1,7 +1,9 @@
import { classNames } from '@standardnotes/utils' import { classNames } from '@standardnotes/utils'
export const PopoverClassNames = export const PopoverClassNames = classNames(
'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]' 'z-dropdown-menu w-full',
'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 (
<PopoverProvider> <LexicalTypeaheadMenuPlugin<ItemOption>
<LexicalTypeaheadMenuPlugin<ItemOption> onQueryChange={setQueryString}
onQueryChange={setQueryString} onSelectOption={onSelectOption}
onSelectOption={onSelectOption} triggerFn={checkForTriggerMatch}
triggerFn={checkForTriggerMatch} options={options}
options={options} menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => { if (!anchorElementRef.current || !options.length) {
if (!anchorElementRef.current || !options.length) { return null
return null }
}
return ( return (
<Popover <Popover
open title="Select item"
getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()} align="start"
autoFocus={false} anchorElement={anchorElementRef}
autoFocusOnShow={false} open={true}
className={PopoverClassNames} disableMobileFullscreenTakeover={true}
fitViewport side={isMobileScreen() ? 'top' : 'bottom'}
> maxHeight={(mh) => mh / 2}
<ul className="divide-y divide-border"> >
{options.map((option, i: number) => ( <ul>
<ItemSelectionItemComponent {options.map((option, i: number) => (
searchQuery={queryString || ''} <ItemSelectionItemComponent
index={i} searchQuery={queryString || ''}
isSelected={selectedIndex === i} index={i}
onClick={() => { isSelected={selectedIndex === i}
setHighlightedIndex(i) onClick={() => {
selectOptionAndCleanUp(option) setHighlightedIndex(i)
}} selectOptionAndCleanUp(option)
onMouseEnter={() => { }}
setHighlightedIndex(i) onMouseEnter={() => {
}} setHighlightedIndex(i)
key={option.key} }}
option={option} key={option.key}
/> option={option}
))} />
</ul> ))}
</Popover> </ul>
) </Popover>
}} )
/> }}
</PopoverProvider> />
) )
} }