index.tsx

TLDR

This file exports a React component for rendering and editing a sub title block. It also includes a method for running a slash command.

Classes

H2

The H2 class is a React component that renders a sub title block. It has the following properties:

• name: The name of the sub title block.
• displayName: The display name of the sub title block.
• slashCommand: The slash command for creating a sub title block.
• prefix: The prefix to be added to the sub title block text.
• runSlashCommand: A method for running a slash command, which sets the content type to H2 and sets the value to the command arguments.
• editable: A boolean indicating whether the sub title block is editable or not.

Display

A nested component within the H2 class that renders the sub title block in a read-only mode. It uses the marked library to convert the Markdown text into HTML and renders it inside a div element.

Input

A nested component within the H2 class that renders an input field for editing the sub title block. It sets focus on the input field when rendered and listens for keyboard events to update the value and trigger actions like cancelling or saving the changes.

END

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

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

import './h2.scss'

const H2: ContentType = {
    name: 'h2',
    displayName: 'Sub title',
    slashCommand: '/subtitle',
    prefix: '## ',
    runSlashCommand: (): void => {},
    editable: true,
    Display: (props: BlockInputProps) => {
        const renderer = new marked.Renderer()
        const html = marked('## ' + props.value, {renderer, breaks: true})
        return (
            <div
                dangerouslySetInnerHTML={{__html: html.trim()}}
            />
        )
    },
    Input: (props: BlockInputProps) => {
        const ref = useRef<HTMLInputElement|null>(null)
        useEffect(() => {
            ref.current?.focus()
        }, [])
        return (
            <input
                ref={ref}
                className='H2'
                data-testid='h2'
                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}
            />
        )
    },
}

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

export default H2