contentElement.tsx

TLDR

This file exports a React component called ContentElement that is responsible for rendering different types of content blocks dynamically based on the block prop. It uses the contentRegistry to map each content type to its corresponding handler component and renders the appropriate component based on the block.type value provided.

Methods

There are no methods in this file.

Classes

There are no classes in this file.

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

import {useCallback} from 'react'

import {ContentBlock} from '../../blocks/contentBlock'
import {Utils} from '../../utils'

import {useCardDetailContext} from '../cardDetail/cardDetailContext'

import {contentRegistry} from './contentRegistry'

// Need to require here to prevent webpack from tree-shaking these away
// TODO: Update webpack to avoid this
import './textElement'
import './imageElement'
import './dividerElement'
import './checkboxElement'

type Props = {
    block: ContentBlock
    readonly: boolean
    cords: {x: number, y?: number, z?: number}
}

export default function ContentElement(props: Props): JSX.Element|null {
    const {block, readonly, cords} = props
    const cardDetail = useCardDetailContext()

    const handler = contentRegistry.getHandler(block.type)
    if (!handler) {
        Utils.logError(`ContentElement, unknown content type: ${block.type}`)
        return null
    }

    const addElement = useCallback(() => {
        const index = cords.x + 1
        cardDetail.addBlock(handler, index, true)
    }, [cardDetail, cords, handler])

    const deleteElement = useCallback(() => {
        const index = cords.x
        cardDetail.deleteBlock(block, index)
    }, [block, cords, cardDetail])

    return handler.createComponent(block, readonly, addElement, deleteElement)
}