@wordpress/block-editor
Version:
64 lines (63 loc) • 1.7 kB
JavaScript
// packages/block-editor/src/components/block-list/block-html.js
import TextareaAutosize from "react-autosize-textarea";
import { useEffect, useState } from "@wordpress/element";
import { useSelect, useDispatch } from "@wordpress/data";
import {
getBlockAttributes,
getBlockContent,
getBlockType,
getSaveContent,
validateBlock
} from "@wordpress/blocks";
import { store as blockEditorStore } from "../../store";
import { jsx } from "react/jsx-runtime";
function BlockHTML({ clientId }) {
const [html, setHtml] = useState("");
const block = useSelect(
(select) => select(blockEditorStore).getBlock(clientId),
[clientId]
);
const { updateBlock } = useDispatch(blockEditorStore);
const onChange = () => {
const blockType = getBlockType(block.name);
if (!blockType) {
return;
}
const attributes = getBlockAttributes(
blockType,
html,
block.attributes
);
const content = html ? html : getSaveContent(blockType, attributes);
const [isValid] = html ? validateBlock({
...block,
attributes,
originalContent: content
}) : [true];
updateBlock(clientId, {
attributes,
originalContent: content,
isValid
});
if (!html) {
setHtml(content);
}
};
useEffect(() => {
setHtml(getBlockContent(block));
}, [block]);
return /* @__PURE__ */ jsx(
TextareaAutosize,
{
className: "block-editor-block-list__block-html-textarea",
value: html,
onBlur: onChange,
onChange: (event) => setHtml(event.target.value)
}
);
}
var block_html_default = BlockHTML;
export {
block_html_default as default
};
//# sourceMappingURL=block-html.js.map