Editor

The Editor component provides a unified interface for rich text editing using either Quill or Jodit engines. It supports multiple configurations (full/minimal), controlled value, and consistent onChange behavior.

Overview

• Engines: quill or jodit
• Configs: full, minimal
• Controlled value with onChange
• Placeholder support
• Simple API that forwards engine-specific options

Basic Usage

import { useState } from 'react'
import { Editor } from '@/components/molecules'

function MyComponent() {
  const [quillValue, setQuillValue] = useState('')
  const [joditValue, setJoditValue] = useState('')

  return (
    <div className='space-y-6'>
      {/* Quill Full */}
      <Editor
        engine='quill'
        config='full'
        value={quillValue}
        onChange={setQuillValue}
        placeholder='Write content with Quill (Full)...'
      />

      {/* Jodit Minimal */}
      <Editor
        engine='jodit'
        config='minimal'
        value={joditValue}
        onChange={setJoditValue}
        placeholder='Write content with Jodit (Minimal)...'
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
engine	'quill' | 'jodit'	'quill'	Editor engine to use
config	'full' | 'minimal'	'full'	Preset toolbar configuration
value	string	''	Controlled HTML content value
onChange	(html: string) => void	-	Called with HTML when content changes (Quill on text-change, Jodit on blur)
placeholder	string	-	Placeholder text
...props	any	-	Forwarded to the underlying engine (Quill/Jodit) config

Engines & Configs

Quill

• Theme: snow
• full toolbar:
  • Headings, font, size
  • Bold, italic, underline, strike, blockquote, code-block
  • Color/background, sub/superscript
  • Lists (ordered/bullet), indent, direction, align
  • Link, image, video, formula, clean
• minimal toolbar:
  • Bold, italic, underline
  • Ordered/bullet list
  • Link, image

Usage:

<Editor engine='quill' config='full' value={value} onChange={setValue} />

Notes:

• onChange fires on every Quill text-change with innerHTML.
• External updates are applied if value differs from current content.
• Import style: Quill snow CSS is loaded in component (quill/dist/quill.snow.css).

Jodit

• full buttons: source, bold/italic/underline/strike, eraser, lists (ul/ol), outdent/indent, font, fontsize, brush, paragraph, image, video, table, link, align, undo/redo, hr, copyformat, fullsize, selectall, print, about
• minimal buttons: bold, italic, underline, ul, ol, link

Usage:

<Editor engine='jodit' config='minimal' value={value} onChange={setValue} />

Notes:

• onChange is invoked on blur with the current HTML (Jodit default is very chatty; this keeps a simple contract).
• You can pass extra Jodit config via spread props.

Examples (from InputEditorPage)

// Quill Full
<Editor engine='quill' config='full' value={quillValue} onChange={setQuillValue} placeholder='Tulis konten dengan Quill (Full)...' />

// Quill Minimal
<Editor engine='quill' config='minimal' value={quillValue} onChange={setQuillValue} placeholder='Tulis konten dengan Quill (Minimal)...' />

// Jodit Full
<Editor engine='jodit' config='full' value={joditValue} onChange={setJoditValue} placeholder='Tulis konten dengan Jodit (Full)...' />

// Jodit Minimal
<Editor engine='jodit' config='minimal' value={joditValue} onChange={setJoditValue} placeholder='Tulis konten dengan Jodit (Minimal)...' />

Styling

• Quill snow theme is imported by the component.
• Jodit styles are bundled with jodit-react.
• Container expands to full width and supports overflow.

Accessibility

• Produces editable regions compatible with screen readers.
• Provide descriptive placeholders and context labels.
• Ensure sufficient contrast for toolbar icons (engine themes).

Best Practices

1. Keep value as the single source of truth; persist HTML as needed.
2. Use minimal config where full formatting is not required.
3. Validate or sanitize HTML on the server if rendering user-generated content.
4. Avoid blocking synchronous heavy operations inside onChange.
5. For large docs, consider debouncing onChange before saving.

Related Components

• QuillEditor (atom) – concrete Quill implementation
• JoditEditor (atom) – concrete Jodit implementation
• Card – container used in examples