Editor

import { Editor } from '@hanzo/ui'

Default

A bold/italic/list toolbar above a blank contentEditable field.

export function Default() {
  return (
    <YStack width="100%" minH={280} items="center" justify="center">
      <Editor width="100%" maxW={480} />
    </YStack>
  )
}

With content

Starts the region with existing HTML rather than empty.

Hello there — start editing.

export function WithContent() {
  return (
    <YStack width="100%" minH={280} items="center" justify="center">
      <Editor width="100%" maxW={480} value="<p><strong>Hello</strong> there — <em>start editing</em>.</p>" />
    </YStack>
  )
}

Custom placeholder

Shown by the surrounding app's CSS when the field is empty.

export function CustomPlaceholder() {
  return (
    <YStack width="100%" minH={280} items="center" justify="center">
      <Editor width="100%" maxW={480} placeholder="Write your notes here..." />
    </YStack>
  )
}

Types

export type EditorCommand = 'bold' | 'italic' | 'insertUnorderedList' | 'insertOrderedList'

export interface EditorProps extends Omit<YStackProps, 'children' | 'onChange'> {
  /** The region's HTML. Omit it and the region keeps its own content. */
  value?: string
  onChange?: (value: string) => void
  placeholder?: string
}

Exports

Editortype EditorCommandtype EditorProps