Add `componentDidMount` and `componentDidUpdate` event to plugins

Do you want to request a feature or report a bug?

Request a feature.

Note: Also looking for input on this feature request in case there is a better way to handle this without having to add this feature or to implement a feature that can provide the same benefits in a better way.

What’s the current behavior?

There is no way to know when the Editor component has mounted or updated.

I have these scenarios where this is important in the Android implementation:

1. I need to set up a MutationObserver on the Editor’s root element. Currently, in the plugin, I use a requestAnimationFrame during the plugin’s initialization to add the mutation observer to the Editor’s root element; however, this is hacky because (a) changes in implementation may mean that the root element might not exist after the requestAnimationFrame (possibly created later) (b) there may be a period of time between the component mounting and the requestAnimationFrame during which a mutation could come in and be missed.

2. When I call editor.restoreDOM, the root element of the Editor is discarded and rebuilt from scratch. Because it is built from scratch, the existing MutationObserver would be on an Element that is no longer in the DOM because it has been replaced by a newly created one. We could use componentDidUpdate to check then add the MutationObserver on the new object.

3. I need to ignore mutations that React is performing while paying attention to mutations that the user is doing. I can do this by setting a local variable updating = true before I call Editor commands (which modify the React DOM). All mutations that come in while updating === true are ignored so we don’t react to React mutations. On the componentDidUpdate method, we set updating = false and we can pay attention to mutations again.

Note: The Android implementation is sensitive to timing issues and we need to make everything synchronous with respect to updates.

What’s the expected behavior?

Create two or more additional events that hook into React’s component life-cycle.

const myPlugin = {
  componentDidMount(event, editor, next) {
    console.log(`Hey, the Editor's "Content" just mounted!`)
    next()
  },
  componentDidUpdate(event, editor, next) {
    console.log(`Hey, the component just updated!`)
    next()
  }
}

These could be valuable generally for when the developer needs to add some initialization to the Editor’s root element. This would provide an easy way to hook into them synchronously during a mount or update. It could be argued that these are too low level for a common use case in which case we could remain them unstable_componentDidMount and unstable_componentDidUpdate in the style of React methods that are available but generally shouldn’t be relied on.

[steida]

RequestAnimationFrame can be tricky as hell. I prefer leveraging React API. I suppose your suggestion is ok. Remember, make it work, make it right, make it fast.

[ianstormtaylor]

The use case makes sense to me. The only thing that makes me hesitate is that we’ll likely move to use hooks in the future (or at least that’s the goal) at which point these methods won’t exist.

I’m personally fine with introducing them for now and then making breaking changes to remove them in favor of hooks later.