Make add card content dynamic

webapp/src/components/cardDetail.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../blockIcons'
+import {BlockTypes} from '../blocks/block'
 import {PropertyType} from '../blocks/board'
 import {MutableTextBlock} from '../blocks/textBlock'
 import mutator from '../mutator'
@@ -20,6 +21,7 @@ import PropertyMenu from '../widgets/propertyMenu'
 import BlockIconSelector from './blockIconSelector'
 import './cardDetail.scss'
 import CommentsList from './commentsList'
+import {ContentHandler, contentRegistry} from './content/contentRegistry'
 import ContentBlock from './contentBlock'
 import {MarkdownEditor} from './markdownEditor'
 import PropertyValueElement from './propertyValueElement'
@@ -221,31 +223,7 @@ class CardDetail extends React.Component<Props, State> {
                                 />
                             </Button>
                             <Menu position='top'>
-                                <Menu.Text
+                                {contentRegistry.contentTypes.map((type) => this.addContentMenu(type))}
-                                    id='text'
-                                    name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
-                                    onClick={() => {
-                                        this.addTextBlock('')
-                                    }}
-                                />
-                                <Menu.Text
-                                    id='image'
-                                    name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
-                                    onClick={() => Utils.selectLocalFile((file) => {
-                                        mutator.performAsUndoGroup(async () => {
-                                            const description = intl.formatMessage({id: 'ContentBlock.addImage', defaultMessage: 'add image'})
-                                            const newBlock = await mutator.createImageBlock(card, file, description)
-                                            if (newBlock) {
-                                                const contentOrder = card.contentOrder.slice()
-                                                contentOrder.push(newBlock.id)
-                                                await mutator.changeCardContentOrder(card, contentOrder, description)
-                                            }
-                                        })
-                                    },
-                                    '.jpg,.jpeg,.png',
-                                    )}
-                                />
-
                             </Menu>
                         </MenuWrapper>
                     </div>
@@ -254,6 +232,46 @@ class CardDetail extends React.Component<Props, State> {
         )
     }
 
+    private addContentMenu(type: BlockTypes): JSX.Element {
+        const {intl} = this.props
+
+        const handler = contentRegistry.getHandler(type)
+        if (!handler) {
+            Utils.logError(`addContentMenu, unknown content type: ${type}`)
+            return <></>
+        }
+
+        return (
+            <Menu.Text
+                ref={type}
+                id={type}
+                name={handler.getDisplayText(intl)}
+                icon={handler.getIcon()}
+                onClick={() => {
+                    this.addBlock(handler)
+                }}
+            />
+        )
+    }
+
+    private async addBlock(handler: ContentHandler) {
+        const {intl, cardTree} = this.props
+        const {card} = cardTree
+
+        const newBlock = await handler.createBlock()
+        newBlock.parentId = card.id
+        newBlock.rootId = card.rootId
+
+        const contentOrder = card.contentOrder.slice()
+        contentOrder.push(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)
+        })
+    }
+
     private addTextBlock(text: string): void {
         const {intl, cardTree} = this.props
         const {card} = cardTree

webapp/src/components/content/contentRegistry.tsx

@@ -38,5 +38,5 @@ class ContentRegistry {
 
 const contentRegistry = new ContentRegistry()
 
-// export type {ContentHandler}
+export type {ContentHandler}
 export {contentRegistry}