CODEWITHSUNDEEP
reactjsdraftjs
Pavel Poberezhnyi
Pavel Poberezhnyi

Reputation: 773

How to properly add image (atomic) without 2 empty lines in Draft.js

By default draft.js puts any atomic type block with 2 empty lines (1 before atimic, 1 after atimic). This behavior is a result of lack atomic selection in draft.js and descripted here. How can i rid those lines ? i haven't found any proper function in Modifier. Maybe some one has another solution to solve this issue cuz right now it doesn't looks nice

UPDATE: i find sollution that works for me:

      const { editorState } = this.props;
      const contentState = editorState.getCurrentContent();
      const entityKey = Entity.create('image', 'IMMUTABLE', {src: this.state.url});
      const with_atomic = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
      const new_content_state = with_atomic.getCurrentContent();
      const block_map = new_content_state.getBlockMap();
      const current_atomic_block = block_map.find(block => {
         if (block.getEntityAt(0) === entityKey) {
            return block
         }
      });
      const atomic_block_key = current_atomic_block.getKey();
      const block_before = new_content_state.getBlockBefore(atomic_block_key).getKey();
      const new_block_map = block_map.filter(block => {
         if ((block.getKey() !== block_before) ) {
            return block
         }
      });
      const newContentState = contentState.set('blockMap', new_block_map);
      const newEditorState = EditorState.createWithContent(newContentState);
      this.props.onChange(newEditorState);

Upvotes: 2

Views: 2734

Answers (1)

Jiang YD
Jiang YD

Reputation: 3311

That's not a couple lines of code if you need handle the non-collapsed selection when do the insertion. If you just need remove the two lines around the atomic, maybe this code working:

const newAtomicBlock = contentState.getBlockMap().find(b=>b.getEntityAt(0)===entityKey).getKey();
const newBlockMap = contentState.getBlockMap().delete(contentState.getBlockBefore(newAtomicBlock)).delete(contentState.getBlockAfter(newAtomicBlock));
const newContentState = contentState.set('blockMap', newBlockMap);
const newEditorState = EditorState.push(editorState, newContentState, 'delete-empty-lines');

Upvotes: 3

Related Questions