scrivly/dist/index.d.ts

A powerful, feature-rich rich text editor for React with TypeScript support

import React from 'react';

interface ColorPickerProps {
    type: "text" | "background";
    onColorSelect: (color: string) => void;
    onClose: () => void;
}
declare const ColorPicker: React.FC<ColorPickerProps>;

interface EmojiPickerProps {
    onEmojiSelect: (emoji: string) => void;
    onClose: () => void;
}
declare const EmojiPicker: React.FC<EmojiPickerProps>;

type ToolbarOption = "bold" | "italic" | "underline" | "strikethrough" | "code" | "subscript" | "superscript" | "textColor" | "backgroundColor" | "fontSize" | "fontFamily" | "formatBlock" | "blockquote" | "bulletList" | "numberList" | "checklist" | "codeBlock" | "table" | "link" | "image" | "video" | "emoji" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "indent" | "outdent" | "lineHeight" | "clear" | "undo" | "redo" | "fullscreen" | "darkMode" | "highlight" | "search" | "export" | "customTool";
type BlockFormat = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "blockquote" | "pre" | "div";
type FontSize = "8px" | "10px" | "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" | "48px" | "64px";
type FontFamily = "Arial" | "Helvetica" | "Times New Roman" | "Courier New" | "Verdana" | "Georgia" | "Palatino" | "Garamond" | "Comic Sans MS" | "Trebuchet MS" | "Arial Black" | "Impact";
interface TableData {
    rows: number;
    cols: number;
    data: string[][];
}
interface VideoData {
    url: string;
    width: number;
    height: number;
    title?: string;
}
interface ImageData {
    url: string;
    width: number;
    height: number;
    alt?: string;
    title?: string;
}
interface CustomTool {
    id: string;
    name: string;
    icon: React.ComponentType<{
        size?: number;
    }>;
    tooltip: string;
    action: (editor: HTMLDivElement | null) => void;
    isActive?: (editor: HTMLDivElement | null) => boolean;
    group?: string;
}
interface EditorState {
    content: string;
    selection?: Range;
    activeFormats: Set<string>;
    currentBlock: BlockFormat;
    isDarkMode: boolean;
    isFullscreen: boolean;
}
interface ScrivlyEditorProps {
    value?: string;
    onChange?: (content: string) => void;
    onStateChange?: (state: EditorState) => void;
    toolbarOptions?: ToolbarOption[];
    customTools?: CustomTool[];
    placeholder?: string;
    className?: string;
    toolbarClassName?: string;
    contentClassName?: string;
    maxHeight?: string;
    minHeight?: string;
    readOnly?: boolean;
    darkMode?: boolean;
    onDarkModeChange?: (isDark: boolean) => void;
    showWordCount?: boolean;
    showCharCount?: boolean;
    autoSave?: boolean;
    autoSaveInterval?: number;
    spellCheck?: boolean;
    allowImageUpload?: boolean;
    onImageUpload?: (file: File) => Promise<string>;
    allowVideoUpload?: boolean;
    onVideoUpload?: (file: File) => Promise<string>;
}
interface ToolbarProps {
    isActive: Record<string, boolean>;
    currentBlock: BlockFormat;
    onAction: (action: string, value?: any) => void;
    toolbarOptions: ToolbarOption[];
    customTools?: CustomTool[];
    className?: string;
    canUndo?: boolean;
    canRedo?: boolean;
    isDarkMode?: boolean;
    isFullscreen?: boolean;
    onColorPicker?: (type: "text" | "background") => void;
    onEmojiPicker?: () => void;
    activeDropdown?: string | null;
    onDropdownChange?: (dropdown: string | null) => void;
    editorRef?: React.RefObject<HTMLDivElement>;
}

interface ImageModalProps {
    onInsertImage: (imageData: ImageData) => void;
    onClose: () => void;
    allowUpload?: boolean;
    onImageUpload?: (file: File) => Promise<string>;
}
declare const ImageModal: React.FC<ImageModalProps>;

declare const ScrivlyEditor: React.FC<ScrivlyEditorProps>;

interface SearchModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSearch: (searchTerm: string, replaceTerm?: string) => void;
}
declare const SearchModal: React.FC<SearchModalProps>;

interface TableModalProps {
    onCreateTable: (tableData: TableData) => void;
    onClose: () => void;
}
declare const TableModal: React.FC<TableModalProps>;

declare const Toolbar: React.FC<ToolbarProps>;

interface VideoModalProps {
    onInsertVideo: (videoData: VideoData) => void;
    onClose: () => void;
}
declare const VideoModal: React.FC<VideoModalProps>;

export { ColorPicker, EmojiPicker, ImageModal, ScrivlyEditor, SearchModal, TableModal, Toolbar, VideoModal, ScrivlyEditor as default };
export type { BlockFormat, CustomTool, EditorState, FontFamily, FontSize, ImageData, ScrivlyEditorProps, TableData, ToolbarOption, ToolbarProps, VideoData };