@lark-apaas/coding-template-nestjs-react-fullstack 0.1.0-alpha.1

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

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { Link as LinkIcon } from 'lucide-react';
+
+import { LinkEditForm } from '@/components/business-ui/tiptap-editor/components/link-edit-form';
+import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+export function LinkToolbarButton() {
+  const { editor } = useTiptapEditor();
+  const [open, setOpen] = React.useState(false);
+  const [initialText, setInitialText] = React.useState('');
+  const [initialHref, setInitialHref] = React.useState('');
+
+  if (!editor) return null;
+
+  const resetForm = () => {
+    setInitialText('');
+    setInitialHref('');
+  };
+
+  const openDialog = () => {
+    const { from, to } = editor.state.selection;
+    const selectedText = editor.state.doc.textBetween(from, to, ' ');
+    const currentHref = (editor.getAttributes('link')?.href as string) || '';
+
+    setInitialText(selectedText);
+    setInitialHref(currentHref);
+    setOpen(true);
+  };
+
+  const trigger = (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="size-6 px-0"
+      onClick={openDialog}
+      disabled={!editor.can().toggleLink({ href: '' })}
+    >
+      <LinkIcon className="size-4" />
+      <span className="sr-only">链接</span>
+    </Button>
+  );
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) resetForm();
+      }}
+    >
+      <TooltipProvider>
+        <Tooltip delayDuration={700}>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+          </TooltipTrigger>
+          {!open && (
+            <TooltipContent>
+              <p>链接</p>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+
+      <PopoverContent
+        className="w-105 p-5 shadow-lg"
+        align="start"
+        sideOffset={6}
+      >
+        <LinkEditForm
+          open={open}
+          initialText={initialText}
+          initialHref={initialHref}
+          autoFocusHref
+          onDone={() => {
+            setOpen(false);
+            resetForm();
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,75 @@
+'use client';
+
+import { Check, ChevronDown, List, ListOrdered, ListTodo } 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 LIST_OPTIONS = [
+  { type: 'bulletList', label: '无序列表', icon: List },
+  { type: 'orderedList', label: '有序列表', icon: ListOrdered },
+  { type: 'taskList', label: '任务列表', icon: ListTodo },
+] as const;
+
+export function ListToolbarButton() {
+  const { editor } = useTiptapEditor();
+
+  if (!editor) return null;
+
+  const handleSelect = (type: string) => {
+    switch (type) {
+      case 'bulletList':
+        editor.chain().focus().toggleBulletList().run();
+        break;
+      case 'orderedList':
+        editor.chain().focus().toggleOrderedList().run();
+        break;
+      case 'taskList':
+        editor.chain().focus().toggleTaskList().run();
+        break;
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-6 gap-0.5 px-2">
+          <List className="size-4" />
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+          <span className="sr-only">列表</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        className="w-50"
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        {LIST_OPTIONS.map((option) => {
+          const Icon = option.icon;
+          const active = editor.isActive(option.type);
+
+          return (
+            <DropdownMenuItem
+              key={option.type}
+              onClick={() => handleSelect(option.type)}
+              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/mark-toolbar-button.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import * as React from 'react';
+import { Bold, Code, Italic, Strikethrough, Underline } from 'lucide-react';
+
+import { useTiptapEditor } from '@/components/business-ui/tiptap-editor/hooks/use-tiptap-editor';
+import { Toggle } from '@/components/ui/toggle';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+interface MarkToolbarButtonProps {
+  format: 'bold' | 'italic' | 'underline' | 'strike' | 'code';
+  icon?: React.ReactNode;
+  tooltip?: string;
+}
+
+export function MarkToolbarButton({
+  format,
+  icon,
+  tooltip,
+}: MarkToolbarButtonProps) {
+  const { editor } = useTiptapEditor();
+
+  if (!editor) return null;
+
+  const isActive = editor.isActive(format);
+
+  let disabled = false;
+
+  switch (format) {
+    case 'bold':
+      disabled = !editor.can().toggleBold();
+      break;
+    case 'italic':
+      disabled = !editor.can().toggleItalic();
+      break;
+    case 'underline':
+      disabled = !editor.can().toggleUnderline();
+      break;
+    case 'strike':
+      disabled = !editor.can().toggleStrike();
+      break;
+    case 'code':
+      disabled = !editor.can().toggleCode();
+      break;
+  }
+
+  const toggle = () => {
+    switch (format) {
+      case 'bold':
+        editor.chain().focus().toggleBold().run();
+        break;
+      case 'italic':
+        editor.chain().focus().toggleItalic().run();
+        break;
+      case 'underline':
+        editor.chain().focus().toggleUnderline().run();
+        break;
+      case 'strike':
+        editor.chain().focus().toggleStrike().run();
+        break;
+      case 'code':
+        editor.chain().focus().toggleCode().run();
+        break;
+    }
+  };
+
+  const icons = {
+    bold: <Bold className="size-4" />,
+    italic: <Italic className="size-4" />,
+    underline: <Underline className="size-4" />,
+    strike: <Strikethrough className="size-4" />,
+    code: <Code className="size-4" />,
+  };
+
+  const labels: Record<typeof format, string> = {
+    bold: '粗体',
+    italic: '斜体',
+    underline: '下划线',
+    strike: '删除线',
+    code: '行内代码',
+  };
+
+  const tooltips: Record<typeof format, string> = {
+    bold: '粗体(⌘+B)',
+    italic: '斜体(⌘+I)',
+    underline: '下划线(⌘+U)',
+    strike: '删除线(⌘+Shift+X)',
+    code: '行内代码(⌘+E)',
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={700}>
+        <TooltipTrigger>
+          <Toggle
+            size="sm"
+            pressed={isActive}
+            onPressedChange={toggle}
+            disabled={disabled}
+            aria-label={labels[format]}
+            className="size-6 p-0"
+            asChild
+          >
+            <div>{icon || icons[format]}</div>
+          </Toggle>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip || tooltips[format]}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

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

@@ -0,0 +1,84 @@
+'use client';
+
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+const ALIGN_OPTIONS = [
+  { value: 'left', label: '左对齐', icon: AlignLeft },
+  { value: 'center', label: '居中对齐', icon: AlignCenter },
+  { value: 'right', label: '右对齐', icon: AlignRight },
+] as const;
+
+export function TextAlignToolbarButton() {
+  const { editor } = useTiptapEditor();
+
+  if (!editor) return null;
+
+  const getCurrentAlignment = () => {
+    if (editor.isActive({ textAlign: 'center' })) return 'center';
+    if (editor.isActive({ textAlign: 'right' })) return 'right';
+    return 'left';
+  };
+
+  const isDefaultLeft =
+    !editor.isActive({ textAlign: 'center' }) &&
+    !editor.isActive({ textAlign: 'right' }) &&
+    !editor.isActive({ textAlign: 'justify' });
+
+  const alignment = getCurrentAlignment();
+  const currentOption = ALIGN_OPTIONS.find((opt) => opt.value === alignment);
+  const Icon = currentOption?.icon ?? AlignLeft;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-6 gap-0.5 px-2">
+          <Icon className="size-4" />
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+          <span className="sr-only">文字对齐</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-50">
+        {ALIGN_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const active =
+            option.value === 'left'
+              ? editor.isActive({ textAlign: 'left' }) || isDefaultLeft
+              : editor.isActive({ textAlign: option.value });
+
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() =>
+                editor.chain().focus().setTextAlign(option.value).run()
+              }
+              disabled={!editor.can().setTextAlign(option.value)}
+              className={cn('justify-between', active && 'bg-accent')}
+            >
+              <span className="flex items-center gap-2">
+                <OptionIcon className="size-4" />
+                {option.label}
+              </span>
+              {active && <Check className="size-4" />}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { Redo, Undo } 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';
+
+interface UndoRedoToolbarButtonProps {
+  action: 'undo' | 'redo';
+}
+
+export function UndoRedoToolbarButton({ action }: UndoRedoToolbarButtonProps) {
+  const { editor } = useTiptapEditor();
+
+  if (!editor) return null;
+
+  const canExecute =
+    action === 'undo' ? editor.can().undo() : editor.can().redo();
+  const Icon = action === 'undo' ? Undo : Redo;
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={700}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              action === 'undo'
+                ? editor.chain().focus().undo().run()
+                : editor.chain().focus().redo().run()
+            }
+            disabled={!canExecute}
+            className="size-6 px-0"
+          >
+            <Icon className="size-4" />
+            <span className="sr-only">
+              {action === 'undo' ? '撤销' : '重做'}
+            </span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{action === 'undo' ? '撤销(⌘+Z)' : '重做(⌘+Shift+Z)'}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}