feat: use custom scroll everywhere

apps/web/package.json

@@ -52,7 +52,7 @@
     "rebass": "^4.0.7",
     "streamablefs": "file:packages/streamablefs",
     "timeago.js": "^4.0.2",
-    "tinymce": "^5.10.0",
+    "tinymce": "^5.10.2",
     "uzip": "^0.20201231.0",
     "web-streams-polyfill": "^3.1.1",
     "wouter": "^2.7.3",

apps/web/src/components/dialogs/confirm.js

@@ -8,7 +8,6 @@ function Confirm(props) {
       isOpen={true}
       title={props.title}
       icon={props.icon}
-      scrollable
       description={props.subtitle}
       onClose={props.onNo}
       positiveButton={{

apps/web/src/components/dialogs/dialog.js

@@ -2,6 +2,7 @@ import { Flex, Text, Button as RebassButton } from "rebass";
 import * as Icon from "../icons";
 import Modal from "react-modal";
 import { useTheme } from "emotion-theming";
+import { FlexScrollContainer } from "../scroll-container";
 
 Modal.setAppElement("#root");
 function Dialog(props) {
@@ -37,6 +38,7 @@ function Dialog(props) {
           right: 0,
           bottom: 0,
           display: "flex",
+          flexDirection: "column",
           justifyContent: "center",
           backgroundColor: undefined,
           padding: 0,
@@ -57,8 +59,9 @@ function Dialog(props) {
         height={["100%", "auto", "auto"]}
         bg="background"
         alignSelf={"center"}
-        overflowY={props.scrollable ? "auto" : "hidden"}
+        overflowY={"hidden"}
         sx={{
+          justifyContent: "stretch",
           position: "relative",
           overflow: "hidden",
           boxShadow: "4px 5px 18px 2px #00000038",
@@ -98,8 +101,8 @@ function Dialog(props) {
             </Text>
           )}
         </Flex>
-        <Flex flexDirection="column" my={1} mx={4}>
-          {props.children}
+        <Flex variant="columnFill" sx={{ overflowY: "hidden" }} my={1} mx={4}>
+          <FlexScrollContainer>{props.children}</FlexScrollContainer>
         </Flex>
         {(props.positiveButton || props.negativeButton) && (
           <Flex

apps/web/src/components/dialogs/exportdialog.js

@@ -44,7 +44,6 @@ function ExportDialog(props) {
       icon={props.icon}
       description="You can export your notes as Markdown, HTML, PDF or Text."
       onClose={props.onClose}
-      scrollable
       negativeButton={{
         onClick: props.onClose,
         text: "Cancel",

apps/web/src/components/dialogs/featuredialog.js

@@ -109,7 +109,6 @@ function FeatureDialog(props) {
     <Dialog
       isOpen={true}
       title={feature.title}
-      scrollable
       description={feature.subtitle}
       buttonsAlignment="center"
       positiveButton={{

apps/web/src/components/dialogs/issuedialog.js

@@ -46,7 +46,6 @@ function IssueDialog(props) {
     <Dialog
       isOpen={true}
       title={"Report an issue"}
-      scrollable
       description={
         "Let us know if you are facing an issue. We'll do our best to sort it out for you."
       }

apps/web/src/components/dialogs/move-note-dialog.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Box, Text } from "rebass";
+import { Flex, Text } from "rebass";
 import * as Icon from "../icons";
 import { db } from "../../common/db";
 import Dialog from "./dialog";
@@ -86,7 +86,7 @@ class MoveDialog extends React.Component {
           onClick: props.onClose,
         }}
       >
-        <Flex flexDirection="column" sx={{ overflowY: "hidden" }}>
+        <Flex flexDirection="column" flex={1} sx={{ overflowY: "hidden" }}>
           <Field
             inputRef={(ref) => (this.inputRef = ref)}
             data-test-id="mnd-new-notebook-title"
@@ -105,14 +105,12 @@ class MoveDialog extends React.Component {
               if (e.key === "Enter") await this.addNotebook(e.target);
             }}
           />
-          <Box
+          <Flex
             mt={1}
+            variant="columnFill"
             sx={{
               borderRadius: "default",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderColor: "border",
-              overflowY: "auto",
+              border: "1px solid var(--border)",
             }}
           >
             {notebooks.map((notebook, index) => (
@@ -197,7 +195,7 @@ class MoveDialog extends React.Component {
                 </Flex>
               </Flex>
             ))}
-          </Box>
+          </Flex>
         </Flex>
       </Dialog>
     );

apps/web/src/components/dialogs/reminder-dialog.js

@@ -81,7 +81,6 @@ function ReminderDialog(props) {
       title={reminder.title}
       onClose={props.onClose}
       showClose
-      scrollable
       description={reminder.description}
       alignment="center"
       positiveButton={{

apps/web/src/components/dialogs/sessionexpireddialog.js

@@ -57,7 +57,6 @@ function SessionExpiredDialog(props) {
         </Flex>
       }
       icon={Icon.Login}
-      scrollable
       negativeButton={{
         text: "Sign out",
         disabled: isLoggingIn,

apps/web/src/components/editor/index.js

@@ -20,6 +20,7 @@ import EditorLoading from "./loading";
 import { db } from "../../common/db";
 import { AppEventManager, AppEvents } from "../../common";
 import debounce from "just-debounce-it";
+import { FlexScrollContainer } from "../scroll-container";
 
 const ReactMCE = React.lazy(() => import("./tinymce"));
 
@@ -136,6 +137,7 @@ function Editor({ noteId, nonce }) {
         </Flex>
       ) : null}
       <Toolbar />
+      <FlexScrollContainer>
         <Flex
           variant="columnFill"
           className="editorScroll"
@@ -211,6 +213,7 @@ function Editor({ noteId, nonce }) {
             )}
           </Flex>
         </Flex>
+      </FlexScrollContainer>
       {arePropertiesVisible && <Properties noteId={noteId} />}
     </Flex>
   );

apps/web/src/components/editor/tinymce.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import "./editor.css";
 import "@streetwritersco/tinymce-plugins/codeblock/styles.css";
 import "@streetwritersco/tinymce-plugins/collapsibleheaders/styles.css";
-import "tinymce/tinymce.js";
+import "tinymce/tinymce";
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import "file-loader?name=static/js/icons/default/icons.js&esModule=false!tinymce/icons/default/icons.min.js";
 // eslint-disable-next-line import/no-webpack-loader-syntax
@@ -258,7 +258,8 @@ function TinyMCE(props) {
           editor.on("ScrollIntoView", onScrollIntoView);
           editor.on("tap", onTap);
           editor.on(changeEvents, onEditorChange);
-          editor.on("remove", () => {
+          editor.once("remove", () => {
+            console.log("removing");
             editor.off("ScrollIntoView", onScrollIntoView);
             editor.off("tap", onTap);
             editor.off(changeEvents, onEditorChange);

apps/web/src/components/scroll-container/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text } from "rebass";
+import { Box } from "rebass";
 import { Scrollbars } from "rc-scrollbars";
 
 const ScrollContainer = ({ children, style, forwardedRef, ...props }) => {
@@ -28,6 +28,49 @@ const ScrollContainer = ({ children, style, forwardedRef, ...props }) => {
 };
 export default ScrollContainer;
 
+export function FlexScrollContainer({ children, style, ...props }) {
+  return (
+    <Scrollbars
+      {...props}
+      autoHide
+      style={{
+        overflowY: "hidden",
+        height: "auto",
+        width: "auto",
+        display: "flex",
+        flexDirection: "column",
+        flex: "1 1 auto",
+      }}
+      renderView={({ style, ...props }) => (
+        <Box
+          {...props}
+          style={{
+            overflow: "scroll",
+            position: "relative",
+            flex: "1 1 auto",
+          }}
+          sx={{
+            scrollbarWidth: "none",
+            "::-webkit-scrollbar": { width: 0, height: 0 },
+            msOverflowStyle: "none",
+          }}
+        />
+      )}
+      renderThumbVertical={({ style, ...props }) => (
+        <Box
+          {...props}
+          style={{
+            ...style,
+            backgroundColor: "var(--bgSecondaryText)",
+          }}
+        />
+      )}
+    >
+      {children}
+    </Scrollbars>
+  );
+}
+
 export const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => {
   return (
     <ScrollContainer {...props} forwardedRef={(sRef) => (ref.current = sRef)} />