MarkedInputProps

Defined in: packages/markput/src/components/MarkedInput.tsx:38

Props for MarkedInput component with hierarchical type support.

Type parameters:

• TMarkProps - Type of props for the global Mark component (default: MarkProps)
• TOverlayProps - Type of props for the global Overlay component (default: OverlayProps)

The global Mark and Overlay components serve as defaults when options don’t specify their own slot components. Each option can override these with option.slots.

Default types:

• TMarkProps = MarkProps: Type-safe base props (value, meta, nested, children)
• TOverlayProps = OverlayProps: Type-safe overlay props (trigger, data)

Example

// Using global Mark component with custom props type
interface ButtonProps { label: string; onClick: () => void }
<MarkedInput<ButtonProps>
  Mark={Button}
  options={[{
    markup: '@[__value__]',
    slotProps: { mark: { label: 'Click me', onClick: () => {} } }
  }]}
/>

Extends

• CoreMarkputProps

Type Parameters

Type Parameter	Default type
TMarkProps	MarkProps
TOverlayProps	OverlayProps

Properties

className?

optional className: string;

Defined in: packages/markput/src/components/MarkedInput.tsx:53

Additional classes

---

defaultValue?

optional defaultValue: string;

Defined in: packages/core/src/shared/types.ts:46

Default value

Inherited from

CoreMarkputProps.defaultValue

---

Mark?

optional Mark: ComponentType<TMarkProps>;

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

Global component used for rendering markups (fallback for option.slots.mark)

---

onChange()?

optional onChange: (value) => void;

Defined in: packages/core/src/shared/types.ts:48

Change event handler

Parameters

Parameter	Type
value	string

Returns

void

Inherited from

CoreMarkputProps.onChange

---

options?

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

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

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

Default

[{overlayTrigger: '@', markup: '@[__label__](__value__)', data: []}]

Overrides

CoreMarkputProps.options

---

Overlay?

optional Overlay: ComponentType<TOverlayProps>;

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

Global component used for rendering overlays like suggestions, mentions, etc (fallback for option.slots.overlay)

---

readOnly?

optional readOnly: boolean;

Defined in: packages/core/src/shared/types.ts:50

Prevents from changing the value

Inherited from

CoreMarkputProps.readOnly

---

ref?

optional ref: ForwardedRef<MarkedInputHandler>;

Defined in: packages/markput/src/components/MarkedInput.tsx:40

Ref to handler

---

showOverlayOn?

optional showOverlayOn: OverlayTrigger;

Defined in: packages/markput/src/components/MarkedInput.tsx:72

Events that trigger overlay display

Default

'change'

Overrides

CoreMarkputProps.showOverlayOn

---

slotProps?

optional slotProps: SlotProps;

Defined in: packages/markput/src/components/MarkedInput.tsx:67

Props to pass to slot components

Example

slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}

---

slots?

optional slots: Slots;

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

Override internal components using slots

Example

slots={{ container: 'div', span: 'span' }}

---

style?

optional style: CSSProperties;

Defined in: packages/markput/src/components/MarkedInput.tsx:55

Additional style

---

value?

optional value: string;

Defined in: packages/core/src/shared/types.ts:44

Annotated text with markups for mark

Inherited from

CoreMarkputProps.value