img: function img(tagName, element) {
var data = getEntityData(tagName, element);
// Don't add `<img>` elements with no src.
if (data.src != null) {
return _draftJs.Entity.create(_draftJsUtils.ENTITY_TYPE.IMAGE, 'MUTABLE', data);
}
}
const createContentBlock = (blockData = {}) => {
const { key, type, text, data, inlineStyles, entityData } = blockData;
let blockSpec = {
type: type !== null && type !== undefined ? type : 'unstyled',
text: text !== null && text !== undefined ? text : '',
key: key !== null && key !== undefined ? key : genKey(),
};
if (data) {
blockSpec.data = fromJS(data);
}
if (inlineStyles || entityData) {
let entityKey;
if (entityData) {
const { type, mutability, data } = entityData;
entityKey = Entity.create(type, mutability, data);
} else {
entityKey = null;
}
const style = OrderedSet(inlineStyles || []);
const charData = CharacterMetadata.applyEntity(
CharacterMetadata.create({ style, entityKey }),
entityKey,
);
blockSpec.characterList = List(Repeat(charData, text.length));
}
return new ContentBlock(blockSpec);
};
var addMention = function addMention(editorState, mention) {
// TODO allow the user to override if the mentions are SEGMENTED, IMMUTABLE or MUTABLE
var entityKey = _draftJs.Entity.create('mention', 'SEGMENTED', { mention: mention });
var currentSelectionState = editorState.getSelection();
var _getSearchText = (0, _getSearchText3.default)(editorState, currentSelectionState);
var begin = _getSearchText.begin;
var end = _getSearchText.end;
// get selection of the @mention search text
var mentionTextSelection = currentSelectionState.merge({
anchorOffset: begin,
focusOffset: end
});
var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, mention.get('name'), null, // no inline style needed
entityKey);
// If the mention is inserted at the end, a space is appended right after for
// a smooth writing experience.
var blockKey = mentionTextSelection.getAnchorKey();
var blockSize = editorState.getCurrentContent().getBlockForKey(blockKey).getLength();
if (blockSize === end) {
mentionReplacedContent = _draftJs.Modifier.insertText(mentionReplacedContent, mentionReplacedContent.getSelectionAfter(), ' ');
}
var newEditorState = _draftJs.EditorState.push(editorState, mentionReplacedContent, 'insert-mention');
return _draftJs.EditorState.forceSelection(newEditorState, mentionReplacedContent.getSelectionAfter());
};
function importFromImg($img) {
let newPage = false
let url = ''
if ($img[0].nodeName === 'A') {
url = $img.attr('href').replace(/http:\/\/replace\.lbs\.amap\.com\//g, '')
newPage = $img.attr('target') === '_blank'
$img = $img.find('img')
}
if ($img.attr('alt') === 'iframe') {
let $iframe = $(`<iframe src="${$img.attr('src')}"></iframe>`)
return importFromRawHTML($iframe)
} else {
let imageEntityKey = Entity.create('image', 'IMMUTABLE', {
imgData: {
img: $img.attr('src'),
url,
newPage,
width: parseInt($img.attr('width') || $img.css('width')) || ''
}
})
let imageCharacterList = List('-'.split('').map(function () {
return CharacterMetadata.create({
entity: imageEntityKey
})
}))
return new ContentBlock({
key: genKey(),
type: 'atomic',
depth: 0,
text: '-',
characterList: imageCharacterList
})
}
}
const Mention = (props) => {
const { entityKey, theme = {} } = props;
const mention = fromJS(Entity.get(entityKey).getData().mention);
if (mention.has('link')) {
return (
<a
href={ mention.get('link') }
className={ theme.mention }
spellCheck={ false }
>
{ props.mentionPrefix }{ props.children }
</a>
);
}
return (
<span
className={ theme.mention }
spellCheck={ false }
>
{ props.mentionPrefix }{ props.children }
</span>
);
};
function importFromDemoCenter($div) {
let tabs = []
$div.find('.md-demo-code-header a').each(function (i,) {
tabs.push({
title: $(this).text().trim(),
content: getCodeText($div.find('.md-demo-code-content-item pre').eq(i))
})
})
let entityKey = Entity.create('code-tab', '"IMMUTABLE"', {
codeTabData: {
tabType: 'simple',
tabs
}
})
let characterList = List('-'.split('').map(function () {
return CharacterMetadata.create({
entity: entityKey
})
}))
return new ContentBlock({
key: genKey(),
type: 'atomic',
depth: 0,
text: '-',
characterList
})
}
function importFromMDTab($tabs) {
let tabs = []
$tabs.find('.lbs_tabs > a').each(function () {
let tab = {
title: $(this).text().trim(),
}
tab.editorState = importFromHTML($tabs.find('.lbs_tab_content').eq($(this).index()).html())
tabs.push(tab)
})
let entityKey = Entity.create('tab', 'IMMUTABLE', {
tabData: {
tabs
}
})
let characterList = List('-'.split('').map(function () {
return CharacterMetadata.create({
entity: entityKey
})
}))
return [new ContentBlock({
key: genKey(),
type: 'atomic',
depth: 0,
text: '-',
characterList
}
)]
}
function importFromTry($left, $middle, $right) {
let middleHTML = $('<div></div>').append($middle).html()
let leftEditorState = importFromHTML(middleHTML)
$right.children().first().remove()
let rightHTML = $right.html()
let rightEditorState = importFromHTML(rightHTML)
console.log(exportToRaw(rightEditorState))
let entityKey = Entity.create('layout', '"IMMUTABLE"', {
layoutData: {
scale: 6,
leftEditorState,
rightEditorState
}
})
let characterList = List('-'.split('').map(function () {
return CharacterMetadata.create({
entity: entityKey
})
}))
return new ContentBlock({
key: genKey(),
type: 'atomic',
depth: 0,
text: '-',
characterList
})
}
function importFromH2($h2) {
let id = $h2.attr('id')
let anchor = id && id.split(':')[1]
if (!anchor) {
anchor = ''
}
let text = $h2.text()
let entityKey = Entity.create('h2', 'MUTABLE', {
data: {
anchor
}
})
let characterList = List(text.split('').map(function () {
return CharacterMetadata.create({
entity: entityKey
})
}))
return new ContentBlock({
key: genKey(),
type: 'header-two',
depth: 0,
text,
characterList
})
}
function importFromTab($oc, $swift) {
let entityKey = Entity.create('code-tab', '"IMMUTABLE"', {
codeTabData: {
tabType: 'simple',
tabs: [
{
title: 'Objective-C',
content: getCodeText($oc.find('pre'))
},
{
title: 'Swift',
content: getCodeText($swift.find('pre'))
}
]
}
})
let characterList = List('-'.split('').map(function () {
return CharacterMetadata.create({
entity: entityKey
})
}))
return [new ContentBlock({
key: genKey(),
type: 'atomic',
depth: 0,
text: '-',
characterList
})]
}
render() {
const {
block,
className,
theme = {},
...otherProps
} = this.props;
// leveraging destructuring to omit certain properties from props
const {
blockProps, // eslint-disable-line no-unused-vars
customStyleMap, // eslint-disable-line no-unused-vars
customStyleFn, // eslint-disable-line no-unused-vars
decorator, // eslint-disable-line no-unused-vars
forceSelection, // eslint-disable-line no-unused-vars
offsetKey, // eslint-disable-line no-unused-vars
selection, // eslint-disable-line no-unused-vars
tree, // eslint-disable-line no-unused-vars
...elementProps
} = otherProps;
const combinedClassName = unionClassNames(theme.image, className);
const { src } = Entity.get(block.getEntityAt(0)).getData();
return (
<img
{...elementProps}
src={src}
role="presentation"
className={combinedClassName}
/>
);
}
a: function a(tagName, element) {
var data = getEntityData(tagName, element);
// Don't add `<a>` elements with no href.
if (data.url != null) {
return _draftJs.Entity.create(_draftJsUtils.ENTITY_TYPE.LINK, 'MUTABLE', data);
}
},
MentionContentComponent.prototype.render = function render() {
var _props = this.props;
var entityKey = _props.entityKey;
var tag = _props.tag;
var data = _draftJs.Entity.get(entityKey).getData();
return _react2["default"].createElement(tag, _extends({}, this.props, { data: data }));
};
return entityPieces.map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
entityKey = _ref2[0],
stylePieces = _ref2[1];
var entity = entityKey ? _draftJs.Entity.get(entityKey) : null;
return entity.getData().src;
}).join('');
_insertImage(file) {
const entityKey = Entity.create('atomic', 'IMMUTABLE', {src: URL.createObjectURL(file)});
this.onChange(AtomicBlockUtils.insertAtomicBlock(
this.state.editorState,
entityKey,
' '
));
}
export default class Button extends React.Component { // eslint-disable-line
render() {
const text = Entity.get(this.props.block.getEntityAt(0)).getData().text
return (
<div className={styles.root}>
<button>{text}</button>
</div>
)
}
const Link = (props) => {
const { href } = Entity.get(props.entityKey).getData();
return (
<a href={href} target="_blank">
{props.children}
</a>
);
};
const setEntityDataFn = (contentBlock, { getEditorState, setEditorState }) => data => {
const entityKey = contentBlock.getEntityAt(0);
if (entityKey) {
const editorState = getEditorState();
Entity.mergeData(entityKey, { ...data });
setEditorState(EditorState.forceSelection(editorState, editorState.getSelection()));
}
};
function predicate(character: CharacterMetaData): boolean {
if (character.getEntity() === null) { return false; }
const entity = Entity.get(character.getEntity());
return (
entity.getType() === 'TOGGLE'
&& entity.get('data').active
);
},
export default (props) => {
const entity = Entity.get(props.block.getEntityAt(0))
const { markdown } = entity.getData()
console.log(entity.getData())
return (
<div id="content" dangerouslySetInnerHTML={{ __html: marked(markdown || '') }} />
)
}
function getEntityType(contentBlock) {
if (contentBlock.getType() === 'atomic') {
const entity = Entity.get(contentBlock.getEntityAt(0));
return entity.getType();
}
return undefined;
}
export default function insertAtomicBlock(editorState, data) {
var contentState = editorState.getCurrentContent();
var selectionState = editorState.getSelection();
var afterRemoval = Modifier.removeRange(
contentState,
selectionState,
'backward'
);
var targetSelection = afterRemoval.getSelectionAfter();
var afterSplit = Modifier.splitBlock(afterRemoval, targetSelection);
var insertionTarget = afterSplit.getSelectionAfter();
var asMedia = Modifier.setBlockType(afterSplit, insertionTarget, 'atomic')
var entityKey = Entity.create(
'TOKEN',
'IMMUTABLE',
data,
);
var charData = CharacterMetadata.create({entity: entityKey});
var fragmentArray = [
new ContentBlock({
key: genKey(),
type: 'atomic',
text: data.text || ' ',
characterList: List(Repeat(charData, (data.text || ' ').length)),
data,
}),
new ContentBlock({
key: genKey(),
type: 'unstyled',
text: '',
characterList: List(),
}),
];
var fragment = BlockMapBuilder.createFromArray(fragmentArray);
var withMedia = Modifier.replaceWithFragment(
asMedia,
insertionTarget,
fragment
);
var newContent = withMedia.merge({
selectionBefore: selectionState,
selectionAfter: withMedia.getSelectionAfter().set('hasFocus', true),
});
var editorState = EditorState.push(editorState, newContent, 'insert-fragment')
return editorState
}
export function insertImage(file) {
let {editorState} = this.props;
const entityKey = Entity.create('atomic', 'IMMUTABLE', {src: URL.createObjectURL(file)});
this.props.onChange(AtomicBlockUtils.insertAtomicBlock(
editorState,
entityKey,
' '
));
}
this._save = () => {
var entityKey = this.props.block.getEntityAt(0);
Entity.mergeData(entityKey, {content: this.state.texValue});
this.setState({
invalidTeX: false,
editMode: false,
texValue: null,
}, this._finishEdit);
};
_addMedia(type) {
const src = 'https://facebook.github.io/react/img/logo.svg'
const entityKey = Entity.create(type, 'IMMUTABLE', {src});
return AtomicBlockUtils.insertAtomicBlock(
this.state.editorState,
entityKey,
' '
);
}
function insertPicture(url) {
var entityKey = _draftJs.Entity.create('image-loader', 'IMMUTABLE', { url: url, "export": _exportImage2["default"] });
var editorState = callbacks.getEditorState();
var selection = editorState.getSelection();
var insertPictureContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), selection, url, null, entityKey);
var InsertSpaceContent = _draftJs.Modifier.insertText(insertPictureContent, insertPictureContent.getSelectionAfter(), ' ');
var newEditorState = _draftJs.EditorState.push(editorState, InsertSpaceContent, 'insert-mention');
callbacks.setEditorState(_draftJs.EditorState.forceSelection(newEditorState, InsertSpaceContent.getSelectionAfter()));
}
exports.default = function (props) {
var entity = _draftJs.Entity.get(props.block.getEntityAt(0));
var _entity$getData = entity.getData();
var html = _entity$getData.html;
return _react2.default.createElement('div', { id: 'content', dangerouslySetInnerHTML: { __html: html } });
};
value: function _setLink(url) {
var editorState = this.props.editorState;
var selection = editorState.getSelection();
var entityKey = _draftJs.Entity.create(_draftJsUtils.ENTITY_TYPE.LINK, 'MUTABLE', { url: url });
this.setState({ showLinkInput: false });
this.props.onChange(_draftJs.RichUtils.toggleLink(editorState, selection, entityKey));
this._focusEditor();
}
const Link = (props) => {
const {url} = Entity.get(props.entityKey).getData();
return (
<a href={url} style={styleMap.link}>
{props.children}
</a>
);
};
align = alignment => {
const entityKey = this.props.block.getEntityAt(0);
if (entityKey) {
Entity.mergeData(entityKey, { alignment });
// Force refresh
this.props.blockProps.refreshEditorState();
}
};