Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hosting Command Palette: Trim double quotes from selected items if present #84373

Merged
merged 4 commits into from
Nov 23, 2023
Merged

Hosting Command Palette: Trim double quotes from selected items if present #84373

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80e13a8
Remove double quotes from site title if present
Nov 21, 2023
d5e8cd8
Remove unnecessary trim
Nov 21, 2023
fd8dae6
Hosting Command Palette: fix active descendant id for reserved charac…
sejas Nov 22, 2023
ad6e24a
Merge branch 'trunk' of github.com:Automattic/wp-calypso into fix/tri…
sejas Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions client/components/command-pallette/wpcom-command-pallette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Modal, TextHighlight, __experimentalHStack as HStack } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Icon, search as inputIcon } from '@wordpress/icons';
import { cleanForSlug } from '@wordpress/url';
import classnames from 'classnames';
import { useCommandState, Command } from 'cmdk';
import { useEffect, useMemo, useState, useRef } from 'react';
import { Command, useCommandState } from 'cmdk';
import { useEffect, useState, useRef, useMemo } from 'react';
import { useCommandPallette } from './use-command-pallette';

import '@wordpress/commands/build-style/style.css';
Expand Down Expand Up @@ -34,12 +35,13 @@ export function CommandMenuGroup( {
return (
<Command.Group about="WPCOM">
{ commands.map( ( command ) => {
const itemValue = command.searchLabel ?? command.label;
return (
<Command.Item
key={ command.name }
value={ command.searchLabel ?? command.label }
value={ itemValue }
onSelect={ () => command.callback( { close, setSearch } ) }
id={ command.name }
id={ cleanForSlug( itemValue ) }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution with cleanForSlug! TIL: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-url/#cleanforslug

>
<HStack
alignment="left"
Expand Down Expand Up @@ -68,24 +70,23 @@ interface CommandInputProps {

function CommandInput( { isOpen, search, setSearch }: CommandInputProps ) {
const commandMenuInput = useRef< HTMLInputElement >( null );
const _value = useCommandState( ( state ) => state.value );
const selectedItemId = useMemo( () => {
const item = document.querySelector( `[cmdk-item=""][data-value="${ _value }"]` );
return item?.getAttribute( 'id' );
}, [ _value ] );
const itemValue = useCommandState( ( state ) => state.value );
const itemId = useMemo( () => cleanForSlug( itemValue ), [ itemValue ] );

useEffect( () => {
// Focus the command palette input when mounting the modal.
if ( isOpen ) {
commandMenuInput.current?.focus();
}
}, [ isOpen ] );

return (
<Command.Input
ref={ commandMenuInput }
value={ search }
onValueChange={ setSearch }
placeholder={ __( 'Search for commands' ) }
aria-activedescendant={ `${ selectedItemId }` }
aria-activedescendant={ itemId }
/>
);
}
Expand Down
Loading