erl-mathtextx-editor 0.1.2

package/dist/toolbar/MainToolbar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Editor } from '@tiptap/react';
+import { ToolbarMode } from '../types';
+interface MainToolbarProps {
+    editor: Editor | null;
+    toolbarMode?: ToolbarMode;
+    onInsertMath?: (tab?: string) => void;
+    onInsertImage?: () => void;
+    onEditImage?: () => void;
+    onSetImageAlign?: (align: 'left' | 'center' | 'right' | 'full') => void;
+    onResetImagePosition?: () => void;
+}
+export declare const MainToolbar: React.NamedExoticComponent<MainToolbarProps>;
+export {};

package/dist/toolbar/MathToolbar.d.ts

@@ -0,0 +1,7 @@
+interface MathToolbarProps {
+    onInsertLatex: (latex: string) => void;
+    onToggleSymbols: () => void;
+    onToggleTemplates?: () => void;
+}
+export declare function MathToolbar({ onInsertLatex, onToggleSymbols, onToggleTemplates }: MathToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,73 @@
+import { Editor } from '@tiptap/react';
+/** Toolbar item identifiers */
+export type ToolbarItem = 'bold' | 'italic' | 'underline' | 'strike' | 'heading' | 'bulletList' | 'orderedList' | 'taskList' | 'codeBlock' | 'blockquote' | 'horizontalRule' | 'link' | 'image' | 'table' | 'subscript' | 'superscript' | 'math' | 'undo' | 'redo' | 'divider';
+/** Math toolbar item identifiers */
+export type MathToolbarItem = 'fraction' | 'sqrt' | 'power' | 'subscriptMath' | 'sum' | 'integral' | 'limit' | 'matrix' | 'symbols' | 'templates';
+/** Education level for formula templates */
+export type EducationLevel = 'sd' | 'smp' | 'sma' | 'all';
+/** Output format */
+export type OutputFormat = 'html' | 'json';
+/** Toolbar density mode */
+export type ToolbarMode = 'basic' | 'advanced';
+/** Main editor props */
+export interface MathTextXEditorProps {
+    /** Initial content (HTML string or TipTap JSON) */
+    content?: string;
+    /** Called when content changes — returns HTML string */
+    onChange?: (html: string) => void;
+    /** Called when user triggers save (Ctrl+S) */
+    onSave?: (html: string) => void;
+    /** Is the editor editable? */
+    editable?: boolean;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Which toolbar items to show */
+    toolbar?: ToolbarItem[];
+    /** Preset toolbar density mode */
+    toolbarMode?: ToolbarMode;
+    /** Which math toolbar items to show */
+    mathToolbar?: MathToolbarItem[];
+    /** Education level for formula templates */
+    templates?: EducationLevel;
+    /** Output format */
+    outputFormat?: OutputFormat;
+    /** Custom class name for the editor container */
+    className?: string;
+    /** Minimum height of the editor */
+    minHeight?: string;
+    /** Maximum height of the editor (enables scrolling) */
+    maxHeight?: string;
+    /** Auto-focus the editor on mount */
+    autoFocus?: boolean;
+    /** Image upload handler — return the URL of the uploaded image */
+    onImageUpload?: (file: File) => Promise<string>;
+}
+/** Toolbar button config */
+export interface ToolbarButtonConfig {
+    id: ToolbarItem;
+    icon: string;
+    label: string;
+    action: (editor: Editor) => void;
+    isActive?: (editor: Editor) => boolean;
+    isDisabled?: (editor: Editor) => boolean;
+}
+/** Math template */
+export interface MathTemplate {
+    id: string;
+    label: string;
+    latex: string;
+    category: string;
+    level: EducationLevel;
+}
+/** Symbol category */
+export interface SymbolCategory {
+    id: string;
+    label: string;
+    symbols: SymbolItem[];
+}
+/** Individual symbol */
+export interface SymbolItem {
+    char: string;
+    label: string;
+    latex: string;
+}

package/dist/utils/exportUtils.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Export the editor content as a PNG image.
+ * @param elementId The ID of the element to capture (usually the editor container).
+ * @param fileName The name of the downloaded file.
+ */
+export declare const exportToImage: (elementId: string, fileName?: string) => Promise<void>;
+/**
+ * Export the editor content as a PDF document.
+ * @param elementId The ID of the element to capture.
+ * @param fileName The name of the downloaded file.
+ */
+export declare const exportToPDF: (elementId: string, fileName?: string) => Promise<void>;
+/**
+ * Export the editor content as a JSON file.
+ * @param editor The Tiptap editor instance.
+ * @param fileName The name of the downloaded file.
+ */
+export declare const exportToJSON: (editor: Editor, fileName?: string) => void;

package/dist/utils/pasteHandler.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Clean Microsoft Office specific HTML content
+ */
+export declare function cleanOfficeHTML(html: string): string;
+/**
+ * Clean Google Docs specific HTML content
+ */
+export declare function cleanGoogleDocsHTML(html: string): string;
+/**
+ * Handle paste event with smart detection
+ */
+export declare function handlePaste(editor: Editor, event: ClipboardEvent): boolean;
+/**
+ * Handle Shift+Ctrl+V (Paste as plain text)
+ */
+export declare function handlePastePlainText(editor: Editor, event: ClipboardEvent): boolean;

package/dist/viewer/ContentViewer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for the ContentViewer component.
+ */
+export interface ContentViewerProps {
+    /** Raw HTML string from the editor (stored in database) */
+    content: string;
+    /** Additional CSS class name for the wrapper */
+    className?: string;
+}
+/**
+ * ContentViewer — Lightweight read-only renderer for MathTextX Editor content.
+ *
+ * This component takes raw HTML (as saved by the editor to the database)
+ * and renders it safely with:
+ * 1. XSS sanitization via DOMPurify
+ * 2. Automatic KaTeX rendering for math elements (`mtx-math-inline`, `mtx-math-block`)
+ * 3. Consistent styling via `content-style.css`
+ *
+ * @example
+ * ```tsx
+ * // In your Quiz / Exam frontend:
+ * import { ContentViewer } from '@mathtextx/editor'
+ *
+ * function SoalCard({ htmlFromDB }) {
+ *   return <ContentViewer content={htmlFromDB} />
+ * }
+ * ```
+ */
+export declare function ContentViewer({ content, className }: ContentViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentViewer } from './ContentViewer';
+export type { ContentViewerProps } from './ContentViewer';