index.tsx

TLDR

This file contains a React component called Text which represents a text block. It includes a display component and an input component, as well as a method for running a slash command.

Methods

runSlashCommand

This method is responsible for executing a slash command and updating the block's type and value. It takes three parameters: changeType (a function to change the block's type), changeValue (a function to change the block's value), and args (an array of arguments for the slash command). It joins the arguments into a string and then calls the changeType and changeValue functions with the Text component and the joined arguments, respectively.

Classes

None

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useRef, useEffect} from 'react'

import {BlockInputProps, ContentType} from '../types'
import {Utils} from '../../../../utils'

import './text.scss'

const Text: ContentType = {
    name: 'text',
    displayName: 'Text',
    slashCommand: '/text',
    prefix: '',
    runSlashCommand: (): void => {},
    editable: true,
    Display: (props: BlockInputProps) => {
        const html: string = Utils.htmlFromMarkdown(props.value || '')
        return (
            <div
                dangerouslySetInnerHTML={{__html: html}}
                className={props.value ? 'octo-editor-preview' : 'octo-editor-preview octo-placeholder'}
            />
        )
    },
    Input: (props: BlockInputProps) => {
        const ref = useRef<HTMLInputElement|null>(null)
        useEffect(() => {
            ref.current?.focus()
        }, [])
        return (
            <input
                ref={ref}
                className='Text'
                onChange={(e) => props.onChange(e.currentTarget.value)}
                onKeyDown={(e) => {
                    if (props.value === '' && e.key === 'Backspace') {
                        props.onCancel()
                    }
                    if (e.key === 'Enter') {
                        props.onSave(props.value)
                    }
                }}
                value={props.value}
            />
        )
    },
}

Text.runSlashCommand = (changeType: (contentType: ContentType) => void, changeValue: (value: string) => void, ...args: string[]): void => {
    changeType(Text)
    changeValue(args.join(' '))
}

export default Text