@thangph2146/lexical-editor 0.0.1

package/src/ui/flex.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: "start" | "center" | "end" | "baseline" | "stretch"
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
+  direction?: "row" | "column" | "row-reverse" | "column-reverse"
+  wrap?: "nowrap" | "wrap" | "wrap-reverse"
+  gap?: number | string
+}
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
+    const gapStyle =
+      typeof gap === "number"
+        ? { gap: `${gap * 0.25}rem` }
+        : typeof gap !== "undefined"
+          ? { gap }
+          : undefined
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "editor-flex",
+          align && `editor-flex--items-${align}`,
+          justify && `editor-flex--justify-${justify}`,
+          direction && `editor-flex--flex-${direction}`,
+          wrap && `editor-flex--flex-${wrap}`,
+          className
+        )}
+        style={{ ...gapStyle, ...style }}
+        {...props}
+      />
+    )
+  }
+)
+Flex.displayName = "Flex"

package/src/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn("editor-input", className)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "editor-label",
+      props["aria-disabled"] && "editor-label--disabled",
+      className
+    )}
+    {...props}
+  />
+))
+Label.displayName = "Label"
+
+export { Label }

package/src/ui/popover.tsx

@@ -0,0 +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<any>, {
+      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

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

package/src/ui/select.tsx

@@ -0,0 +1,171 @@
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../lib/utils"
+
+interface SelectContextValue {
+  value: string
+  onValueChange?: (value: string) => void
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  disabled?: boolean
+}
+
+const SelectContext = React.createContext<SelectContextValue | null>(null)
+
+export interface SelectProps {
+  value: string
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+  disabled?: boolean
+  modal?: boolean
+}
+
+export function Select({ value, onValueChange, children, disabled }: SelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const contextValue = React.useMemo(() => ({
+    value, onValueChange, open, setOpen, triggerRef, disabled
+  }), [value, onValueChange, open, setOpen, disabled])
+
+  return (
+    <SelectContext.Provider value={contextValue}>
+      {children}
+    </SelectContext.Provider>
+  )
+}
+
+export interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "default" | "sm" | "lg" | "icon"
+}
+
+export function SelectTrigger({ className, children, size = "default", ...props }: SelectTriggerProps) {
+  const context = React.useContext(SelectContext)
+  if (!context) throw new Error("SelectTrigger must be used within Select")
+
+  const { triggerRef, disabled, open, setOpen } = context
+
+  return (
+    <button
+      ref={triggerRef}
+      type="button"
+      className={cn(
+        "editor-select", 
+        size !== "default" && `editor-select--size-${size}`,
+        className
+      )}
+      onClick={() => !disabled && setOpen(!open)}
+      disabled={disabled || props.disabled}
+      {...props}
+    >
+      {children}
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="editor-select-icon">
+        <path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
+      </svg>
+    </button>
+  )
+}
+
+export function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext)
+  if (!context) throw new Error("SelectValue must be used within Select")
+  
+  return <span>{context.value || placeholder}</span>
+}
+
+export function SelectContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const context = React.useContext(SelectContext)
+  const [position, setPosition] = React.useState({ top: 0, left: 0, width: 0 })
+  const contentRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (context?.open && context.triggerRef.current) {
+      const rect = context.triggerRef.current.getBoundingClientRect()
+      setPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      })
+
+      // Simple click outside for portal
+      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, context?.triggerRef, context?.setOpen])
+
+  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,
+        minWidth: position.width,
+        width: "auto", // allow wider
+        padding: "4px",
+        zIndex: 9999
+      }}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body
+  )
+}
+
+export function SelectItem({ value, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { value: string }) {
+  const context = React.useContext(SelectContext)
+  if (!context) throw new Error("SelectItem must be used within Select")
+
+  const isSelected = context.value === value
+
+  return (
+    <div
+      className={cn(
+        "editor-select-item",
+        className
+      )}
+      data-selected={isSelected}
+      onClick={() => {
+        context.onValueChange?.(value)
+        context.setOpen(false)
+      }}
+      {...props}
+    >
+      {isSelected && (
+        <span className="editor-select-item__check">
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="editor-icon-sm">
+            <path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
+          </svg>
+        </span>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function SelectGroup({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div role="group" className={className} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export function SelectLabel({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("editor-select-label", className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/ui/separator.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const Separator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { orientation?: "horizontal" | "vertical" }
+>(({ className, orientation = "horizontal", ...props }, ref) => (
+  <div
+    ref={ref}
+    role="separator"
+    aria-orientation={orientation}
+    className={cn(
+      "editor-separator",
+      `editor-separator--${orientation}`,
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = "Separator"

package/src/ui/slider.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const Slider = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      type="range"
+      ref={ref}
+      className={cn("editor-slider-input", className)}
+      {...props}
+    />
+  )
+)
+Slider.displayName = "Slider"

package/src/ui/slot.tsx

@@ -0,0 +1,3 @@
+import { Slot as RadixSlot } from "@radix-ui/react-slot"
+
+export const Slot = RadixSlot

package/src/ui/tabs.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const TabsContext = React.createContext<{
+  value: string
+  onValueChange: (value: string) => void
+} | null>(null)
+
+export function Tabs({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  className,
+  ...props
+}: {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+  className?: string
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue || "")
+  const value = controlledValue ?? uncontrolledValue
+  const setValue = onValueChange ?? setUncontrolledValue
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: setValue }}>
+      <div className={cn(className)} {...props}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+export function TabsList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "editor-tabs-list",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function TabsTrigger({ value, className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }) {
+  const context = React.useContext(TabsContext)
+  const isSelected = context?.value === value
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "editor-tabs-trigger",
+        className
+      )}
+      data-state={isSelected ? "active" : "inactive"}
+      onClick={() => context?.onValueChange(value)}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function TabsContent({ value, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { value: string }) {
+  const context = React.useContext(TabsContext)
+  const isSelected = context?.value === value
+
+  if (!isSelected) return null
+
+  return (
+    <div
+      className={cn(
+        "editor-tabs-content",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/ui/toggle-group.tsx

@@ -0,0 +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"

package/src/ui/toggle.tsx

@@ -0,0 +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"