@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/src/ui/number-input.tsx

@@ -1,104 +1,104 @@
-"use client"
-
-import * as React from "react"
-import { Minus, Plus } from "lucide-react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Input } from "./input"
-
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
-  value: number
-  onValueChange: (value: number) => void
-  min?: number
-  max?: number
-  step?: number
-  unit?: string
-}
-
-export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
-  ({ value, onValueChange, min = 0, max = 100, step = 1, unit = "px", className, ...props }, ref) => {
-    const timerRef = React.useRef<NodeJS.Timeout | null>(null)
-    const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
-    const valueRef = React.useRef(value)
-
-    // Sync ref with current value for interval closure
-    React.useEffect(() => {
-      valueRef.current = value
-    }, [value])
-
-    const updateValue = React.useCallback((delta: number) => {
-      onValueChange(Math.min(Math.max(valueRef.current + delta, min), max))
-    }, [onValueChange, min, max])
-
-    const startLongPress = (delta: number) => {
-      updateValue(delta)
-      timerRef.current = setTimeout(() => {
-        intervalRef.current = setInterval(() => {
-          updateValue(delta)
-        }, 50)
-      }, 300) // Reduced initial delay to 300ms
-    }
-
-    const stopLongPress = React.useCallback(() => {
-      if (timerRef.current) clearTimeout(timerRef.current)
-      if (intervalRef.current) clearInterval(intervalRef.current)
-    }, [])
-
-    const handleBlur = () => {
-      onValueChange(Math.min(Math.max(value, min), max))
-    }
-
-    React.useEffect(() => {
-      return () => stopLongPress()
-    }, [stopLongPress])
-
-    return (
-      <div className={cn("editor-number-input-container", className)}>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="editor-number-input-btn"
-          onMouseDown={() => startLongPress(-step)}
-          onMouseUp={stopLongPress}
-          onMouseLeave={stopLongPress}
-          onTouchStart={() => startLongPress(-step)}
-          onTouchEnd={stopLongPress}
-          tabIndex={-1} // Prevent tabbing into buttons
-        >
-          <Minus size={14} />
-        </Button>
-        <div className="editor-number-input-wrapper">
-          <Input
-            {...props}
-            ref={ref}
-            type="number"
-            value={value}
-            onBlur={handleBlur}
-            onChange={(e) => {
-              const val = parseInt(e.target.value, 10)
-              if (!isNaN(val)) onValueChange(val)
-              else onValueChange(0) // Default to 0 for invalid input while typing
-            }}
-            className="editor-number-input-field"
-          />
-          {unit && <span className="editor-number-input-unit">{unit}</span>}
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="editor-number-input-btn"
-          onMouseDown={() => startLongPress(step)}
-          onMouseUp={stopLongPress}
-          onMouseLeave={stopLongPress}
-          onTouchStart={() => startLongPress(step)}
-          onTouchEnd={stopLongPress}
-          tabIndex={-1}
-        >
-          <Plus size={14} />
-        </Button>
-      </div>
-    )
-  }
-)
-
-NumberInput.displayName = "NumberInput"
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  unit?: string
+}
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  ({ value, onValueChange, min = 0, max = 100, step = 1, unit = "px", className, ...props }, ref) => {
+    const timerRef = React.useRef<NodeJS.Timeout | null>(null)
+    const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
+    const valueRef = React.useRef(value)
+
+    // Sync ref with current value for interval closure
+    React.useEffect(() => {
+      valueRef.current = value
+    }, [value])
+
+    const updateValue = React.useCallback((delta: number) => {
+      onValueChange(Math.min(Math.max(valueRef.current + delta, min), max))
+    }, [onValueChange, min, max])
+
+    const startLongPress = (delta: number) => {
+      updateValue(delta)
+      timerRef.current = setTimeout(() => {
+        intervalRef.current = setInterval(() => {
+          updateValue(delta)
+        }, 50)
+      }, 300) // Reduced initial delay to 300ms
+    }
+
+    const stopLongPress = React.useCallback(() => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }, [])
+
+    const handleBlur = () => {
+      onValueChange(Math.min(Math.max(value, min), max))
+    }
+
+    React.useEffect(() => {
+      return () => stopLongPress()
+    }, [stopLongPress])
+
+    return (
+      <div className={cn("editor-number-input-container", className)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="editor-number-input-btn"
+          onMouseDown={() => startLongPress(-step)}
+          onMouseUp={stopLongPress}
+          onMouseLeave={stopLongPress}
+          onTouchStart={() => startLongPress(-step)}
+          onTouchEnd={stopLongPress}
+          tabIndex={-1} // Prevent tabbing into buttons
+        >
+          <Minus size={14} />
+        </Button>
+        <div className="editor-number-input-wrapper">
+          <Input
+            {...props}
+            ref={ref}
+            type="number"
+            value={value}
+            onBlur={handleBlur}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10)
+              if (!isNaN(val)) onValueChange(val)
+              else onValueChange(0) // Default to 0 for invalid input while typing
+            }}
+            className="editor-number-input-field"
+          />
+          {unit && <span className="editor-number-input-unit">{unit}</span>}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="editor-number-input-btn"
+          onMouseDown={() => startLongPress(step)}
+          onMouseUp={stopLongPress}
+          onMouseLeave={stopLongPress}
+          onTouchStart={() => startLongPress(step)}
+          onTouchEnd={stopLongPress}
+          tabIndex={-1}
+        >
+          <Plus size={14} />
+        </Button>
+      </div>
+    )
+  }
+)
+
+NumberInput.displayName = "NumberInput"

package/src/ui/popover.tsx

@@ -1,128 +1,128 @@
-import * as React from "react"
-import { createPortal } from "react-dom"
-import { cn } from "../lib/utils"
-
-interface PopoverContextValue {
-  open: boolean
-  setOpen: (open: boolean) => void
-  triggerRef: React.RefObject<HTMLButtonElement | null>
-  modal?: boolean
-}
-
-const PopoverContext = React.createContext<PopoverContextValue | null>(null)
-
-export function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, modal = false }: { 
-  children: React.ReactNode
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  modal?: boolean
-}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
-  const triggerRef = React.useRef<HTMLButtonElement>(null)
-
-  const open = controlledOpen ?? uncontrolledOpen
-  const setOpen = onOpenChange ?? setUncontrolledOpen
-
-  const contextValue = React.useMemo(() => ({
-    open, setOpen, triggerRef, modal
-  }), [open, setOpen, modal])
-
-  return (
-    <PopoverContext.Provider value={contextValue}>
-      {children}
-    </PopoverContext.Provider>
-  )
-}
-
-export function PopoverTrigger({ children, asChild, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode, disabled?: boolean }) {
-  const context = React.useContext(PopoverContext)
-  if (!context) throw new Error("PopoverTrigger must be used within Popover")
-
-  const { triggerRef, open, setOpen } = context
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    setOpen(!open)
-    if (React.isValidElement(children)) {
-      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
-    }
-  }
-
-  if (asChild && React.isValidElement(children)) {
-    // eslint-disable-next-line react-hooks/refs
-    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }>, {
-      ref: triggerRef,
-      onClick: handleClick,
-      ...props
-    })
-  }
-
-  return (
-    <button
-      type="button"
-      ref={triggerRef}
-      onClick={handleClick}
-      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-    >
-      {children}
-    </button>
-  )
-}
-
-export function PopoverContent({ children, className, align = "center", sideOffset = 4, ...props }: React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end", sideOffset?: number }) {
-  const context = React.useContext(PopoverContext)
-  const [position, setPosition] = React.useState({ top: 0, left: 0 })
-  const contentRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (context?.open && context.triggerRef.current) {
-      const rect = context.triggerRef.current.getBoundingClientRect()
-      // Simple positioning logic (bottom-center or bottom-left)
-      // Real popover needs collision detection, but this is "lite"
-      let left = rect.left
-      if (align === "center") {
-        left = rect.left + rect.width / 2 // Will need to subtract half content width after render
-      } else if (align === "end") {
-        left = rect.right 
-      }
-      
-      setPosition({
-        top: rect.bottom + window.scrollY + sideOffset,
-        left: left + window.scrollX 
-      })
-
-      const handleClickOutside = (e: MouseEvent) => {
-        if (contentRef.current && !contentRef.current.contains(e.target as Node) && 
-            !context.triggerRef.current?.contains(e.target as Node)) {
-          context.setOpen(false)
-        }
-      }
-      document.addEventListener("mousedown", handleClickOutside)
-      return () => document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [context, context?.open, align, sideOffset])
-
-  if (!context?.open) return null
-
-  return createPortal(
-    <div
-      ref={contentRef}
-      className={cn("editor-popover-content", className)}
-      style={{
-        position: "absolute",
-        top: position.top,
-        left: position.left,
-        zIndex: 9999
-      }}
-      {...props}
-    >
-      {children}
-    </div>,
-    document.body
-  )
-}
-
-export function PopoverPortal({ children, container }: { children: React.ReactNode, container?: HTMLElement | null }) {
-  if (!container) return <>{children}</>
-  return createPortal(children, container)
-}
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../lib/utils"
+
+interface PopoverContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  modal?: boolean
+}
+
+const PopoverContext = React.createContext<PopoverContextValue | null>(null)
+
+export function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, modal = false }: { 
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  modal?: boolean
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = onOpenChange ?? setUncontrolledOpen
+
+  const contextValue = React.useMemo(() => ({
+    open, setOpen, triggerRef, modal
+  }), [open, setOpen, modal])
+
+  return (
+    <PopoverContext.Provider value={contextValue}>
+      {children}
+    </PopoverContext.Provider>
+  )
+}
+
+export function PopoverTrigger({ children, asChild, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode, disabled?: boolean }) {
+  const context = React.useContext(PopoverContext)
+  if (!context) throw new Error("PopoverTrigger must be used within Popover")
+
+  const { triggerRef, open, setOpen } = context
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    setOpen(!open)
+    if (React.isValidElement(children)) {
+      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    // eslint-disable-next-line react-hooks/refs
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }>, {
+      ref: triggerRef,
+      onClick: handleClick,
+      ...props
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      ref={triggerRef}
+      onClick={handleClick}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function PopoverContent({ children, className, align = "center", sideOffset = 4, ...props }: React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end", sideOffset?: number }) {
+  const context = React.useContext(PopoverContext)
+  const [position, setPosition] = React.useState({ top: 0, left: 0 })
+  const contentRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (context?.open && context.triggerRef.current) {
+      const rect = context.triggerRef.current.getBoundingClientRect()
+      // Simple positioning logic (bottom-center or bottom-left)
+      // Real popover needs collision detection, but this is "lite"
+      let left = rect.left
+      if (align === "center") {
+        left = rect.left + rect.width / 2 // Will need to subtract half content width after render
+      } else if (align === "end") {
+        left = rect.right 
+      }
+      
+      setPosition({
+        top: rect.bottom + window.scrollY + sideOffset,
+        left: left + window.scrollX 
+      })
+
+      const handleClickOutside = (e: MouseEvent) => {
+        if (contentRef.current && !contentRef.current.contains(e.target as Node) && 
+            !context.triggerRef.current?.contains(e.target as Node)) {
+          context.setOpen(false)
+        }
+      }
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [context, context?.open, align, sideOffset])
+
+  if (!context?.open) return null
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      className={cn("editor-popover-content", className)}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        zIndex: 9999
+      }}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body
+  )
+}
+
+export function PopoverPortal({ children, container }: { children: React.ReactNode, container?: HTMLElement | null }) {
+  if (!container) return <>{children}</>
+  return createPortal(children, container)
+}

package/src/ui/scroll-area.tsx

@@ -1,17 +1,17 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("editor-scroll-area-viewport", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-)
-ScrollArea.displayName = "ScrollArea"
-
-export const ScrollBar = () => null // No-op for now, or use custom scrollbar styles
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-scroll-area-viewport", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+ScrollArea.displayName = "ScrollArea"
+
+export const ScrollBar = () => null // No-op for now, or use custom scrollbar styles