-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
639d636
commit ddcf5be
Showing
13 changed files
with
782 additions
and
579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow strict | ||
| */ | ||
|
|
||
| import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical'; | ||
| import * as React from 'react'; | ||
|
|
||
| export type MenuTextMatch = { | ||
| leadOffset: number, | ||
| matchingString: string, | ||
| replaceableString: string, | ||
| }; | ||
|
|
||
| export type MenuResolution = { | ||
| match?: MenuTextMatch, | ||
| getRect: () => ClientRect, | ||
| }; | ||
|
|
||
| declare export class MenuOption { | ||
| key: string; | ||
| ref: {current: HTMLElement | null}; | ||
| constructor(key: string): void; | ||
| setRefElement(element: HTMLElement | null): void; | ||
| } | ||
|
|
||
| export type MenuRenderFn<TOption> = ( | ||
| anchorElementRef: {current: HTMLElement | null}, | ||
| itemProps: { | ||
| selectedIndex: number | null, | ||
| selectOptionAndCleanUp: (option: TOption) => void, | ||
| setHighlightedIndex: (index: number) => void, | ||
| options: Array<TOption>, | ||
| }, | ||
| matchingString: string, | ||
| ) => React.Portal | React.MixedElement | null; | ||
|
|
||
| export type TriggerFn = ( | ||
| text: string, | ||
| editor: LexicalEditor, | ||
| ) => MenuTextMatch | null; | ||
|
|
||
| type NodeMenuPluginProps<TOption> = { | ||
| onSelectOption: ( | ||
| option: TOption, | ||
| textNodeContainingQuery: TextNode | null, | ||
| closeMenu: () => void, | ||
| matchingString: string, | ||
| ) => void, | ||
| options: Array<TOption>, | ||
| nodeKey: NodeKey | null, | ||
| onClose?: () => void, | ||
| onOpen?: (resolution: MenuResolution) => void, | ||
| menuRenderFn: MenuRenderFn<TOption>, | ||
| anchorClassName?: string, | ||
| }; | ||
|
|
||
| declare export function LexicalNodeMenuPlugin<TOption>( | ||
| options: NodeMenuPluginProps<TOption>, | ||
| ): React.MixedElement | null; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import type {MenuRenderFn, MenuResolution} from './shared/LexicalMenu'; | ||
|
|
||
| import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; | ||
| import {$getNodeByKey, NodeKey, TextNode} from 'lexical'; | ||
| import {useCallback, useEffect, useState} from 'react'; | ||
| import * as React from 'react'; | ||
|
|
||
| import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu'; | ||
|
|
||
| function startTransition(callback: () => void) { | ||
| if (React.startTransition) { | ||
| React.startTransition(callback); | ||
| } else { | ||
| callback(); | ||
| } | ||
| } | ||
|
|
||
| export type NodeMenuPluginProps<TOption extends MenuOption> = { | ||
| onSelectOption: ( | ||
| option: TOption, | ||
| textNodeContainingQuery: TextNode | null, | ||
| closeMenu: () => void, | ||
| matchingString: string, | ||
| ) => void; | ||
| options: Array<TOption>; | ||
| nodeKey: NodeKey | null; | ||
| onClose?: () => void; | ||
| onOpen?: (resolution: MenuResolution) => void; | ||
| menuRenderFn: MenuRenderFn<TOption>; | ||
| anchorClassName?: string; | ||
| }; | ||
|
|
||
| export function LexicalNodeMenuPlugin<TOption extends MenuOption>({ | ||
| options, | ||
| nodeKey, | ||
| onClose, | ||
| onOpen, | ||
| onSelectOption, | ||
| menuRenderFn, | ||
| anchorClassName, | ||
| }: NodeMenuPluginProps<TOption>): JSX.Element | null { | ||
| const [editor] = useLexicalComposerContext(); | ||
| const [resolution, setResolution] = useState<MenuResolution | null>(null); | ||
| const anchorElementRef = useMenuAnchorRef( | ||
| resolution, | ||
| setResolution, | ||
| anchorClassName, | ||
| ); | ||
|
|
||
| const closeNodeMenu = useCallback(() => { | ||
| setResolution(null); | ||
| if (onClose != null && resolution !== null) { | ||
| onClose(); | ||
| } | ||
| }, [onClose, resolution]); | ||
|
|
||
| const openNodeMenu = useCallback( | ||
| (res: MenuResolution) => { | ||
| setResolution(res); | ||
| if (onOpen != null && resolution === null) { | ||
| onOpen(res); | ||
| } | ||
| }, | ||
| [onOpen, resolution], | ||
| ); | ||
|
|
||
| const positionOrCloseMenu = useCallback(() => { | ||
| if (nodeKey) { | ||
| editor.update(() => { | ||
| const node = $getNodeByKey(nodeKey); | ||
| const domElement = editor.getElementByKey(nodeKey); | ||
| if (node != null && domElement != null) { | ||
| if (resolution == null) { | ||
| startTransition(() => | ||
| openNodeMenu({ | ||
| getRect: () => domElement.getBoundingClientRect(), | ||
| }), | ||
| ); | ||
| } | ||
| } | ||
| }); | ||
| } else if (nodeKey == null && resolution != null) { | ||
| closeNodeMenu(); | ||
| } | ||
| }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]); | ||
|
|
||
| useEffect(() => { | ||
| positionOrCloseMenu(); | ||
| }, [positionOrCloseMenu, nodeKey]); | ||
|
|
||
| useEffect(() => { | ||
| if (nodeKey != null) { | ||
| return editor.registerUpdateListener(({dirtyElements}) => { | ||
| if (dirtyElements.get(nodeKey)) { | ||
| positionOrCloseMenu(); | ||
| } | ||
| }); | ||
| } | ||
| }, [editor, positionOrCloseMenu, nodeKey]); | ||
|
|
||
| return resolution === null || editor === null ? null : ( | ||
| <LexicalMenu | ||
| close={closeNodeMenu} | ||
| resolution={resolution} | ||
| editor={editor} | ||
| anchorElementRef={anchorElementRef} | ||
| options={options} | ||
| menuRenderFn={menuRenderFn} | ||
| onSelectOption={onSelectOption} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export {MenuOption, MenuRenderFn, MenuResolution}; |
Oops, something went wrong.
ddcf5beThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
lexical – ./packages/lexical-website
lexical-git-main-fbopensource.vercel.app
lexicaljs.com
lexical-fbopensource.vercel.app
lexical.dev
lexicaljs.org
www.lexical.dev
ddcf5beThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
lexical-playground – ./packages/lexical-playground
lexical-playground-git-main-fbopensource.vercel.app
lexical-playground.vercel.app
lexical-playground-fbopensource.vercel.app
playground.lexical.dev