frontend/packages/client/src/components/ProposalCreate/StepOne/index.js
// used to insert more than one image at the time
used to insert more than one image at the time
used to insert more than one image at the time
function updateEditorState(
    editorState,
    { src, height, width, alt },
    caption
  ) {
    const entityKey = editorState
      .getCurrentContent()
      .createEntity("IMAGE", "MUTABLE", {
        src,
        height,
        width,
        alt,
      })
      .getLastCreatedEntityKey();
    const selection = editorState.getSelection();
    const currentFocusKey = selection.getFocusKey();
    const newESWidthImageAndExtraBlock = AtomicBlockUtils.insertAtomicBlock(
      editorState,
      entityKey,
      " "
    );
    if (caption.length === 0) {
      return newESWidthImageAndExtraBlock;
    }
    const contentState = newESWidthImageAndExtraBlock.getCurrentContent();
    const atomicBlockInserted = contentState.getBlockAfter(currentFocusKey);
    const emptyBlockInserted = contentState.getBlockAfter(
      atomicBlockInserted.getKey()
    );
    const lastBlockAddedKey = emptyBlockInserted.getKey();
    const blockMapArray = contentState
      .getBlocksAsArray()
      .filter((block) => block.getKey() !== lastBlockAddedKey);
    const tempCSWithCaption = ContentState.createFromText(caption);
    const [tempBlockArray] = tempCSWithCaption.getBlocksAsArray();
    const csWithUpdatedBlock = Modifier.setBlockType(
      ContentState.createFromBlockArray([tempBlockArray]),
      SelectionState.createEmpty(tempBlockArray.key),
      "image-caption-block"
    );
    const [updatedBlock] = csWithUpdatedBlock.getBlocksAsArray();
    const newBlockMapArray = blockMapArray.reduce(
      (accumulator, currentValue) => {
        if (currentValue.getKey() === atomicBlockInserted.getKey()) {
          return [
            ...accumulator,
            currentValue,
            updatedBlock,
            emptyBlockInserted,
          ];
        }
        return [...accumulator, currentValue];
      },
      []
    );
    const newContentState = ContentState.createFromBlockArray(
      newBlockMapArray,
      contentState.getEntityMap()
    );
    const editorStateWithImageAndCaption = EditorState.push(
      newESWidthImageAndExtraBlock,
      newContentState,
      "insert-fragment"
    );
    const newState = EditorState.moveSelectionToEnd(
      editorStateWithImageAndCaption
    );
    return newState;
  }
function updateEditorState ( editorState , { src , height , width , alt } , caption ) { const entityKey = editorState . getCurrentContent ( ) . createEntity ( "IMAGE" , "MUTABLE" , { src , height , width , alt , } ) . getLastCreatedEntityKey ( ) ; const selection = editorState . getSelection ( ) ; const currentFocusKey = selection . getFocusKey ( ) ; const newESWidthImageAndExtraBlock = AtomicBlockUtils . insertAtomicBlock ( editorState , entityKey , " " ) ; if ( caption . length === 0 ) { return newESWidthImageAndExtraBlock ; } const contentState = newESWidthImageAndExtraBlock . getCurrentContent ( ) ; const atomicBlockInserted = contentState . getBlockAfter ( currentFocusKey ) ; const emptyBlockInserted = contentState . getBlockAfter ( atomicBlockInserted . getKey ( ) ) ; const lastBlockAddedKey = emptyBlockInserted . getKey ( ) ; const blockMapArray = contentState . getBlocksAsArray ( ) . filter ( ( block ) => block . getKey ( ) !== lastBlockAddedKey ) ; const tempCSWithCaption = ContentState . createFromText ( caption ) ; const [ tempBlockArray ] = tempCSWithCaption . getBlocksAsArray ( ) ; const csWithUpdatedBlock = Modifier . setBlockType ( ContentState . createFromBlockArray ( [ tempBlockArray ] ) , SelectionState . createEmpty ( tempBlockArray . key ) , "image-caption-block" ) ; const [ updatedBlock ] = csWithUpdatedBlock . getBlocksAsArray ( ) ; const newBlockMapArray = blockMapArray . reduce ( ( accumulator , currentValue ) => { if ( currentValue . getKey ( ) === atomicBlockInserted . getKey ( ) ) { return [ ... accumulator , currentValue , updatedBlock , emptyBlockInserted , ] ; } return [ ... accumulator , currentValue ] ; } , [ ] ) ; const newContentState = ContentState . createFromBlockArray ( newBlockMapArray , contentState . getEntityMap ( ) ) ; const editorStateWithImageAndCaption = EditorState . push ( newESWidthImageAndExtraBlock , newContentState , "insert-fragment" ) ; const newState = EditorState . moveSelectionToEnd ( editorStateWithImageAndCaption ) ; return newState ; }
used to insert more than one image at the time
used to insert more than one image at the time
// user did not add caption text // using cs: content state // AtomicBlockUtils.insertAtomicBlock inserts an empty block right after the cursor position // get existing blocks and // filter and remove the last block added // bc it's not necessary and caption block goes right after it // create new temporal content state to extract block with text // get the block with the text from temp content // update block type so it's a custom type: image-caption // get the block with custom type and with text // add block updated and concat empty block at the end // this keeps the history of the action // move cursor to the end