philc / philc/vimium

Find mode not working within HTML <code> blocks that separate spaces with <span>s

Open
#4,623 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
27k
Forks
2.6k
PR merge metrics
No merged PRs in 30d

Description

Bug Description

Entering find mode via /, I am unable to match text with spaces in HTML code blocks. Looking into the code, the HTML doesn't actually connect the text (typically for styling reasons like so):

<span class="line">
  <span style="color: var(--color-pink-400)">npm</span><span style="color: var(--color-sky-300)"> install</span>
  <span style="color: var(--color-sky-300)"> tailwindcss</span>
  <span style="color: var(--color-sky-300)"> @tailwindcss/vite</span>
</span>

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://tailwindcss.com/docs/installation/using-vite
  2. Type / to "Enter find mode"
  3. Type npm install to try to find the text npm install tailwindcss @tailwindcss/vite

Image

Image

Browser and Vimium version

Chrome Version: 132.0.6834.160 (Official Build) (64-bit) (cohort: Stable)
Vimium Version: 2.1.2

Notes

I've tested with "Treat find queries as JavaScript regular expressions" set to true and false, still doesn't work. I'm wondering if there's some regex I can remember to include that matches spans, but am thinking it's probably something more complex considering the spans split up the text.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue on the Tailwind CSS installation page by entering find mode with / and searching for npm install. Start at Vimium’s find-mode entry point and trace how text is read across HTML code-block spans. Done means a normal find query can match text separated by nested <span> elements, with regex mode both enabled and disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.