@wordpress/block-editor
Version:
64 lines (63 loc) • 2.1 kB
JavaScript
// 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