content.tsx

import type { EmotionCache } from "@emotion/react";
import { MantineProvider } from "@mantine/core";
import createCache from "@emotion/cache";

const dynamicStyleTagsIDs = [];
const usedStyleTagIDs = {};

// to render this element in every instance of: <div role="textbox">...</div>
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll(`div[role="textbox"]`);

export const getStyle: PlasmoGetStyle = (props) => {
// creates style tag for every element
  const newStyleElement = document.createElement(`style`);
  const id = randomHash();
  // sets the style tag's id
  newStyleElement.id = id;
  // and pushes created ID to array to reference later
  dynamicStyleTagsIDs.push(id);

  return newStyleElement;
};


const getStyleTagByID = (id: string) => {
  let styleTag;
  // get all shadow roots
  document.querySelectorAll("plasmo-csui").forEach((el) => {
    // return style tag with the specified ID 
    if (id == el.shadowRoot.children[0].id) {
      styleTag = el.shadowRoot.children[0];
    }
  });
  return styleTag;
};

const getUnusedStyleCache = (
  dynamicStyleTagsIDs: string[],
  usedTags: object
): EmotionCache => {
  let styleCache;
  let continueLoop = true;
  let i = 0;
  while (continueLoop) {
    // only use unused IDs
    if (!usedTags[dynamicStyleTagsIDs[i]]) {
      // create cache with the current style tag as the container (referenced by ID)
      styleCache = createCache({
        key: "mantine",
        prepend: true,
        container: getStyleTagByID(dynamicStyleTagsIDs[i]),
      });
      // once used an ID as a style cache, store it's ID in object
      usedTags[dynamicStyleTagsIDs[i]] = true;
      continueLoop = false;
    }
    // we used all of our IDs in array, so end loop
    if (Object.keys(usedTags).length === dynamicStyleTagsIDs.length) {
      continueLoop = false;
    }
    i = i + 1;
  }

  return styleCache;
};

const PageContent = () => {

return <MantineProvider
    // this will generate a unique style cache for every element in the list
      emotionCache={getUnusedStyleCache(dynamicStyleTagsIDs, usedStyleTagIDs)}
      withGlobalStyles
      withNormalizeCSS
    >
      {/* <CODE_GOES_HERE>  */}
    </MantineProvider>
};

export default PageContent