diff --git a/webapp/src/components/content/contentRegistry.tsx b/webapp/src/components/content/contentRegistry.tsx
index 128f2260f..ee8c480e6 100644
--- a/webapp/src/components/content/contentRegistry.tsx
+++ b/webapp/src/components/content/contentRegistry.tsx
@@ -11,6 +11,9 @@ import {MutableDividerBlock} from '../../blocks/dividerBlock'
import {MutableImageBlock} from '../../blocks/imageBlock'
import {MutableTextBlock} from '../../blocks/textBlock'
import {Utils} from '../../utils'
+import DividerIcon from '../../widgets/icons/divider'
+import ImageIcon from '../../widgets/icons/image'
+import TextIcon from '../../widgets/icons/text'
import DividerElement from './dividerElement'
import ImageElement from './imageElement'
@@ -20,6 +23,7 @@ type RegistryEntry = {
type: BlockTypes,
createBlock: () => MutableContentBlock,
getDisplayText: (intl: IntlShape) => string,
+ getIcon: () => JSX.Element,
createComponent: (block: IContentBlock, readonly: boolean) => JSX.Element,
}
@@ -38,6 +42,7 @@ class ContentRegistry {
return new MutableTextBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}),
+ getIcon: () => ,
createComponent: (block, readonly) => (
{
- return new MutableDividerBlock()
- },
- getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
- createComponent: () => ,
- },
- )
-
this.registerContentType(
{
type: 'image',
@@ -65,9 +59,22 @@ class ContentRegistry {
return new MutableImageBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}),
+ getIcon: () => ,
createComponent: (block) => ,
},
)
+
+ this.registerContentType(
+ {
+ type: 'divider',
+ createBlock: () => {
+ return new MutableDividerBlock()
+ },
+ getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
+ getIcon: () => ,
+ createComponent: () => ,
+ },
+ )
}
private registerContentType(entry: RegistryEntry) {
@@ -97,6 +104,11 @@ class ContentRegistry {
return entry.getDisplayText(intl)
}
+
+ getIcon(type: BlockTypes): JSX.Element | undefined {
+ const entry = this.registry.get(type)
+ return entry?.getIcon()
+ }
}
const contentRegistry = new ContentRegistry()
diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index e3f5631a5..5b26a2cb7 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -12,17 +12,15 @@ import {Utils} from '../utils'
import IconButton from '../widgets/buttons/iconButton'
import AddIcon from '../widgets/icons/add'
import DeleteIcon from '../widgets/icons/delete'
-import ImageIcon from '../widgets/icons/image'
import OptionsIcon from '../widgets/icons/options'
import SortDownIcon from '../widgets/icons/sortDown'
import SortUpIcon from '../widgets/icons/sortUp'
-import TextIcon from '../widgets/icons/text'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import ContentElement from './content/contentElement'
-import './contentBlock.scss'
import contentRegistry from './content/contentRegistry'
+import './contentBlock.scss'
type Props = {
block: IContentBlock
@@ -108,7 +106,7 @@ class ContentBlock extends React.PureComponent {
ref={type}
id={type}
name={contentRegistry.typeDisplayText(intl, type)}
- icon={}
+ icon={contentRegistry.getIcon(type)}
onClick={() => {
Utils.selectLocalFile((file) => {
mutator.performAsUndoGroup(async () => {
@@ -130,7 +128,7 @@ class ContentBlock extends React.PureComponent {
ref={type}
id={type}
name={contentRegistry.typeDisplayText(intl, type)}
- icon={}
+ icon={contentRegistry.getIcon(type)}
onClick={() => {
const newBlock = contentRegistry.createBlock(type)!
newBlock.parentId = card.id