fix: Unintended scroll reset when switching between view / edit (#1807)

* fix: Don't remount document when switching between edit/read-only
fix: Button vertical alignment when using as=Link

* fix: Bump RME, fixes issue with image behavior changing between read-only/edit without editor remount

* fix: Heading anchor positioning

app/components/Button.js

@@ -102,7 +102,7 @@ export const Inner = styled.span`
   line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
   justify-content: center;
   align-items: center;
-  min-height: 30px;
+  min-height: 32px;
 
   ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};

app/components/Editor.js

@@ -172,6 +172,10 @@ const StyledEditor = styled(RichMarkdownEditor)`
     font-weight: 500;
   }
 
+  .heading-anchor {
+    box-sizing: border-box;
+  }
+
   .heading-name {
     pointer-events: none;
   }

app/scenes/Document/components/DataLoader.js

@@ -240,13 +240,11 @@ class DataLoader extends React.Component<Props> {
     }
 
     const abilities = policies.abilities(document.id);
-    const key = this.isEditing ? "editing" : "read-only";
 
     return (
       <SocketPresence documentId={document.id} isEditing={this.isEditing}>
         {this.isEditing && <HideSidebar ui={ui} />}
         <DocumentComponent
-          key={key}
           document={document}
           revision={revision}
           abilities={abilities}

app/scenes/Document/components/Document.js

@@ -81,13 +81,13 @@ class DocumentScene extends React.Component<Props> {
   @observable title: string = this.props.document.title;
   getEditorText: () => string = () => this.props.document.text;
 
-  componentDidMount() {
-    this.updateIsDirty();
-  }
-
   componentDidUpdate(prevProps) {
     const { auth, document } = this.props;
 
+    if (prevProps.readOnly && !this.props.readOnly) {
+      this.updateIsDirty();
+    }
+
     if (this.props.readOnly) {
       this.lastRevision = document.revision;
 
@@ -440,7 +440,7 @@ class DocumentScene extends React.Component<Props> {
                     ui={this.props.ui}
                   />
                 </Flex>
-                {readOnly && !isShare && !revision && (
+                {!isShare && !revision && (
                   <>
                     <MarkAsViewed document={document} />
                     <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>

app/scenes/Document/components/Header.js

@@ -12,7 +12,7 @@ import {
 import { transparentize, darken } from "polished";
 import * as React from "react";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
-import { Redirect } from "react-router-dom";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import AuthStore from "stores/AuthStore";
@@ -63,7 +63,6 @@ type Props = {
 class Header extends React.Component<Props> {
   @observable isScrolled = false;
   @observable showShareModal = false;
-  @observable redirectTo: ?string;
 
   componentDidMount() {
     window.addEventListener("scroll", this.handleScroll);
@@ -79,18 +78,6 @@ class Header extends React.Component<Props> {
 
   handleScroll = throttle(this.updateIsScrolled, 50);
 
-  handleEdit = () => {
-    this.redirectTo = editDocumentUrl(this.props.document);
-  };
-
-  handleNewFromTemplate = () => {
-    const { document } = this.props;
-
-    this.redirectTo = newDocumentUrl(document.collectionId, {
-      templateId: document.id,
-    });
-  };
-
   handleSave = () => {
     this.props.onSave({ done: true });
   };
@@ -118,8 +105,6 @@ class Header extends React.Component<Props> {
   };
 
   render() {
-    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
-
     const {
       shares,
       document,
@@ -276,8 +261,9 @@ class Header extends React.Component<Props> {
                 placement="bottom"
               >
                 <Button
+                  as={Link}
                   icon={<EditIcon />}
-                  onClick={this.handleEdit}
+                  to={editDocumentUrl(this.props.document)}
                   neutral
                   small
                 >
@@ -309,7 +295,10 @@ class Header extends React.Component<Props> {
             <Action>
               <Button
                 icon={<PlusIcon />}
-                onClick={this.handleNewFromTemplate}
+                as={Link}
+                to={newDocumentUrl(document.collectionId, {
+                  templateId: document.id,
+                })}
                 primary
                 small
               >
@@ -423,6 +412,7 @@ const Title = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  cursor: pointer;
   display: none;
   width: 0;
 

package.json

@@ -153,7 +153,7 @@
     "react-waypoint": "^9.0.2",
     "react-window": "^1.8.6",
     "reakit": "^1.3.4",
-    "rich-markdown-editor": "^11.0.11",
+    "rich-markdown-editor": "^11.1.2",
     "semver": "^7.3.2",
     "sequelize": "^6.3.4",
     "sequelize-cli": "^6.2.0",

yarn.lock

@@ -8871,7 +8871,7 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-outline-icons@^1.21.0, outline-icons@^1.23.0:
+outline-icons@^1.23.0:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.23.0.tgz#46c9655f7f7f77900349ca39d4676dd99550e3ea"
   integrity sha512-p4QZ1KIOnkB3qju1+NNJxQPsmVOibqOBp7AksFas7Igchg94plR/fnDbs9Oe2uBzD64PApR4ypU/pe6mkMGong==
@@ -10472,15 +10472,15 @@ retry-as-promised@^3.2.0:
   dependencies:
     any-promise "^1.3.0"
 
-rich-markdown-editor@^11.0.11:
-  version "11.0.11"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-11.0.11.tgz#7f29f0956a81618966866d4c05219910e317a7d1"
-  integrity sha512-2p7kETZSDCene8DqV0WgGNeSgaK3V8uRIXUK9gJAORl6zaieuY0TQu3GKIYkblxxeJYeMGp/kQeDJRrBYnRDBg==
+rich-markdown-editor@^11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-11.1.2.tgz#2c31cf23ed9e580be6706b980beeaab8ffae13c0"
+  integrity sha512-g5j6OAl2mHgbf+m8/RbuBP3ozNHBFpFxclx0AQjfC4m53h+HcGVznBUIZaXeOPu0DqAB2Rrzt+3fVsBxoRCT7w==
   dependencies:
     copy-to-clipboard "^3.0.8"
     lodash "^4.17.11"
     markdown-it-container "^3.0.0"
-    outline-icons "^1.21.0"
+    outline-icons "^1.23.0"
     prismjs "^1.19.0"
     prosemirror-commands "^1.1.4"
     prosemirror-dropcursor "^1.3.2"