From abcab12b977339f4abcc053178675415f3202d50 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Tue, 6 Feb 2018 22:39:19 -0800
Subject: [PATCH] Fix TOC

---
 app/components/Editor/Editor.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js
index 98ef5fbcc..8cada448e 100644
--- a/app/components/Editor/Editor.js
+++ b/app/components/Editor/Editor.js
@@ -40,6 +40,7 @@ class MarkdownEditor extends Component {
   renderNode: SlateNodeProps => *;
   plugins: Plugin[];
   @observable editorValue: Value;
+  @observable editorLoaded: boolean = false;
 
   constructor(props: Props) {
     super(props);
@@ -70,6 +71,12 @@ class MarkdownEditor extends Component {
     }
   }
 
+  setEditorRef = (ref: Editor) => {
+    this.editor = ref;
+    // Force re-render to show ToC (<Content />)
+    this.editorLoaded = true;
+  };
+
   onChange = (change: Change) => {
     if (this.editorValue !== change.value) {
       this.props.onChange(Markdown.serialize(change.value));
@@ -179,7 +186,9 @@ class MarkdownEditor extends Component {
       >
         <MaxWidth column auto>
           <Header onClick={this.focusAtStart} readOnly={readOnly} />
-          {readOnly && this.editor && <Contents editor={this.editor} />}
+          {readOnly &&
+            this.editorLoaded &&
+            this.editor && <Contents editor={this.editor} />}
           {!readOnly &&
             this.editor && (
               <Toolbar value={this.editorValue} editor={this.editor} />
@@ -192,7 +201,7 @@ class MarkdownEditor extends Component {
               />
             )}
           <StyledEditor
-            innerRef={ref => (this.editor = ref)}
+            innerRef={this.setEditorRef}
             placeholder="Start with a title…"
             bodyPlaceholder="…the rest is your canvas"
             plugins={this.plugins}