pluginStrategy.ts

TLDR

This file contains two interfaces InlineStrategy and BlockStrategy that define the structure and behavior of different strategies for rendering Markdown content in a React component.

Interfaces

InlineStrategy

This interface defines the structure and behavior of an inline strategy used for rendering Markdown content. It has the following properties:

• style: Specifies the CSS style to apply to the text.
• findStyleRanges: A function that takes a ContentBlock and returns an array of style ranges for the text within the block.
• findDelimiterRanges (optional): A function that takes a ContentBlock and the previously computed style ranges, and returns an array of delimiter ranges.
• delimiterStyle (optional): Specifies the CSS style to apply to the delimiters.
• styles (optional): Additional CSS styles to apply to the rendered component.
• delimiterStyles (optional): Additional CSS styles to apply to the rendered component for delimiters.

BlockStrategy

This interface defines the structure and behavior of a block strategy used for rendering Markdown content. It has the following properties:

• type: Specifies the block type (e.g., "header-one", "blockquote") for the content.
• className: Specifies the CSS class name to apply to the rendered component.
• mapBlockType: A function that maps the state of the ContentState to a new ContentState with the specified block type.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import * as React from 'react'
import {ContentBlock, ContentState} from 'draft-js'

export interface InlineStrategy {
    style: string
    findStyleRanges: (text: ContentBlock) => number[][]
    findDelimiterRanges?: (text: ContentBlock, styleRanges: number[][]) => number[][]
    delimiterStyle?: string
    styles?: React.CSSProperties
    delimiterStyles?: React.CSSProperties
}

export interface BlockStrategy {
    type: string
    className: string
    mapBlockType: (state: ContentState) => ContentState
}