From b204f5dbba1314c3fc59b8bef5a5c0ae2f71f56e Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 25 Sep 2023 13:16:06 +0300
Subject: [PATCH] Bubble menu positioning (#232)

---
 .../Editor/BubbleMenu/IncutBubbleMenu.tsx     | 13 ++++---
 src/components/Editor/Editor.tsx              | 34 +++++++++++++++++++
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
index 120e1502..6cb7550f 100644
--- a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
+++ b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
@@ -15,6 +15,10 @@ const backgrounds = [null, 'white', 'black', 'yellow', 'pink', 'green']
 export const IncutBubbleMenu = (props: Props) => {
   const { t } = useLocalize()
   const [substratBubbleOpen, setSubstratBubbleOpen] = createSignal(false)
+  const handleChangeBg = (bg) => {
+    props.editor.chain().focus().setArticleBg(bg).run()
+    setSubstratBubbleOpen(false)
+  }
   return (
     <div ref={props.ref} class={styles.BubbleMenu}>
       <button
@@ -49,16 +53,11 @@ export const IncutBubbleMenu = (props: Props) => {
           <span style={{ color: 'white' }}>{t('Substrate')}</span>
           <Icon name="down-triangle" class={styles.triangle} />
         </button>
-        <Show when={!substratBubbleOpen()}>
+        <Show when={substratBubbleOpen()}>
           <div class={styles.dropDown}>
             <div class={styles.actions}>
               <For each={backgrounds}>
-                {(bg) => (
-                  <div
-                    onClick={() => props.editor.chain().focus().setArticleBg(bg).run()}
-                    class={clsx(styles.color, styles[bg])}
-                  />
-                )}
+                {(bg) => <div onClick={() => handleChangeBg(bg)} class={clsx(styles.color, styles[bg])} />}
               </For>
             </div>
           </div>
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 43705a45..4491a749 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -54,6 +54,20 @@ type Props = {
 const yDocs: Record<string, Doc> = {}
 const providers: Record<string, HocuspocusProvider> = {}
 
+const fixedTippy = (editor, containerClassName: string) => {
+  return {
+    offset: [0, -16],
+    placement: 'top',
+    getReferenceClientRect: () => {
+      const selectedElement = editor.view.dom.querySelector('.has-focus')
+      if (selectedElement) {
+        return selectedElement.getBoundingClientRect()
+      }
+      return null
+    }
+  }
+}
+
 export const Editor = (props: Props) => {
   const { t } = useLocalize()
   const { user } = useSession()
@@ -199,6 +213,16 @@ export const Editor = (props: Props) => {
           const { selection } = state
           const { empty } = selection
           return empty && e.isActive('blockquote')
+        },
+        tippyOptions: {
+          offset: [0, 0],
+          placement: 'top',
+          getReferenceClientRect: () => {
+            const selectedElement = editor().view.dom.querySelector('.has-focus')
+            if (selectedElement) {
+              return selectedElement.getBoundingClientRect()
+            }
+          }
         }
       }),
       BubbleMenu.configure({
@@ -208,6 +232,16 @@ export const Editor = (props: Props) => {
           const { selection } = state
           const { empty } = selection
           return empty && e.isActive('article')
+        },
+        tippyOptions: {
+          offset: [0, -16],
+          placement: 'top',
+          getReferenceClientRect: () => {
+            const selectedElement = editor().view.dom.querySelector('.has-focus')
+            if (selectedElement) {
+              return selectedElement.getBoundingClientRect()
+            }
+          }
         }
       }),
       BubbleMenu.configure({