UNPKG

@gechiui/block-editor

Version:
76 lines (66 loc) 2.21 kB
import { createElement } from "@gechiui/element"; /** * External dependencies */ import classnames from 'classnames'; import { castArray } from 'lodash'; // diff doesn't tree-shake correctly, so we import from the individual // module here, to avoid including too much of the library import { diffChars } from 'diff/lib/diff/character'; /** * GeChiUI dependencies */ import { __ } from '@gechiui/i18n'; import { getSaveContent } from '@gechiui/blocks'; /** * Internal dependencies */ import BlockView from './block-view'; function BlockCompare(_ref) { let { block, onKeep, onConvert, convertor, convertButtonText } = _ref; function getDifference(originalContent, newContent) { const difference = diffChars(originalContent, newContent); return difference.map((item, pos) => { const classes = classnames({ 'block-editor-block-compare__added': item.added, 'block-editor-block-compare__removed': item.removed }); return createElement("span", { key: pos, className: classes }, item.value); }); } function getConvertedContent(convertedBlock) { // The convertor may return an array of items or a single item const newBlocks = castArray(convertedBlock); // Get converted block details 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 createElement("div", { className: "block-editor-block-compare__wrapper" }, createElement(BlockView, { title: __('当前'), className: "block-editor-block-compare__current", action: onKeep, actionText: __('转换为HTML'), rawContent: block.originalContent, renderedContent: block.originalContent }), createElement(BlockView, { title: __('转换后'), className: "block-editor-block-compare__converted", action: onConvert, actionText: convertButtonText, rawContent: difference, renderedContent: converted })); } export default BlockCompare; //# sourceMappingURL=index.js.map