Spaces:
Sleeping
Sleeping
File size: 2,725 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useEffect} from 'react'
import * as contentBlocks from './blocks/'
import {ContentType, BlockData} from './blocks/types'
import RootInput from './rootInput'
import './editor.scss'
type Props = {
boardId?: string
onSave: (block: BlockData) => Promise<BlockData|null>
id?: string
initialValue?: string
initialContentType?: string
}
export default function Editor(props: Props) {
const [value, setValue] = useState(props.initialValue || '')
const [currentBlockType, setCurrentBlockType] = useState<ContentType|null>(contentBlocks.get(props.initialContentType || '') || null)
useEffect(() => {
if (!currentBlockType) {
const block = contentBlocks.getByPrefix(value)
if (block) {
setValue('')
setCurrentBlockType(block)
} else if (value !== '' && !contentBlocks.isSubPrefix(value) && !value.startsWith('/')) {
setCurrentBlockType(contentBlocks.get('text'))
}
}
}, [value, currentBlockType])
const CurrentBlockInput = currentBlockType?.Input
return (
<div className='Editor'>
{currentBlockType === null &&
<RootInput
onChange={setValue}
onChangeType={setCurrentBlockType}
value={value}
onSave={async (val: string, blockType: string) => {
if (blockType === null && val === '') {
return
}
await props.onSave({value: val, contentType: blockType, id: props.id})
setValue('')
setCurrentBlockType(null)
}}
/>}
{CurrentBlockInput &&
<CurrentBlockInput
onChange={setValue}
value={value}
onCancel={() => {
setValue('')
setCurrentBlockType(null)
}}
onSave={async (val: string) => {
const newBlock = await props.onSave({value: val, contentType: currentBlockType.name, id: props.id})
setValue('')
const createdContentType = contentBlocks.get(newBlock?.contentType || '')
setCurrentBlockType(contentBlocks.get(createdContentType?.nextType || '') || null)
}}
currentBoardId={props.boardId}
/>}
</div>
)
}
|