feat: Full width images (#4389)

* feat: Full width images

* lint

* fix: Enable TOC overlaid on full size images

* Vendorize react-medium-image-zoom

* tsc

* fix

* Remove body scroll lock

app/scenes/Document/components/Contents.tsx

@@ -1,3 +1,4 @@
+import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -100,21 +101,27 @@ const Sticky = styled.div`
   top: 80px;
   max-height: calc(100vh - 80px);
 
-  box-shadow: 1px 0 0 ${(props) => props.theme.divider};
-  margin-top: 40px;
+  background: ${(props) => props.theme.background};
+  margin-top: 72px;
   margin-right: 52px;
   min-width: 204px;
-  width: 204px;
+  width: 228px;
   min-height: 40px;
   overflow-y: auto;
+  padding: 4px 16px;
+  border-radius: 8px;
+
+  @supports (backdrop-filter: blur(20px)) {
+    backdrop-filter: blur(20px);
+    background: ${(props) => transparentize(0.2, props.theme.background)};
+  }
 `;
 
 const Heading = styled.h3`
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 600;
-  text-transform: uppercase;
-  color: ${(props) => props.theme.sidebarText};
-  letter-spacing: 0.04em;
+  color: ${(props) => props.theme.textTertiary};
+  letter-spacing: 0.03em;
 `;
 
 const Empty = styled(Text)`
@@ -128,10 +135,9 @@ const ListItem = styled.li<{ level: number; active?: boolean }>`
   margin-bottom: 8px;
   padding-right: 2em;
   line-height: 1.3;
-  border-right: 3px solid
-    ${(props) => (props.active ? props.theme.divider : "transparent")};
 
   a {
+    font-weight: ${(props) => (props.active ? "600" : "inherit")};
     color: ${(props) =>
       props.active ? props.theme.primary : props.theme.text};
   }

app/scenes/Document/components/Document.tsx

@@ -481,7 +481,12 @@ class DocumentScene extends React.Component<Props> {
             }
           }}
         />
-        <Background key={revision ? revision.id : document.id} column auto>
+        <Background
+          id="full-width-container"
+          key={revision ? revision.id : document.id}
+          column
+          auto
+        >
           <Route
             path={`${document.url}/move`}
             component={() => (
@@ -562,7 +567,7 @@ class DocumentScene extends React.Component<Props> {
             >
               <Notices document={document} readOnly={readOnly} />
               <React.Suspense fallback={<PlaceholderDocument />}>
-                <Flex auto={!readOnly}>
+                <Flex auto={!readOnly} reverse>
                   {revision ? (
                     <RevisionViewer
                       isDraft={document.isDraft}
@@ -572,12 +577,6 @@ class DocumentScene extends React.Component<Props> {
                     />
                   ) : (
                     <>
-                      {showContents && (
-                        <Contents
-                          headings={this.headings}
-                          isFullWidth={document.fullWidth}
-                        />
-                      )}
                       <Editor
                         id={document.id}
                         key={embedsDisabled ? "disabled" : "enabled"}
@@ -624,6 +623,13 @@ class DocumentScene extends React.Component<Props> {
                           </>
                         )}
                       </Editor>
+
+                      {showContents && (
+                        <Contents
+                          headings={this.headings}
+                          isFullWidth={document.fullWidth}
+                        />
+                      )}
                     </>
                   )}
                 </Flex>

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -287,7 +287,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
         style={
           showCache
             ? {
-                display: "none",
+                opacity: 0,
+                pointerEvents: "none",
               }
             : undefined
         }