erl-mathtextx-editor 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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.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

package/README.md

@@ -11,18 +11,18 @@ Embeddable visual math editor widget untuk CMS dan platform edukasi. User tidak
 
 ## ✨ Fitur Utama
 
-- 🎯 **Visual Math Keyboard** — Klik simbol, operator, template formula
+- 🎯 **Visual Math Input** — Insert math langsung inline tanpa dialog (Ctrl+M)
 - 📝 **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 (Edit existing math)
+- 📋 **100+ Formula Templates** — Algebra, calculus, trigonometry, chemistry, matrix
+- 🏆 **Mode Olimpiade** — Toolbar khusus untuk kompetisi matematika dengan simbol set, Greek letters, NT/Combo
+- 🖼️ **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 +36,7 @@ npm install erl-mathtextx-editor
 
 ## 🚀 Quick Start
 
-### Basic Usage
+### 1. Basic Editor
 
 ```tsx
 import { MathTextXEditor } from 'erl-mathtextx-editor'
@@ -52,14 +52,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 +72,239 @@ 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
+```
+
+---
+
+## 🎛️ Toolbar Modes
+
+Editor menyediakan 3 preset toolbar yang bisa dipilih via prop `toolbarMode`:
+
+### Basic
+Toolbar standar dengan tombol format teks dasar, insert media, dan math formula.
+
+### Advanced
+Toolbar lengkap dengan font family, text color, alignment, table operations, superscript/subscript, chemistry formula, dan formatting lanjutan.
+
+### Olimpiade
+Toolbar minimal untuk kompetisi matematika — hanya tombol esensial:
+
+| Grup | Tombol |
+|---|---|
+| **Undo/Redo** | Undo, Redo |
+| **Format** | Bold, Italic, Underline |
+| **Structure** | Paragraph, H1, H2 |
+| **Lists** | Bullet List, Ordered List, Outdent, Indent |
+| **Math** | Math Formula (inline), Block Math |
+| **Actions** | Remove Format |
+
+**Math Toolbar** di mode Olimpiade menampilkan section khusus: Basic, Relation, Set, Greek, Structure — tanpa section Calc yang kurang relevan untuk olimpiade.
+
+### Custom Mode
+Jika preset tidak sesuai, Anda bisa atur sendiri via `internalToolbarMode` state atau kontrol toolbar secara manual menggunakan komponen terpisah (`MainToolbar`, `MathToolbar`, `MathTypeDialog`).
+
+---
+
+## 🧰 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 +314,18 @@ 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 |
+| `toolbarMode` | `'basic' \| 'advanced' \| 'olimpiade'` | `'basic'` | Toolbar preset |
+| `onInsertBlockMath` | `() => void` | — | Callback to insert a block-level math node directly |
+| `editable` | `boolean` | `true` | Set false for read-only mode |
+| `className` | `string` | — | Additional CSS class |
 
 ### ContentViewer
 
@@ -127,17 +342,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 +393,35 @@ import 'erl-mathtextx-editor/viewer/styles'
 | `Ctrl+I` | Italic |
 | `Ctrl+U` | Underline |
 | `Ctrl+K` | Insert/edit link |
+| `Ctrl+M` | Insert inline math directly (without dialog) |
 | `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 |
+| `Esc` (equation editor dialog) | Close dialog |
 
 ---
 
-## 🎯 Example: Multiple Choice Question Form
-
-```tsx
-import { useState } from 'react'
-import { MathTextXEditor } from 'erl-mathtextx-editor'
-import 'erl-mathtextx-editor/styles'
+## ⚠️ Troubleshooting
 
-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 }),
-    })
-  }
+| 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/` |
 
-  return (
-    <div>
-      <h2>Buat Soal Pilihan Ganda</h2>
+---
 
-      <MathTextXEditor
-        content={question}
-        onChange={setQuestion}
-        placeholder="Tulis pertanyaan..."
-        minHeight="150px"
-      />
+## ✅ Verified Import Paths
 
-      {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>
-      ))}
-
-      <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 +431,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 +450,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-5BptFKaE.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-D0Rzm7Tg.js";
 const M = z.memo(({
   isOpen: s,
   initialData: i = {},

package/dist/{ContentViewer-CsFSAN_B.js → ContentViewer-RijJ5nlJ.js}

@@ -1,22 +1,23 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as r, useMemo as i, useEffect as m } from "react";
-import { p as s, k as l } from "./viewer-deps-CjbAqdti.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as o, useMemo as i, useEffect as m } from "react";
+import { p as s, k as l } from "./viewer-deps-BDYoL2Ts.js";
 function c(t) {
+  if (t.querySelector(".katex")) return;
   const e = t.getAttribute("data-latex") || t.getAttribute("latex");
   if (!e) return;
-  const n = t.classList.contains("mtx-math-block");
+  const r = t.classList.contains("mtx-math-block");
   try {
     l.render(e, t, {
       throwOnError: !1,
-      displayMode: n,
+      displayMode: r,
       output: "htmlAndMathml"
     });
   } catch {
-    t.textContent = n ? `$$${e}$$` : `$${e}$`;
+    t.textContent = r ? `$$${e}$$` : `$${e}$`;
   }
 }
-function p({ content: t, className: e }) {
-  const n = r(null), a = i(
+function x({ content: t, className: e }) {
+  const r = o(null), n = i(
     () => s.sanitize(t, {
       ADD_TAGS: ["math-field", "span", "div"],
       ADD_ATTR: ["data-latex", "latex", "data-type", "data-mathml"],
@@ -26,19 +27,19 @@ function p({ content: t, className: e }) {
     [t]
   );
   return m(() => {
-    if (!n.current) return;
-    n.current.querySelectorAll(
+    if (!r.current) return;
+    r.current.querySelectorAll(
       '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
     ).forEach(c);
-  }, [a]), /* @__PURE__ */ o(
+  }, [n]), /* @__PURE__ */ a(
     "div",
     {
-      ref: n,
+      ref: r,
       className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
-      dangerouslySetInnerHTML: { __html: a }
+      dangerouslySetInnerHTML: { __html: n }
     }
   );
 }
 export {
-  p as C
+  x as C
 };