erl-mathtextx-editor 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -0,0 +1,157 @@
+# 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.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`)

package/README.md

@@ -13,16 +13,15 @@ Embeddable visual math editor widget untuk CMS dan platform edukasi. User tidak
 
 - 🎯 **Visual Math Keyboard** — Klik simbol, operator, template formula
 - 📝 **Rich Text Editor** — Bold, italic, tables, lists, links, images
-- 🧮 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry
-- 👁️ **Content Viewer** — Read-only renderer dengan KaTeX
-- 🎨 **Table Editor** — 6 professional table templates, column resize, cell selection
-- 🖥️ **Code Blocks** — Syntax highlighting untuk berbagai bahasa pemrograman
-- 📋 **Collapsible Sections** — Details/summary untuk konten tersembunyi
-- ⌨️ **Keyboard Shortcuts** — Ctrl+K (link), Ctrl+Shift+T (table), Ctrl+S (save)
-- 📊 **Graph Plotting** — Function plotting via Function Plot
-- 🔒 **XSS Protection** — DOMPurify sanitization
-- 💻 **Code Blocks** — Syntax highlighting with 100+ languages
-- 📋 **Collapsible Sections** — Details/summary for hidden content
+- 🧮 **Equation Editor** — Dialog MathType-style dengan tab, grid, KaTeX preview
+- 📋 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry, matrix
+- 🖼️ **Free-form Image Drag** — Drag gambar ke posisi bebas (pixel-perfect)
+- 📄 **DOCX Import** — Import file .docx via mammoth.js (toolbar + drag-drop)
+- 🗂️ **Google Docs Paste** — Paste dari Google Docs (equations + document) auto-cleaned
+- 👁️ **Content Viewer** — Read-only renderer dengan KaTeX + DOMPurify
+- 🎨 **Table Editor** — 6 templates, column resize, cell merge/split
+- 🔒 **XSS Protection** — DOMPurify sanitization di paste + serializer
+- 🛡️ **Error Boundary** — Anti white-screen crash protection
 
 ---
 
@@ -36,7 +35,7 @@ npm install erl-mathtextx-editor
 
 ## 🚀 Quick Start
 
-### Basic Usage
+### 1. Basic Editor
 
 ```tsx
 import { MathTextXEditor } from 'erl-mathtextx-editor'
@@ -52,14 +51,19 @@ function App() {
 }
 ```
 
-### With Save Handler
+### 2. Editor dengan Save Handler
 
 ```tsx
-import { MathTextXEditor } from 'erl-mathtextx-editor'
+import { useRef } from 'react'
+import { MathTextXEditor, getHTML } from 'erl-mathtextx-editor'
 import 'erl-mathtextx-editor/styles'
 
 function QuestionForm() {
-  const handleSave = (html) => {
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  const handleSave = () => {
+    if (!editorRef.current) return
+    const html = getHTML(editorRef.current)
     fetch('/api/questions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -67,32 +71,210 @@ function QuestionForm() {
     })
   }
 
+  return (
+    <div>
+      <MathTextXEditor ref={editorRef} placeholder="Tulis pertanyaan..." onSave={handleSave} />
+      <button onClick={handleSave}>Simpan</button>
+    </div>
+  )
+}
+```
+
+### 3. Edit Existing Content
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditQuestion({ existingHtml }: { existingHtml: string }) {
   return (
     <MathTextXEditor
-      onChange={(html) => console.log(html)}
-      onSave={handleSave}
-      placeholder="Tulis pertanyaan..."
+      content={existingHtml}
+      onChange={(html) => console.log('Updated:', html)}
     />
   )
 }
 ```
 
-### Content Viewer (Read-Only)
+### 4. Read-Only Mode (Viewer)
 
 ```tsx
 import { ContentViewer } from 'erl-mathtextx-editor/viewer'
 import 'erl-mathtextx-editor/viewer/styles'
 
-function QuestionCard({ questionHtml }) {
+function ExamQuestion({ questionHtml }: { questionHtml: string }) {
+  return <ContentViewer content={questionHtml} />
+}
+```
+
+### 5. Multi-Instance (Soal + Pilihan Jawaban)
+
+```tsx
+import { useState } from 'react'
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function MultipleChoiceForm() {
+  const [question, setQuestion] = useState('')
+  const [options, setOptions] = useState(
+    ['A', 'B', 'C', 'D'].map((id) => ({ id, content: '' }))
+  )
+
   return (
-    <div className="question-card">
-      <h3>Soal 1</h3>
-      <ContentViewer content={questionHtml} />
+    <div>
+      <label>Pertanyaan:</label>
+      <MathTextXEditor
+        content={question}
+        onChange={setQuestion}
+        placeholder="Tulis pertanyaan..."
+        minHeight="150px"
+      />
+      {options.map((opt) => (
+        <div key={opt.id}>
+          <label>Opsi {opt.id}:</label>
+          <MathTextXEditor
+            content={opt.content}
+            onChange={(html) => setOptions((prev) => prev.map((o) => o.id === opt.id ? { ...o, content: html } : o))}
+            placeholder={`Jawaban ${opt.id}...`}
+            minHeight="60px"
+          />
+        </div>
+      ))}
     </div>
   )
 }
 ```
 
+### 6. Next.js (App Router)
+
+```tsx
+'use client'
+import dynamic from 'next/dynamic'
+import 'erl-mathtextx-editor/styles'
+
+const MathTextXEditor = dynamic(
+  () => import('erl-mathtextx-editor').then((mod) => mod.MathTextXEditor),
+  { ssr: false }
+)
+
+export default function EditorPage() {
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal matematika..."
+      onChange={(html) => console.log(html)}
+      minHeight="300px"
+    />
+  )
+}
+```
+
+### 7. Vite + React
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function App() {
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onChange={(html) => console.log(html)}
+    />
+  )
+}
+export default App
+```
+
+---
+
+## 🧰 Image Upload
+
+Editor mendukung upload gambar dari: **Insert dialog**, **drag-drop**, **paste dari clipboard**, dan **DOCX import**. Semuanya melalui satu callback `onImageUpload`.
+
+### Basic Upload
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditorWithUpload() {
+  const handleImageUpload = async (file: File): Promise<string> => {
+    const formData = new FormData()
+    formData.append('image', file)
+    const res = await fetch('/api/upload', { method: 'POST', body: formData })
+    if (!res.ok) throw new Error('Upload failed: ' + res.statusText)
+    const data = await res.json()
+    return data.url // Expected: { "url": "https://cdn.example.com/img.jpg" }
+  }
+
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onImageUpload={handleImageUpload}
+    />
+  )
+}
+```
+
+### Re-upload Gambar dari Paste (Google Docs / Website)
+
+```tsx
+import { MathTextXEditor } from 'erl-mathtextx-editor'
+import 'erl-mathtextx-editor/styles'
+
+function EditorWithPasteReupload() {
+  const handleImageUpload = async (file: File): Promise<string> => {
+    const formData = new FormData()
+    formData.append('image', file)
+    const res = await fetch('/api/upload', { method: 'POST', body: formData })
+    return (await res.json()).url
+  }
+
+  const handleBeforePasteHTML = async (html: string): Promise<string> => {
+    // Download + re-upload external images from pasted HTML
+    const imgRegex = /<img\s+[^>]*src="([^"]+)"[^>]*>/gi
+    const replacements: Array<[string, string]> = []
+    let match
+
+    while ((match = imgRegex.exec(html)) !== null) {
+      const src = match[1]
+      if (src.startsWith('data:') || src.includes('cdn.example.com')) continue
+      try {
+        const blob = await (await fetch(src)).blob()
+        const file = new File([blob], 'image.' + (blob.type.split('/')[1] || 'jpg'))
+        replacements.push([src, await handleImageUpload(file)])
+      } catch { console.warn('Skip image:', src) }
+    }
+
+    let result = html
+    for (const [oldSrc, newSrc] of replacements) result = result.replaceAll(oldSrc, newSrc)
+    return result
+  }
+
+  return (
+    <MathTextXEditor
+      placeholder="Tulis soal..."
+      onImageUpload={handleImageUpload}
+      onBeforePasteHTML={handleBeforePasteHTML}
+    />
+  )
+}
+```
+
+### Base64 Fallback (Tanpa Server)
+
+```tsx
+const handleImageUpload = async (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+// ⚠️ Base64 hanya cocok untuk gambar < 100KB. Untuk produksi, gunakan upload ke server.
+```
+
 ---
 
 ## 📋 Props API
@@ -102,15 +284,17 @@ function QuestionCard({ questionHtml }) {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `content` | `string` | `''` | Initial HTML content |
-| `onChange` | `(html: string) => void` | — | Callback on content change |
+| `onChange` | `(html: string) => void` | — | Callback on content change (debounced 150ms) |
 | `onSave` | `(html: string) => void` | — | Callback on Ctrl+S |
 | `onImageUpload` | `(file: File) => Promise<string>` | — | Custom image upload handler |
+| `onBeforePasteHTML` | `(html: string) => Promise<string>` | — | Transform pasted HTML (re-upload images) |
 | `placeholder` | `string` | `'Tulis soal...'` | Placeholder text |
 | `minHeight` | `string` | `'200px'` | Minimum editor height |
 | `maxHeight` | `string` | — | Maximum editor height |
 | `autoFocus` | `boolean` | `false` | Auto-focus editor on mount |
 | `toolbarMode` | `'basic' \| 'advanced'` | `'basic'` | Toolbar preset |
-| `educationLevel` | `'sd' \| 'smp' \| 'sma' \| 'all'` | `'all'` | Filter math templates by level |
+| `editable` | `boolean` | `true` | Set false for read-only mode |
+| `className` | `string` | — | Additional CSS class |
 
 ### ContentViewer
 
@@ -127,17 +311,35 @@ function QuestionCard({ questionHtml }) {
 
 ```tsx
 import {
-  MathTextXEditor,
-  ContentViewer,
-  getHTML,
-  toCompatibleHTML,
-  sanitizeCKEditorHTML,
-  MathTypeDialog,
-  TemplatePanel,
-  mathTemplates,
-  getTemplatesByLevel,
-  getTemplatesByCategory,
-  getTemplateCategories,
+  MathTextXEditor,       // Main editor component
+  ContentViewer,         // Read-only renderer
+  MathTypeDialog,        // Standalone equation editor dialog
+  TemplatePanel,         // Standalone formula template panel
+  MainToolbar,           // Standalone text formatting toolbar
+  MathToolbar,           // Standalone math symbols toolbar
+  SymbolPalette,         // Standalone symbol picker
+  WordCount,             // Status bar word/char counter
+  LinkDialog,            // Standalone link insert/edit dialog
+  ImageEditDialog,       // Standalone image edit dialog
+  InsertTableDialog,     // Standalone table insert dialog
+  TableMenu,             // Standalone table context menu
+  CellPropertiesDialog,  // Standalone cell properties dialog
+  TablePropertiesDialog, // Standalone table properties dialog
+  TableTemplatesDialog,  // Standalone table template picker
+  MathInlineNode,        // TipTap inline math extension
+  MathBlockNode,         // TipTap block math extension
+  getHTML,               // Serialize editor → HTML string
+  getJSON,               // Serialize editor → JSON
+  sanitizeCKEditorHTML,  // Clean CKEditor HTML for compatibility
+  toCompatibleHTML,      // Convert to CKEditor-compatible format
+  createExtensions,      // Create TipTap extensions programmatically
+  mathTemplates,         // Template definitions
+  getTemplatesByLevel,   // Filter templates by education level
+  getTemplatesByCategory,// Filter templates by category
+  getTemplateCategories, // Get all template categories
+  countWords,            // Word count utility
+  countCharacters,       // Character count utility
+  getTemplateStyles,     // Table template CSS generator
 } from 'erl-mathtextx-editor'
 
 import 'erl-mathtextx-editor/styles'
@@ -160,87 +362,36 @@ import 'erl-mathtextx-editor/viewer/styles'
 | `Ctrl+I` | Italic |
 | `Ctrl+U` | Underline |
 | `Ctrl+K` | Insert/edit link |
+| `Ctrl+M` | Insert inline math |
 | `Ctrl+Shift+T` | Insert table |
 | `Ctrl+S` | Save document |
-| `Tab` | Indent paragraph (at start) / Insert 4 spaces (in middle) |
-| `Shift+Tab` | Outdent paragraph |
-| `Backspace` | Outdent (if indented) / Join with previous paragraph |
+| `Shift+Ctrl+V` | Paste as plain text |
+| `Enter` (equation editor) | Insert formula |
+| `Esc` (equation editor) | Close dialog |
 
 ---
 
-## 🎯 Example: Multiple Choice Question Form
+## ⚠️ Troubleshooting
 
-```tsx
-import { useState } from 'react'
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
+| Error | Solution |
+|---|---|
+| `Can't resolve 'erl-mathtextx-editor'` | `npm install erl-mathtextx-editor` |
+| `Can't resolve 'erl-mathtextx-editor/styles'` | Version ≥ 0.1.3. Alternatif: `import 'erl-mathtextx-editor/dist/assets/erl-mathtextx-editor.css'` |
+| `MathTextXEditor is not a function` | Pastikan React ≥ 18 (`npm ls react`) |
+| `window is not defined` (Next.js) | Gunakan `dynamic()` dengan `{ ssr: false }` |
+| `Unexpected token 'export'` (CRA) | Webpack config: `resolve.mainFields: ['main', 'module']` |
+| MathLive fonts error | Set `(window as any).MATHLIVE_FONTS_PATH = '/fonts'` + copy font ke `public/fonts/` |
 
-export default function QuestionForm() {
-  const [question, setQuestion] = useState('')
-  const [options, setOptions] = useState([
-    { id: 'A', content: '', isCorrect: false },
-    { id: 'B', content: '', isCorrect: false },
-    { id: 'C', content: '', isCorrect: false },
-    { id: 'D', content: '', isCorrect: false },
-  ])
-
-  const handleSubmit = async () => {
-    await fetch('/api/questions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ question, options }),
-    })
-  }
-
-  return (
-    <div>
-      <h2>Buat Soal Pilihan Ganda</h2>
-
-      <MathTextXEditor
-        content={question}
-        onChange={setQuestion}
-        placeholder="Tulis pertanyaan..."
-        minHeight="150px"
-      />
+---
 
-      {options.map((option) => (
-        <div key={option.id}>
-          <label>
-            <input
-              type="radio"
-              name="correct"
-              checked={option.isCorrect}
-              onChange={() => {
-                setOptions(prev =>
-                  prev.map(o => ({
-                    ...o,
-                    isCorrect: o.id === option.id
-                  }))
-                )
-              }}
-            />
-            Opsi {option.id}
-          </label>
-          <MathTextXEditor
-            content={option.content}
-            onChange={(html) => {
-              setOptions(prev =>
-                prev.map(o =>
-                  o.id === option.id ? { ...o, content: html } : o
-                )
-              )
-            }}
-            placeholder={`Jawaban ${option.id}...`}
-            minHeight="80px"
-          />
-        </div>
-      ))}
+## ✅ Verified Import Paths
 
-      <button onClick={handleSubmit}>Simpan Soal</button>
-    </div>
-  )
-}
-```
+| Import | Resolves to |
+|---|---|
+| `erl-mathtextx-editor` | `dist/erl-mathtextx-editor.js` |
+| `erl-mathtextx-editor/styles` | `dist/assets/erl-mathtextx-editor.css` |
+| `erl-mathtextx-editor/viewer` | `dist/viewer.js` |
+| `erl-mathtextx-editor/viewer/styles` | `dist/viewer-styles.js` |
 
 ---
 
@@ -250,8 +401,11 @@ export default function QuestionForm() {
 - **Editor Engine:** TipTap / ProseMirror
 - **Math Input:** MathLive (WYSIWYG math)
 - **Math Rendering:** KaTeX
+- **DOCX Import:** mammoth.js
 - **XSS Protection:** DOMPurify
 - **Graph Plotting:** Function Plot
+- **Syntax Highlight:** lowlight (100+ languages)
+- **Build:** Vite (Library Mode)
 
 ---
 
@@ -266,3 +420,4 @@ export default function QuestionForm() {
 - **NPM:** [erl-mathtextx-editor](https://www.npmjs.com/package/erl-mathtextx-editor)
 - **Source:** [GitHub Repository](https://github.com/erlangga/richtext-editor-research)
 - **Issues:** [Report Bug](https://github.com/erlangga/richtext-editor-research/issues)
+- **📘 Embed Tutorial:** [docs/EMBED_TUTORIAL.md](https://github.com/erlangga/richtext-editor-research/blob/main/docs/EMBED_TUTORIAL.md)

package/dist/{CellPropertiesDialogImpl-DBgs-7H9.js → CellPropertiesDialogImpl-Cl0pxbeQ.js}

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import z, { useId as H, useRef as A, useCallback as b, useState as d, useEffect as V } from "react";
-import { u as B } from "./index-UCSefQk0.js";
+import { u as B } from "./index-CakccgVO.js";
 const M = z.memo(({
   isOpen: s,
   initialData: i = {},