🧩 Plasmo Developers•8mo ago

Can't access other elements outside the plasmo-csui shadow root

I'm trying to get the unique url of a tweet container when i click on the button I'm rendering. I have already specified where i want my button to be attached in the DOM. Ideally, i treid listening to the currentTarget of the click event and try to get the closest element with the attibut I have set. But it always return null. I've also tried storing the lins in localStorage. But it seems as though my approach was still flawed. This is an excerpt of what my CSUI code looks like.

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}

Any help on how to get the exact link that corresponds when i click on a specific button would be highly appreciated.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Can't access other elements outside the plasmo-csui shadow root