@wordpress/block-editor
Version:
79 lines (73 loc) • 2.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _character = require("diff/lib/diff/character");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _blockView = _interopRequireDefault(require("./block-view"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
// diff doesn't tree-shake correctly, so we import from the individual
// module here, to avoid including too much of the library
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockCompare({
block,
onKeep,
onConvert,
convertor,
convertButtonText
}) {
function getDifference(originalContent, newContent) {
const difference = (0, _character.diffChars)(originalContent, newContent);
return difference.map((item, pos) => {
const classes = (0, _clsx.default)({
'block-editor-block-compare__added': item.added,
'block-editor-block-compare__removed': item.removed
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: classes,
children: item.value
}, pos);
});
}
function getConvertedContent(convertedBlock) {
// The convertor may return an array of items or a single item.
const newBlocks = Array.isArray(convertedBlock) ? convertedBlock : [convertedBlock];
// Get converted block details.
const newContent = newBlocks.map(item => (0, _blocks.getSaveContent)(item.name, item.attributes, item.innerBlocks));
return newContent.join('');
}
const converted = getConvertedContent(convertor(block));
const difference = getDifference(block.originalContent, converted);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-compare__wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockView.default, {
title: (0, _i18n.__)('Current'),
className: "block-editor-block-compare__current",
action: onKeep,
actionText: (0, _i18n.__)('Convert to HTML'),
rawContent: block.originalContent,
renderedContent: block.originalContent
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockView.default, {
title: (0, _i18n.__)('After Conversion'),
className: "block-editor-block-compare__converted",
action: onConvert,
actionText: convertButtonText,
rawContent: difference,
renderedContent: converted
})]
});
}
var _default = exports.default = BlockCompare;
//# sourceMappingURL=index.js.map