@thangph2146/lexical-editor 0.0.4 → 0.0.5

package/src/plugins/context-menu-plugin.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react"
-import { useMemo } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
 import {
@@ -9,10 +9,11 @@ import {
 } from "@lexical/react/LexicalNodeContextMenuPlugin"
 import { $mergeCells, $isTableCellNode, $isTableSelection, $unmergeCell, $insertTableColumnAtSelection, $insertTableRowAtSelection } from "@lexical/table"
 import type { TableCellNode } from "@lexical/table"
-import { $isListNode } from "@lexical/list"
+import { $isListNode, ListNode } from "@lexical/list"
 import { $findMatchingParent } from "@lexical/utils"
 import {
   $getSelection,
+  $getNearestNodeFromDOMNode,
   $isDecoratorNode,
   $isNodeSelection,
   $isRangeSelection,
@@ -22,6 +23,8 @@ import {
   type LexicalNode,
 } from "lexical"
 import { $isLayoutItemNode } from "../nodes/layout-item-node"
+import { createListWithColorNodeFromRegistry } from "../editor-x/nodes"
+import { $isListWithColorNode, $createListWithColorNode } from "../nodes/list-with-color-node"
 import { OPEN_UPDATE_LAYOUT_MODAL_COMMAND } from "../plugins/layout-plugin"
 import { OPEN_LIST_COLOR_PICKER_COMMAND } from "../plugins/list-color-plugin"
 import {
@@ -37,11 +40,21 @@ import {
   Rows3,
   LayoutGrid,
   Palette,
+  ListOrderedIcon,
+  Hash,
+  ListIcon,
 } from "lucide-react"
 import { IconSize } from "../ui/typography"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../ui/dialog"
+import { Input } from "../ui/input"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
 
 export function ContextMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
+  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null)
+  const [showMarkerDialog, setShowMarkerDialog] = useState(false)
+  const [customMarker, setCustomMarker] = useState("")
 
   const isInTable = (node: LexicalNode) =>
     $findMatchingParent(node, $isTableCellNode) !== null
@@ -67,6 +80,123 @@ export function ContextMenuPlugin(): JSX.Element {
   const isInList = (node: LexicalNode) =>
     $findMatchingParent(node, $isListNode) !== null
 
+  const isInNumberList = (node: LexicalNode) => {
+    const listNode = $findMatchingParent(node, $isListNode)
+    return $isListNode(listNode) && listNode.getListType() === "number"
+  }
+
+  useEffect(() => {
+    const rootElement = editor.getRootElement()
+    if (!rootElement) return
+
+    const onContextMenu = (event: MouseEvent) => {
+      const target = event.target
+      if (!(target instanceof HTMLElement)) return
+      setContextTarget(target)
+    }
+
+    rootElement.addEventListener("contextmenu", onContextMenu)
+    return () => {
+      rootElement.removeEventListener("contextmenu", onContextMenu)
+    }
+  }, [editor])
+
+  const getContextAnchorNode = useCallback(() => {
+    if (contextTarget) {
+      const nearestNode = $getNearestNodeFromDOMNode(contextTarget)
+      if (nearestNode) return nearestNode
+    }
+    const selection = $getSelection()
+    if ($isRangeSelection(selection)) {
+      return selection.anchor.getNode()
+    }
+    return null
+  }, [contextTarget])
+
+  const updateNumberListMarkerType = useCallback((markerType: string | undefined) => {
+    editor.update(() => {
+      const anchorNode = getContextAnchorNode()
+      if (!anchorNode) return
+      const nearestListNode = $findMatchingParent(
+        anchorNode,
+        (node): node is ListNode => $isListNode(node) && node.getListType() === "number"
+      )
+      if (!nearestListNode) return
+      let listNode: ListNode = nearestListNode
+      let parent = listNode.getParent()
+      while (parent) {
+        if ($isListNode(parent) && parent.getListType() === "number") {
+          listNode = parent
+          parent = parent.getParent()
+          continue
+        }
+        break
+      }
+      if ($isListWithColorNode(listNode)) {
+        listNode.setMarkerType(markerType)
+        return
+      }
+      const newList = createListWithColorNodeFromRegistry(
+        editor,
+        listNode.getListType(),
+        listNode.getStart()
+      )
+      newList.setMarkerType(markerType)
+      const children = listNode.getChildren()
+      for (const child of children) newList.append(child)
+      listNode.replace(newList)
+    })
+  }, [editor, getContextAnchorNode])
+
+  const syncMarkerToSameLevelLists = useCallback((targetListNode: ListNode, markerType: string | undefined) => {
+    editor.update(() => {
+      // Lấy parent của list hiện tại
+      const parent = targetListNode.getParent()
+      if (!parent) return
+      
+      // Tìm tất cả các list cùng cấp với list hiện tại
+      const siblings = parent.getChildren()
+      
+      for (const sibling of siblings) {
+        if ($isListNode(sibling) && sibling.getListType() === "number" && sibling !== targetListNode) {
+          // Cập nhật marker cho list cùng cấp
+          if ($isListWithColorNode(sibling)) {
+            sibling.setMarkerType(markerType)
+          } else {
+            const newList = $createListWithColorNode("number", sibling.getStart())
+            newList.setMarkerType(markerType)
+            const children = sibling.getChildren()
+            for (const child of children) newList.append(child)
+            sibling.replace(newList)
+          }
+        }
+      }
+    })
+  }, [editor])
+
+  const handleCustomMarkerSubmit = () => {
+    if (customMarker.trim()) {
+      editor.update(() => {
+        const anchorNode = getContextAnchorNode()
+        if (!anchorNode) return
+        const nearestListNode = $findMatchingParent(
+          anchorNode,
+          (node): node is ListNode => $isListNode(node) && node.getListType() === "number"
+        )
+        if (!nearestListNode) return
+        
+        // Cập nhật marker cho list hiện tại
+        updateNumberListMarkerType(customMarker.trim())
+        
+        // Đồng bộ với các list cùng cấp
+        syncMarkerToSameLevelLists(nearestListNode, customMarker.trim())
+      })
+      
+      setShowMarkerDialog(false)
+      setCustomMarker("")
+    }
+  }
+
   const items = useMemo(() => {
     return [
       new NodeContextMenuOption(`Gộp ô`, {
@@ -192,6 +322,41 @@ export function ContextMenuPlugin(): JSX.Element {
       new NodeContextMenuSeparator({
         $showOn: isInList,
       }),
+      new NodeContextMenuOption(`Đánh số 1, 2, 3`, {
+        $onSelect: () => {
+          updateNumberListMarkerType(undefined)
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Đánh số đa cấp 1.1 / 1.1.1`, {
+        $onSelect: () => {
+          updateNumberListMarkerType("multi-level")
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Đánh số a, b, c`, {
+        $onSelect: () => {
+          updateNumberListMarkerType("alpha")
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Tùy chỉnh marker...`, {
+        $onSelect: () => {
+          setShowMarkerDialog(true)
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: <IconSize size="sm"><Hash className="text-blue-600" /></IconSize>,
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: isInNumberList,
+      }),
       new NodeContextMenuOption(`Remove Link`, {
         $onSelect: () => {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
@@ -298,14 +463,79 @@ export function ContextMenuPlugin(): JSX.Element {
         icon: <IconSize size="sm"><Trash2 /></IconSize>,
       }),
     ]
-  }, [editor])
+  }, [editor, updateNumberListMarkerType])
 
   return (
-    <NodeContextMenuPlugin
-      className="editor-context-menu"
-      itemClassName="editor-context-menu-item"
-      separatorClassName="editor-context-menu-separator"
-      items={items}
-    />
+    <>
+      <NodeContextMenuPlugin
+        className="editor-context-menu"
+        itemClassName="editor-context-menu-item"
+        separatorClassName="editor-context-menu-separator"
+        items={items}
+      />
+      <Dialog open={showMarkerDialog} onOpenChange={setShowMarkerDialog}>
+        <DialogContent style={{ maxWidth: '400px' }}>
+          <DialogHeader>
+            <DialogTitle>Tùy chỉnh Marker</DialogTitle>
+            <p className="editor-text-sm editor-text-muted-foreground">Nhập kiểu marker cho danh sách của bạn</p>
+          </DialogHeader>
+          
+          <div className="editor-flex-col editor-py-4 editor-gap-4">
+            <div className="editor-flex-col editor-gap-2">
+              <Label htmlFor="marker-input" className="editor-font-medium">
+                Kiểu marker
+              </Label>
+              <div className="editor-relative editor-flex editor-items-center">
+                <Hash 
+                  className="editor-absolute editor-text-muted-foreground" 
+                  style={{ left: '0.75rem' }} 
+                  size={16} 
+                />
+                <Input
+                  id="marker-input"
+                  value={customMarker}
+                  onChange={(e) => setCustomMarker(e.target.value)}
+                  placeholder="Ví dụ: multi-level, alpha, 4.1, ..."
+                  style={{ paddingLeft: '2.25rem' }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleCustomMarkerSubmit()
+                    }
+                  }}
+                />
+              </div>
+              <div className="editor-flex-col editor-gap-1 editor-text-sm editor-text-muted-foreground editor-mt-2">
+                <p className="editor-flex editor-items-center editor-gap-2" style={{ margin: 0 }}>
+                  <span className="editor-font-medium">multi-level</span> - Hiển thị dạng 4.1, 4.1.1
+                </p>
+                <p className="editor-flex editor-items-center editor-gap-2" style={{ margin: 0 }}>
+                  <span className="editor-font-medium">alpha</span> - Hiển thị dạng a, b, c
+                </p>
+                <p className="editor-flex editor-items-center editor-gap-2" style={{ margin: 0 }}>
+                  <span className="editor-font-medium">Để trống</span> - Về mặc định 1, 2, 3
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => setShowMarkerDialog(false)}
+            >
+              Hủy
+            </Button>
+            <Button 
+              onClick={handleCustomMarkerSubmit}
+              disabled={!customMarker.trim()}
+              className="editor-gap-2"
+            >
+              <ListIcon size={16} />
+              <span>Áp dụng</span>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }

package/src/plugins/floating-text-format-plugin.tsx

@@ -59,10 +59,9 @@ import { DialogFooter } from "../ui/dialog"
 import { Flex } from "../ui/flex"
 import { Separator } from "../ui/separator"
 import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "../ui/toggle-group"
-import { IconSize } from "../ui/typography"
+  IconSize,
+} from "../ui/typography"
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
 
 function FontColorModalContent({
   initialColor,
@@ -390,95 +389,88 @@ function FloatingTextFormat({
       {editor.isEditable() && (
         <Flex align="center" gap={1} className="editor-flex-nowrap">
           <div className="editor-floating-group editor-flex editor-items-center">
-            <ToggleGroup
-              type="multiple"
-              className="editor-flex editor-items-center"
-              value={[
-                isBold ? "bold" : "",
-                isItalic ? "italic" : "",
-                isUnderline ? "underline" : "",
-                isStrikethrough ? "strikethrough" : "",
-                isCode ? "code" : "",
-                isLink ? "link" : "",
-              ].filter(Boolean)}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isBold ? "on" : "off"}
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
+              }}
+              aria-label="Toggle bold"
             >
-              <ToggleGroupItem
-                value="bold"
-                aria-label="Toggle bold"
-                className="editor-toolbar-item"
-                onClick={() => {
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
-                }}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <BoldIcon />
-                </IconSize>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="italic"
-                aria-label="Toggle italic"
-                className="editor-toolbar-item"
-                onClick={() => {
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
-                }}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <ItalicIcon />
-                </IconSize>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="underline"
-                aria-label="Toggle underline"
-                className="editor-toolbar-item"
-                onClick={() => {
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
-                }}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <UnderlineIcon />
-                </IconSize>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="strikethrough"
-                aria-label="Toggle strikethrough"
-                className="editor-toolbar-item"
-                onClick={() => {
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
-                }}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <StrikethroughIcon />
-                </IconSize>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="code"
-                aria-label="Toggle code"
-                className="editor-toolbar-item"
-                onClick={() => {
-                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
-                }}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <CodeIcon />
-                </IconSize>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="link"
-                aria-label="Toggle link"
-                className="editor-toolbar-item"
-                onClick={insertLink}
-                size="sm"
-              >
-                <IconSize size="sm">
-                  <LinkIcon />
-                </IconSize>
-              </ToggleGroupItem>
-            </ToggleGroup>
+              <IconSize size="sm">
+                <BoldIcon />
+              </IconSize>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isItalic ? "on" : "off"}
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+              }}
+              aria-label="Toggle italic"
+            >
+              <IconSize size="sm">
+                <ItalicIcon />
+              </IconSize>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isUnderline ? "on" : "off"}
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
+              }}
+              aria-label="Toggle underline"
+            >
+              <IconSize size="sm">
+                <UnderlineIcon />
+              </IconSize>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isStrikethrough ? "on" : "off"}
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
+              }}
+              aria-label="Toggle strikethrough"
+            >
+              <IconSize size="sm">
+                <StrikethroughIcon />
+              </IconSize>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isCode ? "on" : "off"}
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
+              }}
+              aria-label="Toggle code"
+            >
+              <IconSize size="sm">
+                <CodeIcon />
+              </IconSize>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              data-state={isLink ? "on" : "off"}
+              onClick={insertLink}
+              aria-label="Toggle link"
+            >
+              <IconSize size="sm">
+                <LinkIcon />
+              </IconSize>
+            </Button>
           </div>
 
           <Separator orientation="vertical" className="editor-separator--vertical" />

package/src/plugins/images-plugin.tsx

@@ -220,10 +220,10 @@ function ImagePickerFolderTree({
           {`${folder.images.length} hình${folder.subfolders.length > 0 ? `, ${folder.subfolders.length} thư mục` : ""}`}
         </TypographySpanSmallMuted>
       </CollapsibleTrigger>
-      <CollapsibleContent className="editor-ml-4 editor-mt-1">
+      <CollapsibleContent className="editor-ml-4 editor-mt-1 editor-flex editor-flex-col editor-gap-1">
         {/* Render images in this folder */}
         {folder.images.length > 0 && (
-          <div className="editor-image-grid">
+          <div className="editor-image-grid editor-gap-2">
             {folder.images.map((image) => (
               <button
                 key={image.fileName}
@@ -345,12 +345,12 @@ export function InsertImageUploadsDialogBody({
             <TypographySpanSmallMuted>Chưa có hình ảnh nào được upload</TypographySpanSmallMuted>
           </div>
         ) : (
-          <div className="editor-scroll-area">
+          <div className="editor-scroll-area editor-flex editor-flex-col editor-gap-1">
             {/* Render root level images if any */}
             {folderTree.images.length > 0 && (
               <div className="editor-mb-3">
                 <TypographySpanSmallMuted className="editor-mb-2 editor-px-1">Root</TypographySpanSmallMuted>
-                <div className="editor-image-grid">
+                <div className="editor-image-grid editor-gap-2">
                   {folderTree.images.map((image) => (
                     <button
                       key={image.fileName}