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"