From 4fb54365f6a8e873551bbb51accf0470fc2f5264 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Wed, 10 Mar 2021 14:55:01 -0800
Subject: [PATCH] Make add card content dynamic

---
 webapp/src/components/cardDetail.tsx          | 68 ++++++++++++-------
 .../components/content/contentRegistry.tsx    |  2 +-
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index f5f849044..1a15e97a5 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/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
-                                    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',
-                                    )}
-                                />
-
+                                {contentRegistry.contentTypes.map((type) => this.addContentMenu(type))}
                             </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
diff --git a/webapp/src/components/content/contentRegistry.tsx b/webapp/src/components/content/contentRegistry.tsx
index 966f9e99e..dd9c3559a 100644
--- a/webapp/src/components/content/contentRegistry.tsx
+++ b/webapp/src/components/content/contentRegistry.tsx
@@ -38,5 +38,5 @@ class ContentRegistry {
 
 const contentRegistry = new ContentRegistry()
 
-// export type {ContentHandler}
+export type {ContentHandler}
 export {contentRegistry}