Mantine + Plasmo page

content.tsx

import createCache from "@emotion/cache"
import { Button, Image, MantineProvider, Popover, Text } from "@mantine/core"
import { NotificationsProvider, showNotification } from "@mantine/notifications"
import type { PlasmoContentScript, PlasmoGetInlineAnchor } from "plasmo"
import type { PlasmoGetStyle } from "plasmo"
import React, { useEffect, useRef, useState } from "react"
import Fade from "react-reveal/Fade"

import AppModal from "~components/appModal"

import { createNewStyleTag, randomHash } from "./helpers"

const styleElement = document.createElement("style")

// const styleCache = createCache({
//   key: "mantine",
//   prepend: true,
//   container: styleElement
// })

export const getStyle: PlasmoGetStyle = () => styleElement

export const config: PlasmoContentScript = {
  matches: ["https://mail.google.com/*"],
  all_frames: true
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  // document.querySelector(`div[id="${currentlyFocusedEmailId}"]`) ??
  document.querySelector(`div[role="textbox"]`)

const CustomButton = () => {
  // const [emailBoxIsFocused, setEmailBoxIsFocused] = useState(false)
  const [modalIsOpen, setModalIsOpen] = useState(false)
  const [popoverIsOpen, setPopoverIsOpen] = useState(false)
  const [currentEmail, setCurrentEmail] = useState<string>(undefined)
  const [HTMLdoc, _] = useState(document.documentElement.innerHTML)
  const [isInMailTab, setIsInMailTab] = useState(
    !document.querySelector(`img[alt="In new window"]`) ? false : true
  )
  const [styleTagArray, setStyleTagArray] =
    useState<{ id: string; element: HTMLStyleElement }[]>(undefined)

  useEffect(() => {
    // every time you focus on a textbox it opens that one
    // document
    //   .querySelector('div[role="textbox"]')
    //   ?.addEventListener("focus", () => {
    //     setEmailBoxIsFocused(true)
    //   })
    let numberOfStyleTags = []
    document.querySelectorAll(`div[role="textbox"]`).forEach((emailOpen) => {
      numberOfStyleTags.push({
        id: randomHash(),
        element: createNewStyleTag(styleElement)
      })
    })
    setStyleTagArray([...numberOfStyleTags])

    //
    //NOTE: this ensures that the icon button is always visible
    if (
      document
        .querySelector("plasmo-csui")
        ?.shadowRoot?.querySelector(`#plasmo-inline`)
    ) {
      document
        .querySelector("plasmo-csui")
        .shadowRoot.querySelector(`#plasmo-shadow-container`).style.position =
        "static"
      // NOTE:
      document
        .querySelector("plasmo-csui")
        .shadowRoot.querySelector(`#plasmo-inline`).style.position = "static"
    }
    //
    //
    // emailbox is focused on page load
    // if (document.activeElement.getAttribute("role") == "textbox") {
    //   setEmailBoxIsFocused(true)
    // }
  })

  return (
    <MantineProvider
      // emotionCache={styleCache}
      // emotionCache={createNewStyleTag(styleElement)}
      withGlobalStyles
      withNormalizeCSS>
      <NotificationsProvider position="bottom-center">
        <>
          <Fade>
            <Button
              onClick={() => {
                setModalIsOpen(true)
                const emailContent =
                  // @ts-expect-error
                  document.querySelector(`div[role="textbox"]`).innerText
                setCurrentEmail(emailContent)

                document
                  .querySelectorAll(`input[name="subjectbox"]`)
                  .forEach((el) => {
                    // @ts-expect-error
                    el.parentElement.style.zIndex = 0
                  })
              }}
              size="xs"
              style={{
                position: "absolute",
                bottom: 40,

                right: 6
              }}>
              <Image
                width={28}
                height={28}
                src={`https://firebasestorage.googleapis.com/v0/b/serve-2fe3e.appspot.com/o/logo-trans.png?alt=media&token=864a714e-b351-45c8-a3cc-efbe00b45287`}
              />
            </Button>
          </Fade>

          {/* if we're in a specific email, use overlay */}

          {/* {isInMailTab ? (
            <Popover
              opened={popoverIsOpen}
              width={200}
              onClose={() => setPopoverIsOpen(false)}
              position="bottom"
              withArrow
              shadow="md">
              <Popover.Dropdown>
                <Text size="sm">
                  This is uncontrolled popover, it is opened when button is
                  clicked
                </Text>
              </Popover.Dropdown>
            </Popover>
          ) : ( */}
          <AppModal
            modalIsOpen={modalIsOpen}
            setModalIsOpen={setModalIsOpen}
            emailContent={currentEmail}
          />
          {/* )} */}
        </>
      </NotificationsProvider>
    </MantineProvider>
  )
}

export default CustomButton