As currently written, the plugins-editor only initializes plugins (attaching them to get/setEditorState functions) when the Editor component is first rendered. This means that any components supplied by plugins (like the CharCounter, WordCounter, etc of the counter plugin) cannot be placed above the Editor in a rendering method, since their first render will then be uninitialized and will crash on looking for non-existent methods (store.getEditorState is not a function).

To me, it seems limiting to require that all controls be placed below the Editor.

There are at least a couple of workarounds. For the counter plugin (to take one exampe), the components could simply check for initialization before attempting to access the bound methods:

So this line:

  const count = this.getCharCount(store.getEditorState());

could become

    let count = 0;
    if (store.getEditorState) {
      count = this.getCharCount(store.getEditorState());
    }

This kind of fix allows the components to be placed above the Editor, but still leaves an unusual difficulty with the components not remaining fully synced to the Editor's state in all cases. Specifically, it seems that the controls (like the character count) can end up lagging behind by a single rendering cycle when something else updates the editor.

In my plugin, I needed to ensure that formatting buttons (particularly the inline ones like Bold) always correctly reflect an active / inactive state based on the current cursor position, and placing them above the editor with only the above fix left repeated issues with lagging behind a render.

I ended up solving it by having all my plugin's components internally subscribed to re-render whenever a changed EditorState arrives, but this approach still requires the additional step, when using the plugin, of adding its callback into your onChange function.

//  in your component using the richButtons plugin
 onChange(editorState) {
  this.setState({content: editorState}, () => {
    richButtonsPlugin.onEditorChange(editorState); // re-renders the buttons as needed
  });
}

It seems that the plugin-editor itself should perhaps have another way of connecting a plugin to subscribe directly to EditorState changes, making the relative position of Editor and buttons truly irrelevant and all changes easily propagable to any plugin-supplied components and controls. Thoughts?