// 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
