How to insert a draft-js custom component/block

Question

I'm trying to insert my custom block to the editorState of draft-js's editor. I can't seem to find any detailed information on how to accomplish this.

Block Renderer:

const blockRendererFn = (contentBlock) => {
  const type = contentBlock.getType();
  if (type === 'CustomTestChipBlock') {
    return {
      component: CustomTestChipBlock,
      editable: false,
      props: {
        foo: 'bar',
      },
    };
  }
}

Block Render Map:

import { DefaultDraftBlockRenderMap } from "draft-js";
import { Map } from 'immutable';

const blockRenderMap = Map({
  CustomTestChipBlock: {
    element: 'div',
  }
}).merge(DefaultDraftBlockRenderMap);

My custom block (material ui chip):

import { Chip } from "@mui/material";

const CustomTestChipBlock = (props) => {
  const { block, contentState } = props;
  const { foo } = props.blockProps;
  const data = contentState.getEntity(block.getEntityAt(0)).getData();

  console.log("foo: "+foo)
  console.log("data: "+data)

  return (
    <Chip label="test" size="small"/>
  )
}

Now my problem is when I try to insert my custom block. I assume my method of insertion must be wrong. I tried multiple insertion methods but due to lack of any detailed information on the subject, all of them ended up not even running the console.log inside my custom component.

Insertion:

const addChip = () => {
  setEditorState(insertBlock("CustomTestChipBlock"));
}

const insertBlock = (type) => {
  // This is where I can't find any detailed info at all
  const newBlock = new ContentBlock({
    key: genKey(),
    type: type,
    text: "",
    characterList: List(),
  });

  const contentState = editorState.getCurrentContent();
  const newBlockMap = contentState.getBlockMap().set(newBlock.key, newBlock);
  const newEditorState = ContentState.createFromBlockArray(
    newBlockMap.toArray()
  )
  .set("selectionBefore", contentState.getSelectionBefore())
  .set("selectionAfter", contentState.getSelectionAfter());

  return EditorState.push(editorState, newEditorState, "add-chip");
};

How to insert a draft-js custom component/block

0 Answers0