Hotkeys: prevent contenteditable tags from behaving properly

[samgaudet]

Details

• Read the Docs project URL: https://readthedocs.org/projects/mkdocs-madlibs/
• Read the Docs documentation URL: https://mkdocs-madlibs.readthedocs.io/en/latest/

Expected Result

When using contenteditable tags in my documentation, I expect keyboard inputs to be available to a user on my site.

Actual Result

Given ReadTheDocs makes use of several EventListeners for hotkeys, the letter d does not work as expected as a user input in a contenteditable tag.

This has resulted in buggy behavior in a MkDocs plugin I am working on, as documented in the issue here: samgaudet/mkdocs-madlibs#4 (comment)

Reproduce the issue

To reproduce the issue, navigate here, click the editable NAME field, and try to type a name that includes the letter d.

Solution ideation

As far as I have been able to tell, there is not easy way to toggle the EventListener off or remove it for my documentation site. Perhaps one solution may be to allow for easier configuration of EventListeners and/or hotkeys from within a Read the Docs project's configuration/settings?

[humitos]

When using contenteditable tags in my documentation

Interesting. I wasn't aware of this attribute. Link for reference https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

We should modify our code at

addons/src/hotkeys.js

Lines 53 to 77 in 1950a82

	if (
	this.docDiffHotKeyEnabled &&
	keyboardEventToString(e) ===
	this.config.addons.hotkeys.doc_diff.trigger &&
	document.activeElement.tagName !== "INPUT" &&
	document.activeElement.tagName !== "TEXTAREA" &&
	document.activeElement.tagName !== "READTHEDOCS-SEARCH"
	) {
	if (this.docDiffEnabled) {
	event = new CustomEvent(EVENT_READTHEDOCS_DOCDIFF_HIDE);
	} else {
	event = new CustomEvent(EVENT_READTHEDOCS_DOCDIFF_ADDED_REMOVED_SHOW);
	}
	}
	// Search
	if (
	this.searchHotKeyEnabled &&
	keyboardEventToString(e) === this.config.addons.hotkeys.search.trigger &&
	document.activeElement.tagName !== "INPUT" &&
	document.activeElement.tagName !== "TEXTAREA" &&
	document.activeElement.tagName !== "READTHEDOCS-SEARCH"
	) {
	event = new CustomEvent(EVENT_READTHEDOCS_SEARCH_SHOW);
	}

to support contenteditable and skip triggering our events in that case.