Skip to content

MarkedInputProps

Defined in: react/markput/src/components/MarkedInput.tsx:28

Props for MarkedInput component.

<MarkedInput<ChipProps>
Mark={Chip}
options={[{
markup: '@[__value__]',
mark: { label: 'Click me' }
}]}
/>
Type Parameter Default type Description
TMarkProps MarkProps Type of props for the global Mark component
TOverlayProps extends CoreOption["overlay"] OverlayProps Type of props for the global Overlay component
optional className: string;

Defined in: react/markput/src/components/MarkedInput.tsx:44

Additional classes


optional defaultValue: string;

Defined in: react/markput/src/components/MarkedInput.tsx:71

Initial value for uncontrolled mode — the value the editor starts from when no value prop is given. It is read once: setting it later does not move an editor that already holds a value, and it is NOT what a controlled editor reverts to. Dropping value (passing undefined after a string) keeps whatever is on screen; to go back to some earlier text, pass it.


optional draggable: boolean | DraggableConfig;

Defined in: react/markput/src/components/MarkedInput.tsx:115

Enable drag interaction on rows. Ineffective when separator is null.

false

optional history: boolean;

Defined in: react/markput/src/components/MarkedInput.tsx:111

Does the editor keep its own undo stack (ADR-0012). Ctrl/Cmd+Z undoes and Shift+Ctrl/Cmd+Z redoes, in both value modes — in a controlled editor an entry is recorded only once the parent has echoed the value back, so an emission your onChange declines leaves nothing behind.

false turns both keys back into no-ops. It does NOT hand undo to the browser: the input guard has swallowed native undo since ADR-0006, because a native undo would edit DOM the model owns.

true

optional indent: string;

Defined in: react/markput/src/components/MarkedInput.tsx:99

The indent unit a NESTED row leads with (ADR-0010): editor-level like separator, and structural in the same sense — a leading run of it at a row’s own start belongs to no markup and no caret may enter it.

'' turns nesting off, and with it row TYPING on every indented line: a line whose first character is not an opener is a paragraph. Pass it when the document stores leading indentation as content.

'\t'

optional Mark: ComponentType<TMarkProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:34

Global component used for rendering markups (fallback for option.Mark)


optional onChange: (value) => void;

Defined in: react/markput/src/components/MarkedInput.tsx:73

Change event handler

Parameter Type
value string

void


optional options: Option<TMarkProps, TOverlayProps>[];

Defined in: react/markput/src/components/MarkedInput.tsx:42

Configuration options for markups and overlays. Each option can specify its own component via option.Mark or option.Overlay. Falls back to global Mark/Overlay components when not specified.


optional Overlay: ComponentType<TOverlayProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:36

Global component used for rendering overlays (fallback for option.Overlay)


optional readOnly: boolean;

Defined in: react/markput/src/components/MarkedInput.tsx:75

Read-only mode


optional ref: Ref<MarkputHandle>;

Defined in: react/markput/src/components/MarkedInput.tsx:30

Ref to the editor API (spec §2.3)


optional separator: string | null;

Defined in: react/markput/src/components/MarkedInput.tsx:88

The structural row separator (issue 08, ADR-0011): editor-level, never part of any markup, and the whole of what makes a document rows. Each piece between two separators is a row, with its own drag grip and row menu.

null says the value never splits: one document, no rows, no row controls — a plain annotated text field.

An empty string separates nothing: the editor reports it and renders the document as if it were null.

'\n'

optional showOverlayOn: OverlayTrigger;

Defined in: react/markput/src/components/MarkedInput.tsx:61

Events that trigger overlay display

'change'

optional slotProps: SlotProps;

Defined in: react/markput/src/components/MarkedInput.tsx:56

Props to pass to slot components

slotProps={{ container: { onKeyDown: handler } }}

optional slots: Slots;

Defined in: react/markput/src/components/MarkedInput.tsx:51

Override internal components using slots

slots={{ container: 'div' }}

optional Span: ComponentType<SpanProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:32

Global component used for rendering text tokens (default: built-in Span)


optional style: CSSProperties;

Defined in: react/markput/src/components/MarkedInput.tsx:46

Additional style


optional value: string;

Defined in: react/markput/src/components/MarkedInput.tsx:63

Annotated text with markups