@puredesktop/platform-editor 1.0.0-beta.1

package/src/toolbar/Toolbar.tsx

@@ -0,0 +1,624 @@
+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;
+`