| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { createHigherOrderComponent } from "@wordpress/compose"; |
| 3 |
import { addFilter } from "@wordpress/hooks"; |
| 4 |
import { BlockControls } from "@wordpress/block-editor"; |
| 5 |
import { ToolbarGroup, ToolbarButton } from "@wordpress/components"; |
| 6 |
import { dispatch, select } from "@wordpress/data"; |
| 7 |
import { serialize } from "@wordpress/blocks"; |
| 8 |
import { Fragment } from "@wordpress/element"; |
| 9 |
import { STORE_KEY } from "./store"; |
| 10 |
|
| 11 |
const SUPPORTED_BLOCKS = [ |
| 12 |
"core/paragraph", |
| 13 |
"core/heading", |
| 14 |
"core/list", |
| 15 |
"core/list-item", |
| 16 |
"core/quote", |
| 17 |
"core/pullquote", |
| 18 |
"core/preformatted", |
| 19 |
"core/verse", |
| 20 |
"core/code", |
| 21 |
"core/details", |
| 22 |
"core/group", |
| 23 |
"core/columns", |
| 24 |
"core/column", |
| 25 |
]; |
| 26 |
|
| 27 |
const aiIcon = ( |
| 28 |
<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> |
| 29 |
<path d="M12 3l1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3zm7 10l.95 2.3L22.25 16.25l-2.3.95L19 19.5l-.95-2.3L15.75 16.25l2.3-.95L19 13zM5 15l.7 1.7 1.7.7-1.7.7L5 19.8l-.7-1.7L2.6 17.4l1.7-.7L5 15z" fill="currentColor"/> |
| 30 |
</svg> |
| 31 |
); |
| 32 |
|
| 33 |
const isSupported = (name) => SUPPORTED_BLOCKS.indexOf(name) !== -1; |
| 34 |
|
| 35 |
const withAIBlockControl = createHigherOrderComponent((BlockEdit) => { |
| 36 |
return (props) => { |
| 37 |
const { name, isSelected, clientId } = props; |
| 38 |
|
| 39 |
if (!isSelected || !isSupported(name)) { |
| 40 |
return <BlockEdit {...props} />; |
| 41 |
} |
| 42 |
|
| 43 |
const onClick = () => { |
| 44 |
const block = select("core/block-editor").getBlock(clientId); |
| 45 |
if (!block) { |
| 46 |
return; |
| 47 |
} |
| 48 |
|
| 49 |
const html = serialize([block]); |
| 50 |
|
| 51 |
const tmp = document.createElement("div"); |
| 52 |
tmp.innerHTML = html; |
| 53 |
const plain = (tmp.textContent || tmp.innerText || "") |
| 54 |
.replace(/\r\n?/g, "\n") |
| 55 |
.replace(/[ \t]+/g, " ") |
| 56 |
.replace(/[ \t]*\n[ \t]*/g, "\n") |
| 57 |
.replace(/\n{2,}/g, "\n\n") |
| 58 |
.trim(); |
| 59 |
|
| 60 |
dispatch(STORE_KEY).openModal({ |
| 61 |
selectionType: "block", |
| 62 |
selectionText: plain, |
| 63 |
selectionHtml: html, |
| 64 |
blockClientId: clientId, |
| 65 |
inlineContext: null, |
| 66 |
}); |
| 67 |
}; |
| 68 |
|
| 69 |
return ( |
| 70 |
<Fragment> |
| 71 |
<BlockEdit {...props} /> |
| 72 |
<BlockControls group="other"> |
| 73 |
<ToolbarGroup> |
| 74 |
<ToolbarButton |
| 75 |
icon={aiIcon} |
| 76 |
label={__("Edit with BetterDocs AI", "betterdocs")} |
| 77 |
onClick={onClick} |
| 78 |
/> |
| 79 |
</ToolbarGroup> |
| 80 |
</BlockControls> |
| 81 |
</Fragment> |
| 82 |
); |
| 83 |
}; |
| 84 |
}, "withAIBlockControl"); |
| 85 |
|
| 86 |
addFilter("editor.BlockEdit", "betterdocs/ai-edit-block-control", withAIBlockControl); |
| 87 |
|
