Skip to content

Commit

Permalink
Handle react 16’s async rendering
Browse files Browse the repository at this point in the history
this is a workaround for react 16 since ReactDOM.render is not 
guaranteed to return the instance synchronously (especially if called
within another component's lifecycle method eg: componentDidMount). see:
facebook/react#10309 (comment)

Test plan:
* when rendered into canvas-lms using react16, it shouldn’t throw errors
  • Loading branch information
Ryan Shaw authored and ryankshaw committed Sep 19, 2018
1 parent bd31d6e commit 29789b0
Showing 1 changed file with 14 additions and 4 deletions.
18 changes: 14 additions & 4 deletions src/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,23 @@ tinymce.create("tinymce.plugins.AccessibilityChecker", {
const container = document.createElement("div")
container.className = "tinymce-a11y-checker-container"
document.body.appendChild(container)
instance = ReactDOM.render(

ReactDOM.render(
<Checker getBody={ed.getBody.bind(ed)} editor={ed} />,
container
container,
function() {
// this is a workaround for react 16 since ReactDOM.render is not
// guaranteed to return the instance synchronously (especially if called
// within another component's lifecycle method eg: componentDidMount). see:
// https://github.com/facebook/react/issues/10309#issuecomment-318434635
instance = this
pendingInstanceCallbacks.forEach(cb => cb(instance))
}
)
pendingInstanceCallbacks.forEach(cb => cb(instance))

ed.addCommand("openAccessibilityChecker", instance.check.bind(instance))
ed.addCommand("openAccessibilityChecker", (...args) =>
instance.check(...args)
)

ed.addButton("check_a11y", {
title: formatMessage("Check Accessibility"),
Expand Down

0 comments on commit 29789b0

Please sign in to comment.