@thangph2146/lexical-editor 0.0.1

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

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

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

@@ -0,0 +1,40 @@
+import { INSERT_CHECK_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 = "check"
+
+export function FormatCheckList() {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatParagraph = () => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  const formatCheckList = () => {
+    if (blockType !== "check") {
+      activeEditor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)
+    } else {
+      formatParagraph()
+    }
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatCheckList}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { $createCodeNode } from "@lexical/code"
+import { $setBlocksType } from "@lexical/selection"
+import { $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 = "code"
+
+export function FormatCodeBlock() {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatCode = () => {
+    if (blockType !== "code") {
+      activeEditor.update(() => {
+        let selection = $getSelection()
+
+        if (selection !== null) {
+          if (selection.isCollapsed()) {
+            $setBlocksType(selection, () => $createCodeNode())
+          } else {
+            const textContent = selection.getTextContent()
+            const codeNode = $createCodeNode()
+            selection.insertNodes([codeNode])
+            selection = $getSelection()
+            if ($isRangeSelection(selection)) {
+              selection.insertRawText(textContent)
+            }
+          }
+        }
+      })
+    }
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatCode}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { $createHeadingNode, HeadingTagType } from "@lexical/rich-text"
+import { $setBlocksType } from "@lexical/selection"
+import { $getSelection } 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"
+
+export function FormatHeading({ levels = [] }: { levels: HeadingTagType[] }) {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatHeading = (headingSize: HeadingTagType) => {
+    if (blockType !== headingSize) {
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        $setBlocksType(selection, () => $createHeadingNode(headingSize))
+      })
+    }
+  }
+
+  return levels.map((level) => (
+    <SelectItem
+      key={level}
+      value={level}
+      onPointerDown={() => formatHeading(level)}
+    >
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[level]?.icon}
+        {blockTypeToBlockName[level]?.label}
+      </Flex>
+    </SelectItem>
+  ))
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+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 = "paragraph"
+
+export function FormatParagraph() {
+  const { activeEditor } = useToolbarContext()
+
+  const formatParagraph = () => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatParagraph}>
+      <Flex align="center" gap={2}>
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.icon}
+        {blockTypeToBlockName[BLOCK_FORMAT_VALUE]?.label}
+      </Flex>
+    </SelectItem>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { $createQuoteNode } from "@lexical/rich-text"
+import { $setBlocksType } from "@lexical/selection"
+import { $getSelection } 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 = "quote"
+
+export function FormatQuote() {
+  const { activeEditor, blockType } = useToolbarContext()
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        $setBlocksType(selection, () => $createQuoteNode())
+      })
+    }
+  }
+
+  return (
+    <SelectItem value={BLOCK_FORMAT_VALUE} onPointerDown={formatQuote}>
+      <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

@@ -0,0 +1,117 @@
+"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>
+  )
+}

package/src/plugins/toolbar/block-insert/insert-columns-layout.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Columns3Icon } from "lucide-react"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { InsertLayoutDialog } from "../../../plugins/layout-plugin"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+import { IconSize } from "../../../ui/typography"
+
+export function InsertColumnsLayout() {
+  const { activeEditor, showModal } = useToolbarContext()
+
+  return (
+    <SelectItem
+      value="columns"
+      onPointerUp={() =>
+        showModal("Insert Columns Layout", (onClose) => (
+          <InsertLayoutDialog activeEditor={activeEditor} onClose={onClose} />
+        ))
+      }
+      className=""
+    >
+      <Flex align="center" gap={2}>
+        <IconSize size="sm">
+          <Columns3Icon />
+        </IconSize>
+        <span>Columns Layout</span>
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-insert/insert-embeds.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { AutoEmbedDialogStandalone, EmbedConfigs } from "../../../plugins/embeds/auto-embed-plugin"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+
+export function InsertEmbeds() {
+  const { activeEditor, showModal } = useToolbarContext()
+  return EmbedConfigs.map((embedConfig) => (
+    <SelectItem
+      key={embedConfig.type}
+      value={embedConfig.type}
+      onPointerUp={() => {
+        showModal(`Embed ${embedConfig.contentName}`, (onClose) => (
+          <AutoEmbedDialogStandalone 
+            embedConfig={embedConfig} 
+            onClose={onClose} 
+            editor={activeEditor}
+          />
+        ))
+      }}
+      className=""
+    >
+      <Flex align="center" gap={2}>
+        {embedConfig.icon}
+        <span>{embedConfig.contentName}</span>
+      </Flex>
+    </SelectItem>
+  ))
+}

package/src/plugins/toolbar/block-insert/insert-horizontal-rule.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode"
+import { ScissorsIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+import { IconSize } from "../../../ui/typography"
+
+export function InsertHorizontalRule() {
+  const { activeEditor } = useToolbarContext()
+
+  return (
+    <SelectItem
+      value="horizontal-rule"
+      onPointerUp={() =>
+        activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+      }
+      className=""
+    >
+      <Flex align="center" gap={2}>
+        <IconSize size="sm">
+          <ScissorsIcon />
+        </IconSize>
+        <span>Horizontal Rule</span>
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-insert/insert-image.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { ImageIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { InsertImageDialog } from "../../../plugins/images-plugin"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+import { IconSize } from "../../../ui/typography"
+
+export function InsertImage() {
+  const { activeEditor, showModal } = useToolbarContext()
+
+  return (
+    <SelectItem
+      value="image"
+      onPointerUp={() => {
+        showModal("Insert Image", (onClose) => (
+          <InsertImageDialog activeEditor={activeEditor} onClose={onClose} />
+        ))
+      }}
+      className=""
+    >
+      <Flex align="center" gap={2}>
+        <IconSize size="sm">
+          <ImageIcon />
+        </IconSize>
+        <span>Image</span>
+      </Flex>
+    </SelectItem>
+  )
+}

package/src/plugins/toolbar/block-insert/insert-table.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { TableIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../../context/toolbar-context"
+import { InsertTableDialog } from "../../../plugins/table-plugin"
+import { SelectItem } from "../../../ui/select"
+import { Flex } from "../../../ui/flex"
+import { IconSize } from "../../../ui/typography"
+
+export function InsertTable() {
+  const { activeEditor, showModal } = useToolbarContext()
+
+  return (
+    <SelectItem
+      value="table"
+      onPointerUp={() =>
+        showModal("Insert Table", (onClose) => (
+          <InsertTableDialog activeEditor={activeEditor} onClose={onClose} />
+        ))
+      }
+      className=""
+    >
+      <Flex align="center" gap={2}>
+        <IconSize size="sm">
+          <TableIcon />
+        </IconSize>
+        <span>Table</span>
+      </Flex>
+    </SelectItem>
+  )
+}

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

@@ -0,0 +1,30 @@
+"use client"
+
+import { PlusIcon } from "lucide-react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectTrigger,
+} from "../../ui/select"
+import { IconSize } from "../../ui/typography"
+
+export function BlockInsertPlugin({ children }: { children: React.ReactNode }) {
+  return (
+    <Select
+      modal={false}
+      value={""}
+    >
+      <SelectTrigger className="editor-toolbar-item editor-toolbar-item--w-auto editor-toolbar-item--gap-sm">
+        <IconSize size="sm">
+          <PlusIcon />
+        </IconSize>
+        <span>Insert</span>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>{children}</SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}