@liveblocks/react-tiptap 2.16.0-toolbars5 → 2.16.1-ai

package/dist/ai/AiToolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiToolbar.mjs","sources":["../../src/ai/AiToolbar.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type DetectOverflowOptions,\n  hide,\n  type Middleware,\n  offset,\n  useFloating,\n  type UseFloatingOptions,\n} from \"@floating-ui/react-dom\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Button,\n  CheckIcon,\n  CrossIcon,\n  EditIcon,\n  LengthenIcon,\n  QuestionMarkIcon,\n  SendIcon,\n  ShortcutTooltip,\n  ShortenIcon,\n  SparklesIcon,\n  TooltipProvider,\n  UndoIcon,\n  useRefs,\n} from \"@liveblocks/react-ui/_private\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport { Command, useCommandState } from \"cmdk\";\nimport type {\n  ComponentProps,\n  ComponentType,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport { EditorProvider, useCurrentEditor } from \"../context\";\nimport type {\n  AiCommands,\n  AiExtensionStorage,\n  AiToolbarState,\n  ChainedAiCommands,\n  FloatingPosition,\n} from \"../types\";\nimport { getDomRangeFromSelection } from \"../utils\";\nimport { DEFAULT_STATE } from \"./AiExtension\";\n\nexport const AI_TOOLBAR_COLLISION_PADDING = 10;\n\nexport interface AiToolbarProps\n  extends Omit<ComponentProps<\"div\">, \"value\" | \"defaultValue\"> {\n  editor: Editor | null;\n  position?: FloatingPosition;\n  offset?: number;\n  suggestions?: ReactNode | ComponentType<PropsWithChildren>;\n}\n\ninterface AiToolbarDropdownGroupProps extends ComponentProps<\"div\"> {\n  label: string;\n}\n\ninterface AiToolbarDropdownItemProps\n  extends ComponentProps<typeof Command.Item> {\n  icon?: ReactNode;\n}\n\ntype AiToolbarSuggestionsGroupProps = AiToolbarDropdownGroupProps;\n\ninterface AiToolbarSuggestionProps extends ComponentProps<\"div\"> {\n  prompt?: string;\n  icon?: ReactNode;\n}\n\ninterface AiToolbarContext {\n  state: AiToolbarState;\n  toolbarRef: RefObject<HTMLDivElement>;\n  dropdownRef: RefObject<HTMLDivElement>;\n  isDropdownHidden: boolean;\n}\n\nconst AiToolbarContext = createContext<AiToolbarContext | null>(null);\n\nfunction useAiToolbarContext() {\n  const context = useContext(AiToolbarContext);\n\n  if (!context) {\n    throw new Error(\"useAiToolbarContext must be used within an AiToolbar\");\n  }\n\n  return context;\n}\n\n/**\n * A custom Floating UI middleware to position/scale the toolbar:\n * - Vertically: relative to the reference (e.g. selection)\n * - Horizontally: relative to the editor\n * - Width: relative to the editor\n */\nfunction tiptapFloating(editor: Editor | null): Middleware {\n  return {\n    name: \"tiptap\",\n    options: editor,\n    fn({ elements }) {\n      if (!editor) {\n        return {};\n      }\n\n      const editorRect = editor.view.dom.getBoundingClientRect();\n\n      elements.floating.style.setProperty(\n        \"--lb-tiptap-editor-width\",\n        `${editorRect.width}px`\n      );\n      elements.floating.style.setProperty(\n        \"--lb-tiptap-editor-height\",\n        `${editorRect.height}px`\n      );\n\n      return {\n        x: editorRect.x,\n      };\n    },\n  };\n}\n\nconst AiToolbarDropdownGroup = forwardRef<\n  HTMLDivElement,\n  AiToolbarDropdownGroupProps\n>(({ children, label, ...props }, forwardedRef) => {\n  return (\n    <Command.Group\n      heading={<span className=\"lb-dropdown-label\">{label}</span>}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Command.Group>\n  );\n});\n\nconst AiToolbarSuggestionsGroup = forwardRef<\n  HTMLDivElement,\n  AiToolbarSuggestionsGroupProps\n>((props, forwardedRef) => {\n  return <AiToolbarDropdownGroup ref={forwardedRef} {...props} />;\n});\n\nconst AiToolbarDropdownItem = forwardRef<\n  HTMLDivElement,\n  AiToolbarDropdownItemProps\n>(({ children, onSelect, icon, ...props }, forwardedRef) => {\n  return (\n    <Command.Item\n      className=\"lb-dropdown-item\"\n      onSelect={onSelect}\n      {...props}\n      ref={forwardedRef}\n    >\n      {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n      {children ? (\n        <span className=\"lb-dropdown-item-label\">{children}</span>\n      ) : null}\n    </Command.Item>\n  );\n});\n\nconst AiToolbarSuggestion = forwardRef<\n  HTMLDivElement,\n  AiToolbarSuggestionProps\n>(({ prompt: manualPrompt, ...props }, forwardedRef) => {\n  const editor = useCurrentEditor(\"Suggestion\", \"AiToolbar\");\n\n  const handleSelect = useCallback(\n    (prompt: string) => {\n      (editor.commands as unknown as AiCommands).$startAiToolbarThinking(\n        manualPrompt ?? prompt\n      );\n    },\n    [editor, manualPrompt]\n  );\n\n  return (\n    <AiToolbarDropdownItem\n      {...props}\n      onSelect={handleSelect}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction AiToolbarReviewingSuggestions() {\n  const editor = useCurrentEditor(\"ReviewingSuggestions\", \"AiToolbar\");\n  const { state } = useAiToolbarContext();\n  const { prompt } = state as Extract<AiToolbarState, { phase: \"reviewing\" }>;\n\n  const handleRetry = useCallback(() => {\n    (editor.commands as unknown as AiCommands).$startAiToolbarThinking(prompt);\n  }, [editor, prompt]);\n\n  const handleDiscard = useCallback(() => {\n    (editor.commands as unknown as AiCommands).$closeAiToolbar();\n  }, [editor]);\n\n  const handleAccept = useCallback(() => {\n    (editor.commands as unknown as AiCommands).$acceptAiToolbarOutput();\n  }, [editor]);\n\n  return (\n    <>\n      <AiToolbarDropdownItem icon={<CheckIcon />} onSelect={handleAccept}>\n        {/* TODO: Add logic */}\n        Replace selection\n      </AiToolbarDropdownItem>\n      <AiToolbarDropdownItem icon={<CheckIcon />}>\n        {/* TODO: Add logic */}\n        Insert below\n      </AiToolbarDropdownItem>\n      <AiToolbarDropdownItem icon={<UndoIcon />} onSelect={handleRetry}>\n        Try again\n      </AiToolbarDropdownItem>\n      <AiToolbarDropdownItem icon={<CrossIcon />} onSelect={handleDiscard}>\n        Discard\n      </AiToolbarDropdownItem>\n    </>\n  );\n}\n\nfunction AiToolbarCustomPromptContent() {\n  const editor = useCurrentEditor(\"CustomPromptContent\", \"AiToolbar\");\n  const aiName = (editor.storage.liveblocksAi as AiExtensionStorage).name;\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const { state, dropdownRef, isDropdownHidden } = useAiToolbarContext();\n  const { customPrompt } = state as Exclude<\n    AiToolbarState,\n    { phase: \"closed\" }\n  >;\n  const isCustomPromptEmpty = useMemo(\n    () => customPrompt.trim() === \"\",\n    [customPrompt]\n  );\n\n  useLayoutEffect(\n    () => {\n      setTimeout(() => {\n        const textArea = textAreaRef.current;\n\n        if (!textArea) {\n          return;\n        }\n\n        textArea.focus();\n        textArea.setSelectionRange(\n          textArea.value.length,\n          textArea.value.length\n        );\n      }, 0);\n    },\n    [] // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const handlePromptKeyDown = (\n    event: ReactKeyboardEvent<HTMLTextAreaElement>\n  ) => {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (event.shiftKey) {\n        // If the shift key is pressed, add a new line\n        (editor.commands as unknown as AiCommands)._updateAiToolbarCustomPrompt(\n          (customPrompt) => customPrompt + \"\\n\"\n        );\n      } else {\n        const selectedDropdownItem = dropdownRef.current?.querySelector(\n          \"[role='option'][data-selected='true']\"\n        ) as HTMLElement | null;\n\n        if (!isDropdownHidden && selectedDropdownItem) {\n          // If there's a selected dropdown item, select it\n          selectedDropdownItem.click();\n        } else if (!isCustomPromptEmpty) {\n          // Otherwise, submit the custom prompt\n          (editor.commands as unknown as AiCommands).$startAiToolbarThinking(\n            customPrompt\n          );\n        }\n      }\n    }\n  };\n\n  const handleCustomPromptChange = useCallback(\n    (customPrompt: string) => {\n      (editor.commands as unknown as AiCommands)._updateAiToolbarCustomPrompt(\n        customPrompt\n      );\n    },\n    [editor]\n  );\n\n  const handleSendClick = useCallback(() => {\n    if (isCustomPromptEmpty) {\n      return;\n    }\n\n    (editor.commands as unknown as AiCommands).$startAiToolbarThinking(\n      customPrompt\n    );\n  }, [editor, customPrompt, isCustomPromptEmpty]);\n\n  return (\n    <div className=\"lb-tiptap-ai-toolbar-content\">\n      <span className=\"lb-icon-container lb-tiptap-ai-toolbar-icon-container\">\n        <SparklesIcon />\n      </span>\n      <div\n        className=\"lb-tiptap-ai-toolbar-custom-prompt-container\"\n        data-value={customPrompt}\n      >\n        <Command.Input\n          value={customPrompt}\n          onValueChange={handleCustomPromptChange}\n          asChild\n        >\n          <textarea\n            ref={textAreaRef}\n            className=\"lb-tiptap-ai-toolbar-custom-prompt\"\n            placeholder={`Ask ${aiName} anything…`}\n            onKeyDown={handlePromptKeyDown}\n            rows={1}\n            autoFocus\n          />\n        </Command.Input>\n      </div>\n      <div className=\"lb-tiptap-ai-toolbar-actions\">\n        <ShortcutTooltip content={`Ask ${aiName}`} shortcut=\"Enter\">\n          <Button\n            className=\"lb-tiptap-ai-toolbar-action\"\n            variant=\"primary\"\n            aria-label={`Ask ${aiName}`}\n            icon={<SendIcon />}\n            disabled={isCustomPromptEmpty}\n            onClick={handleSendClick}\n          />\n        </ShortcutTooltip>\n      </div>\n    </div>\n  );\n}\n\nfunction AiToolbarAsking() {\n  return <AiToolbarCustomPromptContent />;\n}\n\nfunction AiToolbarThinking() {\n  const editor = useCurrentEditor(\"AiToolbarThinking\", \"AiToolbar\");\n  const contentRef = useRef<HTMLDivElement>(null);\n  const aiName = (editor.storage.liveblocksAi as AiExtensionStorage).name;\n\n  const handleCancel = useCallback(() => {\n    (editor.commands as unknown as AiCommands).$cancelAiToolbarThinking();\n  }, [editor]);\n\n  // Focus the toolbar content and clear the current window selection while thinking\n  useLayoutEffect(() => {\n    contentRef.current?.focus();\n    window.getSelection()?.removeAllRanges();\n  }, []);\n\n  return (\n    <>\n      <div\n        className=\"lb-tiptap-ai-toolbar-content\"\n        tabIndex={0}\n        ref={contentRef}\n      >\n        <span className=\"lb-icon-container lb-tiptap-ai-toolbar-icon-container\">\n          <SparklesIcon />\n        </span>\n        <div className=\"lb-tiptap-ai-toolbar-thinking\">\n          {aiName} is thinking…\n        </div>\n        <div className=\"lb-tiptap-ai-toolbar-actions\">\n          <ShortcutTooltip content=\"Cancel\" shortcut=\"Escape\">\n            <Button\n              className=\"lb-tiptap-ai-toolbar-action\"\n              variant=\"secondary\"\n              aria-label=\"Cancel\"\n              icon={<UndoIcon />}\n              onClick={handleCancel}\n            />\n          </ShortcutTooltip>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction AiToolbarReviewing() {\n  return (\n    <>\n      {/* <div className=\"lb-tiptap-ai-toolbar-output-container\">\n        <div className=\"lb-tiptap-ai-toolbar-output\">\n          TODO: Display non-diff outputs inline here\n        </div>\n      </div> */}\n      <AiToolbarCustomPromptContent />\n    </>\n  );\n}\n\nfunction AiToolbarContainer({\n  state,\n  toolbarRef,\n  dropdownRef,\n  children,\n}: PropsWithChildren<{\n  state: AiExtensionStorage[\"state\"];\n  toolbarRef: RefObject<HTMLDivElement>;\n  dropdownRef: RefObject<HTMLDivElement>;\n}>) {\n  const editor = useCurrentEditor(\"AiToolbarContainer\", \"AiToolbar\");\n  const phase = state.phase;\n  const customPrompt = state.customPrompt;\n  const isCustomPromptMultiline = useMemo(\n    () => customPrompt?.includes(\"\\n\"),\n    [customPrompt]\n  );\n  const hasDropdownItems = useCommandState(\n    (state) => state.filtered.count > 0\n  ) as boolean;\n  const isDropdownHidden = isCustomPromptMultiline || !hasDropdownItems;\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (!event.defaultPrevented && event.key === \"Escape\") {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (phase === \"thinking\") {\n          (editor.commands as unknown as AiCommands).$cancelAiToolbarThinking();\n        } else {\n          (editor.chain() as ChainedAiCommands).$closeAiToolbar().focus().run();\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [editor, phase]);\n\n  return (\n    <AiToolbarContext.Provider\n      value={{ state, toolbarRef, dropdownRef, isDropdownHidden }}\n    >\n      <div className=\"lb-tiptap-ai-toolbar-container\">\n        <div className=\"lb-elevation lb-tiptap-ai-toolbar\">\n          {state.phase === \"asking\" ? (\n            <AiToolbarAsking />\n          ) : state.phase === \"thinking\" ? (\n            <AiToolbarThinking />\n          ) : state.phase === \"reviewing\" ? (\n            <AiToolbarReviewing />\n          ) : null}\n        </div>\n        <div\n          className=\"lb-tiptap-ai-toolbar-halo\"\n          data-active={state.phase === \"thinking\" ? \"\" : undefined}\n          aria-hidden\n        >\n          <div className=\"lb-tiptap-ai-toolbar-halo-horizontal\" />\n          <div className=\"lb-tiptap-ai-toolbar-halo-vertical\" />\n        </div>\n      </div>\n      {state.phase === \"asking\" || state.phase === \"reviewing\" ? (\n        <Command.List\n          className=\"lb-elevation lb-dropdown lb-tiptap-ai-toolbar-dropdown\"\n          data-hidden={isDropdownHidden ? \"\" : undefined}\n          ref={dropdownRef}\n        >\n          {state.phase === \"reviewing\" ? (\n            <AiToolbarReviewingSuggestions />\n          ) : (\n            children\n          )}\n        </Command.List>\n      ) : null}\n    </AiToolbarContext.Provider>\n  );\n}\n\nconst defaultSuggestions = (\n  <>\n    <AiToolbarSuggestionsGroup label=\"Modify\">\n      <AiToolbarSuggestion icon={<EditIcon />}>\n        Improve writing\n      </AiToolbarSuggestion>\n      <AiToolbarSuggestion icon={<CheckIcon />}>\n        Fix mistakes\n      </AiToolbarSuggestion>\n      <AiToolbarSuggestion icon={<ShortenIcon />}>Simplify</AiToolbarSuggestion>\n      <AiToolbarSuggestion icon={<LengthenIcon />}>\n        Add more detail\n      </AiToolbarSuggestion>\n    </AiToolbarSuggestionsGroup>\n    <AiToolbarSuggestionsGroup label=\"Generate\">\n      <AiToolbarSuggestion icon={<QuestionMarkIcon />}>\n        Explain\n      </AiToolbarSuggestion>\n    </AiToolbarSuggestionsGroup>\n  </>\n);\n\nexport const AiToolbar = Object.assign(\n  forwardRef<HTMLDivElement, AiToolbarProps>(\n    (\n      {\n        position = \"bottom\",\n        offset: sideOffset = 6,\n        editor,\n        className,\n        suggestions: Suggestions = defaultSuggestions,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const state =\n        useEditorState({\n          editor,\n          selector: (ctx) => {\n            return (\n              ctx.editor?.storage.liveblocksAi as AiExtensionStorage | undefined\n            )?.state;\n          },\n        }) ?? DEFAULT_STATE;\n      const selection = editor?.state.selection;\n      const phase = state.phase;\n      const floatingOptions: UseFloatingOptions = useMemo(() => {\n        const detectOverflowOptions: DetectOverflowOptions = {\n          padding: AI_TOOLBAR_COLLISION_PADDING,\n        };\n\n        return {\n          strategy: \"fixed\",\n          placement: position,\n          middleware: [\n            tiptapFloating(editor),\n            hide(detectOverflowOptions),\n            offset(sideOffset),\n          ],\n          whileElementsMounted: (...args) => {\n            return autoUpdate(...args, {\n              animationFrame: true,\n            });\n          },\n        };\n      }, [editor, position, sideOffset]);\n      const isOpen = selection !== undefined && state.phase !== \"closed\";\n      const {\n        refs: { setReference, setFloating },\n        strategy,\n        x,\n        y,\n        isPositioned,\n      } = useFloating({\n        ...floatingOptions,\n        open: isOpen,\n      });\n      const toolbarRef = useRef<HTMLDivElement>(null);\n      const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);\n      const dropdownRef = useRef<HTMLDivElement>(null);\n\n      useEffect(() => {\n        if (!editor) {\n          return;\n        }\n\n        if (!selection && phase !== \"closed\") {\n          (editor.commands as unknown as AiCommands).$closeAiToolbar();\n        }\n      }, [phase, editor, selection]);\n\n      useLayoutEffect(() => {\n        if (!editor || !isOpen) {\n          return;\n        }\n\n        setReference(null);\n\n        setTimeout(() => {\n          if (state.phase === \"reviewing\") {\n            const domRange = getDomRangeFromSelection(state.contentTarget, editor);\n            setReference(domRange);\n          } else if (!selection) {\n            setReference(null);\n          } else {\n            const domRange = getDomRangeFromSelection(selection, editor);\n            setReference(domRange);\n          }\n        }, 0);\n      }, [selection, editor, isOpen, state.phase, state.contentTarget, setReference]);\n\n      // Close the toolbar when clicking anywhere outside of it\n      useEffect(() => {\n        if (!editor || !isOpen) {\n          return;\n        }\n\n        const handleOutsideEvent = (event: MouseEvent) => {\n          if (!toolbarRef.current) {\n            return;\n          }\n\n          if (\n            event.target &&\n            !toolbarRef.current.contains(event.target as Node) &&\n            (dropdownRef.current\n              ? !dropdownRef.current.contains(event.target as Node)\n              : true)\n          ) {\n            (editor.commands as unknown as AiCommands).$closeAiToolbar();\n          }\n        };\n\n        setTimeout(() => {\n          document.addEventListener(\"pointerdown\", handleOutsideEvent);\n        }, 0);\n\n        return () => {\n          document.removeEventListener(\"pointerdown\", handleOutsideEvent);\n        };\n      }, [editor, isOpen]);\n\n      if (!editor || !isOpen) {\n        return null;\n      }\n\n      return createPortal(\n        <TooltipProvider>\n          <EditorProvider editor={editor}>\n            <Command\n              role=\"toolbar\"\n              label=\"AI toolbar\"\n              aria-orientation=\"horizontal\"\n              className={classNames(\n                \"lb-root lb-portal lb-tiptap-ai-toolbar-portal\",\n                className\n              )}\n              ref={mergedRefs}\n              style={{\n                position: strategy,\n                top: 0,\n                left: 0,\n                transform: isPositioned\n                  ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                  : \"translate3d(0, -200%, 0)\",\n              }}\n              {...props}\n            >\n              <AiToolbarContainer\n                state={state}\n                dropdownRef={dropdownRef}\n                toolbarRef={toolbarRef}\n              >\n                {typeof Suggestions === \"function\" ? (\n                  <Suggestions children={defaultSuggestions} />\n                ) : (\n                  Suggestions\n                )}\n              </AiToolbarContainer>\n            </Command>\n          </EditorProvider>\n        </TooltipProvider>,\n        document.body\n      );\n    }\n  ),\n  {\n    SuggestionsGroup: AiToolbarSuggestionsGroup,\n    Suggestion: AiToolbarSuggestion,\n  }\n);\n"],"names":["customPrompt","state"],"mappings":";;;;;;;;;;;;;AA0DO,MAAM,4BAA+B,GAAA,GAAA;AAiC5C,MAAM,gBAAA,GAAmB,cAAuC,IAAI,CAAA,CAAA;AAEpE,SAAS,mBAAsB,GAAA;AAC7B,EAAM,MAAA,OAAA,GAAU,WAAW,gBAAgB,CAAA,CAAA;AAE3C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,sDAAsD,CAAA,CAAA;AAAA,GACxE;AAEA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA;AAQA,SAAS,eAAe,MAAmC,EAAA;AACzD,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,QAAA;AAAA,IACN,OAAS,EAAA,MAAA;AAAA,IACT,EAAA,CAAG,EAAE,QAAA,EAAY,EAAA;AACf,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAO,EAAC,CAAA;AAAA,OACV;AAEA,MAAA,MAAM,UAAa,GAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,qBAAsB,EAAA,CAAA;AAEzD,MAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,QACtB,0BAAA;AAAA,QACA,GAAG,UAAW,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,OAChB,CAAA;AACA,MAAA,QAAA,CAAS,SAAS,KAAM,CAAA,WAAA;AAAA,QACtB,2BAAA;AAAA,QACA,GAAG,UAAW,CAAA,MAAA,CAAA,EAAA,CAAA;AAAA,OAChB,CAAA;AAEA,MAAO,OAAA;AAAA,QACL,GAAG,UAAW,CAAA,CAAA;AAAA,OAChB,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF,CAAA;AAEA,MAAM,sBAAA,GAAyB,WAG7B,CAAC,EAAE,UAAU,KAAU,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,EACE,uBAAA,GAAA,CAAC,QAAQ,KAAR,EAAA;AAAA,IACC,yBAAU,GAAA,CAAA,MAAA,EAAA;AAAA,MAAK,SAAU,EAAA,mBAAA;AAAA,MAAqB,QAAA,EAAA,KAAA;AAAA,KAAM,CAAA;AAAA,IACnD,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,IAEJ,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,MAAM,yBAA4B,GAAA,UAAA,CAGhC,CAAC,KAAA,EAAO,YAAiB,KAAA;AACzB,EAAA,uBAAQ,GAAA,CAAA,sBAAA,EAAA;AAAA,IAAuB,GAAK,EAAA,YAAA;AAAA,IAAe,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAC/D,CAAC,CAAA,CAAA;AAED,MAAM,qBAAA,GAAwB,WAG5B,CAAC,EAAE,UAAU,QAAU,EAAA,IAAA,EAAA,GAAS,KAAM,EAAA,EAAG,YAAiB,KAAA;AAC1D,EACE,uBAAA,IAAA,CAAC,QAAQ,IAAR,EAAA;AAAA,IACC,SAAU,EAAA,kBAAA;AAAA,IACV,QAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,mBAAA;AAAA,QAAqB,QAAA,EAAA,IAAA;AAAA,OAAK,CAAU,GAAA,IAAA;AAAA,MAC3D,2BACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,wBAAA;AAAA,QAA0B,QAAA;AAAA,OAAS,CACjD,GAAA,IAAA;AAAA,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,MAAM,mBAAA,GAAsB,WAG1B,CAAC,EAAE,QAAQ,YAAiB,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACtD,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AAEzD,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAmB,KAAA;AAClB,MAAC,OAAO,QAAmC,CAAA,uBAAA;AAAA,QACzC,YAAgB,IAAA,MAAA;AAAA,OAClB,CAAA;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,YAAY,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,GAAK,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,SAAS,6BAAgC,GAAA;AACvC,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,sBAAA,EAAwB,WAAW,CAAA,CAAA;AACnE,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,mBAAoB,EAAA,CAAA;AACtC,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AAEnB,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAC,MAAA,CAAO,QAAmC,CAAA,uBAAA,CAAwB,MAAM,CAAA,CAAA;AAAA,GACxE,EAAA,CAAC,MAAQ,EAAA,MAAM,CAAC,CAAA,CAAA;AAEnB,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAC,MAAA,CAAO,SAAmC,eAAgB,EAAA,CAAA;AAAA,GAC7D,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAC,MAAA,CAAO,SAAmC,sBAAuB,EAAA,CAAA;AAAA,GACpE,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,IAAA,sBAAO,SAAU,EAAA,EAAA,CAAA;AAAA,QAAI,QAAU,EAAA,YAAA;AAAA,QAC7B,QAAA,EAAA,mBAAA;AAAA,OAEzB,CAAA;AAAA,sBACC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,IAAA,sBAAO,SAAU,EAAA,EAAA,CAAA;AAAA,QACf,QAAA,EAAA,cAAA;AAAA,OAEzB,CAAA;AAAA,sBACC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,QAAI,QAAU,EAAA,WAAA;AAAA,QAAa,QAAA,EAAA,WAAA;AAAA,OAElE,CAAA;AAAA,sBACC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,IAAA,sBAAO,SAAU,EAAA,EAAA,CAAA;AAAA,QAAI,QAAU,EAAA,aAAA;AAAA,QAAe,QAAA,EAAA,SAAA;AAAA,OAErE,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,4BAA+B,GAAA;AACtC,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,qBAAA,EAAuB,WAAW,CAAA,CAAA;AAClE,EAAM,MAAA,MAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,YAAoC,CAAA,IAAA,CAAA;AACnE,EAAM,MAAA,WAAA,GAAc,OAA4B,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,gBAAA,KAAqB,mBAAoB,EAAA,CAAA;AACrE,EAAM,MAAA,EAAE,cAAiB,GAAA,KAAA,CAAA;AAIzB,EAAA,MAAM,mBAAsB,GAAA,OAAA;AAAA,IAC1B,MAAM,YAAa,CAAA,IAAA,EAAW,KAAA,EAAA;AAAA,IAC9B,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAA,eAAA;AAAA,IACE,MAAM;AACJ,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,MAAM,WAAW,WAAY,CAAA,OAAA,CAAA;AAE7B,QAAA,IAAI,CAAC,QAAU,EAAA;AACb,UAAA,OAAA;AAAA,SACF;AAEA,QAAA,QAAA,CAAS,KAAM,EAAA,CAAA;AACf,QAAS,QAAA,CAAA,iBAAA;AAAA,UACP,SAAS,KAAM,CAAA,MAAA;AAAA,UACf,SAAS,KAAM,CAAA,MAAA;AAAA,SACjB,CAAA;AAAA,SACC,CAAC,CAAA,CAAA;AAAA,KACN;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAC1B,KACG,KAAA;AACH,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,MAAM,QAAU,EAAA;AAElB,QAAC,OAAO,QAAmC,CAAA,4BAAA;AAAA,UACzC,CAACA,kBAAiBA,aAAe,GAAA,IAAA;AAAA,SACnC,CAAA;AAAA,OACK,MAAA;AACL,QAAM,MAAA,oBAAA,GAAuB,YAAY,OAAS,EAAA,aAAA;AAAA,UAChD,uCAAA;AAAA,SACF,CAAA;AAEA,QAAI,IAAA,CAAC,oBAAoB,oBAAsB,EAAA;AAE7C,UAAA,oBAAA,CAAqB,KAAM,EAAA,CAAA;AAAA,SAC7B,MAAA,IAAW,CAAC,mBAAqB,EAAA;AAE/B,UAAC,OAAO,QAAmC,CAAA,uBAAA;AAAA,YACzC,YAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAACA,aAAyB,KAAA;AACxB,MAAC,OAAO,QAAmC,CAAA,4BAAA;AAAA,QACzCA,aAAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAC,OAAO,QAAmC,CAAA,uBAAA;AAAA,MACzC,YAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,YAAA,EAAc,mBAAmB,CAAC,CAAA,CAAA;AAE9C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,8BAAA;AAAA,IACb,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,uDAAA;AAAA,QACd,8BAAC,YAAa,EAAA,EAAA,CAAA;AAAA,OAChB,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAU,EAAA,8CAAA;AAAA,QACV,YAAY,EAAA,YAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA,CAAC,QAAQ,KAAR,EAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,aAAe,EAAA,wBAAA;AAAA,UACf,OAAO,EAAA,IAAA;AAAA,UAEP,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,SAAU,EAAA,oCAAA;AAAA,YACV,aAAa,CAAO,IAAA,EAAA,MAAA,CAAA,eAAA,CAAA;AAAA,YACpB,SAAW,EAAA,mBAAA;AAAA,YACX,IAAM,EAAA,CAAA;AAAA,YACN,SAAS,EAAA,IAAA;AAAA,WACX,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAU,EAAA,8BAAA;AAAA,QACb,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,SAAS,CAAO,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,UAAU,QAAS,EAAA,OAAA;AAAA,UAClD,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,SAAU,EAAA,6BAAA;AAAA,YACV,OAAQ,EAAA,SAAA;AAAA,YACR,cAAY,CAAO,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,YACnB,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,YAChB,QAAU,EAAA,mBAAA;AAAA,YACV,OAAS,EAAA,eAAA;AAAA,WACX,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,eAAkB,GAAA;AACzB,EAAA,2BAAQ,4BAA6B,EAAA,EAAA,CAAA,CAAA;AACvC,CAAA;AAEA,SAAS,iBAAoB,GAAA;AAC3B,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,mBAAA,EAAqB,WAAW,CAAA,CAAA;AAChE,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,MAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,YAAoC,CAAA,IAAA,CAAA;AAEnE,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAC,MAAA,CAAO,SAAmC,wBAAyB,EAAA,CAAA;AAAA,GACtE,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAGX,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,UAAA,CAAW,SAAS,KAAM,EAAA,CAAA;AAC1B,IAAO,MAAA,CAAA,YAAA,IAAgB,eAAgB,EAAA,CAAA;AAAA,GACzC,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAU,EAAA,8BAAA;AAAA,MACV,QAAU,EAAA,CAAA;AAAA,MACV,GAAK,EAAA,UAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAU,EAAA,uDAAA;AAAA,UACd,8BAAC,YAAa,EAAA,EAAA,CAAA;AAAA,SAChB,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,+BAAA;AAAA,UACZ,QAAA,EAAA;AAAA,YAAA,MAAA;AAAA,YAAO,oBAAA;AAAA,WAAA;AAAA,SACV,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,8BAAA;AAAA,UACb,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,YAAgB,OAAQ,EAAA,QAAA;AAAA,YAAS,QAAS,EAAA,QAAA;AAAA,YACzC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAU,EAAA,6BAAA;AAAA,cACV,OAAQ,EAAA,WAAA;AAAA,cACR,YAAW,EAAA,QAAA;AAAA,cACX,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,cAChB,OAAS,EAAA,YAAA;AAAA,aACX,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,kBAAqB,GAAA;AAC5B,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IAME,8BAAC,4BAA6B,EAAA,EAAA,CAAA;AAAA,GAChC,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,kBAAmB,CAAA;AAAA,EAC1B,KAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAII,EAAA;AACF,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,oBAAA,EAAsB,WAAW,CAAA,CAAA;AACjE,EAAA,MAAM,QAAQ,KAAM,CAAA,KAAA,CAAA;AACpB,EAAA,MAAM,eAAe,KAAM,CAAA,YAAA,CAAA;AAC3B,EAAA,MAAM,uBAA0B,GAAA,OAAA;AAAA,IAC9B,MAAM,YAAc,EAAA,QAAA,CAAS,IAAI,CAAA;AAAA,IACjC,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AACA,EAAA,MAAM,gBAAmB,GAAA,eAAA;AAAA,IACvB,CAACC,MAAAA,KAAUA,MAAM,CAAA,QAAA,CAAS,KAAQ,GAAA,CAAA;AAAA,GACpC,CAAA;AACA,EAAM,MAAA,gBAAA,GAAmB,2BAA2B,CAAC,gBAAA,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyB,KAAA;AAC9C,MAAA,IAAI,CAAC,KAAA,CAAM,gBAAoB,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AACrD,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,QAAA,IAAI,UAAU,UAAY,EAAA;AACxB,UAAC,MAAA,CAAO,SAAmC,wBAAyB,EAAA,CAAA;AAAA,SAC/D,MAAA;AACL,UAAC,OAAO,KAAM,EAAA,CAAwB,iBAAkB,CAAA,KAAA,GAAQ,GAAI,EAAA,CAAA;AAAA,SACtE;AAAA,OACF;AAAA,KACF,CAAA;AAEA,IAAS,QAAA,CAAA,gBAAA,CAAiB,WAAW,aAAa,CAAA,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,WAAW,aAAa,CAAA,CAAA;AAAA,KACvD,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,KAAK,CAAC,CAAA,CAAA;AAElB,EACE,uBAAA,IAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,IACC,KAAO,EAAA,EAAE,KAAO,EAAA,UAAA,EAAY,aAAa,gBAAiB,EAAA;AAAA,IAE1D,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAU,EAAA,gCAAA;AAAA,QACb,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,mCAAA;AAAA,YACZ,gBAAM,KAAU,KAAA,QAAA,mBACd,GAAA,CAAA,eAAA,EAAA,EAAgB,IACf,KAAM,CAAA,KAAA,KAAU,UAClB,mBAAA,GAAA,CAAC,qBAAkB,CACjB,GAAA,KAAA,CAAM,UAAU,WAClB,mBAAA,GAAA,CAAC,sBAAmB,CAClB,GAAA,IAAA;AAAA,WACN,CAAA;AAAA,0BACC,IAAA,CAAA,KAAA,EAAA;AAAA,YACC,SAAU,EAAA,2BAAA;AAAA,YACV,aAAa,EAAA,KAAA,CAAM,KAAU,KAAA,UAAA,GAAa,EAAK,GAAA,KAAA,CAAA;AAAA,YAC/C,aAAW,EAAA,IAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,gBAAI,SAAU,EAAA,sCAAA;AAAA,eAAuC,CAAA;AAAA,8BACrD,GAAA,CAAA,KAAA,EAAA;AAAA,gBAAI,SAAU,EAAA,oCAAA;AAAA,eAAqC,CAAA;AAAA,aAAA;AAAA,WACtD,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,KAAA,CAAM,UAAU,QAAY,IAAA,KAAA,CAAM,UAAU,WAC3C,mBAAA,GAAA,CAAC,QAAQ,IAAR,EAAA;AAAA,QACC,SAAU,EAAA,wDAAA;AAAA,QACV,aAAA,EAAa,mBAAmB,EAAK,GAAA,KAAA,CAAA;AAAA,QACrC,GAAK,EAAA,WAAA;AAAA,QAEJ,QAAM,EAAA,KAAA,CAAA,KAAA,KAAU,WACf,mBAAA,GAAA,CAAC,iCAA8B,CAE/B,GAAA,QAAA;AAAA,OAEJ,CACE,GAAA,IAAA;AAAA,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,kBACJ,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,EACE,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,yBAAA,EAAA;AAAA,MAA0B,KAAM,EAAA,QAAA;AAAA,MAC/B,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,iBAAA;AAAA,SAEzC,CAAA;AAAA,wBACC,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,IAAA,sBAAO,SAAU,EAAA,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,cAAA;AAAA,SAE1C,CAAA;AAAA,wBACC,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,UAAA;AAAA,SAAQ,CAAA;AAAA,wBACnD,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,IAAA,sBAAO,YAAa,EAAA,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,iBAAA;AAAA,SAE7C,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,oBACC,GAAA,CAAA,yBAAA,EAAA;AAAA,MAA0B,KAAM,EAAA,UAAA;AAAA,MAC/B,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,IAAA,sBAAO,gBAAiB,EAAA,EAAA,CAAA;AAAA,QAAI,QAAA,EAAA,SAAA;AAAA,OAEjD,CAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF,CAAA,CAAA;AAGK,MAAM,YAAY,MAAO,CAAA,MAAA;AAAA,EAC9B,UAAA;AAAA,IACE,CACE;AAAA,MACE,QAAW,GAAA,QAAA;AAAA,MACX,QAAQ,UAAa,GAAA,CAAA;AAAA,MACrB,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,WAAc,GAAA,kBAAA;AAAA,MACxB,GAAA,KAAA;AAAA,OAEL,YACG,KAAA;AACH,MAAA,MAAM,QACJ,cAAe,CAAA;AAAA,QACb,MAAA;AAAA,QACA,QAAA,EAAU,CAAC,GAAQ,KAAA;AACjB,UACE,OAAA,GAAA,CAAI,MAAQ,EAAA,OAAA,CAAQ,YACnB,EAAA,KAAA,CAAA;AAAA,SACL;AAAA,OACD,CAAK,IAAA,aAAA,CAAA;AACR,MAAM,MAAA,SAAA,GAAY,QAAQ,KAAM,CAAA,SAAA,CAAA;AAChC,MAAA,MAAM,QAAQ,KAAM,CAAA,KAAA,CAAA;AACpB,MAAM,MAAA,eAAA,GAAsC,QAAQ,MAAM;AACxD,QAAA,MAAM,qBAA+C,GAAA;AAAA,UACnD,OAAS,EAAA,4BAAA;AAAA,SACX,CAAA;AAEA,QAAO,OAAA;AAAA,UACL,QAAU,EAAA,OAAA;AAAA,UACV,SAAW,EAAA,QAAA;AAAA,UACX,UAAY,EAAA;AAAA,YACV,eAAe,MAAM,CAAA;AAAA,YACrB,KAAK,qBAAqB,CAAA;AAAA,YAC1B,OAAO,UAAU,CAAA;AAAA,WACnB;AAAA,UACA,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,YAAO,OAAA,UAAA,CAAW,GAAG,IAAM,EAAA;AAAA,cACzB,cAAgB,EAAA,IAAA;AAAA,aACjB,CAAA,CAAA;AAAA,WACH;AAAA,SACF,CAAA;AAAA,OACC,EAAA,CAAC,MAAQ,EAAA,QAAA,EAAU,UAAU,CAAC,CAAA,CAAA;AACjC,MAAA,MAAM,MAAS,GAAA,SAAA,KAAc,KAAa,CAAA,IAAA,KAAA,CAAM,KAAU,KAAA,QAAA,CAAA;AAC1D,MAAM,MAAA;AAAA,QACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,QAClC,QAAA;AAAA,QACA,CAAA;AAAA,QACA,CAAA;AAAA,QACA,YAAA;AAAA,UACE,WAAY,CAAA;AAAA,QACd,GAAG,eAAA;AAAA,QACH,IAAM,EAAA,MAAA;AAAA,OACP,CAAA,CAAA;AACD,MAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,MAAA,MAAM,UAAa,GAAA,OAAA,CAAQ,YAAc,EAAA,UAAA,EAAY,WAAW,CAAA,CAAA;AAChE,MAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAE/C,MAAA,SAAA,CAAU,MAAM;AACd,QAAA,IAAI,CAAC,MAAQ,EAAA;AACX,UAAA,OAAA;AAAA,SACF;AAEA,QAAI,IAAA,CAAC,SAAa,IAAA,KAAA,KAAU,QAAU,EAAA;AACpC,UAAC,MAAA,CAAO,SAAmC,eAAgB,EAAA,CAAA;AAAA,SAC7D;AAAA,OACC,EAAA,CAAC,KAAO,EAAA,MAAA,EAAQ,SAAS,CAAC,CAAA,CAAA;AAE7B,MAAA,eAAA,CAAgB,MAAM;AACpB,QAAI,IAAA,CAAC,MAAU,IAAA,CAAC,MAAQ,EAAA;AACtB,UAAA,OAAA;AAAA,SACF;AAEA,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAEjB,QAAA,UAAA,CAAW,MAAM;AACf,UAAI,IAAA,KAAA,CAAM,UAAU,WAAa,EAAA;AAC/B,YAAA,MAAM,QAAW,GAAA,wBAAA,CAAyB,KAAM,CAAA,aAAA,EAAe,MAAM,CAAA,CAAA;AACrE,YAAA,YAAA,CAAa,QAAQ,CAAA,CAAA;AAAA,WACvB,MAAA,IAAW,CAAC,SAAW,EAAA;AACrB,YAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,WACZ,MAAA;AACL,YAAM,MAAA,QAAA,GAAW,wBAAyB,CAAA,SAAA,EAAW,MAAM,CAAA,CAAA;AAC3D,YAAA,YAAA,CAAa,QAAQ,CAAA,CAAA;AAAA,WACvB;AAAA,WACC,CAAC,CAAA,CAAA;AAAA,OACN,EAAG,CAAC,SAAA,EAAW,MAAQ,EAAA,MAAA,EAAQ,MAAM,KAAO,EAAA,KAAA,CAAM,aAAe,EAAA,YAAY,CAAC,CAAA,CAAA;AAG9E,MAAA,SAAA,CAAU,MAAM;AACd,QAAI,IAAA,CAAC,MAAU,IAAA,CAAC,MAAQ,EAAA;AACtB,UAAA,OAAA;AAAA,SACF;AAEA,QAAM,MAAA,kBAAA,GAAqB,CAAC,KAAsB,KAAA;AAChD,UAAI,IAAA,CAAC,WAAW,OAAS,EAAA;AACvB,YAAA,OAAA;AAAA,WACF;AAEA,UAAA,IACE,MAAM,MACN,IAAA,CAAC,WAAW,OAAQ,CAAA,QAAA,CAAS,MAAM,MAAc,CAAA,KAChD,WAAY,CAAA,OAAA,GACT,CAAC,WAAY,CAAA,OAAA,CAAQ,SAAS,KAAM,CAAA,MAAc,IAClD,IACJ,CAAA,EAAA;AACA,YAAC,MAAA,CAAO,SAAmC,eAAgB,EAAA,CAAA;AAAA,WAC7D;AAAA,SACF,CAAA;AAEA,QAAA,UAAA,CAAW,MAAM;AACf,UAAS,QAAA,CAAA,gBAAA,CAAiB,eAAe,kBAAkB,CAAA,CAAA;AAAA,WAC1D,CAAC,CAAA,CAAA;AAEJ,QAAA,OAAO,MAAM;AACX,UAAS,QAAA,CAAA,mBAAA,CAAoB,eAAe,kBAAkB,CAAA,CAAA;AAAA,SAChE,CAAA;AAAA,OACC,EAAA,CAAC,MAAQ,EAAA,MAAM,CAAC,CAAA,CAAA;AAEnB,MAAI,IAAA,CAAC,MAAU,IAAA,CAAC,MAAQ,EAAA;AACtB,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAO,OAAA,YAAA;AAAA,wBACJ,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,YAAe,MAAA;AAAA,YACd,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA;AAAA,cACC,IAAK,EAAA,SAAA;AAAA,cACL,KAAM,EAAA,YAAA;AAAA,cACN,kBAAiB,EAAA,YAAA;AAAA,cACjB,SAAW,EAAA,UAAA;AAAA,gBACT,+CAAA;AAAA,gBACA,SAAA;AAAA,eACF;AAAA,cACA,GAAK,EAAA,UAAA;AAAA,cACL,KAAO,EAAA;AAAA,gBACL,QAAU,EAAA,QAAA;AAAA,gBACV,GAAK,EAAA,CAAA;AAAA,gBACL,IAAM,EAAA,CAAA;AAAA,gBACN,SAAA,EAAW,YACP,GAAA,CAAA,YAAA,EAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,KAAM,CAAA,CAAC,CAC/C,CAAA,MAAA,CAAA,GAAA,0BAAA;AAAA,eACN;AAAA,cACC,GAAG,KAAA;AAAA,cAEJ,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA;AAAA,gBACC,KAAA;AAAA,gBACA,WAAA;AAAA,gBACA,UAAA;AAAA,gBAEC,QAAA,EAAA,OAAO,WAAgB,KAAA,UAAA,mBACrB,GAAA,CAAA,WAAA,EAAA;AAAA,kBAAY,QAAU,EAAA,kBAAA;AAAA,iBAAoB,CAE3C,GAAA,WAAA;AAAA,eAEJ,CAAA;AAAA,aACF,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,QACA,QAAS,CAAA,IAAA;AAAA,OACX,CAAA;AAAA,KACF;AAAA,GACF;AAAA,EACA;AAAA,IACE,gBAAkB,EAAA,yBAAA;AAAA,IAClB,UAAY,EAAA,mBAAA;AAAA,GACd;AACF;;;;"}

package/dist/comments/CommentsExtension.js

@@ -149,7 +149,7 @@ const CommentsExtension = core.Extension.create({
   },
   addStorage() {
     return {
-      pendingCommentSelection: null
+      pendingComment: false
     };
   },
   addCommands() {
@@ -164,14 +164,11 @@ const CommentsExtension = core.Extension.create({
             data: null
           })
         );
-        this.storage.pendingCommentSelection = new state.TextSelection(
-          this.editor.state.selection.$anchor,
-          this.editor.state.selection.$head
-        );
+        this.storage.pendingComment = true;
         return true;
       },
       closePendingComment: () => () => {
-        this.storage.pendingCommentSelection = null;
+        this.storage.pendingComment = false;
         return true;
       },
       selectThread: (id) => () => {
@@ -184,33 +181,31 @@ const CommentsExtension = core.Extension.create({
         return true;
       },
       addComment: (id) => ({ commands }) => {
-        if (!this.storage.pendingCommentSelection) {
+        if (!this.storage.pendingComment || this.editor.state.selection.empty) {
           return false;
         }
-        this.editor.state.selection = this.storage.pendingCommentSelection;
         commands.setMark(types.LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });
-        this.storage.pendingCommentSelection = null;
+        this.storage.pendingComment = false;
         return true;
       }
     };
   },
   onSelectionUpdate({ transaction }) {
-    if (!this.storage.pendingCommentSelection || transaction.getMeta(yProsemirror.ySyncPluginKey)) {
+    if (!this.storage.pendingComment || transaction.getMeta(yProsemirror.ySyncPluginKey)) {
       return;
     }
-    this.storage.pendingCommentSelection = null;
+    this.storage.pendingComment = false;
   },
   addProseMirrorPlugins() {
     return [
       new state.Plugin({
         key: types.THREADS_ACTIVE_SELECTION_PLUGIN,
         props: {
-          decorations: ({ doc }) => {
-            const active = this.storage.pendingCommentSelection !== null;
-            if (!active) {
+          decorations: ({ doc, selection }) => {
+            if (!this.storage.pendingComment) {
               return view.DecorationSet.create(doc, []);
             }
-            const { from, to } = this.storage.pendingCommentSelection;
+            const { from, to } = selection;
             const decorations = [
               view.Decoration.inline(from, to, {
                 class: "lb-root lb-selection lb-tiptap-active-selection"

package/dist/comments/CommentsExtension.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsExtension.js","sources":["../../src/comments/CommentsExtension.ts"],"sourcesContent":["import { Extension, Mark, mergeAttributes } from \"@tiptap/core\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport type { Transaction } from \"@tiptap/pm/state\";\nimport { Plugin, TextSelection } from \"@tiptap/pm/state\";\nimport { Decoration, DecorationSet } from \"@tiptap/pm/view\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport type { CommentsExtensionStorage, ThreadPluginState } from \"../types\";\nimport {\n  LIVEBLOCKS_COMMENT_MARK_TYPE,\n  ThreadPluginActions,\n  THREADS_ACTIVE_SELECTION_PLUGIN,\n  THREADS_PLUGIN_KEY,\n} from \"../types\";\n\ntype ThreadPluginAction = {\n  name: ThreadPluginActions;\n  data: string | null;\n};\n\n/**\n * Known issues: Overlapping marks are merged when reloading the doc. May be related:\n * https://github.com/ueberdosis/tiptap/issues/4339\n * https://github.com/yjs/y-prosemirror/issues/47\n */\nconst Comment = Mark.create({\n  name: LIVEBLOCKS_COMMENT_MARK_TYPE,\n  excludes: \"\",\n  inclusive: false,\n  keepOnSplit: true,\n  addAttributes() {\n    // Return an object with attribute configuration\n    return {\n      orphan: {\n        parseHTML: (element) => !!element.getAttribute(\"data-orphan\"),\n        renderHTML: (attributes) => {\n          return (attributes as { orphan: boolean }).orphan\n            ? {\n                \"data-orphan\": \"true\",\n              }\n            : {};\n        },\n        default: false,\n      },\n      threadId: {\n        parseHTML: (element) => element.getAttribute(\"data-lb-thread-id\"),\n        renderHTML: (attributes) => {\n          return {\n            \"data-lb-thread-id\": (attributes as { threadId: string }).threadId,\n          };\n        },\n        default: \"\",\n      },\n    };\n  },\n\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }) {\n    return [\n      \"span\",\n      mergeAttributes(HTMLAttributes, {\n        class: \"lb-root lb-tiptap-thread-mark\",\n      }),\n    ];\n  },\n\n  /**\n   * This plugin tracks the (first) position of each thread mark in the doc and creates a decoration for the selected thread\n   */\n  addProseMirrorPlugins() {\n    const updateState = (doc: Node, selectedThreadId: string | null) => {\n      const threadPositions = new Map<string, { from: number; to: number }>();\n      const decorations: Decoration[] = [];\n      // find all thread marks and store their position + create decoration for selected thread\n      doc.descendants((node, pos) => {\n        node.marks.forEach((mark) => {\n          if (mark.type === this.type) {\n            const thisThreadId = (\n              mark.attrs as { threadId: string | undefined }\n            ).threadId;\n            if (!thisThreadId) {\n              return;\n            }\n            const from = pos;\n            const to = from + node.nodeSize;\n\n            // FloatingThreads component uses \"to\" as the position, so always store the largest \"to\" found\n            // AnchoredThreads component uses \"from\" as the position, so always store the smallest \"from\" found\n            const currentPosition = threadPositions.get(thisThreadId) ?? {\n              from: Infinity,\n              to: 0,\n            };\n            threadPositions.set(thisThreadId, {\n              from: Math.min(from, currentPosition.from),\n              to: Math.max(to, currentPosition.to),\n            });\n\n            if (selectedThreadId === thisThreadId) {\n              decorations.push(\n                Decoration.inline(from, to, {\n                  class: \"lb-root lb-tiptap-thread-mark-selected\",\n                })\n              );\n            }\n          }\n        });\n      });\n      return {\n        decorations: DecorationSet.create(doc, decorations),\n        selectedThreadId,\n        threadPositions,\n        selectedThreadPos:\n          selectedThreadId !== null\n            ? threadPositions.get(selectedThreadId)?.to ?? null\n            : null,\n      };\n    };\n\n    return [\n      new Plugin({\n        key: THREADS_PLUGIN_KEY,\n        state: {\n          init() {\n            return {\n              threadPositions: new Map<string, { from: number; to: number }>(),\n              selectedThreadId: null,\n              selectedThreadPos: null,\n              decorations: DecorationSet.empty,\n            } as ThreadPluginState;\n          },\n          apply(tr, state) {\n            const action = tr.getMeta(THREADS_PLUGIN_KEY) as ThreadPluginAction;\n            if (!tr.docChanged && !action) {\n              return state;\n            }\n\n            if (!action) {\n              // Doc changed, but no action, just update rects\n              return updateState(tr.doc, state.selectedThreadId);\n            }\n            // handle actions, possibly support more actions\n            if (\n              action.name === ThreadPluginActions.SET_SELECTED_THREAD_ID &&\n              state.selectedThreadId !== action.data\n            ) {\n              return updateState(tr.doc, action.data);\n            }\n\n            return state;\n          },\n        },\n        props: {\n          decorations: (state) => {\n            return (\n              THREADS_PLUGIN_KEY.getState(state)?.decorations ??\n              DecorationSet.empty\n            );\n          },\n          handleClick: (view, pos, event) => {\n            if (event.button !== 0) {\n              return;\n            }\n\n            const selectThread = (threadId: string | null) => {\n              view.dispatch(\n                view.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n                  name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n                  data: threadId,\n                })\n              );\n            };\n\n            const node = view.state.doc.nodeAt(pos);\n            if (!node) {\n              selectThread(null);\n              return;\n            }\n            const commentMark = node.marks.find(\n              (mark) => mark.type === this.type\n            );\n            // don't allow selecting orphaned threads\n            if (commentMark?.attrs.orphan) {\n              selectThread(null);\n              return;\n            }\n            const threadId = commentMark?.attrs.threadId as string | undefined;\n            selectThread(threadId ?? null);\n          },\n        },\n      }),\n    ];\n  },\n});\n\nexport const CommentsExtension = Extension.create<\n  never,\n  CommentsExtensionStorage\n>({\n  name: \"liveblocksComments\",\n  priority: 95,\n  addExtensions() {\n    return [Comment];\n  },\n\n  addStorage() {\n    return {\n      pendingCommentSelection: null,\n    };\n  },\n\n  addCommands() {\n    return {\n      addPendingComment: () => () => {\n        if (this.editor.state.selection.empty) {\n          return false;\n        }\n        // unselect any open threads\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: null,\n          })\n        );\n        this.storage.pendingCommentSelection = new TextSelection(\n          this.editor.state.selection.$anchor,\n          this.editor.state.selection.$head\n        );\n        return true;\n      },\n      closePendingComment: () => () => {\n        this.storage.pendingCommentSelection = null;\n        return true;\n      },\n      selectThread: (id: string | null) => () => {\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: id,\n          })\n        );\n        return true;\n      },\n      addComment:\n        (id: string) =>\n        ({ commands }) => {\n          if (!this.storage.pendingCommentSelection) {\n            return false;\n          }\n          this.editor.state.selection = this.storage.pendingCommentSelection;\n          commands.setMark(LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });\n          this.storage.pendingCommentSelection = null;\n\n          return true;\n        },\n    };\n  },\n\n  //@ts-expect-error - this is incorrectly typed upstream in Mark.ts of TipTap. This event does include transaction\n  // correct: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/types.ts#L60\n  // incorrect: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/Mark.ts#L330\n  onSelectionUpdate(\n    this: { storage: Storage }, // NOTE: there are more types here I didn't override, this gets removed after submitting PR to tiptap\n    { transaction }: { transaction: Transaction } // TODO: remove this after submitting PR to tiptap\n  ) {\n    // ignore changes made by yjs\n    if (\n      !this.storage.pendingCommentSelection ||\n      transaction.getMeta(ySyncPluginKey)\n    ) {\n      return;\n    }\n    this.storage.pendingCommentSelection = null;\n  },\n  // TODO: this.storage.pendingCommentSelection needs to be a Yjs Relative Position that gets translated back to absolute position.\n  // Commit: eba949d32d6010a3d8b3f7967d73d4deb015b02a has code that can help with this.\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: THREADS_ACTIVE_SELECTION_PLUGIN,\n        props: {\n          decorations: ({ doc }) => {\n            const active = this.storage.pendingCommentSelection !== null;\n            if (!active) {\n              return DecorationSet.create(doc, []);\n            }\n            const { from, to } = this.storage\n              .pendingCommentSelection as TextSelection;\n            const decorations: Decoration[] = [\n              Decoration.inline(from, to, {\n                class: \"lb-root lb-selection lb-tiptap-active-selection\",\n              }),\n            ];\n            return DecorationSet.create(doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":["Mark","LIVEBLOCKS_COMMENT_MARK_TYPE","mergeAttributes","Decoration","DecorationSet","Plugin","THREADS_PLUGIN_KEY","ThreadPluginActions","threadId","Extension","TextSelection","ySyncPluginKey","THREADS_ACTIVE_SELECTION_PLUGIN"],"mappings":"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"}
+{"version":3,"file":"CommentsExtension.js","sources":["../../src/comments/CommentsExtension.ts"],"sourcesContent":["import { Extension, Mark, mergeAttributes } from \"@tiptap/core\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport type { Transaction } from \"@tiptap/pm/state\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { Decoration, DecorationSet } from \"@tiptap/pm/view\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport type { CommentsExtensionStorage, ThreadPluginState } from \"../types\";\nimport {\n  LIVEBLOCKS_COMMENT_MARK_TYPE,\n  ThreadPluginActions,\n  THREADS_ACTIVE_SELECTION_PLUGIN,\n  THREADS_PLUGIN_KEY,\n} from \"../types\";\n\ntype ThreadPluginAction = {\n  name: ThreadPluginActions;\n  data: string | null;\n};\n\n/**\n * Known issues: Overlapping marks are merged when reloading the doc. May be related:\n * https://github.com/ueberdosis/tiptap/issues/4339\n * https://github.com/yjs/y-prosemirror/issues/47\n */\nconst Comment = Mark.create({\n  name: LIVEBLOCKS_COMMENT_MARK_TYPE,\n  excludes: \"\",\n  inclusive: false,\n  keepOnSplit: true,\n  addAttributes() {\n    // Return an object with attribute configuration\n    return {\n      orphan: {\n        parseHTML: (element) => !!element.getAttribute(\"data-orphan\"),\n        renderHTML: (attributes) => {\n          return (attributes as { orphan: boolean }).orphan\n            ? {\n                \"data-orphan\": \"true\",\n              }\n            : {};\n        },\n        default: false,\n      },\n      threadId: {\n        parseHTML: (element) => element.getAttribute(\"data-lb-thread-id\"),\n        renderHTML: (attributes) => {\n          return {\n            \"data-lb-thread-id\": (attributes as { threadId: string }).threadId,\n          };\n        },\n        default: \"\",\n      },\n    };\n  },\n\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }) {\n    return [\n      \"span\",\n      mergeAttributes(HTMLAttributes, {\n        class: \"lb-root lb-tiptap-thread-mark\",\n      }),\n    ];\n  },\n\n  /**\n   * This plugin tracks the (first) position of each thread mark in the doc and creates a decoration for the selected thread\n   */\n  addProseMirrorPlugins() {\n    const updateState = (doc: Node, selectedThreadId: string | null) => {\n      const threadPositions = new Map<string, { from: number; to: number }>();\n      const decorations: Decoration[] = [];\n      // find all thread marks and store their position + create decoration for selected thread\n      doc.descendants((node, pos) => {\n        node.marks.forEach((mark) => {\n          if (mark.type === this.type) {\n            const thisThreadId = (\n              mark.attrs as { threadId: string | undefined }\n            ).threadId;\n            if (!thisThreadId) {\n              return;\n            }\n            const from = pos;\n            const to = from + node.nodeSize;\n\n            // FloatingThreads component uses \"to\" as the position, so always store the largest \"to\" found\n            // AnchoredThreads component uses \"from\" as the position, so always store the smallest \"from\" found\n            const currentPosition = threadPositions.get(thisThreadId) ?? {\n              from: Infinity,\n              to: 0,\n            };\n            threadPositions.set(thisThreadId, {\n              from: Math.min(from, currentPosition.from),\n              to: Math.max(to, currentPosition.to),\n            });\n\n            if (selectedThreadId === thisThreadId) {\n              decorations.push(\n                Decoration.inline(from, to, {\n                  class: \"lb-root lb-tiptap-thread-mark-selected\",\n                })\n              );\n            }\n          }\n        });\n      });\n      return {\n        decorations: DecorationSet.create(doc, decorations),\n        selectedThreadId,\n        threadPositions,\n        selectedThreadPos:\n          selectedThreadId !== null\n            ? (threadPositions.get(selectedThreadId)?.to ?? null)\n            : null,\n      };\n    };\n\n    return [\n      new Plugin({\n        key: THREADS_PLUGIN_KEY,\n        state: {\n          init() {\n            return {\n              threadPositions: new Map<string, { from: number; to: number }>(),\n              selectedThreadId: null,\n              selectedThreadPos: null,\n              decorations: DecorationSet.empty,\n            } as ThreadPluginState;\n          },\n          apply(tr, state) {\n            const action = tr.getMeta(THREADS_PLUGIN_KEY) as ThreadPluginAction;\n            if (!tr.docChanged && !action) {\n              return state;\n            }\n\n            if (!action) {\n              // Doc changed, but no action, just update rects\n              return updateState(tr.doc, state.selectedThreadId);\n            }\n            // handle actions, possibly support more actions\n            if (\n              action.name === ThreadPluginActions.SET_SELECTED_THREAD_ID &&\n              state.selectedThreadId !== action.data\n            ) {\n              return updateState(tr.doc, action.data);\n            }\n\n            return state;\n          },\n        },\n        props: {\n          decorations: (state) => {\n            return (\n              THREADS_PLUGIN_KEY.getState(state)?.decorations ??\n              DecorationSet.empty\n            );\n          },\n          handleClick: (view, pos, event) => {\n            if (event.button !== 0) {\n              return;\n            }\n\n            const selectThread = (threadId: string | null) => {\n              view.dispatch(\n                view.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n                  name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n                  data: threadId,\n                })\n              );\n            };\n\n            const node = view.state.doc.nodeAt(pos);\n            if (!node) {\n              selectThread(null);\n              return;\n            }\n            const commentMark = node.marks.find(\n              (mark) => mark.type === this.type\n            );\n            // don't allow selecting orphaned threads\n            if (commentMark?.attrs.orphan) {\n              selectThread(null);\n              return;\n            }\n            const threadId = commentMark?.attrs.threadId as string | undefined;\n            selectThread(threadId ?? null);\n          },\n        },\n      }),\n    ];\n  },\n});\n\nexport const CommentsExtension = Extension.create<\n  never,\n  CommentsExtensionStorage\n>({\n  name: \"liveblocksComments\",\n  priority: 95,\n  addExtensions() {\n    return [Comment];\n  },\n\n  addStorage() {\n    return {\n      pendingComment: false,\n    };\n  },\n\n  addCommands() {\n    return {\n      addPendingComment: () => () => {\n        if (this.editor.state.selection.empty) {\n          return false;\n        }\n        // unselect any open threads\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: null,\n          })\n        );\n        this.storage.pendingComment = true;\n        return true;\n      },\n      closePendingComment: () => () => {\n        this.storage.pendingComment = false;\n        return true;\n      },\n      selectThread: (id: string | null) => () => {\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: id,\n          })\n        );\n        return true;\n      },\n      addComment:\n        (id: string) =>\n        ({ commands }) => {\n          if (\n            !this.storage.pendingComment ||\n            this.editor.state.selection.empty\n          ) {\n            return false;\n          }\n          commands.setMark(LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });\n          this.storage.pendingComment = false;\n          return true;\n        },\n    };\n  },\n\n  // @ts-expect-error - this is incorrectly typed upstream in Mark.ts of TipTap. This event does include transaction\n  // correct: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/types.ts#L60\n  // incorrect: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/Mark.ts#L330\n  onSelectionUpdate(\n    this: { storage: CommentsExtensionStorage }, // NOTE: there are more types here I didn't override, this gets removed after submitting PR to tiptap\n    { transaction }: { transaction: Transaction } // TODO: remove this after submitting PR to tiptap\n  ) {\n    // ignore changes made by yjs\n    if (!this.storage.pendingComment || transaction.getMeta(ySyncPluginKey)) {\n      return;\n    }\n    // if selection changes, hide the composer. We could keep the composer open and move it to the new selection?\n    this.storage.pendingComment = false;\n  },\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: THREADS_ACTIVE_SELECTION_PLUGIN,\n        props: {\n          decorations: ({ doc, selection }) => {\n            if (!this.storage.pendingComment) {\n              return DecorationSet.create(doc, []);\n            }\n            const { from, to } = selection;\n            const decorations: Decoration[] = [\n              Decoration.inline(from, to, {\n                class: \"lb-root lb-selection lb-tiptap-active-selection\",\n              }),\n            ];\n            return DecorationSet.create(doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":["Mark","LIVEBLOCKS_COMMENT_MARK_TYPE","mergeAttributes","Decoration","DecorationSet","Plugin","THREADS_PLUGIN_KEY","ThreadPluginActions","threadId","Extension","ySyncPluginKey","THREADS_ACTIVE_SELECTION_PLUGIN"],"mappings":"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"}

package/dist/comments/CommentsExtension.mjs

@@ -1,5 +1,5 @@
 import { Mark, mergeAttributes, Extension } from '@tiptap/core';
-import { Plugin, TextSelection } from '@tiptap/pm/state';
+import { Plugin } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
 import { ySyncPluginKey } from 'y-prosemirror';
 import { LIVEBLOCKS_COMMENT_MARK_TYPE, THREADS_PLUGIN_KEY, ThreadPluginActions, THREADS_ACTIVE_SELECTION_PLUGIN } from '../types.mjs';
@@ -147,7 +147,7 @@ const CommentsExtension = Extension.create({
   },
   addStorage() {
     return {
-      pendingCommentSelection: null
+      pendingComment: false
     };
   },
   addCommands() {
@@ -162,14 +162,11 @@ const CommentsExtension = Extension.create({
             data: null
           })
         );
-        this.storage.pendingCommentSelection = new TextSelection(
-          this.editor.state.selection.$anchor,
-          this.editor.state.selection.$head
-        );
+        this.storage.pendingComment = true;
         return true;
       },
       closePendingComment: () => () => {
-        this.storage.pendingCommentSelection = null;
+        this.storage.pendingComment = false;
         return true;
       },
       selectThread: (id) => () => {
@@ -182,33 +179,31 @@ const CommentsExtension = Extension.create({
         return true;
       },
       addComment: (id) => ({ commands }) => {
-        if (!this.storage.pendingCommentSelection) {
+        if (!this.storage.pendingComment || this.editor.state.selection.empty) {
           return false;
         }
-        this.editor.state.selection = this.storage.pendingCommentSelection;
         commands.setMark(LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });
-        this.storage.pendingCommentSelection = null;
+        this.storage.pendingComment = false;
         return true;
       }
     };
   },
   onSelectionUpdate({ transaction }) {
-    if (!this.storage.pendingCommentSelection || transaction.getMeta(ySyncPluginKey)) {
+    if (!this.storage.pendingComment || transaction.getMeta(ySyncPluginKey)) {
       return;
     }
-    this.storage.pendingCommentSelection = null;
+    this.storage.pendingComment = false;
   },
   addProseMirrorPlugins() {
     return [
       new Plugin({
         key: THREADS_ACTIVE_SELECTION_PLUGIN,
         props: {
-          decorations: ({ doc }) => {
-            const active = this.storage.pendingCommentSelection !== null;
-            if (!active) {
+          decorations: ({ doc, selection }) => {
+            if (!this.storage.pendingComment) {
               return DecorationSet.create(doc, []);
             }
-            const { from, to } = this.storage.pendingCommentSelection;
+            const { from, to } = selection;
             const decorations = [
               Decoration.inline(from, to, {
                 class: "lb-root lb-selection lb-tiptap-active-selection"

package/dist/comments/CommentsExtension.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsExtension.mjs","sources":["../../src/comments/CommentsExtension.ts"],"sourcesContent":["import { Extension, Mark, mergeAttributes } from \"@tiptap/core\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport type { Transaction } from \"@tiptap/pm/state\";\nimport { Plugin, TextSelection } from \"@tiptap/pm/state\";\nimport { Decoration, DecorationSet } from \"@tiptap/pm/view\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport type { CommentsExtensionStorage, ThreadPluginState } from \"../types\";\nimport {\n  LIVEBLOCKS_COMMENT_MARK_TYPE,\n  ThreadPluginActions,\n  THREADS_ACTIVE_SELECTION_PLUGIN,\n  THREADS_PLUGIN_KEY,\n} from \"../types\";\n\ntype ThreadPluginAction = {\n  name: ThreadPluginActions;\n  data: string | null;\n};\n\n/**\n * Known issues: Overlapping marks are merged when reloading the doc. May be related:\n * https://github.com/ueberdosis/tiptap/issues/4339\n * https://github.com/yjs/y-prosemirror/issues/47\n */\nconst Comment = Mark.create({\n  name: LIVEBLOCKS_COMMENT_MARK_TYPE,\n  excludes: \"\",\n  inclusive: false,\n  keepOnSplit: true,\n  addAttributes() {\n    // Return an object with attribute configuration\n    return {\n      orphan: {\n        parseHTML: (element) => !!element.getAttribute(\"data-orphan\"),\n        renderHTML: (attributes) => {\n          return (attributes as { orphan: boolean }).orphan\n            ? {\n                \"data-orphan\": \"true\",\n              }\n            : {};\n        },\n        default: false,\n      },\n      threadId: {\n        parseHTML: (element) => element.getAttribute(\"data-lb-thread-id\"),\n        renderHTML: (attributes) => {\n          return {\n            \"data-lb-thread-id\": (attributes as { threadId: string }).threadId,\n          };\n        },\n        default: \"\",\n      },\n    };\n  },\n\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }) {\n    return [\n      \"span\",\n      mergeAttributes(HTMLAttributes, {\n        class: \"lb-root lb-tiptap-thread-mark\",\n      }),\n    ];\n  },\n\n  /**\n   * This plugin tracks the (first) position of each thread mark in the doc and creates a decoration for the selected thread\n   */\n  addProseMirrorPlugins() {\n    const updateState = (doc: Node, selectedThreadId: string | null) => {\n      const threadPositions = new Map<string, { from: number; to: number }>();\n      const decorations: Decoration[] = [];\n      // find all thread marks and store their position + create decoration for selected thread\n      doc.descendants((node, pos) => {\n        node.marks.forEach((mark) => {\n          if (mark.type === this.type) {\n            const thisThreadId = (\n              mark.attrs as { threadId: string | undefined }\n            ).threadId;\n            if (!thisThreadId) {\n              return;\n            }\n            const from = pos;\n            const to = from + node.nodeSize;\n\n            // FloatingThreads component uses \"to\" as the position, so always store the largest \"to\" found\n            // AnchoredThreads component uses \"from\" as the position, so always store the smallest \"from\" found\n            const currentPosition = threadPositions.get(thisThreadId) ?? {\n              from: Infinity,\n              to: 0,\n            };\n            threadPositions.set(thisThreadId, {\n              from: Math.min(from, currentPosition.from),\n              to: Math.max(to, currentPosition.to),\n            });\n\n            if (selectedThreadId === thisThreadId) {\n              decorations.push(\n                Decoration.inline(from, to, {\n                  class: \"lb-root lb-tiptap-thread-mark-selected\",\n                })\n              );\n            }\n          }\n        });\n      });\n      return {\n        decorations: DecorationSet.create(doc, decorations),\n        selectedThreadId,\n        threadPositions,\n        selectedThreadPos:\n          selectedThreadId !== null\n            ? threadPositions.get(selectedThreadId)?.to ?? null\n            : null,\n      };\n    };\n\n    return [\n      new Plugin({\n        key: THREADS_PLUGIN_KEY,\n        state: {\n          init() {\n            return {\n              threadPositions: new Map<string, { from: number; to: number }>(),\n              selectedThreadId: null,\n              selectedThreadPos: null,\n              decorations: DecorationSet.empty,\n            } as ThreadPluginState;\n          },\n          apply(tr, state) {\n            const action = tr.getMeta(THREADS_PLUGIN_KEY) as ThreadPluginAction;\n            if (!tr.docChanged && !action) {\n              return state;\n            }\n\n            if (!action) {\n              // Doc changed, but no action, just update rects\n              return updateState(tr.doc, state.selectedThreadId);\n            }\n            // handle actions, possibly support more actions\n            if (\n              action.name === ThreadPluginActions.SET_SELECTED_THREAD_ID &&\n              state.selectedThreadId !== action.data\n            ) {\n              return updateState(tr.doc, action.data);\n            }\n\n            return state;\n          },\n        },\n        props: {\n          decorations: (state) => {\n            return (\n              THREADS_PLUGIN_KEY.getState(state)?.decorations ??\n              DecorationSet.empty\n            );\n          },\n          handleClick: (view, pos, event) => {\n            if (event.button !== 0) {\n              return;\n            }\n\n            const selectThread = (threadId: string | null) => {\n              view.dispatch(\n                view.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n                  name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n                  data: threadId,\n                })\n              );\n            };\n\n            const node = view.state.doc.nodeAt(pos);\n            if (!node) {\n              selectThread(null);\n              return;\n            }\n            const commentMark = node.marks.find(\n              (mark) => mark.type === this.type\n            );\n            // don't allow selecting orphaned threads\n            if (commentMark?.attrs.orphan) {\n              selectThread(null);\n              return;\n            }\n            const threadId = commentMark?.attrs.threadId as string | undefined;\n            selectThread(threadId ?? null);\n          },\n        },\n      }),\n    ];\n  },\n});\n\nexport const CommentsExtension = Extension.create<\n  never,\n  CommentsExtensionStorage\n>({\n  name: \"liveblocksComments\",\n  priority: 95,\n  addExtensions() {\n    return [Comment];\n  },\n\n  addStorage() {\n    return {\n      pendingCommentSelection: null,\n    };\n  },\n\n  addCommands() {\n    return {\n      addPendingComment: () => () => {\n        if (this.editor.state.selection.empty) {\n          return false;\n        }\n        // unselect any open threads\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: null,\n          })\n        );\n        this.storage.pendingCommentSelection = new TextSelection(\n          this.editor.state.selection.$anchor,\n          this.editor.state.selection.$head\n        );\n        return true;\n      },\n      closePendingComment: () => () => {\n        this.storage.pendingCommentSelection = null;\n        return true;\n      },\n      selectThread: (id: string | null) => () => {\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: id,\n          })\n        );\n        return true;\n      },\n      addComment:\n        (id: string) =>\n        ({ commands }) => {\n          if (!this.storage.pendingCommentSelection) {\n            return false;\n          }\n          this.editor.state.selection = this.storage.pendingCommentSelection;\n          commands.setMark(LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });\n          this.storage.pendingCommentSelection = null;\n\n          return true;\n        },\n    };\n  },\n\n  //@ts-expect-error - this is incorrectly typed upstream in Mark.ts of TipTap. This event does include transaction\n  // correct: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/types.ts#L60\n  // incorrect: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/Mark.ts#L330\n  onSelectionUpdate(\n    this: { storage: Storage }, // NOTE: there are more types here I didn't override, this gets removed after submitting PR to tiptap\n    { transaction }: { transaction: Transaction } // TODO: remove this after submitting PR to tiptap\n  ) {\n    // ignore changes made by yjs\n    if (\n      !this.storage.pendingCommentSelection ||\n      transaction.getMeta(ySyncPluginKey)\n    ) {\n      return;\n    }\n    this.storage.pendingCommentSelection = null;\n  },\n  // TODO: this.storage.pendingCommentSelection needs to be a Yjs Relative Position that gets translated back to absolute position.\n  // Commit: eba949d32d6010a3d8b3f7967d73d4deb015b02a has code that can help with this.\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: THREADS_ACTIVE_SELECTION_PLUGIN,\n        props: {\n          decorations: ({ doc }) => {\n            const active = this.storage.pendingCommentSelection !== null;\n            if (!active) {\n              return DecorationSet.create(doc, []);\n            }\n            const { from, to } = this.storage\n              .pendingCommentSelection as TextSelection;\n            const decorations: Decoration[] = [\n              Decoration.inline(from, to, {\n                class: \"lb-root lb-selection lb-tiptap-active-selection\",\n              }),\n            ];\n            return DecorationSet.create(doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":["threadId"],"mappings":";;;;;;AAyBA,MAAM,OAAA,GAAU,KAAK,MAAO,CAAA;AAAA,EAC1B,IAAM,EAAA,4BAAA;AAAA,EACN,QAAU,EAAA,EAAA;AAAA,EACV,SAAW,EAAA,KAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,aAAgB,GAAA;AAEd,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA;AAAA,QACN,WAAW,CAAC,OAAA,KAAY,CAAC,CAAC,OAAA,CAAQ,aAAa,aAAa,CAAA;AAAA,QAC5D,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAA,OAAQ,WAAmC,MACvC,GAAA;AAAA,YACE,aAAe,EAAA,MAAA;AAAA,cAEjB,EAAC,CAAA;AAAA,SACP;AAAA,QACA,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,MACA,QAAU,EAAA;AAAA,QACR,SAAW,EAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,aAAa,mBAAmB,CAAA;AAAA,QAChE,UAAA,EAAY,CAAC,UAAe,KAAA;AAC1B,UAAO,OAAA;AAAA,YACL,qBAAsB,UAAoC,CAAA,QAAA;AAAA,WAC5D,CAAA;AAAA,SACF;AAAA,QACA,OAAS,EAAA,EAAA;AAAA,OACX;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,UAAA,CAAW,EAAE,cAAA,EAA2D,EAAA;AACtE,IAAO,OAAA;AAAA,MACL,MAAA;AAAA,MACA,gBAAgB,cAAgB,EAAA;AAAA,QAC9B,KAAO,EAAA,+BAAA;AAAA,OACR,CAAA;AAAA,KACH,CAAA;AAAA,GACF;AAAA,EAKA,qBAAwB,GAAA;AACtB,IAAM,MAAA,WAAA,GAAc,CAAC,GAAA,EAAW,gBAAoC,KAAA;AAClE,MAAM,MAAA,eAAA,uBAAsB,GAA0C,EAAA,CAAA;AACtE,MAAA,MAAM,cAA4B,EAAC,CAAA;AAEnC,MAAI,GAAA,CAAA,WAAA,CAAY,CAAC,IAAA,EAAM,GAAQ,KAAA;AAC7B,QAAK,IAAA,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,IAAS,KAAA;AAC3B,UAAI,IAAA,IAAA,CAAK,IAAS,KAAA,IAAA,CAAK,IAAM,EAAA;AAC3B,YAAM,MAAA,YAAA,GACJ,KAAK,KACL,CAAA,QAAA,CAAA;AACF,YAAA,IAAI,CAAC,YAAc,EAAA;AACjB,cAAA,OAAA;AAAA,aACF;AACA,YAAA,MAAM,IAAO,GAAA,GAAA,CAAA;AACb,YAAM,MAAA,EAAA,GAAK,OAAO,IAAK,CAAA,QAAA,CAAA;AAIvB,YAAA,MAAM,eAAkB,GAAA,eAAA,CAAgB,GAAI,CAAA,YAAY,CAAK,IAAA;AAAA,cAC3D,IAAM,EAAA,QAAA;AAAA,cACN,EAAI,EAAA,CAAA;AAAA,aACN,CAAA;AACA,YAAA,eAAA,CAAgB,IAAI,YAAc,EAAA;AAAA,cAChC,IAAM,EAAA,IAAA,CAAK,GAAI,CAAA,IAAA,EAAM,gBAAgB,IAAI,CAAA;AAAA,cACzC,EAAI,EAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,gBAAgB,EAAE,CAAA;AAAA,aACpC,CAAA,CAAA;AAED,YAAA,IAAI,qBAAqB,YAAc,EAAA;AACrC,cAAY,WAAA,CAAA,IAAA;AAAA,gBACV,UAAA,CAAW,MAAO,CAAA,IAAA,EAAM,EAAI,EAAA;AAAA,kBAC1B,KAAO,EAAA,wCAAA;AAAA,iBACR,CAAA;AAAA,eACH,CAAA;AAAA,aACF;AAAA,WACF;AAAA,SACD,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AACD,MAAO,OAAA;AAAA,QACL,WAAa,EAAA,aAAA,CAAc,MAAO,CAAA,GAAA,EAAK,WAAW,CAAA;AAAA,QAClD,gBAAA;AAAA,QACA,eAAA;AAAA,QACA,iBAAA,EACE,qBAAqB,IACjB,GAAA,eAAA,CAAgB,IAAI,gBAAgB,CAAA,EAAG,MAAM,IAC7C,GAAA,IAAA;AAAA,OACR,CAAA;AAAA,KACF,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,IAAI,MAAO,CAAA;AAAA,QACT,GAAK,EAAA,kBAAA;AAAA,QACL,KAAO,EAAA;AAAA,UACL,IAAO,GAAA;AACL,YAAO,OAAA;AAAA,cACL,eAAA,sBAAqB,GAA0C,EAAA;AAAA,cAC/D,gBAAkB,EAAA,IAAA;AAAA,cAClB,iBAAmB,EAAA,IAAA;AAAA,cACnB,aAAa,aAAc,CAAA,KAAA;AAAA,aAC7B,CAAA;AAAA,WACF;AAAA,UACA,KAAA,CAAM,IAAI,KAAO,EAAA;AACf,YAAM,MAAA,MAAA,GAAS,EAAG,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC5C,YAAA,IAAI,CAAC,EAAA,CAAG,UAAc,IAAA,CAAC,MAAQ,EAAA;AAC7B,cAAO,OAAA,KAAA,CAAA;AAAA,aACT;AAEA,YAAA,IAAI,CAAC,MAAQ,EAAA;AAEX,cAAA,OAAO,WAAY,CAAA,EAAA,CAAG,GAAK,EAAA,KAAA,CAAM,gBAAgB,CAAA,CAAA;AAAA,aACnD;AAEA,YAAA,IACE,OAAO,IAAS,KAAA,mBAAA,CAAoB,0BACpC,KAAM,CAAA,gBAAA,KAAqB,OAAO,IAClC,EAAA;AACA,cAAA,OAAO,WAAY,CAAA,EAAA,CAAG,GAAK,EAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA,aACxC;AAEA,YAAO,OAAA,KAAA,CAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,KAAO,EAAA;AAAA,UACL,WAAA,EAAa,CAAC,KAAU,KAAA;AACtB,YAAA,OACE,kBAAmB,CAAA,QAAA,CAAS,KAAK,CAAA,EAAG,eACpC,aAAc,CAAA,KAAA,CAAA;AAAA,WAElB;AAAA,UACA,WAAa,EAAA,CAAC,IAAM,EAAA,GAAA,EAAK,KAAU,KAAA;AACjC,YAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,cAAA,OAAA;AAAA,aACF;AAEA,YAAM,MAAA,YAAA,GAAe,CAACA,SAA4B,KAAA;AAChD,cAAK,IAAA,CAAA,QAAA;AAAA,gBACH,IAAK,CAAA,KAAA,CAAM,EAAG,CAAA,OAAA,CAAQ,kBAAoB,EAAA;AAAA,kBACxC,MAAM,mBAAoB,CAAA,sBAAA;AAAA,kBAC1B,IAAMA,EAAAA,SAAAA;AAAA,iBACP,CAAA;AAAA,eACH,CAAA;AAAA,aACF,CAAA;AAEA,YAAA,MAAM,IAAO,GAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,OAAO,GAAG,CAAA,CAAA;AACtC,YAAA,IAAI,CAAC,IAAM,EAAA;AACT,cAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,cAAA,OAAA;AAAA,aACF;AACA,YAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,IAAA;AAAA,cAC7B,CAAC,IAAA,KAAS,IAAK,CAAA,IAAA,KAAS,IAAK,CAAA,IAAA;AAAA,aAC/B,CAAA;AAEA,YAAI,IAAA,WAAA,EAAa,MAAM,MAAQ,EAAA;AAC7B,cAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,cAAA,OAAA;AAAA,aACF;AACA,YAAM,MAAA,QAAA,GAAW,aAAa,KAAM,CAAA,QAAA,CAAA;AACpC,YAAA,YAAA,CAAa,YAAY,IAAI,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,iBAAA,GAAoB,UAAU,MAGzC,CAAA;AAAA,EACA,IAAM,EAAA,oBAAA;AAAA,EACN,QAAU,EAAA,EAAA;AAAA,EACV,aAAgB,GAAA;AACd,IAAA,OAAO,CAAC,OAAO,CAAA,CAAA;AAAA,GACjB;AAAA,EAEA,UAAa,GAAA;AACX,IAAO,OAAA;AAAA,MACL,uBAAyB,EAAA,IAAA;AAAA,KAC3B,CAAA;AAAA,GACF;AAAA,EAEA,WAAc,GAAA;AACZ,IAAO,OAAA;AAAA,MACL,iBAAA,EAAmB,MAAM,MAAM;AAC7B,QAAA,IAAI,IAAK,CAAA,MAAA,CAAO,KAAM,CAAA,SAAA,CAAU,KAAO,EAAA;AACrC,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAA,IAAA,CAAK,OAAO,IAAK,CAAA,QAAA;AAAA,UACf,IAAK,CAAA,MAAA,CAAO,KAAM,CAAA,EAAA,CAAG,QAAQ,kBAAoB,EAAA;AAAA,YAC/C,MAAM,mBAAoB,CAAA,sBAAA;AAAA,YAC1B,IAAM,EAAA,IAAA;AAAA,WACP,CAAA;AAAA,SACH,CAAA;AACA,QAAK,IAAA,CAAA,OAAA,CAAQ,0BAA0B,IAAI,aAAA;AAAA,UACzC,IAAA,CAAK,MAAO,CAAA,KAAA,CAAM,SAAU,CAAA,OAAA;AAAA,UAC5B,IAAA,CAAK,MAAO,CAAA,KAAA,CAAM,SAAU,CAAA,KAAA;AAAA,SAC9B,CAAA;AACA,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,MACA,mBAAA,EAAqB,MAAM,MAAM;AAC/B,QAAA,IAAA,CAAK,QAAQ,uBAA0B,GAAA,IAAA,CAAA;AACvC,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,MACA,YAAA,EAAc,CAAC,EAAA,KAAsB,MAAM;AACzC,QAAA,IAAA,CAAK,OAAO,IAAK,CAAA,QAAA;AAAA,UACf,IAAK,CAAA,MAAA,CAAO,KAAM,CAAA,EAAA,CAAG,QAAQ,kBAAoB,EAAA;AAAA,YAC/C,MAAM,mBAAoB,CAAA,sBAAA;AAAA,YAC1B,IAAM,EAAA,EAAA;AAAA,WACP,CAAA;AAAA,SACH,CAAA;AACA,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,MACA,YACE,CAAC,EAAA,KACD,CAAC,EAAE,UAAe,KAAA;AAChB,QAAI,IAAA,CAAC,IAAK,CAAA,OAAA,CAAQ,uBAAyB,EAAA;AACzC,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AACA,QAAA,IAAA,CAAK,MAAO,CAAA,KAAA,CAAM,SAAY,GAAA,IAAA,CAAK,OAAQ,CAAA,uBAAA,CAAA;AAC3C,QAAA,QAAA,CAAS,OAAQ,CAAA,4BAAA,EAA8B,EAAE,QAAA,EAAU,IAAI,CAAA,CAAA;AAC/D,QAAA,IAAA,CAAK,QAAQ,uBAA0B,GAAA,IAAA,CAAA;AAEvC,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,KACJ,CAAA;AAAA,GACF;AAAA,EAKA,iBAAA,CAEE,EAAE,WAAA,EACF,EAAA;AAEA,IAAA,IACE,CAAC,IAAK,CAAA,OAAA,CAAQ,2BACd,WAAY,CAAA,OAAA,CAAQ,cAAc,CAClC,EAAA;AACA,MAAA,OAAA;AAAA,KACF;AACA,IAAA,IAAA,CAAK,QAAQ,uBAA0B,GAAA,IAAA,CAAA;AAAA,GACzC;AAAA,EAGA,qBAAwB,GAAA;AACtB,IAAO,OAAA;AAAA,MACL,IAAI,MAAO,CAAA;AAAA,QACT,GAAK,EAAA,+BAAA;AAAA,QACL,KAAO,EAAA;AAAA,UACL,WAAa,EAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AACxB,YAAM,MAAA,MAAA,GAAS,IAAK,CAAA,OAAA,CAAQ,uBAA4B,KAAA,IAAA,CAAA;AACxD,YAAA,IAAI,CAAC,MAAQ,EAAA;AACX,cAAA,OAAO,aAAc,CAAA,MAAA,CAAO,GAAK,EAAA,EAAE,CAAA,CAAA;AAAA,aACrC;AACA,YAAA,MAAM,EAAE,IAAA,EAAM,EAAG,EAAA,GAAI,KAAK,OACvB,CAAA,uBAAA,CAAA;AACH,YAAA,MAAM,WAA4B,GAAA;AAAA,cAChC,UAAA,CAAW,MAAO,CAAA,IAAA,EAAM,EAAI,EAAA;AAAA,gBAC1B,KAAO,EAAA,iDAAA;AAAA,eACR,CAAA;AAAA,aACH,CAAA;AACA,YAAO,OAAA,aAAA,CAAc,MAAO,CAAA,GAAA,EAAK,WAAW,CAAA,CAAA;AAAA,WAC9C;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF;AACF,CAAC;;;;"}
+{"version":3,"file":"CommentsExtension.mjs","sources":["../../src/comments/CommentsExtension.ts"],"sourcesContent":["import { Extension, Mark, mergeAttributes } from \"@tiptap/core\";\nimport type { Node } from \"@tiptap/pm/model\";\nimport type { Transaction } from \"@tiptap/pm/state\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { Decoration, DecorationSet } from \"@tiptap/pm/view\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport type { CommentsExtensionStorage, ThreadPluginState } from \"../types\";\nimport {\n  LIVEBLOCKS_COMMENT_MARK_TYPE,\n  ThreadPluginActions,\n  THREADS_ACTIVE_SELECTION_PLUGIN,\n  THREADS_PLUGIN_KEY,\n} from \"../types\";\n\ntype ThreadPluginAction = {\n  name: ThreadPluginActions;\n  data: string | null;\n};\n\n/**\n * Known issues: Overlapping marks are merged when reloading the doc. May be related:\n * https://github.com/ueberdosis/tiptap/issues/4339\n * https://github.com/yjs/y-prosemirror/issues/47\n */\nconst Comment = Mark.create({\n  name: LIVEBLOCKS_COMMENT_MARK_TYPE,\n  excludes: \"\",\n  inclusive: false,\n  keepOnSplit: true,\n  addAttributes() {\n    // Return an object with attribute configuration\n    return {\n      orphan: {\n        parseHTML: (element) => !!element.getAttribute(\"data-orphan\"),\n        renderHTML: (attributes) => {\n          return (attributes as { orphan: boolean }).orphan\n            ? {\n                \"data-orphan\": \"true\",\n              }\n            : {};\n        },\n        default: false,\n      },\n      threadId: {\n        parseHTML: (element) => element.getAttribute(\"data-lb-thread-id\"),\n        renderHTML: (attributes) => {\n          return {\n            \"data-lb-thread-id\": (attributes as { threadId: string }).threadId,\n          };\n        },\n        default: \"\",\n      },\n    };\n  },\n\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }) {\n    return [\n      \"span\",\n      mergeAttributes(HTMLAttributes, {\n        class: \"lb-root lb-tiptap-thread-mark\",\n      }),\n    ];\n  },\n\n  /**\n   * This plugin tracks the (first) position of each thread mark in the doc and creates a decoration for the selected thread\n   */\n  addProseMirrorPlugins() {\n    const updateState = (doc: Node, selectedThreadId: string | null) => {\n      const threadPositions = new Map<string, { from: number; to: number }>();\n      const decorations: Decoration[] = [];\n      // find all thread marks and store their position + create decoration for selected thread\n      doc.descendants((node, pos) => {\n        node.marks.forEach((mark) => {\n          if (mark.type === this.type) {\n            const thisThreadId = (\n              mark.attrs as { threadId: string | undefined }\n            ).threadId;\n            if (!thisThreadId) {\n              return;\n            }\n            const from = pos;\n            const to = from + node.nodeSize;\n\n            // FloatingThreads component uses \"to\" as the position, so always store the largest \"to\" found\n            // AnchoredThreads component uses \"from\" as the position, so always store the smallest \"from\" found\n            const currentPosition = threadPositions.get(thisThreadId) ?? {\n              from: Infinity,\n              to: 0,\n            };\n            threadPositions.set(thisThreadId, {\n              from: Math.min(from, currentPosition.from),\n              to: Math.max(to, currentPosition.to),\n            });\n\n            if (selectedThreadId === thisThreadId) {\n              decorations.push(\n                Decoration.inline(from, to, {\n                  class: \"lb-root lb-tiptap-thread-mark-selected\",\n                })\n              );\n            }\n          }\n        });\n      });\n      return {\n        decorations: DecorationSet.create(doc, decorations),\n        selectedThreadId,\n        threadPositions,\n        selectedThreadPos:\n          selectedThreadId !== null\n            ? (threadPositions.get(selectedThreadId)?.to ?? null)\n            : null,\n      };\n    };\n\n    return [\n      new Plugin({\n        key: THREADS_PLUGIN_KEY,\n        state: {\n          init() {\n            return {\n              threadPositions: new Map<string, { from: number; to: number }>(),\n              selectedThreadId: null,\n              selectedThreadPos: null,\n              decorations: DecorationSet.empty,\n            } as ThreadPluginState;\n          },\n          apply(tr, state) {\n            const action = tr.getMeta(THREADS_PLUGIN_KEY) as ThreadPluginAction;\n            if (!tr.docChanged && !action) {\n              return state;\n            }\n\n            if (!action) {\n              // Doc changed, but no action, just update rects\n              return updateState(tr.doc, state.selectedThreadId);\n            }\n            // handle actions, possibly support more actions\n            if (\n              action.name === ThreadPluginActions.SET_SELECTED_THREAD_ID &&\n              state.selectedThreadId !== action.data\n            ) {\n              return updateState(tr.doc, action.data);\n            }\n\n            return state;\n          },\n        },\n        props: {\n          decorations: (state) => {\n            return (\n              THREADS_PLUGIN_KEY.getState(state)?.decorations ??\n              DecorationSet.empty\n            );\n          },\n          handleClick: (view, pos, event) => {\n            if (event.button !== 0) {\n              return;\n            }\n\n            const selectThread = (threadId: string | null) => {\n              view.dispatch(\n                view.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n                  name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n                  data: threadId,\n                })\n              );\n            };\n\n            const node = view.state.doc.nodeAt(pos);\n            if (!node) {\n              selectThread(null);\n              return;\n            }\n            const commentMark = node.marks.find(\n              (mark) => mark.type === this.type\n            );\n            // don't allow selecting orphaned threads\n            if (commentMark?.attrs.orphan) {\n              selectThread(null);\n              return;\n            }\n            const threadId = commentMark?.attrs.threadId as string | undefined;\n            selectThread(threadId ?? null);\n          },\n        },\n      }),\n    ];\n  },\n});\n\nexport const CommentsExtension = Extension.create<\n  never,\n  CommentsExtensionStorage\n>({\n  name: \"liveblocksComments\",\n  priority: 95,\n  addExtensions() {\n    return [Comment];\n  },\n\n  addStorage() {\n    return {\n      pendingComment: false,\n    };\n  },\n\n  addCommands() {\n    return {\n      addPendingComment: () => () => {\n        if (this.editor.state.selection.empty) {\n          return false;\n        }\n        // unselect any open threads\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: null,\n          })\n        );\n        this.storage.pendingComment = true;\n        return true;\n      },\n      closePendingComment: () => () => {\n        this.storage.pendingComment = false;\n        return true;\n      },\n      selectThread: (id: string | null) => () => {\n        this.editor.view.dispatch(\n          this.editor.state.tr.setMeta(THREADS_PLUGIN_KEY, {\n            name: ThreadPluginActions.SET_SELECTED_THREAD_ID,\n            data: id,\n          })\n        );\n        return true;\n      },\n      addComment:\n        (id: string) =>\n        ({ commands }) => {\n          if (\n            !this.storage.pendingComment ||\n            this.editor.state.selection.empty\n          ) {\n            return false;\n          }\n          commands.setMark(LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });\n          this.storage.pendingComment = false;\n          return true;\n        },\n    };\n  },\n\n  // @ts-expect-error - this is incorrectly typed upstream in Mark.ts of TipTap. This event does include transaction\n  // correct: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/types.ts#L60\n  // incorrect: https://github.com/ueberdosis/tiptap/blob/2ff327ced84df6865b4ef98947b667aa79992292/packages/core/src/Mark.ts#L330\n  onSelectionUpdate(\n    this: { storage: CommentsExtensionStorage }, // NOTE: there are more types here I didn't override, this gets removed after submitting PR to tiptap\n    { transaction }: { transaction: Transaction } // TODO: remove this after submitting PR to tiptap\n  ) {\n    // ignore changes made by yjs\n    if (!this.storage.pendingComment || transaction.getMeta(ySyncPluginKey)) {\n      return;\n    }\n    // if selection changes, hide the composer. We could keep the composer open and move it to the new selection?\n    this.storage.pendingComment = false;\n  },\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: THREADS_ACTIVE_SELECTION_PLUGIN,\n        props: {\n          decorations: ({ doc, selection }) => {\n            if (!this.storage.pendingComment) {\n              return DecorationSet.create(doc, []);\n            }\n            const { from, to } = selection;\n            const decorations: Decoration[] = [\n              Decoration.inline(from, to, {\n                class: \"lb-root lb-selection lb-tiptap-active-selection\",\n              }),\n            ];\n            return DecorationSet.create(doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":["threadId"],"mappings":"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"}

package/dist/comments/FloatingComposer.js

@@ -17,9 +17,11 @@ const FloatingComposer = react.forwardRef(function FloatingComposer2(props, forw
   const pendingCommentSelection = react$2.useEditorState({
     editor,
     selector: (ctx) => {
-      return ctx.editor?.storage.liveblocksComments?.pendingCommentSelection;
+      if (!ctx.editor)
+        return;
+      return ctx.editor.storage.liveblocksComments?.pendingComment && !ctx.editor.state.selection.empty ? ctx.editor.state.selection : void 0;
     },
-    equalityFn: utils.compareTextSelections
+    equalityFn: utils.compareSelections
   }) ?? void 0;
   const isOpen = pendingCommentSelection !== void 0;
   const {
@@ -54,7 +56,7 @@ const FloatingComposer = react.forwardRef(function FloatingComposer2(props, forw
     if (!pendingCommentSelection) {
       setReference(null);
     } else {
-      const domRange = utils.getDomRangeFromTextSelection(
+      const domRange = utils.getDomRangeFromSelection(
         pendingCommentSelection,
         editor
       );

package/dist/comments/FloatingComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.js","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type {\n  CommentsExtensionStorage,\n  ExtendedChainedCommands,\n} from \"../types\";\nimport { compareTextSelections, getDomRangeFromTextSelection } from \"../utils\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const pendingCommentSelection =\n    useEditorState({\n      editor,\n      selector: (ctx) => {\n        return (\n          ctx.editor?.storage.liveblocksComments as\n            | CommentsExtensionStorage\n            | undefined\n        )?.pendingCommentSelection;\n      },\n      equalityFn: compareTextSelections,\n    }) ?? undefined;\n  const isOpen = pendingCommentSelection !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!editor || !isOpen) {\n      return;\n    }\n\n    if (!pendingCommentSelection) {\n      setReference(null);\n    } else {\n      const domRange = getDomRangeFromTextSelection(\n        pendingCommentSelection,\n        editor\n      );\n\n      setReference(domRange);\n    }\n  }, [pendingCommentSelection, editor, isOpen, setReference]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented() || !editor) {\n        return;\n      }\n\n      if (event.key === \"Escape\") {\n        (editor.chain() as ExtendedChainedCommands<\"closePendingComment\">)\n          .closePendingComment()\n          .run();\n      }\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!isOpen || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["forwardRef","FloatingComposer","useCreateThread","useEditorState","compareTextSelections","useFloating","inline","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","getDomRangeFromTextSelection","useCallback","createPortal","jsx","Composer"],"mappings":"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"}
+{"version":3,"file":"FloatingComposer.js","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type {\n  CommentsExtensionStorage,\n  ExtendedChainedCommands,\n} from \"../types\";\nimport { compareSelections, getDomRangeFromSelection } from \"../utils\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const pendingCommentSelection =\n    useEditorState({\n      editor,\n      selector: (ctx) => {\n        if (!ctx.editor) return;\n\n        return (\n          ctx.editor.storage.liveblocksComments as\n            | CommentsExtensionStorage\n            | undefined\n        )?.pendingComment && !ctx.editor.state.selection.empty\n          ? ctx.editor.state.selection\n          : undefined;\n      },\n      equalityFn: compareSelections,\n    }) ?? undefined;\n  const isOpen = pendingCommentSelection !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!editor || !isOpen) {\n      return;\n    }\n\n    if (!pendingCommentSelection) {\n      setReference(null);\n    } else {\n      const domRange = getDomRangeFromSelection(\n        pendingCommentSelection,\n        editor\n      );\n\n      setReference(domRange);\n    }\n  }, [pendingCommentSelection, editor, isOpen, setReference]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented() || !editor) {\n        return;\n      }\n\n      if (event.key === \"Escape\") {\n        (editor.chain() as ExtendedChainedCommands<\"closePendingComment\">)\n          .closePendingComment()\n          .run();\n      }\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!isOpen || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["forwardRef","FloatingComposer","useCreateThread","useEditorState","compareSelections","useFloating","inline","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","getDomRangeFromSelection","useCallback","createPortal","jsx","Composer"],"mappings":"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"}

package/dist/comments/FloatingComposer.mjs

@@ -6,7 +6,7 @@ import { Composer } from '@liveblocks/react-ui';
 import { useEditorState } from '@tiptap/react';
 import { forwardRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { compareTextSelections, getDomRangeFromTextSelection } from '../utils.mjs';
+import { compareSelections, getDomRangeFromSelection } from '../utils.mjs';
 
 const FLOATING_COMPOSER_COLLISION_PADDING = 10;
 const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedRef) {
@@ -15,9 +15,11 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
   const pendingCommentSelection = useEditorState({
     editor,
     selector: (ctx) => {
-      return ctx.editor?.storage.liveblocksComments?.pendingCommentSelection;
+      if (!ctx.editor)
+        return;
+      return ctx.editor.storage.liveblocksComments?.pendingComment && !ctx.editor.state.selection.empty ? ctx.editor.state.selection : void 0;
     },
-    equalityFn: compareTextSelections
+    equalityFn: compareSelections
   }) ?? void 0;
   const isOpen = pendingCommentSelection !== void 0;
   const {
@@ -52,7 +54,7 @@ const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedR
     if (!pendingCommentSelection) {
       setReference(null);
     } else {
-      const domRange = getDomRangeFromTextSelection(
+      const domRange = getDomRangeFromSelection(
         pendingCommentSelection,
         editor
       );

package/dist/comments/FloatingComposer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type {\n  CommentsExtensionStorage,\n  ExtendedChainedCommands,\n} from \"../types\";\nimport { compareTextSelections, getDomRangeFromTextSelection } from \"../utils\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const pendingCommentSelection =\n    useEditorState({\n      editor,\n      selector: (ctx) => {\n        return (\n          ctx.editor?.storage.liveblocksComments as\n            | CommentsExtensionStorage\n            | undefined\n        )?.pendingCommentSelection;\n      },\n      equalityFn: compareTextSelections,\n    }) ?? undefined;\n  const isOpen = pendingCommentSelection !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!editor || !isOpen) {\n      return;\n    }\n\n    if (!pendingCommentSelection) {\n      setReference(null);\n    } else {\n      const domRange = getDomRangeFromTextSelection(\n        pendingCommentSelection,\n        editor\n      );\n\n      setReference(domRange);\n    }\n  }, [pendingCommentSelection, editor, isOpen, setReference]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented() || !editor) {\n        return;\n      }\n\n      if (event.key === \"Escape\") {\n        (editor.chain() as ExtendedChainedCommands<\"closePendingComment\">)\n          .closePendingComment()\n          .run();\n      }\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!isOpen || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["FloatingComposer"],"mappings":"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"}
+{"version":3,"file":"FloatingComposer.mjs","sources":["../../src/comments/FloatingComposer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport type { BaseMetadata } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport type { ComponentRef, FormEvent, KeyboardEvent } from \"react\";\nimport { forwardRef, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type {\n  CommentsExtensionStorage,\n  ExtendedChainedCommands,\n} from \"../types\";\nimport { compareSelections, getDomRangeFromSelection } from \"../utils\";\n\nexport type FloatingComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n> & {\n  editor: Editor | null;\n};\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const createThread = useCreateThread();\n  const { editor, onComposerSubmit, onKeyDown } = props;\n  const pendingCommentSelection =\n    useEditorState({\n      editor,\n      selector: (ctx) => {\n        if (!ctx.editor) return;\n\n        return (\n          ctx.editor.storage.liveblocksComments as\n            | CommentsExtensionStorage\n            | undefined\n        )?.pendingComment && !ctx.editor.state.selection.empty\n          ? ctx.editor.state.selection\n          : undefined;\n      },\n      equalityFn: compareSelections,\n    }) ?? undefined;\n  const isOpen = pendingCommentSelection !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!editor || !isOpen) {\n      return;\n    }\n\n    if (!pendingCommentSelection) {\n      setReference(null);\n    } else {\n      const domRange = getDomRangeFromSelection(\n        pendingCommentSelection,\n        editor\n      );\n\n      setReference(domRange);\n    }\n  }, [pendingCommentSelection, editor, isOpen, setReference]);\n\n  // Submit a new thread and update the comment highlight to show a completed highlight\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      if (!editor) {\n        return;\n      }\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        attachments: comment.attachments,\n        metadata: props.metadata ?? {},\n      });\n      editor.commands.addComment(thread.id);\n    },\n    [onComposerSubmit, editor, createThread, props.metadata]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLFormElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented() || !editor) {\n        return;\n      }\n\n      if (event.key === \"Escape\") {\n        (editor.chain() as ExtendedChainedCommands<\"closePendingComment\">)\n          .closePendingComment()\n          .run();\n      }\n    },\n    [editor, onKeyDown]\n  );\n\n  if (!isOpen || !editor) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className=\"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-composer\"\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n    >\n      <Composer\n        ref={forwardedRef}\n        {...props}\n        onKeyDown={handleKeyDown}\n        onComposerSubmit={handleComposerSubmit}\n        onClick={(e) => {\n          // Don't send up a click event from emoji popout and close the composer\n          e.stopPropagation();\n        }}\n        autoFocus={true}\n      />\n    </div>,\n    document.body\n  );\n});\n"],"names":["FloatingComposer"],"mappings":"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"}