// packages/block-editor/src/components/block-compare/index.js
import clsx from "clsx";
import { diffChars } from "diff/lib/diff/character";
import { __ } from "@wordpress/i18n";
import { getSaveContent } from "@wordpress/blocks";
import BlockView from "./block-view";
import { jsx, jsxs } from "react/jsx-runtime";
function BlockCompare({
  block,
  onKeep,
  onConvert,
  convertor,
  convertButtonText
}) {
  function getDifference(originalContent, newContent) {
    const difference2 = diffChars(originalContent, newContent);
    return difference2.map((item, pos) => {
      const classes = clsx({
        "block-editor-block-compare__added": item.added,
        "block-editor-block-compare__removed": item.removed
      });
      return /* @__PURE__ */ jsx("span", { className: classes, children: item.value }, pos);
    });
  }
  function getConvertedContent(convertedBlock) {
    const newBlocks = Array.isArray(convertedBlock) ? convertedBlock : [convertedBlock];
    const newContent = newBlocks.map(
      (item) => getSaveContent(item.name, item.attributes, item.innerBlocks)
    );
    return newContent.join("");
  }
  const converted = getConvertedContent(convertor(block));
  const difference = getDifference(block.originalContent, converted);
  return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-compare__wrapper", children: [
    /* @__PURE__ */ jsx(
      BlockView,
      {
        title: __("Current"),
        className: "block-editor-block-compare__current",
        action: onKeep,
        actionText: __("Convert to HTML"),
        rawContent: block.originalContent,
        renderedContent: block.originalContent
      }
    ),
    /* @__PURE__ */ jsx(
      BlockView,
      {
        title: __("After Conversion"),
        className: "block-editor-block-compare__converted",
        action: onConvert,
        actionText: convertButtonText,
        rawContent: difference,
        renderedContent: converted
      }
    )
  ] });
}
var block_compare_default = BlockCompare;
export {
  block_compare_default as default
};
//# sourceMappingURL=index.js.map
