Using Block.ATOMIC is broken

I’m using the following Workflow.

1.- User click on the plus icon. 2.- Sub menus appear and user can select video 3.- When user click video other form appears where user can paste url. 4.- when user submit url i call addNewVideoToEditor.

I have the same workflow for images, and this is how the addNewImageToEditor looks.

  addNewImageToEditor(src) {
    const { getEditorState, setEditorState } = this;

    setEditorState(addNewBlock(
      getEditorState(),
      Block.IMAGE, { src },
    ));
  }

So for video i’m doing.

  addNewVideoToEditor(url) {
    const { getEditorState, setEditorState } = this;

    setEditorState(addNewBlock(
      getEditorState(),
      Block.ATOMIC, { url }, // try with src already too.
    ));
  }

Now, this work for images great, and i’m inserting any kind of images, but for atomic i got.

Uncaught TypeError: props.getEditorState is not a function.

and i can see that came from this line.

https://github.com/brijeshb42/medium-draft/blob/master/src/components/blocks/atomic.js#L7

The only difference i can see is that ImageBlock access getEditorState from blockProps.getEditorState and AtomicBlock is accessing it directly from props.getEditorState

eve thought the implementation on.

https://github.com/brijeshb42/medium-draft/blob/master/src/components/customrenderer.js

is the same.

I’m missing something here?, i try to implement the example from your the example.js but i got the same error.

[Ethaan]

This is how its looking if i do.

const rawContentState = convertToRaw(content.getCurrentContent());

Even using a third party library.

import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

const rawContentState = convertToRaw(content.getCurrentContent());
const htmlContent = draftToHtml(rawContentState);
console.log(htmlContent);

i got nothing

[brijeshb42]

Assuming you are using importer/exporter from medium-draft Have you customized your exporter/importer in any way? I just verified this on the demo page and exporting then importing was working fine. You can verify this yourself if you have react devtools in chrome installed. Go to the React tab in chrome devtools, select <App>, go back to console and then run this, (make sure there is only image block and maybe some text block in the content. delete other blocks and text) -

MediumDraftImporter.default($r.exporter($r.state.editorState.getCurrentContent())).toJS()

It should have type atomic:image in the blockMap of the result