index.tsx

TLDR

This file contains the implementation of a React component called H3. It defines the behavior and rendering of a sub subtitle block.

Classes

H3

The H3 class is a React component that represents a sub subtitle block. It has the following properties and methods:

• name: The name of the block ("h3").
• displayName: The display name of the block ("Sub Sub title").
• slashCommand: The slash command associated with the block ("/subsubtitle").
• prefix: The prefix to be added to the block content ("### ").
• runSlashCommand: A method that is called when the slash command is executed. It does nothing in this implementation.
• editable: Indicates whether the block is editable.
• Display: A component that renders the block's content as HTML. It uses the marked library to convert the content to HTML.
• Input: A component that renders an input field for editing the block's content. It listens for changes and notifies parent components through onChange, onCancel, and onSave callbacks.

Methods

None

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

const H3: ContentType = {
    name: 'h3',
    displayName: 'Sub Sub title',
    slashCommand: '/subsubtitle',
    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='H3'
                data-testid='h3'
                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}
            />
        )
    },
}

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

export default H3