@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/plugins/toolbar/block-format/format-bulleted-list.tsx

@@ -1,40 +1,40 @@
-import { INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
-import { $setBlocksType } from "@lexical/selection"
-import { $createParagraphNode, $getSelection, $isRangeSelection } from "lexical"
-
-import { useToolbarContext } from "../../../context/toolbar-context"
-import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
-import { SelectItem } from "../../../ui/select"
-import { Flex } from "../../../ui/flex"
-
-const BLOCK_FORMAT_VALUE = "bullet"
-
-export function FormatBulletedList() {
-  const { activeEditor, blockType } = useToolbarContext()
-
-  const formatParagraph = () => {
-    activeEditor.update(() => {
-      const selection = $getSelection()
-      if ($isRangeSelection(selection)) {
-        $setBlocksType(selection, () => $createParagraphNode())
-      }
-    })
-  }
-
-  const formatBulletedList = () => {
-    if (blockType !== "bullet") {
-      activeEditor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
-    } else {
-      formatParagraph()
-    }
-  }
-
-  return (
-    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatBulletedList}>
-      <Flex align="center" gap={2}>
-        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
-        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
-      </Flex>
-    </SelectItem>
-  )
-}
+import { INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
+import { $setBlocksType } from "@lexical/selection"
+import { $createParagraphNode, $getSelection, $isRangeSelection } from "lexical"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+
+const BLOCK_FORMAT_VALUE = "bullet"
+
+export function FormatBulletedList() {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatParagraph = () => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  const formatBulletedList = () => {
+    if (blockType !== "bullet") {
+      activeEditor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
+    } else {
+      formatParagraph()
+    }
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatBulletedList}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-format/format-list-with-marker.tsx

@@ -1,74 +1,74 @@
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-} from "@lexical/list"
-import { $setBlocksType } from "@lexical/selection"
-import { $getNearestNodeOfType } from "@lexical/utils"
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-} from "lexical"
-
-import { useToolbarContext } from "../../../context/toolbar-context"
-import { ListWithColorNode } from "../../../nodes/list-with-color-node"
-import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
-import { Flex } from "../../../ui/flex"
-import { SelectItem } from "../../../ui/select"
-
-interface FormatListWithMarkerProps {
-  blockFormatValue: string
-  listType: "bullet" | "number"
-  markerType: string
-}
-
-export function FormatListWithMarker({
-  blockFormatValue,
-  listType,
-  markerType,
-}: FormatListWithMarkerProps) {
-  const { activeEditor, blockType } = useToolbarContext()
-
-  const formatParagraph = () => {
-    activeEditor.update(() => {
-      const selection = $getSelection()
-      if ($isRangeSelection(selection)) {
-        $setBlocksType(selection, () => $createParagraphNode())
-      }
-    })
-  }
-
-  const formatList = () => {
-    if (blockType !== blockFormatValue) {
-      const command =
-        listType === "bullet"
-          ? INSERT_UNORDERED_LIST_COMMAND
-          : INSERT_ORDERED_LIST_COMMAND
-
-      activeEditor.dispatchCommand(command, undefined)
-
-      // Update marker type immediately after
-      activeEditor.update(() => {
-        const selection = $getSelection()
-        if ($isRangeSelection(selection)) {
-          const anchorNode = selection.anchor.getNode()
-          const listNode = $getNearestNodeOfType(anchorNode, ListWithColorNode)
-          if (listNode) {
-            listNode.setMarkerType(markerType)
-          }
-        }
-      })
-    } else {
-      formatParagraph()
-    }
-  }
-
-  return (
-    <SelectItem value={blockFormatValue} onPointerDown={formatList}>
-      <Flex align="center" gap={2}>
-        {blockTypeToBlockName[blockFormatValue]?.icon}
-        {blockTypeToBlockName[blockFormatValue]?.label}
-      </Flex>
-    </SelectItem>
-  )
-}
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+} from "@lexical/list"
+import { $setBlocksType } from "@lexical/selection"
+import { $getNearestNodeOfType } from "@lexical/utils"
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+} from "lexical"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { ListWithColorNode } from "../../../nodes/list-with-color-node"
+import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
+import { Flex } from "../../../ui/flex"
+import { SelectItem } from "../../../ui/select"
+
+interface FormatListWithMarkerProps {
+  blockFormatValue: string
+  listType: "bullet" | "number"
+  markerType: string
+}
+
+export function FormatListWithMarker({
+  blockFormatValue,
+  listType,
+  markerType,
+}: FormatListWithMarkerProps) {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatParagraph = () => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  const formatList = () => {
+    if (blockType !== blockFormatValue) {
+      const command =
+        listType === "bullet"
+          ? INSERT_UNORDERED_LIST_COMMAND
+          : INSERT_ORDERED_LIST_COMMAND
+
+      activeEditor.dispatchCommand(command, undefined)
+
+      // Update marker type immediately after
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          const anchorNode = selection.anchor.getNode()
+          const listNode = $getNearestNodeOfType(anchorNode, ListWithColorNode)
+          if (listNode) {
+            listNode.setMarkerType(markerType)
+          }
+        }
+      })
+    } else {
+      formatParagraph()
+    }
+  }
+
+  return (
+    <SelectItem value={blockFormatValue} onPointerDown={formatList}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[blockFormatValue]?.icon}
+        {blockTypeToBlockName[blockFormatValue]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-format/format-numbered-list.tsx

@@ -1,40 +1,40 @@
-import { INSERT_ORDERED_LIST_COMMAND } from "@lexical/list"
-import { $setBlocksType } from "@lexical/selection"
-import { $createParagraphNode, $getSelection, $isRangeSelection } from "lexical"
-
-import { useToolbarContext } from "../../../context/toolbar-context"
-import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
-import { SelectItem } from "../../../ui/select"
-import { Flex } from "../../../ui/flex"
-
-const BLOCK_FORMAT_VALUE = "number"
-
-export function FormatNumberedList() {
-  const { activeEditor, blockType } = useToolbarContext()
-
-  const formatParagraph = () => {
-    activeEditor.update(() => {
-      const selection = $getSelection()
-      if ($isRangeSelection(selection)) {
-        $setBlocksType(selection, () => $createParagraphNode())
-      }
-    })
-  }
-
-  const formatNumberedList = () => {
-    if (blockType !== "number") {
-      activeEditor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
-    } else {
-      formatParagraph()
-    }
-  }
-
-  return (
-    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatNumberedList}>
-      <Flex align="center" gap={2}>
-        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
-        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
-      </Flex>
-    </SelectItem>
-  )
-}
+import { INSERT_ORDERED_LIST_COMMAND } from "@lexical/list"
+import { $setBlocksType } from "@lexical/selection"
+import { $createParagraphNode, $getSelection, $isRangeSelection } from "lexical"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { blockTypeToBlockName } from "../../../plugins/toolbar/block-format/block-format-data"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+
+const BLOCK_FORMAT_VALUE = "number"
+
+export function FormatNumberedList() {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatParagraph = () => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  const formatNumberedList = () => {
+    if (blockType !== "number") {
+      activeEditor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
+    } else {
+      formatParagraph()
+    }
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatNumberedList}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-format-toolbar-plugin.tsx

@@ -1,117 +1,118 @@
-"use client"
-
-import { $isListNode, ListNode } from "@lexical/list"
-import { $isHeadingNode } from "@lexical/rich-text"
-import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils"
-import {
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  BaseSelection,
-} from "lexical"
-import { useCallback } from "react"
-
-import { useToolbarContext } from "../../context/toolbar-context"
-import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
-import { ListWithColorNode } from "../../nodes/list-with-color-node"
-import { blockTypeToBlockName } from "../../plugins/toolbar/block-format/block-format-data"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectTrigger,
-} from "../../ui/select"
-
-export function BlockFormatDropDown({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const { activeEditor, blockType, setBlockType } = useToolbarContext()
-  const currentBlockType = blockTypeToBlockName[blockType]
-    ? blockType
-    : "paragraph"
-  const currentBlockMeta = blockTypeToBlockName[currentBlockType]
-
-  /**
-   * Updates the toolbar state based on the current selection.
-   * Identifies if the cursor is in a List, Heading, or other block type.
-   */
-  const $updateToolbar = useCallback(
-    (selection: BaseSelection) => {
-      if (!$isRangeSelection(selection)) return
-
-      const anchorNode = selection.anchor.getNode()
-      
-      // Find the top-level element or the nearest parent that is a root/shadow root
-      let element =
-        anchorNode.getKey() === "root"
-          ? anchorNode
-          : $findMatchingParent(anchorNode, (e) => {
-              const parent = e.getParent()
-              return parent !== null && $isRootOrShadowRoot(parent)
-            })
-
-      if (element === null) {
-        element = anchorNode.getTopLevelElementOrThrow()
-      }
-
-      const elementKey = element.getKey()
-      const elementDOM = activeEditor.getElementByKey(elementKey)
-
-      if (elementDOM !== null) {
-        if ($isListNode(element)) {
-          const parentList = $getNearestNodeOfType<ListNode>(
-            anchorNode,
-            ListNode
-          )
-          const listNode = parentList || element
-          let type: string = listNode.getListType()
-
-          if (listNode instanceof ListWithColorNode) {
-            const markerType = listNode.getMarkerType()
-
-            if (type === "bullet") {
-              if (markerType === "-") type = "bullet-dash"
-              else if (markerType === "+") type = "bullet-plus"
-            } else if (type === "number") {
-              if (markerType === "alpha") type = "number-alpha"
-            }
-          }
-          setBlockType(type)
-        } else {
-          const type = $isHeadingNode(element)
-            ? element.getTag()
-            : element.getType()
-          if (type in blockTypeToBlockName) {
-            setBlockType(type as keyof typeof blockTypeToBlockName)
-          }
-        }
-      }
-    },
-    [activeEditor, setBlockType]
-  )
-
-  useUpdateToolbarHandler($updateToolbar)
-
-  return (
-    <Select
-      modal={false}
-      value={currentBlockType}
-      onValueChange={(value) => {
-        if (value in blockTypeToBlockName) {
-          setBlockType(value as keyof typeof blockTypeToBlockName)
-        }
-      }}
-    >
-      <SelectTrigger className="editor-toolbar-select-trigger editor-toolbar-select-trigger--w-md">
-        <div className="editor-toolbar-select-icon">
-          {currentBlockMeta?.icon}
-        </div>
-        <span className="editor-truncate editor-block-format-label">{currentBlockMeta?.label}</span>
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>{children}</SelectGroup>
-      </SelectContent>
-    </Select>
-  )
-}
+"use client"
+
+import { $isListNode, ListNode } from "@lexical/list"
+import { $isHeadingNode } from "@lexical/rich-text"
+import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils"
+import {
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  BaseSelection,
+} from "lexical"
+import { useCallback } from "react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import { ListWithColorNode } from "../../nodes/list-with-color-node"
+import { blockTypeToBlockName } from "../../plugins/toolbar/block-format/block-format-data"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectTrigger,
+} from "../../ui/select"
+
+export function BlockFormatDropDown({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { activeEditor, blockType, setBlockType } = useToolbarContext()
+  const currentBlockType = blockTypeToBlockName[blockType]
+    ? blockType
+    : "paragraph"
+  const currentBlockMeta = blockTypeToBlockName[currentBlockType]
+
+  /**
+   * Updates the toolbar state based on the current selection.
+   * Identifies if the cursor is in a List, Heading, or other block type.
+   */
+  const $updateToolbar = useCallback(
+    (selection: BaseSelection) => {
+      if (!$isRangeSelection(selection)) return
+
+      const anchorNode = selection.anchor.getNode()
+      
+      // Find the top-level element or the nearest parent that is a root/shadow root
+      let element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : $findMatchingParent(anchorNode, (e) => {
+              const parent = e.getParent()
+              return parent !== null && $isRootOrShadowRoot(parent)
+            })
+
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow()
+      }
+
+      const elementKey = element.getKey()
+      const elementDOM = activeEditor.getElementByKey(elementKey)
+
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(
+            anchorNode,
+            ListNode
+          )
+          const listNode = parentList || element
+          let type: string = listNode.getListType()
+
+          if (listNode instanceof ListWithColorNode) {
+            const markerType = listNode.getMarkerType()
+
+            if (type === "bullet") {
+              if (markerType === "-") type = "bullet-dash"
+              else if (markerType === "+") type = "bullet-plus"
+            } else if (type === "number") {
+              if (markerType === "alpha") type = "number-alpha"
+              else if (markerType === "multi-level") type = "number-multi-level"
+            }
+          }
+          setBlockType(type)
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType()
+          if (type in blockTypeToBlockName) {
+            setBlockType(type as keyof typeof blockTypeToBlockName)
+          }
+        }
+      }
+    },
+    [activeEditor, setBlockType]
+  )
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  return (
+    <Select
+      modal={false}
+      value={currentBlockType}
+      onValueChange={(value) => {
+        if (value in blockTypeToBlockName) {
+          setBlockType(value as keyof typeof blockTypeToBlockName)
+        }
+      }}
+    >
+      <SelectTrigger className="editor-toolbar-select-trigger editor-toolbar-select-trigger--w-md">
+        <div className="editor-toolbar-select-icon">
+          {currentBlockMeta?.icon}
+        </div>
+        <span className="editor-truncate editor-block-format-label">{currentBlockMeta?.label}</span>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>{children}</SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}

package/src/plugins/toolbar/element-format-toolbar-plugin.tsx

@@ -28,11 +28,8 @@ import { useToolbarContext } from "../../context/toolbar-context"
 import { $isLayoutItemNode } from "../../nodes/layout-item-node"
 import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
 import { getSelectedNode } from "../../utils/get-selected-node"
+import { Button } from "../../ui/button"
 import { Separator } from "../../ui/separator"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "../../ui/toggle-group"
 import { IconSize } from "../../ui/typography"
 
 const ELEMENT_FORMAT_OPTIONS: {
@@ -192,60 +189,47 @@ export function ElementFormatToolbarPlugin({
 
   return (
     <>
-      <ToggleGroup
-        type="single"
-        value={elementFormat}
-        onValueChange={handleValueChange}
-        size="sm"
-        variant="outline"
-      >
-        {/* Alignment toggles */}
-        {Object.entries(ELEMENT_FORMAT_OPTIONS).map(([value, option]) => (
-          <ToggleGroupItem
-            key={value}
-            value={value}
-            variant={"outline"}
-            size="sm"
-            aria-label={option.name}
-            className="editor-toolbar-item"
-          >
-            {option.icon}
-          </ToggleGroupItem>
-        ))}
-      </ToggleGroup>
+      {/* Alignment toggles */}
+      {Object.entries(ELEMENT_FORMAT_OPTIONS).map(([value, option]) => (
+        <Button
+          key={value}
+          variant="outline"
+          size="sm"
+          aria-label={option.name}
+          data-state={elementFormat === value ? "on" : "off"}
+          onClick={() => handleValueChange(value)}
+          className="editor-toolbar-item"
+        >
+          {option.icon}
+        </Button>
+      ))}
+
       {separator && <Separator orientation="vertical" className="editor-toolbar-separator" />}
+
       {/* Indentation toggles */}
-      <ToggleGroup
-        type="single"
-        value={elementFormat}
-        onValueChange={handleValueChange}
+      <Button
+        variant="outline"
         size="sm"
+        aria-label="Outdent"
+        onClick={() => handleValueChange("outdent")}
+        className="editor-toolbar-item"
+      >
+        <IconSize size="sm">
+          <IndentDecreaseIcon />
+        </IconSize>
+      </Button>
+
+      <Button
         variant="outline"
+        size="sm"
+        aria-label="Indent"
+        onClick={() => handleValueChange("indent")}
+        className="editor-toolbar-item"
       >
-        <ToggleGroupItem
-          value="outdent"
-          aria-label="Outdent"
-          variant={"outline"}
-          size="sm"
-          className="editor-toolbar-item"
-        >
-          <IconSize size="sm">
-            <IndentDecreaseIcon />
-          </IconSize>
-        </ToggleGroupItem>
-
-        <ToggleGroupItem
-          value="indent"
-          variant={"outline"}
-          aria-label="Indent"
-          size="sm"
-          className="editor-toolbar-item"
-        >
-          <IconSize size="sm">
-            <IndentIncreaseIcon />
-          </IconSize>
-        </ToggleGroupItem>
-      </ToggleGroup>
+        <IconSize size="sm">
+          <IndentIncreaseIcon />
+        </IconSize>
+      </Button>
     </>
   )
 }