Move add content logic into handler

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,
 }
 

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: () => <DividerElement/>,
 })
 

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 (
             <ImageElement

webapp/src/components/content/textElement.tsx

@@ -55,6 +55,20 @@ contentRegistry.registerContentType({
     createBlock: () => {
         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 (
             <TextElement

webapp/src/components/contentBlock.tsx

@@ -106,51 +106,17 @@ class ContentBlock extends React.PureComponent<Props> {
             return <></>
         }
 
-        switch (type) {
+        return (
-        case 'image': return (
             <Menu.Text
                 ref={type}
                 id={type}
                 name={handler.getDisplayText(intl)}
                 icon={handler.getIcon()}
                 onClick={() => {
-                    Utils.selectLocalFile((file) => {
+                    handler.addBlock(card, contents, index, intl)
-                        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')
                 }}
             />
         )
-        default: return (
-            <Menu.Text
-                ref={type}
-                id={type}
-                name={handler.getDisplayText(intl)}
-                icon={handler.getIcon()}
-                onClick={() => {
-                    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)
-                    })
-                }}
-            />
-        )
-        }
     }
 }