@lark-apaas/coding-template-nestjs-react-fullstack 0.1.35 → 0.1.36-alpha.20260901035538

package/template/client/src/components/business-ui/tiptap-editor/components/color-highlight-toolbar-button.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Baseline, Check, ChevronDown } from 'lucide-react';
-
-import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-
-// Design system colors matching Figma
-const TEXT_COLORS = [
-  { value: 'var(--foreground)', label: '默认', className: 'bg-foreground' },
-  {
-    value: 'var(--muted-foreground)',
-    label: '次要',
-    className: 'bg-muted-foreground',
-  },
-  { value: 'var(--color-red-600)', label: '红色', className: 'bg-red-600' },
-  {
-    value: 'var(--color-orange-500)',
-    label: '橙色',
-    className: 'bg-orange-500',
-  },
-  {
-    value: 'var(--color-yellow-500)',
-    label: '黄色',
-    className: 'bg-yellow-500',
-  },
-  { value: 'var(--color-green-500)', label: '绿色', className: 'bg-green-500' },
-  { value: 'var(--color-blue-600)', label: '蓝色', className: 'bg-blue-600' },
-  {
-    value: 'var(--color-purple-600)',
-    label: '紫色',
-    className: 'bg-purple-600',
-  },
-];
-
-export function ColorHighlightToolbarButton() {
-  const { editor } = useTiptapEditor();
-  const [open, setOpen] = React.useState(false);
-
-  if (!editor) return null;
-
-  const currentColor =
-    editor.getAttributes('textStyle').color || 'var(--foreground)';
-
-  const disabled = !editor.can().setColor(TEXT_COLORS[0]!.value);
-
-  const handleColorSelect = (color: string) => {
-    if (color === 'var(--foreground)') {
-      editor.chain().focus().unsetColor().run();
-    } else {
-      editor.chain().focus().setColor(color).run();
-    }
-  };
-
-  const handleResetColor = () => {
-    editor.chain().focus().unsetColor().run();
-  };
-
-  const trigger = (
-    <Button
-      variant="ghost"
-      size="sm"
-      className="h-6 gap-0.5 px-2"
-      disabled={disabled}
-    >
-      <Baseline className="size-4" style={{ color: currentColor }} />
-      <ChevronDown className="size-3.5 text-muted-foreground" />
-      <span className="sr-only">文字颜色</span>
-    </Button>
-  );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <TooltipProvider>
-        <Tooltip delayDuration={700}>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-          </TooltipTrigger>
-          {!open && (
-            <TooltipContent>
-              <p>文字颜色</p>
-            </TooltipContent>
-          )}
-        </Tooltip>
-      </TooltipProvider>
-      <PopoverContent className="w-auto p-4" align="start">
-        <div className="flex flex-col items-center gap-3">
-          {/* Color grid */}
-          <div className="flex gap-1">
-            {TEXT_COLORS.map((color) => {
-              const isSelected = currentColor === color.value;
-
-              return (
-                <button
-                  key={color.value}
-                  className={cn(
-                    'relative flex size-6 items-center justify-center rounded-md p-0.5 transition-colors',
-                    'hover:ring-1 hover:ring-ring/20',
-                    isSelected && 'ring-1 ring-ring',
-                  )}
-                  onClick={() => handleColorSelect(color.value)}
-                  title={color.label}
-                >
-                  <span
-                    className={cn('size-5 rounded-[5px]', color.className)}
-                  />
-                  {isSelected && (
-                    <Check className="absolute size-3.5 text-white" />
-                  )}
-                </button>
-              );
-            })}
-          </div>
-
-          {/* Reset button */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="w-full"
-            onClick={handleResetColor}
-          >
-            恢复默认
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/template/client/src/components/business-ui/tiptap-editor/components/heading-toolbar-button.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import {
-  Check,
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  Type,
-} from 'lucide-react';
-
-import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-const HEADING_OPTIONS = [
-  { level: 0, label: '正文', icon: Type },
-  { level: 1, label: '一级标题', icon: Heading1 },
-  { level: 2, label: '二级标题', icon: Heading2 },
-  { level: 3, label: '三级标题', icon: Heading3 },
-  { level: 4, label: '四级标题', icon: Heading4 },
-  { level: 5, label: '五级标题', icon: Heading5 },
-  { level: 6, label: '六级标题', icon: Heading6 },
-] as const;
-
-export function HeadingToolbarButton() {
-  const { editor } = useTiptapEditor();
-
-  if (!editor) return null;
-
-  const handleSelect = (level: number) => {
-    if (level === 0) {
-      editor.chain().focus().setParagraph().run();
-    } else {
-      editor
-        .chain()
-        .focus()
-        .toggleHeading({ level: level as 1 | 2 | 3 | 4 | 5 | 6 })
-        .run();
-    }
-  };
-
-  const isActive = (level: number) => {
-    if (level === 0) return editor.isActive('paragraph');
-    return editor.isActive('heading', { level });
-  };
-
-  const activeOption =
-    HEADING_OPTIONS.find((option) => isActive(option.level)) ||
-    HEADING_OPTIONS[0];
-  const ActiveIcon = activeOption.icon;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="h-6 gap-0.5 px-2">
-          <ActiveIcon className="size-4" />
-          <ChevronDown className="size-3.5 text-muted-foreground" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-50">
-        {HEADING_OPTIONS.map((option) => {
-          const Icon = option.icon;
-          const active = isActive(option.level);
-          const disabled =
-            option.level === 0
-              ? !editor.can().setParagraph()
-              : !editor.can().toggleHeading({
-                  level: option.level as 1 | 2 | 3 | 4 | 5 | 6,
-                });
-
-          return (
-            <DropdownMenuItem
-              key={option.level}
-              onClick={() => handleSelect(option.level)}
-              disabled={disabled}
-              className={cn('justify-between', active && 'bg-accent')}
-            >
-              <span className="flex items-center gap-2">
-                <Icon className="size-4" />
-                {option.label}
-              </span>
-              {active && <Check className="size-4" />}
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/template/client/src/components/business-ui/tiptap-editor/components/horizontal-rule-toolbar-button.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { Minus } from 'lucide-react';
-
-import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
-import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-
-export function HorizontalRuleToolbarButton() {
-  const { editor } = useTiptapEditor();
-  if (!editor) return null;
-
-  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={700}>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => editor.chain().focus().setHorizontalRule().run()}
-            disabled={!editor.can().setHorizontalRule()}
-            aria-label="分割线"
-            className="size-6 px-0"
-          >
-            <Minus className="size-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>分割线(⌘+Option+S)</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}

package/template/client/src/components/business-ui/tiptap-editor/components/image-upload-toolbar-button.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Image as ImageIcon } from 'lucide-react';
-import { toast } from 'sonner';
-
-import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
-import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-
-export function ImageUploadToolbarButton() {
-  const { editor } = useTiptapEditor();
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-  if (!editor) return null;
-
-  const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const ok = editor.chain().focus().insertImages([file]).run();
-    if (!ok) {
-      toast.error('插入图片失败（请确认图片扩展已启用且提供 upload）');
-    }
-
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={700}>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="size-6 px-0"
-            onClick={() => fileInputRef.current?.click()}
-          >
-            <ImageIcon className="size-4" />
-            <span className="sr-only">上传图片</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>上传图片</p>
-        </TooltipContent>
-      </Tooltip>
-      <input
-        type="file"
-        ref={fileInputRef}
-        className="hidden"
-        accept="image/*"
-        onChange={handleFileChange}
-      />
-    </TooltipProvider>
-  );
-}

package/template/client/src/components/business-ui/tiptap-editor/components/link-edit-form.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export interface LinkEditFormProps extends React.ComponentProps<'div'> {
-  open: boolean;
-  initialText?: string;
-  initialHref?: string;
-  /** 打开时自动聚焦到链接输入框。 */
-  autoFocusHref?: boolean;
-  onDone?: () => void;
-}
-
-export function LinkEditForm({
-  open,
-  initialText = '',
-  initialHref = '',
-  autoFocusHref = false,
-  onDone,
-  className,
-  ...props
-}: LinkEditFormProps) {
-  const { editor } = useTiptapEditor();
-  const [text, setText] = React.useState('');
-  const [href, setHref] = React.useState('');
-
-  const hrefInputRef = React.useRef<HTMLInputElement | null>(null);
-
-  const textId = React.useId();
-  const hrefId = React.useId();
-
-  React.useEffect(() => {
-    if (!open) return;
-    setText(initialText);
-    setHref(initialHref);
-  }, [open, initialHref, initialText]);
-
-  React.useEffect(() => {
-    if (!open) return;
-    if (!autoFocusHref) return;
-
-    const id = window.setTimeout(() => {
-      hrefInputRef.current?.focus();
-    }, 0);
-
-    return () => window.clearTimeout(id);
-  }, [autoFocusHref, open]);
-
-  if (!editor) return null;
-
-  const isInLink = editor.isActive('link');
-  const selectionEmpty = editor.state.selection.empty;
-
-  const hrefTrimmed = href.trim();
-  const textTrimmed = text.trim();
-
-  const canSubmit =
-    hrefTrimmed.length > 0 &&
-    (!selectionEmpty || isInLink || textTrimmed.length);
-
-  const applyLink = () => {
-    if (!canSubmit) return;
-
-    if (textTrimmed.length > 0) {
-      if (isInLink && editor.state.selection.empty) {
-        editor.chain().focus().extendMarkRange('link').run();
-      } else {
-        editor.chain().focus().run();
-      }
-
-      editor.commands.insertContent({
-        type: 'text',
-        text: textTrimmed,
-        marks: [{ type: 'link', attrs: { href: hrefTrimmed } }],
-      });
-    } else {
-      const chain = editor.chain().focus();
-      if (isInLink) chain.extendMarkRange('link');
-      chain.setLink({ href: hrefTrimmed }).run();
-    }
-
-    onDone?.();
-  };
-
-  return (
-    <div className={cn('flex flex-col gap-4', className)} {...props}>
-      <div className="flex items-center gap-4">
-        <Label htmlFor={textId} className="w-10 shrink-0">
-          文本
-        </Label>
-        <Input
-          id={textId}
-          className="h-8"
-          placeholder="请输入文本"
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-        />
-      </div>
-
-      <div className="flex items-center gap-4">
-        <Label htmlFor={hrefId} className="w-10 shrink-0">
-          链接
-        </Label>
-        <Input
-          id={hrefId}
-          className="h-8"
-          placeholder="粘贴或输入链接"
-          value={href}
-          onChange={(e) => setHref(e.target.value)}
-          ref={hrefInputRef}
-        />
-      </div>
-
-      <div className="flex justify-end">
-        <Button size="sm" disabled={!canSubmit} onClick={applyLink}>
-          确定
-        </Button>
-      </div>
-    </div>
-  );
-}