Typography and Text

import {
  createEditorSystem,
  RichText,
  richTextExtension,
  boldExtension,
  italicExtension,
  underlineExtension,
  fontFamilyExtension,
  fontSizeExtension,
  lineHeightExtension,
  textColorExtension,
  textHighlightExtension,
} from '@lyfie/luthor-headless';

const extensions = [
  richTextExtension,
  boldExtension,
  italicExtension,
  underlineExtension,
  fontFamilyExtension,
  fontSizeExtension,
  lineHeightExtension,
  textColorExtension,
  textHighlightExtension,
] as const;

const { Provider, useEditor } = createEditorSystem<typeof extensions>();

function Toolbar() {
  const { commands, activeStates } = useEditor();
  return (
    <div>
      <button onClick={() => commands.toggleBold?.()} aria-pressed={activeStates.bold === true}>Bold</button>
      <button onClick={() => commands.toggleItalic?.()} aria-pressed={activeStates.italic === true}>Italic</button>
      <button onClick={() => commands.setTextColor?.('#2563eb')}>Blue</button>
      <button onClick={() => commands.setTextHighlight?.('#fef08a')}>Highlight</button>
    </div>
  );
}

export function App() {
  return (
    <Provider extensions={extensions}>
      <Toolbar />
      <RichText placeholder="Type styled content..." />
    </Provider>
  );
}