Add Shadow DOM support for sendComment action (#4843)

.vscode/settings.json

@@ -31,6 +31,7 @@
     "cntr",
     "compositionend",
     "compositionstart",
+    "contenteditable",
     "csrf",
     "ctnr",
     "Danmaku",

registry/lib/components/utils/keymap/actions.ts

@@ -3,7 +3,7 @@ import { getComponentSettings } from '@/core/settings'
 import { registerAndGetData } from '@/plugins/data'
 import { Options } from '.'
 import { KeyBindingAction, KeyBindingActionContext } from './bindings'
-import { simulateClick } from '@/core/utils'
+import { getActiveElement, simulateClick } from '@/core/utils'
 
 export const keyboardEventToPointer = (event: KeyboardEvent): PointerEventInit => {
   return {
@@ -239,15 +239,24 @@ export const builtInActions: Record<string, KeyBindingAction> = {
   sendComment: {
     displayName: '发送评论',
     ignoreTyping: false,
+    prevent: true,
     run: () => {
-      const { activeElement } = document
-      if (!activeElement || !(activeElement instanceof HTMLTextAreaElement)) {
+      const activeElement = getActiveElement()
+      if (!activeElement) {
         return null
       }
+      const isEditable =
+        activeElement instanceof HTMLTextAreaElement ||
+        activeElement.hasAttribute('contenteditable')
+      if (!isEditable) {
+        return null
+      }
+      const getShadowRoot = (node: Node) => node.getRootNode() as ShadowRoot | null
       const sendButton = (() => {
         const candidates = [
           () => activeElement.nextElementSibling,
           () => activeElement.parentElement.nextElementSibling,
+          () => getShadowRoot(getShadowRoot(activeElement)?.host)?.querySelector('#pub button'),
           () => dq('.reply-box:focus-within .reply-box-send'),
         ]
         const match = candidates.find(fn => fn() !== null)

registry/lib/components/utils/keymap/bindings.ts

@@ -1,6 +1,7 @@
 import { isTyping, matchUrlPattern } from '@/core/utils'
 import { mediaListUrls, watchlaterUrls } from '@/core/utils/urls'
 import { clickElement, changeVideoTime, showTip } from './actions'
+import { shadowDomObserver } from '@/core/shadow-root'
 
 export interface KeyBindingActionContext {
   binding: KeyBinding
@@ -29,7 +30,7 @@ export const loadKeyBindings = lodash.once((bindings: KeyBinding[]) => {
     enable: true,
     bindings,
   }
-  document.body.addEventListener('keydown', (e: KeyboardEvent & { [key: string]: boolean }) => {
+  const keyboardHandler = (e: KeyboardEvent & { [key: string]: boolean }) => {
     if (!config.enable) {
       return
     }
@@ -87,10 +88,15 @@ export const loadKeyBindings = lodash.once((bindings: KeyBinding[]) => {
 
       const actionSuccess = !lodash.isNil(actionResult)
       if (binding.action.prevent ?? actionSuccess) {
-        e.stopPropagation()
+        e.stopImmediatePropagation()
         e.preventDefault()
       }
     })
+  }
+  document.body.addEventListener('keydown', keyboardHandler, { capture: true })
+  shadowDomObserver.watchShadowDom({
+    added: shadowDom =>
+      shadowDom.shadowRoot.addEventListener('keydown', keyboardHandler, { capture: true }),
   })
   return config
 })