@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts

@@ -0,0 +1,498 @@
+import { getClientI18n } from '@/i18n/client'
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { useCallback } from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Icons ---
+import { CodeBlockIcon } from "../../icons/code-block-icon.tsx"
+import { HeadingOneIcon } from "../../icons/heading-one-icon.tsx"
+import { HeadingTwoIcon } from "../../icons/heading-two-icon.tsx"
+import { HeadingThreeIcon } from "../../icons/heading-three-icon.tsx"
+import { ImageIcon } from "../../icons/image-icon.tsx"
+import { ListIcon } from "../../icons/list-icon.tsx"
+import { ListOrderedIcon } from "../../icons/list-ordered-icon.tsx"
+import { BlockquoteIcon } from "../../icons/blockquote-icon.tsx"
+import { ListTodoIcon } from "../../icons/list-todo-icon.tsx"
+import { AiSparklesIcon } from "../../icons/ai-sparkles-icon.tsx"
+import { MinusIcon } from "../../icons/minus-icon.tsx"
+import { TypeIcon } from "../../icons/type-icon.tsx"
+import { AtSignIcon } from "../../icons/at-sign-icon.tsx"
+import { SmilePlusIcon } from "../../icons/smile-plus-icon.tsx"
+import { TableIcon } from "../../icons/table-icon.tsx"
+import { ListIndentedIcon } from "../../icons/list-indented-icon.tsx"
+import { LinkIcon } from "../../icons/link-icon.tsx"
+import { NetworkIcon } from "../../icons/network-icon.tsx"
+
+// --- Lib ---
+import {
+  isExtensionAvailable,
+  isNodeInSchema,
+} from "../../lib/utils.ts"
+import {
+  findSelectionPosition,
+  hasContentAbove,
+} from "../../lib/advanced-utils.ts"
+
+// --- Tiptap UI ---
+import type { SuggestionItem } from "../../ui-utils/suggestion-menu/index.tsx"
+import { addEmojiTrigger } from "../emoji-trigger-button/index.tsx"
+import { addMentionTrigger } from "../mention-trigger-button/index.tsx"
+
+export interface SlashMenuConfig {
+  enabledItems?: SlashMenuItemType[]
+  customItems?: SuggestionItem[]
+  itemGroups?: {
+    [key in SlashMenuItemType]?: string
+  }
+  showGroups?: boolean
+}
+
+const texts = {
+  // AI
+  continue_writing: {
+    title: getClientI18n().t('continue-writing'),
+    subtext: getClientI18n().t('continue-writing'),
+    keywords: ["continue", "write", "continue writing", "ai", getClientI18n().t('continue'), getClientI18n().t('continue-writing')],
+    badge: AiSparklesIcon,
+    group: "AI",
+  },
+  ai_ask_button: {
+    title: getClientI18n().t('ask-ai'),
+    subtext: getClientI18n().t('let-ai-generate'),
+    keywords: ["ai", "ask", "generate", "AI", getClientI18n().t('smart'), getClientI18n().t('generate')],
+    badge: AiSparklesIcon,
+    group: "AI",
+  },
+
+  // Style
+  text: {
+    title: getClientI18n().t('paragraph'),
+    subtext: getClientI18n().t('normal-paragraph'),
+    keywords: ["p", "paragraph", "text", getClientI18n().t('paragraph'), getClientI18n().t('paragraph')],
+    badge: TypeIcon,
+    group: getClientI18n().t('style'),
+  },
+  heading_1: {
+    title: getClientI18n().t('heading-1'),
+    subtext: getClientI18n().t('top-level-heading'),
+    shortcuts: ["#"],
+    keywords: ["h", "heading1", "h1", getClientI18n().t('heading-1'), getClientI18n().t('level-1'), "h1"],
+    badge: HeadingOneIcon,
+    group: getClientI18n().t('style'),
+  },
+  heading_2: {
+    title: getClientI18n().t('heading-2'),
+    subtext: getClientI18n().t('main-section-heading'),
+    shortcuts: ["##"],
+    keywords: ["h2", "heading2", "subheading", getClientI18n().t('heading-2'), getClientI18n().t('level-2')],
+    badge: HeadingTwoIcon,
+    group: getClientI18n().t('style'),
+  },
+  heading_3: {
+    title: getClientI18n().t('heading-3'),
+    subtext: getClientI18n().t('sub-section-heading'),
+    shortcuts: ["###"],
+    keywords: ["h3", "heading3", "subheading", getClientI18n().t('heading-3'), getClientI18n().t('level-3')],
+    badge: HeadingThreeIcon,
+    group: getClientI18n().t('style'),
+  },
+  bullet_list: {
+    title: getClientI18n().t('unordered-list'),
+    subtext: getClientI18n().t('unordered-bullet-list'),
+    shortcuts: ["-"],
+    keywords: ["ul", "li", "list", "bulletlist", "bullet list", getClientI18n().t('unordered'), getClientI18n().t('list')],
+    badge: ListIcon,
+    group: getClientI18n().t('style'),
+  },
+  ordered_list: {
+    title: getClientI18n().t('ordered-list'),
+    subtext: getClientI18n().t('ordered-numbered-list'),
+    shortcuts: ["1."],
+    keywords: ["ol", "li", "list", "numberedlist", "numbered list", getClientI18n().t('ordered'), getClientI18n().t('numbered')],
+    badge: ListOrderedIcon,
+    group: getClientI18n().t('style'),
+  },
+  task_list: {
+    title: getClientI18n().t('todo-list'),
+    subtext: getClientI18n().t('task-list'),
+    keywords: ["tasklist", "task list", "todo", "checklist", getClientI18n().t('todo'), getClientI18n().t('task')],
+    badge: ListTodoIcon,
+    group: getClientI18n().t('style'),
+  },
+  quote: {
+    title: getClientI18n().t('quote'),
+    subtext: getClientI18n().t('blockquote'),
+    shortcuts: [">", "》", "〉"],
+    keywords: ["quote", "blockquote", getClientI18n().t('quote')],
+    badge: BlockquoteIcon,
+    group: getClientI18n().t('style'),
+  },
+  code_block: {
+    title: getClientI18n().t('code-block'),
+    subtext: getClientI18n().t('syntax-highlighted-code-block'),
+    shortcuts: ["```", "···"],
+    keywords: ["code", "pre", getClientI18n().t('code')],
+    badge: CodeBlockIcon,
+    group: getClientI18n().t('style'),
+  },
+
+  // 绘图
+  mindmap: {
+    title: getClientI18n().t('mind-map'),
+    subtext: getClientI18n().t('insert-editable-mind-map'),
+    keywords: ["mindmap", "mind", "map", getClientI18n().t('mind-map'), getClientI18n().t('mind-map')],
+    badge: NetworkIcon,
+    group: getClientI18n().t('drawing'),
+  },
+
+  // Insert
+  mention: {
+    title: getClientI18n().t('mention'),
+    subtext: getClientI18n().t('mention-user-or-item'),
+    shortcuts: ["@"],
+    keywords: ["mention", "user", "item", "tag", getClientI18n().t('mention'), "@"],
+    badge: AtSignIcon,
+    group: getClientI18n().t('insert'),
+  },
+  emoji: {
+    title: getClientI18n().t('emoji'),
+    subtext: getClientI18n().t('insert-emoji'),
+    shortcuts: [":"],
+    keywords: ["emoji", "emoticon", "smiley", getClientI18n().t('emoji'), getClientI18n().t('smiley')],
+    badge: SmilePlusIcon,
+    group: getClientI18n().t('insert'),
+  },
+  table: {
+    title: getClientI18n().t('table'),
+    subtext: getClientI18n().t('insert-table'),
+    keywords: ["table", getClientI18n().t('table')],
+    badge: TableIcon,
+    group: getClientI18n().t('insert'),
+  },
+  divider: {
+    title: getClientI18n().t('divider'),
+    subtext: getClientI18n().t('horizontal-divider'),
+    shortcuts: ["---"],
+    keywords: ["hr", "horizontalRule", "line", "separator", getClientI18n().t('divider'), getClientI18n().t('divider')],
+    badge: MinusIcon,
+    group: getClientI18n().t('insert'),
+  },
+  toc: {
+    title: getClientI18n().t('table-of-contents'),
+    subtext: getClientI18n().t('insert-toc'),
+    keywords: ["toc", "tableofcontents", "table of contents", getClientI18n().t('table-of-contents')],
+    badge: ListIndentedIcon,
+    group: getClientI18n().t('insert'),
+  },
+
+  // Upload
+  ref: {
+    title: getClientI18n().t('reference-doc'),
+    subtext: getClientI18n().t('reference-other-doc'),
+    shortcuts: ["[[", "【【"],
+    keywords: ["ref", "reference", "link", "mention", getClientI18n().t('quote'), getClientI18n().t('reference-doc')],
+    badge: LinkIcon,
+    group: getClientI18n().t('insert'),
+  },
+  image: {
+    title: getClientI18n().t('image'),
+    subtext: getClientI18n().t('zoomable-image-with-caption'),
+    keywords: [
+      "image",
+      "imageUpload",
+      "upload",
+      "img",
+      "picture",
+      "media",
+      "url",
+      getClientI18n().t('image'),
+      getClientI18n().t('image'),
+    ],
+    badge: ImageIcon,
+    group: getClientI18n().t('upload'),
+  },
+}
+
+export type SlashMenuItemType = keyof typeof texts
+
+const getItemImplementations = () => {
+  return {
+    // AI
+    continue_writing: {
+      check: (editor: Editor) => {
+        const { hasContent } = hasContentAbove(editor)
+        const extensionsReady = isExtensionAvailable(editor, ["ai"])
+        return extensionsReady && hasContent
+      },
+      action: ({ editor }: { editor: Editor }) => {
+        const editorChain = editor.chain().focus()
+
+        const nodeSelectionPosition = findSelectionPosition({ editor })
+
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition)
+        }
+
+        editorChain.run()
+
+        editor.chain().focus().aiGenerationShow().run()
+
+        requestAnimationFrame(() => {
+          const { hasContent, content } = hasContentAbove(editor)
+
+          const snippet =
+            content.length > 500 ? `...${content.slice(-500)}` : content
+
+          const prompt = hasContent
+            ? getClientI18n().t('continue-from-above', { snippet })
+            : getClientI18n().t('write-new-paragraph')
+
+          editor
+            .chain()
+            .focus()
+            .aiTextPrompt({
+              stream: true,
+              format: "rich-text",
+              text: prompt,
+            })
+            .run()
+        })
+      },
+    },
+    ai_ask_button: {
+      check: (editor: Editor) =>
+        isExtensionAvailable(editor, ["ai"]),
+      action: ({ editor }: { editor: Editor }) => {
+        const editorChain = editor.chain().focus()
+
+        const nodeSelectionPosition = findSelectionPosition({ editor })
+
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition)
+        }
+
+        editorChain.run()
+
+        editor.chain().focus().aiGenerationShow().run()
+      },
+    },
+
+    // Style
+    text: {
+      check: (editor: Editor) => isNodeInSchema("paragraph", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().setParagraph().run()
+      },
+    },
+    heading_1: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 1 }).run()
+      },
+    },
+    heading_2: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 2 }).run()
+      },
+    },
+    heading_3: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 3 }).run()
+      },
+    },
+    bullet_list: {
+      check: (editor: Editor) => isNodeInSchema("bulletList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleBulletList().run()
+      },
+    },
+    ordered_list: {
+      check: (editor: Editor) => isNodeInSchema("orderedList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleOrderedList().run()
+      },
+    },
+    task_list: {
+      check: (editor: Editor) => isNodeInSchema("taskList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleTaskList().run()
+      },
+    },
+    quote: {
+      check: (editor: Editor) => isNodeInSchema("blockquote", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleBlockquote().run()
+      },
+    },
+    code_block: {
+      check: (editor: Editor) => isNodeInSchema("codeBlock", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleNode("codeBlock", "paragraph").run()
+      },
+    },
+
+    // 绘图
+    mindmap: {
+      check: (editor: Editor) => isNodeInSchema("mindmap", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().insertContent({ type: "mindmap" }).run()
+      },
+    },
+
+    // Insert
+    mention: {
+      check: (editor: Editor) =>
+        isExtensionAvailable(editor, ["mention", "mentionAdvanced"]),
+      action: ({ editor }: { editor: Editor }) => addMentionTrigger(editor),
+    },
+    emoji: {
+      check: (editor: Editor) =>
+        isExtensionAvailable(editor, ["emoji", "emojiPicker"]),
+      action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
+    },
+    divider: {
+      check: (editor: Editor) => isNodeInSchema("horizontalRule", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().setHorizontalRule().run()
+      },
+    },
+    toc: {
+      check: (editor: Editor) => isNodeInSchema("tocNode", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().insertTocNode().run()
+      },
+    },
+    table: {
+      check: (editor: Editor) => isNodeInSchema("table", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor
+          .chain()
+          .focus()
+          .insertTable({
+            rows: 3,
+            cols: 3,
+            withHeaderRow: false,
+          })
+          .run()
+      },
+    },
+
+    ref: {
+      check: () => true,
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().insertContent({ type: "text", text: "[[" }).run()
+      },
+    },
+
+    // Upload
+    image: {
+      check: (editor: Editor) => isNodeInSchema("image", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor
+          .chain()
+          .focus()
+          .insertContent({
+            type: "imageUpload",
+          })
+          .run()
+      },
+    },
+  }
+}
+
+function organizeItemsByGroups(
+  items: SuggestionItem[],
+  showGroups: boolean
+): SuggestionItem[] {
+  if (!showGroups) {
+    return items.map((item) => ({ ...item, group: "" }))
+  }
+
+  const groups: { [groupLabel: string]: SuggestionItem[] } = {}
+
+  // Group items
+  items.forEach((item) => {
+    const groupLabel = item.group || ""
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = []
+    }
+    groups[groupLabel].push(item)
+  })
+
+  // Flatten groups in order (this maintains the visual order for keyboard navigation)
+  const organizedItems: SuggestionItem[] = []
+  Object.entries(groups).forEach(([, groupItems]) => {
+    organizedItems.push(...groupItems)
+  })
+
+  return organizedItems
+}
+
+/**
+ * Custom hook for slash dropdown menu functionality
+ */
+export function useSlashDropdownMenu(config?: SlashMenuConfig) {
+  const getSlashMenuItems = useCallback(
+    (editor: Editor) => {
+      const items: SuggestionItem[] = []
+
+      const enabledItems =
+        config?.enabledItems || (Object.keys(texts) as SlashMenuItemType[])
+      const showGroups = config?.showGroups !== false
+
+      const itemImplementations = getItemImplementations()
+
+      enabledItems.forEach((itemType) => {
+        const itemImpl = itemImplementations[itemType]
+        const itemText = texts[itemType]
+
+        if (itemImpl && itemText && itemImpl.check(editor)) {
+          const item: SuggestionItem = {
+            onSelect: ({ editor }) => itemImpl.action({ editor }),
+            ...itemText,
+          }
+
+          if (config?.itemGroups?.[itemType]) {
+            item.group = config.itemGroups[itemType]
+          } else if (!showGroups) {
+            item.group = ""
+          }
+
+          items.push(item)
+        }
+      })
+
+      if (config?.customItems) {
+        items.push(...config.customItems)
+      }
+
+      // Reorganize items by groups to ensure keyboard navigation works correctly
+      return organizeItemsByGroups(items, showGroups)
+    },
+    [config]
+  )
+
+  return {
+    getSlashMenuItems,
+    config,
+  }
+}

package/src/components/tiptap/ui/text-align-button/index.tsx

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export * from "./text-align-button"
+export * from "./use-text-align"

package/src/components/tiptap/ui/text-align-button/text-align-button.tsx

@@ -0,0 +1,160 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../lib/utils.ts"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
+
+// --- Tiptap UI ---
+import type {
+  TextAlign,
+  UseTextAlignConfig,
+} from "./index.tsx"
+import {
+  TEXT_ALIGN_SHORTCUT_KEYS,
+  useTextAlign,
+} from "./index.tsx"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../ui-primitive/button/index.tsx"
+import { Button } from "../../ui-primitive/button/index.tsx"
+import { Badge } from "../../ui-primitive/badge/index.tsx"
+
+type IconProps = React.SVGProps<SVGSVGElement>
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement
+
+export interface TextAlignButtonProps
+  extends Omit<ButtonProps, "type">, UseTextAlignConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+  /**
+   * Optional custom icon component to render instead of the default.
+   */
+  icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>
+}
+
+export function TextAlignShortcutBadge({
+  align,
+  shortcutKeys = TEXT_ALIGN_SHORTCUT_KEYS[align],
+}: {
+  align: TextAlign
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for setting text alignment in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTextAlign` hook instead.
+ */
+export const TextAlignButton = forwardRef<
+  HTMLButtonElement,
+  TextAlignButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      align,
+      text,
+      hideWhenUnavailable = false,
+      onAligned,
+      showShortcut = false,
+      onClick,
+      icon: CustomIcon,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      handleTextAlign,
+      label,
+      canAlign,
+      isActive,
+      Icon,
+      shortcutKeys,
+    } = useTextAlign({
+      editor,
+      align,
+      hideWhenUnavailable,
+      onAligned,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleTextAlign()
+      },
+      [handleTextAlign, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    const RenderIcon = CustomIcon ?? Icon
+
+    return (
+      <Button
+        type="button"
+        disabled={!canAlign}
+        variant="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canAlign}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <RenderIcon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <TextAlignShortcutBadge
+                align={align}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TextAlignButton.displayName = "TextAlignButton"