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)
- })
- }}
- />
- )
- }
}
}