Function CustomDomSelector

component/ui/customDomSelector.tsx:16–197

()

const turndownService = Turndown()

export default function CustomDomSelector() {
  const [aiType, setAiType] = useStorage("app-aiType")
  const [position, setPosition] = useState({ top: 0, left: 0 })
  const [isReady, setIsReady] = useState(false)
  const [isSelect, setIsSelect] = useState(false)
  const downloadType = useRef("")
  const [editContent, setEditContent] = useEditMarkdown()
  const [parseContent, setParseContent] = useParseMarkdown()

  const articleTitle = document
    .querySelector<HTMLElement>("head title")
    ?.innerText.trim()

  useEffect(() => {
    if (aiType) {
      addCss(`.codebox-current { outline: 2px solid #42b88350 !important; }`)
      if (isReady) {
        addEventListeners()
      } else {
        removeEventListeners()
      }
    }
    return () => {
      removeEventListeners()
    }
  }, [aiType, isReady, isSelect])

  const addEventListeners = () => {
    document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("click", handleClick)
  }

  const removeEventListeners = () => {
    document.removeEventListener("mousemove", handleMouseMove)
    document.removeEventListener("click", handleClick)
  }

  const handleMouseMove = (event: MouseEvent) => {
    if (isReady && !isSelect) {
      const target = event.target as HTMLElement
      highlightElement(target)
    }
  }

  const handleClick = (event: MouseEvent) => {
    if (isReady) {
      const target = event.target as HTMLElement
      const tooltip = target.closest(".codebox-tooltip")
      const modal = target.closest(".codebox-modal")
      const csui = target.closest("#codebox-csui")

      if (!tooltip && !modal && !csui) {
        setIsSelect(true)
        highlightElement(target)
        updateTooltipPosition(target)
        event.stopPropagation()
        event.preventDefault()
      }