# Changelog

All notable changes to `erl-mathtextx-editor` will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [0.2.3] - 2026-05-20

### Fixed

- **MathLive Latex Normalization** — Crash saat `latex` attribute bukan string
  - `MathTypeDialog.tsx` — `latex.trim is not a function` → semua `setLatex` sekarang pakai `normalizeLatex()` guard
  - `MathFieldView.tsx` — `props.updateAttributes({ latex })` selalu di-normalize ke string
  - Auto-fix: jika `latex` attribute terisi object/event (bukan string), otomatis dikoreksi ke string kosong
  - React `flushSync` warning dihindari dengan `queueMicrotask` untuk normalization effect
- **MathTypeDialog** — Defensive guard pada `initialLatex` prop dan semua `setLatex` calls
- **MathFieldView** — Sync effect `props.node.attrs.latex` memakai `normalizeLatex()` + `queueMicrotask`

## [0.2.2] - 2026-05-20

### Added

- **🖐️ Draggable Dialogs** — Semua dialog (MathType, Link, Image, Table, Cell Properties, Table Properties, Table Templates) sekarang bisa di-drag bebas
  - Hook `useDraggable` untuk drag behavior yang konsisten
  - Drag handle di header setiap dialog
  - Posisi dialog tersimpan saat drag
- **🌐 Localized Table Dialogs** — Dialog insert/edit table dalam Bahasa Indonesia
  - Insert Table, Table Properties, Cell Properties, Table Templates
  - Label, placeholder, dan pesan error diterjemahkan
- **🔣 Enhanced Math Symbols** — Symbol palette diperluas
  - Tambahan simbol matematika untuk kategori yang ada
  - MathToolbar dengan konfigurasi yang lebih fleksibel

### Changed

- **💅 TipTap Table CSS** — Perbaikan styling table untuk tampilan yang lebih rapi
  - Border, spacing, dan hover state yang lebih konsisten
  - Resizable column handle yang lebih jelas
  - Selected cell highlight yang lebih visible
- **🔧 MainToolbar Refactoring** — Arsitektur toolbar data-driven
  - Konfigurasi toolbar via `toolbar-config.ts` (Basic/Advanced/Olimpiade)
  - Icon SVG ter-ekstrak di `toolbar-icons.tsx`
  - Dialog state management terpusat via `useDialogManager` hook
  - Kode lebih bersih dan mudah maintain (~430 lines, turun dari 1311)

### Fixed

- **IndentBackspace** — Perbaikan backspace behavior di awal paragraph dengan indentasi
- **Serializer** — Improved HTML serialization untuk table elements

## [0.2.0] - 2026-05-13

### Added

- **🏆 Olimpiade Toolbar Mode** — Toolbar khusus untuk olimpiade/kompetisi matematika
  - Mode switch 3 opsi: Basic / Advanced / Olimpiade
  - Toolbar minimal: Undo/Redo, Bold/Italic/Underline, Paragraph/H1/H2, Lists, Math Formula, Block Math
  - Math Toolbar khusus olimpiade: Basic, Relation, Set (extended), Greek, Structure
  - Block Math button untuk insert display-style math node langsung
- **Block Math Direct Insert** — Prop `onInsertBlockMath` untuk insert block math tanpa dialog
- **Empty Inline Math Visibility** — Empty math fields sekarang terlihat sebagai kotak dashed abu-abu
  - `min-width: 50px`, `min-height: 26px` untuk empty math inline

### Fixed

- **Math Node Serialization** — Perbaikan kritis: DOMPurify strip `latex` attribute
  - `addAttributes` sekarang render sebagai `data-latex` / `data-display` (bukan `latex` / `display`)
  - `data-display` ditambahkan ke `ALLOWED_ATTR` di DOMPurify
  - Math nodes persist saat tab switch editor ↔ viewer
- **MathTypeDialog Enter Conflict** — Enter tidak lagi submit dialog
  - Solusi: `\sqrt` + Enter → MathLive auto-convert ke √, dialog tetap terbuka
  - Submit hanya via klik tombol "Sisipkan"
- **ESLint Cleanup** — Fixed `let` → `const` di MathFieldView, fixed regex escape di MathTypeDialog
- **Edit Button Overlap** — Tombol Edit pada math node hanya muncul saat hover, hilang saat focus

### Changed

- **Toolbar Cleanup** — Advanced mode jadi lebih ringkas
  - Image editing (Edit, Wrap) dipindah ke right-click context menu
  - Table operation buttons dipindah ke Table Operations dropdown
- **Ctrl+M** — Insert inline math langsung (tanpa dialog MathType)

## [0.1.9] - 2026-04-01

### Fixed
- **README Not Showing on NPM** — Added `README.md`, `CHANGELOG.md`, and `LICENSE` to `files` array in package.json
- **TypeScript Errors** — Added proper type annotations to `CustomTableView` class parameters

### Changed
- **Package Files** — Expanded `files` field from `["dist"]` to `["dist", "README.md", "CHANGELOG.md", "LICENSE"]`
- **Version Bump** — 0.1.8 → 0.1.9 (previous version had missing README on npm)

---

## [0.1.8] - 2026-04-01

### Fixed
- **Documentation Consistency** — Updated all .md files to reflect current version
- **CONTRIBUTING.md** — Fixed duplicate "Development Workflow" section and numbering issues

### Changed
- **Version Bump** — 0.1.7 → 0.1.8 (previous version already published)
- **Documentation Sync** — All markdown files now reference v0.1.8 consistently

---

## [0.1.7] - 2026-03-31

### Added
- **Code Block Syntax Highlighting** — Added `@tiptap/extension-code-block-lowlight` with lowlight for syntax highlighting in code blocks
  - Supports 100+ programming languages
  - Dark theme with syntax colors (keywords, strings, numbers, comments, functions, etc.)
  - Works in both editor and viewer
- **Table Column Resize** — TipTap built-in `resizable: true` for column width adjustment
- **Cell Selection Highlight** — Light blue background with dashed border when selecting multiple cells for merge
- **Collapsible Details/Summary** — CSS styles ready for TipTap v3 details extension

### Fixed
- **Table Selection Visibility** — Fixed `.selectedCell` CSS selector to work with TipTap's default table structure
- **DOM Nesting Warning** — Removed invalid `<div>` inside `<tbody>` structure

### Changed
- **Removed Duplicate Dependencies** — Removed 16 packages already included in `@tiptap/starter-kit`:
  - `@tiptap/extension-bold`, `bullet-list`, `code-block`, `document`
  - `@tiptap/extension-dropcursor`, `gapcursor`, `hard-break`, `heading`
  - `@tiptap/extension-history`, `horizontal-rule`, `italic`, `list-item`
  - `@tiptap/extension-ordered-list`, `paragraph`, `strike`, `text`
- **Code Organization** — Extracted inline extensions to separate files:
  - `IndentBackspace` → `src/extensions/IndentBackspace.ts`
  - `SlashGraph` → `src/extensions/SlashGraph.ts`

### Internal
- Cleaner dependency tree with reduced bundle overhead
- Better code maintainability with separated extension files

## [0.1.6] - 2026-03-31

### Fixed
- **Backspace Join Behavior** — Backspace at start of paragraph now properly joins with previous paragraph when no indentation exists
- **Tab Key Dual Behavior** — Tab now inserts 4 spaces when cursor is in the middle of a paragraph, and indents paragraph when cursor is at the start
- **Tab Character Rendering** — Added `white-space: pre-wrap` to editor and viewer CSS for consistent whitespace display
- **Indent Extension Conflict** — Created CustomIndent extension to override base package Tab keyboard shortcuts that were conflicting with custom handlers

### Added
- **CustomIndent Extension** — New extension that extends `@weiruo/tiptap-extension-indent` and removes its Tab keyboard shortcuts to prevent conflicts
- **Improved IndentBackspace** — Now checks actual indent level before attempting outdent, allowing default joinBackward behavior when no indentation exists

### Changed
- Enhanced Tab key behavior for better UX (similar to Notion/modern editors)
- Improved paragraph joining behavior to match expected editor behavior

## [0.1.5] - 2026-03-26

### Added
- **Custom CSS Tooltips** - Replace native browser tooltips
  - Instant appearance (no delay)
  - Dark-themed with smooth fade-in animation
  - Arrow indicator pointing to button
  - Consistent styling across all browsers
- **Tactile Button Feedback** - Physical feedback on click
  - Toolbar buttons: scale(0.96) on click
  - Math buttons: scale(0.96) on click
  - Dialog buttons: scale(0.98) on click
  - Provides satisfying micro-interaction

### Changed
- Use `data-tooltip` attribute instead of native `title`
- Enhanced button `:active` states across all components

## [0.1.4] - 2026-03-26

### Added
- **Export MathTypeDialog** - Now available for standalone import
  - `import { MathTypeDialog } from 'erl-mathtextx-editor'`
  - Export both component and `MathTypeDialogProps` type
- **Export TemplatePanel** - Now available for standalone import
  - `import { TemplatePanel } from 'erl-mathtextx-editor'`
  - Export both component and `TemplatePanelProps` type

### Changed
- **Package naming consistency** - All documentation now uses `erl-mathtextx-editor` (not `@mathtextx/editor`)
- **Static imports** - MathTypeDialog and TemplatePanel now statically imported in MathTextXEditor.tsx
- **Removed Suspense wrappers** - No longer needed for static imports
- **Build warnings fixed** - Eliminated dynamic/static import conflict warnings

### Fixed
- Build warnings about dual import patterns
- Documentation inconsistencies across README, docs, and integration guides

### Internal
- ImageInsertDialog remains internal (not exported)
- Optimized bundle structure

## [0.1.3] - 2026-03-19

### Published
- Initial release to npm registry
- Package: `erl-mathtextx-editor@0.1.3`

## [0.1.0] - 2026-03-03

### Added

- **MathTextXEditor** — React component utama untuk rich text + math editing
  - TipTap/ProseMirror editor engine
  - MathLive visual math input (inline & block)
  - Toolbar: bold, italic, underline, strike, heading, lists, table, image, link, code, blockquote
  - Math toolbar: fraction, sqrt, power, subscript, sum, integral, limit, matrix, symbols
  - Symbol palette dengan 100+ simbol matematika
  - Graph extension (function plotting via Function Plot)
  - Keyboard shortcut: Ctrl+S untuk save
  - Slash command: `/graph` untuk insert grafik

- **ContentViewer** — Komponen read-only untuk menampilkan konten di frontend quiz/ujian
  - XSS sanitization via DOMPurify
  - Auto-render rumus matematika via KaTeX
  - Standalone CSS (`content-style.css`) untuk styling konsisten

- **Template Library** — 60+ preset rumus matematika
  - Kategori: Algebra, Geometri, Trigonometri, Kalkulus, Statistik, Fisika, Kimia
  - Filter by level: SD, SMP, SMA
  - Utility functions: `getTemplatesByLevel()`, `getTemplatesByCategory()`, `getTemplateCategories()`

- **Serializer Utilities**
  - `getHTML()` — export konten sebagai HTML
  - `toCompatibleHTML()` — konversi ke format CKEditor-compatible
  - `sanitizeCKEditorHTML()` — bersihkan HTML dari CKEditor

- **Build Output**
  - ES Module (`mathtextx-editor.js`)
  - UMD (`mathtextx-editor.umd.cjs`)
  - TypeScript declarations (`.d.ts`)
