pdeditor-basic

Lightweight Visual Math Editor — Basic Formula Input

Visual math editor widget berbasis React untuk pembuatan Soal & Jawaban matematika — tanpa template lanjutan atau formatting berlebihan.

📦 Installation

npm install pdeditor-basic

🚀 Quick Start

Basic Editor

import { MathTextXEditor } from 'pdeditor-basic'
import 'pdeditor-basic/styles'

function App() {
  return (
    <MathTextXEditor
      onChange={(html) => console.log(html)}
      placeholder="Tulis soal di sini..."
    />
  )
}

Content Viewer (Read-Only)

import { ContentViewer } from 'pdeditor-basic/viewer'
import 'pdeditor-basic/viewer/styles'

function QuestionCard({ questionHtml }) {
  return <ContentViewer content={questionHtml} />
}

✨ Fitur

📝 Rich Text

• Bold, Italic, Underline
• Heading 1 & 2, Paragraph
• Bullet list, Ordered list, Indent, Outdent
• Link, Image (drag-drop + paste + upload), Table

🎯 Visual Math

• Inline Math — rumus sejajar teks (Ctrl+M)
• Block Math — rumus display di baris sendiri
• Equation Editor — dialog input formula dengan MathLive
• Math Toolbar — tombol cepat: pangkat, pecahan, akar, Greek, kalkulus, matriks, dll
  • Basic, Relation, Set, Calc, Structure (accordion)

👁️ Content Viewer

• Read-only renderer untuk frontend ujian/quiz
• Auto-render KaTeX + XSS sanitization (DOMPurify)

⌨️ Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+B/I/U | Bold / Italic / Underline | | Ctrl+Z/Y | Undo / Redo | | Ctrl+M | Insert inline math | | Ctrl+K | Insert/edit link |

🛠️ Usage

Edit Existing Content

<MathTextXEditor
  content={existingHtml}
  onChange={(html) => console.log('Updated:', html)}
/>

With Image Upload

<MathTextXEditor
  onImageUpload={async (file) => {
    const formData = new FormData()
    formData.append('image', file)
    const res = await fetch('/api/upload', { method: 'POST', body: formData })
    const data = await res.json()
    return data.url
  }}
/>

Multi-Instance (Soal + Pilihan Jawaban)

<MathTextXEditor
  content={question}
  onChange={setQuestion}
  placeholder="Tulis pertanyaan..."
  minHeight="150px"
/>
{options.map((opt) => (
  <MathTextXEditor
    key={opt.id}
    content={opt.content}
    onChange={(html) => setOptions(...)}
    placeholder={`Jawaban ${opt.id}...`}
    minHeight="60px"
  />
))}

Next.js (App Router)

'use client'
import dynamic from 'next/dynamic'
import 'pdeditor-basic/styles'

const MathTextXEditor = dynamic(
  () => import('pdeditor-basic').then((mod) => mod.MathTextXEditor),
  { ssr: false }
)

📋 API Props

MathTextXEditor

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial HTML | | onChange | (html: string) => void | — | Callback on change | | placeholder | string | 'Tulis soal...' | Placeholder | | editable | boolean | true | Read-only mode | | minHeight | string | '200px' | Minimum height | | maxHeight | string | — | Maximum height (scroll) | | autoFocus | boolean | false | Auto-focus | | onImageUpload | (file: File) => Promise<string> | — | Image upload handler | | className | string | — | Additional CSS class |

ContentViewer

| Prop | Type | Description | |------|------|-------------| | content | string | HTML content (required) | | className | string | Additional CSS class |

📦 Exports

Main Package (pdeditor-basic)

import { MathTextXEditor }  from 'pdeditor-basic'
import { ContentViewer }    from 'pdeditor-basic/viewer'
import { MainToolbar }      from 'pdeditor-basic'
import { MathToolbar }      from 'pdeditor-basic'
import { MathTypeDialog }   from 'pdeditor-basic'
import { getHTML }          from 'pdeditor-basic'
import { sanitizeCKEditorHTML, toCompatibleHTML } from 'pdeditor-basic'

import 'pdeditor-basic/styles'

✅ Import Paths

| Import | Resolves to | |--------|-------------| | pdeditor-basic | dist/pdeditor-basic.js | | pdeditor-basic/styles | dist/assets/pdeditor-basic.css | | pdeditor-basic/viewer | dist/viewer.js | | pdeditor-basic/viewer/styles | dist/viewer-styles.js |

⚠️ Troubleshooting

| Error | Solution | |-------|----------| | Can't resolve 'pdeditor-basic' | npm install pdeditor-basic | | window is not defined (Next.js) | Gunakan dynamic(..., { ssr: false }) | | MathLive fonts error | Set (window as any).MATHLIVE_FONTS_PATH = '/fonts' |

🛠️ Tech Stack

• UI Framework: React 18+
• Editor Engine: TipTap / ProseMirror
• Math Input: MathLive (WYSIWYG)
• Math Rendering: KaTeX
• XSS Protection: DOMPurify
• Build: Vite (Library Mode — ES + UMD)

📄 License

MIT