@tuturuuu/ui 0.28.0 → 0.29.0

package/src/components/ui/text-editor/tool-bar.tsx

@@ -32,76 +32,20 @@ import {
 import { Button } from '@tuturuuu/ui/button';
 import { Input } from '@tuturuuu/ui/input';
 import { toast } from '@tuturuuu/ui/sonner';
-import { Toggle } from '@tuturuuu/ui/toggle';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TextEditorColorControls } from './color-controls';
+import { type EditorCopyLabels, EditorCopyMenu } from './copy-menu';
 import {
   MAX_IMAGE_SIZE,
   MAX_VIDEO_SIZE,
   StorageQuotaError,
 } from './media-utils';
-import { hotkeyLabel, TOOLBAR_GROUPS, TOOLBAR_LABELS } from './toolbar-config';
+import { TOOLBAR_GROUPS } from './toolbar-config';
+import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
 
 type LinkEditorContext = 'bubble' | 'popover' | null;
 
-// ---------------------------------------------------------------------------
-// Shared sub-components
-// ---------------------------------------------------------------------------
-
-interface ToolbarButtonProps {
-  id: string;
-  label?: string;
-  icon: React.ReactNode;
-  pressed: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-/** A single toolbar toggle button wrapped with a tooltip showing name + hotkey. */
-function ToolbarButton({
-  id,
-  label: labelOverride,
-  icon,
-  pressed,
-  onClick,
-  disabled,
-}: ToolbarButtonProps) {
-  const label = labelOverride ?? TOOLBAR_LABELS[id] ?? id;
-  const shortcut = hotkeyLabel(id);
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Toggle
-          pressed={pressed}
-          onPressedChange={() => onClick()}
-          onMouseDown={(e) => e.preventDefault()}
-          disabled={disabled}
-          className="h-8 w-8 rounded-md border border-transparent transition-colors data-[state=on]:border-foreground/10 data-[state=on]:bg-dynamic-surface/80 data-[state=on]:text-foreground"
-          aria-label={label}
-        >
-          {icon}
-        </Toggle>
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="flex items-center gap-1.5">
-        <span>{label}</span>
-        {shortcut && (
-          <kbd className="rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-            {shortcut}
-          </kbd>
-        )}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-/** Vertical divider between toolbar groups */
-function ToolbarSeparator() {
-  return <div className="mx-0.5 h-5 w-px shrink-0 bg-dynamic-border/60" />;
-}
-
 // ---------------------------------------------------------------------------
 // Main ToolBar (BubbleMenu)
 // ---------------------------------------------------------------------------
@@ -898,35 +842,32 @@ export function ToolBar({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Fixed Toolbar (always-visible, rendered above the editor)
-// ---------------------------------------------------------------------------
-
 interface FixedToolbarProps {
   editor: Editor | null;
+  leadingContent?: React.ReactNode;
   workspaceId?: string;
   onImageUpload?: (file: File) => Promise<string>;
   onConvertToTask?: () => void | Promise<void>;
   className?: string;
   ref?: React.Ref<HTMLDivElement>;
   toggleBlockLabel?: string;
+  copyLabels?: EditorCopyLabels;
 }
-
 export function FixedToolbar({
   editor,
+  leadingContent,
   workspaceId,
   onImageUpload,
   onConvertToTask,
   className,
   ref,
   toggleBlockLabel,
+  copyLabels,
 }: FixedToolbarProps) {
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [isUploadingVideo, setIsUploadingVideo] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const videoInputRef = useRef<HTMLInputElement>(null);
-
-  // Build the formatting option map
   const formattingOptions = useMemo(() => {
     if (!editor)
       return new Map<
@@ -1140,12 +1081,11 @@ export function FixedToolbar({
   );
 
   if (!editor) return null;
-
   return (
     <div
       ref={ref}
       className={cn(
-        'sticky top-0 z-40 flex flex-wrap items-center gap-1 rounded-t-md border-dynamic-border border-b bg-background/95 px-2 py-1.5 backdrop-blur-sm',
+        '@container scrollbar-hide sticky top-0 z-40 flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain whitespace-nowrap rounded-t-md border-dynamic-border border-b bg-background/95 px-2 py-1.5 backdrop-blur-sm',
         className
       )}
     >
@@ -1163,7 +1103,12 @@ export function FixedToolbar({
         onChange={handleVideoUpload}
         className="hidden"
       />
-
+      {leadingContent ? (
+        <>
+          <div className="shrink-0">{leadingContent}</div>
+          <ToolbarSeparator />
+        </>
+      ) : null}
       {/* Grouped formatting options with separators */}
       {TOOLBAR_GROUPS.map((group, gi) => (
         <div key={gi} className="contents">
@@ -1233,6 +1178,9 @@ export function FixedToolbar({
           />
         </>
       )}
+
+      <ToolbarSeparator />
+      <EditorCopyMenu editor={editor} labels={copyLabels} />
     </div>
   );
 }

package/src/components/ui/text-editor/toolbar-controls.tsx

@@ -0,0 +1,59 @@
+import { Toggle } from '@tuturuuu/ui/toggle';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import type { ReactNode } from 'react';
+import { hotkeyLabel, TOOLBAR_LABELS } from './toolbar-config';
+
+interface ToolbarButtonProps {
+  id: string;
+  label?: string;
+  icon: ReactNode;
+  pressed: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export const TOOLBAR_BUTTON_CLASS_NAME =
+  'h-8 w-8 shrink-0 rounded-md border border-transparent transition-colors data-[state=on]:border-foreground/10 data-[state=on]:bg-dynamic-surface/80 data-[state=on]:text-foreground';
+
+/** A toolbar toggle with an accessible label and optional hotkey hint. */
+export function ToolbarButton({
+  id,
+  label: labelOverride,
+  icon,
+  pressed,
+  onClick,
+  disabled,
+}: ToolbarButtonProps) {
+  const label = labelOverride ?? TOOLBAR_LABELS[id] ?? id;
+  const shortcut = hotkeyLabel(id);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Toggle
+          pressed={pressed}
+          onPressedChange={() => onClick()}
+          onMouseDown={(event) => event.preventDefault()}
+          disabled={disabled}
+          className={TOOLBAR_BUTTON_CLASS_NAME}
+          aria-label={label}
+        >
+          {icon}
+        </Toggle>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="flex items-center gap-1.5">
+        <span>{label}</span>
+        {shortcut ? (
+          <kbd className="rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+            {shortcut}
+          </kbd>
+        ) : null}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Vertical divider between toolbar groups. */
+export function ToolbarSeparator() {
+  return <div className="mx-0.5 h-5 w-px shrink-0 bg-dynamic-border/60" />;
+}