How to unRegister shortcut registered by RichTextShortcut ?

[kohheepeace]

I want to unregister cmd+k shortcut of core/link which is registered as follows.

<RichTextShortcut type="primary" character="k" onUse={ addLink } />

I tried the code like below, but it doesn't work.

  const { unregisterShortcut } = useDispatch(
    keyboardShortcutsStore
  );

  useEffect(() => {
    unregisterShortcut("core/link");
  }, [unregisterShortcut]);

How to unregister this shortcut key?

PS: More specifically, I need to assign a shortcut to cmd + k to open a Search modal, and I want to change a shortcut for link block to another key.

[devfle]

I'm not sure, but I don't think the rich-text shortcuts can be managed externally via an API. However, you could use a workaround:

Option 1)
You remove the whole link feature:

wp.data.dispatch('core/rich-text').removeFormatTypes('core/link')

Option 2)
You remove only the shortcut. Since these are also registered normally as events via the useShortcut hook, you can also remove this again, for example:

const selectedBlock = docutment.querySelector('SELECTOR');
const blockEvents = window.getEventListener(selectedBlock);
const linkEvent = blockEvents['keydown'][INDEX_FROM_USE_KEYDOWN]?.listener;
selectedBlock.removeEventListener('keydown', linkEvent);

To get the current selected block you can use:

wp.data.select('core/block-editor').getSelectedBlock();

in combination with useSelect und useEffect.

Option 2 only removes the addLink for me. All other shortcuts such as bold, italic etc. still seem to work. I am not sure if there is a better solution. You would have to get to the context of the rich-text component.

useShortcuts: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/rich-text/use-shortcuts.js#L14

ShortcutRegisterComponent: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/rich-text/shortcut.js#L12

[kohheepeace]

@devfle Thanks for your reply!

I choose Option 2.

However, let me check your reply as I do not understand it exactly.

1. Format-library Shortcuts are registered throught useShortcuts hook toward DOM element Element.block-editor-rich-text__editable

<TagName
    ...
	ref={ useMergeRefs( [
        ...
		useShortcuts( keyboardShortcuts ),
		...
		] ) }
   ...
	className={ classnames(
		'block-editor-rich-text__editable',
		props.className,
		'rich-text'
	) }
	...
/>

gutenberg/packages/block-editor/src/components/rich-text/index.js

Line 413 in f69c191

useShortcuts( keyboardShortcuts ),

2. useShortcuts are just ordinary js code to add keyboard shortcut

export function useShortcuts( keyboardShortcuts ) {
	return useRefEffect( ( element ) => {
		function onKeyDown( event ) {
			for ( const keyboardShortcut of keyboardShortcuts.current ) {
				keyboardShortcut( event );
				
				/* here is equivalent like...
					if (e.ctrlKey && e.which == 66)) {
						code for formating bold
					}
				*/
			}
		}

		element.addEventListener( 'keydown', onKeyDown );
		return () => {
			element.removeEventListener( 'keydown', onKeyDown );
		};
	}, [] );
}

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/rich-text/use-shortcuts.js#L14

So, the solution may be 1 or 2 below

1. Modify keyboardShortcuts.current => not sure how to do
2. Directly remove keydown event from Element.block-editor-rich-text__editable

right ?

From your comment

const selectedBlock = document.querySelector('.block-editor-rich-text__editable');
const blockEvents = window.getEventListener(selectedBlock);
const linkEvent = blockEvents['keydown'][INDEX_FROM_USE_KEYDOWN]?.listener;
selectedBlock.removeEventListener('keydown', linkEvent);

How to detect INDEX_FROM_USE_KEYDOWN ? Is it from console.log() ?

[devfle]

That is how I understood it. But it's also possible that I'm wrong.

Exactly, to get the right index, I had the individual keydown events logged in the console and looked in the event callbacks. The [[FunctionLocation]] -> use-shortcuts.js should be removed.

I think this solution is not so good and very dirty, because the index could change anytime. Maybe someone else has an better solution.

[kohheepeace]

Yes, this is a bit of a hacky solution. I'll leave the existing RichTextShortcut and use any available other keys currently. I am glad we had the discussion. Thanks!

[kohheepeace]

Also add issue link [Allow users to customize keyboard shortcuts] #3218 for others future reference.

[kohheepeace]

Old PR may solve this issue #34810