@allbluecn/web-app 0.6.2 → 0.7.0

package/src/components/tiptap/ui/improve-dropdown/use-improve-dropdown.ts

@@ -0,0 +1,294 @@
+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, useEffect, useMemo, useState } from "react"
+import type { Editor } from "@tiptap/react"
+import type { Language, TextOptions, Tone } from "../../lib/ai-types.ts"
+import { NodeSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
+
+// --- Icons ---
+import { AiSparklesIcon } from "../../icons/ai-sparkles-icon.tsx"
+
+// --- Lib ---
+import { isNodeTypeSelected } from "../../lib/utils.ts"
+
+/**
+ * AI commands that can be executed on selected text
+ */
+export type AICommand =
+  | "fixSpellingAndGrammar"
+  | "extend"
+  | "shorten"
+  | "simplify"
+  | "emojify"
+  | "complete"
+  | "summarize"
+
+/**
+ * Configuration for the improve dropdown functionality
+ */
+export interface UseImproveDropdownConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Optional text options for AI commands
+   * @default { stream: true, format: "rich-text" }
+   */
+  textOptions?: TextOptions
+  /**
+   * Whether to hide the dropdown when AI features are not available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+const AI_EXCLUDED_BLOCKS = [
+  "image",
+  "imageUpload",
+  "video",
+  "audio",
+  "table",
+  "codeBlock",
+  "horizontalRule",
+  "hardBreak",
+]
+
+/**
+ * Checks if AI commands can be used with the current selection
+ */
+export function canUseAi(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  const { selection } = editor.state
+
+  if (selection.empty) {
+    return false
+  }
+
+  if (selection instanceof NodeSelection) {
+    if (!selection.node.content.size) {
+      return false
+    }
+
+    const node = selection.node
+    if (AI_EXCLUDED_BLOCKS.includes(node.type.name)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Determines if the improve dropdown should be visible
+ */
+export function shouldShowImproveDropdown(params: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = params
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!editor.isEditable) return false
+
+  // The third argument 'true' checks whether the current selection is inside an image caption, and prevents showing AI features (improve dropdown) there
+  // If the selection is inside an image caption, we can't show the improve dropdown (AI features)
+  if (isNodeTypeSelected(editor, ["image"], true)) return false
+
+  if (!editor.isActive("code")) {
+    return canUseAi(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides improve dropdown functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyImproveDropdown() {
+ *   const {
+ *     isVisible,
+ *     isDisabled,
+ *     executeAICommand,
+ *     adjustTone,
+ *     translate,
+ *   } = useImproveDropdown()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       <Button onClick={() => executeAICommand('extend')}>
+ *         Extend text
+ *       </Button>
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImproveDropdown() {
+ *   const {
+ *     isVisible,
+ *     isDisabled,
+ *     executeAICommand,
+ *   } = useImproveDropdown({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     textOptions: { stream: false, format: 'plain-text' },
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useImproveDropdown(config?: UseImproveDropdownConfig) {
+  const {
+    editor: providedEditor,
+    textOptions,
+    hideWhenUnavailable = false,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
+  const isDisabled = !canUseAi(editor)
+
+  const defaultOptions = useMemo(
+    () => ({
+      stream: true,
+      format: "rich-text" as const,
+      ...textOptions,
+    }),
+    [textOptions]
+  )
+
+  const handleOpenChange = useCallback(
+    (open: boolean, callback?: (isOpen: boolean) => void) => {
+      if (!editor || isDisabled) return
+      setIsOpen(open)
+      callback?.(open)
+    },
+    [editor, isDisabled]
+  )
+
+  const executeAICommand = useCallback(
+    (command: AICommand) => {
+      if (!editor) return
+
+      editor.chain().focus().aiGenerationShow().run()
+
+      setTimeout(() => {
+        switch (command) {
+          case "fixSpellingAndGrammar":
+            editor.commands.aiFixSpellingAndGrammar(defaultOptions)
+            break
+          case "extend":
+            editor.commands.aiExtend(defaultOptions)
+            break
+          case "shorten":
+            editor.commands.aiShorten(defaultOptions)
+            break
+          case "simplify":
+            editor.commands.aiSimplify(defaultOptions)
+            break
+          case "emojify":
+            editor.commands.aiEmojify(defaultOptions)
+            break
+          case "complete":
+            editor.commands.aiComplete(defaultOptions)
+            break
+          case "summarize":
+            editor.commands.aiSummarize(defaultOptions)
+            break
+        }
+      }, 0)
+    },
+    [editor, defaultOptions]
+  )
+
+  const adjustTone = useCallback(
+    (tone: Tone) => {
+      if (!editor) return
+      editor.chain().focus().aiGenerationShow().run()
+
+      setTimeout(() => {
+        editor.commands.aiAdjustTone(tone, defaultOptions)
+      }, 0)
+    },
+    [editor, defaultOptions]
+  )
+
+  const translate = useCallback(
+    (language: Language) => {
+      if (!editor) return
+      editor.chain().focus().aiGenerationShow().run()
+
+      setTimeout(() => {
+        editor.commands.aiTranslate(language, defaultOptions)
+      }, 0)
+    },
+    [editor, defaultOptions]
+  )
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowImproveDropdown({
+          editor,
+          hideWhenUnavailable,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  return {
+    isVisible,
+    isDisabled,
+    isOpen,
+    setIsOpen,
+    handleOpenChange,
+    executeAICommand,
+    adjustTone,
+    translate,
+    label: getClientI18n().t('ai-assistant'),
+    Icon: AiSparklesIcon,
+  }
+}

package/src/components/tiptap/ui/indent-button/indent-button.tsx

@@ -0,0 +1,148 @@
+// 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 {
+  IndentAction,
+  UseIndentConfig,
+} from "./index.tsx"
+import {
+  INDENT_SHORTCUT_KEYS,
+  useIndent,
+} 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 IndentButtonProps
+  extends Omit<ButtonProps, "type">, UseIndentConfig {
+  /**
+   * 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 IndentShortcutBadge({
+  action,
+  shortcutKeys = INDENT_SHORTCUT_KEYS[action],
+}: {
+  action: IndentAction
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for controlling indentation in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useIndent` hook instead.
+ */
+export const IndentButton = forwardRef<HTMLButtonElement, IndentButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      action,
+      text,
+      hideWhenUnavailable = false,
+      onIndented,
+      showShortcut = false,
+      onClick,
+      icon: CustomIcon,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleIndent, label, canIndent, Icon, shortcutKeys } =
+      useIndent({
+        editor,
+        action,
+        hideWhenUnavailable,
+        onIndented,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleIndent()
+      },
+      [handleIndent, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    const RenderIcon = CustomIcon ?? Icon
+
+    return (
+      <Button
+        type="button"
+        disabled={!canIndent}
+        variant="ghost"
+        data-disabled={!canIndent}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <RenderIcon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <IndentShortcutBadge
+                action={action}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+IndentButton.displayName = "IndentButton"

package/src/components/tiptap/ui/indent-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 "./indent-button"
+export * from "./use-indent"

package/src/components/tiptap/ui/indent-button/use-indent.ts

@@ -0,0 +1,217 @@
+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, useEffect, useState } from "react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
+
+// --- Lib ---
+import { isExtensionAvailable } from "../../lib/utils.ts"
+
+// --- Icons ---
+import { IndentIncreaseIcon } from "../../icons/indent-increase-icon.tsx"
+import { IndentDecreaseIcon } from "../../icons/indent-decrease-icon.tsx"
+
+export type IndentAction = "indent" | "outdent"
+
+/**
+ * Configuration for the indent functionality
+ */
+export interface UseIndentConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The indent action to perform.
+   */
+  action: IndentAction
+  /**
+   * Whether the button should hide when indent is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful indent change.
+   */
+  onIndented?: () => void
+}
+
+export const INDENT_SHORTCUT_KEYS: Record<IndentAction, string> = {
+  indent: "Tab",
+  outdent: "Shift-Tab",
+}
+
+export const indentIcons = {
+  indent: IndentIncreaseIcon,
+  outdent: IndentDecreaseIcon,
+}
+
+export const indentLabels: Record<IndentAction, string> = {
+  indent: getClientI18n().t('increase-indent'),
+  outdent: getClientI18n().t('decrease-indent'),
+}
+
+/**
+ * Checks if indent action can be performed in the current editor state
+ */
+export function canPerformIndent(
+  editor: Editor | null,
+  action: IndentAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, "indent")) return false
+
+  if (action === "indent") {
+    return editor.can().indent()
+  }
+
+  return editor.can().outdent()
+}
+
+/**
+ * Performs the indent action in the editor
+ */
+export function performIndent(
+  editor: Editor | null,
+  action: IndentAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canPerformIndent(editor, action)) return false
+
+  if (action === "indent") {
+    return editor.chain().focus().indent().run()
+  }
+
+  return editor.chain().focus().outdent().run()
+}
+
+/**
+ * Determines if the indent button should be shown
+ */
+export function shouldShowIndentButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  action: IndentAction
+}): boolean {
+  const { editor, hideWhenUnavailable, action } = props
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!editor.isEditable) return false
+
+  if (!isExtensionAvailable(editor, "indent")) return false
+
+  return canPerformIndent(editor, action)
+}
+
+/**
+ * Custom hook that provides indent functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyIndentButton() {
+ *   const { isVisible, handleIndent } = useIndent({ action: "indent" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleIndent}>Indent</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyOutdentButton() {
+ *   const { isVisible, handleIndent, label, canIndent } = useIndent({
+ *     editor: myEditor,
+ *     action: "outdent",
+ *     hideWhenUnavailable: true,
+ *     onIndented: () => console.log('Outdented!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleIndent}
+ *       disabled={!canIndent}
+ *       aria-label={label}
+ *     >
+ *       Outdent
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useIndent(config: UseIndentConfig) {
+  const {
+    editor: providedEditor,
+    action,
+    hideWhenUnavailable = false,
+    onIndented,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canIndent = canPerformIndent(editor, action)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleUpdate = () => {
+      setIsVisible(
+        shouldShowIndentButton({ editor, action, hideWhenUnavailable })
+      )
+    }
+
+    handleUpdate()
+
+    editor.on("selectionUpdate", handleUpdate)
+    editor.on("transaction", handleUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleUpdate)
+      editor.off("transaction", handleUpdate)
+    }
+  }, [editor, hideWhenUnavailable, action])
+
+  const handleIndent = useCallback(() => {
+    if (!editor) return false
+
+    const success = performIndent(editor, action)
+    if (success) {
+      onIndented?.()
+    }
+    return success
+  }, [editor, action, onIndented])
+
+  return {
+    isVisible,
+    canIndent,
+    handleIndent,
+    label: indentLabels[action],
+    shortcutKeys: INDENT_SHORTCUT_KEYS[action],
+    Icon: indentIcons[action],
+  }
+}

package/src/components/tiptap/ui/link-popover/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 "./link-popover"
+export * from "./use-link-popover"

package/src/components/tiptap/ui/link-popover/link-popover.scss

@@ -0,0 +1,16 @@
+.tiptap-link-input {
+  font-size: 0.875rem;
+  border: none;
+
+  /* Clamp the input */
+  min-width: 12rem;
+  padding-right: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus {
+    text-overflow: clip;
+    overflow: visible;
+  }
+}