@brutalcomponent/react/dist/modules/editor/index.d.ts

Brutalist React components

import React__default from 'react';
import { IconType } from 'react-icons';

interface MarkdownEditorProps {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    minHeight?: string;
    showToolbar?: boolean;
    brutal?: boolean;
    className?: string;
    textareaClassName?: string;
}
/**
 * @component MarkdownEditor
 * @description Simple markdown editor with optional toolbar
 * @client Uses useRef and callbacks
 */
declare const MarkdownEditor: React__default.FC<MarkdownEditorProps>;

interface ToolbarAction {
    icon: IconType;
    label: string;
    markdown: string;
    group?: string;
}
/**
 * @interface MarkdownToolbarProps
 * @description Props for markdown toolbar
 */
interface MarkdownToolbarProps {
    onAction: (markdown: string) => void;
    brutal?: boolean;
    showMobile?: boolean;
    className?: string;
}
/**
 * @component MarkdownToolbar
 * @description Toolbar with markdown formatting actions
 * @client Uses useState for mobile menu
 */
declare const MarkdownToolbar: React__default.FC<MarkdownToolbarProps>;

interface MarkdownPreviewProps {
    content: string;
    className?: string;
    parser?: (content: string) => string | Promise<string>;
}
/**
 * @component MarkdownPreview
 * @description Preview rendered markdown content
 * @client Uses useEffect for parsing
 *
 * Note: This component requires a markdown parser like 'marked' to be installed
 * Example: npm install marked @types/marked
 */
declare const MarkdownPreview: React__default.FC<MarkdownPreviewProps>;

interface BlogEditorData {
    title: string;
    slug: string;
    content: string;
    excerpt: string;
    status: "draft" | "published";
    tags: string;
    category: string;
    featuredImage?: string;
    publishedAt?: string;
    isFeatured: boolean;
    author?: string;
}
/**
 * @interface BlogEditorProps
 * @description Props for blog editor component
 */
interface BlogEditorProps {
    initialData?: Partial<BlogEditorData>;
    onSave?: (data: BlogEditorData) => void | Promise<void>;
    onCancel?: () => void;
    categories?: Array<{
        value: string;
        label: string;
    }>;
    authors?: Array<{
        value: string;
        label: string;
    }>;
    loading?: boolean;
    brutal?: boolean;
    className?: string;
    markdownParser?: (content: string) => string | Promise<string>;
}
/**
 * @component BlogEditor
 * @description Full-featured blog editor with tabs
 * @client Uses useState and various form inputs
 */
declare const BlogEditor: React__default.FC<BlogEditorProps>;

interface EditorAction {
    id: string;
    icon: IconType;
    label: string;
    shortcut?: string;
    action: () => void;
    active?: boolean;
    disabled?: boolean;
    group?: string;
}
/**
 * @interface EditorToolbarProps
 * @description Props for the editor toolbar
 */
interface EditorToolbarProps {
    actions?: EditorAction[];
    onAction?: (actionId: string) => void;
    onFormatText?: (format: string, value?: string) => void;
    fullscreen?: boolean;
    onFullscreenToggle?: () => void;
    brutal?: boolean;
    variant?: "default" | "minimal" | "floating";
    showGroups?: string[];
    className?: string;
    customActions?: React__default.ReactNode;
}
/**
 * @component EditorToolbar
 * @description Advanced toolbar for rich text editing
 * @client Uses state for dropdowns and formatting
 */
declare const EditorToolbar: React__default.FC<EditorToolbarProps>;

export { BlogEditor, type BlogEditorData, type BlogEditorProps, EditorToolbar, type EditorToolbarProps, MarkdownEditor, type MarkdownEditorProps, MarkdownPreview, type MarkdownPreviewProps, MarkdownToolbar, type MarkdownToolbarProps, type ToolbarAction };