index.tsx

TLDR

This file contains a component called H1 which represents a header title. It includes a display component and an input component for editing the title.

Classes

H1

The H1 class is a component that represents a header title. It includes a display component and an input component for editing the title. The display component renders the title as HTML using the marked library. The input component is an input field where users can edit the title.

// 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 './h1.scss'

const H1: ContentType = {
    name: 'h1',
    displayName: 'Title',
    slashCommand: '/title',
    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='H1'
                data-testid='h1'
                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}
            />
        )
    },
}

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

export default H1