dh-c
Version:
The front-end development engineers jimberton gulp react component
186 lines (172 loc) • 6.7 kB
JavaScript
'use strict';
exports.__esModule = true;
exports.getFromHTMLConfig = exports.getToHTMLConfig = exports.MediaBlockRenderer = exports.insertImages = undefined;
var _draftJs = require('draft-js');
var _component = require('./component.js');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var insertImages = exports.insertImages = function insertImages(editorState, data) {
var contentState = editorState.getCurrentContent();
var contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', data);
var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
var newEditorState = _draftJs.EditorState.set(editorState, { currentContent: contentStateWithEntity });
return _draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
};
var MediaBlockRenderer = exports.MediaBlockRenderer = function MediaBlockRenderer(block) {
if (block.getType() === 'atomic') {
return {
component: _component.MediaBlock,
editable: false
};
}
};
/**
* 转换HTML的配置
* @param {*} props
*/
var blocks = {
height: 500,
language: 'zh',
controls: ['undo', 'redo', 'split', 'font-size', 'font-family', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'superscript', 'subscript', 'emoji', 'text-align', 'split', 'headings', 'list_ul', 'list_ol', 'blockquote', 'code', 'split', 'link', 'split', 'media'],
extendControls: [],
media: {
image: true,
video: true,
audio: true,
uploadFn: null,
sourceFn: null
},
colors: ['#000000', '#333333', '#666666', '#999999', '#cccccc', '#ffffff', '#61a951', '#16a085', '#07a9fe', '#003ba5', '#8e44ad', '#f32784', '#c0392b', '#d35400', '#f39c12', '#fdda00', '#7f8c8d', '#2c3e50'],
fontSizes: [12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 48, 56, 64, 72, 96, 120, 144],
fontFamilies: [{
name: 'Araial',
family: 'Arial, Helvetica, sans-serif'
}, {
name: 'Georgia',
family: 'Georgia, serif'
}, {
name: 'Impact',
family: 'Impact, serif'
}, {
name: 'Monospace',
family: '"Courier New", Courier, monospace'
}, {
name: 'Tahoma',
family: "tahoma, arial, 'Hiragino Sans GB', 宋体, sans-serif"
}],
emojis: ["🤣", "🙌", "💚", "💛", "👏", "😉", "💯", "💕", "💞", "💘", "💙", "💝", "🖤", "💜", "❤️", "😍", "😻", "💓", "💗", "😋", "😇", "😂", "😹", "😘", "💖", "😁", "😀", "🤞", "😲", "😄", "😊", "👍", "😌", "😃", "😅", "✌️", "🤗", "💋", "😗", "😽", "😚", "🤠", "😙", "😺", "👄", "😸", "😏", "😼", "👌", "😎", "😆", "😛", "🙏", "🤝", "🙂", "🤑", "😝", "😐", "😑", "🤤", "😤", "🙃", "🤡", "😶", "😪", "😴", "😵", "😓", "👊", "😦", "😷", "🤐", "😜", "🤓", "👻", "😥", "🙄", "🤔", "🤒", "🙁", "😔", "😯", "☹️", "☠️", "😰", "😩", "😖", "😕", "😒", "😣", "😢", "😮", "😿", "🤧", "😫", "🤥", "😞", "😬", "👎", "💀", "😳", "😨", "🤕", "🤢", "😱", "😭", "😠", "😈", "😧", "💔", "😟", "🙀", "💩", "👿", "😡", "😾", "🖕"]
};
var convertAtomicBlock = function convertAtomicBlock(block, contentState) {
// console.log('contentState', contentState)
var contentBlock = contentState.getBlockForKey(block.key);
var entityKey = contentBlock.getEntityAt(0);
var entity = contentState.getEntity(entityKey);
var mediaType = entity.getType().toLowerCase();
var _block$data = block.data,
float = _block$data.float,
alignment = _block$data.alignment;
var _entity$getData = entity.getData(),
url = _entity$getData.url,
src = _entity$getData.src;
if (mediaType === 'image') {
return _react2.default.createElement(
'div',
{ className: 'dhc-media dhc-media-image' },
_react2.default.createElement('img', { src: src, name: 'dhc-img' })
);
} else if (mediaType === 'audio') {
return _react2.default.createElement(
'div',
{ className: 'dhc-media dhc-media-image' },
_react2.default.createElement('audio', { controls: true, src: url })
);
} else if (mediaType === 'video') {
return _react2.default.createElement(
'div',
{ className: 'dhc-media dhc-media-audio' },
_react2.default.createElement('video', { controls: true, src: url })
);
} else {
return _react2.default.createElement('p', null);
}
};
var blockToHTML = function blockToHTML(contentState) {
return function (block) {
var result = null;
var blockStyle = "";
var blockType = block.type.toLowerCase();
var _block$data2 = block.data,
textAlign = _block$data2.textAlign,
attributes = _block$data2.attributes;
if (textAlign) {
blockStyle = ' style="text-align:' + textAlign + ';"';
}
if (blockType === 'unstyled') {
return _react2.default.createElement(
'p',
attributes,
block.text
);
} else if (blockType === 'atomic') {
return convertAtomicBlock(block, contentState);
} else if (blockType === 'code-block') {
return {
start: '<pre><code' + blockStyle + '>',
end: '</code></pre>'
};
} else if (blocks[blockType]) {
return {
start: '<' + blocks[blockType] + blockStyle + '>',
end: '</' + blocks[blockType] + '>'
};
}
};
};
var getToHTMLConfig = exports.getToHTMLConfig = function getToHTMLConfig(props) {
return {
blockToHTML: blockToHTML(props.contentState)
};
};
/**
* HTML 转 map
* @param {*} nodeName
* @param {*} node
*/
var htmlToBlock = function htmlToBlock(nodeName, node) {
var nodeStyle = node.style || {};
if (node.classList && node.classList.contains('dhc-media')) {
return {
type: 'atomic',
data: {
float: nodeStyle.float,
alignment: nodeStyle.textAlign
}
};
} else if (nodeName === 'img') {
return {
type: 'atomic',
data: {
float: nodeStyle.float,
alignment: nodeStyle.textAlign
}
};
} else if (nodeName === 'p') {
var attributes = {};
for (var key in node.attributes) {
if (node.attributes.hasOwnProperty(key)) {
attributes[node.attributes[key].nodeName] = node.attributes[key].nodeValue;
}
}
return {
type: 'unstyled',
data: {
attributes: attributes,
textAlign: nodeStyle.textAlign
}
};
}
};
var getFromHTMLConfig = exports.getFromHTMLConfig = function getFromHTMLConfig(props) {
return { htmlToBlock: htmlToBlock };
};