Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
it('should render an image (url)', () => {
let contentState = ContentState.createFromText('');
// $FlowFixMe DraftEntityType is too restrictive in DraftJS (see https://github.com/facebook/draft-js/issues/868 )
contentState = contentState.createEntity(ENTITY_TYPES.image, ENTITY_MUTABILITY.immutable, {
mimeType: 'image/png',
src: 'my-img.png',
title: 'My image'
});
const entityKey = contentState.getLastCreatedEntityKey();
let editorState = EditorState.createWithContent(contentState);
editorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
contentState = editorState.getCurrentContent();
const blocks = contentState.getBlocksAsArray();
const atomicBlock = blocks[1];
const props = {
block: atomicBlock,
contentState: contentState
};
const component = renderer.create(<img>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
src: imgSrc,
title: 'My image'
});
const imgEntityKey = contentState.getLastCreatedEntityKey();
// $FlowFixMe DraftEntityType is too restrictive in DraftJS (see https://github.com/facebook/draft-js/issues/868 )
contentState = contentState.createEntity(ENTITY_TYPES.document, ENTITY_MUTABILITY.immutable, {
id: '2',
mimeType: 'application/pdf',
src: fileSrc,
title: 'My document'
});
const docEntityKey = contentState.getLastCreatedEntityKey();
let editorState = EditorState.createWithContent(contentState);
editorState = AtomicBlockUtils.insertAtomicBlock(editorState, imgEntityKey, ' ');
editorState = AtomicBlockUtils.insertAtomicBlock(editorState, docEntityKey, ' ');
return editorState;
},
export default (editorState: EditorState, data: AttachmentData) => {
let entityType;
if (data.mimeType.startsWith('image/')) {
entityType = ENTITY_TYPES.image;
} else {
entityType = ENTITY_TYPES.document;
}
const contentState = editorState.getCurrentContent();
// $FlowFixMe DraftEntityType is too restrictive in DraftJS (see https://github.com/facebook/draft-js/issues/868 )
const contentStateWithEntity = contentState.createEntity(entityType, ENTITY_MUTABILITY.immutable, data);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
return EditorState.forceSelection(newEditorState, newEditorState.getCurrentContent().getSelectionAfter());
};
const { editorState, entityType, onComplete } = this.props;
const content = editorState.getCurrentContent();
const selection = editorState.getSelection();
const entityData = filterEntityData(entityType, data);
const mutability = MUTABILITY[entityType.type];
const contentWithEntity = content.createEntity(entityType.type, mutability, entityData);
const entityKey = contentWithEntity.getLastCreatedEntityKey();
let nextState;
if (entityType.block) {
// Only supports adding entities at the moment, not editing existing ones.
// See https://github.com/springload/draftail/blob/cdc8988fe2e3ac32374317f535a5338ab97e8637/examples/sources/ImageSource.js#L44-L62.
// See https://github.com/springload/draftail/blob/cdc8988fe2e3ac32374317f535a5338ab97e8637/examples/sources/EmbedSource.js#L64-L91
nextState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
} else {
// Replace text if the chooser demands it, or if there is no selected text in the first place.
const shouldReplaceText = data.prefer_this_title_as_link_text || selection.isCollapsed();
if (shouldReplaceText) {
// If there is a title attribute, use it. Otherwise we inject the URL.
const newText = data.title || data.url;
const newContent = Modifier.replaceText(content, selection, newText, null, entityKey);
nextState = EditorState.push(editorState, newContent, 'insert-characters');
} else {
nextState = RichUtils.toggleLink(editorState, selection, entityKey);
}
}
// IE11 crashes when rendering the new entity in contenteditable if the modal is still open.
// Other browsers do not mind. This is probably a focus management problem.
if (entity && entityKey) {
const nextContent = content.mergeEntityData(entityKey, { src });
nextState = EditorState.push(editorState, nextContent, "apply-entity");
} else {
const contentWithEntity = content.createEntity(
// Fixed in https://github.com/facebook/draft-js/commit/6ba124cf663b78c41afd6c361a67bd29724fa617, to be released.
// $FlowFixMe
entityType.type,
"MUTABLE",
{
alt: "",
src,
},
);
nextState = AtomicBlockUtils.insertAtomicBlock(
editorState,
contentWithEntity.getLastCreatedEntityKey(),
" ",
);
}
onComplete(nextState);
}
'IMMUTABLE',
{ url: value }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const stateWithEntity = EditorState.set(
this.props.editorState,
{
currentContent: Modifier.applyEntity(
contentStateWithEntity,
selection,
entityKey
),
}
);
this.props.onClick(
AtomicBlockUtils.insertAtomicBlock(
stateWithEntity,
entityKey,
' '
)
);
this.setState(() => ({
selectLink: false,
}));
}}
/>
export default function addVideo(editorState, { src }) {
if (RichUtils.getCurrentBlockType(editorState) === types.ATOMIC) {
return editorState;
}
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
types.VIDEOTYPE,
'IMMUTABLE',
{ src }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
return AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
}
selectedFiles.forEach(file => {
const entityData = {
url: file.url,
name: file.name,
type: file.type,
meta: file.meta,
};
const contentStateWithEntity = contentState.createEntity(file.type, 'IMMUTABLE', entityData);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
newEditorState = AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
});
var mediaConfirm = function mediaConfirm(dialogInfo) {
var _this = this;
var editorState = this.state.editorState;
var contentState = editorState.getCurrentContent();
var contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', {
src: dialogInfo.imageSrc,
alt: dialogInfo.text
});
var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
var newEditorState = EditorState.set(editorState, {
currentContent: contentStateWithEntity
});
this.setState({
editorState: AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ')
}, function () {
setTimeout(function () {
return _this.focus();
}, 0);
});
return true;
};
const mediaConfirm = function(dialogInfo) {
const {
editorState
} = this.state;
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', {
src: dialogInfo.imageSrc,
alt: dialogInfo.text
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(editorState, {
currentContent: contentStateWithEntity
});
this.setState({
editorState: AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ')
}, () => {
setTimeout(() => this.focus(), 0);
});
return true;
};