Regex Input

About this piece

Regex input with slashes, violet flags, and a tabular match-count pill on the right.

Usage

The import and the props worth knowing about, in one place.

import { Editor21 } from "@/components/beste/piece/editor21";

<Editor21
  pattern="\b\w+@\w+\.com\b"
  flags="gi"
  matches={12}
/>

onboarding3/12

activation

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

The implmentation ships on Friday.

Sentence with a rose wavy underline on a misspelling and a suggestions dropdown below.

1--primary:  #f43f5e;
2--accent:  #8b5cf6;
3--surface:  #0ea5e9;

CSS lines with inline color swatch squares next to each hex value.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.