@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/src/ui/toggle-group.tsx

@@ -1,109 +1,109 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-type ToggleGroupContextValue = {
-  type: "single" | "multiple"
-  value: string | string[]
-  onValueChange: (value: string | string[]) => void
-  size?: "default" | "sm" | "lg"
-  variant?: "default" | "outline"
-}
-
-const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
-
-type ToggleGroupProps = (
-  | { type: "single"; value?: string; onValueChange?: (value: string) => void }
-  | { type: "multiple"; value?: string[]; onValueChange?: (value: string[]) => void }
-) & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
-  size?: "default" | "sm" | "lg"
-  variant?: "default" | "outline"
-}
-
-export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
-  ({ className, type = "single", value, onValueChange, children, size, variant, ...props }, ref) => {
-    const contextValue: ToggleGroupContextValue = React.useMemo(() => ({
-      type: type as "single" | "multiple",
-      value: value || (type === "multiple" ? [] : ""),
-      onValueChange: (val: string | string[]) => {
-        if (type === "single" && typeof val === "string") {
-          (onValueChange as ((v: string) => void))?.(val)
-        } else if (type === "multiple" && Array.isArray(val)) {
-          (onValueChange as ((v: string[]) => void))?.(val)
-        }
-      },
-      size,
-      variant
-    }), [type, value, onValueChange, size, variant])
-
-    return (
-      <ToggleGroupContext.Provider value={contextValue}>
-        <div ref={ref} className={cn("editor-toggle-group", className)} {...props}>
-          {children}
-        </div>
-      </ToggleGroupContext.Provider>
-    )
-  }
-)
-ToggleGroup.displayName = "ToggleGroup"
-
-export const ToggleGroupItem = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string, size?: "default" | "sm" | "lg", variant?: "default" | "outline" }
->(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
-  
-  const size = itemSize || context?.size || "default"
-  // variant is not used in styles yet but good to have in props
-  
-  if (!context) {
-    // Fallback if used outside group
-    return (
-      <button
-        ref={ref}
-        type="button"
-        className={cn(
-          "editor-toggle-group-item",
-          size !== "default" && `editor-toggle-group-item--size-${size}`,
-          className
-        )}
-        onClick={onClick}
-        {...props}
-      />
-    )
-  }
-
-  const isSelected = context.type === "single" 
-    ? context.value === value 
-    : Array.isArray(context.value) && context.value.includes(value)
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (context.type === "single") {
-      context.onValueChange(isSelected ? "" : value)
-    } else {
-      const currentValues = Array.isArray(context.value) ? context.value : []
-      const newValues = isSelected
-        ? currentValues.filter((v) => v !== value)
-        : [...currentValues, value]
-      context.onValueChange(newValues)
-    }
-    onClick?.(e)
-  }
-
-  return (
-    <button
-      ref={ref}
-      type="button"
-      aria-pressed={isSelected}
-      data-state={isSelected ? "on" : "off"}
-      className={cn(
-        "editor-toggle-group-item",
-        size !== "default" && `editor-toggle-group-item--size-${size}`,
-        (itemVariant === "outline" || (!itemVariant && context?.variant === "outline")) && "editor-toggle-group-item--outline",
-        className
-      )}
-      onClick={handleClick}
-      {...props}
-    />
-  )
-})
-ToggleGroupItem.displayName = "ToggleGroupItem"
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+type ToggleGroupContextValue = {
+  type: "single" | "multiple"
+  value: string | string[]
+  onValueChange: (value: string | string[]) => void
+  size?: "default" | "sm" | "lg"
+  variant?: "default" | "outline"
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
+
+type ToggleGroupProps = (
+  | { type: "single"; value?: string; onValueChange?: (value: string) => void }
+  | { type: "multiple"; value?: string[]; onValueChange?: (value: string[]) => void }
+) & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+  size?: "default" | "sm" | "lg"
+  variant?: "default" | "outline"
+}
+
+export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+  ({ className, type = "single", value, onValueChange, children, size, variant, ...props }, ref) => {
+    const contextValue: ToggleGroupContextValue = React.useMemo(() => ({
+      type: type as "single" | "multiple",
+      value: value || (type === "multiple" ? [] : ""),
+      onValueChange: (val: string | string[]) => {
+        if (type === "single" && typeof val === "string") {
+          (onValueChange as ((v: string) => void))?.(val)
+        } else if (type === "multiple" && Array.isArray(val)) {
+          (onValueChange as ((v: string[]) => void))?.(val)
+        }
+      },
+      size,
+      variant
+    }), [type, value, onValueChange, size, variant])
+
+    return (
+      <ToggleGroupContext.Provider value={contextValue}>
+        <div ref={ref} className={cn("editor-toggle-group", className)} {...props}>
+          {children}
+        </div>
+      </ToggleGroupContext.Provider>
+    )
+  }
+)
+ToggleGroup.displayName = "ToggleGroup"
+
+export const ToggleGroupItem = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string, size?: "default" | "sm" | "lg", variant?: "default" | "outline" }
+>(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+  
+  const size = itemSize || context?.size || "default"
+  // variant is not used in styles yet but good to have in props
+  
+  if (!context) {
+    // Fallback if used outside group
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "editor-toggle-group-item",
+          size !== "default" && `editor-toggle-group-item--size-${size}`,
+          className
+        )}
+        onClick={onClick}
+        {...props}
+      />
+    )
+  }
+
+  const isSelected = context.type === "single" 
+    ? context.value === value 
+    : Array.isArray(context.value) && context.value.includes(value)
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (context.type === "single") {
+      context.onValueChange(isSelected ? "" : value)
+    } else {
+      const currentValues = Array.isArray(context.value) ? context.value : []
+      const newValues = isSelected
+        ? currentValues.filter((v) => v !== value)
+        : [...currentValues, value]
+      context.onValueChange(newValues)
+    }
+    onClick?.(e)
+  }
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={isSelected}
+      data-state={isSelected ? "on" : "off"}
+      className={cn(
+        "editor-toggle-group-item",
+        size !== "default" && `editor-toggle-group-item--size-${size}`,
+        (itemVariant === "outline" || (!itemVariant && context?.variant === "outline")) && "editor-toggle-group-item--outline",
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    />
+  )
+})
+ToggleGroupItem.displayName = "ToggleGroupItem"

package/src/ui/toggle.tsx

@@ -1,28 +1,28 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export const Toggle = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement> & { 
-    pressed?: boolean
-    onPressedChange?: (pressed: boolean) => void
-    variant?: "default" | "outline" | "ghost"
-    size?: "default" | "sm" | "lg"
-  }
->(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => (
-  <button
-    ref={ref}
-    type="button"
-    aria-pressed={pressed}
-    data-state={pressed ? "on" : "off"}
-    className={cn(
-      "editor-toggle",
-      variant !== "default" && `editor-toggle--${variant}`,
-      size !== "default" && `editor-toggle--size-${size}`,
-      className
-    )}
-    onClick={() => onPressedChange?.(!pressed)}
-    {...props}
-  />
-))
-Toggle.displayName = "Toggle"
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const Toggle = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { 
+    pressed?: boolean
+    onPressedChange?: (pressed: boolean) => void
+    variant?: "default" | "outline" | "ghost"
+    size?: "default" | "sm" | "lg"
+  }
+>(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-pressed={pressed}
+    data-state={pressed ? "on" : "off"}
+    className={cn(
+      "editor-toggle",
+      variant !== "default" && `editor-toggle--${variant}`,
+      size !== "default" && `editor-toggle--size-${size}`,
+      className
+    )}
+    onClick={() => onPressedChange?.(!pressed)}
+    {...props}
+  />
+))
+Toggle.displayName = "Toggle"

package/src/ui/tooltip.tsx

@@ -1,28 +1,28 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>
-
-export const Tooltip = ({ children }: { children: React.ReactNode, disableHoverableContent?: boolean }) => <div className="editor-tooltip-group">{children}</div>
-
-export const TooltipTrigger = ({ asChild, children, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) => {
-  const child = asChild ? React.Children.only(children) : children
-  if (!React.isValidElement(child)) return null
-  return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
-    ...props,
-    className: cn((child as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, "editor-tooltip-trigger")
-  })
-}
-
-export const TooltipContent = ({ children, className, side = "top", ...props }: React.HTMLAttributes<HTMLDivElement> & { side?: "top" | "bottom" | "left" | "right" }) => (
-  <div
-    className={cn(
-      "editor-tooltip-content",
-      `editor-tooltip-content--${side}`,
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-)
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>
+
+export const Tooltip = ({ children }: { children: React.ReactNode, disableHoverableContent?: boolean }) => <div className="editor-tooltip-group">{children}</div>
+
+export const TooltipTrigger = ({ asChild, children, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) => {
+  const child = asChild ? React.Children.only(children) : children
+  if (!React.isValidElement(child)) return null
+  return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
+    ...props,
+    className: cn((child as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, "editor-tooltip-trigger")
+  })
+}
+
+export const TooltipContent = ({ children, className, side = "top", ...props }: React.HTMLAttributes<HTMLDivElement> & { side?: "top" | "bottom" | "left" | "right" }) => (
+  <div
+    className={cn(
+      "editor-tooltip-content",
+      `editor-tooltip-content--${side}`,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+)

package/src/ui/typography.tsx

@@ -1,44 +1,44 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export const IconSize = ({ size = "medium", children, className }: { size?: "small" | "medium" | "large" | "sm" | "md" | "lg" | "xs" | "xl", children: React.ReactNode, className?: string }) => {
-  const sizeMap: Record<string, string> = {
-    xs: "editor-icon-xs",
-    small: "editor-icon-sm",
-    medium: "editor-icon-md",
-    large: "editor-icon-lg",
-    xl: "editor-icon-xl",
-    sm: "editor-icon-sm",
-    md: "editor-icon-md",
-    lg: "editor-icon-lg",
-  }
-  
-  if (React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
-      className: cn(sizeMap[size] || sizeMap.medium, (children as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, className)
-    })
-  }
-  
-  return <>{children}</>
-}
-
-export const TypographyP = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("editor-typography-p", className)} {...props} />
-  )
-)
-TypographyP.displayName = "TypographyP"
-
-export const TypographyPSmall = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("editor-typography-p-small", className)} {...props} />
-  )
-)
-TypographyPSmall.displayName = "TypographyPSmall"
-
-export const TypographySpanSmallMuted = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
-  ({ className, ...props }, ref) => (
-    <span ref={ref} className={cn("editor-typography-span-small-muted", className)} {...props} />
-  )
-)
-TypographySpanSmallMuted.displayName = "TypographySpanSmallMuted"
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const IconSize = ({ size = "medium", children, className }: { size?: "small" | "medium" | "large" | "sm" | "md" | "lg" | "xs" | "xl", children: React.ReactNode, className?: string }) => {
+  const sizeMap: Record<string, string> = {
+    xs: "editor-icon-xs",
+    small: "editor-icon-sm",
+    medium: "editor-icon-md",
+    large: "editor-icon-lg",
+    xl: "editor-icon-xl",
+    sm: "editor-icon-sm",
+    md: "editor-icon-md",
+    lg: "editor-icon-lg",
+  }
+  
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
+      className: cn(sizeMap[size] || sizeMap.medium, (children as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, className)
+    })
+  }
+  
+  return <>{children}</>
+}
+
+export const TypographyP = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("editor-typography-p", className)} {...props} />
+  )
+)
+TypographyP.displayName = "TypographyP"
+
+export const TypographyPSmall = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("editor-typography-p-small", className)} {...props} />
+  )
+)
+TypographyPSmall.displayName = "TypographyPSmall"
+
+export const TypographySpanSmallMuted = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn("editor-typography-span-small-muted", className)} {...props} />
+  )
+)
+TypographySpanSmallMuted.displayName = "TypographySpanSmallMuted"