@synclineapi/mdx-editor 1.0.2 → 2.0.0

package/README.md

@@ -120,7 +120,6 @@ const editor = new SynclineMDXEditor({
 | `mode` | `'split' \| 'editor' \| 'preview'` | `'split'` | Initial layout mode. |
 | `placeholder` | `string` | — | Placeholder shown in an empty editor. |
 | `readOnly` | `boolean` | `false` | Prevent all content mutations. |
-| `renderers` | `Record<string, RendererFn>` | — | Custom preview renderer overrides. |
 | `locale` | `Partial<EditorLocale>` | — | i18n label overrides. |
 ---
 
@@ -291,65 +290,107 @@ Use `$1`, `$2`, … as cursor tab stops. The cursor lands on `$1` after expansio
 
 Plugins are the recommended way to bundle a toolbar button, keyboard shortcut, preview renderer, and autocomplete items together as one reusable unit.
 
+### `components` — declarative JSX-style components (recommended)
+
+Use `defineComponent()` to create fully typed component renderers. TypeScript infers the exact prop types from your `attrs` declaration — no regex, no string parsing, no manual casts.
+
+```ts
+import { defineComponent } from '@synclineapi/mdx-editor';
+import type { EditorPlugin } from '@synclineapi/mdx-editor';
+
+export function badgePlugin(): EditorPlugin {
+  return {
+    name: 'badge',
+
+    toolbarItems: [{
+      id: 'badge',
+      label: 'Badge',
+      icon: '<svg>...</svg>',
+      tooltip: 'Insert badge',
+      action: ({ editor }) => {
+        editor.insertBlock('<Badge type="info" label="New" />');
+      },
+    }],
+
+    // ✅ Declarative, typed, zero regex
+    components: [
+      defineComponent({
+        tag: 'Badge',
+        attrs: {
+          type:  { type: 'enum', options: ['success', 'warning', 'error', 'info'], default: 'info' },
+          label: { type: 'string', default: 'Badge' },
+        },
+        render: ({ type, label }) =>
+          //       ^ 'success' | 'warning' | 'error' | 'info'  (fully inferred!)
+          //              ^ string
+          `<span class="badge badge-${type}">${label}</span>`,
+      }),
+    ],
+
+    styles: `.badge { padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600; }`,
+  };
+}
+```
+
+**`attrs` type mapping:**
+
+| Declaration | `render` receives |
+|---|---|
+| `{ type: 'enum', options: ['a','b','c'] }` | `'a' \| 'b' \| 'c'` |
+| `{ type: 'number', default: 2 }` | `number` |
+| `{ type: 'boolean', default: false }` | `boolean` |
+| `{ type: 'string' }` | `string` |
+| _(block component)_ | `+ children?: string` |
+
+Tokens and autocomplete completions are **registered automatically** for every tag listed in `components` — no `provideTokens` or `completions` arrays needed.
+
+### `patterns` — raw regex for non-JSX fenced syntax
+
+Use `patterns` only when you need to match syntax that cannot be expressed as a JSX component — fenced code blocks, `:::type` admonition fences, `$...$` math delimiters, and similar:
+
 ```ts
 import type { EditorPlugin } from '@synclineapi/mdx-editor';
 
 const myPlugin: EditorPlugin = {
   name: 'my-custom-block',
 
-  // Toolbar button
   toolbarItems: [{
     id: 'myBlock',
     label: 'My Block',
     icon: '<svg>...</svg>',
     tooltip: 'Insert my block (Ctrl+Shift+M)',
     action: ({ editor }) => {
-      editor.insertBlock('<MyBlock>\n  Content\n</MyBlock>');
+      editor.insertBlock(':::myblock\nContent\n:::');
     },
   }],
 
-  // Autocomplete — same content as the toolbar action, now also reachable
-  // by typing the trigger word in the editor
-  completions: [
-    {
-      label: 'myblock',
-      kind: 'snip',
-      detail: '<MyBlock> component',
-      body: '<MyBlock>\n  $1Content\n</MyBlock>',
-    },
-    // Component name entry (shows in autocomplete as a class suggestion)
-    { label: 'MyBlock', kind: 'cls', detail: 'custom block component' },
-  ],
-
-  // Preview renderer
-  renderers: [{
+  // ⚠️ Only for non-JSX fenced syntax — use `components` for JSX-style tags
+  patterns: [{
     name: 'myBlock',
-    pattern: /<MyBlock>([\s\S]*?)<\/MyBlock>/g,
+    pattern: /:::myblock\n([\s\S]*?):::/g,
     render: (match) => {
-      const m = match.match(/<MyBlock>([\s\S]*?)<\/MyBlock>/);
+      const m = match.match(/:::myblock\n([\s\S]*?):::/);
       return `<div class="my-block">${m?.[1] ?? ''}</div>`;
     },
+    priority: 5,
+    // Co-locate syntax token colouring with the pattern — fully self-contained
+    provideTokens: (line) => {
+      const segs = [];
+      const m = line.match(/^(:::)(myblock)/);
+      if (m) {
+        segs.push({ cls: 'kw',  start: 0, end: 3 });
+        segs.push({ cls: 'cls', start: 3, end: 3 + m[2].length });
+      } else if (line === ':::') {
+        segs.push({ cls: 'kw', start: 0, end: 3 });
+      }
+      return segs;
+    },
   }],
 
-  // Syntax highlighting — called per-line, highlight component tag
-  // names, attribute names, and attribute values automatically.
-  // Use the built-in helper for JSX components:
-  provideTokens: componentTagTokens(['MyBlock']),
-  // Or write a custom provider for any syntax pattern:
-  // provideTokens: (line) => {
-  //   const segs = [];
-  //   const m = line.match(/^(:::)(\w+)/);
-  //   if (m) {
-  //     segs.push({ cls: 'kw', start: 0, end: 3 });
-  //     segs.push({ cls: 'cls', start: 3, end: 3 + m[2].length });
-  //   }
-  //   return segs;
-  // },
-
   shortcuts: [
     {
       key: 'Ctrl+Shift+m',
-      action: ({ editor }) => editor.insertBlock('<MyBlock>\n  Content\n</MyBlock>'),
+      action: ({ editor }) => editor.insertBlock(':::myblock\nContent\n:::'),
       description: 'Insert custom block',
     },
   ],

package/dist/core/define-component.d.ts

@@ -0,0 +1,124 @@
+import { AttrDef, AnyAttrDef, ComponentDefinition, CompletionItem, InferComponentProps, RendererConfig } from './types';
+type Schema = Record<string, AttrDef>;
+/**
+ * Parses a JSX attribute string like ` type="success" cols={2} open`
+ * into a plain object, coercing values according to the provided schema.
+ *
+ * Handles three syntaxes (in this precedence order):
+ *  1. `key="value"` and `key='value'`  → string (coerced per schema)
+ *  2. `key={value}`                    → number, boolean, or unquoted string
+ *  3. `key`                            → boolean `true` (flag attribute)
+ *
+ * Schema `default` values fill any attribute not present in the source.
+ */
+export declare function parseAttrs(attrStr: string, schema: Schema, tag?: string): Record<string, string | number | boolean>;
+/**
+ * Extracts all occurrences of a block component tag from a raw HTML/markdown
+ * string (typically the `children` of an outer component).
+ *
+ * Each returned item has:
+ * - `attrs` — the parsed attribute values (typed as a plain object)
+ * - `children` — the trimmed inner content of the block
+ *
+ * This is the key utility for **nested component rendering** (e.g. `<Tabs>`
+ * parsing inner `<Tab>` items, `<Steps>` parsing inner `<Step>` items).
+ *
+ * @example
+ * ```ts
+ * defineComponent({
+ *   tag: 'Tabs',
+ *   selfClosing: false,
+ *   attrs: {},
+ *   render: ({ children }) => {
+ *     const tabs = parseInnerComponents(children ?? '', 'Tab', {
+ *       title: { type: 'string', default: 'Tab' },
+ *     });
+ *     // tabs: Array<{ attrs: { title: string }; children: string }>
+ *     const buttons = tabs.map((t, i) =>
+ *       `<button class="${i === 0 ? 'active' : ''}">${t.attrs.title}</button>`
+ *     ).join('');
+ *     const panels = tabs.map((t, i) =>
+ *       `<div style="display:${i === 0 ? 'block' : 'none'}">${t.children}</div>`
+ *     ).join('');
+ *     return `<div class="tabs">${buttons}${panels}</div>`;
+ *   },
+ * })
+ * ```
+ */
+export declare function parseInnerComponents<S extends Schema>(html: string, tag: string, schema?: S): Array<{
+    attrs: {
+        [K in keyof S]: string | number | boolean;
+    };
+    children: string;
+}>;
+/**
+ * Builds a sensible default insertion template for a component.
+ * Used internally to generate toolbar-insert strings and autocomplete snippets.
+ */
+export declare function buildInsertTemplate(def: ComponentDefinition): string;
+/**
+ * Converts a declarative `ComponentDefinition` into a `RendererConfig`.
+ *
+ * **Strict typing:** TypeScript infers the exact prop types from `attrs` and
+ * enforces them on `render` — no regex, no match groups, no manual casting.
+ *
+ * | `attrs` declaration                              | `render` receives     |
+ * |--------------------------------------------------|-----------------------|
+ * | `{ type: 'enum', options: ['a','b','c'] }`       | `'a' \| 'b' \| 'c'`  |
+ * | `{ type: 'number', default: 2 }`                 | `number`              |
+ * | `{ type: 'boolean', default: false }`            | `boolean`             |
+ * | `{ type: 'string' }`                             | `string`              |
+ *
+ * ### Self-closing component
+ * ```ts
+ * defineComponent({
+ *   tag: 'Badge',
+ *   attrs: {
+ *     type:  { type: 'enum', options: ['success', 'warning', 'error', 'info'], default: 'info' },
+ *     label: { type: 'string', default: 'Badge' },
+ *   },
+ *   render: ({ type, label }) =>
+ *     //       ^ 'success' | 'warning' | 'error' | 'info'
+ *     //              ^ string — fully typed, no regex!
+ *     `<span class="badge badge-${type}">${label}</span>`,
+ * })
+ * ```
+ *
+ * ### Block component
+ * ```ts
+ * defineComponent({
+ *   tag: 'Card',
+ *   selfClosing: false,
+ *   attrs: {
+ *     title: { type: 'string', required: true, default: 'Card Title' },
+ *     cols:  { type: 'number', default: 1 },
+ *   },
+ *   render: ({ title, cols, children }) =>
+ *     `<div class="card cols-${cols}"><h3>${title}</h3>${children}</div>`,
+ * })
+ * ```
+ *
+ * ### Using inside a plugin
+ * ```ts
+ * // Via the `components` shorthand (recommended):
+ * export function myPlugin(): EditorPlugin {
+ *   return {
+ *     name: 'my-plugin',
+ *     components: [
+ *       defineComponent({ tag: 'Badge', attrs: { … }, render: ({ … }) => `…` }),
+ *     ],
+ *   };
+ * }
+ * ```
+ */
+export declare function defineComponent<S extends Record<string, AnyAttrDef>>(def: {
+    readonly tag: string;
+    readonly label?: string;
+    readonly description?: string;
+    readonly attrs?: S;
+    readonly selfClosing?: boolean;
+    readonly render: (props: InferComponentProps<S>) => string;
+    readonly priority?: number;
+    readonly completions?: CompletionItem[];
+}): RendererConfig;
+export {};

package/dist/core/types.d.ts

@@ -18,8 +18,6 @@ export interface EditorConfig {
     placeholder?: string;
     /** Read-only mode */
     readOnly?: boolean;
-    /** Custom renderer overrides */
-    renderers?: Record<string, RendererFn>;
     /** Locale / i18n overrides */
     locale?: Partial<EditorLocale>;
     /** Callback invoked whenever the markdown content changes */
@@ -41,8 +39,14 @@ export interface EditorPlugin {
     toolbarItems?: ToolbarItemConfig[];
     /** Keyboard shortcuts */
     shortcuts?: ShortcutConfig[];
-    /** Custom markdown-to-HTML renderers for preview */
-    renderers?: RendererConfig[];
+    /**
+     * Raw regex-based pattern renderers — **escape hatch for non-JSX syntax**.
+     *
+     * Use this only for content that cannot be expressed as a JSX component
+     * (e.g. fenced code blocks like ` ```mermaid` , `:::type` admonition fences,
+     * or `$...$` math). For all JSX-style components prefer `components`.
+     */
+    patterns?: RendererConfig[];
     /** Custom block parsers for extended MDX syntax */
     parsers?: ParserConfig[];
     /** CSS to inject */
@@ -102,6 +106,36 @@ export interface EditorPlugin {
      * ```
      */
     provideTokens?: PluginTokenProvider;
+    /**
+     * Declarative MDX component definitions — **the easiest way to add custom
+     * components without writing any regex**.
+     *
+     * Pass the return value of `defineComponent()` for each component.
+     * Syntax-highlight tokens and autocomplete completions are registered
+     * automatically for every listed tag.
+     *
+     * Use `patterns` only when you need to match non-JSX fenced-block syntax
+     * (` ```mermaid`, `:::type`, `$...$`) that cannot be expressed as a component.
+     *
+     * @example
+     * ```ts
+     * import { defineComponent } from '@synclineapi/mdx-editor';
+     *
+     * components: [
+     *   defineComponent({
+     *     tag: 'Badge',
+     *     attrs: {
+     *       type:  { type: 'enum', options: ['success', 'warning', 'error', 'info'], default: 'info' },
+     *       label: { type: 'string', default: 'Badge' },
+     *     },
+     *     render: ({ type, label }) =>
+     *       //       ^ 'success' | 'warning' | 'error' | 'info'  (strictly typed!)
+     *       `<span class="my-badge my-badge-${type}">${label}</span>`,
+     *   }),
+     * ],
+     * ```
+     */
+    components?: RendererConfig[];
 }
 export interface PluginContext {
     /** The editor instance */
@@ -322,16 +356,263 @@ export interface SelectionState {
     beforeText: string;
     afterText: string;
 }
+/**
+ * Attribute schema for a plain string attribute.
+ * @example `{ type: 'string', default: 'Card Title' }`
+ */
+export interface StringAttrDef {
+    readonly type: 'string';
+    readonly default?: string;
+    readonly required?: boolean;
+}
+/**
+ * Attribute schema for a numeric attribute.
+ * @example `{ type: 'number', default: 2 }`
+ */
+export interface NumberAttrDef {
+    readonly type: 'number';
+    readonly default?: number;
+    readonly required?: boolean;
+}
+/**
+ * Attribute schema for a boolean flag attribute.
+ * @example `{ type: 'boolean', default: false }`
+ */
+export interface BooleanAttrDef {
+    readonly type: 'boolean';
+    readonly default?: boolean;
+    readonly required?: boolean;
+}
+/**
+ * Attribute schema for an enum attribute.
+ *
+ * Use a non-empty `options` array. TypeScript will infer each string literal
+ * so the `render` function receives a union of the exact allowed values — no
+ * `as const` needed.
+ *
+ * @example
+ * ```ts
+ * { type: 'enum', options: ['success', 'warning', 'error', 'info'], default: 'info' }
+ * // render receives:  { type: 'success' | 'warning' | 'error' | 'info' }
+ * ```
+ */
+export interface EnumAttrDef<O extends string = string> {
+    readonly type: 'enum';
+    /**
+     * Non-empty tuple of allowed string values.
+     * The tuple type enables TypeScript to infer each literal without `as const`.
+     */
+    readonly options: readonly [O, ...O[]];
+    readonly default?: O;
+    readonly required?: boolean;
+}
+/**
+ * Union of all attribute definition kinds.
+ * Use the specific interfaces (`StringAttrDef`, `NumberAttrDef`, etc.) when
+ * you need the strict form, or `AttrDef` when you need the loose union.
+ */
+export type AttrDef = StringAttrDef | NumberAttrDef | BooleanAttrDef | EnumAttrDef<string>;
+export type AnyAttrDef = StringAttrDef | NumberAttrDef | BooleanAttrDef | EnumAttrDef<string>;
+/**
+ * Infers the runtime value type of a single `AttrDef`.
+ *
+ * | AttrDef kind  | Inferred type              |
+ * |---------------|----------------------------|
+ * | `string`      | `string`                   |
+ * | `number`      | `number`                   |
+ * | `boolean`     | `boolean`                  |
+ * | `enum`        | union of `options` literals |
+ *
+ * @example
+ * ```ts
+ * type T = InferAttrValue<EnumAttrDef<'a' | 'b' | 'c'>>; // 'a' | 'b' | 'c'
+ * type N = InferAttrValue<NumberAttrDef>;                  // number
+ * ```
+ */
+export type InferAttrValue<D extends AnyAttrDef> = D extends EnumAttrDef<infer O> ? O : D extends NumberAttrDef ? number : D extends BooleanAttrDef ? boolean : string;
+/**
+ * Derives the complete **props object type** of a `ComponentDefinition` from
+ * its `attrs` schema.  This is the exact type that the `render` function
+ * receives at the call site.
+ *
+ * For block components (`selfClosing: false`) the type also includes the
+ * optional `children` field containing the inner content.
+ *
+ * @example
+ * ```ts
+ * type Props = InferComponentProps<{
+ *   type:  EnumAttrDef<'success' | 'warning' | 'error' | 'info'>;
+ *   count: NumberAttrDef;
+ *   open:  BooleanAttrDef;
+ *   label: StringAttrDef;
+ * }>;
+ * // {
+ * //   type:     'success' | 'warning' | 'error' | 'info';
+ * //   count:    number;
+ * //   open:     boolean;
+ * //   label:    string;
+ * //   children?: string;
+ * // }
+ * ```
+ */
+export type InferComponentProps<S extends Record<string, AnyAttrDef>> = {
+    readonly [K in keyof S]: InferAttrValue<S[K]>;
+} & {
+    readonly children?: string;
+};
+/**
+ * Loose props alias — kept for backward compatibility and for cases where
+ * you do not need per-attribute literal precision.
+ */
+export type ComponentProps = Record<string, string | number | boolean> & {
+    children?: string;
+};
+/**
+ * Declarative MDX component definition — **no regex required**.
+ *
+ * When used with `defineComponent()`, TypeScript infers the exact prop types
+ * from `attrs` and enforces them on `render`.  When listed inline inside
+ * `EditorPlugin.components`, props are still type-checked at the base level.
+ *
+ * The engine automatically:
+ *  - Builds the match regex from the `tag` name
+ *  - Parses and type-coerces all attributes
+ *  - Applies declared defaults for missing attributes
+ *  - Registers syntax-highlight tokens for the tag name
+ *  - Creates autocomplete entries
+ *
+ * @example Self-closing component
+ * ```ts
+ * defineComponent({
+ *   tag: 'Badge',
+ *   attrs: {
+ *     type:  { type: 'enum', options: ['success', 'warning', 'error', 'info'], default: 'info' },
+ *     label: { type: 'string', default: 'Badge' },
+ *     count: { type: 'number', default: 0 },
+ *   },
+ *   render: ({ type, label, count }) => {
+ *     //       ^ 'success' | 'warning' | 'error' | 'info'
+ *     //              ^ string    ^ number  — all strictly typed!
+ *     return `<span class="badge badge-${type}">${label} (${count})</span>`;
+ *   },
+ * })
+ * ```
+ *
+ * @example Block component (`selfClosing: false`)
+ * ```ts
+ * defineComponent({
+ *   tag: 'Card',
+ *   selfClosing: false,
+ *   attrs: {
+ *     title: { type: 'string', required: true, default: 'Card Title' },
+ *     icon:  { type: 'string' },
+ *     href:  { type: 'string' },
+ *   },
+ *   render: ({ title, icon, href, children }) =>
+ *     `<div class="card"><h3>${icon ?? ''} ${title}</h3>${children}</div>`,
+ * })
+ * ```
+ */
+export interface ComponentDefinition<S extends Record<string, AnyAttrDef> = Record<string, AttrDef>> {
+    /** JSX tag name, e.g. `'Badge'`, `'Card'`, `'CalloutBox'`. */
+    readonly tag: string;
+    /** Human-readable label for autocomplete. Falls back to `tag` when omitted. */
+    readonly label?: string;
+    /** Short description shown in the autocomplete popup detail / tooltip. */
+    readonly description?: string;
+    /**
+     * Attribute schema — keys are attribute names, values are their type
+     * definitions.  Attributes absent from the schema are forwarded as strings.
+     */
+    readonly attrs?: S;
+    /**
+     * `true`  → self-closing inline component: `<Tag attr="val" />`  *(default)*
+     * `false` → block component that wraps children: `<Tag>…</Tag>`
+     */
+    readonly selfClosing?: boolean;
+    /**
+     * Transforms the parsed, typed props into an HTML string.
+     * TypeScript infers the exact type of each prop from `attrs`.
+     */
+    readonly render: (props: InferComponentProps<S>) => string;
+    /** Renderer priority — higher values run before lower ones. Default: `10`. */
+    readonly priority?: number;
+    /**
+     * Autocomplete completions co-located with this component — typically
+     * snippet variants for the different attribute combinations.
+     * PluginManager merges these automatically; no separate plugin-level
+     * `completions` array needed.
+     */
+    readonly completions?: CompletionItem[];
+}
 export type RendererFn = (content: string, attrs?: Record<string, string>) => string;
 export interface RendererConfig {
     /** Name of the custom block/component */
     name: string;
+    /**
+     * JSX tag name — set automatically by `defineComponent()`.
+     * Used internally by the PluginManager to auto-register syntax-highlight
+     * tokens and autocomplete entries. Leave unset for raw regex renderers.
+     */
+    tag?: string;
+    /**
+     * Human-readable label shown in the autocomplete popup.
+     * Falls back to `tag` when omitted.
+     */
+    label?: string;
+    /**
+     * Short description shown as the autocomplete detail / tooltip.
+     * Falls back to `<Tag> component` when omitted.
+     */
+    description?: string;
+    /**
+     * Autocomplete completions co-located with this component.
+     * Typically snippet entries for different variants of the tag.
+     * PluginManager merges these into the plugin-level completion list
+     * automatically — no separate top-level `completions` array needed.
+     *
+     * @example
+     * ```ts
+     * defineComponent({
+     *   tag: 'Badge',
+     *   completions: [
+     *     { label: 'badge-success', kind: 'snip', body: '<Badge type="success" label="$1" />' },
+     *     { label: 'badge-error',   kind: 'snip', body: '<Badge type="error"   label="$1" />' },
+     *   ],
+     *   ...
+     * })
+     * ```
+     */
+    completions?: CompletionItem[];
     /** Regex pattern to match blocks in markdown */
     pattern: RegExp;
     /** Render function: matched content → HTML */
     render: RendererFn;
     /** Priority (higher = processed first) */
     priority?: number;
+    /**
+     * Optional per-pattern line-level token provider for syntax highlighting.
+     *
+     * Co-locate the tokeniser with its pattern so the pattern entry is fully
+     * self-contained — no separate top-level `provideTokens` needed.
+     * PluginManager automatically composes all per-pattern providers together
+     * with the plugin-level `provideTokens` (if any).
+     *
+     * @example
+     * ```ts
+     * patterns: [{
+     *   name: 'myfence',
+     *   pattern: /```myfence\n([\s\S]*?)```/g,
+     *   render: (m) => `<div>${m[1]}</div>`,
+     *   provideTokens: (line) => {
+     *     if (line.startsWith('```myfence'))
+     *       return [{ cls: 'kw', start: 0, end: 10 }];
+     *     return [];
+     *   },
+     * }],
+     * ```
+     */
+    provideTokens?: PluginTokenProvider;
 }
 export interface ParserConfig {
     /** Parser name */

package/dist/examples/badge-plugin.ts

@@ -1,4 +1,5 @@
 import type { EditorPlugin } from '../../src/core/types';
+import { defineComponent } from '../../src/core/define-component';
 
 /**
  * Example custom plugin: Badge
@@ -67,23 +68,20 @@ export function badgePlugin(): EditorPlugin {
             },
         ],
 
-        // ── Custom renderer (markdown → HTML in preview) ─────
-        renderers: [
-            {
-                name: 'badge',
-                pattern: /<Badge\s+type="([^"]*)"(?:\s+label="([^"]*)")?\s*\/>/g,
-                render: (match) => {
-                    const m = match.match(
-                        /<Badge\s+type="([^"]*)"(?:\s+label="([^"]*)")?\s*\/>/
-                    );
-                    if (!m) return match;
-
-                    const type = m[1] || 'info';
-                    const label = m[2] || type;
-
-                    return `<span class="smdx-badge smdx-badge-${type}">${label}</span>`;
+        // ── Declarative component ─────────────────────────────
+        // tokens, pattern matching, and attribute parsing are handled
+        // automatically — no regex, no provideTokens needed.
+        components: [
+            defineComponent({
+                tag: 'Badge',
+                selfClosing: true,
+                attrs: {
+                    type: { type: 'enum', options: ['success', 'warning', 'error', 'info'] as const, default: 'info' },
+                    label: { type: 'string', default: 'Badge' },
                 },
-            },
+                render: ({ type, label }) =>
+                    `<span class="smdx-badge smdx-badge-${type}">${label}</span>`,
+            }),
         ],
 
         // ── Scoped CSS ───────────────────────────────────────

package/dist/index.d.ts

@@ -7,7 +7,8 @@ export { Toolbar } from './core/toolbar';
 export { Renderer } from './core/renderer';
 export { History } from './core/history';
 export { icons } from './core/icons';
-export type { EditorConfig, EditorPlugin, EditorAPI, EditorMode, PluginContext, ToolbarConfig, ToolbarRow, ToolbarGroup, ToolbarDivider, ToolbarItemConfig, ToolbarAction, ToolbarActionContext, SelectionState, RendererFn, RendererConfig, ParserConfig, ShortcutConfig, EventHandler, EditorLocale, CompletionItem, CompletionKind, TokenSegment, PluginTokenProvider, } from './core/types';
+export { defineComponent, parseInnerComponents, buildInsertTemplate } from './core/define-component';
+export type { EditorConfig, EditorPlugin, EditorAPI, EditorMode, PluginContext, ToolbarConfig, ToolbarRow, ToolbarGroup, ToolbarDivider, AttrDef, AnyAttrDef, StringAttrDef, NumberAttrDef, BooleanAttrDef, EnumAttrDef, InferAttrValue, InferComponentProps, ComponentProps, ComponentDefinition, ToolbarItemConfig, ToolbarAction, ToolbarActionContext, SelectionState, RendererFn, RendererConfig, ParserConfig, ShortcutConfig, EventHandler, EditorLocale, CompletionItem, CompletionKind, TokenSegment, PluginTokenProvider, } from './core/types';
 export { componentTagTokens, mdxBaseTokens, composeTokenProviders } from './plugins/token-utils';
 export { headingPlugin, boldPlugin, italicPlugin, strikethroughPlugin, quotePlugin, linkPlugin, imagePlugin, codePlugin, unorderedListPlugin, orderedListPlugin, taskListPlugin, tablePlugin, highlightPlugin, admonitionPlugin, tabPlugin, imageBackgroundPlugin, imageFramePlugin, accordionPlugin, accordionGroupPlugin, multiColumnPlugin, cardPlugin, cardGroupPlugin, stepPlugin, tipPlugin, containerPlugin, copyTextPlugin, tooltipPlugin, embedVideoPlugin, embedOthersPlugin, mermaidPlugin, emojiPlugin, formulaPlugin, insertPlugin, tocPlugin, breakLinePlugin, horizontalRulePlugin, allPlugins, defaultToolbar, } from './plugins';
 export { Renderer as RendererPipeline } from './core/renderer/Renderer';