index.js
56 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | import { registerFormatType, toggleFormat } from '@wordpress/rich-text'; |
| 5 | import { RichTextToolbarButton } from '@wordpress/block-editor'; |
| 6 | import { Icon } from '@wordpress/components'; |
| 7 | |
| 8 | /** |
| 9 | * Internal dependencies |
| 10 | */ |
| 11 | import { IconSVG, getVkIconStyle } from '@vkblocks/components/vk-icon'; |
| 12 | /*globals vk_blocks_params */ |
| 13 | |
| 14 | if (window.vk_blocks_params) { |
| 15 | vk_blocks_params.custom_format_lists.forEach((formatList) => { |
| 16 | if (!formatList.title) { |
| 17 | return; |
| 18 | } |
| 19 | |
| 20 | const name = |
| 21 | formatList.class_name && `vk-blocks/${formatList.class_name}`; |
| 22 | const title = formatList.title; |
| 23 | const className = formatList.is_active_highlighter |
| 24 | ? `${formatList.class_name}--vk-highlighter` |
| 25 | : formatList.class_name; |
| 26 | |
| 27 | registerFormatType(name, { |
| 28 | title, |
| 29 | tagName: 'span', |
| 30 | className, |
| 31 | edit(props) { |
| 32 | const { value, isActive } = props; |
| 33 | return ( |
| 34 | <RichTextToolbarButton |
| 35 | title={ |
| 36 | <> |
| 37 | <Icon |
| 38 | icon={IconSVG} |
| 39 | style={getVkIconStyle(false, { |
| 40 | marginRight: '8px', |
| 41 | })} |
| 42 | /> |
| 43 | <span className={className}>{title}</span> |
| 44 | </> |
| 45 | } |
| 46 | onClick={() => { |
| 47 | props.onChange(toggleFormat(value, { type: name })); |
| 48 | }} |
| 49 | isActive={isActive} |
| 50 | /> |
| 51 | ); |
| 52 | }, |
| 53 | }); |
| 54 | }); |
| 55 | } |
| 56 |