Props Reference

This page is the full prop contract for @lyfie/luthor presets.

• Base preset: ExtensiveEditor
• Wrapper presets: ComposeEditor, SimpleEditor, LegacyRichEditor, MDEditor, HTMLEditor, SlashEditor, HeadlessEditorPreset

1) ExtensiveEditorProps (base contract)

Content and mode

Lifecycle and ref

ExtensiveEditorRef methods:

• injectJSON(content: string): void
• getJSON(): string
• getMarkdown(): string
• getHTML(): string

Toolbar, layout, and visibility

Feature gating and behavior

Slash, palette, and shortcuts

Theme and style system

Typography and code configuration

2) Preset-specific prop layers

ComposeEditorProps

ComposeEditorProps = Omit<ExtensiveEditorProps, "featureFlags"> & { featureFlags?: FeatureFlagOverrides; compactToolbar?: boolean }

• Adds:
  • featureFlags?
  • compactToolbar?: boolean (default false)
• Forces mode profile:
  • availableModes = ["visual", "json"]

SimpleEditorProps

SimpleEditor is a purpose-built message input wrapper and does not expose the full extensive surface directly.

SimpleEditorSendPayload:

• format: 'md' | 'json'
• text: string (selected output format)
• markdown: string
• json: string

LegacyRichEditorProps

LegacyRichEditorProps = Omit<ExtensiveEditorProps, "featureFlags" | "availableModes" | "initialMode" | "defaultEditorView"> & { sourceFormat?: 'markdown' | 'html' | 'both'; initialMode?: LegacyRichEditorMode; defaultEditorView?: LegacyRichEditorMode; featureFlags?: FeatureFlagOverrides }

• sourceFormat default: 'both'
• Mode sets by source format:
  • 'both' -> ['visual', 'markdown', 'html']
  • 'markdown' -> ['visual', 'json', 'markdown']
  • 'html' -> ['visual', 'json', 'html']

MDEditorProps

• Inherits LegacyRichEditorProps
• Fixes source format to markdown
• Allowed modes: 'visual' | 'json' | 'markdown'

HTMLEditorProps

• Inherits LegacyRichEditorProps
• Fixes source format to html
• Allowed modes: 'visual' | 'json' | 'html'

SlashEditorProps

SlashEditorProps = Omit<ExtensiveEditorProps, "featureFlags" | "isToolbarEnabled"> & { slashVisibility?: SlashCommandVisibility; isDraggableEnabled?: boolean; featureFlags?: FeatureFlagOverrides; isToolbarEnabled?: boolean }

• isToolbarEnabled default: false
• isDraggableEnabled default: true
• Enforced behavior:
  • slashCommand: true
  • commandPalette: false

HeadlessEditorPresetProps

HeadlessEditorPresetProps = Omit<ExtensiveEditorProps, "featureFlags" | "availableModes" | "initialMode" | "defaultEditorView"> & { initialMode?: 'visual' | 'json' | 'markdown' | 'html'; defaultEditorView?: same; featureFlags?: FeatureFlagOverrides }

• Allowed modes fixed to: ['visual', 'json', 'markdown', 'html']
• Uses lightweight feature policy defaults and enforcement.

3) Practical usage patterns

Save all output formats from ref

import { useRef } from 'react';
import { ExtensiveEditor, type ExtensiveEditorRef } from '@lyfie/luthor';

export function SaveExample() {
  const ref = useRef<ExtensiveEditorRef>(null);

  return (
    <>
      <button
        onClick={() => {
          const methods = ref.current;
          if (!methods) return;
          console.log({
            json: methods.getJSON(),
            markdown: methods.getMarkdown(),
            html: methods.getHTML(),
          });
        }}
      >
        Save
      </button>
      <ExtensiveEditor ref={ref} />
    </>
  );
}

Disable heavy features without changing preset

<ExtensiveEditor
  featureFlags={{
    image: false,
    table: false,
    iframeEmbed: false,
    youTubeEmbed: false,
    customNode: false,
  }}
/>

Markdown-first editing profile

<MDEditor initialMode="visual" defaultEditorView="markdown" />

4) Related pages

• Architecture
• Feature Flags
• Presets