blokhaus

Types

All TypeScript types and interfaces exported by Blokhaus.

This page documents every TypeScript type and interface exported from @blokhaus/core. All types are available as named type exports.

Import

import type {
  UploadHandler,
  AIProvider,
  AIGenerateConfig,
  AIGenerateParams,
  AIPluginConfig,
  AIPreviewLabels,
  AIRetryConfig,
  AIPromptInputRenderProps,
  InputRule,
  MentionProvider,
  MentionItem,
  SlashMenuItem,
  ImagePayload,
  AIPreviewPayload,
  MentionPayload,
  CodeBlockPayload,
  CalloutPayload,
  VideoPayload,
  ToggleContainerPayload,
  ColorEntry,
  ColorPalette,
  FontFamilyEntry,
  CalloutPreset,
  EmojiItem,
  EmojiPickerPluginProps,
  LinkPluginConfig,
  LinkInputRenderProps,
  LinkPreviewRenderProps,
  VideoEmbedInfo,
  VideoEmbedRenderProps,
  VideoFileRenderProps,
} from "@blokhaus/core";

UploadHandler

The function signature for handling file uploads. Used by ImagePlugin and VideoPlugin.

type UploadHandler = (file: File) => Promise<string>;

The function receives a File object and must return a promise that resolves to the final remote URL (e.g., https://cdn.example.com/image.png). If the upload fails, the promise should reject with an Error.


AI types

AIProvider

The provider interface for custom AI backends. Blokhaus does not ship a built-in AI provider -- you must supply one.

interface AIProvider {
  /** Human-readable name (e.g., "Mistral", "Ollama") */
  name: string;
  /**
   * Called with a prompt, surrounding editor context, and optional model config.
   * Must return a ReadableStream of text chunks.
   */
  generate: (params: AIGenerateParams) => Promise<ReadableStream<string>>;
}

AIGenerateParams

Parameters passed to AIProvider.generate().

interface AIGenerateParams {
  /** The user's prompt text. */
  prompt: string;
  /** Surrounding editor content serialized as Markdown. */
  context: string;
  /** Optional model-level configuration. */
  config?: AIGenerateConfig;
}

AIGenerateConfig

Model-level configuration for the AI generation call.

interface AIGenerateConfig {
  /** Sampling temperature (0-2). Lower = more deterministic. */
  temperature?: number;
  /** Maximum tokens to generate. */
  maxTokens?: number;
  /** System prompt / persona for the model. */
  systemPrompt?: string;
}

AIPluginConfig

Full configuration for the AI integration. Passed to the AIPlugin component.

interface AIPluginConfig {
  /** Model-level configuration (temperature, maxTokens, systemPrompt). */
  generate?: AIGenerateConfig;
  /** Custom labels for the preview node UI. */
  labels?: AIPreviewLabels;
  /** Retry configuration. */
  retry?: AIRetryConfig;
  /** Number of preceding blocks to include as context. Default: 3. */
  contextWindowSize?: number;
  /** Called when the AI stream encounters an error. */
  onError?: (error: Error) => void;
  /** Called when the user accepts generated content. */
  onAccept?: (content: string) => void;
  /** Called when the user discards generated content. */
  onDiscard?: () => void;
  /** Custom prompt input component. Replaces the built-in prompt input. */
  renderPrompt?: (props: AIPromptInputRenderProps) => React.ReactElement;
}

AIPreviewLabels

Labels for the AIPreviewNode buttons and header. All fields are optional with sensible defaults.

interface AIPreviewLabels {
  /** Header label. Default: "AI" */
  header?: string;
  /** Streaming status text. Default: "generating..." */
  streaming?: string;
  /** Accept button label. Default: "Accept" */
  accept?: string;
  /** Discard button label. Default: "Discard" */
  discard?: string;
  /** Retry button label. Default: "Retry" */
  retry?: string;
  /** Dismiss button label for error state. Default: "Dismiss" */
  dismiss?: string;
  /** Default error message. Default: "An error occurred" */
  defaultError?: string;
}

AIRetryConfig

Retry configuration for the AIPreviewNode.

interface AIRetryConfig {
  /** Maximum number of retries allowed. Set to 0 to disable. Default: Infinity */
  maxRetries?: number;
}

AIPromptInputRenderProps

Props for a custom AI prompt input component.

interface AIPromptInputRenderProps {
  /** Current position for fixed positioning. */
  position: { top: number; left: number };
  /** Call with the prompt text to submit. */
  onSubmit: (prompt: string) => void;
  /** Call to close/cancel the prompt. */
  onClose: () => void;
}

InputRule

Defines a custom input rule for the InputRulePlugin.

interface InputRule {
  /** The trigger pattern. Must include a trailing space or newline to fire. */
  pattern: RegExp;
  /** The node type this rule produces. Used for categorization. */
  type: "heading" | "quote" | "code" | "divider" | "custom";
  /**
   * Called when the pattern matches. Receives the matched text and the current TextNode.
   * The engine clears the trigger text before calling this.
   *
   * IMPORTANT: Runs inside a Lexical node transform. Do NOT wrap in editor.update().
   */
  onMatch: (
    match: RegExpMatchArray,
    node: TextNode,
    editor: LexicalEditor,
  ) => void;
}

Mention types

MentionItem

A single mention result returned by a MentionProvider.

interface MentionItem {
  id: string;
  label: string;
  /** Optional metadata rendered inside the dropdown item. */
  meta?: string;
  /** Optional URL to an avatar or icon. */
  icon?: string;
}

MentionProvider

Defines a mention trigger and its data source.

interface MentionProvider {
  /** The character that triggers this provider (e.g., '@', '#'). */
  trigger: string;
  /** Called when the user types after the trigger. Return matching items. */
  onSearch: (query: string) => Promise<MentionItem[]>;
  /** Renders a single item in the dropdown. Keep lightweight. */
  renderItem: (item: MentionItem) => React.ReactNode;
  /** Called when the user selects an item. Return the Lexical node to insert. */
  onSelect: (item: MentionItem) => LexicalNode;
}

SlashMenuItem

Defines an item in the slash menu dropdown.

interface SlashMenuItem {
  id: string;
  label: string;
  description: string;
  icon: React.ComponentType<{ size?: number }>;
  onSelect: () => void;
  /** Extra search terms (e.g., "h1" for "Heading 1"). */
  keywords?: string[];
}

Node payloads

These types define the data required to create each custom Lexical node.

ImagePayload

interface ImagePayload {
  src: string;
  altText: string;
  width?: number;
  height?: number;
  key?: NodeKey;
}

AIPreviewPayload

interface AIPreviewPayload {
  prompt: string;
  context: string;
  key?: NodeKey;
}

MentionPayload

interface MentionPayload {
  id: string;
  label: string;
  trigger: string;
  key?: NodeKey;
}

CodeBlockPayload

interface CodeBlockPayload {
  code: string;
  language: string;
  key?: NodeKey;
  autoFocus?: boolean;
}

CalloutPayload

interface CalloutPayload {
  emoji?: string;
  colorPreset?: string;
  key?: NodeKey;
}

VideoPayload

interface VideoPayload {
  src: string;
  videoType: "embed" | "file";
  provider: string;
  title?: string;
  key?: NodeKey;
}

ToggleContainerPayload

interface ToggleContainerPayload {
  open?: boolean;
  key?: NodeKey;
}

Color and font types

ColorEntry

A single color option in the color picker.

interface ColorEntry {
  /** Human-readable label shown in the picker. */
  label: string;
  /** CSS value to apply -- should be a var() reference. */
  value: string;
  /** Preview swatch color (raw hex/hsl for rendering the dot). */
  swatch: string;
}

ColorPalette

The complete color palette with text and highlight sections.

interface ColorPalette {
  text: ColorEntry[];
  highlight: ColorEntry[];
}

FontFamilyEntry

A single font family option in the font picker.

interface FontFamilyEntry {
  /** Human-readable label shown in the picker. */
  label: string;
  /** CSS font-family value to apply. Empty string = default. */
  value: string;
  /** Font stack used to render the preview text in the picker dropdown. */
  preview: string;
}

Callout and emoji types

CalloutPreset

Defines a callout color/style preset.

interface CalloutPreset {
  /** Unique identifier used in CSS class names and serialization. */
  id: string;
  /** Human-readable label shown in UI. */
  label: string;
  /** Default emoji for this preset. */
  emoji: string;
  /** Raw background color for rendering the picker dot. */
  bgSwatch: string;
  /** Raw border color for rendering the picker dot. */
  borderSwatch: string;
}

EmojiItem

A single emoji entry in the emoji picker.

interface EmojiItem {
  emoji: string;
  name: string;
  keywords: string[];
}

Plugin configuration types

EmojiPickerPluginProps

Props for the EmojiPickerPlugin component.

interface EmojiPickerPluginProps {
  /** Override the built-in emoji list. */
  emojis?: EmojiItem[];
  /** Max results shown in dropdown. Default: 8. */
  maxResults?: number;
  /** Custom render function for each emoji row. */
  renderItem?: (item: EmojiItem, isSelected: boolean) => React.ReactNode;
  /** Custom render function for the dropdown container. */
  renderDropdown?: (props: {
    children: React.ReactNode;
    position: { top: number; left: number };
  }) => React.ReactNode;
}

LinkPluginConfig

Configuration for the LinkPlugin component.

interface LinkPluginConfig {
  /** Custom render for the link input popover. */
  renderLinkInput?: (props: LinkInputRenderProps) => React.ReactNode;
  /** Custom render for the link preview popover. */
  renderLinkPreview?: (props: LinkPreviewRenderProps) => React.ReactNode;
  /** Validate URL before applying. Default: basic URL validation. */
  validateUrl?: (url: string) => boolean;
  /** Link target behavior. Default: "_blank". */
  target?: string;
  /** Link rel attribute. Default: "noopener noreferrer". */
  rel?: string;
}

LinkInputRenderProps

Props for a custom link input component.

interface LinkInputRenderProps {
  initialUrl: string;
  onSubmit: (url: string) => void;
  onRemove: () => void;
  onClose: () => void;
  position: { top: number; left: number };
}

LinkPreviewRenderProps

Props for a custom link preview component.

interface LinkPreviewRenderProps {
  url: string;
  onEdit: () => void;
  onRemove: () => void;
  onClose: () => void;
  position: { top: number; left: number };
}

Video types

VideoEmbedInfo

Information about a parsed video embed URL. Returned by parseVideoEmbed().

interface VideoEmbedInfo {
  provider: "youtube" | "vimeo" | "loom" | "generic";
  embedUrl: string;
  /** Thumbnail URL when available (YouTube, Vimeo). */
  thumbnailUrl?: string;
}

VideoEmbedRenderProps

Props for rendering an embedded video.

interface VideoEmbedRenderProps {
  src: string;
  provider: string;
  title: string;
}

VideoFileRenderProps

Props for rendering an uploaded video file.

interface VideoFileRenderProps {
  src: string;
  title: string;
}