fix: make editor toolbar scrollable

apps/web/src/components/editor/editor.css

@@ -18,20 +18,6 @@
   padding-top: 1px;
   font-size: 0.975em;
 }
-.ql-toolbar.ql-snow {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  z-index: 2;
-  background-color: var(--background);
-  margin-top: -1px !important;
-
-  -webkit-transition: max-height 500ms linear;
-  -moz-transition: max-height 500ms linear;
-  -o-transition: max-height 500ms linear;
-  -ms-transition: max-height 500ms linear;
-  transition: max-height 500ms linear;
-}
 
 .ql-formats {
   margin-bottom: 5px;
@@ -82,6 +68,7 @@
   width: 100%;
   border: none !important;
   border-bottom: 1px solid var(--border) !important;
+  background-color: var(--background);
   padding: 5px !important;
   padding-left: 0px !important;
 }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, Suspense } from "react";
-import { Flex } from "rebass";
+import { Box, Flex } from "rebass";
 import Properties from "../properties";
 import {
   useStore,
@@ -139,6 +139,23 @@ function Editor(props) {
           mt={[0, 0, 25]}
         >
           <Header />
+          <Box
+            id="toolbarContainer"
+            bg="background"
+            sx={{
+              borderBottom: "1px solid",
+              borderBottomColor: "border",
+              position: "sticky",
+              top: 0,
+              zIndex: 2,
+              height: 45,
+              overflow: "hidden",
+              transition: "max-height 500ms linear",
+              ":hover": {
+                overflow: "visible",
+              },
+            }}
+          />
           {contentType === "delta" && (
             <Suspense fallback={<EditorLoading />}>
               <ReactQuill
@@ -158,6 +175,15 @@ function Editor(props) {
                 }}
                 changeInterval={500}
                 onWordCountChanged={updateWordCount}
+                onQuillInitialized={() => {
+                  const toolbar = document.querySelector(".ql-toolbar.ql-snow");
+                  const toolbarContainer = document.querySelector(
+                    "#toolbarContainer"
+                  );
+                  if (toolbar && toolbarContainer) {
+                    toolbarContainer.appendChild(toolbar);
+                  }
+                }}
                 onChange={() => {
                   const { quill } = quillRef.current;
                   const delta = quill.getContents().ops;

apps/web/src/components/editor/react-quill.js

@@ -143,6 +143,7 @@ export default class ReactQuill extends Component {
       id,
       isSimple,
       isFocusMode,
+      onQuillInitialized,
     } = this.props;
 
     this.quill = new Quill("#" + id, {
@@ -162,6 +163,12 @@ export default class ReactQuill extends Component {
       this.quill.on("text-change", this.textChangeHandler);
     }
 
+    if (onQuillInitialized) {
+      this.quill.once("editor-change", () => {
+        onQuillInitialized();
+      });
+    }
+
     if (onSave) {
       this.quill.keyboard.addBinding(
         {

apps/web/yarn.lock

@@ -9001,7 +9001,7 @@ normalize-url@^3.0.0, normalize-url@^3.0.1:
 
 "notes-core@git+ssh://git@github.com:streetwriters/notesnook-core.git":
   version "5.3.2"
-  resolved "git+ssh://git@github.com:streetwriters/notesnook-core.git#43760ff162e45eda017097c009be3162a4c4e890"
+  resolved "git+ssh://git@github.com:streetwriters/notesnook-core.git#2a7d72a28febb6ccd055ec6622022d3d7c165e23"
   dependencies:
     fast-sort "^2.0.1"
     fuzzysearch "^1.0.3"