Skip to content

Commit

Permalink
Add commandPriority option to LexicalMenu and dependent components (
Browse files Browse the repository at this point in the history 
#5123)
  • Loading branch information
@huw
huw authored Oct 24, 2023
1 parent ca4059e commit df2a50b
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 10 deletions.
10 changes: 9 additions & 1 deletion packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
* LICENSE file in the root directory of this source tree.
*
*/
import type {LexicalNode, MutationListener} from 'lexical';
import type {
CommandListenerPriority,
LexicalNode,
MutationListener,
} from 'lexical';

import {$isLinkNode, AutoLinkNode, LinkNode} from '@lexical/link';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
Expand All @@ -19,6 +23,7 @@ import {
$getNodeByKey,
$getSelection,
COMMAND_PRIORITY_EDITOR,
COMMAND_PRIORITY_LOW,
createCommand,
LexicalCommand,
LexicalEditor,
Expand Down Expand Up @@ -78,13 +83,15 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
dismissFn: () => void,
) => Array<AutoEmbedOption>;
menuRenderFn: MenuRenderFn<AutoEmbedOption>;
menuCommandPriority?: CommandListenerPriority;
};

export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
embedConfigs,
onOpenEmbedModalForConfig,
getMenuOptions,
menuRenderFn,
menuCommandPriority = COMMAND_PRIORITY_LOW,
}: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null {
const [editor] = useLexicalComposerContext();

Expand Down Expand Up @@ -223,6 +230,7 @@ export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
onSelectOption={onSelectOption}
options={options}
menuRenderFn={menuRenderFn}
commandPriority={menuCommandPriority}
/>
) : null;
}
9 changes: 8 additions & 1 deletion packages/lexical-react/src/LexicalContextMenuPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
import type {MenuRenderFn, MenuResolution} from './shared/LexicalMenu';

import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {LexicalNode} from 'lexical';
import {
COMMAND_PRIORITY_LOW,
CommandListenerPriority,
LexicalNode,
} from 'lexical';
import {
MutableRefObject,
ReactPortal,
Expand Down Expand Up @@ -45,6 +49,7 @@ export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
onOpen?: (resolution: MenuResolution) => void;
menuRenderFn: ContextMenuRenderFn<TOption>;
anchorClassName?: string;
commandPriority?: CommandListenerPriority;
};

const PRE_PORTAL_DIV_SIZE = 1;
Expand All @@ -56,6 +61,7 @@ export function LexicalContextMenuPlugin<TOption extends MenuOption>({
onSelectOption,
menuRenderFn: contextMenuRenderFn,
anchorClassName,
commandPriority = COMMAND_PRIORITY_LOW,
}: LexicalContextMenuPluginProps<TOption>): JSX.Element | null {
const [editor] = useLexicalComposerContext();
const [resolution, setResolution] = useState<MenuResolution | null>(null);
Expand Down Expand Up @@ -143,6 +149,7 @@ export function LexicalContextMenuPlugin<TOption extends MenuOption>({
})
}
onSelectOption={onSelectOption}
commandPriority={commandPriority}
/>
);
}
Expand Down
11 changes: 10 additions & 1 deletion packages/lexical-react/src/LexicalNodeMenuPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@
import type {MenuRenderFn, MenuResolution} from './shared/LexicalMenu';

import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {$getNodeByKey, NodeKey, TextNode} from 'lexical';
import {
$getNodeByKey,
COMMAND_PRIORITY_LOW,
CommandListenerPriority,
NodeKey,
TextNode,
} from 'lexical';
import {useCallback, useEffect, useState} from 'react';
import * as React from 'react';

Expand All @@ -36,6 +42,7 @@ export type NodeMenuPluginProps<TOption extends MenuOption> = {
onOpen?: (resolution: MenuResolution) => void;
menuRenderFn: MenuRenderFn<TOption>;
anchorClassName?: string;
commandPriority?: CommandListenerPriority;
};

export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
Expand All @@ -46,6 +53,7 @@ export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
onSelectOption,
menuRenderFn,
anchorClassName,
commandPriority = COMMAND_PRIORITY_LOW,
}: NodeMenuPluginProps<TOption>): JSX.Element | null {
const [editor] = useLexicalComposerContext();
const [resolution, setResolution] = useState<MenuResolution | null>(null);
Expand Down Expand Up @@ -115,6 +123,7 @@ export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
options={options}
menuRenderFn={menuRenderFn}
onSelectOption={onSelectOption}
commandPriority={commandPriority}
/>
);
}
Expand Down
5 changes: 5 additions & 0 deletions packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
$getSelection,
$isRangeSelection,
$isTextNode,
COMMAND_PRIORITY_LOW,
CommandListenerPriority,
createCommand,
LexicalCommand,
LexicalEditor,
Expand Down Expand Up @@ -200,6 +202,7 @@ export type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
onOpen?: (resolution: MenuResolution) => void;
onClose?: () => void;
anchorClassName?: string;
commandPriority?: CommandListenerPriority;
};

export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
Expand All @@ -211,6 +214,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
menuRenderFn,
triggerFn,
anchorClassName,
commandPriority = COMMAND_PRIORITY_LOW,
}: TypeaheadMenuPluginProps<TOption>): JSX.Element | null {
const [editor] = useLexicalComposerContext();
const [resolution, setResolution] = useState<MenuResolution | null>(null);
Expand Down Expand Up @@ -305,6 +309,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
menuRenderFn={menuRenderFn}
shouldSplitNodeWithQuery={true}
onSelectOption={onSelectOption}
commandPriority={commandPriority}
/>
);
}
Expand Down
18 changes: 11 additions & 7 deletions packages/lexical-react/src/shared/LexicalMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
$getSelection,
$isRangeSelection,
COMMAND_PRIORITY_LOW,
CommandListenerPriority,
createCommand,
KEY_ARROW_DOWN_COMMAND,
KEY_ARROW_UP_COMMAND,
Expand Down Expand Up @@ -260,6 +261,7 @@ export function LexicalMenu<TOption extends MenuOption>({
menuRenderFn,
onSelectOption,
shouldSplitNodeWithQuery = false,
commandPriority = COMMAND_PRIORITY_LOW,
}: {
close: () => void;
editor: LexicalEditor;
Expand All @@ -274,6 +276,7 @@ export function LexicalMenu<TOption extends MenuOption>({
closeMenu: () => void,
matchingString: string,
) => void;
commandPriority?: CommandListenerPriority;
}): JSX.Element | null {
const [selectedIndex, setHighlightedIndex] = useState<null | number>(null);

Expand Down Expand Up @@ -345,10 +348,10 @@ export function LexicalMenu<TOption extends MenuOption>({

return false;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
);
}, [editor, updateSelectedIndex]);
}, [editor, updateSelectedIndex, commandPriority]);

useEffect(() => {
return mergeRegister(
Expand All @@ -375,7 +378,7 @@ export function LexicalMenu<TOption extends MenuOption>({
}
return true;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
editor.registerCommand<KeyboardEvent>(
KEY_ARROW_UP_COMMAND,
Expand All @@ -394,7 +397,7 @@ export function LexicalMenu<TOption extends MenuOption>({
}
return true;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
editor.registerCommand<KeyboardEvent>(
KEY_ESCAPE_COMMAND,
Expand All @@ -405,7 +408,7 @@ export function LexicalMenu<TOption extends MenuOption>({
close();
return true;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
editor.registerCommand<KeyboardEvent>(
KEY_TAB_COMMAND,
Expand All @@ -423,7 +426,7 @@ export function LexicalMenu<TOption extends MenuOption>({
selectOptionAndCleanUp(options[selectedIndex]);
return true;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
editor.registerCommand(
KEY_ENTER_COMMAND,
Expand All @@ -442,7 +445,7 @@ export function LexicalMenu<TOption extends MenuOption>({
selectOptionAndCleanUp(options[selectedIndex]);
return true;
},
COMMAND_PRIORITY_LOW,
commandPriority,
),
);
}, [
Expand All @@ -452,6 +455,7 @@ export function LexicalMenu<TOption extends MenuOption>({
options,
selectedIndex,
updateSelectedIndex,
commandPriority,
]);

const listItemProps = useMemo(
Expand Down

2 comments on commit df2a50b

@vercel
Copy link

@vercel vercel bot commented on df2a50b Oct 24, 2023

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-fbopensource.vercel.app
lexical-git-main-fbopensource.vercel.app
lexical.dev
lexicaljs.com
lexicaljs.org
www.lexical.dev

@vercel
Copy link

@vercel vercel bot commented on df2a50b Oct 24, 2023

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-fbopensource.vercel.app
lexical-playground-git-main-fbopensource.vercel.app
lexical-playground.vercel.app
playground.lexical.dev

Please sign in to comment.