index.tsx

TLDR

The quote file is a React component that represents a quote block. It includes both the display and input components for the quote block, as well as a function to handle running the slash command.

Classes

Quote

The Quote class represents a quote block in the code. It has the following properties:

• name: The name of the block, which is "quote".
• displayName: The display name of the block, which is "Quote".
• slashCommand: The slash command associated with the block, which is "/quote".
• prefix: The prefix added to the block, which is ">".
• Display: A functional component that renders the display of the quote block. It uses the marked library to convert the input value to HTML and displays it in a div element.
• runSlashCommand: A function that handles running the slash command for the quote block. It takes a changeType function, a changeValue function, and additional arguments. It sets the block type to Quote and the value to the joined arguments.
• editable: A boolean value that indicates whether the quote block is editable.
• Input: A functional component that renders the input field for the quote block. It includes an input element within a blockquote element. It handles onChange, onKeyDown, and onBlur events to update the input value and invoke the appropriate callbacks.

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

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

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

export default Quote