update

public/locales/cn/translation.json

@@ -43,7 +43,7 @@
   "Add A Case": "添加一个用例",
   "Insert around": "插入节点",
   "Group selection": "分组",
-  "Lookahead/LookBehind assertion": "向前/向后断言",
+  "Lookaround assertion": "向前/向后断言",
   "Before": "向前插入",
   "Parallel": "插入或",
   "After": "向后插入",

src/components/cell/index.tsx

@@ -4,6 +4,12 @@ import clsx from 'clsx'
 import type { MdnLinkKey } from '@/utils/links'
 import mdnLinks from '@/utils/links'
 import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 interface ItemProps {
   label: string
@@ -22,31 +28,42 @@ interface Props {
   className?: string
   label: string
   mdnLinkKey?: MdnLinkKey
-  rightLabel?: string
+  rightIcon?: React.ReactNode
+  rightTooltip?: string
+  onRightIconClick?: () => void
   children: React.ReactNode
-  onRightLabelClick?: () => void
 }
 function Cell({
   className,
   label,
   mdnLinkKey,
   children,
-  rightLabel,
-  onRightLabelClick,
+  rightIcon,
+  rightTooltip,
+  onRightIconClick,
 }: Props) {
   return (
     <div>
-      <div className={clsx('flex items-center mb-2.5', { 'justify-between': rightLabel })}>
+      <div className={clsx('flex items-center mb-2.5', { 'justify-between': !!rightIcon })}>
         <h5 className="font-semibold">{label}</h5>
         {mdnLinkKey && (
           <a href={mdnLinks[mdnLinkKey]} target="_blank" rel="noreferrer" className="ml-2">
             <QuestionIcon className="w-4 h-4" />
           </a>
         )}
-        {rightLabel && (
-          <Button onClick={onRightLabelClick} variant="outline" size="sm" className="px-2 h-7">
-            {rightLabel}
-          </Button>
+        {rightIcon && (
+          <TooltipProvider delayDuration={500}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={onRightIconClick} variant="outline" size="icon" className="px-2 h-7">
+                  {rightIcon}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{rightTooltip}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
       </div>
       <div className={className}>{children}</div>

src/components/range-input/index.tsx

@@ -43,14 +43,14 @@ export const RangeInput: React.FC<Prop> = ({
     <div {...hoverProps} {...focusProps} className={clsx('flex items-center', className)}>
       <div className="flex items-center space-x-2">
         <Input
-          className="flex-1"
+          className="flex-1 font-mono"
           value={value.start}
           placeholder={startPlaceholder}
           onChange={onStartChange}
         />
         <span>{' - '}</span>
         <Input
-          className="flex-1"
+          className="flex-1 font-mono"
           value={value.end}
           placeholder={endPlaceholder}
           onChange={onEndChange}

src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useDebounceCallback } from 'usehooks-ts'
 import { useFocus } from '@/utils/hooks'
 import { cn } from '@/utils'
@@ -8,41 +8,37 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   onChange: (value: string) => void
 }
 
-const DEBOUNCE_DELAY = 300
+const DEBOUNCE_DELAY = 500
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, value, onChange, ...rest }, ref) => {
+    const [text, setText] = useState(value)
     const latestOnChange = useLatest(onChange)
 
-    const onInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-      latestOnChange.current(e.target.value)
+    const onTextChange = useCallback((text: string) => {
+      latestOnChange.current(text)
     }, [latestOnChange])
 
-    const debouncedChange = useDebounceCallback(onInputChange, DEBOUNCE_DELAY)
+    const debouncedOnTextChange = useDebounceCallback(onTextChange, DEBOUNCE_DELAY)
+
+    const onInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const text = e.target.value
+      setText(text)
+      debouncedOnTextChange(text)
+    }, [debouncedOnTextChange])
 
     const { focused, focusProps } = useFocus({
+      onFocus: () => setText(value),
       // flush debouncedChange on blur
-      onBlur: debouncedChange.flush,
+      onBlur: debouncedOnTextChange.flush,
     })
 
     // flush debouncedChange on unmount
     useEffect(() => {
       return () => {
-        debouncedChange.flush()
+        debouncedOnTextChange.flush()
       }
-    }, [debouncedChange])
-
-    const props: React.ComponentProps<'input'> = {
-      onChange: debouncedChange,
-      ...focusProps,
-      ...rest,
-    }
-
-    if (!focused) {
-      props.value = value
-    } else {
-      props.defaultValue = value
-    }
+    }, [debouncedOnTextChange])
 
     return (
       <input
@@ -51,8 +47,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
+        value={focused ? text : value}
         ref={ref}
-        {...props}
+        onChange={onInputChange}
+        {...focusProps}
+        {...rest}
       />
     )
   },

src/components/ui/label.tsx

@@ -8,7 +8,7 @@ const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 )
 
-const Label = React.forwardRef<
+export const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
   VariantProps<typeof labelVariants>
@@ -20,38 +20,3 @@ const Label = React.forwardRef<
   />
 ))
 Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
-// import React, { useId } from 'react'
-// import * as LabelPrimitive from '@radix-ui/react-label'
-// import { type VariantProps, cva } from 'class-variance-authority'
-
-// import { cn } from '@/utils'
-
-// const labelVariants = cva(
-//   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-// )
-
-// const Label = React.forwardRef<
-//   React.ElementRef<typeof LabelPrimitive.Root>,
-//   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-//   VariantProps<typeof labelVariants> & { label: string }
-// >(({ className, children, label, ...props }, ref) => {
-//   const id = useId()
-//   return (
-//     <>
-//       {() => children}
-//       <LabelPrimitive.Root
-//         ref={ref}
-//         className={cn(labelVariants(), className)}
-//         htmlFor={id}
-//         {...props}
-//       >
-//         {label}
-//       </LabelPrimitive.Root>
-//     </>
-//   )
-// })
-// Label.displayName = LabelPrimitive.Root.displayName
-
-// export { Label }

src/components/validation/index.tsx

@@ -1,30 +1,45 @@
 import { memo, useCallback, useState } from 'react'
 import type { ZodIssue, ZodType, z } from 'zod'
+import { useTranslation } from 'react-i18next'
 
 export type Transformer<I, O> = (value: I) => O
 
 interface Props<I, O> {
   className?: (errors: ZodIssue[]) => string
-  transformer: Transformer<I, O>
-  errorFormatter: (errors: ZodIssue[]) => string
+  transformer?: Transformer<I, O>
+  errorFormatter?: (errors: ZodIssue[]) => string
   children: (value: O, onChange: (value: O) => void) => React.ReactNode
   value: I
-  onChange: (value: I) => void
-  schema: ZodType<I, z.ZodTypeDef, O>
+  onChange: (value: Partial<I>) => void
+  schema: ZodType<Partial<I>, z.ZodTypeDef, O>
+}
+
+const defaultTransformer = <T,>(value: T): T => value
+
+const defaultErrorFormatter = () => {
+  return 'Invalid input'
+}
+
+const defaultClassName = (errors: ZodIssue[]) => {
+  if (errors.length === 0) {
+    return ''
+  }
+  return '[&_:is(input)]:!ring-transparent [&_:is(input)]:!border-red-500'
 }
 
 function InnerValidation<I, O>(props: Props<I, O>) {
   const {
-    className,
-    transformer,
+    className = defaultClassName,
+    transformer = defaultTransformer,
+    errorFormatter = defaultErrorFormatter,
     children,
     value,
     onChange,
     schema,
-    errorFormatter,
   } = props
   const [innerValue, setInnerValue] = useState(() => transformer(value))
   const [errors, setErrors] = useState<ZodIssue[]>([])
+  const { t } = useTranslation()
 
   const onValueChange = useCallback((value: O) => {
     setInnerValue(value)
@@ -38,7 +53,7 @@ function InnerValidation<I, O>(props: Props<I, O>) {
   return (
     <div className={className ? className(errors) : ''}>
       {children(innerValue as O, onValueChange)}
-      {errors.length > 0 ? <div className="text-red-500 text-xs">{errorFormatter(errors)}</div> : null }
+      {errors.length > 0 ? <div className="text-red-500 text-xs">{t(errorFormatter(errors))}</div> : null }
     </div>
   )
 }

src/modules/editor/features/content/back-ref.tsx

@@ -37,7 +37,7 @@ const BackRef: React.FC<Props> = ({ reference }) => {
         onValueChange={onChange}
       >
         <SelectTrigger className="w-52">
-          <SelectValue placeholder={t('Choose one')} className="" />
+          <SelectValue placeholder={t('Choose one')} />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>