@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/src/themes/plugins/_floating-link-editor.scss

@@ -20,15 +20,41 @@
   &__input-container {
     @include flex-center;
     gap: $editor-gap-1;
-    padding: $editor-gap-1;
+    padding: $editor-gap-2;
+    width: 100%;
+  }
+
+  &__library {
+    display: flex;
+    flex-direction: column;
+    gap: $editor-gap-1;
+    width: 100%;
+    max-height: 220px;
+    overflow: auto;
+    border-top: $editor-border-width solid var(--border);
+    padding: $editor-gap-2;
+  }
+
+  &__library-item {
     width: 100%;
+    text-align: left;
+    background: transparent;
+    border: 0;
+    color: var(--foreground);
+    padding: $editor-gap-1;
+    @include rounded-sm;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--muted);
+    }
   }
 
   &__view-container {
     @include flex-center;
     justify-content: space-between;
     gap: $editor-gap-2;
-    padding: $editor-gap-1 $editor-gap-1 $editor-gap-1 $editor-gap-3;
+    padding: $editor-gap-1 $editor-gap-1 $editor-gap-1 $editor-gap-3 !important;
     width: 100%;
   }
 

package/src/themes/ui-components/_button.scss

@@ -17,7 +17,7 @@
   position: relative;
   padding: $editor-gap-2 $editor-gap-4;
   box-sizing: border-box; // Ensure consistent sizing
-  @include shadow-sm;
+  @include shadow-md;
   @include editor-button-interactive;
 
   &:disabled {

package/src/themes/ui-components/_flex.scss

@@ -12,6 +12,7 @@
 
 .editor-shrink-0 {
   flex-shrink: 0;
+  gap: 8px !important;
 }
 
 .editor-flex-grow {

package/src/ui/button-group.tsx

@@ -1,10 +1,10 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export function ButtonGroup({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className={cn("editor-button-group", className)} {...props}>
-      {children}
-    </div>
-  )
-}
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export function ButtonGroup({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("editor-button-group", className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/ui/button.tsx

@@ -1,38 +1,38 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-import { Loader2 } from "lucide-react"
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-  size?: "default" | "sm" | "md" | "lg" | "icon"
-  isLoading?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
-    return (
-      <button
-        type={type}
-        className={cn(
-          "editor-btn",
-          variant !== "default" && `editor-btn--${variant}`,
-          size !== "default" && `editor-btn--size-${size}`,
-          isLoading && "editor-btn--loading",
-          className
-        )}
-        disabled={isLoading || disabled}
-        ref={ref}
-        {...props}
-      >
-        {isLoading && <Loader2 className="editor-btn__loader editor-animate-spin" size={16} />}
-        <span className={cn("editor-btn__content", isLoading && "editor-opacity-0")}>
-          {children}
-        </span>
-      </button>
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button }
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Loader2 } from "lucide-react"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "md" | "lg" | "icon"
+  isLoading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
+    return (
+      <button
+        type={type}
+        className={cn(
+          "editor-btn",
+          variant !== "default" && `editor-btn--${variant}`,
+          size !== "default" && `editor-btn--size-${size}`,
+          isLoading && "editor-btn--loading",
+          className
+        )}
+        disabled={isLoading || disabled}
+        ref={ref}
+        {...props}
+      >
+        {isLoading && <Loader2 className="editor-btn__loader editor-animate-spin" size={16} />}
+        <span className={cn("editor-btn__content", isLoading && "editor-opacity-0")}>
+          {children}
+        </span>
+      </button>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button }

package/src/ui/collapsible.tsx

@@ -1,67 +1,67 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-const CollapsibleContext = React.createContext<{
-  open: boolean
-  setOpen: (open: boolean) => void
-} | null>(null)
-
-export function Collapsible({
-  children,
-  open: controlledOpen,
-  onOpenChange,
-  className,
-  ...props
-}: {
-  children: React.ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  className?: string
-}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
-  const open = controlledOpen ?? uncontrolledOpen
-  const setOpen = onOpenChange ?? setUncontrolledOpen
-
-  return (
-    <CollapsibleContext.Provider value={{ open, setOpen }}>
-      <div className={cn("editor-collapsible", className)} data-state={open ? "open" : "closed"} {...props}>
-        {children}
-      </div>
-    </CollapsibleContext.Provider>
-  )
-}
-
-export function CollapsibleTrigger({ children, asChild, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) {
-  const context = React.useContext(CollapsibleContext)
-  if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    context.setOpen(!context.open)
-    if (React.isValidElement(children)) {
-      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
-    }
-  }
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, { onClick: handleClick, ...props })
-  }
-
-  return (
-    <button type="button" onClick={handleClick} {...props}>
-      {children}
-    </button>
-  )
-}
-
-export function CollapsibleContent({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  const context = React.useContext(CollapsibleContext)
-  if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
-
-  if (!context.open) return null
-
-  return (
-    <div className={cn("editor-overflow-hidden", className)} {...props}>
-      {children}
-    </div>
-  )
-}
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const CollapsibleContext = React.createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+} | null>(null)
+
+export function Collapsible({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  className,
+  ...props
+}: {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  className?: string
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = onOpenChange ?? setUncontrolledOpen
+
+  return (
+    <CollapsibleContext.Provider value={{ open, setOpen }}>
+      <div className={cn("editor-collapsible", className)} data-state={open ? "open" : "closed"} {...props}>
+        {children}
+      </div>
+    </CollapsibleContext.Provider>
+  )
+}
+
+export function CollapsibleTrigger({ children, asChild, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    context.setOpen(!context.open)
+    if (React.isValidElement(children)) {
+      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, { onClick: handleClick, ...props })
+  }
+
+  return (
+    <button type="button" onClick={handleClick} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export function CollapsibleContent({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
+
+  if (!context.open) return null
+
+  return (
+    <div className={cn("editor-overflow-hidden", className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/ui/command.tsx

@@ -1,48 +1,48 @@
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-export const Command = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("editor-command", className)}
-      {...props}
-    />
-  )
-)
-Command.displayName = "Command"
-
-export const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("editor-command-list", className)}
-      {...props}
-    />
-  )
-)
-CommandList.displayName = "CommandList"
-
-export const CommandGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("editor-command-group", className)}
-      {...props}
-    />
-  )
-)
-CommandGroup.displayName = "CommandGroup"
-
-export const CommandItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { onSelect?: () => void; value?: string }
->(({ className, onSelect, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("editor-command-item", className)}
-    onClick={onSelect}
-    {...props}
-  />
-))
-CommandItem.displayName = "CommandItem"
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const Command = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command", className)}
+      {...props}
+    />
+  )
+)
+Command.displayName = "Command"
+
+export const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command-list", className)}
+      {...props}
+    />
+  )
+)
+CommandList.displayName = "CommandList"
+
+export const CommandGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command-group", className)}
+      {...props}
+    />
+  )
+)
+CommandGroup.displayName = "CommandGroup"
+
+export const CommandItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { onSelect?: () => void; value?: string }
+>(({ className, onSelect, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("editor-command-item", className)}
+    onClick={onSelect}
+    {...props}
+  />
+))
+CommandItem.displayName = "CommandItem"