@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/tiptap/notion-like/notion-like-editor.tsx

@@ -49,7 +49,7 @@ import "../node/paragraph-node/paragraph-node.scss"
 import { EmojiDropdownMenu } from "../ui/emoji-dropdown-menu/index.tsx"
 import { MentionDropdownMenu } from "../ui/mention-dropdown-menu/index.tsx"
 import { ReferenceDropdownMenu } from "../ui/reference-dropdown-menu/index.tsx"
-import { SlashDropdownMenu } from "../ui/slash-dropdown-menu/index.tsx"
+import { SlashDropdownMenu, SLASH_NON_AI_ITEMS } from "../ui/slash-dropdown-menu/index.tsx"
 import { DocReferenceInteraction } from "../ui/doc-reference-interaction/doc-reference-interaction.tsx"
 import { DragContextMenu } from "../ui/drag-context-menu/index.tsx"
 import { AiMenu } from "../ui/ai-menu/index.tsx"
@@ -111,10 +111,48 @@ export interface NotionDocEditorProps {
 
 const KbIdContext = createContext<string | undefined>(undefined)
 
+/**
+ * content prop → 编辑器 HTML 的唯一解析入口（getInitialContent 与内容同步
+ * effect 共用，审计 🔵：此前两处逐字重复维护）。text/string 形态按纯文本
+ * 转义后包 <p>，避免未转义插值拼接 HTML 的坏味道。
+ */
+function escapeHtmlText(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+}
+
+export function resolveContentHtml(
+  content: NotionDocEditorProps["content"]
+): string {
+  if (!content) return "<p></p>"
+  if (
+    typeof content === "object" &&
+    "html" in content &&
+    typeof content.html === "string"
+  ) {
+    return content.html || "<p></p>"
+  }
+  if (
+    typeof content === "object" &&
+    "text" in content &&
+    typeof content.text === "string"
+  ) {
+    return `<p>${escapeHtmlText(content.text)}</p>`
+  }
+  if (typeof content === "string") {
+    return `<p>${escapeHtmlText(content)}</p>`
+  }
+  return "<p></p>"
+}
+
 /**
  * Loading spinner component shown while connecting to the notion server
  */
-export function LoadingSpinner({ text = "Connecting..." }: { text?: string }) {
+export function LoadingSpinner({ text }: { text?: string }) {
+  // 默认文案走 i18n（审计 🟡：此前硬编码英文 "Connecting..."）
+  const resolvedText = text ?? m.editor_loading()
   return (
     <div className="spinner-container">
       <div className="spinner-content">
@@ -122,7 +160,7 @@ export function LoadingSpinner({ text = "Connecting..." }: { text?: string }) {
           <circle cx="12" cy="12" r="10"></circle>
           <path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-        <div className="spinner-loading-text">{text}</div>
+        <div className="spinner-loading-text">{resolvedText}</div>
       </div>
     </div>
   )
@@ -134,12 +172,11 @@ export function LoadingSpinner({ text = "Connecting..." }: { text?: string }) {
  */
 function DocReferenceOverlay({
   editor,
-  containerRef,
+  containerEl,
 }: {
   editor: Editor
-  containerRef: React.RefObject<HTMLElement | null>
+  containerEl: HTMLElement | null
 }) {
-  const containerEl = containerRef.current
   if (!containerEl) return null
   return <DocReferenceInteraction editorRoot={containerEl} />
 }
@@ -205,11 +242,11 @@ export function EditorContentArea({ hideDragHandle, hideInsertButton, hideAi }:
         <EmojiDropdownMenu />
         <MentionDropdownMenu />
         <ReferenceDropdownMenu currentKbId={kbId} />
-        <SlashDropdownMenu config={hideAi ? { enabledItems: ["text", "heading_1", "heading_2", "heading_3", "bullet_list", "ordered_list", "task_list", "quote", "code_block", "mindmap", "mention", "emoji", "table", "divider", "toc"] } : undefined} />
+        <SlashDropdownMenu config={hideAi ? { enabledItems: SLASH_NON_AI_ITEMS } : undefined} />
         <NotionToolbarFloating hideAi={hideAi} />
         {createPortal(<MobileToolbar />, document.body)}
       </EditorContent>
-      <DocReferenceOverlay editor={editor} containerRef={{ current: containerEl }} />
+      <DocReferenceOverlay editor={editor} containerEl={containerEl} />
     </>
   )
 }
@@ -242,27 +279,10 @@ function NotionDocEditorContent({
   const onChangeRef = useRef(onChange)
   onChangeRef.current = onChange
 
-  const getInitialContent = useCallback(() => {
-    if (!content) return "<p></p>"
-    if (
-      typeof content === "object" &&
-      "html" in content &&
-      typeof content.html === "string"
-    ) {
-      return content.html || "<p></p>"
-    }
-    if (
-      typeof content === "object" &&
-      "text" in content &&
-      typeof content.text === "string"
-    ) {
-      return `<p>${content.text}</p>`
-    }
-    if (typeof content === "string") {
-      return `<p>${content}</p>`
-    }
-    return "<p></p>"
-  }, [content])
+  const getInitialContent = useCallback(
+    () => resolveContentHtml(content),
+    [content]
+  )
 
   const debouncedSave = useDebouncedCallback(
     (editor: Editor) => {
@@ -305,44 +325,27 @@ function NotionDocEditorContent({
      // 重建（规格 §6 水合链路硬约束）
      if (collab) return
      if (!editor) return
-     let newHtml = ""
-     if (content) {
-      if (
-        typeof content === "object" &&
-        "html" in content &&
-        typeof content.html === "string"
-      ) {
-        newHtml = content.html || "<p></p>"
-      } else if (
-         typeof content === "object" &&
-         "text" in content &&
-         typeof content.text === "string"
-       ) {
-         newHtml = `<p>${content.text}</p>`
-       } else if (typeof content === "string") {
-         newHtml = `<p>${content}</p>`
-       }
-     }
+     const newHtml = content ? resolveContentHtml(content) : ""
      const currentHtml = editor.getHTML() || ""
      const isEmpty = (!newHtml || newHtml === "" || newHtml === "<p></p>" || newHtml === "<p><br></p>")
      const currentIsEmpty = (!currentHtml || currentHtml === "" || currentHtml === "<p></p>" || currentHtml === "<p><br></p>")
-     
-      if (isEmpty && currentIsEmpty) {
-        return
-      }
-      
-      // Don't replace existing content with empty content (stale prop during HMR/re-render)
-      if (isEmpty && !currentIsEmpty) {
-        return
-      }
-      
-      if (content !== undefined && currentHtml !== newHtml) {
-       requestAnimationFrame(() => {
-         if (editor && !editor.isDestroyed) {
-           editor.commands.setContent(newHtml, { emitUpdate: false })
-         }
-       })
+
+     if (isEmpty && currentIsEmpty) {
+       return
+     }
+
+     // Don't replace existing content with empty content (stale prop during HMR/re-render)
+     if (isEmpty && !currentIsEmpty) {
+       return
      }
+
+     if (content !== undefined && currentHtml !== newHtml) {
+      requestAnimationFrame(() => {
+        if (editor && !editor.isDestroyed) {
+          editor.commands.setContent(newHtml, { emitUpdate: false })
+        }
+      })
+    }
    }, [content, editor, collab])
 
   useEffect(() => {

package/src/components/tiptap/ui/ai-menu/ai-menu-hooks.ts

@@ -129,6 +129,7 @@ export function useAiContentTracker({
   const fallbackAnchorRef = useRef<HTMLElement | null>(null)
   const streamingAnchorRef = useRef<HTMLElement | null>(null)
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
+  const observedElementRef = useRef<HTMLElement | null>(null)
   const rafIdRef = useRef<number | null>(null)
 
   useEffect(() => {
@@ -176,11 +177,22 @@ export function useAiContentTracker({
 
       scheduleStreamingUpdate(lastAiElement)
 
+      // 流式生成会替换 DOM 节点：观察目标变化时重建 observer，
+      // 否则回调闭包滞留已分离元素、resize 取到全 0 rect（anchor 错位）
+      if (
+        resizeObserverRef.current &&
+        observedElementRef.current !== lastAiElement
+      ) {
+        resizeObserverRef.current.disconnect()
+        resizeObserverRef.current = null
+        observedElementRef.current = null
+      }
       if (!resizeObserverRef.current) {
         resizeObserverRef.current = new ResizeObserver(() =>
           scheduleStreamingUpdate(lastAiElement)
         )
         resizeObserverRef.current.observe(lastAiElement)
+        observedElementRef.current = lastAiElement
       }
     }
 

package/src/components/tiptap/ui/ai-menu/ai-menu-items/ai-menu-items.tsx

@@ -52,7 +52,49 @@ import { TextReduceIcon } from "../../../icons/text-reduce-icon.tsx"
 import { CompleteSentenceIcon } from "../../../icons/complete-sentence-icon.tsx"
 import { SmileAiIcon } from "../../../icons/smile-ai-icon.tsx"
 import { CheckAiIcon } from "../../../icons/check-ai-icon.tsx"
-import { m } from "@/paraglide/messages.js";
+import { m } from "@/paraglide/messages.js"
+
+/** 可执行 AI 动作对应的 TipTap 命令名（同签名：(options: TextOptions) => 链） */
+type ExecutableAiCommand =
+  | "aiFixSpellingAndGrammar"
+  | "aiExtend"
+  | "aiShorten"
+  | "aiSimplify"
+  | "aiRephrase"
+  | "aiEmojify"
+  | "aiComplete"
+  | "aiSummarize"
+
+/**
+ * 审计 🔵：8 个 executable 动作的 onSelect 是同一 8 行模板（getContextAndInsertAt →
+ * 组装 options → 选中态塞 text → 链式命令），仅命令名不同——收敛为单一工厂。
+ */
+function makeExecutableOnSelect(command: ExecutableAiCommand) {
+  return ({
+    editor,
+    options,
+  }: {
+    editor: Editor | null
+    options?: TextOptions
+  }) => {
+    if (!editor) return
+
+    const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
+    const newOptions: TextOptions = {
+      ...options,
+      insertAt,
+      regenerate: !isSelection,
+    }
+
+    if (isSelection) {
+      newOptions.text = context
+    }
+
+    const chain = editor.chain()
+    ;(chain[command] as (opts: TextOptions) => unknown)(newOptions)
+    chain.run()
+  }
+}
 
 function initializeEditorMenuActions(): Record<
   MenuActionIdentifier,
@@ -73,176 +115,56 @@ function initializeEditorMenuActions(): Record<
       icon: <CheckAiIcon className="tiptap-button-icon" />,
       label: m['editor_fix-spelling-grammar'](),
       value: "aiFixSpellingAndGrammar",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiFixSpellingAndGrammar(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiFixSpellingAndGrammar"),
     },
     aiExtend: {
       type: "executable",
       icon: <TextExtendIcon className="tiptap-button-icon" />,
       label: m.editor_expand(),
       value: "aiExtend",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiExtend(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiExtend"),
     },
     aiShorten: {
       type: "executable",
       icon: <TextReduceIcon className="tiptap-button-icon" />,
       label: m.editor_abbreviate(),
       value: "aiShorten",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiShorten(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiShorten"),
     },
     simplifyLanguage: {
       type: "executable",
       icon: <Simplify2Icon className="tiptap-button-icon" />,
       label: m['editor_simplify-language'](),
       value: "simplifyLanguage",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiSimplify(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiSimplify"),
     },
     improveWriting: {
       type: "executable",
       icon: <SmileAiIcon className="tiptap-button-icon" />,
       label: m['editor_improve-writing'](),
       value: "improveWriting",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiRephrase(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiRephrase"),
     },
     emojify: {
       type: "executable",
       icon: <SmileAiIcon className="tiptap-button-icon" />,
       label: m['editor_add-emoji'](),
       value: "emojify",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiEmojify(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiEmojify"),
     },
     continueWriting: {
       type: "executable",
       icon: <CompleteSentenceIcon className="tiptap-button-icon" />,
       label: m['editor_continue-writing'](),
       value: "continueWriting",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiComplete(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiComplete"),
     },
     summarize: {
       type: "executable",
       icon: <SummarizeTextIcon className="tiptap-button-icon" />,
       label: m['editor_add-summary'](),
       value: "summarize",
-      onSelect: ({ editor, options }) => {
-        if (!editor) return
-
-        const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
-        const newOptions: TextOptions = {
-          ...options,
-          insertAt,
-          regenerate: !isSelection,
-        }
-
-        if (isSelection) {
-          newOptions.text = context
-        }
-
-        editor.chain().aiSummarize(newOptions).run()
-      },
+      onSelect: makeExecutableOnSelect("aiSummarize"),
     },
     translateTo: {
       type: "nested",

package/src/components/tiptap/ui/ai-menu/ai-menu-utils.ts

@@ -141,7 +141,7 @@ export function getContextAndInsertAt(editor: Editor) {
   let context: string | undefined = ""
   let insertAt = { from: 0, to: 0 }
   let isSelection = true
-  const generatedWith = editor.storage.ai.generatedWith
+  const generatedWith = editor.storage.ai?.generatedWith
 
   if (generatedWith && generatedWith.range) {
     context = editor.storage.ai.response

package/src/components/tiptap/ui/ai-menu/ai-menu.tsx

@@ -112,23 +112,28 @@ export function AiMenuContent({
     forwardedProps: { model: selectedModel, promptKey: 'tiptap.menu.generate' },
     onChunk: (chunk) => {
       if (!editor) return
+      // AI 扩展未装配时 storage.ai 为 undefined（防御；写入侧不能用可选链）
+      const aiStorage = editor.storage.ai
+      if (!aiStorage) return
       if (chunk.type === "TEXT_MESSAGE_CONTENT" && chunk.delta) {
-        editor.storage.ai.state = "streaming"
-        const insertPos = editor.storage.ai.insertPos
+        aiStorage.state = "streaming"
+        const insertPos = aiStorage.insertPos
         if (insertPos >= 0) {
           const newPos = insertDelta(editor, insertPos, chunk.delta, "aiSuggestion")
-          editor.storage.ai.insertPos = newPos
-          editor.storage.ai.generatedWith = { range: { from: insertPos, to: newPos } }
+          aiStorage.insertPos = newPos
+          aiStorage.generatedWith = { range: { from: insertPos, to: newPos } }
         }
       }
     },
     onFinish: () => {
       if (!editor) return
-      editor.storage.ai.state = "done"
+      const aiStorage = editor.storage.ai
+      if (aiStorage) aiStorage.state = "done"
     },
     onError: (error) => {
       if (!editor) return
-      editor.storage.ai.state = "idle"
+      const aiStorage = editor.storage.ai
+      if (aiStorage) aiStorage.state = "idle"
       const errorMsg = error?.message || ""
       if (errorMsg.includes("image") || errorMsg.includes("vision")) {
         toast.error(m['editor_ai-image-not-supported']())
@@ -156,6 +161,8 @@ export function AiMenuContent({
   const handlePromptSubmit = useCallback(
     (userPrompt: string) => {
       if (!editor || !userPrompt.trim()) return
+      const aiStorage = editor.storage.ai
+      if (!aiStorage) return
       lastPromptRef.current = userPrompt
 
       const { context } = getContextAndInsertAt(editor)
@@ -190,11 +197,11 @@ export function AiMenuContent({
         editor.chain().focus().deleteSelection().run()
       }
       const insertPos = editor.state.selection.from
-      editor.storage.ai.insertPos = insertPos
-      editor.storage.ai.format = "rich-text"
-      editor.storage.ai.state = "loading"
-      editor.storage.ai.generatedWith = { range: { from: insertPos, to: insertPos } }
-      editor.storage.ai.response = ""
+      aiStorage.insertPos = insertPos
+      aiStorage.format = "rich-text"
+      aiStorage.state = "loading"
+      aiStorage.generatedWith = { range: { from: insertPos, to: insertPos } }
+      aiStorage.response = ""
 
       sendMessage(promptWithContext)
     },
@@ -210,7 +217,7 @@ export function AiMenuContent({
 
   const handleRegenerate = useCallback(() => {
     if (!editor || !lastPromptRef.current) return
-    const { range } = editor.storage.ai.generatedWith || {}
+    const { range } = editor.storage.ai?.generatedWith || {}
     if (range) {
       editor.chain().focus().deleteRange({ from: range.from, to: range.to }).run()
     }
@@ -234,28 +241,34 @@ export function AiMenuContent({
   const handleOnReject = useCallback(() => {
     if (!editor) return
     handleStop()
-    const { range } = editor.storage.ai.generatedWith || {}
+    const { range } = editor.storage.ai?.generatedWith || {}
     if (range && range.from !== range.to) {
       editor.chain().deleteRange({ from: range.from, to: range.to }).run()
     }
-    editor.storage.ai.state = "idle"
-    editor.storage.ai.generatedWith = null
-    editor.storage.ai.response = ""
+    const aiStorage = editor.storage.ai
+    if (aiStorage) {
+      aiStorage.state = "idle"
+      aiStorage.generatedWith = null
+      aiStorage.response = ""
+    }
     closeAiMenu()
   }, [closeAiMenu, editor, handleStop])
 
   const handleOnAccept = useCallback(() => {
     if (!editor) return
-    const { range } = editor.storage.ai.generatedWith || {}
+    const { range } = editor.storage.ai?.generatedWith || {}
     if (range && range.from !== range.to) {
       editor.chain()
         .setTextSelection({ from: range.from, to: range.to })
         .unsetMark("aiSuggestion")
         .run()
     }
-    editor.storage.ai.state = "idle"
-    editor.storage.ai.generatedWith = null
-    editor.storage.ai.response = ""
+    const aiStorage = editor.storage.ai
+    if (aiStorage) {
+      aiStorage.state = "idle"
+      aiStorage.generatedWith = null
+      aiStorage.response = ""
+    }
     closeAiMenu()
   }, [closeAiMenu, editor])
 
@@ -263,13 +276,16 @@ export function AiMenuContent({
     if (!editor) return
     if (isAiLoading) {
       handleStop()
-      const { range } = editor.storage.ai.generatedWith || {}
+      const { range } = editor.storage.ai?.generatedWith || {}
       if (range && range.from !== range.to) {
         editor.chain().deleteRange({ from: range.from, to: range.to }).run()
       }
-      editor.storage.ai.state = "idle"
-      editor.storage.ai.generatedWith = null
-      editor.storage.ai.response = ""
+      const aiStorage = editor.storage.ai
+      if (aiStorage) {
+        aiStorage.state = "idle"
+        aiStorage.generatedWith = null
+        aiStorage.response = ""
+      }
     } else {
       handleOnAccept()
     }
@@ -332,7 +348,8 @@ export function AiMenuContent({
     } else if (!aiGenerationActive && state.isOpen) {
       closeAiMenu()
     }
-  }, [aiGenerationActive, state.isOpen, updateState, closeAiMenu, editor, setFallbackAnchor])
+    // 审计 ⚪：effect 读取了 state.fallbackAnchor.element，列入依赖防闭包旧值
+  }, [aiGenerationActive, state.isOpen, state.fallbackAnchor.element, updateState, closeAiMenu, editor, setFallbackAnchor])
 
   const smoothFocusAndScroll = (element: HTMLElement | null) => {
     element?.focus()
@@ -425,13 +442,16 @@ export function AiMenuProgress({ editor, stop }: { editor: Editor; stop: () => v
     if (!editor) return
 
     stop()
-    const { range } = editor.storage.ai.generatedWith || {}
+    const { range } = editor.storage.ai?.generatedWith || {}
     if (range) {
       editor.chain().focus().deleteRange({ from: range.from, to: range.to }).run()
     }
-    editor.storage.ai.state = "idle"
-    editor.storage.ai.generatedWith = null
-    editor.storage.ai.response = ""
+    const aiStorage = editor.storage.ai
+    if (aiStorage) {
+      aiStorage.state = "idle"
+      aiStorage.generatedWith = null
+      aiStorage.response = ""
+    }
     reset()
     editor.commands.resetUiState()
   }, [editor, reset, stop])
@@ -447,7 +467,7 @@ export function AiMenuProgress({ editor, stop }: { editor: Editor; stop: () => v
         </div>
       </div>
 
-      <Button variant="ghost" title={m.editor_stop()} onClick={handleStop}>
+      <Button variant="ghost" tooltip={m.editor_stop()} onClick={handleStop}>
         <StopCircle2Icon className="tiptap-button-icon" />
       </Button>
     </div>

package/src/components/tiptap/ui/copy-anchor-link-button/use-scroll-to-hash.ts

@@ -21,6 +21,9 @@ import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
 import { getEditorExtension } from "../../lib/advanced-utils.ts"
 import { selectNodeAndHideFloating } from "../../hooks/use-floating-toolbar-visibility.ts"
 
+/** 协作同步/页面事件后的重试滚动延迟（审计 🔵：原 500ms 字面量重复 4 处） */
+const HASH_SCROLL_RETRY_DELAY_MS = 500
+
 export interface UseScrollToHashConfig {
   /**
    * The Tiptap editor instance.
@@ -124,20 +127,20 @@ export function useScrollToHash(config: UseScrollToHashConfig = {}) {
     )?.options?.provider
 
     if (provider?.on) {
-      const syncHandler = () => handleScroll(500)
+      const syncHandler = () => handleScroll(HASH_SCROLL_RETRY_DELAY_MS)
       provider.on("synced", syncHandler)
 
       return () => {
         provider.off?.("synced", syncHandler)
       }
     } else {
-      handleScroll(500)
+      handleScroll(HASH_SCROLL_RETRY_DELAY_MS)
     }
   }, [editor, handleScroll])
 
   useEffect(() => {
     const immediateScroll = () => handleScroll()
-    const delayedScroll = () => handleScroll(500)
+    const delayedScroll = () => handleScroll(HASH_SCROLL_RETRY_DELAY_MS)
 
     window.addEventListener("hashchange", immediateScroll)
     window.addEventListener("pageshow", delayedScroll)