@puredesktop/platform-editor 1.0.0-beta.1 → 1.0.0-beta.2

package/src/toolbar/Toolbar.tsx

@@ -1,624 +1,662 @@
-import { useEffect, useRef, useState } from 'react'
-import { useCurrentEditor } from '@tiptap/react'
-import { styled } from 'styled-components'
-import {
-  BlockOutlined,
-  BoldOutlined,
-  CheckSquareOutlined,
-  CodeOutlined,
-  FileTextOutlined,
-  ItalicOutlined,
-  LinkOutlined,
-  MoreOutlined,
-  OrderedListOutlined,
-  PartitionOutlined,
-  RedoOutlined,
-  TableOutlined,
-  TagOutlined,
-  UndoOutlined,
-  UnorderedListOutlined,
-} from '@ant-design/icons'
-import { Divider, ToolbarRow, ToolBtn } from './ToolBtn.js'
-import type { EditorToolbarOverlays } from './overlayTypes.js'
-import { HeadingGroup } from './groups/HeadingGroup.js'
-import { CollapsePanel } from '../CollapsePanel.js'
-import { TOOL_KEYS } from '../constants/toolKeys.js'
-import {
-  COMMENT_TYPES,
-  COMMENT_TYPE_LABELS,
-  type CommentType,
-} from '../commentUtils.js'
-import { copyAutoReviewPromptsToClipboard } from '../extensions/autoReviewPrompts.js'
-
-export function Toolbar({
-  onAddComment,
-  overlays,
-  advancedTools = 'full',
-}: {
-  onAddComment?: (payload: {
-    commentText: string
-    commentType: CommentType
-    from: number
-    to: number
-  }) => void
-  overlays?: EditorToolbarOverlays
-  advancedTools?: 'full' | 'formatting'
-}): React.ReactElement | null {
-  const { editor } = useCurrentEditor()
-
-  const [showLinkInput, setShowLinkInput] = useState(false)
-  const [linkUrl, setLinkUrl] = useState('')
-  const [showCommentInput, setShowCommentInput] = useState(false)
-  const [commentText, setCommentText] = useState('')
-  const [commentType, setCommentType] = useState<CommentType>('general')
-  const [commentSelection, setCommentSelection] = useState<{
-    from: number
-    to: number
-  } | null>(null)
-  const [advancedOpen, setAdvancedOpen] = useState(false)
-  const [hasSelection, setHasSelection] = useState(false)
-  const advancedRef = useRef<HTMLDivElement>(null)
-  const lastSelectionRef = useRef<{ from: number; to: number } | null>(null)
-
-  const isLink = !!editor?.isActive(TOOL_KEYS.LINK)
-  const isBullet = !!editor?.isActive(TOOL_KEYS.BULLET_LIST)
-  const isOrdered = !!editor?.isActive(TOOL_KEYS.ORDERED_LIST)
-  const isCode = !!editor?.isActive(TOOL_KEYS.CODE)
-  const isBold = !!editor?.isActive(TOOL_KEYS.BOLD)
-  const isItalic = !!editor?.isActive(TOOL_KEYS.ITALIC)
-  const isUnderline = !!editor?.isActive(TOOL_KEYS.UNDERLINE)
-  const canUndo = !!editor?.can().undo()
-  const canRedo = !!editor?.can().redo()
-  const isTask = !!editor?.isActive(TOOL_KEYS.TASK_LIST)
-  const isBlockquote = !!editor?.isActive(TOOL_KEYS.BLOCKQUOTE)
-  const isCodeBlock = !!editor?.isActive(TOOL_KEYS.CODE_BLOCK)
-  const isSubscript = !!editor?.isActive('subscript')
-  const isSuperscript = !!editor?.isActive('superscript')
-  const indexActive = !!editor?.isActive(TOOL_KEYS.INDEX_MARKER)
-  const inTable = !!editor?.isActive(TOOL_KEYS.TABLE)
-  const hasAutoReviewPrompts = Boolean(
-    editor?.extensionManager.extensions.some(
-      extension => extension.name === 'autoReviewPrompts',
-    ),
-  )
-
-  useEffect(() => {
-    if (!editor) return
-    const syncSelection = (): void => {
-      const { from, to } = editor.state.selection
-      const nextHasSelection = from !== to
-      lastSelectionRef.current = nextHasSelection ? { from, to } : null
-      setHasSelection(nextHasSelection)
-    }
-    syncSelection()
-    editor.on('selectionUpdate', syncSelection)
-    editor.on('update', syncSelection)
-    return () => {
-      editor.off('selectionUpdate', syncSelection)
-      editor.off('update', syncSelection)
-    }
-  }, [editor])
-
-  useEffect(() => {
-    if (!advancedOpen) return
-    const onDown = (e: MouseEvent) => {
-      if (!advancedRef.current?.contains(e.target as Node))
-        setAdvancedOpen(false)
-    }
-    document.addEventListener('mousedown', onDown)
-    return () => document.removeEventListener('mousedown', onDown)
-  }, [advancedOpen])
-
-  const handleLinkClick = () => {
-    if (!editor) return
-    if (isLink) {
-      editor.chain().focus().unsetLink().run()
-      return
-    }
-    const { href = '' } = editor.getAttributes('link')
-    setLinkUrl(href)
-    setShowLinkInput(true)
-  }
-
-  const confirmLink = () => {
-    if (!editor) return
-    const trimmed = linkUrl.trim()
-    if (trimmed) editor.chain().focus().setLink({ href: trimmed }).run()
-    else editor.chain().focus().unsetLink().run()
-    setShowLinkInput(false)
-    setLinkUrl('')
-  }
-
-  const cancelLink = () => {
-    setShowLinkInput(false)
-    setLinkUrl('')
-  }
-
-  const openCommentInput = () => {
-    const selection = lastSelectionRef.current
-    if (!selection) return
-    setCommentSelection(selection)
-    setShowCommentInput(true)
-  }
-
-  const cancelComment = () => {
-    setShowCommentInput(false)
-    setCommentText('')
-    setCommentSelection(null)
-  }
-
-  const confirmComment = () => {
-    const selection = commentSelection ?? lastSelectionRef.current
-    const trimmed = commentText.trim()
-    if (!selection || !trimmed || !onAddComment) return
-    onAddComment({
-      commentText: trimmed,
-      commentType,
-      from: selection.from,
-      to: selection.to,
-    })
-    setShowCommentInput(false)
-    setCommentText('')
-    setCommentSelection(null)
-  }
-
-  const closeAdvanced = (fn: () => unknown) => {
-    setAdvancedOpen(false)
-    void fn()
-  }
-
-  const insertInlineMath = () => {
-    if (!editor) return
-    const latex = window.prompt('Inline LaTeX', 'E = mc^2')?.trim()
-    if (!latex) return
-    const commands = editor.chain().focus() as unknown as {
-      insertInlineMath?: (options: { latex: string }) => { run: () => void }
-    }
-    commands.insertInlineMath?.({ latex })?.run()
-  }
-
-  const insertBlockMath = () => {
-    if (!editor) return
-    const latex = window.prompt('Block LaTeX', '\\\\frac{a}{b}')?.trim()
-    if (!latex) return
-    const commands = editor.chain().focus() as unknown as {
-      insertBlockMath?: (options: { latex: string }) => { run: () => void }
-    }
-    commands.insertBlockMath?.({ latex })?.run()
-  }
-
-  const insertMermaidBlock = () => {
-    if (!editor) return
-    editor.chain().focus().insertMermaidBlock().run()
-  }
-
-  const addComment = () => {
-    openCommentInput()
-  }
-
-  const prepareAutoReviewPrompts = async () => {
-    if (!editor) return
-    try {
-      const result = await copyAutoReviewPromptsToClipboard(editor)
-      if (!result.paragraphCount) {
-        window.alert('No paragraph text found for editorial review.')
-        return
-      }
-      window.alert(
-        `Copied editorial review prompts for ${
-          result.paragraphCount
-        } paragraph${result.paragraphCount === 1 ? '' : 's'}.`,
-      )
-    } catch {
-      window.alert('Could not copy auto-review prompts to the clipboard.')
-    }
-  }
-
-  const indentList = () => {
-    const commands = editor?.chain().focus() as unknown as {
-      sinkListItem?: (type: string) => { run: () => void }
-    }
-    const action = commands.sinkListItem?.('listItem')
-    action?.run()
-  }
-
-  if (!editor) return null
-
-  const LinkPrompt = overlays?.LinkPrompt
-  const CommentPrompt = overlays?.CommentPrompt
-  const showFullAdvancedTools = advancedTools === 'full'
-
-  return (
-    <>
-      <ToolbarRow>
-        <ToolBtn
-          disabled={!canUndo}
-          onClick={() => editor.chain().focus().undo().run()}
-          title="Undo"
-        >
-          <UndoOutlined />
-        </ToolBtn>
-        <ToolBtn
-          disabled={!canRedo}
-          onClick={() => editor.chain().focus().redo().run()}
-          title="Redo"
-        >
-          <RedoOutlined />
-        </ToolBtn>
-        <Divider />
-        <HeadingGroup />
-        <Divider />
-        <ToolBtn
-          $active={!!isBlockquote}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          title="Blockquote"
-        >
-          <span aria-hidden="true">“</span>
-        </ToolBtn>
-        <ToolBtn
-          $active={!!isOrdered}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          title="Ordered list"
-        >
-          <OrderedListOutlined />
-        </ToolBtn>
-        <ToolBtn
-          $active={!!isBullet}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          title="Bullet list"
-        >
-          <UnorderedListOutlined />
-        </ToolBtn>
-        <ToolBtn
-          onClick={indentList}
-          title="Indent list"
-          disabled={!isBullet && !isOrdered}
-        >
-          <span aria-hidden="true">⇥</span>
-        </ToolBtn>
-        <Divider />
-        {onAddComment ? (
-          <ToolBtn
-            onClick={addComment}
-            title="Add comment to selection"
-            disabled={!hasSelection}
-          >
-            <TagOutlined />
-          </ToolBtn>
-        ) : null}
-        <ToolBtn
-          $active={!!isBold}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          title="Bold"
-        >
-          <BoldOutlined />
-        </ToolBtn>
-        <ToolBtn
-          $active={!!isItalic}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          title="Italic"
-        >
-          <ItalicOutlined />
-        </ToolBtn>
-        <ToolBtn
-          $active={!!isCode}
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          title="Inline code"
-        >
-          <CodeOutlined />
-        </ToolBtn>
-        <ToolBtn $active={!!isLink} onClick={handleLinkClick} title="Link">
-          <LinkOutlined />
-        </ToolBtn>
-        <ToolBtn
-          $active={!!isUnderline}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-          title="Underline"
-        >
-          <UnderlineGlyph aria-hidden="true">U</UnderlineGlyph>
-        </ToolBtn>
-        <Divider />
-        <AdvancedWrapper ref={advancedRef}>
-          <ToolBtn
-            $active={!!advancedOpen}
-            onClick={() => setAdvancedOpen(open => !open)}
-            title="More tools"
-          >
-            <MoreOutlined />
-          </ToolBtn>
-          <AdvancedPanel open={advancedOpen}>
-            <AdvancedMenu>
-              <AdvancedItem
-                type="button"
-                onClick={() =>
-                  closeAdvanced(() =>
-                    editor.chain().focus().toggleSubscript().run(),
-                  )
-                }
-              >
-                <span aria-hidden="true">x₂</span>
-                <span>{isSubscript ? 'Remove subscript' : 'Subscript'}</span>
-              </AdvancedItem>
-              <AdvancedItem
-                type="button"
-                onClick={() =>
-                  closeAdvanced(() =>
-                    editor.chain().focus().toggleSuperscript().run(),
-                  )
-                }
-              >
-                <span aria-hidden="true">x²</span>
-                <span>
-                  {isSuperscript ? 'Remove superscript' : 'Superscript'}
-                </span>
-              </AdvancedItem>
-              {showFullAdvancedTools ? (
-                <>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() => closeAdvanced(insertInlineMath)}
-                  >
-                    <span aria-hidden="true">ƒx</span>
-                    <span>Insert inline equation</span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() => closeAdvanced(insertBlockMath)}
-                  >
-                    <span aria-hidden="true">∑</span>
-                    <span>Insert display equation</span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() => closeAdvanced(insertMermaidBlock)}
-                  >
-                    <PartitionOutlined />
-                    <span>Insert Mermaid diagram</span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().toggleTaskList().run(),
-                      )
-                    }
-                  >
-                    <CheckSquareOutlined />
-                    <span>{isTask ? 'Remove task list' : 'Task list'}</span>
-                  </AdvancedItem>
-                </>
-              ) : null}
-              {onAddComment ? (
-                <AdvancedItem
-                  type="button"
-                  onClick={() => closeAdvanced(addComment)}
-                  disabled={!hasSelection}
-                >
-                  <TagOutlined />
-                  <span>Add comment to selection</span>
-                </AdvancedItem>
-              ) : null}
-              {showFullAdvancedTools && hasAutoReviewPrompts ? (
-                <AdvancedItem
-                  type="button"
-                  onClick={() => closeAdvanced(prepareAutoReviewPrompts)}
-                >
-                  <FileTextOutlined />
-                  <span>Copy editorial review prompts</span>
-                </AdvancedItem>
-              ) : null}
-              {showFullAdvancedTools ? (
-                <>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().toggleBlockquote().run(),
-                      )
-                    }
-                  >
-                    <span>“</span>
-                    <span>
-                      {isBlockquote ? 'Remove blockquote' : 'Blockquote'}
-                    </span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().toggleCodeBlock().run(),
-                      )
-                    }
-                  >
-                    <CodeOutlined />
-                    <span>
-                      {isCodeBlock ? 'Remove code block' : 'Code block'}
-                    </span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor
-                          .chain()
-                          .focus()
-                          .insertTable({
-                            rows: 3,
-                            cols: 3,
-                            withHeaderRow: true,
-                          })
-                          .run(),
-                      )
-                    }
-                  >
-                    <TableOutlined />
-                    <span>
-                      {inTable ? 'Insert another table' : 'Insert table'}
-                    </span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().insertFootnote().run(),
-                      )
-                    }
-                  >
-                    <FileTextOutlined />
-                    <span>Insert footnote</span>
-                  </AdvancedItem>
-                </>
-              ) : null}
-              <AdvancedItem
-                type="button"
-                disabled={!indexActive && !hasSelection}
-                onClick={() =>
-                  closeAdvanced(() =>
-                    editor.chain().focus().toggleIndexMarker().run(),
-                  )
-                }
-              >
-                <TagOutlined />
-                <span>
-                  {indexActive ? 'Remove index marker' : 'Mark for index'}
-                </span>
-              </AdvancedItem>
-              {inTable ? (
-                <>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().addRowAfter().run(),
-                      )
-                    }
-                  >
-                    <TableOutlined />
-                    <span>Add table row</span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().addColumnAfter().run(),
-                      )
-                    }
-                  >
-                    <TableOutlined />
-                    <span>Add table column</span>
-                  </AdvancedItem>
-                  <AdvancedItem
-                    type="button"
-                    onClick={() =>
-                      closeAdvanced(() =>
-                        editor.chain().focus().deleteTable().run(),
-                      )
-                    }
-                  >
-                    <BlockOutlined />
-                    <span>Delete table</span>
-                  </AdvancedItem>
-                </>
-              ) : null}
-            </AdvancedMenu>
-          </AdvancedPanel>
-        </AdvancedWrapper>
-      </ToolbarRow>
-
-      {LinkPrompt ? (
-        <LinkPrompt
-          open={showLinkInput}
-          value={linkUrl}
-          onChange={setLinkUrl}
-          onConfirm={confirmLink}
-          onCancel={cancelLink}
-        />
-      ) : null}
-      {CommentPrompt ? (
-        <CommentPrompt
-          open={showCommentInput}
-          value={commentText}
-          commentType={commentType}
-          commentTypeOptions={COMMENT_TYPES.map(value => ({
-            value,
-            label: COMMENT_TYPE_LABELS[value],
-          }))}
-          onChange={setCommentText}
-          onCommentTypeChange={setCommentType}
-          onConfirm={confirmComment}
-          onCancel={cancelComment}
-          confirmDisabled={!commentText.trim() || !commentSelection}
-        />
-      ) : null}
-    </>
-  )
-}
-
-const AdvancedWrapper = styled.div`
-  position: relative;
-`
-
-const AdvancedPanel = styled(CollapsePanel)`
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 20;
-  min-width: 220px;
-  background: var(--platform-colors-surface);
-  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.92);
-  box-shadow: 0 18px 36px rgb(from var(--platform-colors-text) r g b / 0.1);
-
-  &[data-open='false'] {
-    border-color: transparent;
-    box-shadow: none;
-    pointer-events: none;
-  }
-`
-
-const AdvancedMenu = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px;
-`
-
-const AdvancedItem = styled.button.attrs({
-  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-  },
-})`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  color: var(--platform-colors-text);
-  text-align: left;
-  font-size: 12px;
-  transition: background 0.12s ease, color 0.12s ease;
-
-  &:hover:not(:disabled) {
-    background: rgb(from var(--platform-colors-surface-hover) r g b / 0.9);
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-`
-
-const UnderlineGlyph = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  color: currentColor;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1;
-  text-decoration-line: underline;
-  text-decoration-thickness: 1.5px;
-  text-underline-offset: 3px;
-`
+import { useEffect, useRef, useState } from 'react'
+import { useCurrentEditor } from '@tiptap/react'
+import { styled } from 'styled-components'
+import {
+  BlockOutlined,
+  BoldOutlined,
+  CheckSquareOutlined,
+  CodeOutlined,
+  FileTextOutlined,
+  ItalicOutlined,
+  LinkOutlined,
+  MoreOutlined,
+  OrderedListOutlined,
+  PartitionOutlined,
+  RedoOutlined,
+  TableOutlined,
+  TagOutlined,
+  UndoOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons'
+import { Divider, ToolbarRow, ToolBtn } from './ToolBtn.js'
+import type { EditorToolbarOverlays } from './overlayTypes.js'
+import { HeadingGroup } from './groups/HeadingGroup.js'
+import { CollapsePanel } from '../CollapsePanel.js'
+import { TOOL_KEYS } from '../constants/toolKeys.js'
+import {
+  COMMENT_TYPES,
+  COMMENT_TYPE_LABELS,
+  type CommentType,
+} from '../commentUtils.js'
+import { copyAutoReviewPromptsToClipboard } from '../extensions/autoReviewPrompts.js'
+
+export function Toolbar({
+  onAddComment,
+  overlays,
+  inlineTools,
+  advancedTools = 'full',
+}: {
+  onAddComment?: (payload: {
+    commentText: string
+    commentType: CommentType
+    from: number
+    to: number
+  }) => void
+  overlays?: EditorToolbarOverlays
+  inlineTools?: React.ReactNode
+  advancedTools?: 'full' | 'formatting'
+}): React.ReactElement | null {
+  const { editor } = useCurrentEditor()
+
+  const [showLinkInput, setShowLinkInput] = useState(false)
+  const [linkUrl, setLinkUrl] = useState('')
+  const [showCommentInput, setShowCommentInput] = useState(false)
+  const [commentText, setCommentText] = useState('')
+  const [commentType, setCommentType] = useState<CommentType>('general')
+  const [commentSelection, setCommentSelection] = useState<{
+    from: number
+    to: number
+  } | null>(null)
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [hasSelection, setHasSelection] = useState(false)
+  const advancedRef = useRef<HTMLDivElement>(null)
+  const lastSelectionRef = useRef<{ from: number; to: number } | null>(null)
+
+  const isLink = !!editor?.isActive(TOOL_KEYS.LINK)
+  const isBullet = !!editor?.isActive(TOOL_KEYS.BULLET_LIST)
+  const isOrdered = !!editor?.isActive(TOOL_KEYS.ORDERED_LIST)
+  const isCode = !!editor?.isActive(TOOL_KEYS.CODE)
+  const isBold = !!editor?.isActive(TOOL_KEYS.BOLD)
+  const isItalic = !!editor?.isActive(TOOL_KEYS.ITALIC)
+  const isUnderline = !!editor?.isActive(TOOL_KEYS.UNDERLINE)
+  const canUndo = !!editor?.can().undo()
+  const canRedo = !!editor?.can().redo()
+  const isTask = !!editor?.isActive(TOOL_KEYS.TASK_LIST)
+  const isBlockquote = !!editor?.isActive(TOOL_KEYS.BLOCKQUOTE)
+  const isCodeBlock = !!editor?.isActive(TOOL_KEYS.CODE_BLOCK)
+  const isSubscript = !!editor?.isActive('subscript')
+  const isSuperscript = !!editor?.isActive('superscript')
+  const indexActive = !!editor?.isActive(TOOL_KEYS.INDEX_MARKER)
+  const inTable = !!editor?.isActive(TOOL_KEYS.TABLE)
+  const hasAutoReviewPrompts = Boolean(
+    editor?.extensionManager.extensions.some(
+      extension => extension.name === 'autoReviewPrompts',
+    ),
+  )
+
+  useEffect(() => {
+    if (!editor) return
+    const syncSelection = (): void => {
+      const { from, to } = editor.state.selection
+      const nextHasSelection = from !== to
+      lastSelectionRef.current = nextHasSelection ? { from, to } : null
+      setHasSelection(nextHasSelection)
+    }
+    syncSelection()
+    editor.on('selectionUpdate', syncSelection)
+    editor.on('update', syncSelection)
+    return () => {
+      editor.off('selectionUpdate', syncSelection)
+      editor.off('update', syncSelection)
+    }
+  }, [editor])
+
+  useEffect(() => {
+    if (!advancedOpen) return
+    const onDown = (e: MouseEvent) => {
+      if (!advancedRef.current?.contains(e.target as Node))
+        setAdvancedOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [advancedOpen])
+
+  const handleLinkClick = () => {
+    if (!editor) return
+    if (isLink) {
+      editor.chain().focus().unsetLink().run()
+      return
+    }
+    const { href = '' } = editor.getAttributes('link')
+    setLinkUrl(href)
+    setShowLinkInput(true)
+  }
+
+  const confirmLink = () => {
+    if (!editor) return
+    const trimmed = linkUrl.trim()
+    if (trimmed) editor.chain().focus().setLink({ href: trimmed }).run()
+    else editor.chain().focus().unsetLink().run()
+    setShowLinkInput(false)
+    setLinkUrl('')
+  }
+
+  const cancelLink = () => {
+    setShowLinkInput(false)
+    setLinkUrl('')
+  }
+
+  const openCommentInput = () => {
+    const selection = lastSelectionRef.current
+    if (!selection) return
+    setCommentSelection(selection)
+    setShowCommentInput(true)
+  }
+
+  const cancelComment = () => {
+    setShowCommentInput(false)
+    setCommentText('')
+    setCommentSelection(null)
+  }
+
+  const confirmComment = () => {
+    const selection = commentSelection ?? lastSelectionRef.current
+    const trimmed = commentText.trim()
+    if (!selection || !trimmed || !onAddComment) return
+    onAddComment({
+      commentText: trimmed,
+      commentType,
+      from: selection.from,
+      to: selection.to,
+    })
+    setShowCommentInput(false)
+    setCommentText('')
+    setCommentSelection(null)
+  }
+
+  const closeAdvanced = (fn: () => unknown) => {
+    setAdvancedOpen(false)
+    void fn()
+  }
+
+  const insertInlineMath = () => {
+    if (!editor) return
+    const latex = window.prompt('Inline LaTeX', 'E = mc^2')?.trim()
+    if (!latex) return
+    const commands = editor.chain().focus() as unknown as {
+      insertInlineMath?: (options: { latex: string }) => { run: () => void }
+    }
+    commands.insertInlineMath?.({ latex })?.run()
+  }
+
+  const insertBlockMath = () => {
+    if (!editor) return
+    const latex = window.prompt('Block LaTeX', '\\\\frac{a}{b}')?.trim()
+    if (!latex) return
+    const commands = editor.chain().focus() as unknown as {
+      insertBlockMath?: (options: { latex: string }) => { run: () => void }
+    }
+    commands.insertBlockMath?.({ latex })?.run()
+  }
+
+  const insertMermaidBlock = () => {
+    if (!editor) return
+    editor.chain().focus().insertMermaidBlock().run()
+  }
+
+  const addComment = () => {
+    openCommentInput()
+  }
+
+  const prepareAutoReviewPrompts = async () => {
+    if (!editor) return
+    try {
+      const result = await copyAutoReviewPromptsToClipboard(editor)
+      if (!result.paragraphCount) {
+        window.alert('No paragraph text found for editorial review.')
+        return
+      }
+      window.alert(
+        `Copied editorial review prompts for ${
+          result.paragraphCount
+        } paragraph${result.paragraphCount === 1 ? '' : 's'}.`,
+      )
+    } catch {
+      window.alert('Could not copy auto-review prompts to the clipboard.')
+    }
+  }
+
+  const indentList = () => {
+    const commands = editor?.chain().focus() as unknown as {
+      sinkListItem?: (type: string) => { run: () => void }
+    }
+    const action = commands.sinkListItem?.('listItem')
+    action?.run()
+  }
+
+  if (!editor) return null
+
+  const LinkPrompt = overlays?.LinkPrompt
+  const CommentPrompt = overlays?.CommentPrompt
+  const showFullAdvancedTools = advancedTools === 'full'
+
+  return (
+    <>
+      <ToolbarRow>
+        <ToolBtn
+          disabled={!canUndo}
+          onClick={() => editor.chain().focus().undo().run()}
+          title="Undo"
+        >
+          <UndoOutlined />
+        </ToolBtn>
+        <ToolBtn
+          disabled={!canRedo}
+          onClick={() => editor.chain().focus().redo().run()}
+          title="Redo"
+        >
+          <RedoOutlined />
+        </ToolBtn>
+        <Divider />
+        <HeadingGroup />
+        <Divider />
+        <ToolBtn
+          $active={!!isBlockquote}
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          title="Blockquote"
+        >
+          <span aria-hidden="true">“</span>
+        </ToolBtn>
+        <ToolBtn
+          $active={!!isOrdered}
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          title="Ordered list"
+        >
+          <OrderedListOutlined />
+        </ToolBtn>
+        <ToolBtn
+          $active={!!isBullet}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          title="Bullet list"
+        >
+          <UnorderedListOutlined />
+        </ToolBtn>
+        <ToolBtn
+          onClick={indentList}
+          title="Indent list"
+          disabled={!isBullet && !isOrdered}
+        >
+          <span aria-hidden="true">⇥</span>
+        </ToolBtn>
+        <Divider />
+        {onAddComment ? (
+          <ToolBtn
+            onClick={addComment}
+            title="Add comment to selection"
+            disabled={!hasSelection}
+          >
+            <TagOutlined />
+          </ToolBtn>
+        ) : null}
+        <ToolBtn
+          $active={!!isBold}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          title="Bold"
+        >
+          <BoldOutlined />
+        </ToolBtn>
+        <ToolBtn
+          $active={!!isItalic}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          title="Italic"
+        >
+          <ItalicOutlined />
+        </ToolBtn>
+        <ToolBtn
+          $active={!!isCode}
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          title="Inline code"
+        >
+          <CodeOutlined />
+        </ToolBtn>
+        <ToolBtn $active={!!isLink} onClick={handleLinkClick} title="Link">
+          <LinkOutlined />
+        </ToolBtn>
+        <ToolBtn
+          $active={!!isUnderline}
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          title="Underline"
+        >
+          <UnderlineGlyph aria-hidden="true">U</UnderlineGlyph>
+        </ToolBtn>
+        {inlineTools ? (
+          <>
+            <Divider />
+            {inlineTools}
+          </>
+        ) : null}
+        <Divider />
+        <AdvancedWrapper ref={advancedRef}>
+          <ToolBtn
+            $active={!!advancedOpen}
+            onClick={() => setAdvancedOpen(open => !open)}
+            title="More tools"
+          >
+            <MoreOutlined />
+          </ToolBtn>
+          <AdvancedPanel open={advancedOpen}>
+            <AdvancedMenu>
+              <AdvancedItem
+                type="button"
+                onClick={() =>
+                  closeAdvanced(() =>
+                    editor.chain().focus().toggleSubscript().run(),
+                  )
+                }
+              >
+                <span aria-hidden="true">x₂</span>
+                <span>{isSubscript ? 'Remove subscript' : 'Subscript'}</span>
+              </AdvancedItem>
+              <AdvancedItem
+                type="button"
+                onClick={() =>
+                  closeAdvanced(() =>
+                    editor.chain().focus().toggleSuperscript().run(),
+                  )
+                }
+              >
+                <span aria-hidden="true">x²</span>
+                <span>
+                  {isSuperscript ? 'Remove superscript' : 'Superscript'}
+                </span>
+              </AdvancedItem>
+              {showFullAdvancedTools ? (
+                <>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() => closeAdvanced(insertInlineMath)}
+                  >
+                    <span aria-hidden="true">ƒx</span>
+                    <span>Insert inline equation</span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() => closeAdvanced(insertBlockMath)}
+                  >
+                    <span aria-hidden="true">∑</span>
+                    <span>Insert display equation</span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() => closeAdvanced(insertMermaidBlock)}
+                  >
+                    <PartitionOutlined />
+                    <span>Insert Mermaid diagram</span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().toggleTaskList().run(),
+                      )
+                    }
+                  >
+                    <CheckSquareOutlined />
+                    <span>{isTask ? 'Remove task list' : 'Task list'}</span>
+                  </AdvancedItem>
+                </>
+              ) : null}
+              {onAddComment ? (
+                <AdvancedItem
+                  type="button"
+                  onClick={() => closeAdvanced(addComment)}
+                  disabled={!hasSelection}
+                >
+                  <TagOutlined />
+                  <span>Add comment to selection</span>
+                </AdvancedItem>
+              ) : null}
+              {showFullAdvancedTools && hasAutoReviewPrompts ? (
+                <AdvancedItem
+                  type="button"
+                  onClick={() => closeAdvanced(prepareAutoReviewPrompts)}
+                >
+                  <FileTextOutlined />
+                  <span>Copy editorial review prompts</span>
+                </AdvancedItem>
+              ) : null}
+              {showFullAdvancedTools ? (
+                <>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().toggleBlockquote().run(),
+                      )
+                    }
+                  >
+                    <span>“</span>
+                    <span>
+                      {isBlockquote ? 'Remove blockquote' : 'Blockquote'}
+                    </span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().toggleCodeBlock().run(),
+                      )
+                    }
+                  >
+                    <CodeOutlined />
+                    <span>
+                      {isCodeBlock ? 'Remove code block' : 'Code block'}
+                    </span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor
+                          .chain()
+                          .focus()
+                          .insertTable({
+                            rows: 3,
+                            cols: 3,
+                            withHeaderRow: true,
+                          })
+                          .run(),
+                      )
+                    }
+                  >
+                    <TableOutlined />
+                    <span>
+                      {inTable ? 'Insert another table' : 'Insert table'}
+                    </span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().insertFootnote().run(),
+                      )
+                    }
+                  >
+                    <FileTextOutlined />
+                    <span>Insert footnote</span>
+                  </AdvancedItem>
+                </>
+              ) : null}
+              <AdvancedItem
+                type="button"
+                disabled={!indexActive && !hasSelection}
+                onClick={() =>
+                  closeAdvanced(() =>
+                    editor.chain().focus().toggleIndexMarker().run(),
+                  )
+                }
+              >
+                <TagOutlined />
+                <span>
+                  {indexActive ? 'Remove index marker' : 'Mark for index'}
+                </span>
+              </AdvancedItem>
+              {inTable ? (
+                <>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().addRowAfter().run(),
+                      )
+                    }
+                  >
+                    <TableOutlined />
+                    <span>Add table row</span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().addColumnAfter().run(),
+                      )
+                    }
+                  >
+                    <TableOutlined />
+                    <span>Add table column</span>
+                  </AdvancedItem>
+                  <AdvancedItem
+                    type="button"
+                    onClick={() =>
+                      closeAdvanced(() =>
+                        editor.chain().focus().deleteTable().run(),
+                      )
+                    }
+                  >
+                    <BlockOutlined />
+                    <span>Delete table</span>
+                  </AdvancedItem>
+                </>
+              ) : null}
+            </AdvancedMenu>
+          </AdvancedPanel>
+        </AdvancedWrapper>
+      </ToolbarRow>
+
+      {LinkPrompt ? (
+        <LinkPrompt
+          open={showLinkInput}
+          value={linkUrl}
+          onChange={setLinkUrl}
+          onConfirm={confirmLink}
+          onCancel={cancelLink}
+        />
+      ) : null}
+      {CommentPrompt ? (
+        <CommentPrompt
+          open={showCommentInput}
+          value={commentText}
+          commentType={commentType}
+          commentTypeOptions={COMMENT_TYPES.map(value => ({
+            value,
+            label: COMMENT_TYPE_LABELS[value],
+          }))}
+          onChange={setCommentText}
+          onCommentTypeChange={setCommentType}
+          onConfirm={confirmComment}
+          onCancel={cancelComment}
+          confirmDisabled={!commentText.trim() || !commentSelection}
+        />
+      ) : null}
+    </>
+  )
+}
+
+const AdvancedWrapper = styled.div`
+  position: relative;
+`
+
+const AdvancedPanel = styled(CollapsePanel)`
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 20;
+  min-width: 220px;
+  background: var(
+    --editor-toolbar-panel,
+    var(--editor-paper, var(--platform-colors-surface))
+  );
+  border: 1px solid
+    rgb(
+      from
+        var(
+          --editor-toolbar-border,
+          var(--editor-paper-border, var(--platform-colors-border))
+        )
+        r g b / 0.92
+    );
+  box-shadow: 0 18px 36px
+    rgb(
+      from
+        var(
+          --editor-toolbar-text,
+          var(--editor-paper-text, var(--platform-colors-text))
+        )
+        r g b / 0.1
+    );
+
+  &[data-open='false'] {
+    border-color: transparent;
+    display: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+`
+
+const AdvancedMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+`
+
+const AdvancedItem = styled.button.attrs({
+  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+  },
+})`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  color: var(
+    --editor-toolbar-text,
+    var(--editor-paper-text, var(--platform-colors-text))
+  );
+  text-align: left;
+  font-size: 12px;
+  transition: background 0.12s ease, color 0.12s ease;
+
+  &:hover:not(:disabled) {
+    background: rgb(
+      from
+        var(
+          --editor-toolbar-subtle,
+          var(--editor-paper-subtle, var(--platform-colors-surface-hover))
+        )
+        r g b / 0.9
+    );
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`
+
+const UnderlineGlyph = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  color: currentColor;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 3px;
+`