diff --git a/apps/web/src/components/editor/editor.css b/apps/web/src/components/editor/editor.css
index 950d1fb96..a26b03192 100644
--- a/apps/web/src/components/editor/editor.css
+++ b/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;
}
diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index c76860e13..d71d0f95e 100644
--- a/apps/web/src/components/editor/index.js
+++ b/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]}
>
+
{contentType === "delta" && (
}>
{
+ 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;
diff --git a/apps/web/src/components/editor/react-quill.js b/apps/web/src/components/editor/react-quill.js
index 4223865dd..ac8f27fa9 100644
--- a/apps/web/src/components/editor/react-quill.js
+++ b/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(
{
diff --git a/apps/web/yarn.lock b/apps/web/yarn.lock
index 2d0af2ff8..ffeb3a154 100644
--- a/apps/web/yarn.lock
+++ b/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"