Inline Suggestion

About this piece

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

Usage

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

import { Editor8 } from "@/components/beste/piece/editor8";

<Editor8
  prefix="const greet = (name: string) => `Hello, "
  ghost="${name}!`;"
/>

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.

return greet(name);

Ayşe

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

:fi

Inline :shortcode typing with an autocomplete dropdown showing emoji previews.

const total = items.reduce(sum, i) => sum + i.price);

Expected 2 arguments, but got 1.ts(2554)

Code line with a rose wavy underline on the offending token above an alert card with message and source code.

const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.

Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.

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

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