common.js
45 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | import { __ } from '@wordpress/i18n'; |
| 5 | import { applyFormat } from '@wordpress/rich-text'; |
| 6 | import hex2rgba from '@vkblocks/utils/hex-to-rgba'; |
| 7 | |
| 8 | export const name = 'vk-blocks/highlighter'; |
| 9 | export const alpha = 0.7; |
| 10 | export const defaultColor = '#fffd6b'; |
| 11 | |
| 12 | // 色が指定されていなかったらデフォルトカラーを指定する |
| 13 | export const setColorIfUndefined = (color) => { |
| 14 | if (color === undefined) { |
| 15 | color = defaultColor; |
| 16 | } |
| 17 | return color; |
| 18 | }; |
| 19 | |
| 20 | //ハイライトカラーが選択されたら |
| 21 | export const highlighterOnApply = ({ color, value, onChange }) => { |
| 22 | color = setColorIfUndefined(color); |
| 23 | const style = `--vk-highlighter-color: ${hex2rgba(color, alpha)};`; |
| 24 | |
| 25 | onChange( |
| 26 | applyFormat(value, { |
| 27 | type: name, |
| 28 | attributes: { |
| 29 | data: color, |
| 30 | style, |
| 31 | }, |
| 32 | }) |
| 33 | ); |
| 34 | }; |
| 35 | |
| 36 | export const highlighColor = { |
| 37 | title: __('Highlighter', 'vk-blocks'), |
| 38 | tagName: 'span', |
| 39 | className: 'vk_highlighter', |
| 40 | attributes: { |
| 41 | data: 'data-color', |
| 42 | style: 'style', |
| 43 | }, |
| 44 | }; |
| 45 |