@gientech/modual 2.0.3 → 2.0.5

package/src/modules/search/components/Editor/plugins/imageClick.tsx

@@ -0,0 +1,32 @@
+import { createPlatePlugin, PlateElement, withRef } from "@udecode/plate/react";
+import { Image } from "antd";
+export const IMAGE_CLICK = "imageClick";
+
+export const ImageClickElement = withRef<typeof PlateElement>(
+  ({ children, className, onClick, ...props }, ref) => {
+    const url: any = props?.element?.url;
+    return (
+      <>
+        {url ? (
+          <Image
+            className={className}
+            src={url}
+            onClick={() => {
+              const p: any = {
+                url
+              };
+              onClick && onClick(p);
+            }}
+          />
+        ) : (
+          <></>
+        )}
+      </>
+    );
+  }
+);
+
+export const ImageClickPlugin = createPlatePlugin({
+  key: IMAGE_CLICK,
+  node: { isElement: true, type: "img" }
+});

package/src/modules/search/components/Editor/plugins/myplugin.tsx

@@ -0,0 +1,98 @@
+import { PluginConfig } from "@udecode/plate";
+import { createPlatePlugin } from "@udecode/plate/react";
+import { PlateElement, PlateElementProps } from '@udecode/plate-common/react';
+import { TLinkElement } from '@udecode/plate-link';
+
+type MyPluginConfig = PluginConfig<
+  string,  // 使用 string 而不是具体的字符串字面量
+  { customOption: boolean },
+  { getData: () => string },
+  { customTransform: () => void }
+>
+export function LinkElement({ attributes, children, element, editor }: PlateElementProps<TLinkElement>) {
+  const { url } = element;
+  console.log('进组建了')
+  return (
+    <a {...attributes} className=" text-sky-800" href={url}>
+      {children}
+    </a>
+  );
+}
+
+export const MyPlugin = createPlatePlugin({
+  key: "myPlugin",  // 这里的 key 被正确识别为 string
+  // options: {
+  //   customOption: true
+  // },
+  node: {
+    isElement: true,
+    type: 'p',
+  },
+  // api: {
+  //   getData: () => {
+  //     console.log('good');
+  //     return 'kdkdkdk';
+  //   }
+  // },
+  // node: {
+  //   component: LinkElement,
+  //   isElement: true,
+  //   type: 'a'
+  // },
+  // transforms: {
+  //   // 遍历 Slate 文档，找到包含 <a> 标签的文本节点并转换它们
+  //   customTransform: (editor) => {
+  //     const { children } = editor;
+
+  //     const transformedChildren = children.map(node => {
+  //       if (typeof node.text === 'string') {
+  //         const regex = /<a\s+([^>]*)id="([^"]*)"([^>]*)>(.*?)<\/a>/g;
+  //         const newChildren: any[] = [];
+  //         let lastIndex = 0;
+  //         let match;
+
+  //         while ((match = regex.exec(node.text)) !== null) {
+  //           if (match.index > lastIndex) {
+  //             newChildren.push({ text: node.text.slice(lastIndex, match.index) });
+  //           }
+  //           newChildren.push({
+  //             type: 'a',
+  //             id: match[2],
+  //             attributes: match[1] + match[3],
+  //             children: [{ text: match[4] }]
+  //           });
+  //           lastIndex = regex.lastIndex;
+  //         }
+
+  //         if (lastIndex < node.text.length) {
+  //           newChildren.push({ text: node.text.slice(lastIndex) });
+  //         }
+
+  //         return newChildren.length > 0 ? newChildren : node;
+  //       }
+  //       return node;
+  //     });
+
+  //     editor.children = transformedChildren;
+  //     return editor;
+  //   },
+  // },
+  // render: {
+  //   // 自定义渲染逻辑
+  //   node: (props) => {
+  //     const { attributes, children, element } = props;
+  //     console.log(props, 'zheli')
+  //     if (element.type === 'a') {
+  //       return <LinkElement {...props} />;
+  //     }
+  //     return (
+  //       <div {...attributes}>
+  //         <p>自定义插件节点：{element.type}</p>
+  //         {children}
+  //       </div>
+  //     );
+  //   }
+  // },
+  // plugin implementation
+});
+// export const MyPlugin = MPlugin.withComponent(LinkElement)

package/src/modules/search/components/Editor/ui/avatar.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { withCn } from '@udecode/cn';
+
+export const Avatar = withCn(
+  AvatarPrimitive.Root,
+  'relative flex size-10 shrink-0 overflow-hidden rounded-full'
+);
+
+export const AvatarImage = withCn(
+  AvatarPrimitive.Image,
+  'aspect-square size-full'
+);
+
+export const AvatarFallback = withCn(
+  AvatarPrimitive.Fallback,
+  'flex size-full items-center justify-center rounded-full bg-muted'
+);

package/src/modules/search/components/Editor/ui/blockquote-element.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+
+export const BlockquoteElement = withRef<typeof PlateElement>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <PlateElement
+        asChild
+        className={cn('my-1 border-l-2 pl-6 italic', className)}
+        ref={ref}
+        {...props}
+      >
+        <blockquote>{children}</blockquote>
+      </PlateElement>
+    );
+  }
+);

package/src/modules/search/components/Editor/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cn, withRef } from '@udecode/cn';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      isMenu: {
+        true: 'h-auto w-full cursor-pointer justify-start',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        icon: 'size-10',
+        lg: 'h-11 rounded-md px-8',
+        none: '',
+        sm: 'h-9 rounded-md px-3',
+        sms: 'size-9 rounded-md px-0',
+        xs: 'h-8 rounded-md px-3',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        inlineLink: 'text-base text-primary underline underline-offset-4',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  }
+);
+
+export const Button = withRef<
+  'button',
+  {
+    asChild?: boolean;
+  } & VariantProps<typeof buttonVariants>
+>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ className, isMenu, size, variant }))}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/modules/search/components/Editor/ui/calendar.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@udecode/cn';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+import { buttonVariants } from './button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      className={cn('p-3', className)}
+      classNames={{
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'size-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_hidden: 'invisible',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_range_end: 'day-range-end',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        head_row: 'flex',
+        month: 'space-y-4',
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_next: 'absolute right-1',
+        nav_button_previous: 'absolute left-1',
+        row: 'flex w-full mt-2',
+        table: 'w-full border-collapse space-y-1',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className="size-4" />,
+        IconRight: () => <ChevronRight className="size-4" />,
+      }}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/src/modules/search/components/Editor/ui/caption.tsx

@@ -0,0 +1,46 @@
+import {
+  cn,
+  createPrimitiveComponent,
+  withCn,
+  withVariants,
+} from '@udecode/cn';
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive,
+  useCaptionButton,
+  useCaptionButtonState,
+} from '@udecode/plate-caption/react';
+import { cva } from 'class-variance-authority';
+
+import { Button } from './button';
+
+const captionVariants = cva('max-w-full', {
+  defaultVariants: {
+    align: 'center',
+  },
+  variants: {
+    align: {
+      center: 'mx-auto',
+      left: 'mr-auto',
+      right: 'ml-auto',
+    },
+  },
+});
+
+export const Caption = withVariants(CaptionPrimitive, captionVariants, [
+  'align',
+]);
+
+export const CaptionTextarea = withCn(
+  CaptionTextareaPrimitive,
+  cn(
+    'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
+    'focus:outline-none focus:[&::placeholder]:opacity-0',
+    'text-center print:placeholder:text-transparent'
+  )
+);
+
+export const CaptionButton = createPrimitiveComponent(Button)({
+  propsHook: useCaptionButton,
+  stateHook: useCaptionButtonState,
+});

package/src/modules/search/components/Editor/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn, withRef } from '@udecode/cn';
+
+import { Icons } from './icons';
+
+export const Checkbox = withRef<typeof CheckboxPrimitive.Root>(
+  ({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'peer size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn('flex items-center justify-center text-current')}
+      >
+        <Icons.check className="size-4" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+);

package/src/modules/search/components/Editor/ui/code-block-combobox.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { cn } from "@udecode/cn";
+import {
+  useCodeBlockCombobox,
+  useCodeBlockComboboxState
+} from "@udecode/plate-code-block/react";
+// Prism must be imported before all language files
+import Prism from "prismjs";
+
+import { Icons } from "./icons";
+
+import { Button } from "./button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+import "prismjs/components/prism-antlr4.js";
+import "prismjs/components/prism-bash.js";
+import "prismjs/components/prism-c.js";
+import "prismjs/components/prism-cmake.js";
+import "prismjs/components/prism-coffeescript.js";
+import "prismjs/components/prism-cpp.js";
+import "prismjs/components/prism-csharp.js";
+import "prismjs/components/prism-css.js";
+import "prismjs/components/prism-dart.js";
+// import 'prismjs/components/prism-django.js';
+import "prismjs/components/prism-docker.js";
+// import 'prismjs/components/prism-ejs.js';
+import "prismjs/components/prism-erlang.js";
+import "prismjs/components/prism-git.js";
+import "prismjs/components/prism-go.js";
+import "prismjs/components/prism-graphql.js";
+import "prismjs/components/prism-groovy.js";
+import "prismjs/components/prism-java.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-json.js";
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-kotlin.js";
+import "prismjs/components/prism-latex.js";
+import "prismjs/components/prism-less.js";
+import "prismjs/components/prism-lua.js";
+import "prismjs/components/prism-makefile.js";
+import "prismjs/components/prism-markdown.js";
+import "prismjs/components/prism-matlab.js";
+import "prismjs/components/prism-mermaid.js";
+import "prismjs/components/prism-objectivec.js";
+import "prismjs/components/prism-perl.js";
+// import 'prismjs/components/prism-php.js';
+import "prismjs/components/prism-powershell.js";
+import "prismjs/components/prism-properties.js";
+import "prismjs/components/prism-protobuf.js";
+import "prismjs/components/prism-python.js";
+import "prismjs/components/prism-r.js";
+import "prismjs/components/prism-ruby.js";
+import "prismjs/components/prism-sass.js";
+import "prismjs/components/prism-scala.js";
+import "prismjs/components/prism-scheme.js";
+import "prismjs/components/prism-scss.js";
+import "prismjs/components/prism-sql.js";
+import "prismjs/components/prism-swift.js";
+import "prismjs/components/prism-tsx.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-wasm.js";
+import "prismjs/components/prism-yaml.js";
+
+export { Prism };
+
+const languages: { label: string; value: string }[] = [
+  { label: "Plain Text", value: "text" },
+  { label: "Bash", value: "bash" },
+  { label: "CSS", value: "css" },
+  { label: "Git", value: "git" },
+  { label: "GraphQL", value: "graphql" },
+  { label: "HTML", value: "html" },
+  { label: "JavaScript", value: "javascript" },
+  { label: "JSON", value: "json" },
+  { label: "JSX", value: "jsx" },
+  { label: "Markdown", value: "markdown" },
+  { label: "SQL", value: "sql" },
+  { label: "SVG", value: "svg" },
+  { label: "TSX", value: "tsx" },
+  { label: "TypeScript", value: "typescript" },
+  { label: "WebAssembly", value: "wasm" },
+  { label: "ANTLR4", value: "antlr4" },
+  { label: "C", value: "c" },
+  { label: "CMake", value: "cmake" },
+  { label: "CoffeeScript", value: "coffeescript" },
+  { label: "C#", value: "csharp" },
+  { label: "Dart", value: "dart" },
+  { label: "Django", value: "django" },
+  { label: "Docker", value: "docker" },
+  { label: "EJS", value: "ejs" },
+  { label: "Erlang", value: "erlang" },
+  { label: "Go", value: "go" },
+  { label: "Groovy", value: "groovy" },
+  { label: "Java", value: "java" },
+  { label: "Kotlin", value: "kotlin" },
+  { label: "LaTeX", value: "latex" },
+  { label: "Less", value: "less" },
+  { label: "Lua", value: "lua" },
+  { label: "Makefile", value: "makefile" },
+  { label: "Markup", value: "markup" },
+  { label: "MATLAB", value: "matlab" },
+  { label: "Mermaid", value: "mermaid" },
+  { label: "Objective-C", value: "objectivec" },
+  { label: "Perl", value: "perl" },
+  { label: "PHP", value: "php" },
+  { label: "PowerShell", value: "powershell" },
+  { label: ".properties", value: "properties" },
+  { label: "Protocol Buffers", value: "protobuf" },
+  { label: "Python", value: "python" },
+  { label: "R", value: "r" },
+  { label: "Ruby", value: "ruby" },
+  { label: "Sass (Sass)", value: "sass" },
+  // FIXME: Error with current scala grammar
+  { label: "Scala", value: "scala" },
+  { label: "Scheme", value: "scheme" },
+  { label: "Sass (Scss)", value: "scss" },
+  { label: "Shell", value: "shell" },
+  { label: "Swift", value: "swift" },
+  { label: "XML", value: "xml" },
+  { label: "YAML", value: "yaml" }
+];
+
+export function CodeBlockCombobox() {
+  const state = useCodeBlockComboboxState();
+  const { commandItemProps } = useCodeBlockCombobox(state);
+
+  const [open, setOpen] = useState(false);
+
+  if (state.readOnly) return null;
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="h-5 justify-between px-1 text-xs"
+          role="combobox"
+          size="xs"
+          variant="ghost"
+        >
+          {state.value
+            ? languages.find((language) => language.value === state.value)
+                ?.label
+            : "Plain Text"}
+          <Icons.chevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search language..." />
+          <CommandEmpty>No language found.</CommandEmpty>
+
+          <CommandList>
+            {languages.map((language) => (
+              <CommandItem
+                className="cursor-pointer"
+                key={language.value}
+                onSelect={(_value) => {
+                  commandItemProps.onSelect(_value);
+                  setOpen(false);
+                }}
+                value={language.value}
+              >
+                <Icons.check
+                  className={cn(
+                    "mr-2 size-4",
+                    state.value === language.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {language.label}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}