From 4b21be588e5ad7baba82fddd8559cee6e982e001 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sun, 7 Dec 2025 00:30:31 +0300 Subject: [PATCH 1/4] Refactor MarkedInput and Option interfaces to streamline overlay configuration - Updated the MarkedInput component to use a more intuitive overlay configuration, replacing `slotProps` with direct `overlay` properties. - Simplified the Option interface by removing `slotProps` and directly integrating `mark` and `overlay` properties for better clarity and usability. - Enhanced documentation to reflect these changes, ensuring accurate API references and examples. - Adjusted related components and stories to align with the new structure, improving overall consistency across the codebase. --- .../markput/src/components/MarkedInput.tsx | 34 ++---- .../markput/src/components/StoreProvider.tsx | 2 +- .../components/Suggestions/Suggestions.tsx | 2 +- packages/markput/src/constants.ts | 10 +- .../src/features/overlay/useTrigger.tsx | 2 +- packages/markput/src/types.ts | 44 +++----- .../src/utils/functions/createMarkedInput.ts | 11 +- packages/markput/src/utils/hooks/useSlot.ts | 60 +++++------ .../storybook/src/pages/Ant/Ant.stories.tsx | 4 +- .../storybook/src/pages/Base/Base.stories.tsx | 32 +++--- .../SingleEditableMarkdown.tsx | 72 ++++++------- .../src/pages/Material/Material.stories.tsx | 26 ++--- .../src/pages/Nested/MarkdownOptions.ts | 4 +- .../src/pages/Nested/Nested.stories.tsx | 100 ++++++++---------- .../src/pages/Nested/nested.spec.tsx | 4 +- .../src/pages/Overlay/Overlay.spec.tsx | 8 +- .../src/pages/Overlay/Overlay.stories.tsx | 12 +-- .../src/pages/Rsuite/Rsuite.stories.tsx | 8 +- .../src/components/demos/Step2Demo.tsx | 8 +- .../content/docs/api/functions/MarkedInput.md | 4 +- .../docs/api/functions/createMarkedInput.md | 4 +- .../api/interfaces/ConfiguredMarkedInput.md | 4 +- .../content/docs/api/interfaces/MarkProps.md | 22 +++- .../api/interfaces/MarkedInputComponent.md | 8 +- .../docs/api/interfaces/MarkedInputHandler.md | 8 +- .../docs/api/interfaces/MarkedInputProps.md | 63 ++++------- .../src/content/docs/api/interfaces/Option.md | 76 ++++--------- .../docs/api/interfaces/OverlayHandler.md | 2 +- .../docs/api/interfaces/OverlayProps.md | 20 +++- .../docs/guides/overlay-customization.md | 46 +++----- 30 files changed, 288 insertions(+), 412 deletions(-) diff --git a/packages/markput/src/components/MarkedInput.tsx b/packages/markput/src/components/MarkedInput.tsx index a1dfc58a..2364d37f 100644 --- a/packages/markput/src/components/MarkedInput.tsx +++ b/packages/markput/src/components/MarkedInput.tsx @@ -9,28 +9,18 @@ import {Whisper} from './Whisper' import type {CoreMarkputProps, OverlayTrigger} from '@markput/core' /** - * Props for MarkedInput component with hierarchical type support. + * Props for MarkedInput component. * - * 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) + * @template TMarkProps - Type of props for the global Mark component + * @template TOverlayProps - Type of props for the global Overlay component * * @example * ```typescript - * // Using global Mark component with custom props type - * interface ButtonProps { label: string; onClick: () => void } - * - * Mark={Button} + * + * Mark={Chip} * options={[{ * markup: '@[__value__]', - * slotProps: { mark: { label: 'Click me', onClick: () => {} } } + * mark: { label: 'Click me' } * }]} * /> * ``` @@ -38,17 +28,16 @@ import type {CoreMarkputProps, OverlayTrigger} from '@markput/core' export interface MarkedInputProps extends CoreMarkputProps { /** Ref to handler */ ref?: ForwardedRef - /** Global component used for rendering markups (fallback for option.slots.mark) */ + /** Global component used for rendering markups (fallback for option.mark.slot) */ Mark?: ComponentType - /** Global component used for rendering overlays like suggestions, mentions, etc (fallback for option.slots.overlay) */ + /** Global component used for rendering overlays (fallback for option.overlay.slot) */ Overlay?: ComponentType /** * Configuration options for markups and overlays. - * Each option can specify its own slot components and props via option.slots and option.slotProps. + * Each option can specify its own slot component via mark.slot or overlay.slot. * Falls back to global Mark/Overlay components when not specified. - * @default [{overlayTrigger: '@', markup: '@[__label__](__value__)', data: []}] */ - options?: Option[] + options?: Option[] /** Additional classes */ className?: string /** Additional style */ @@ -73,10 +62,9 @@ export interface MarkedInputProps( + ( props: MarkedInputProps ): JSX.Element | null - displayName?: string } diff --git a/packages/markput/src/components/StoreProvider.tsx b/packages/markput/src/components/StoreProvider.tsx index 15e1dd7b..8938eb7f 100644 --- a/packages/markput/src/components/StoreProvider.tsx +++ b/packages/markput/src/components/StoreProvider.tsx @@ -22,7 +22,7 @@ export const StoreProvider = ({props, children}: StoreProviderProps) => { return } -function normalizeProps(props: MarkedInputProps): MarkedInputProps { +function normalizeProps(props: MarkedInputProps): MarkedInputProps { const className = mergeClassNames(DEFAULT_CLASS_NAME, props.className, props.slotProps?.container?.className) const style = mergeStyles(props.style, props.slotProps?.container?.style) diff --git a/packages/markput/src/components/Suggestions/Suggestions.tsx b/packages/markput/src/components/Suggestions/Suggestions.tsx index 60e2ba17..0f11f4ff 100644 --- a/packages/markput/src/components/Suggestions/Suggestions.tsx +++ b/packages/markput/src/components/Suggestions/Suggestions.tsx @@ -7,7 +7,7 @@ import {KEYBOARD} from '@markput/core' export const Suggestions = () => { const {match, select, style, ref} = useOverlay() const [active, setActive] = useState(NaN) - const data = match.option.slotProps?.overlay?.data || [] + const data = match.option.overlay?.data || [] const filtered = useMemo( () => data.filter(s => s.toLowerCase().indexOf(match.value.toLowerCase()) > -1), [match.value, data] diff --git a/packages/markput/src/constants.ts b/packages/markput/src/constants.ts index b962251f..4416c29e 100644 --- a/packages/markput/src/constants.ts +++ b/packages/markput/src/constants.ts @@ -4,7 +4,7 @@ import type {Option} from './types' /** * React-specific default options for MarkedInput. * Extends core DEFAULT_OPTIONS with framework-specific configuration: - * - Includes trigger configuration via slotProps.overlay.trigger + * - Includes trigger configuration via overlay.trigger * - Provides empty data array for overlay suggestions * * Architecture: @@ -15,11 +15,9 @@ import type {Option} from './types' export const DEFAULT_OPTIONS: Option[] = [ { markup: DEFAULT_MARKUP, - slotProps: { - overlay: { - trigger: DEFAULT_OVERLAY_TRIGGER, - data: [], - }, + overlay: { + trigger: DEFAULT_OVERLAY_TRIGGER, + data: [], }, }, ] diff --git a/packages/markput/src/features/overlay/useTrigger.tsx b/packages/markput/src/features/overlay/useTrigger.tsx index 75bba259..5769d936 100644 --- a/packages/markput/src/features/overlay/useTrigger.tsx +++ b/packages/markput/src/features/overlay/useTrigger.tsx @@ -12,7 +12,7 @@ export const useTrigger = () => { _ => (store.overlayMatch = TriggerFinder.find( store.props.options, - (option: Option) => option.slotProps?.overlay?.trigger + (option: Option) => option.overlay?.trigger )), [] ) diff --git a/packages/markput/src/types.ts b/packages/markput/src/types.ts index d12c33dd..7b7565f8 100644 --- a/packages/markput/src/types.ts +++ b/packages/markput/src/types.ts @@ -8,9 +8,11 @@ import type {CoreOption} from '@markput/core' export type PropsOf = T extends ComponentType ? (P extends object ? P : never) : never /** - * Simplified props passed to Mark components via slotProps + * Props passed to Mark components. */ export interface MarkProps { + /** Custom component to render this mark */ + slot?: ComponentType /** Main content value of the mark */ value?: string /** Additional metadata for the mark */ @@ -22,9 +24,11 @@ export interface MarkProps { } /** - * Default props for Overlay components via slotProps. + * Props for Overlay components. */ export interface OverlayProps { + /** Custom component to render this overlay */ + slot?: ComponentType /** Trigger character(s) that activate the overlay */ trigger?: string /** Data array for suggestions/autocomplete */ @@ -32,7 +36,7 @@ export interface OverlayProps { } // ============================================================================ -// Option Interface with Automatic Type Inference +// Option Interface // ============================================================================ /** @@ -41,39 +45,23 @@ export interface OverlayProps { * @example * const option: Option = { * markup: '@[__value__]', - * slots: { mark: Button }, - * slotProps: { mark: { label: 'Click' } } + * mark: { slot: Button, label: 'Click' } * } */ -export interface Option extends CoreOption { +export interface Option extends CoreOption { /** - * Per-option slot components. + * Props for the mark component. + * Can be a static object or a function that transforms MarkProps. */ - slots?: { - /** Mark component for this option. */ - mark?: ComponentType - /** Overlay component for this option. */ - overlay?: ComponentType - } + mark?: MarkProps | ((props: MarkProps) => MarkProps) /** - * Props for slot components. + * Props for the overlay component. */ - slotProps?: { - /** - * Props for the mark component. - * Can be a static object or a function that transforms MarkProps. - */ - mark?: TMarkProps | ((props: MarkProps) => TMarkProps) - /** - * Props for the overlay component. - */ - overlay?: TOverlayProps - } + overlay?: OverlayProps } -export interface ConfiguredMarkedInput extends FunctionComponent< - MarkedInputProps -> {} +export interface ConfiguredMarkedInput + extends FunctionComponent> {} /** * Available slots for customizing MarkedInput internal components diff --git a/packages/markput/src/utils/functions/createMarkedInput.ts b/packages/markput/src/utils/functions/createMarkedInput.ts index b9bb7179..56734164 100644 --- a/packages/markput/src/utils/functions/createMarkedInput.ts +++ b/packages/markput/src/utils/functions/createMarkedInput.ts @@ -7,14 +7,17 @@ import type {ConfiguredMarkedInput, MarkProps, OverlayProps} from '../../types' /** * Create the configured MarkedInput component. * - * @template TMarkProps - Type of props for the Mark component (default: MarkProps) - * @template TOverlayProps - Type of props for the Overlay component (default: OverlayProps) + * @template TMarkProps - Type of props for the global Mark component + * @template TOverlayProps - Type of props for the global Overlay component */ export function createMarkedInput( configs: Omit, 'value' | 'onChange'> ): ConfiguredMarkedInput { - const ConfiguredMarkedInput = (props: MarkedInputProps, ref: ForwardedRef) => { - const assignedProps: MarkedInputProps = Object.assign({}, configs, props) + const ConfiguredMarkedInput = ( + props: MarkedInputProps, + ref: ForwardedRef + ) => { + const assignedProps = Object.assign({}, configs, props) as MarkedInputProps return _MarkedInput(assignedProps, ref) } diff --git a/packages/markput/src/utils/hooks/useSlot.ts b/packages/markput/src/utils/hooks/useSlot.ts index 2063c36e..88b0c7ef 100644 --- a/packages/markput/src/utils/hooks/useSlot.ts +++ b/packages/markput/src/utils/hooks/useSlot.ts @@ -1,6 +1,6 @@ import type {ComponentType} from 'react' import {useStore} from './useStore' -import type {Option, MarkProps} from '../../types' +import type {Option, MarkProps, OverlayProps} from '../../types' /** * Slot type that can be resolved @@ -9,21 +9,19 @@ export type SlotType = 'mark' | 'overlay' /** * Helper type for mark slot return value. - * Simplifies function overload signatures. */ -type MarkSlotReturn = readonly [ComponentType, any] +type MarkSlotReturn = readonly [ComponentType, MarkProps] /** * Helper type for overlay slot return value. - * Simplifies function overload signatures. */ -type OverlaySlotReturn = readonly [ComponentType, any] +type OverlaySlotReturn = readonly [ComponentType, OverlayProps] /** * Resolves a mark slot component and its props with proper fallback chain. * * @param type - Must be 'mark' - * @param option - Option containing per-option slot configuration + * @param option - Option containing mark configuration * @param baseProps - MarkProps to use as fallback or to transform * @returns Tuple of [MarkComponent, props] - Component is guaranteed to exist * @throws Error if no mark component found @@ -34,7 +32,7 @@ type OverlaySlotReturn = readonly [ComponentType, any] */ export function useSlot( type: 'mark', - option?: Option, + option?: Option, baseProps?: MarkProps, defaultComponent?: never ): MarkSlotReturn @@ -43,7 +41,7 @@ export function useSlot( * Resolves an overlay slot component and its props with proper fallback chain. * * @param type - Must be 'overlay' - * @param option - Option containing per-option slot configuration + * @param option - Option containing overlay configuration * @param baseProps - Base props for overlay (usually undefined) * @param defaultComponent - Default overlay component to use as fallback * @returns Tuple of [OverlayComponent, props] - Component is guaranteed to exist @@ -55,7 +53,7 @@ export function useSlot( */ export function useSlot( type: 'overlay', - option?: Option, + option?: Option, baseProps?: any, defaultComponent?: ComponentType ): OverlaySlotReturn @@ -64,19 +62,19 @@ export function useSlot( * Implementation: Resolves a slot component and its props with proper fallback chain. * * Component resolution: - * 1. option.slots[type] + * 1. resolved props.slot * 2. global component (store.props.Mark or store.props.Overlay) * 3. defaultComponent (if provided) * 4. throws error if none found * * Props resolution: - * 1. If option.slotProps[type] is a function: call with baseProps - * 2. If option.slotProps[type] is an object: use directly + * 1. If option.mark/overlay is a function: call with baseProps + * 2. If option.mark/overlay is an object: use directly * 3. Otherwise: use baseProps as fallback */ export function useSlot( type: SlotType, - option?: Option, + option?: Option, baseProps?: any, defaultComponent?: ComponentType ): MarkSlotReturn | OverlaySlotReturn { @@ -85,35 +83,33 @@ export function useSlot( | ComponentType | undefined - // Resolve component: option.slots[type] → global component → defaultComponent - const Component = (option?.slots?.[type] || globalComponent || defaultComponent) as ComponentType - - // Throw error if component not found - if (!Component) { - throw new Error( - `No ${type} component found. ` + - `Provide either option.slots.${type}, global ${type === 'mark' ? 'Mark' : 'Overlay'}, or a defaultComponent.` - ) - } - - // Resolve props based on slotProps configuration - const slotPropsConfig = option?.slotProps?.[type] - + // Resolve props based on option configuration + const optionConfig = type === 'mark' ? option?.mark : option?.overlay let props: any - if (slotPropsConfig !== undefined) { - // If slotProps is defined, use it - if (typeof slotPropsConfig === 'function') { + if (optionConfig !== undefined) { + if (typeof optionConfig === 'function') { // If it's a function, transform baseProps - props = slotPropsConfig(baseProps) + props = optionConfig(baseProps) } else { // If it's an object, use it directly - props = slotPropsConfig + props = optionConfig } } else { // Otherwise, use baseProps as fallback props = baseProps ?? {} } + // Resolve component: props.slot → global component → defaultComponent + const Component = (props.slot || globalComponent || defaultComponent) as ComponentType + + // Throw error if component not found + if (!Component) { + throw new Error( + `No ${type} component found. ` + + `Provide either option.${type}.slot, global ${type === 'mark' ? 'Mark' : 'Overlay'}, or a defaultComponent.` + ) + } + return [Component, props] } diff --git a/packages/storybook/src/pages/Ant/Ant.stories.tsx b/packages/storybook/src/pages/Ant/Ant.stories.tsx index a5cefcc9..43b90043 100644 --- a/packages/storybook/src/pages/Ant/Ant.stories.tsx +++ b/packages/storybook/src/pages/Ant/Ant.stories.tsx @@ -24,9 +24,7 @@ export const Tagged = () => { options={[ { markup: '@(__value__)', - slotProps: { - mark: ({value}) => ({children: value, color: value, style: {marginRight: 0}}), - }, + mark: ({value}) => ({children: value, color: value, style: {marginRight: 0}}), }, ]} /> diff --git a/packages/storybook/src/pages/Base/Base.stories.tsx b/packages/storybook/src/pages/Base/Base.stories.tsx index 349a71ab..9afc43f9 100644 --- a/packages/storybook/src/pages/Base/Base.stories.tsx +++ b/packages/storybook/src/pages/Base/Base.stories.tsx @@ -1,6 +1,6 @@ import type {Meta, StoryObj} from '@storybook/react-vite' import {MarkedInput, createMarkedInput, denote} from 'rc-marked-input' -import type {MarkToken, Markup} from 'rc-marked-input' +import type {MarkToken, Markup} from 'rc-marked-input' // MarkToken used in denote import {useState} from 'react' import {Button} from '../../shared/components/Button' import {Text} from '../../shared/components/Text' @@ -12,7 +12,7 @@ export default { args: {}, } satisfies Meta -type Story = StoryObj>> +type Story = StoryObj> export const Default: Story = { args: { @@ -29,22 +29,18 @@ const ConfiguredMarkedInput = createMarkedInput({ options: [ { markup: PrimaryMarkup, - slotProps: { - mark: ({value, meta}) => ({label: value || '', primary: true, onClick: () => alert(meta)}), - overlay: { - trigger: '@', - data: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'], - }, + mark: ({value, meta}) => ({label: value || '', primary: true, onClick: () => alert(meta)}), + overlay: { + trigger: '@', + data: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'], }, }, { markup: DefaultMarkup, - slotProps: { - mark: ({value}) => ({label: value || ''}), - overlay: { - trigger: '/', - data: ['Seventh', 'Eight', 'Ninth'], - }, + mark: ({value}) => ({label: value || ''}), + overlay: { + trigger: '/', + data: ['Seventh', 'Eight', 'Ninth'], }, }, ], @@ -89,11 +85,9 @@ export const Autocomplete: Story = { options: [ { markup: '@__value__' as Markup, - slotProps: { - overlay: { - trigger: '@', - data: ['one', 'two', 'three', 'four'], - }, + overlay: { + trigger: '@', + data: ['one', 'two', 'three', 'four'], }, }, ], diff --git a/packages/storybook/src/pages/Experimental/components/SingleEditableMarkdown/SingleEditableMarkdown.tsx b/packages/storybook/src/pages/Experimental/components/SingleEditableMarkdown/SingleEditableMarkdown.tsx index 90804fb9..a4d25d14 100644 --- a/packages/storybook/src/pages/Experimental/components/SingleEditableMarkdown/SingleEditableMarkdown.tsx +++ b/packages/storybook/src/pages/Experimental/components/SingleEditableMarkdown/SingleEditableMarkdown.tsx @@ -15,63 +15,51 @@ const BlockquoteMarkup: Markup = '> __value__' const MARKDOWN_OPTIONS = [ { markup: BoldMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'bold', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'bold', + }), }, { markup: ItalicMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'italic', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'italic', + }), }, { markup: CodeMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'code', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'code', + }), }, { markup: LinkMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'link', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'link', + }), }, { markup: HeadingMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'heading', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'heading', + }), }, { markup: BlockquoteMarkup, - slotProps: { - mark: ({value, children}: any) => ({ - value, - children, - type: 'blockquote', - }), - }, + mark: ({value, children}: any) => ({ + value, + children, + type: 'blockquote', + }), }, ] diff --git a/packages/storybook/src/pages/Material/Material.stories.tsx b/packages/storybook/src/pages/Material/Material.stories.tsx index c98f6dcb..4e8cffb6 100644 --- a/packages/storybook/src/pages/Material/Material.stories.tsx +++ b/packages/storybook/src/pages/Material/Material.stories.tsx @@ -1,5 +1,5 @@ import {Chip, Input} from '@mui/material' -import type {MarkToken} from 'rc-marked-input' +import type {MarkProps} from 'rc-marked-input' import {MarkedInput} from 'rc-marked-input' import {useState} from 'react' import {MaterialMentions} from '../../shared/components/MaterialMentions' @@ -36,15 +36,11 @@ export const Chipped = () => { options={[ { markup: '@[__value__](outlined:__meta__)', - slotProps: { - mark: ({value}) => ({label: value, variant: 'outlined' as const, size: 'small' as const}), - }, + mark: ({value}) => ({label: value, variant: 'outlined' as const, size: 'small' as const}), }, { markup: '@[__value__](common:__meta__)', - slotProps: { - mark: ({value}) => ({label: value, size: 'small' as const}), - }, + mark: ({value}) => ({label: value, size: 'small' as const}), }, ]} /> @@ -66,19 +62,15 @@ export const Overridden = () => { options: [ { markup: '@[__value__](outlined:__meta__)', - slotProps: { - mark: ({value}: MarkToken) => ({ - label: value, - variant: 'outlined' as const, - size: 'small' as const, - }), - }, + mark: ({value}: MarkProps) => ({ + label: value, + variant: 'outlined' as const, + size: 'small' as const, + }), }, { markup: '@[__value__](common:__meta__)', - slotProps: { - mark: ({value}: MarkToken) => ({label: value, size: 'small' as const}), - }, + mark: ({value}: MarkProps) => ({label: value, size: 'small' as const}), }, ], }} diff --git a/packages/storybook/src/pages/Nested/MarkdownOptions.ts b/packages/storybook/src/pages/Nested/MarkdownOptions.ts index 704d0185..7e30c900 100644 --- a/packages/storybook/src/pages/Nested/MarkdownOptions.ts +++ b/packages/storybook/src/pages/Nested/MarkdownOptions.ts @@ -104,9 +104,7 @@ function buildMarkdownOptions(theme: Record): Option[] { return Object.values(theme).map((preset: MarkupPreset) => { return { markup: preset.markup, - slotProps: { - mark: (props: MarkProps) => ({...props, style: preset.style}), - }, + mark: (props: MarkProps) => ({...props, style: preset.style}), } }) } diff --git a/packages/storybook/src/pages/Nested/Nested.stories.tsx b/packages/storybook/src/pages/Nested/Nested.stories.tsx index cd8bcab9..efde0596 100644 --- a/packages/storybook/src/pages/Nested/Nested.stories.tsx +++ b/packages/storybook/src/pages/Nested/Nested.stories.tsx @@ -1,6 +1,6 @@ import type {Meta, StoryObj} from '@storybook/react-vite' import {MarkedInput, createMarkedInput, useMark} from 'rc-marked-input' -import type {MarkToken, Markup} from 'rc-marked-input' +import type {Markup} from 'rc-marked-input' import type {ReactNode} from 'react' import {useState} from 'react' import {Text} from '../../shared/components/Text' @@ -21,7 +21,7 @@ export default { }, } satisfies Meta -type Story = StoryObj>> +type Story = StoryObj> // ============================================================================ // Example 1: Simple Nesting (Markdown-style) @@ -47,23 +47,19 @@ export const SimpleNesting: Story = { options={[ { markup: BoldMarkup, - slotProps: { - mark: ({value, children}) => ({ - value, - children, - style: {fontWeight: 'bold'}, - }), - }, + mark: ({value, children}) => ({ + value, + children, + style: {fontWeight: 'bold'}, + }), }, { markup: ItalicMarkup, - slotProps: { - mark: ({value, children}) => ({ - value, - children, - style: {fontStyle: 'italic'}, - }), - }, + mark: ({value, children}) => ({ + value, + children, + style: {fontStyle: 'italic'}, + }), }, ]} /> @@ -106,51 +102,45 @@ export const MultipleLevels: Story = { options={[ { markup: TagMarkup, - slotProps: { - mark: ({value, children}) => ({ - value, - children, - style: { - backgroundColor: '#e7f3ff', - border: '1px solid #2196f3', - color: '#1976d2', - padding: '2px 6px', - borderRadius: '4px', - }, - }), - }, + mark: ({value, children}) => ({ + value, + children, + style: { + backgroundColor: '#e7f3ff', + border: '1px solid #2196f3', + color: '#1976d2', + padding: '2px 6px', + borderRadius: '4px', + }, + }), }, { markup: MentionMarkup, - slotProps: { - mark: ({value, children}) => ({ - value, - children, - style: { - backgroundColor: '#fff3e0', - border: '1px solid #ff9800', - color: '#f57c00', - padding: '2px 6px', - borderRadius: '4px', - }, - }), - }, + mark: ({value, children}) => ({ + value, + children, + style: { + backgroundColor: '#fff3e0', + border: '1px solid #ff9800', + color: '#f57c00', + padding: '2px 6px', + borderRadius: '4px', + }, + }), }, { markup: CodeMarkup, - slotProps: { - mark: ({value, children}) => ({ - value, - children, - style: { - backgroundColor: '#f3e5f5', - border: '1px solid #9c27b0', - color: '#7b1fa2', - padding: '2px 6px', - borderRadius: '4px', - }, - }), - }, + mark: ({value, children}) => ({ + value, + children, + style: { + backgroundColor: '#f3e5f5', + border: '1px solid #9c27b0', + color: '#7b1fa2', + padding: '2px 6px', + borderRadius: '4px', + }, + }), }, ]} /> diff --git a/packages/storybook/src/pages/Nested/nested.spec.tsx b/packages/storybook/src/pages/Nested/nested.spec.tsx index 7b78e765..060cfc84 100644 --- a/packages/storybook/src/pages/Nested/nested.spec.tsx +++ b/packages/storybook/src/pages/Nested/nested.spec.tsx @@ -79,8 +79,8 @@ describe('Nested Marks Rendering', () => { Mark={TagMark} value={value} options={[ - {markup: tagMarkup, slotProps: {overlay: {trigger: '#'}}}, - {markup: mentionMarkup, slotProps: {overlay: {trigger: '@'}}}, + {markup: tagMarkup, overlay: {trigger: '#'}}, + {markup: mentionMarkup, overlay: {trigger: '@'}}, ]} /> ) diff --git a/packages/storybook/src/pages/Overlay/Overlay.spec.tsx b/packages/storybook/src/pages/Overlay/Overlay.spec.tsx index 68542aa7..b52e199b 100644 --- a/packages/storybook/src/pages/Overlay/Overlay.spec.tsx +++ b/packages/storybook/src/pages/Overlay/Overlay.spec.tsx @@ -41,11 +41,9 @@ describe('API: Overlay and Triggers', () => { options={[ { markup: '@[__label__](__value__)', - slotProps: { - overlay: { - trigger: '@', - data: ['Item'], - }, + overlay: { + trigger: '@', + data: ['Item'], }, }, ]} diff --git a/packages/storybook/src/pages/Overlay/Overlay.stories.tsx b/packages/storybook/src/pages/Overlay/Overlay.stories.tsx index 4dad9af6..3ac7a476 100644 --- a/packages/storybook/src/pages/Overlay/Overlay.stories.tsx +++ b/packages/storybook/src/pages/Overlay/Overlay.stories.tsx @@ -9,7 +9,7 @@ export default { component: MarkedInput, } -type Story = StoryObj>> +type Story = StoryObj> const Mark = (props: MarkToken) => {props.value} @@ -19,11 +19,9 @@ export const DefaultOverlay: Story = { defaultValue: 'Hello, default - suggestion overlay by trigger @!', options: [ { - slotProps: { - overlay: { - trigger: '@', - data: ['First', 'Second', 'Third'], - }, + overlay: { + trigger: '@', + data: ['First', 'Second', 'Third'], }, }, ], @@ -44,7 +42,7 @@ export const CustomTrigger = () => { Overlay={Overlay} value={value} onChange={setValue} - options={[{slotProps: {overlay: {trigger: '/'}}}]} + options={[{overlay: {trigger: '/'}}]} /> ) } diff --git a/packages/storybook/src/pages/Rsuite/Rsuite.stories.tsx b/packages/storybook/src/pages/Rsuite/Rsuite.stories.tsx index cf2fce38..7c690b3c 100644 --- a/packages/storybook/src/pages/Rsuite/Rsuite.stories.tsx +++ b/packages/storybook/src/pages/Rsuite/Rsuite.stories.tsx @@ -55,9 +55,7 @@ export const Overridden = () => { options={[ { markup: '@[__value__](common)' as Markup, - slotProps: { - mark: ({value}: {value?: string}) => ({children: value}), - }, + mark: ({value}: {value?: string}) => ({children: value}), }, ]} /> @@ -86,9 +84,7 @@ export const TaggedInput = () => { options={[ { markup: '@[__value__](common)' as Markup, - slotProps: { - mark: ({value}) => ({children: value, style: {marginLeft: 0}}), - }, + mark: ({value}) => ({children: value, style: {marginLeft: 0}}), }, ]} slotProps={{ diff --git a/packages/website/src/components/demos/Step2Demo.tsx b/packages/website/src/components/demos/Step2Demo.tsx index c4377f57..2c250ba3 100644 --- a/packages/website/src/components/demos/Step2Demo.tsx +++ b/packages/website/src/components/demos/Step2Demo.tsx @@ -6,11 +6,9 @@ export const Step2Demo = () => ( options={[ { markup: '__value__', - slotProps: { - overlay: { - trigger: '@', - data: ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'], - }, + overlay: { + trigger: '@', + data: ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'], }, }, ]} diff --git a/packages/website/src/content/docs/api/functions/MarkedInput.md b/packages/website/src/content/docs/api/functions/MarkedInput.md index 409c2657..717900f9 100644 --- a/packages/website/src/content/docs/api/functions/MarkedInput.md +++ b/packages/website/src/content/docs/api/functions/MarkedInput.md @@ -9,13 +9,13 @@ title: "MarkedInput" function MarkedInput(props): Element | null; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:96](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L96) +Defined in: [packages/markput/src/components/MarkedInput.tsx:84](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L84) ## Type Parameters | Type Parameter | Default type | | ------ | ------ | -| `TMarkProps` | `any` | +| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | | `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | ## Parameters diff --git a/packages/website/src/content/docs/api/functions/createMarkedInput.md b/packages/website/src/content/docs/api/functions/createMarkedInput.md index 1e56ed68..1e95bfad 100644 --- a/packages/website/src/content/docs/api/functions/createMarkedInput.md +++ b/packages/website/src/content/docs/api/functions/createMarkedInput.md @@ -17,8 +17,8 @@ Create the configured MarkedInput component. | Type Parameter | Default type | Description | | ------ | ------ | ------ | -| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | Type of props for the Mark component (default: MarkProps) | -| `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | Type of props for the Overlay component (default: OverlayProps) | +| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | Type of props for the global Mark component | +| `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | Type of props for the global Overlay component | ## Parameters diff --git a/packages/website/src/content/docs/api/interfaces/ConfiguredMarkedInput.md b/packages/website/src/content/docs/api/interfaces/ConfiguredMarkedInput.md index 9c60d399..1c7b27ee 100644 --- a/packages/website/src/content/docs/api/interfaces/ConfiguredMarkedInput.md +++ b/packages/website/src/content/docs/api/interfaces/ConfiguredMarkedInput.md @@ -5,7 +5,7 @@ prev: false title: "ConfiguredMarkedInput" --- -Defined in: [packages/markput/src/types.ts:74](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L74) +Defined in: [packages/markput/src/types.ts:63](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L63) ## Extends @@ -22,7 +22,7 @@ Defined in: [packages/markput/src/types.ts:74](https://github.com/Nowely/marked- ConfiguredMarkedInput(props, deprecatedLegacyContext?): ReactNode; ``` -Defined in: [packages/markput/src/types.ts:74](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L74) +Defined in: [packages/markput/src/types.ts:63](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L63) ## Parameters diff --git a/packages/website/src/content/docs/api/interfaces/MarkProps.md b/packages/website/src/content/docs/api/interfaces/MarkProps.md index 3ed7c689..c9af247a 100644 --- a/packages/website/src/content/docs/api/interfaces/MarkProps.md +++ b/packages/website/src/content/docs/api/interfaces/MarkProps.md @@ -7,7 +7,7 @@ title: "MarkProps" Defined in: [packages/markput/src/types.ts:13](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L13) -Simplified props passed to Mark components via slotProps +Props passed to Mark components. ## Properties @@ -17,7 +17,7 @@ Simplified props passed to Mark components via slotProps optional children: ReactNode; ``` -Defined in: [packages/markput/src/types.ts:21](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L21) +Defined in: [packages/markput/src/types.ts:23](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L23) Rendered children content (ReactNode) for nested marks @@ -29,7 +29,7 @@ Rendered children content (ReactNode) for nested marks optional meta: string; ``` -Defined in: [packages/markput/src/types.ts:17](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L17) +Defined in: [packages/markput/src/types.ts:19](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L19) Additional metadata for the mark @@ -41,18 +41,30 @@ Additional metadata for the mark optional nested: string; ``` -Defined in: [packages/markput/src/types.ts:19](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L19) +Defined in: [packages/markput/src/types.ts:21](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L21) Nested content as string (raw, unparsed) *** +### slot? + +```ts +optional slot: ComponentType; +``` + +Defined in: [packages/markput/src/types.ts:15](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L15) + +Custom component to render this mark + +*** + ### value? ```ts optional value: string; ``` -Defined in: [packages/markput/src/types.ts:15](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L15) +Defined in: [packages/markput/src/types.ts:17](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L17) Main content value of the mark diff --git a/packages/website/src/content/docs/api/interfaces/MarkedInputComponent.md b/packages/website/src/content/docs/api/interfaces/MarkedInputComponent.md index 0e4b2788..3458d051 100644 --- a/packages/website/src/content/docs/api/interfaces/MarkedInputComponent.md +++ b/packages/website/src/content/docs/api/interfaces/MarkedInputComponent.md @@ -5,19 +5,19 @@ prev: false title: "MarkedInputComponent" --- -Defined in: [packages/markput/src/components/MarkedInput.tsx:75](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L75) +Defined in: [packages/markput/src/components/MarkedInput.tsx:64](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L64) ```ts MarkedInputComponent(props): Element | null; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:76](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L76) +Defined in: [packages/markput/src/components/MarkedInput.tsx:65](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L65) ## Type Parameters | Type Parameter | Default type | | ------ | ------ | -| `TMarkProps` | `any` | +| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | | `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | ## Parameters @@ -38,4 +38,4 @@ Defined in: [packages/markput/src/components/MarkedInput.tsx:76](https://github. optional displayName: string; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:80](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L80) +Defined in: [packages/markput/src/components/MarkedInput.tsx:68](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L68) diff --git a/packages/website/src/content/docs/api/interfaces/MarkedInputHandler.md b/packages/website/src/content/docs/api/interfaces/MarkedInputHandler.md index 1af57e6f..630ee4e9 100644 --- a/packages/website/src/content/docs/api/interfaces/MarkedInputHandler.md +++ b/packages/website/src/content/docs/api/interfaces/MarkedInputHandler.md @@ -5,7 +5,7 @@ prev: false title: "MarkedInputHandler" --- -Defined in: [packages/markput/src/types.ts:103](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L103) +Defined in: [packages/markput/src/types.ts:91](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L91) ## Properties @@ -15,7 +15,7 @@ Defined in: [packages/markput/src/types.ts:103](https://github.com/Nowely/marked readonly container: HTMLDivElement | null; ``` -Defined in: [packages/markput/src/types.ts:105](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L105) +Defined in: [packages/markput/src/types.ts:93](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L93) Container element @@ -27,7 +27,7 @@ Container element readonly overlay: HTMLElement | null; ``` -Defined in: [packages/markput/src/types.ts:107](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L107) +Defined in: [packages/markput/src/types.ts:95](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L95) Overlay element if exists @@ -39,7 +39,7 @@ Overlay element if exists focus(): void; ``` -Defined in: [packages/markput/src/types.ts:109](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L109) +Defined in: [packages/markput/src/types.ts:97](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L97) #### Returns diff --git a/packages/website/src/content/docs/api/interfaces/MarkedInputProps.md b/packages/website/src/content/docs/api/interfaces/MarkedInputProps.md index 5ffc2d0d..ed633043 100644 --- a/packages/website/src/content/docs/api/interfaces/MarkedInputProps.md +++ b/packages/website/src/content/docs/api/interfaces/MarkedInputProps.md @@ -5,31 +5,18 @@ prev: false title: "MarkedInputProps" --- -Defined in: [packages/markput/src/components/MarkedInput.tsx:38](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L38) +Defined in: [packages/markput/src/components/MarkedInput.tsx:28](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L28) -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) +Props for MarkedInput component. ## Example ```typescript -// Using global Mark component with custom props type -interface ButtonProps { label: string; onClick: () => void } - - Mark={Button} + + Mark={Chip} options={[{ markup: '@[__value__]', - slotProps: { mark: { label: 'Click me', onClick: () => {} } } + mark: { label: 'Click me' } }]} /> ``` @@ -40,10 +27,10 @@ interface ButtonProps { label: string; onClick: () => void } ## Type Parameters -| Type Parameter | Default type | -| ------ | ------ | -| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | -| `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | +| Type Parameter | Default type | Description | +| ------ | ------ | ------ | +| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | Type of props for the global Mark component | +| `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | Type of props for the global Overlay component | ## Properties @@ -53,7 +40,7 @@ interface ButtonProps { label: string; onClick: () => void } optional className: string; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:53](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L53) +Defined in: [packages/markput/src/components/MarkedInput.tsx:42](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L42) Additional classes @@ -83,9 +70,9 @@ CoreMarkputProps.defaultValue optional Mark: ComponentType; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:42](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L42) +Defined in: [packages/markput/src/components/MarkedInput.tsx:32](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L32) -Global component used for rendering markups (fallback for option.slots.mark) +Global component used for rendering markups (fallback for option.mark.slot) *** @@ -120,21 +107,15 @@ CoreMarkputProps.onChange ### options? ```ts -optional options: Option[]; +optional options: Option[]; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:51](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L51) +Defined in: [packages/markput/src/components/MarkedInput.tsx:40](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L40) Configuration options for markups and overlays. -Each option can specify its own slot components and props via option.slots and option.slotProps. +Each option can specify its own slot component via mark.slot or overlay.slot. Falls back to global Mark/Overlay components when not specified. -#### Default - -```ts -[{overlayTrigger: '@', markup: '@[__label__](__value__)', data: []}] -``` - #### Overrides ```ts @@ -149,9 +130,9 @@ CoreMarkputProps.options optional Overlay: ComponentType; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:44](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L44) +Defined in: [packages/markput/src/components/MarkedInput.tsx:34](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L34) -Global component used for rendering overlays like suggestions, mentions, etc (fallback for option.slots.overlay) +Global component used for rendering overlays (fallback for option.overlay.slot) *** @@ -179,7 +160,7 @@ CoreMarkputProps.readOnly optional ref: ForwardedRef; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:40](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L40) +Defined in: [packages/markput/src/components/MarkedInput.tsx:30](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L30) Ref to handler @@ -191,7 +172,7 @@ Ref to handler optional showOverlayOn: OverlayTrigger; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:72](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L72) +Defined in: [packages/markput/src/components/MarkedInput.tsx:61](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L61) Events that trigger overlay display @@ -215,7 +196,7 @@ CoreMarkputProps.showOverlayOn optional slotProps: SlotProps; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:67](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L67) +Defined in: [packages/markput/src/components/MarkedInput.tsx:56](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L56) Props to pass to slot components @@ -233,7 +214,7 @@ slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }} optional slots: Slots; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:61](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L61) +Defined in: [packages/markput/src/components/MarkedInput.tsx:50](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L50) Override internal components using slots @@ -251,7 +232,7 @@ slots={{ container: 'div', span: 'span' }} optional style: CSSProperties; ``` -Defined in: [packages/markput/src/components/MarkedInput.tsx:55](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L55) +Defined in: [packages/markput/src/components/MarkedInput.tsx:44](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/components/MarkedInput.tsx#L44) Additional style diff --git a/packages/website/src/content/docs/api/interfaces/Option.md b/packages/website/src/content/docs/api/interfaces/Option.md index a0447a19..ef8eed71 100644 --- a/packages/website/src/content/docs/api/interfaces/Option.md +++ b/packages/website/src/content/docs/api/interfaces/Option.md @@ -5,7 +5,7 @@ prev: false title: "Option" --- -Defined in: [packages/markput/src/types.ts:48](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L48) +Defined in: [packages/markput/src/types.ts:51](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L51) React-specific markup option for defining mark behavior and styling. @@ -14,8 +14,7 @@ React-specific markup option for defining mark behavior and styling. ```ts const option: Option = { markup: '@[__value__]', - slots: { mark: Button }, - slotProps: { mark: { label: 'Click' } } + mark: { slot: Button, label: 'Click' } } ``` @@ -23,14 +22,22 @@ const option: Option = { - `CoreOption` -## Type Parameters +## Properties -| Type Parameter | Default type | -| ------ | ------ | -| `TMarkProps` | [`MarkProps`](/api/interfaces/markprops/) | -| `TOverlayProps` | [`OverlayProps`](/api/interfaces/overlayprops/) | +### mark? -## Properties +```ts +optional mark: + | MarkProps + | (props) => MarkProps; +``` + +Defined in: [packages/markput/src/types.ts:56](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L56) + +Props for the mark component. +Can be a static object or a function that transforms MarkProps. + +*** ### markup? @@ -73,57 +80,12 @@ CoreOption.markup *** -### slotProps? +### overlay? ```ts -optional slotProps: object; +optional overlay: OverlayProps; ``` -Defined in: [packages/markput/src/types.ts:61](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L61) - -Props for slot components. - -#### mark? - -```ts -optional mark: TMarkProps | (props) => TMarkProps; -``` - -Props for the mark component. -Can be a static object or a function that transforms MarkProps. - -#### overlay? - -```ts -optional overlay: TOverlayProps; -``` +Defined in: [packages/markput/src/types.ts:60](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L60) Props for the overlay component. - -*** - -### slots? - -```ts -optional slots: object; -``` - -Defined in: [packages/markput/src/types.ts:52](https://github.com/Nowely/marked-input/blob/next/packages/markput/src/types.ts#L52) - -Per-option slot components. - -#### mark? - -```ts -optional mark: ComponentType; -``` - -Mark component for this option. - -#### overlay? - -```ts -optional overlay: ComponentType; -``` - -Overlay component for this option. diff --git a/packages/website/src/content/docs/api/interfaces/OverlayHandler.md b/packages/website/src/content/docs/api/interfaces/OverlayHandler.md index b912ffd0..ddd4ece1 100644 --- a/packages/website/src/content/docs/api/interfaces/OverlayHandler.md +++ b/packages/website/src/content/docs/api/interfaces/OverlayHandler.md @@ -28,7 +28,7 @@ Used for close overlay. ### match ```ts -match: OverlayMatch>; +match: OverlayMatch