[EXP] Help with creating some basic Modal functionality for gmail view

[uri3000]

What is the example you wish to see?

I would like to have a button open a top level Modal.

This is my gmail compose view component:

import React, { useEffect, useState } from 'react';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from "plasmo";
import type { generateKey } from "crypto";
import { renderToString } from 'react-dom/server';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { ToolbarButton, GoogleSuggestionButton, ComposeToolbar } from './content.styled';
import OverlayModal from './modal';
import { measureMemory } from "vm";

export const config: PlasmoCSConfig = {
  matches: ["https://mail.google.com/*"],
  run_at: "document_end"
}

const styleElement = document.createElement("style");

const styleCache = createCache({
  key: "plasmo-emotion-cache",
  prepend: true,
  container: styleElement
});

export const getStyle = () => styleElement;

export const getInlineAnchorList = () => document.querySelectorAll(".bAs");

const GmailTestInline = () => {
  const [composeView, setComposeView] = useState<InboxSDK.ComposeView>(null);
  const [isShowModal, setIsShowModal] = useState<boolean>(false);

  useEffect(() => {
  }, []);

  const openModal = async () => {
    setIsShowModal(true);
  };

    return (
      <CacheProvider value={styleCache}>
        <ComposeToolbar>
          <GoogleSuggestionButton 
          onClick={() => { openModal(); }}>
            ⚡️ Hello... 
          </GoogleSuggestionButton>
        </ComposeToolbar>

        { (isShowModal) ? (<OverlayModal/>) : (<div/>) }
      </CacheProvider>
    );
  }

export default GmailTestInline;

This is the OverlayModal component:

import React, { useEffect, useState } from 'react';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from "plasmo";
import type { generateKey } from "crypto";
import { renderToString } from 'react-dom/server';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { SuggestionModal } from './content.styled';

export const config: PlasmoCSConfig = {
  matches: ["https://mail.google.com/*"],
  run_at: "document_end"
}

// export const getOverlayAnchorList = () => document.querySelectorAll(".bAs");
export const PlasmoGetOverlayAnchor = () => document.querySelectorAll(".bkK");

const OverlayModal = () => {

    return (
        <SuggestionModal/>
    );
  }

export default OverlayModal;

How would I createa a single Modal context to mount over 'body' while still having my ComposeToolbar inline within the compose view? If I create 2 separate CSUI components (Modal, ComposeToolbar) then I would still need to somehow have the openModal() function open the Modal. Any help would be appreciated!

Is there any context that might help us understand?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[brentshulman-silkline]

I am trying to do something similar as well!