[form-builder] Icons in blockeditor (#1416)

* [schema] Support icon on block * [schema] Support annotation icon * [schema] Support decorator icon * [form-builder] Resolve annotation icon * [test-studio] Customised icon test
sanity-io · Jul 8, 2019 · 5d1a90b · 5d1a90b
1 parent b3d61f4
commit 5d1a90b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 12 deletions.
diff --git a/packages/@sanity/block-tools/src/util/blockContentTypeFeatures.js b/packages/@sanity/block-tools/src/util/blockContentTypeFeatures.js
@@ -47,7 +47,8 @@ function resolveEnabledAnnotationTypes(spanType) {
       blockEditor: annotation.blockEditor,
       title: annotation.title,
       type: annotation,
-      value: annotation.name
+      value: annotation.name,
+      icon: annotation.icon
     }
   })
 }

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor/Toolbar/AnnotationButtons.js b/packages/@sanity/form-builder/src/inputs/BlockEditor/Toolbar/AnnotationButtons.js
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import {Value as SlateValue, Range} from 'slate'
+import {get} from 'lodash'
 import {randomKey} from '@sanity/block-tools'
 import LinkIcon from 'part:@sanity/base/link-icon'
 import SanityLogoIcon from 'part:@sanity/base/sanity-logo-icon'
@@ -12,7 +13,7 @@ import CustomIcon from './CustomIcon'
 import ToolbarClickAction from './ToolbarClickAction'
 
 import styles from './styles/AnnotationButtons.css'
-import CollapsibleButtonGroup from './CollapsibleButtonGroup';
+import CollapsibleButtonGroup from './CollapsibleButtonGroup'
 
 type AnnotationItem = BlockContentFeature & {
   active: boolean,
@@ -37,6 +38,16 @@ function getIcon(type: string) {
   }
 }
 
+function getIconFromItem(item: AnnotationItem) {
+  return (
+    item.icon ||
+    get(item, 'blockEditor.icon') ||
+    get(item, 'type.icon') ||
+    get(item, 'type.to.icon') ||
+    get(item, 'type.to[0].icon')
+  )
+}
+
 const NOOP = () => {}
 
 export default class AnnotationButtons extends React.Component<Props> {
@@ -100,7 +111,7 @@ export default class AnnotationButtons extends React.Component<Props> {
   renderAnnotationButton = (item: AnnotationItem) => {
     const {editor} = this.props
     let Icon
-    const icon = item.blockEditor ? item.blockEditor.icon : null
+    const icon = getIconFromItem(item)
     if (icon) {
       if (typeof icon === 'string') {
         Icon = () => <CustomIcon icon={icon} active={!!item.active} />
@@ -131,7 +142,7 @@ export default class AnnotationButtons extends React.Component<Props> {
     const {collapsed} = this.props
     const items = this.getItems()
     let Icon
-    const icon = items[0].blockEditor ? items[0].blockEditor.icon : null
+    const icon = getIconFromItem(items[0])
     if (icon) {
       if (typeof icon === 'string') {
         Icon = () => <CustomIcon icon={icon} active={!!items[0].active} />

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor/Toolbar/DecoratorButtons.js b/packages/@sanity/form-builder/src/inputs/BlockEditor/Toolbar/DecoratorButtons.js
@@ -78,7 +78,7 @@ export default class DecoratorButtons extends React.Component<Props> {
 
   renderDecoratorButton = (item: DecoratorItem) => {
     const {editor} = this.props
-    const icon = item.blockEditor ? item.blockEditor.icon : null
+    const icon = item.icon || (item.blockEditor && item.blockEditor.icon)
     const Icon = icon || getIcon(item.value)
     // We must not do a click-event here, because that messes with the editor focus!
     const onAction = () => {
@@ -109,7 +109,7 @@ export default class DecoratorButtons extends React.Component<Props> {
   render() {
     const {collapsed} = this.props
     const items = this.getItems()
-    const icon = items[0].blockEditor ? items[0].blockEditor.icon : null
+    const icon = items[0].icon || (items[0].blockEditor && items[0].blockEditor.icon)
 
     if (items.length > 0 && collapsed) {
       return (

diff --git a/packages/@sanity/schema/src/legacy/types/blocks/block.js b/packages/@sanity/schema/src/legacy/types/blocks/block.js
@@ -19,7 +19,8 @@ const INHERITED_FIELDS = [
   'jsonType',
   'description',
   'options',
-  'fieldsets'
+  'fieldsets',
+  'icon'
 ]
 
 const BLOCK_CORE = {

diff --git a/packages/@sanity/schema/src/legacy/types/blocks/span.js b/packages/@sanity/schema/src/legacy/types/blocks/span.js
@@ -9,7 +9,8 @@ const INHERITED_FIELDS = [
   'jsonType',
   'description',
   'options',
-  'fieldsets'
+  'fieldsets',
+  'icon'
 ]
 
 const SPAN_CORE = {

diff --git a/packages/@sanity/schema/src/legacy/types/object.js b/packages/@sanity/schema/src/legacy/types/object.js
@@ -16,7 +16,8 @@ const OVERRIDABLE_FIELDS = [
   '__experimental_search',
   'options',
   'inputComponent',
-  'validation'
+  'validation',
+  'icon'
 ]
 
 const normalizeSearchConfig = configs => {

diff --git a/packages/@sanity/schema/src/sanity/validation/types/block.js b/packages/@sanity/schema/src/sanity/validation/types/block.js
@@ -9,7 +9,7 @@ const quote = str => `"${str}"`
 const allowedKeys = ['type', 'styles', 'marks', 'lists', 'of', 'title', 'name']
 const allowedMarkKeys = ['decorators', 'annotations']
 const allowedStyleKeys = ['title', 'value', 'blockEditor']
-const allowedDecoratorKeys = ['title', 'value', 'blockEditor']
+const allowedDecoratorKeys = ['title', 'value', 'blockEditor', 'icon']
 
 export default function validateBlockType(typeDef, visitorContext) {
   const problems = []

diff --git a/packages/test-studio/schemas/blocks.js b/packages/test-studio/schemas/blocks.js
@@ -169,9 +169,30 @@ export default {
           ],
           lists: [{title: 'Bullet', value: 'bullet'}, {title: 'Numbered', value: 'number'}],
           marks: {
-            decorators: [{title: 'Strong', value: 'strong'}, {title: 'Emphasis', value: 'em'}],
+            decorators: [
+              {title: 'Strong', value: 'strong'},
+              {title: 'Emphasis', value: 'em'},
+              {title: 'Decorator with custom icon', value: 'color', icon: colorIcon}
+            ],
             annotations: [
-              {name: 'Author', title: 'Author', type: 'reference', to: {type: 'author'}}
+              {
+                name: 'Author',
+                title: 'Author',
+                type: 'reference',
+                to: {type: 'author'}
+              },
+              {
+                title: 'Annotation with custom icon',
+                name: 'test',
+                type: 'object',
+                icon: colorIcon,
+                fields: [
+                  {
+                    name: 'testString',
+                    type: 'string'
+                  }
+                ]
+              }
             ]
           },
           of: [