How to use the draft-js.AtomicBlockUtils.insertAtomicBlock function in draft-js

To help you get started, we’ve selected a few draft-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github assembl / assembl / assembl / static2 / workspaces / draft-js-attachment-plugin / src / components / __test__ / Image.spec.jsx View on Github external
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();
  });
github assembl / assembl / assembl / static2 / workspaces / assembl-test-editor-utils / src / index.js View on Github external
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;
  },
github assembl / assembl / assembl / static2 / workspaces / draft-js-attachment-plugin / src / modifiers / addAttachment.js View on Github external
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());
};
github wagtail / wagtail / client / src / components / Draftail / sources / ModalWorkflowSource.js View on Github external
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.
github springload / draftail / examples / sources / ImageSource.js View on Github external
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);
  }
github Heigvd / Wegas / wegas-app / src / main / webapp / wegas-react-form / src / Views / RTE / media.tsx View on Github external
'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,
                            }));
                        }}
                    />
github draft-js-plugins / draft-js-plugins / draft-js-video-plugin / src / video / modifiers / addVideo.js View on Github external
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, ' ');
}
github strues / boldr / packages / frontend / BoldrText / components / MediaPicker / MediaPicker.js View on Github external
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, ' ');
    });
github imshengli / rich-editor / lib / tools / toggle-image.js View on Github external
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;
};
github imshengli / rich-editor / src / tools / toggle-image.js View on Github external
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;
};