shadcn.io is not affiliated with official shadcn/ui
Regex Pattern Command Menu Block for Svelte
A regex helper's command menu shown open over a drawn log viewer: eight patterns, a pane with the pattern in mono, an editable sample text with every match marked and counted live, and a Copy pattern button that really copies.
Installation
Overview
Find a regular expression and try it on your own text with this regex command menu for Svelte with Ark UI. It opens from a request log in Grepwren, a regex helper, whose header holds an outline field with its ⌘ K cap, and the log is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: the list holds eight patterns (email, web address, IPv4, ISO date, time of day, semantic version, hex colour and UUID) each with a line in plain words, and the pane follows the highlighted one. It shows the pattern in mono with a Copy pattern button, a Textarea of sample text you can edit, and the same text again with every match marked and counted in words, "3 matches". Each pattern keeps its own sample, and a Reset button brings the first one back. Enter copies the pattern and sets it as the log's filter. On a phone the pane sits under the list. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same patterns, samples and query. For developer tools, log viewers and any field that asks for a pattern.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a log viewer, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a search or an edited sample in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the live match work, and is it safe?
Each pattern is a regular expression literal in the source, and the pane runs matchAll with it over the sample on every keystroke, then cuts the sample into plain stretches and matches (piecesOf) and marks the matches. The text you type is only ever the sample, never a pattern, so nothing you enter can be compiled into a slow expression. The sample is capped at 400 characters, and the count is spoken once typing pauses for about half a second.
Are the marks readable without colour?
Yes. A match is set in a mark element with a light tint and an underline, so it does not rely on colour, and the sample stays plain text for a screen reader. The count above it is text, "No matches", "1 match" or "3 matches", and the marked text sits in a region you can reach and scroll with the keyboard.
What does Copy pattern copy?
The pattern as you would write it in code, for example /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/g, through the Copy pattern button or Enter on the row, with navigator.clipboard.writeText. Enter also sets it as the filter shown on the drawn log, and the status line says which pattern was copied. If the browser refuses the clipboard, the line says that instead.
What stays local, and how do I wire it?
The patterns, the samples and the log are typed. The matching is real, in the browser, and the clipboard write is real. In your app replace PATTERNS with your own list, set a pattern in your filter field in pick, and if users can type their own pattern, compile it in a try block, cap the sample's length and run it off the main thread so a bad expression cannot freeze the page.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the patterns and the pane follows, Enter copies the pattern, and Tab reaches the Copy pattern button, Reset sample and the sample. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.