ueokande / vim-vixen

Accelerates your web browsing with Vim power!!
https://ueokande.github.io/vim-vixen/
MIT License
2.11k stars 138 forks source link

Input events captured on a parent of a conteneditable DOM elements aren't captured by the `fromInput` check #1405

Open cronco opened 2 years ago

cronco commented 2 years ago

I'm opening this issue because:

Description

I'm using an extension called Memex, which injects a sidebar into websites for writing notes.

I wrote about this before in bug #1340 with an option of disabling vim-vixen by selector as a solution. I have found the root issue here. The extension uses ProseMirror and it captures input events on the root of the injected sidebar, which doesn't have the contenteditable property on it.

The markup for a typical input from the extension looks like this, but like I said, the input is captured at the root of the injected sidebar (I think the extension uses react, which uses this pattern).

<div class="ProseMirrorContainer" aria-expanded="false" lang="en">
    <div translate="no" class="ProseMirror ProseMirror-focused" tabindex="0" contenteditable="true">
        <p data-placeholder="Add Note. Click on ( ? ) for formatting help." class="is-empty is-editor-empty">
            <br class="ProseMirror-trailingBreak">
        </p>
    </div>
</div>

This could easily be fixed by changing the target the InputDriver checks for in the capture method.

  private capture(e: KeyboardEvent) {
    const target = e.target;
    if (!(target instanceof HTMLElement)) {
      return;
    }

Essentially changing from const target = e.target; to const target = e.originalTarget would fix this particular instance of the bug. I would like to raise a PR with this change.

Failure Information (for bugs)

When I try to add a note in the above mentioned plugin, vim-vixen captures the input and triggers the action. This can be very frustrating, especially if the note starts with r which leads to a page refresh.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. Install Memex
  2. Select some text on a website.
  3. Click on "Add Note"
  4. Try to write text in the note field in the sidebar on the right.
  5. If the key you pressed is a vim-vixen shortcut, it will trigger even though you are expecting to write in what amounts to an input.

System configuration

Console logs

Any relevant log in developer tools: