How to use draft-js - 10 common examples

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();
  });

it('should not do anything on backspace if something is selected', () => {
  const initialText = 'hello';

  const currentContent = ContentState.createFromText(initialText);
  const selectInitialtext = SelectionState.createEmpty(
    currentContent
      .getBlockMap()
      .first()
      .getKey()
  );
  const editorState = EditorState.create({
    allowUndo: true,
    currentContent,
    // Focus the entire initial word
    selection: selectInitialtext.set('focusOffset', initialText.length)
  });

  expect(handleKeyCommand(editorState, 'backspace')).toEqual(undefined);
});

id: '1',
      mimeType: 'image/png',
      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;
  },

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;
  },

constructor(props, context) {
    super(props,context);
    const document = this.props.document;
    let state = {};
    if (document && document.content) {
      try {
        state = EditorState.createWithContent(convertFromRaw(document.content));
      } catch(e) {
        // eslint-disable-next-line no-console
        console.warn("Invalid comment content, restoring from HTML instead", document);
        state = document && document.htmlBody && EditorState.createWithContent(htmlToDraft(document.htmlBody, {flat: true}))
      }
    } else if (document && document.htmlBody) {
      state = EditorState.createWithContent(htmlToDraft(document.htmlBody, {flat: true}));
    } else {
      state = EditorState.createEmpty();
    }

    // Check whether we have a state from a previous session saved (in localstorage)
    const savedState = this.getSavedState();
    if (savedState) {
      try {
        // eslint-disable-next-line no-console
        console.log("Restoring saved comment state: ", savedState);
        state = EditorState.createWithContent(convertFromRaw(savedState))
      } catch(e) {
        // eslint-disable-next-line no-console
        console.error(e)
      }
    }

    this.state = {

// Setting cursor position after inserting to content
    const s = this.state.editorState.getSelection()
    const c = editorState.getCurrentContent()
    const focusOffset = s.getFocusOffset()
    const anchorKey = s.getAnchorKey()

    let selectionState = SelectionState.createEmpty(s.getAnchorKey())

    // console.log anchorKey, focusOffset
    selectionState = selectionState.merge({
      anchorOffset: focusOffset,
      focusKey: anchorKey,
      focusOffset
    })

    let newState = EditorState.forceSelection(newEditorState, selectionState)

    return this.onChange(newState)
  }

handleReturn (e, editorState, { setEditorState }) {
      let content = editorState.getCurrentContent()

      // Retrieve current block
      const selection = editorState.getSelection()
      const blockKey = selection.getStartKey()
      let block = content.getBlockForKey(blockKey)
      const blockType = block.getType()

      // If it’s a list-item and it’s empty, toggle its blockType (which should
      // make it 'unstyled')
      if (/list-item/.test(blockType) && block.getText() === '') {
        editorState = RichUtils.toggleBlockType(editorState, blockType)
        content = editorState.getCurrentContent()
        editorState = EditorState.forceSelection(editorState, content.getSelectionAfter())
        setEditorState(editorState)
        return 'handled'
      }
      return 'not-handled'
    },

_handleKeyCommand(command) {
    // console.log("command",command);
    const {editorState} = this.state;
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (command === 'editor-save'&&this.props.autoSave==true) {
      // window.localDB//start20Text
      // let Data=PRO_COMMON.localDB.getter("grab_news_data") || [];

      let rawContentState = editorState.getCurrentContent()
      let content = "",newText="";

      const ConvertFormatProps = this.props.convertFormat;
      if(ConvertFormatProps === 'html') {
        content = stateToHTML(rawContentState);
        newText=content.replace(/<[^>]*>|&[^;]*;/g, "");
      }else if (ConvertFormatProps === 'markdown') {
        content = stateToMD(rawContentState);
      }else if(ConvertFormatProps === 'raw') {
        const rawContent = convertToRaw(rawContentState);
        content = JSON.stringify(rawContent);

refreshSelection(newEditorState) {
    const { editorState } = this.state
    // Setting cursor position after inserting to content
    const s = this.state.editorState.getSelection()
    const c = editorState.getCurrentContent()
    const focusOffset = s.getFocusOffset()
    const anchorKey = s.getAnchorKey()

    let selectionState = SelectionState.createEmpty(s.getAnchorKey())

    // console.log anchorKey, focusOffset
    selectionState = selectionState.merge({
      anchorOffset: focusOffset,
      focusKey: anchorKey,
      focusOffset
    })

    let newState = EditorState.forceSelection(newEditorState, selectionState)

    return this.onChange(newState)
  }

export const insertPastedState = (pastedState, editorState) => {
  /**
   * Merges a state created from pasted text into editorState
   */
  const blockMap = pastedState.getCurrentContent().blockMap

  // Merge blockMap from pasted text into existing content
  const modifiedContent = Modifier.replaceWithFragment(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    blockMap
  )
  // Create a new editorState from merged content
  return EditorState.push(
    editorState, modifiedContent, 'insert-fragment'
  )
}