index.js
54 lines
| 1 | import { ReactComponent as Icon } from './icon.svg'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { registerFormatType, insert } from '@wordpress/rich-text'; |
| 4 | import { BlockControls } from '@wordpress/block-editor'; |
| 5 | import { ToolbarGroup, ToolbarItem, DropdownMenu } from '@wordpress/components'; |
| 6 | |
| 7 | const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; |
| 8 | |
| 9 | // 改行を挿� |
| 10 | �する |
| 11 | const insertBR = (value, onChange, breakPoint) => { |
| 12 | onChange(insert(value, `[br-${breakPoint}]`, value.start, value.end)); |
| 13 | }; |
| 14 | |
| 15 | registerFormatType(`vk-blocks/responsive-br`, { |
| 16 | title: __(`Responsive Br`, 'vk-blocks'), |
| 17 | tagName: 'br', |
| 18 | className: null, |
| 19 | edit: (props) => { |
| 20 | const { onChange, value } = props; |
| 21 | |
| 22 | return ( |
| 23 | <BlockControls group="block"> |
| 24 | <ToolbarGroup> |
| 25 | <ToolbarItem> |
| 26 | {(toggleProps) => ( |
| 27 | <DropdownMenu |
| 28 | icon={<Icon />} |
| 29 | toggleProps={toggleProps} |
| 30 | label={__(`Responsive BR`, 'vk-blocks')} |
| 31 | controls={breakPoints.map((breakPoint) => { |
| 32 | return { |
| 33 | title: |
| 34 | __(`Responsive BR`, 'vk-blocks') + |
| 35 | `( ${breakPoint} )`, |
| 36 | icon: <Icon />, |
| 37 | onClick: () => { |
| 38 | insertBR( |
| 39 | value, |
| 40 | onChange, |
| 41 | breakPoint |
| 42 | ); |
| 43 | }, |
| 44 | }; |
| 45 | })} |
| 46 | /> |
| 47 | )} |
| 48 | </ToolbarItem> |
| 49 | </ToolbarGroup> |
| 50 | </BlockControls> |
| 51 | ); |
| 52 | }, |
| 53 | }); |
| 54 |