TODO Comment

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

TODO Comment

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

Usage

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

import { Editor28 } from "@/components/beste/piece/editor28";

<Editor28
  comments={[
    {
      "tag": "TODO",
      "text": "migrate to server components"
    },
    {
      "tag": "FIXME",
      "text": "handles null state poorly"
    },
    {
      "tag": "NOTE",
      "text": "revisit once design lock lands"
    }
  ]}
/>

More Editor pieces

View all Editor
AI Suggestion
const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

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

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

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

Color Preview

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

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

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

Whitespace Markers

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

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.