@thangph2146/lexical-editor 0.0.4 → 0.0.6

package/src/transformers/markdown-list-transformer.ts

@@ -1,51 +1,51 @@
-import {
-  $createListItemNode,
-  $isListItemNode,
-  $isListNode,
-  ListItemNode,
-  ListNode,
-} from "@lexical/list"
-import { ElementTransformer } from "@lexical/markdown"
-
-import {
-  $createListWithColorNode,
-  $isListWithColorNode,
-  ListWithColorNode,
-} from "../nodes/list-with-color-node"
-
-export const UNORDERED_LIST: ElementTransformer = {
-  dependencies: [ListWithColorNode, ListNode, ListItemNode],
-  export: (node) => {
-    if (!$isListNode(node) || node.getListType() !== "bullet") {
-      return null
-    }
-    const marker = $isListWithColorNode(node) ? node.getMarkerType() || "-" : "-"
-    const children = node.getChildren()
-    const output = []
-    for (const child of children) {
-      if ($isListItemNode(child)) {
-        output.push(`${marker} ${child.getTextContent()}`)
-      }
-    }
-    return output.join("\n")
-  },
-  regExp: /^(\s*)([*+-])\s/,
-  replace: (parentNode, _children, match, isImport) => {
-    const marker = match[2]
-    const list = $createListWithColorNode("bullet")
-
-    if (marker === "-" || marker === "+") {
-      list.setMarkerType(marker)
-    }
-
-    if (isImport || parentNode.getNextSibling() != null) {
-      parentNode.replace(list)
-    } else {
-      parentNode.insertBefore(list)
-    }
-    const item = $createListItemNode()
-    list.append(item)
-    item.select()
-  },
-  type: "element",
-}
+import {
+  $createListItemNode,
+  $isListItemNode,
+  $isListNode,
+  ListItemNode,
+  ListNode,
+} from "@lexical/list"
+import { ElementTransformer } from "@lexical/markdown"
+
+import {
+  $createListWithColorNode,
+  $isListWithColorNode,
+  ListWithColorNode,
+} from "../nodes/list-with-color-node"
+
+export const UNORDERED_LIST: ElementTransformer = {
+  dependencies: [ListWithColorNode, ListNode, ListItemNode],
+  export: (node) => {
+    if (!$isListNode(node) || node.getListType() !== "bullet") {
+      return null
+    }
+    const marker = $isListWithColorNode(node) ? node.getMarkerType() || "-" : "-"
+    const children = node.getChildren()
+    const output = []
+    for (const child of children) {
+      if ($isListItemNode(child)) {
+        output.push(`${marker} ${child.getTextContent()}`)
+      }
+    }
+    return output.join("\n")
+  },
+  regExp: /^(\s*)([*+-])\s/,
+  replace: (parentNode, _children, match, isImport) => {
+    const marker = match[2]
+    const list = $createListWithColorNode("bullet")
+
+    if (marker === "-" || marker === "+") {
+      list.setMarkerType(marker)
+    }
+
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(list)
+    } else {
+      parentNode.insertBefore(list)
+    }
+    const item = $createListItemNode()
+    list.append(item)
+    item.select()
+  },
+  type: "element",
+}

package/src/ui/button.tsx

@@ -1,14 +1,16 @@
 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", ...props }, ref) => {
+  ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
     return (
       <button
         type={type}
@@ -16,11 +18,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           "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>
     )
   }
 )

package/src/ui/collapsible.tsx

@@ -43,7 +43,7 @@ export function CollapsibleTrigger({ children, asChild, ...props }: React.HTMLAt
   }
 
   if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<any>, { onClick: handleClick, ...props })
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, { onClick: handleClick, ...props })
   }
 
   return (

package/src/ui/dialog.tsx

@@ -34,7 +34,7 @@ export function DialogTrigger({ asChild, children, className, ...props }: React.
   }
 
   if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<any>, {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
       onClick: handleClick,
       ...props
     })
@@ -58,7 +58,7 @@ export function DialogClose({ asChild, children, className, ...props }: React.HT
   }
 
   if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement<any>, {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
       onClick: handleClick,
       ...props
     })

package/src/ui/flex.tsx

@@ -23,10 +23,10 @@ export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
         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}`,
+          align && `editor-items-${align}`,
+          justify && `editor-justify-${justify}`,
+          direction && `editor-flex-${direction}`,
+          wrap && `editor-flex-${wrap}`,
           className
         )}
         style={{ ...gapStyle, ...style }}

package/src/ui/popover.tsx

@@ -50,7 +50,7 @@ export function PopoverTrigger({ children, asChild, ...props }: React.HTMLAttrib
 
   if (asChild && React.isValidElement(children)) {
     // eslint-disable-next-line react-hooks/refs
-    return React.cloneElement(children as React.ReactElement<any>, {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }>, {
       ref: triggerRef,
       onClick: handleClick,
       ...props

package/src/ui/tooltip.tsx

@@ -8,9 +8,9 @@ export const Tooltip = ({ children }: { children: React.ReactNode, disableHovera
 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<any>, {
+  return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
     ...props,
-    className: cn((child as React.ReactElement<any>).props.className, "editor-tooltip-trigger")
+    className: cn((child as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, "editor-tooltip-trigger")
   })
 }