Emoji picker: changed global position to local

src/common/components/editor-toolbar/index.tsx

@@ -585,7 +585,7 @@ export class EditorToolbar extends Component<Props> {
               {emoticonHappyOutlineSvg}
               {showEmoji && this.state.isMounted && (
                 <EmojiPicker
-                  anchor={document.querySelector("#editor-tool-emoji-picker")!!}
+                  anchor={document.querySelector("#editor-tool-emoji-picker")!! as HTMLElement}
                   onSelect={(e) => this.insertText(e, "")}
                 />
               )}

src/common/components/emoji-picker/_index.scss

@@ -3,6 +3,7 @@
 .emoji-picker-dialog {
   position: absolute;
   z-index: 201;
+  top: 100%;
 
   em-emoji-picker {
     width: 300px;
@@ -19,12 +20,16 @@
     border-top: 1px solid var(--border-color);
     position: fixed;
 
-    @include themify(night) {
-      background-color: rgba(21, 22, 23);
+    em-emoji-picker {
+      width: 100%;
     }
 
-    em-emoji-picker {
+    > div {
       width: 100%;
     }
   }
+
+  @include themify(night) {
+    background-color: rgba(21, 22, 23);
+  }
 }

src/common/components/emoji-picker/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import useMountedState from "react-use/lib/useMountedState";
 import "./_index.scss";
 import { v4 } from "uuid";
@@ -8,7 +7,7 @@ import { useMappedStore } from "../../store/use-mapped-store";
 import useClickAway from "react-use/lib/useClickAway";
 
 interface Props {
-  anchor: Element | null;
+  anchor: HTMLElement | null;
   onSelect: (e: string) => void;
 }
 
@@ -38,36 +37,30 @@ export function EmojiPicker({ anchor, onSelect }: Props) {
   useEffect(() => {
     if (anchor) {
       anchor.addEventListener("click", () => {
-        const { x, y } = anchor.getBoundingClientRect();
-        setPosition({ x: x + window.scrollX, y: y + window.scrollY });
+        anchor.style.position = "relative !important";
         setShow(true);
       });
     }
   }, [anchor]);
 
   return isMounted() ? (
-    createPortal(
-      <div
-        ref={ref}
-        id={dialogId}
-        key={dialogId}
-        className="emoji-picker-dialog"
-        style={{
-          top: position.y + 40,
-          left: position.x,
-          display: show ? "flex" : "none"
-        }}
-      >
-        <Picker
-          dynamicWidth={true}
-          onEmojiSelect={(e: { native: string }) => onSelect(e.native)}
-          previewPosition="none"
-          set="apple"
-          theme={global.theme === "day" ? "light" : "dark"}
-        />
-      </div>,
-      document.querySelector("#root")!!
-    )
+    <div
+      ref={ref}
+      id={dialogId}
+      key={dialogId}
+      className="emoji-picker-dialog"
+      style={{
+        display: show ? "block" : "none"
+      }}
+    >
+      <Picker
+        dynamicWidth={true}
+        onEmojiSelect={(e: { native: string }) => onSelect(e.native)}
+        previewPosition="none"
+        set="apple"
+        theme={global.theme === "day" ? "light" : "dark"}
+      />
+    </div>
   ) : (
     <></>
   );