diff --git a/webapp/src/components/content/contentRegistry.tsx b/webapp/src/components/content/contentRegistry.tsx index 8f1127c82..872462a24 100644 --- a/webapp/src/components/content/contentRegistry.tsx +++ b/webapp/src/components/content/contentRegistry.tsx @@ -4,6 +4,7 @@ import {IntlShape} from 'react-intl' import {BlockTypes} from '../../blocks/block' +import {Card} from '../../blocks/card' import {IContentBlock, MutableContentBlock} from '../../blocks/contentBlock' type ContentHandler = { @@ -11,6 +12,7 @@ type ContentHandler = { getDisplayText: (intl: IntlShape) => string, getIcon: () => JSX.Element, createBlock: () => MutableContentBlock, + addBlock(card: Card, contents: readonly IContentBlock[], index: number, intl: IntlShape): void, createComponent: (block: IContentBlock, intl: IntlShape, readonly: boolean) => JSX.Element, } diff --git a/webapp/src/components/content/dividerElement.tsx b/webapp/src/components/content/dividerElement.tsx index 20330718a..aad167019 100644 --- a/webapp/src/components/content/dividerElement.tsx +++ b/webapp/src/components/content/dividerElement.tsx @@ -3,6 +3,7 @@ import React from 'react' import {MutableDividerBlock} from '../../blocks/dividerBlock' +import mutator from '../../mutator' import DividerIcon from '../../widgets/icons/divider' import {contentRegistry} from './contentRegistry' @@ -21,6 +22,20 @@ contentRegistry.registerContentType({ createBlock: () => { return new MutableDividerBlock() }, + addBlock: (card, contents, index, intl) => { + const newBlock = new MutableDividerBlock() + newBlock.parentId = card.id + newBlock.rootId = card.rootId + + const contentOrder = contents.map((o) => o.id) + contentOrder.splice(index, 0, newBlock.id) + const typeName = intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}) + mutator.performAsUndoGroup(async () => { + const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName}) + await mutator.insertBlock(newBlock, description) + await mutator.changeCardContentOrder(card, contentOrder, description) + }) + }, createComponent: () => , }) diff --git a/webapp/src/components/content/imageElement.tsx b/webapp/src/components/content/imageElement.tsx index 8d8d9f6f9..2bd98e0ef 100644 --- a/webapp/src/components/content/imageElement.tsx +++ b/webapp/src/components/content/imageElement.tsx @@ -5,7 +5,9 @@ import {injectIntl, IntlShape} from 'react-intl' import {IContentBlock, MutableContentBlock} from '../../blocks/contentBlock' import {MutableImageBlock} from '../../blocks/imageBlock' +import mutator from '../../mutator' import octoClient from '../../octoClient' +import {Utils} from '../../utils' import ImageIcon from '../../widgets/icons/image' import {contentRegistry} from './contentRegistry' @@ -57,6 +59,21 @@ contentRegistry.registerContentType({ createBlock: () => { return new MutableImageBlock() }, + addBlock: (card, contents, index, intl) => { + Utils.selectLocalFile((file) => { + mutator.performAsUndoGroup(async () => { + const typeName = intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}) + const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName}) + const newBlock = await mutator.createImageBlock(card, file, description) + if (newBlock) { + const contentOrder = contents.map((o) => o.id) + contentOrder.splice(index, 0, newBlock.id) + await mutator.changeCardContentOrder(card, contentOrder, description) + } + }) + }, + '.jpg,.jpeg,.png') + }, createComponent: (block, intl) => { return ( { return new MutableTextBlock() }, + addBlock: (card, contents, index, intl) => { + const newBlock = new MutableTextBlock() + newBlock.parentId = card.id + newBlock.rootId = card.rootId + + const contentOrder = contents.map((o) => o.id) + contentOrder.splice(index, 0, newBlock.id) + const typeName = intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}) + mutator.performAsUndoGroup(async () => { + const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName}) + await mutator.insertBlock(newBlock, description) + await mutator.changeCardContentOrder(card, contentOrder, description) + }) + }, createComponent: (block, intl, readonly) => { return ( { return <> } - switch (type) { - case 'image': return ( + return ( { - Utils.selectLocalFile((file) => { - mutator.performAsUndoGroup(async () => { - const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: handler.getDisplayText(intl)}) - const newBlock = await mutator.createImageBlock(card, file, description) - if (newBlock) { - const contentOrder = contents.map((o) => o.id) - contentOrder.splice(index, 0, newBlock.id) - await mutator.changeCardContentOrder(card, contentOrder, description) - } - }) - }, - '.jpg,.jpeg,.png') + handler.addBlock(card, contents, index, intl) }} /> ) - default: return ( - { - const newBlock = handler.createBlock()! - newBlock.parentId = card.id - newBlock.rootId = card.rootId - - const contentOrder = contents.map((o) => o.id) - contentOrder.splice(index, 0, newBlock.id) - mutator.performAsUndoGroup(async () => { - const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: handler.getDisplayText(intl)}) - await mutator.insertBlock(newBlock, description) - await mutator.changeCardContentOrder(card, contentOrder, description) - }) - }} - /> - ) - } } }