Merge pull request #51 from whale4113/fix/whale/locate-block

fix: doc is too large to scroll to completion

Author: whale4113

.changeset/eight-ears-develop.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': patch
+---
+
+fix: document is too large to scroll to completion

.changeset/gorgeous-parents-scream.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/common': patch
+---
+
+feat: `waitForFunction()` support async function

.changeset/pink-rivers-reply.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/lark': patch
+---
+
+fix: use api to locate blocks

apps/chrome-extension/src/scripts/download-lark-docx-as-markdown.ts

@@ -448,29 +448,6 @@ const prepare = async (): Promise<PrepareResult> => {
       })
     }
 
-    enum Direction {
-      Up,
-      Down,
-    }
-    let direction = Direction.Down
-    const calculateDirection = () => {
-      const scrollHeight = docx.container?.scrollHeight ?? 0
-      const clientHeight = docx.container?.clientHeight ?? 0
-
-      if (
-        direction === Direction.Down &&
-        top > scrollHeight + 2 * clientHeight
-      ) {
-        return Direction.Up
-      }
-
-      if (direction === Direction.Up && top < 0) {
-        return Direction.Down
-      }
-
-      return direction
-    }
-
     let top = 0
 
     docx.scrollTo({
@@ -491,8 +468,6 @@ const prepare = async (): Promise<PrepareResult> => {
       },
     })
 
-    const { disconnect } = docx.observeScrollTopOfBlock()
-
     while (!checkIsReady() && tryTimes <= maxTryTimes) {
       docx.scrollTo({
         top,
@@ -501,20 +476,12 @@ const prepare = async (): Promise<PrepareResult> => {
 
       await waitFor(0.4 * Second)
 
-      direction = calculateDirection()
-
       tryTimes++
 
-      const sign = direction === Direction.Down ? 1 : -1
-      const containerClientHeight =
-        docx.container?.clientHeight ?? 4 * OneHundred
-
-      top += sign * containerClientHeight
+      top = docx.container?.scrollHeight ?? 0
     }
 
     Toast.remove(TranslationKey.SCROLL_DOCUMENT)
-
-    disconnect()
   }
 
   return {

packages/common/src/dom.ts

@@ -11,7 +11,7 @@ export const waitForSelector = async (
 ) => waitForFunction(() => document.querySelector(selector) !== null, options)
 
 export const waitForFunction = async (
-  func: () => boolean,
+  func: () => boolean | Promise<boolean>,
   options: {
     /**
      * @default 400
@@ -27,7 +27,9 @@ export const waitForFunction = async (
 
   const isTimeout = () => timeoutId === null
 
-  while (!func() && !isTimeout()) {
+  const _func = () => Promise.resolve(func()).catch(() => false)
+
+  while (!(await _func()) && !isTimeout()) {
     await waitFor(0.1 * Second)
   }
 

packages/lark/src/docx.ts

@@ -731,19 +731,6 @@ type Mutate<T extends Block> = T extends PageBlock
                         : T extends IframeBlock
                           ? mdast.Html
                           : null
-interface ScrollToBlock {
-  (
-    blockId: number,
-    options?: {
-      /**
-       * @default 0
-       */
-      offset?:
-        | number
-        | ((options: { container: HTMLDivElement | null }) => number)
-    },
-  ): void
-}
 
 interface TransformerOptions {
   /**
@@ -757,9 +744,9 @@ interface TransformerOptions {
    */
   file?: boolean
   /**
-   * Scroll document to specific block.
+   * Locate block with record id.
    */
-  scrollToBlock?: ScrollToBlock
+  locateBlockWithRecordId?: (recordId: string) => Promise<boolean>
 }
 
 interface TransformResult<T> {
@@ -1003,28 +990,18 @@ export class Transformer {
             data: {
               fetchBlob: async () => {
                 try {
-                  this.options.scrollToBlock?.(whiteboard.id)
-                } catch (error) {
-                  console.error(error)
-                }
+                  const {
+                    locateBlockWithRecordId = () => Promise.resolve(false),
+                  } = this.options
 
-                let offset = 0
-                try {
                   await waitForFunction(
-                    () => {
-                      const exists = whiteboard.whiteboardBlock !== undefined
-
-                      if (!exists) {
-                        this.options.scrollToBlock?.(whiteboard.id, {
-                          offset: ({ container }) =>
-                            (offset += container?.clientHeight ?? OneHundred),
-                        })
-                      }
-
-                      return exists
-                    },
+                    () =>
+                      locateBlockWithRecordId(whiteboard.record?.id ?? '').then(
+                        isSuccess =>
+                          isSuccess && whiteboard.whiteboardBlock !== undefined,
+                      ),
                     {
-                      timeout: 10 * Second,
+                      timeout: 3 * Second,
                     },
                   )
                 } catch (error) {
@@ -1144,8 +1121,6 @@ export class Transformer {
 }
 
 export class Docx {
-  private blockIdToScrollTop: Map<string, number> = new Map()
-
   static stringify(root: mdast.Root) {
     return toMarkdown(root, {
       extensions: [
@@ -1200,67 +1175,20 @@ export class Docx {
       this.rootBlock.children.every(block => {
         const prerequisite = block.snapshot.type !== 'pending'
 
-        const isWhiteboard = (block: Blocks): block is Whiteboard =>
+        const isWhiteboard = (block: Blocks): boolean =>
           block.type === BlockType.WHITEBOARD ||
           (block.type === BlockType.FALLBACK &&
             block.snapshot.type === BlockType.WHITEBOARD)
 
         if (checkWhiteboard && isWhiteboard(block)) {
-          return (
-            prerequisite &&
-            this.blockIdToScrollTop.get(String(block.id)) !== undefined
-          )
+          return prerequisite && block.type !== BlockType.FALLBACK
         }
 
         return prerequisite
       })
     )
   }
 
-  observeScrollTopOfBlock() {
-    let observer: null | MutationObserver = new MutationObserver(mutations => {
-      const container = this.container
-      if (!container) {
-        return
-      }
-
-      for (const mutation of mutations) {
-        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-          for (const node of mutation.addedNodes) {
-            if (node instanceof Element) {
-              if (
-                node.getAttribute('data-block-type') === BlockType.WHITEBOARD
-              ) {
-                const id = node.getAttribute('data-block-id')
-                if (id) {
-                  this.blockIdToScrollTop.set(id, container.scrollTop)
-                }
-              }
-            }
-          }
-        }
-      }
-    })
-
-    const wrapperSelector =
-      '.zone-container > .page-block-children > .root-render-unit-container > .render-unit-wrapper'
-    const wrapper = this.container?.querySelector(wrapperSelector)
-
-    if (wrapper) {
-      observer?.observe(wrapper, {
-        childList: true,
-      })
-    }
-
-    return {
-      disconnect: () => {
-        observer?.disconnect()
-
-        observer = null
-      },
-    }
-  }
-
   scrollTo(options: ScrollToOptions) {
     const container = this.container
     if (container) {
@@ -1285,29 +1213,24 @@ export class Docx {
       return { root: { type: 'root', children: [] }, images: [], files: [] }
     }
 
-    const scrollToBlock: ScrollToBlock = (
-      blockId: number,
-      options = {},
-    ): void => {
-      const cacheScrollTop = this.blockIdToScrollTop.get(String(blockId))
-      if (cacheScrollTop === undefined) {
-        throw new Error(`Block ${blockId} no cache scroll top.`)
-      }
+    const locateBlockWithRecordId = async (
+      recordId: string,
+    ): Promise<boolean> => {
+      try {
+        if (!PageMain) {
+          return false
+        }
 
-      const { offset = 0 } = options
-      const normalizedOffset =
-        typeof offset === 'number'
-          ? offset
-          : offset({ container: this.container })
+        return await PageMain.locateBlockWithRecordIdImpl(recordId)
+      } catch (error) {
+        console.error(error)
+      }
 
-      this.scrollTo({
-        top: cacheScrollTop + normalizedOffset,
-        behavior: 'instant',
-      })
+      return false
     }
 
     const transformer = new Transformer({
-      scrollToBlock,
+      locateBlockWithRecordId,
       ...transformerOptions,
     })
 

packages/lark/src/env.ts

@@ -47,6 +47,11 @@ export interface PageMain {
     }
     rootBlockModel: import('./docx').PageBlock
   }
+
+  locateBlockWithRecordIdImpl(
+    recordId: string,
+    options?: Record<string, unknown>,
+  ): Promise<boolean>
 }
 
 export const PageMain = window.PageMain