fix(plugin-docsearch): open docsearch with slash key before run initi…

[viniciusteixeiradias]

…alize

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Provide a description in this PR that addresses what the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. close #123).

Solving this problem: vuejs/docs#2240.

What is the purpose of this pull request?

• Bug fix
• New feature
• Documentation update
• Other

Description

Previously, the initializate method was called in onMounted Docsearch.ts, but there was a change that removed it and the method responsible for triggering docsearch before executing the initializate became useDocsearchHotkeyListener, this method defines a keydown eventLintener when mounting the component.

My change was to add the '/' key to the useDocsearchHotkeyListener validation.

[Mister-Hope]

Docsearch only support command + k. Adding / is confusing.

[viniciusteixeiradias]

Docsearch only support command + k. Adding / is confusing.

@Mister-Hope Confused? What do you mean? The / works in Docsearch, the problem happens on the first load.

[Mister-Hope]

Didn't know that, I will test that later

[viniciusteixeiradias]

@Mister-Hope Maybe we need to add this validation below:

const isEditingContent = (e: KeyboardEvent): boolean => {
  const element = e.target as HTMLElement;
  const tagName = element.tagName;
  return (
    element.isContentEditable ||
    tagName === 'INPUT' ||
    tagName === 'SELECT' ||
    tagName === 'TEXTAREA'
  );
}

I am still awaiting your feedback to keep working on this issue.

[Mister-Hope]

Hi there, holiday during April 29th - May 3rd in Chinese, will be back later.

[Mister-Hope]

BTW, I do not like the changed here, reversing the logic doesn't make sense, the handler is catching some keys here, so a positive judgement should be better

Suggested change

	const isHotKeyBind = event.key === 'k' && (event.ctrlKey || event.metaKey)
	const isSlashKey = event.key === '/'
	if (!isSlashKey && !isHotKeyBind) {
	return
	}
	event.preventDefault()
	callback()
	remove()
	const isHotKeyBind = (event.key === 'k' && (event.ctrlKey || event.metaKey))
	const isSlashKey = event.key === '/'
	if (isSlashKey || isHotKeyBind) {
	event.preventDefault()
	callback()
	remove()
	}

[viniciusteixeiradias]

I understand your point, but the "early return" is a very considerable and advantageous approach to make the logic clearer and more evident (indicated when talking about clean code). This function will not do anything else if the hotkeys are not triggered, so this way avoids the need to put the entire logic of the method inside the if.

[meteorlxy]

Also didn't know that slash is the default hot key of docsearch. Nice catch!