/** * Type definitions for remake-blocks * * Supports 42 first-class callout types + disclosure widgets โ€” each directive * maps to its own unique visual identity, CSS class, and default title. * * GFM standard (5): NOTE, TIP, IMPORTANT, WARNING, CAUTION * Obsidian core (10): ABSTRACT, INFO, SUCCESS, QUESTION, FAILURE, DANGER, QUOTE, BUG, EXAMPLE, TODO * Promoted aliases (12): SUMMARY, TLDR, HINT, CHECK, DONE, HELP, FAQ, ATTENTION, FAIL, MISSING, ERROR, CITE * v1.6.0 promoted (15): DEFINITION, ASIDE, CORRECTION, UPDATE, FIGURE, FURTHER-READING, * PREREQUISITE, EXERCISE, SIDENOTE, TIMELINE, ANNOUNCEMENT, * BIBLIOGRAPHY, DRAFT, TRANSLATION, DISCUSSION, RETRO * Disclosure: [!] โ€” plain collapsible block with no color/icon * Custom: User-defined via customCallouts option */ /** * All 42 built-in callout types โ€” each is a distinct first-class type * with its own CSS class, icon, color palette, and default title. * * No alias resolution: every directive maps 1:1 to its own config. */ export type BuiltinCalloutType = "note" | "tip" | "important" | "warning" | "caution" | "abstract" | "info" | "success" | "question" | "failure" | "danger" | "quote" | "bug" | "example" | "todo" | "summary" | "tldr" | "hint" | "check" | "done" | "help" | "faq" | "attention" | "fail" | "missing" | "error" | "cite" | "definition" | "aside" | "correction" | "update" | "figure" | "further-reading" | "prerequisite" | "exercise" | "sidenote" | "timeline" | "announcement" | "bibliography" | "draft" | "translation" | "discussion" | "retro"; /** * v1.10.0+: Lucide icon names recognized by the per-callout `{icon="..."}` * override. Use this type in your own config to get autocomplete when * specifying icon names. * * The list below covers all icon keys in the plugin's internal LUCIDE_ICONS * map โ€” 27 type-matched icons + 24 extra named icons added in v1.4.0. * * Note: this is a closed union of the icons the plugin ships. To use a * Lucide icon NOT in this list, cast with `as LucideIconName` (the runtime * lookup will fall back to the callout type's default icon if the name * isn't found). */ export type LucideIconName = "note" | "tip" | "important" | "warning" | "caution" | "abstract" | "info" | "success" | "question" | "failure" | "danger" | "quote" | "bug" | "example" | "todo" | "summary" | "tldr" | "hint" | "check" | "done" | "help" | "faq" | "attention" | "fail" | "missing" | "error" | "cite" | "rocket" | "heart" | "star" | "bell" | "flag" | "bookmark" | "lightbulb" | "fire" | "zap" | "shield" | "code" | "book" | "pencil" | "eye" | "globe" | "lock" | "key" | "clock" | "calendar" | "package" | "download" | "upload" | "link" | "settings" | "terminal" | "definition" | "aside" | "correction" | "update" | "figure" | "further-reading" | "prerequisite" | "exercise" | "sidenote" | "timeline" | "announcement" | "bibliography" | "draft" | "translation" | "discussion" | "retro"; /** * A custom callout type registered by the user. * Must be a non-empty string that doesn't clash with builtins. */ export type CustomCalloutType = string; /** * Union of all possible callout type identifiers. */ export type CalloutType = BuiltinCalloutType | CustomCalloutType; /** * Configuration for a single callout type (built-in or custom). */ export interface CalloutConfig { /** The callout type identifier, e.g. "note", "hint", or a custom name */ type: CalloutType; /** * SVG icon string or emoji rendered in the callout header. * Can be an inline SVG, an emoji character, or empty string for no icon. */ icon: string; /** * CSS class name(s) added to the callout container element. * Multiple classes are space-separated. */ className: string; /** * Default title when the user does not provide a custom title * in the markdown syntax (e.g. `> [!NOTE]` without a trailing title). */ defaultTitle: string; /** * Primary accent color for the callout border / icon tint. * Accepts any valid CSS color value. */ color: string; /** * Background color for the callout body. * Accepts any valid CSS color value. */ backgroundColor: string; /** * Icon color (defaults to `color` if not specified). */ iconColor?: string; } /** * Options for the remake-blocks remark plugin. */ export interface RemakeBlocksOptions { /** * Custom callout type definitions to register in addition to builtins. * * Each entry defines a new `[!TYPE]` directive that can be used in markdown. * If a custom callout's `type` matches a builtin, the builtin is overridden. * * @example * ```ts * customCallouts: [ * { * type: "custom", * icon: "๐Ÿš€", * className: "callout-custom", * defaultTitle: "Custom", * color: "#8b5cf6", * backgroundColor: "#f5f3ff", * }, * ] * ``` */ customCallouts?: CalloutConfig[]; /** * Tag name used for the outer callout container element. * @default "div" */ calloutContainerTag?: string; /** * CSS class name added to the callout container. * @default "callout" */ calloutClass?: string; /** * CSS class name added to the callout title element. * @default "callout-title" */ calloutTitleClass?: string; /** * CSS class name added to the callout body element. * @default "callout-body" */ calloutBodyClass?: string; /** * Whether to enhance regular blockquotes (those without a callout directive) * with improved styling via CSS classes. * @default true */ enhanceBlockquotes?: boolean; /** * CSS class name added to enhanced blockquotes. * @default "blockquote-enhanced" */ blockquoteClass?: string; /** * Whether to inject a data-callout-type attribute on the container * so users can target specific types in CSS (e.g. `[data-callout-type="hint"]`). * @default true */ dataCalloutType?: boolean; /** * Regular expression used to detect callout directives inside blockquotes. * The first capture group must be the callout type, the second (optional) * capture group is the custom title. * * Defaults to a dynamically built regex matching all 27 builtins + any custom types. */ calloutPattern?: RegExp; /** * Enable disclosure widget support. * When true, `[!]` directives create plain collapsible blocks. * @default true */ enableDisclosures?: boolean; /** * CSS class name added to disclosure widget containers. * @default "disclosure" */ disclosureClass?: string; /** * CSS class name added to the disclosure title/summary element. * @default "disclosure-title" */ disclosureTitleClass?: string; /** * CSS class name added to the disclosure body element. * @default "disclosure-body" */ disclosureBodyClass?: string; /** * Enable accordion grouping for consecutive disclosure widgets. * When 2+ `[!]` blocks appear consecutively, they are wrapped in * an accordion container where opening one closes the others. * @default true */ enableAccordion?: boolean; /** * CSS class name added to the accordion wrapper container. * @default "disclosure-accordion" */ accordionClass?: string; /** * Enable tree view styling for nested disclosure widgets. * Nested `[!]` blocks get `disclosure-tree` class + `data-depth` * attributes for indentation and visual tree lines. * @default true */ enableTreeView?: boolean; /** * Allow raw HTML in markdown to pass through to the rendered callout body. * * **Default: `false` (safe-by-default).** * * When `false` (the default), raw HTML in markdown source is HTML-escaped * before being placed into the callout body. This prevents XSS attacks * from untrusted markdown content (e.g. `` * is rendered as escaped text, not executed). * * When `true`, raw HTML in markdown is passed through verbatim to the * rendered HTML โ€” matching the behavior of `remark-rehype`'s * `allowDangerousHtml` option. Use this only if you fully trust your * markdown source AND have run it through a sanitizer (e.g. rehype-sanitize). * * @default false * @security Only set this to `true` if your markdown source is trusted * or has been sanitized. */ allowDangerousHtml?: boolean; /** * Map of aliases for callout types. Aliases let users use shorter or * alternative names for builtin or custom callout types. * * Keys are the canonical type (must exist in builtins or `customCallouts`). * Values are arrays of alias names that will resolve to the canonical type. * * @example * ```ts * aliases: { * note: ["n", "info-note"], * tip: ["t"], * } * // Now `> [!N]` and `> [!INFO-NOTE]` render as `note` callouts. * ``` * * @default undefined (no aliases) */ aliases?: Record; /** * Whether to render icons in the callout title. * * - `true` (default): render the icon (builtin SVG or custom icon) * - `false`: skip the icon entirely (no ``) * * Can be overridden per-callout via `> [!NOTE]{icon=false}` syntax. * * @default true */ showIndicator?: boolean; /** * Default icon set for builtin callout types. * * - `"octicon"` (default): GitHub Octicons (current behavior) * - `"lucide"`: Lucide icons (matching rehype-callouts' Obsidian theme) * - `"emoji"`: Emoji icons (e.g. โ„น๏ธ for note, ๐Ÿ’ก for tip) * - `"none"`: No icons (equivalent to `showIndicator: false`) * * Custom callouts always use their configured `icon` regardless of this option. * * @default "octicon" */ iconSet?: "octicon" | "lucide" | "emoji" | "none"; /** * Visual density / appearance for callouts. * * - `"default"` (default): Full callout with title bar, icon, border, background. * - `"minimal"`: Reduced padding, smaller title, no background color. * - `"simple"`: No title bar โ€” title appears as bold inline text above body. * - `"hidden"`: No title, no icon, just the body content with a left border. * * Can be overridden per-callout via `> [!NOTE]{appearance=minimal}` syntax. * * @default "default" */ appearance?: "default" | "minimal" | "simple" | "hidden"; /** * Tag names for the callout HTML structure. Override to customize the * output HTML elements (e.g. use `
` instead of `