@lark-apaas/coding-template-nestjs-react-fullstack 0.1.36-alpha.20260902024923 → 0.1.36-alpha.20260902103327

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

@@ -0,0 +1,169 @@
+'use client';
+
+import * as React from 'react';
+import {
+  EditorContent,
+  EditorContext,
+  useCurrentEditor,
+  useEditor,
+  type EditorContentProps,
+  type Extensions,
+} from '@tiptap/react';
+import { Slot } from 'radix-ui';
+
+import { LinkHoverToolbar } from '@/components/business-ui/tiptap-editor/components/link-hover-toolbar';
+import { CompleteKit } from '@/components/business-ui/tiptap-editor/extensions/complete-kit';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+export interface TiptapEditorProps extends React.ComponentProps<'div'> {
+  /** 受控 value (HTML)。 */
+  value?: string;
+  /** 默认值 (HTML)。 */
+  defaultValue?: string;
+  /** 当编辑器更新时，触发并传递最新的 HTML。 */
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * 自定义 Tiptap 扩展。
+   * @default [CompleteKit]
+   */
+  extensions?: Extensions;
+  /** 是否为只读模式。 */
+  readOnly?: boolean;
+  asChild?: boolean;
+}
+
+const defaultExtensions = [CompleteKit];
+
+export function TiptapEditor({
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+  extensions = defaultExtensions,
+  readOnly = false,
+  asChild = false,
+  autoFocus = false,
+  'aria-disabled': ariaDisabled,
+  ...props
+}: TiptapEditorProps) {
+  const Comp = asChild ? Slot.Root : 'div';
+
+  const initialContent = value !== undefined ? value : defaultValue;
+  const editable = !readOnly && !ariaDisabled;
+
+  const editor = useEditor({
+    autofocus: autoFocus,
+    editable,
+    editorProps: {
+      attributes: {
+        class: cn('prose max-w-none flex-1 px-3 py-2 dark:prose-invert'),
+      },
+    },
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate: ({ editor }) => {
+      onValueChange?.(editor.getHTML());
+    },
+    extensions,
+  });
+
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    if (!editor || value === undefined) return;
+    valueRef.current = value;
+
+    // Tiptap 内部会使用 flushSync，因此我们将内容更新延迟到微任务队列
+    queueMicrotask(() => {
+      const current = editor.getHTML();
+      if (valueRef.current !== current) {
+        editor.commands.setContent(value);
+      }
+    });
+  }, [value, editor]);
+
+  React.useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(editable);
+  }, [editor, editable]);
+
+  const contextValue = React.useMemo(() => ({ editor }), [editor]);
+
+  return (
+    <EditorContext value={contextValue}>
+      <Comp
+        aria-disabled={ariaDisabled}
+        className={cn(
+          "relative flex w-full flex-col rounded-md border ring-offset-background focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/20 focus-within:outline-hidden hover:border-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 **:data-[type='taskList']:list-none **:data-[type='taskList']:p-0 [&_[data-type='taskList']>li]:flex [&_[data-type='taskList']>li]:items-start [&_[data-type='taskList']>li]:gap-2 [&_[data-type='taskList']>li>div]:min-w-0 [&_[data-type='taskList']>li>div]:flex-1 [&_[data-type='taskList']>li>div>p]:m-0 [&_[data-type='taskList']>li>label]:mt-0.5 [&_[data-type='taskList']>li>label]:shrink-0 **:[a]:cursor-pointer",
+          className,
+        )}
+        data-slot="tiptap-editor"
+        {...props}
+      >
+        {children}
+        <LinkHoverToolbar />
+      </Comp>
+    </EditorContext>
+  );
+}
+
+export function TiptapEditorContent({
+  className,
+  ...props
+}: Omit<EditorContentProps, 'editor'>) {
+  const { editor } = useCurrentEditor();
+
+  return (
+    <EditorContent
+      editor={editor}
+      className={cn(
+        'flex flex-1 flex-col overflow-y-auto outline-hidden',
+        className,
+      )}
+      data-slot="tiptap-editor-content"
+      {...props}
+    />
+  );
+}
+
+export function TiptapEditorToolbar({
+  className,
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : 'div';
+
+  return (
+    <Comp
+      className={cn(
+        'flex flex-wrap items-center gap-x-1 gap-y-2 p-1.5',
+        className,
+      )}
+      data-slot="tiptap-editor-toolbar"
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export function TiptapEditorToolbarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      orientation="vertical"
+      className={cn(
+        'mx-0.5 h-4 w-px bg-border data-[orientation=vertical]:h-4',
+        className,
+      )}
+      data-slot="tiptap-editor-toolbar-separator"
+      {...props}
+    />
+  );
+}

package/template/client/src/components/ui/streamdown.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import * as React from 'react';
+import { Streamdown as StreamdownPrimitive } from 'streamdown';
+
+import { cn } from '@/lib/utils';
+import { omit } from 'es-toolkit';
+
+const defaultComponents: NonNullable<
+  React.ComponentProps<typeof StreamdownPrimitive>['components']
+> = {
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn(className)}
+      data-streamdown="ordered-list"
+      {...omit(props, ['node'])}
+    />
+  ),
+  li: ({ className, ...props }) => (
+    <li
+      className={cn(className)}
+      data-streamdown="list-item"
+      {...omit(props, ['node'])}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn(className)}
+      data-streamdown="unordered-list"
+      {...omit(props, ['node'])}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr
+      className={cn(className)}
+      data-streamdown="horizontal-rule"
+      {...omit(props, ['node'])}
+    />
+  ),
+  strong: ({ className, ...props }) => (
+    <strong
+      className={cn(className)}
+      data-streamdown="strong"
+      {...omit(props, ['node'])}
+    />
+  ),
+  a: ({ className, href, ...props }) => {
+    const isIncomplete = href === 'streamdown:incomplete-link';
+
+    return (
+      <a
+        className={cn(className)}
+        data-incomplete={isIncomplete}
+        data-streamdown="link"
+        href={href}
+        rel={props.rel ?? 'noreferrer'}
+        target={props.target ?? '_blank'}
+        {...omit(props, ['node'])}
+      />
+    );
+  },
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(className)}
+      data-streamdown="heading-1"
+      {...omit(props, ['node'])}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(className)}
+      data-streamdown="heading-2"
+      {...omit(props, ['node'])}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(className)}
+      data-streamdown="heading-3"
+      {...omit(props, ['node'])}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(className)}
+      data-streamdown="heading-4"
+      {...omit(props, ['node'])}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(className)}
+      data-streamdown="heading-5"
+      {...omit(props, ['node'])}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(className)}
+      data-streamdown="heading-6"
+      {...omit(props, ['node'])}
+    />
+  ),
+  table: ({ className, ...props }) => (
+    <table
+      className={cn(className)}
+      data-streamdown="table-wrapper"
+      {...omit(props, ['node'])}
+    />
+  ),
+  thead: ({ className, ...props }) => (
+    <thead
+      className={cn(className)}
+      data-streamdown="table-header"
+      {...omit(props, ['node'])}
+    />
+  ),
+  tbody: ({ className, ...props }) => (
+    <tbody
+      className={cn(className)}
+      data-streamdown="table-body"
+      {...omit(props, ['node'])}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(className)}
+      data-streamdown="table-row"
+      {...omit(props, ['node'])}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(className)}
+      data-streamdown="table-header-cell"
+      {...omit(props, ['node'])}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(className)}
+      data-streamdown="table-cell"
+      {...omit(props, ['node'])}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn(className)}
+      data-streamdown="blockquote"
+      {...omit(props, ['node'])}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup className={cn(className)} {...omit(props, ['node'])} />
+  ),
+  sub: ({ className, ...props }) => (
+    <sub className={cn(className)} {...omit(props, ['node'])} />
+  ),
+  p: ({ className, ...props }) => (
+    <p className={cn(className)} {...omit(props, ['node'])} />
+  ),
+  section: ({ className, ...props }) => (
+    <section className={cn(className)} {...omit(props, ['node'])} />
+  ),
+  img: ({ className, alt, ...props }) => (
+    <img className={cn(className)} alt={alt ?? ''} {...omit(props, ['node'])} />
+  ),
+  pre: ({ children }) => <div className="not-prose">{children}</div>,
+};
+
+export function Streamdown({
+  className,
+  components,
+  ...props
+}: React.ComponentProps<typeof StreamdownPrimitive>) {
+  return (
+    <StreamdownPrimitive
+      className={cn(
+        'prose max-w-none dark:prose-invert',
+        className,
+      )}
+      components={{ ...defaultComponents, ...components }}
+      {...props}
+    />
+  );
+}

package/template/client/src/index.css

@@ -3,4 +3,5 @@
 @import "./tailwind-theme.css";
 @import "./typography.css";
 
+@source "../../node_modules/streamdown/dist/*.js";
 @config "../../tailwind.config.ts";

package/template/client/src/lib/shiki.ts

@@ -0,0 +1,92 @@
+import {
+  createBundledHighlighter,
+  createSingletonShorthands,
+} from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import type {
+  DynamicImportLanguageRegistration,
+  DynamicImportThemeRegistration,
+  HighlighterGeneric,
+} from 'shiki/types';
+
+type BundledLanguage =
+  | 'typescript'
+  | 'ts'
+  | 'cts'
+  | 'mts'
+  | 'javascript'
+  | 'js'
+  | 'cjs'
+  | 'mjs'
+  | 'jsx'
+  | 'tsx'
+  | 'html'
+  | 'css'
+  | 'json'
+  | 'jsonc'
+  | 'json5'
+  | 'markdown'
+  | 'md';
+type BundledTheme = 'github-light' | 'github-dark';
+type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
+
+const bundledLanguages = {
+  typescript: () => import('@shikijs/langs/typescript'),
+  ts: () => import('@shikijs/langs/typescript'),
+  cts: () => import('@shikijs/langs/typescript'),
+  mts: () => import('@shikijs/langs/typescript'),
+  javascript: () => import('@shikijs/langs/javascript'),
+  js: () => import('@shikijs/langs/javascript'),
+  cjs: () => import('@shikijs/langs/javascript'),
+  mjs: () => import('@shikijs/langs/javascript'),
+  jsx: () => import('@shikijs/langs/jsx'),
+  tsx: () => import('@shikijs/langs/tsx'),
+  html: () => import('@shikijs/langs/html'),
+  css: () => import('@shikijs/langs/css'),
+  json: () => import('@shikijs/langs/json'),
+  jsonc: () => import('@shikijs/langs/jsonc'),
+  json5: () => import('@shikijs/langs/json5'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  md: () => import('@shikijs/langs/markdown'),
+} as Record<BundledLanguage, DynamicImportLanguageRegistration>;
+
+const bundledThemes = {
+  'github-light': () => import('@shikijs/themes/github-light'),
+  'github-dark': () => import('@shikijs/themes/github-dark'),
+} as Record<BundledTheme, DynamicImportThemeRegistration>;
+
+const createHighlighter = /* @__PURE__ */ createBundledHighlighter<
+  BundledLanguage,
+  BundledTheme
+>({
+  langs: bundledLanguages,
+  themes: bundledThemes,
+  engine: () => createJavaScriptRegexEngine(),
+});
+
+const {
+  codeToHtml,
+  codeToHast,
+  codeToTokensBase,
+  codeToTokens,
+  codeToTokensWithThemes,
+  getSingletonHighlighter,
+  getLastGrammarState,
+} = /* @__PURE__ */ createSingletonShorthands<BundledLanguage, BundledTheme>(
+  createHighlighter,
+);
+
+export {
+  bundledLanguages,
+  bundledThemes,
+  codeToHast,
+  codeToHtml,
+  codeToTokens,
+  codeToTokensBase,
+  codeToTokensWithThemes,
+  createHighlighter,
+  getLastGrammarState,
+  getSingletonHighlighter,
+};
+
+export type { BundledLanguage, BundledTheme, Highlighter };

package/template/nest-cli.json

@@ -5,21 +5,20 @@
   "compilerOptions": {
     "deleteOutDir": false,
     "tsConfigPath": "tsconfig.node.json",
+    "typeCheck": true,
+    "builder": {
+      "type": "swc",
+      "options": {
+        "filenames": ["server", "shared"],
+        "stripLeadingPaths": false
+      }
+    },
     "assets": [
       {
         "include": "capabilities/**/*.json",
         "outDir": "dist/server",
         "watchAssets": true
       }
-    ],
-    "plugins": [
-      {
-        "name": "@nestjs/swagger",
-        "options": {
-          "introspectComments": true,
-          "classValidatorShim": true
-        }
-      }
     ]
   }
-}
+}