fix: only insert one comment box per post (#101)

DimensionDev · Nov 11, 2019 · 3f2309c · 3f2309c
1 parent 6d652ec
commit 3f2309c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 18 deletions.
diff --git a/src/social-network-provider/facebook.com/UI/collectPosts.tsx b/src/social-network-provider/facebook.com/UI/collectPosts.tsx
@@ -30,17 +30,15 @@ export function collectPostsFacebook(this: SocialNetworkUI) {
             const commentSelector = isMobileFacebook ? commentSelectorMobile : commentSelectorPC
 
             // ? inject comment text field
-            const commentBoxSelectorPC = root
-                .clone()
-                .querySelector<HTMLFormElement>('form form')
-                .enableSingleMode()
+            const commentBoxSelectorPC = root.clone().querySelectorAll<HTMLFormElement>('form form')
+
             const commentBoxSelectorMobile = root
                 .clone()
                 .map(x => x.parentElement)
-                .querySelector('textarea')
+                .querySelectorAll('textarea')
                 .map(x => x.parentElement)
                 .filter(x => x.innerHTML.indexOf('comment') !== -1)
-                .enableSingleMode()
+
             const commentBoxSelector = isMobileFacebook ? commentBoxSelectorMobile : commentBoxSelectorPC
 
             const info: PostInfo = getEmptyPostInfoByElement({

diff --git a/src/social-network-provider/facebook.com/ui-provider.ts b/src/social-network-provider/facebook.com/ui-provider.ts
@@ -59,12 +59,13 @@ export const facebookUISelf = defineSocialNetworkUI({
     injectCommentBox: injectCommentBoxDefaultFactory(async function onPasteToCommentBoxFacebook(
         encryptedComment,
         current,
+        realCurrent,
     ) {
         const fail = () => {
             prompt(geti18nString('comment_box__paste_failed'), encryptedComment)
         }
         if (isMobileFacebook) {
-            const root = current.commentBoxSelector!.evaluate()
+            const root = realCurrent || current.commentBoxSelector!.evaluate()[0]
             if (!root) return fail()
             const textarea = root.querySelector('textarea')
             if (!textarea) return fail()
@@ -74,7 +75,7 @@ export const facebookUISelf = defineSocialNetworkUI({
             await sleep(200)
             if (!root.innerText.includes(encryptedComment)) return fail()
         } else {
-            const root = current.rootNode
+            const root = realCurrent || current.rootNode
             if (!root) return fail()
             const input = root.querySelector('[contenteditable]')
             if (!input) return fail()

diff --git a/src/social-network/defaults/injectCommentBox.tsx b/src/social-network/defaults/injectCommentBox.tsx
@@ -8,8 +8,8 @@ import { renderInShadowRoot } from '../../utils/jss/renderInShadowRoot'
 import { dispatchCustomEvents, nop, selectElementContents, sleep } from '../../utils/utils'
 import { makeStyles } from '@material-ui/core'
 
-const defHandler = async (encryptedComment: string, current: PostInfo) => {
-    const root = current.rootNode
+const defHandler = async (encryptedComment: string, current: PostInfo, realCurrent: HTMLElement | null) => {
+    const root = realCurrent || current.rootNode
     /**
      * TODO:
      *  Yeah I see but I think root.querySelector('[contenteditable]')
@@ -29,15 +29,15 @@ export const injectCommentBoxDefaultFactory = function<T extends string>(
     additionPropsToCommentBox: (classes: Record<T, string>) => Partial<CommentBoxProps> = () => ({}),
     useCustomStyles: (props?: any) => Record<T, string> = makeStyles({}) as any,
 ) {
-    const CommentBoxUI = React.memo(function CommentBoxUI(current: PostInfo) {
+    const CommentBoxUI = React.memo(function CommentBoxUI(current: PostInfo & { realCurrent: HTMLElement | null }) {
         const payload = useValueRef(current.postPayload)
         const decrypted = useValueRef(current.decryptedPostContent)
         const styles = useCustomStyles()
         const props = additionPropsToCommentBox(styles)
         const onCallback = React.useCallback(
             async content => {
                 const encryptedComment = await Services.Crypto.encryptComment(payload!.iv, decrypted, content)
-                onPasteToCommentBox(encryptedComment, current).then()
+                onPasteToCommentBox(encryptedComment, current, current.realCurrent).then()
             },
             [current, decrypted, payload],
         )
@@ -47,15 +47,18 @@ export const injectCommentBoxDefaultFactory = function<T extends string>(
     })
     return (current: PostInfo) => {
         if (!current.commentBoxSelector) return nop
-        const commentBoxWatcher = new MutationObserverWatcher(
-            current.commentBoxSelector.clone().enableSingleMode(),
-            current.rootNode,
-        )
+        const commentBoxWatcher = new MutationObserverWatcher(current.commentBoxSelector.clone(), current.rootNode)
+            .useForeach((node, key, meta) =>
+                renderInShadowRoot(
+                    <CommentBoxUI {...{ ...current, realCurrent: meta.realCurrent }} />,
+                    meta.afterShadow,
+                ),
+            )
             .setDOMProxyOption({ afterShadowRootInit: { mode: 'closed' } })
             .startWatch({
                 childList: true,
                 subtree: true,
             })
-        return renderInShadowRoot(<CommentBoxUI {...current} />, commentBoxWatcher.firstDOMProxy.afterShadow)
+        return () => commentBoxWatcher.stopWatch()
     }
 }
diff --git a/src/social-network/ui.ts b/src/social-network/ui.ts
@@ -209,7 +209,7 @@ export type PostInfo = {
     readonly postContent: ValueRef<string>
     readonly postPayload: ValueRef<Payload | null>
     readonly commentsSelector?: LiveSelector<HTMLElement, false>
-    readonly commentBoxSelector?: LiveSelector<HTMLElement, true>
+    readonly commentBoxSelector?: LiveSelector<HTMLElement, false>
     readonly decryptedPostContent: ValueRef<string>
     readonly rootNode: HTMLElement
     readonly rootNodeProxy: DOMProxy