Your First Editor

"use client"
 
import { useState } from 'react'
import { RichTextEditor } from '@inkstream/react-editor'
import { availablePlugins } from "@inkstream/starter-kit"
import { headingPlugin } from '@inkstream/heading'
import { linkBubbleWrapperPlugin } from '@inkstream/link-bubble'
 
const PLUGINS = [
  availablePlugins.paragraph,
  availablePlugins.bold,
  availablePlugins.italic,
  availablePlugins.underline,
  availablePlugins.strike,
  availablePlugins.textColor,
  availablePlugins.highlight,
  availablePlugins.alignment,
  availablePlugins.lists,
  availablePlugins.superscript,
  availablePlugins.subscript,
  availablePlugins.blockquote,
  availablePlugins.codeBlock,
  availablePlugins.image,
  availablePlugins.horizontalLine, 
  availablePlugins.history,
  linkBubbleWrapperPlugin
]
 
const TOOLBAR = [
  'heading', '|',
  'bold', 'italic', 'underline', 'strike', '|',
  'textColor', 'highlight', '|',
  'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
  'lists', '|',
  'blockquote', 'code', 'image', 'link', '|',
  'horizontalLine', 'undo', 'redo',
]
 
export default function FullEditor() {
  const [html, setHtml] = useState('')
 
  return (
    <div>
      <RichTextEditor
        initialContent="<p>Start typing...</p>"
        plugins={PLUGINS}
        toolbarLayout={TOOLBAR}
        onChange={setHtml}
      />
      <pre style={{ marginTop: 16, fontSize: 12 }}>{html}</pre>
    </div>
  )
}