From 138f2e4b2cfe9ff5b8db8ff00d570512e73352ca Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Sun, 13 Sep 2020 11:44:36 +0500
Subject: [PATCH] fix: auto close properties when editor is focused

---
 apps/web/src/components/editor/index.js       | 13 +++++--------
 apps/web/src/components/editor/react-quill.js |  2 +-
 apps/web/src/stores/editor-store.js           |  6 ++++--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index 682012126..7760c3fec 100644
--- a/apps/web/src/components/editor/index.js
+++ b/apps/web/src/components/editor/index.js
@@ -17,8 +17,8 @@ function Editor() {
   const sessionState = useStore((store) => store.session.state);
   const setSession = useStore((store) => store.setSession);
   const saveSession = useStore((store) => store.saveSession);
+  const toggleProperties = useStore((store) => store.toggleProperties);
   const init = useStore((store) => store.init);
-  //const openSession = useStore((store) => store.openSession);
   const isFocusMode = useAppStore((store) => store.isFocusMode);
   const isTrial = useUserStore(
     (store) => store.user.notesnook?.subscription?.isTrial
@@ -68,13 +68,7 @@ function Editor() {
       }}
       flex="1 1 auto"
     >
-      <Flex
-        variant="columnFill"
-        className="editor"
-        onFocus={() => {
-          //hideProperties();
-        }}
-      >
+      <Flex variant="columnFill" className="editor">
         <Header />
         <Flex id="toolbar" />
         <EditorMenu quill={quillRef.current && quillRef.current.quill} />
@@ -83,6 +77,9 @@ function Editor() {
           ref={quillRef}
           refresh={sessionState === SESSION_STATES.new}
           isSimple={isLoggedin || !isTrial}
+          onFocus={() => {
+            toggleProperties(false);
+          }}
           initialContent={delta}
           placeholder="Type anything here"
           container=".editor"
diff --git a/apps/web/src/components/editor/react-quill.js b/apps/web/src/components/editor/react-quill.js
index 792eaf02f..0ae5d6fd4 100644
--- a/apps/web/src/components/editor/react-quill.js
+++ b/apps/web/src/components/editor/react-quill.js
@@ -115,6 +115,6 @@ export default class ReactQuill extends Component {
 
   render() {
     console.log("RERENDERING QUILL");
-    return <pre id={this.props.id} />;
+    return <pre onFocus={this.props.onFocus} id={this.props.id} />;
   }
 }
diff --git a/apps/web/src/stores/editor-store.js b/apps/web/src/stores/editor-store.js
index a1ab18d1d..4f11a1186 100644
--- a/apps/web/src/stores/editor-store.js
+++ b/apps/web/src/stores/editor-store.js
@@ -190,9 +190,11 @@ class EditorStore extends BaseStore {
     this._setTagOrColor("tag", tag);
   };
 
-  toggleProperties = () => {
+  toggleProperties = (toggleState) => {
     this.set(
-      (state) => (state.arePropertiesVisible = !state.arePropertiesVisible)
+      (state) =>
+        (state.arePropertiesVisible =
+          toggleState !== undefined ? toggleState : !state.arePropertiesVisible)
     );
   };