luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Upload image in createBlock

Browse source
This commit is contained in:
Chen-I Lim 2021-03-10 14:45:49 -08:00
parent c55f414b19
commit b7630dc178
5 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/components/content/contentRegistry.tsx
View file

@ -11,7 +11,7 @@ type ContentHandler = {
type: BlockTypes,
getDisplayText: (intl: IntlShape) => string,
getIcon: () => JSX.Element,
createBlock: () => MutableContentBlock,
createBlock: () => Promise<MutableContentBlock>,
addBlock(card: Card, contents: readonly IContentBlock[], index: number, intl: IntlShape): void,
createComponent: (block: IContentBlock, intl: IntlShape, readonly: boolean) => JSX.Element,
}

2
webapp/src/components/content/dividerElement.tsx
View file

@ -19,7 +19,7 @@ contentRegistry.registerContentType({
type: 'divider',
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
getIcon: () => <DividerIcon/>,
createBlock: () => {
createBlock: async () => {
return new MutableDividerBlock()
},
addBlock: (card, contents, index, intl) => {

17
webapp/src/components/content/imageElement.tsx
View file

@ -56,8 +56,21 @@ contentRegistry.registerContentType({
type: 'image',
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}),
getIcon: () => <ImageIcon/>,
createBlock: () => {
return new MutableImageBlock()
createBlock: async () => {
return new Promise<MutableImageBlock>(
(resolve) => {
Utils.selectLocalFile(async (file) => {
const fileId = await octoClient.uploadFile(file)
const block = new MutableImageBlock()
block.fileId = fileId || ''
resolve(block)
},
'.jpg,.jpeg,.png')
},
)
// return new MutableImageBlock()
},
addBlock: (card, contents, index, intl) => {
Utils.selectLocalFile((file) => {

2
webapp/src/components/content/textElement.tsx
View file

@ -52,7 +52,7 @@ contentRegistry.registerContentType({
type: 'text',
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}),
getIcon: () => <TextIcon/>,
createBlock: () => {
createBlock: async () => {
return new MutableTextBlock()
},
addBlock: (card, contents, index, intl) => {

15
webapp/src/components/contentBlock.tsx
View file

@ -112,8 +112,19 @@ class ContentBlock extends React.PureComponent<Props> {
id={type}
name={handler.getDisplayText(intl)}
icon={handler.getIcon()}
onClick={() => {
handler.addBlock(card, contents, index, intl)
onClick={async () => {
const newBlock = await handler.createBlock()
newBlock.parentId = card.id
newBlock.rootId = card.rootId
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
const typeName = handler.getDisplayText(intl)
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
mutator.performAsUndoGroup(async () => {
await mutator.insertBlock(newBlock, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
}}
/>
)