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

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

@@ -1,169 +0,0 @@
-'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

@@ -1,186 +0,0 @@
-'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/lib/shiki.ts

@@ -1,92 +0,0 @@
-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 };