BlockSomethingSomthing - Confusing function naming in DraftJS with DraftJS Plugins

Draft JS is pretty fun.

Given the similar names of the draft js functions use, it can be confusing which function results get rendered where. Especially when you start adding custom wrappers and components.

<{blockRenderMap.wrapper}> || undefined
  <{blockRenderMap.element} className={blockStyleFn()}>
    <{blockRendererFn.Component} {...blockRenderer.props} />
  </{blockRenderMap.element}>
</{blockRenderMap.wrapper}> || undefined

Hmmmm, even that looks confusing…

For a more concrete example.

import * as Immutable from 'immutable';
import {BespokeComponent, BespokeWrapper} from "./components";

export class ConfusingNamesInDraftJSPlugin {
  blockRenderMap = Immutable.Map({
    'atomic': {
      element: "span",
      wrapper: <BespokeWrapper /> }
  });
  blockStyleFn = (block) => "blockStyleFnCSS";
  blockRendererFn = (block) => {component: BespokeComponent, props: { style: "customPropCSS" }};
}

Should render assuming I've not made a typo…

<BespokeWrapper>
  <span class="blockStyleFnCSS">
    <BespokeComponent style="customPropCSS" /* and the other ...props here*/ />
  </span>
</BespokeWrapper>

Don't forget

Don't forget to include `{props.children}` in the `BespokeComponent` also.