Feature Options

Configuration types for all editor features.

VizelFeatureOptions

Main configuration for all editor features.

interface VizelFeatureOptions {
  /** Slash command menu */
  slashCommand?: VizelSlashCommandOptions | false;
  
  /** Table editing */
  table?: boolean;
  
  /** Link support */
  link?: VizelLinkOptions | boolean;
  
  /** Image upload and resize */
  image?: VizelImageFeatureOptions | false;
  
  /** Markdown import/export */
  markdown?: VizelMarkdownOptions | boolean;
  
  /** Task list support */
  taskList?: VizelTaskListOptions | boolean;
  
  /** Character counting */
  characterCount?: VizelCharacterCountOptions | boolean;
  
  /** Text color and highlight */
  textColor?: VizelTextColorOptions | boolean;
  
  /** Code block with syntax highlighting */
  codeBlock?: VizelCodeBlockOptions | boolean;
  
  /** Mathematics (LaTeX) */
  mathematics?: VizelMathematicsOptions | boolean;
  
  /** Drag handle for blocks */
  dragHandle?: VizelDragHandleOptions | boolean;
  
  /** URL embeds */
  embed?: VizelEmbedOptions | boolean;
  
  /** Collapsible details */
  details?: VizelDetailsOptions | boolean;
  
  /** Diagram support */
  diagram?: VizelDiagramOptions | boolean;
}

Slash Command

interface VizelSlashCommandOptions {
  /** Custom slash command items */
  items?: VizelSlashCommandItem[];
  
  /** Suggestion configuration */
  suggestion?: Record<string, unknown>;
}

interface VizelSlashCommandItem {
  /** Display title */
  title: string;
  
  /** Description text */
  description: string;
  
  /** Icon identifier (Iconify format) */
  icon: VizelSlashCommandIconName;
  
  /** Command to execute */
  command: (props: { editor: Editor; range: VizelRange }) => void;
  
  /** Search keywords */
  keywords?: string[];
  
  /** Group identifier */
  group?: string;
}

type VizelSlashCommandIconName =
  | 'lucide:heading-1'
  | 'lucide:heading-2'
  | 'lucide:heading-3'
  | 'lucide:pilcrow'
  | 'lucide:list'
  | 'lucide:list-ordered'
  | 'lucide:list-todo'
  | 'lucide:quote'
  | 'lucide:code'
  | 'lucide:image'
  | 'lucide:minus'
  | 'lucide:table'
  | 'lucide:chevrons-down-up'
  | 'lucide:link'
  | 'lucide:sigma'
  | 'lucide:git-branch'
  | string; // Any Iconify icon

Image

interface VizelImageFeatureOptions {
  /** Enable image resizing */
  resize?: boolean;
  
  /** Custom upload handler */
  onUpload?: (file: File) => Promise<string>;
  
  /** Maximum file size in bytes */
  maxFileSize?: number;
  
  /** Allowed MIME types */
  allowedTypes?: string[];
  
  /** Validation error callback */
  onValidationError?: (error: ImageValidationError) => void;
  
  /** Upload error callback */
  onUploadError?: (error: Error, file: File) => void;
}

interface ImageValidationError {
  type: 'file-too-large' | 'invalid-type';
  file: File;
  maxSize?: number;
  allowedTypes?: string[];
}

Link

interface VizelLinkOptions {
  /** Open links on click */
  openOnClick?: boolean;
  
  /** Auto-link URLs while typing */
  autolink?: boolean;
  
  /** Link pasted URLs */
  linkOnPaste?: boolean;
  
  /** Default protocol for links */
  defaultProtocol?: string;
  
  /** HTML attributes for links */
  HTMLAttributes?: Record<string, string>;
}

Markdown

interface VizelMarkdownOptions {
  /** Indentation settings */
  indentation?: {
    style: 'space' | 'tab';
    size: number;
  };
  
  /** Enable GitHub Flavored Markdown */
  gfm?: boolean;
  
  /** Convert newlines to <br> */
  breaks?: boolean;
}

Character Count

interface VizelCharacterCountOptions {
  /** Maximum characters (null = unlimited) */
  limit?: number | null;
  
  /** Counting mode */
  mode?: 'textSize' | 'nodeSize';
  
  /** Custom word counter function */
  wordCounter?: (text: string) => number;
}

Text Color

interface VizelTextColorOptions {
  /** Custom text color palette */
  textColors?: VizelColorDefinition[];
  
  /** Custom highlight color palette */
  highlightColors?: VizelColorDefinition[];
  
  /** Enable multicolor highlights */
  multicolor?: boolean;
}

interface VizelColorDefinition {
  name: string;
  color: string;
}

Code Block

interface VizelCodeBlockOptions {
  /** Default language for new code blocks */
  defaultLanguage?: string;
  
  /** Show line numbers */
  lineNumbers?: boolean;
  
  /** Custom Lowlight instance */
  lowlight?: ReturnType<typeof createLowlight>;
}

Mathematics

interface VizelMathematicsOptions {
  /** KaTeX rendering options */
  katexOptions?: KatexOptions;
  
  /** Enable $...$ input rules */
  inlineInputRules?: boolean;
  
  /** Enable $$...$$ input rules */
  blockInputRules?: boolean;
}

Embed

interface VizelEmbedOptions {
  /** Custom fetch function for embed data */
  fetchEmbedData?: VizelFetchEmbedDataFn;
  
  /** Custom or additional providers */
  providers?: VizelEmbedProvider[];
  
  /** HTML attributes for embed wrapper */
  HTMLAttributes?: Record<string, unknown>;
  
  /** Enable paste handler */
  pasteHandler?: boolean;
  
  /** Inline embeds vs block embeds */
  inline?: boolean;
}

interface VizelEmbedProvider {
  name: string;
  pattern: RegExp;
  transform: (url: string, match: RegExpMatchArray) => VizelEmbedData;
}

Diagram

interface VizelDiagramOptions {
  /** Mermaid configuration */
  mermaidConfig?: MermaidConfig;
  
  /** GraphViz layout engine */
  graphvizEngine?: 'dot' | 'neato' | 'fdp' | 'sfdp' | 'twopi' | 'circo';
  
  /** Default diagram type */
  defaultType?: 'mermaid' | 'graphviz';
  
  /** Default Mermaid code */
  defaultCode?: string;
  
  /** Default GraphViz code */
  defaultGraphvizCode?: string;
}

Other Feature Options

interface VizelDragHandleOptions {
  /** Whether to show the drag handle */
  enabled?: boolean;
}

interface VizelDetailsOptions {
  /** Details container options */
  details?: DetailsNodeOptions;
  
  /** Content area options */
  detailsContent?: DetailsContentOptions;
  
  /** Summary/header options */
  detailsSummary?: DetailsSummaryOptions;
}

interface VizelTaskListOptions {
  /** Task list container options */
  taskList?: TaskListOptions;
  
  /** Task item options */
  taskItem?: TaskItemOptions;
}