Bubble menu positioning (#232)

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>

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({