@allbluecn/web-app 0.6.3 → 0.7.1

package/src/components/tiptap/ui/undo-redo-button/undo-redo-button.tsx

@@ -0,0 +1,141 @@
+// 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 {
+  UndoRedoAction,
+  UseUndoRedoConfig,
+} from "./index.tsx"
+import {
+  UNDO_REDO_SHORTCUT_KEYS,
+  useUndoRedo,
+} 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"
+
+export interface UndoRedoButtonProps
+  extends Omit<ButtonProps, "type">, UseUndoRedoConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function HistoryShortcutBadge({
+  action,
+  shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action],
+}: {
+  action: UndoRedoAction
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for triggering undo/redo actions in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHistory` hook instead.
+ */
+export const UndoRedoButton = forwardRef<
+  HTMLButtonElement,
+  UndoRedoButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      action,
+      text,
+      hideWhenUnavailable = false,
+      onExecuted,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } =
+      useUndoRedo({
+        editor,
+        action,
+        hideWhenUnavailable,
+        onExecuted,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleAction()
+      },
+      [handleAction, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canExecute}
+        variant="ghost"
+        data-disabled={!canExecute}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <HistoryShortcutBadge
+                action={action}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+UndoRedoButton.displayName = "UndoRedoButton"

package/src/components/tiptap/ui/undo-redo-button/use-undo-redo.ts

@@ -0,0 +1,207 @@
+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 { isNodeTypeSelected } from "../../lib/utils.ts"
+
+// --- Icons ---
+import { Redo2Icon } from "../../icons/redo2-icon.tsx"
+import { Undo2Icon } from "../../icons/undo2-icon.tsx"
+
+export type UndoRedoAction = "undo" | "redo"
+
+/**
+ * Configuration for the history functionality
+ */
+export interface UseUndoRedoConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The history action to perform (undo or redo).
+   */
+  action: UndoRedoAction
+  /**
+   * Whether the button should hide when action is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful action execution.
+   */
+  onExecuted?: () => void
+}
+
+export const UNDO_REDO_SHORTCUT_KEYS: Record<UndoRedoAction, string> = {
+  undo: "mod+z",
+  redo: "mod+shift+z",
+}
+
+export const historyActionLabels: Record<UndoRedoAction, string> = {
+  undo: getClientI18n().t('undo'),
+  redo: getClientI18n().t('redo'),
+}
+
+export const historyIcons = {
+  undo: Undo2Icon,
+  redo: Redo2Icon,
+}
+
+/**
+ * Checks if a history action can be executed
+ */
+export function canExecuteUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (isNodeTypeSelected(editor, ["image"])) return false
+
+  return action === "undo" ? editor.can().undo() : editor.can().redo()
+}
+
+/**
+ * Executes a history action on the editor
+ */
+export function executeUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canExecuteUndoRedoAction(editor, action)) return false
+
+  const chain = editor.chain().focus()
+  return action === "undo" ? chain.undo().run() : chain.redo().run()
+}
+
+/**
+ * Determines if the history button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  action: UndoRedoAction
+}): boolean {
+  const { editor, hideWhenUnavailable, action } = props
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!editor.isEditable) return false
+
+  if (!editor.isActive("code")) {
+    return canExecuteUndoRedoAction(editor, action)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides history functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleUndoButton() {
+ *   const { isVisible, handleAction } = useHistory({ action: "undo" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleAction}>Undo</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedRedoButton() {
+ *   const { isVisible, handleAction, label } = useHistory({
+ *     editor: myEditor,
+ *     action: "redo",
+ *     hideWhenUnavailable: true,
+ *     onExecuted: () => console.log('Action executed!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleAction}
+ *       aria-label={label}
+ *     >
+ *       Redo
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useUndoRedo(config: UseUndoRedoConfig) {
+  const {
+    editor: providedEditor,
+    action,
+    hideWhenUnavailable = false,
+    onExecuted,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canExecute = canExecuteUndoRedoAction(editor, action)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, action }))
+    }
+
+    handleUpdate()
+
+    editor.on("transaction", handleUpdate)
+
+    return () => {
+      editor.off("transaction", handleUpdate)
+    }
+  }, [editor, hideWhenUnavailable, action])
+
+  const handleAction = useCallback(() => {
+    if (!editor) return false
+
+    const success = executeUndoRedoAction(editor, action)
+    if (success) {
+      onExecuted?.()
+    }
+    return success
+  }, [editor, action, onExecuted])
+
+  return {
+    isVisible,
+    handleAction,
+    canExecute,
+    label: historyActionLabels[action],
+    shortcutKeys: UNDO_REDO_SHORTCUT_KEYS[action],
+    Icon: historyIcons[action],
+  }
+}

package/src/components/tiptap/ui-primitive/avatar/avatar.scss

@@ -0,0 +1,118 @@
+:root {
+  --tiptap-avatar-border-color: var(--white);
+  --tiptap-avatar-fallback-bg-color: var(--tt-gray-light-200);
+  --tiptap-avatar-item-bg-color: var(--tt-gray-light-200);
+  --tiptap-avatar-fallback-text-color: var(--tt-gray-light-a-600);
+}
+
+.dark {
+  --tiptap-avatar-border-color: var(--tt-gray-dark-200);
+  --tiptap-avatar-fallback-bg-color: var(--tt-gray-dark-200);
+  --tiptap-avatar-item-bg-color: var(--tt-gray-dark-300);
+  --tiptap-avatar-fallback-text-color: var(--tt-gray-dark-a-600);
+}
+
+.tiptap-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+
+  &[data-size="default"] {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    .tiptap-avatar-fallback {
+      font-size: 0.5rem;
+    }
+  }
+
+  &[data-size="sm"] {
+    width: 1.25rem;
+    height: 1.25rem;
+
+    .tiptap-avatar-fallback {
+      font-size: 0.4375rem;
+    }
+  }
+
+  &[data-size="lg"] {
+    width: 1.75rem;
+    height: 1.75rem;
+
+    .tiptap-avatar-fallback {
+      font-size: 0.625rem;
+    }
+  }
+
+  &[data-size="xl"] {
+    width: 2.25rem;
+    height: 2.25rem;
+
+    .tiptap-avatar-fallback {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+.tiptap-avatar-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  background-color: var(
+    --dynamic-user-color,
+    var(--tiptap-avatar-item-bg-color)
+  );
+  border-radius: 50%;
+}
+
+.tiptap-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.tiptap-avatar-fallback {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--tiptap-avatar-fallback-text-color);
+  border-radius: 50%;
+  font-weight: 600;
+}
+
+.tiptap-avatar-bg {
+  position: absolute;
+  inset: 0;
+  background-color: var(
+    --dynamic-user-color,
+    var(--tiptap-avatar-item-bg-color)
+  );
+  border-radius: 50%;
+}
+
+.tiptap-avatar-group {
+  display: inline-flex;
+  align-items: center;
+
+  .tiptap-avatar-image,
+  .tiptap-avatar-fallback {
+    border: 2px solid var(--tiptap-avatar-border-color);
+  }
+
+  .tiptap-avatar:not(:first-child) {
+    margin-left: -0.5rem;
+  }
+}

package/src/components/tiptap/ui-primitive/avatar/avatar.tsx

@@ -0,0 +1,255 @@
+// 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 {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react"
+import "./avatar.scss"
+
+type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error"
+type Size = "default" | "sm" | "lg" | "xl"
+
+interface AvatarContextValue {
+  imageLoadingStatus: ImageLoadingStatus
+  onImageLoadingStatusChange: (status: ImageLoadingStatus) => void
+  size: Size
+}
+
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: Size
+  userColor?: string
+}
+
+interface AvatarImageProps extends Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  "onLoadingStatusChange" | "src"
+> {
+  src?: string
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void
+}
+
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+  delayMs?: number
+}
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  maxVisible?: number
+  children: React.ReactNode
+}
+
+const AvatarContext = createContext<AvatarContextValue | undefined>(undefined)
+
+const useAvatarContext = () => {
+  const context = useContext(AvatarContext)
+  if (!context) {
+    throw new Error("Avatar components must be used within an Avatar.Root")
+  }
+  return context
+}
+
+const useImageLoadingStatus = (
+  src?: string,
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy
+): ImageLoadingStatus => {
+  const initialStatus = !src ? "error" : "loading"
+  const [loadingStatus, setLoadingStatus] =
+    useState<ImageLoadingStatus>(initialStatus)
+
+  useLayoutEffect(() => {
+    if (!src) {
+      return
+    }
+
+    let isMounted = true
+    const image = new window.Image()
+
+    const updateStatus = (status: ImageLoadingStatus) => () => {
+      if (!isMounted) return
+      setLoadingStatus(status)
+    }
+
+    image.onload = updateStatus("loaded")
+    image.onerror = updateStatus("error")
+    image.src = src
+    if (referrerPolicy) image.referrerPolicy = referrerPolicy
+
+    return () => {
+      isMounted = false
+    }
+  }, [src, referrerPolicy])
+
+  return loadingStatus
+}
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
+  (
+    { children, className = "", size = "default", userColor, ...props },
+    ref
+  ) => {
+    const [imageLoadingStatus, setImageLoadingStatus] =
+      useState<ImageLoadingStatus>("idle")
+
+    const onImageLoadingStatusChange = useCallback(
+      (status: ImageLoadingStatus) => {
+        setImageLoadingStatus(status)
+      },
+      []
+    )
+
+    const contextValue = useMemo(
+      () => ({
+        imageLoadingStatus,
+        onImageLoadingStatusChange,
+        size,
+      }),
+      [imageLoadingStatus, onImageLoadingStatusChange, size]
+    )
+
+    const style = userColor
+      ? ({ "--dynamic-user-color": userColor } as React.CSSProperties)
+      : undefined
+
+    return (
+      <AvatarContext.Provider value={contextValue}>
+        <span
+          {...props}
+          ref={ref}
+          className={`tiptap-avatar ${className}`}
+          style={style}
+          data-size={size}
+        >
+          <span className="tiptap-avatar-item">{children}</span>
+        </span>
+      </AvatarContext.Provider>
+    )
+  }
+)
+
+Avatar.displayName = "Avatar"
+
+export const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
+  ({ onLoadingStatusChange, src, className = "", ...props }, ref) => {
+    const { onImageLoadingStatusChange } = useAvatarContext()
+    const imageLoadingStatus = useImageLoadingStatus(src, props.referrerPolicy)
+
+    useLayoutEffect(() => {
+      if (imageLoadingStatus !== "idle") {
+        onLoadingStatusChange?.(imageLoadingStatus)
+        onImageLoadingStatusChange(imageLoadingStatus)
+      }
+    }, [imageLoadingStatus, onLoadingStatusChange, onImageLoadingStatusChange])
+
+    if (imageLoadingStatus !== "loaded") return null
+
+    return (
+      <img
+        alt=""
+        {...props}
+        ref={ref}
+        src={src}
+        className={`tiptap-avatar-image ${className}`}
+      />
+    )
+  }
+)
+
+AvatarImage.displayName = "AvatarImage"
+
+export const AvatarFallback = forwardRef<HTMLSpanElement, AvatarFallbackProps>(
+  ({ delayMs, className = "", children, ...props }, ref) => {
+    const context = useAvatarContext()
+    const [canRender, setCanRender] = useState(delayMs === undefined)
+
+    useEffect(() => {
+      if (delayMs !== undefined) {
+        const timerId = window.setTimeout(() => setCanRender(true), delayMs)
+        return () => window.clearTimeout(timerId)
+      }
+    }, [delayMs])
+
+    if (!canRender || context.imageLoadingStatus === "loaded") return null
+
+    return (
+      <>
+        <span className={`tiptap-avatar-bg ${className}`} />
+        <span
+          {...props}
+          ref={ref}
+          className={`tiptap-avatar-fallback ${className}`}
+        >
+          {children}
+        </span>
+      </>
+    )
+  }
+)
+
+AvatarFallback.displayName = "AvatarFallback"
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  maxVisible,
+  children,
+  className = "",
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children)
+  const visibleAvatars = maxVisible
+    ? childrenArray.slice(0, maxVisible)
+    : childrenArray
+  const remainingCount = childrenArray.length - visibleAvatars.length
+
+  let avatarProps: AvatarProps = {}
+
+  Children.forEach(children, (child) => {
+    if (
+      isValidElement(child) &&
+      child.type &&
+      typeof child.type !== "string" &&
+      (child.type as { displayName?: string }).displayName === "Avatar"
+    ) {
+      avatarProps = { ...avatarProps, ...(child.props as AvatarProps) }
+      return
+    }
+  })
+
+  return (
+    <div
+      {...props}
+      className={`tiptap-avatar-group ${className}`}
+      data-max-user-visible={maxVisible}
+    >
+      {visibleAvatars}
+      {remainingCount > 0 && (
+        <Avatar {...avatarProps}>
+          <AvatarFallback>+{remainingCount}</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  )
+}
+
+AvatarGroup.displayName = "AvatarGroup"