fix: Regression with TOC not showing when navigating directly to document (#1500)

fix: Editing document too wide when TOC visible in read only

app/scenes/Document/components/Document.js

@@ -18,6 +18,7 @@ import Branding from "components/Branding";
 import ErrorBoundary from "components/ErrorBoundary";
 import Flex from "components/Flex";
 import LoadingIndicator from "components/LoadingIndicator";
+import LoadingPlaceholder from "components/LoadingPlaceholder";
 import Notice from "components/Notice";
 import PageTitle from "components/PageTitle";
 import Time from "components/Time";
@@ -67,7 +68,7 @@ type Props = {
 
 @observer
 class DocumentScene extends React.Component<Props> {
-  @observable editor: ?any;
+  @observable editor = React.createRef();
   @observable isUploading: boolean = false;
   @observable isSaving: boolean = false;
   @observable isPublishing: boolean = false;
@@ -380,7 +381,7 @@ class DocumentScene extends React.Component<Props> {
             )}
             <MaxWidth
               archived={document.isArchived}
-              tocVisible={ui.tocVisible}
+              tocVisible={ui.tocVisible && readOnly}
               column
               auto
             >
@@ -412,50 +413,52 @@ class DocumentScene extends React.Component<Props> {
                   )}
                 </Notice>
               )}
-              <Flex auto={!readOnly}>
-                {ui.tocVisible && readOnly && (
-                  <Contents
-                    headings={this.editor ? this.editor.getHeadings() : []}
+              <React.Suspense fallback={<LoadingPlaceholder />}>
+                <Flex auto={!readOnly}>
+                  {ui.tocVisible && readOnly && (
+                    <Contents
+                      headings={
+                        this.editor.current
+                          ? this.editor.current.getHeadings()
+                          : []
+                      }
+                    />
+                  )}
+                  <Editor
+                    id={document.id}
+                    innerRef={this.editor}
+                    isShare={isShare}
+                    isDraft={document.isDraft}
+                    template={document.isTemplate}
+                    key={[injectTemplate, disableEmbeds].join("-")}
+                    title={revision ? revision.title : this.title}
+                    document={document}
+                    value={readOnly ? value : undefined}
+                    defaultValue={value}
+                    disableEmbeds={disableEmbeds}
+                    onImageUploadStart={this.onImageUploadStart}
+                    onImageUploadStop={this.onImageUploadStop}
+                    onSearchLink={this.props.onSearchLink}
+                    onCreateLink={this.props.onCreateLink}
+                    onChangeTitle={this.onChangeTitle}
+                    onChange={this.onChange}
+                    onSave={this.onSave}
+                    onPublish={this.onPublish}
+                    onCancel={this.goBack}
+                    readOnly={readOnly}
+                    readOnlyWriteCheckboxes={readOnly && abilities.update}
+                    ui={this.props.ui}
                   />
+                </Flex>
+                {readOnly && !isShare && !revision && (
+                  <>
+                    <MarkAsViewed document={document} />
+                    <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
+                      <References document={document} />
+                    </ReferencesWrapper>
+                  </>
                 )}
-                <Editor
-                  id={document.id}
-                  ref={(ref) => {
-                    if (ref) {
-                      this.editor = ref;
-                    }
-                  }}
-                  isShare={isShare}
-                  isDraft={document.isDraft}
-                  template={document.isTemplate}
-                  key={[injectTemplate, disableEmbeds].join("-")}
-                  title={revision ? revision.title : this.title}
-                  document={document}
-                  value={readOnly ? value : undefined}
-                  defaultValue={value}
-                  disableEmbeds={disableEmbeds}
-                  onImageUploadStart={this.onImageUploadStart}
-                  onImageUploadStop={this.onImageUploadStop}
-                  onSearchLink={this.props.onSearchLink}
-                  onCreateLink={this.props.onCreateLink}
-                  onChangeTitle={this.onChangeTitle}
-                  onChange={this.onChange}
-                  onSave={this.onSave}
-                  onPublish={this.onPublish}
-                  onCancel={this.goBack}
-                  readOnly={readOnly}
-                  readOnlyWriteCheckboxes={readOnly && abilities.update}
-                  ui={this.props.ui}
-                />
-              </Flex>
-              {readOnly && !isShare && !revision && (
-                <>
-                  <MarkAsViewed document={document} />
-                  <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
-                    <References document={document} />
-                  </ReferencesWrapper>
-                </>
-              )}
+              </React.Suspense>
             </MaxWidth>
           </Container>
         </Background>

app/scenes/Document/components/Editor.js

@@ -11,7 +11,6 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
-import LoadingPlaceholder from "components/LoadingPlaceholder";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {
@@ -22,33 +21,25 @@ type Props = {
   isDraft: boolean,
   isShare: boolean,
   readOnly?: boolean,
+  innerRef: { current: any },
 };
 
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  editor = React.createRef<any>();
 
   focusAtStart = () => {
-    if (this.editor.current) {
-      this.editor.current.focusAtStart();
+    if (this.props.innerRef.current) {
+      this.props.innerRef.current.focusAtStart();
     }
   };
 
   focusAtEnd = () => {
-    if (this.editor.current) {
-      this.editor.current.focusAtEnd();
+    if (this.props.innerRef.current) {
+      this.props.innerRef.current.focusAtEnd();
     }
   };
 
-  getHeadings = () => {
-    if (this.editor.current) {
-      return this.editor.current.getHeadings();
-    }
-
-    return [];
-  };
-
   handleTitleKeyDown = (event: SyntheticKeyboardEvent<>) => {
     if (event.key === "Enter" || event.key === "Tab") {
       event.preventDefault();
@@ -72,49 +63,46 @@ class DocumentEditor extends React.Component<Props> {
       isDraft,
       isShare,
       readOnly,
+      innerRef,
     } = this.props;
     const { emoji } = parseTitle(title);
     const startsWithEmojiAndSpace = !!(emoji && title.startsWith(`${emoji} `));
 
     return (
       <Flex auto column>
-        <React.Suspense fallback={<LoadingPlaceholder />}>
-          <Title
-            type="text"
-            onChange={onChangeTitle}
-            onKeyDown={this.handleTitleKeyDown}
-            placeholder={document.placeholder}
-            value={!title && readOnly ? document.titleWithDefault : title}
-            style={
-              startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined
-            }
-            readOnly={readOnly}
-            autoFocus={!title}
-            maxLength={100}
+        <Title
+          type="text"
+          onChange={onChangeTitle}
+          onKeyDown={this.handleTitleKeyDown}
+          placeholder={document.placeholder}
+          value={!title && readOnly ? document.titleWithDefault : title}
+          style={startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined}
+          readOnly={readOnly}
+          autoFocus={!title}
+          maxLength={100}
+        />
+        <DocumentMetaWithViews
+          isDraft={isDraft}
+          document={document}
+          to={documentHistoryUrl(document)}
+        />
+        <Editor
+          ref={innerRef}
+          autoFocus={title && !this.props.defaultValue}
+          placeholder="…the rest is up to you"
+          onHoverLink={this.handleLinkActive}
+          scrollTo={window.location.hash}
+          grow
+          {...this.props}
+        />
+        {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
+        {this.activeLinkEvent && !isShare && readOnly && (
+          <HoverPreview
+            node={this.activeLinkEvent.target}
+            event={this.activeLinkEvent}
+            onClose={this.handleLinkInactive}
           />
-          <DocumentMetaWithViews
-            isDraft={isDraft}
-            document={document}
-            to={documentHistoryUrl(document)}
-          />
-          <Editor
-            ref={this.editor}
-            autoFocus={title && !this.props.defaultValue}
-            placeholder="…the rest is up to you"
-            onHoverLink={this.handleLinkActive}
-            scrollTo={window.location.hash}
-            grow
-            {...this.props}
-          />
-          {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-          {this.activeLinkEvent && !isShare && readOnly && (
-            <HoverPreview
-              node={this.activeLinkEvent.target}
-              event={this.activeLinkEvent}
-              onClose={this.handleLinkInactive}
-            />
-          )}
-        </React.Suspense>
+        )}
       </Flex>
     );
   }