fix(problems): 修复灵动布局下编辑器元素的查找

Author: XYShaoKang

src/content/pages/problems/Timer.tsx

@@ -7,9 +7,8 @@ import {
   SuccessCheckReturnType,
   findElement,
   findElementByXPath,
-  findAllElement,
 } from '@/utils'
-import { useEvent, useHover, useObserverAncestor } from '@/hooks'
+import { useEvent, useHover } from '@/hooks'
 import { ToolTip } from '@/components/ToolTip'
 
 import {
@@ -75,6 +74,14 @@ const Button = styled.button<{
         `}
 `
 
+function isEditor(node: unknown): node is HTMLElement {
+  return (
+    node instanceof HTMLElement &&
+    node.classList.contains('monaco-editor') &&
+    node.parentElement?.dataset.modeId !== 'plaintext'
+  )
+}
+
 interface TimerProps {
   beta?: boolean
   root?: HTMLElement
@@ -372,29 +379,6 @@ const Timer: FC<TimerProps> = ({ beta, root, dynamicLayout }) => {
     handleClick()
   }
 
-  const getEditEl = async () => {
-    let editEl: HTMLElement
-
-    if (beta) {
-      const editEls = await findAllElement(
-        '.monaco-editor',
-        els =>
-          !!els.find(el => el.parentElement?.dataset.modeId !== 'plaintext')
-      )
-      editEl = editEls.find(
-        el => el.parentElement?.dataset.modeId !== 'plaintext'
-      )!
-    } else {
-      editEl = await findElement('.euyvu2f0')
-    }
-    return editEl
-  }
-  useObserverAncestor(async state => {
-    const editEl: HTMLElement = await getEditEl()
-    if (!state.isMount) return
-    setEditEl(editEl)
-    return editEl
-  })
   useEffect(() => {
     if (!editEl) return
     console.log(editEl)
@@ -403,6 +387,30 @@ const Timer: FC<TimerProps> = ({ beta, root, dynamicLayout }) => {
   }, [editEl])
   //#endregion
 
+  useEffect(() => {
+    const node = Array.from(document.querySelectorAll('.monaco-editor')).find(
+      isEditor
+    )
+    if (node) {
+      setEditEl(node)
+    }
+    const observe = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            if (isEditor(node)) {
+              setEditEl(node)
+            }
+          }
+        }
+      }
+    })
+    observe.observe(document.body, { childList: true, subtree: true })
+    return () => {
+      observe.disconnect()
+    }
+  }, [])
+
   if (!root) return null
 
   return (