index.tsx
TLDR
This file contains the implementation of a "Quote" block for a block editor. It exports a default Quote
component that is used to display and edit the block.
Classes
Quote
The Quote
class represents a block of type "quote" in the block editor. It has the following properties:
-
name
: The name of the block type, 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 string for the block, which is "> ". -
Display
: A component that renders the display of the block. It renders the text as a quoted blockquote element using themarked
library. -
runSlashCommand
: A function that runs the slash command for the block. In this implementation, it does nothing. -
editable
: A boolean indicating whether the block is editable. -
Input
: A component that renders the input for editing the block. It renders an input element inside a blockquote element.
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 './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