@mirrormedia/lilith-draft-renderer
Version:
## Introduction
234 lines (185 loc) • 7.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = DraftRenderer;
var _draftJs = require("draft-js");
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _const = require("../../draft-js/const");
var _blockRendererFn = require("./block-renderer-fn");
var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
var _contentType = require("./shared-style/content-type");
var _index = require("./shared-style/index");
var _theme = _interopRequireDefault(require("./theme"));
var _types = require("./types");
var _common = require("./utils/common");
var _post = require("./utils/post");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const DraftEditorWrapper = _styledComponents.default.div`
/* Rich-editor default setting (.RichEditor-root)*/
font-family: 'Georgia', serif;
text-align: left;
/* Custom setting */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
width: 100%;
height: 100%;
letter-spacing: 0.01em;
color: rgba(0, 9, 40, 0.87);
*:has(.bg) + *:has(.bg) {
section {
margin-top: 0 !important;
}
}
/* Draft built-in buttons' style */
.public-DraftStyleDefault-header-two {
${_index.defaultH2Style}
& + * {
${_index.narrowSpacingBetweenContent}
}
}
.public-DraftStyleDefault-ul {
${_index.defaultUlStyle}
}
.public-DraftStyleDefault-ol {
${_index.defaultOlStyle}
}
/* code-block */
.public-DraftStyleDefault-pre {
overflow: hidden;
}
.alignCenter * {
text-align: center;
}
.alignLeft * {
text-align: left;
}
/* image-block: text-around-picture */
figure.left {
${({
theme
}) => theme.breakpoint.xl} {
${_index.textAroundPictureStyle};
float: left;
transform: translateX(calc(-50% - 32px));
}
}
figure.right {
${({
theme
}) => theme.breakpoint.xl} {
${_index.textAroundPictureStyle};
float: right;
transform: translateX(32px);
}
}
${({
contentType
}) => {
switch (contentType) {
case _types.ValidPostContentType.NORMAL:
case _types.ValidPostContentType.ACTIONLIST:
return _contentType.NormalStyle;
case _types.ValidPostContentType.SUMMARY:
return _contentType.SummaryStyle;
case _types.ValidPostContentType.CITATION:
return _contentType.CitationStyle;
default:
return _contentType.NormalStyle;
}
}}
`;
const customStyleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2
}
};
const customStyleFn = style => {
return style.reduce((styles, styleName) => {
if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
styles['color'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
}
if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
const highlightColor = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
styles['background'] = `linear-gradient(to top, transparent 25%, ${highlightColor} 25% 75%, transparent 75%)`;
}
return styles;
}, {});
};
const blockStyleFn = (editorState, block) => {
var _entity$getData;
const entityKey = block.getEntityAt(0);
const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
let result = '';
const blockData = block.getData();
if (blockData) {
const textAlign = blockData === null || blockData === void 0 ? void 0 : blockData.get('textAlign');
if (textAlign === 'center') {
result += 'alignCenter ';
} else if (textAlign === 'left') {
result += 'alignLeft ';
}
}
switch (block.getType()) {
case 'header-two':
case 'header-three':
case 'header-four':
case 'blockquote':
result += 'public-DraftStyleDefault-' + block.getType();
break;
case 'atomic':
if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
// support all atomic block to set alignment
result += ' ' + entity.getData().alignment;
}
break;
default:
break;
}
return result;
};
const blockRendererFn = block => {
const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
return atomicBlockObj;
};
function DraftRenderer({
rawContentBlock,
insertRecommend = [],
contentType = _types.ValidPostContentType.NORMAL
}) {
//if `rawContentBlock` has no data, throw error
if (!rawContentBlock || !rawContentBlock.blocks || !rawContentBlock.blocks.length) {
throw new Error('There is no content in rawContentBlock, please check again.');
}
let contentState; //if `rawContentBlock` data need to insert recommends, use `insertRecommendInContent` utils
if (insertRecommend.length) {
const contentWithRecommend = (0, _post.insertRecommendInContentBlock)(rawContentBlock, insertRecommend);
contentState = (0, _draftJs.convertFromRaw)(contentWithRecommend);
} else {
//if `rawContentBlock` data has no recommends, only remove empty content blocks
const contentRemoveEmpty = (0, _common.removeEmptyContentBlock)(rawContentBlock);
contentState = (0, _draftJs.convertFromRaw)(contentRemoveEmpty);
}
const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorator.default);
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
theme: _theme.default
}, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, {
contentType: contentType
}, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
editorState: editorState,
customStyleMap: customStyleMap,
blockStyleFn: blockStyleFn.bind(null, editorState),
blockRendererFn: blockRendererFn,
customStyleFn: customStyleFn,
readOnly: true // eslint-disable-next-line @typescript-eslint/no-empty-function
,
onChange: () => {}
})));
}