Spaces:
Sleeping
Sleeping
File size: 4,681 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState} from 'react'
import ReactDOM from 'react-dom'
import {BlockData} from './blocks/types'
import BlocksEditor from './blocksEditor'
import {register} from './blocks/'
import TextDev from './blocks/text-dev'
import '@mattermost/compass-icons/css/compass-icons.css'
import '../../styles/variables.scss'
import '../../styles/main.scss'
import '../../styles/labels.scss'
import '../../styles/_markdown.scss'
import './devmain.scss'
const newID = () => Math.random().toString(36).slice(2)
register(TextDev)
const fakeData = [
{id: '1', value: 'Title', contentType: 'h1'},
{id: '2', value: 'Sub title', contentType: 'h2'},
{id: '3', value: 'Sub sub title', contentType: 'h3'},
{id: '4', value: 'Some **markdown** text', contentType: 'text'},
{id: '5', value: 'Some multiline\n**markdown** text\n### With Items\n- Item 1\n- Item2\n- Item3', contentType: 'text'},
{id: '6', value: {checked: true, value: 'Checkbox'}, contentType: 'checkbox'},
]
function App() {
//const [data, setData] = useState<BlockData[]>([])
const [data, setData] = useState<Array<BlockData<any>>>(fakeData)
return (
<div className='App'>
<header className='App-header'>
<BlocksEditor
blocks={data}
onBlockCreated={async (block: BlockData<any>, afterBlock?: BlockData<any>): Promise<BlockData|null> => {
if (block.contentType === 'text' && block.value === '') {
return null
}
const id = newID()
let newData: BlockData[] = []
const newBlock = {value: block.value, contentType: block.contentType, id}
if (block.contentType === 'image' && (typeof block.value.file !== 'string')) {
const base64String = btoa(String.fromCharCode.apply(null, (new Uint8Array(block.value.file)) as unknown as number[]))
newBlock.value.file = `data:image/jpeg;base64,${base64String}`
}
if (afterBlock) {
for (const b of data) {
newData.push(b)
if (b.id === afterBlock.id) {
newData.push(newBlock)
}
}
} else {
newData = [...data, newBlock]
}
setData(newData)
return newBlock
}}
onBlockModified={async (block: BlockData): Promise<BlockData|null> => {
const newData: BlockData[] = []
if (block.contentType === 'text' && block.value === '') {
for (const b of data) {
if (b.id !== block.id) {
newData.push(b)
}
}
setData(newData)
return block
}
for (const b of data) {
if (b.id === block.id) {
newData.push(block)
} else {
newData.push(b)
}
}
setData(newData)
return block
}}
onBlockMoved={async (block: BlockData<any>, beforeBlock: BlockData|null, afterBlock: BlockData<any>|null): Promise<void> => {
const newData: BlockData[] = []
for (const b of data) {
if (b.id !== block.id) {
if (beforeBlock && b.id === beforeBlock.id) {
newData.push(block)
}
newData.push(b)
if (afterBlock && b.id === afterBlock.id) {
newData.push(block)
}
}
}
setData(newData)
}}
/>
</header>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('focalboard-app'))
|