@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,311 @@
+import type { JSX } from "react"
+import { useMemo } from "react"
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  NodeContextMenuOption,
+  NodeContextMenuPlugin,
+  NodeContextMenuSeparator,
+} 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 { $findMatchingParent } from "@lexical/utils"
+import {
+  $getSelection,
+  $isDecoratorNode,
+  $isNodeSelection,
+  $isRangeSelection,
+  COPY_COMMAND,
+  CUT_COMMAND,
+  PASTE_COMMAND,
+  type LexicalNode,
+} from "lexical"
+import { $isLayoutItemNode } from "../nodes/layout-item-node"
+import { OPEN_UPDATE_LAYOUT_MODAL_COMMAND } from "../plugins/layout-plugin"
+import { OPEN_LIST_COLOR_PICKER_COMMAND } from "../plugins/list-color-plugin"
+import {
+  Clipboard,
+  ClipboardType,
+  Copy,
+  Link2Off,
+  Scissors,
+  Trash2,
+  Combine,
+  SplitSquareVertical,
+  Columns3,
+  Rows3,
+  LayoutGrid,
+  Palette,
+} from "lucide-react"
+import { IconSize } from "../ui/typography"
+
+export function ContextMenuPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext()
+
+  const isInTable = (node: LexicalNode) =>
+    $findMatchingParent(node, $isTableCellNode) !== null
+
+  const isMergedCell = (node: LexicalNode) => {
+    const cell = $findMatchingParent(node, $isTableCellNode)
+    if (!cell || !$isTableCellNode(cell)) return false
+    const c = cell as TableCellNode
+    const colSpan =
+      typeof (c as { getColSpan?: () => number }).getColSpan === "function"
+        ? (c as { getColSpan: () => number }).getColSpan()
+        : (c as { __colSpan?: number }).__colSpan ?? 1
+    const rowSpan =
+      typeof (c as { getRowSpan?: () => number }).getRowSpan === "function"
+        ? (c as { getRowSpan: () => number }).getRowSpan()
+        : (c as { __rowSpan?: number }).__rowSpan ?? 1
+    return colSpan > 1 || rowSpan > 1
+  }
+
+  const isInLayoutItem = (node: LexicalNode) =>
+    $findMatchingParent(node, $isLayoutItemNode) !== null
+
+  const isInList = (node: LexicalNode) =>
+    $findMatchingParent(node, $isListNode) !== null
+
+  const items = useMemo(() => {
+    return [
+      new NodeContextMenuOption(`Gộp ô`, {
+        $onSelect: () => {
+          editor.update(() => {
+            const selection = $getSelection()
+            if (!$isTableSelection(selection)) return
+            const nodes = selection.getNodes()
+            const seen = new Set<string>()
+            const cellNodes: import("@lexical/table").TableCellNode[] = []
+            for (const n of nodes) {
+              const cell = $findMatchingParent(n, $isTableCellNode)
+              if (cell && !seen.has(cell.getKey())) {
+                seen.add(cell.getKey())
+                cellNodes.push(cell)
+              }
+            }
+            if (cellNodes.length >= 2) $mergeCells(cellNodes)
+          })
+        },
+        $showOn: isInTable,
+        disabled: false,
+        icon: <IconSize size="sm"><Combine /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Tách ô`, {
+        $onSelect: () => {
+          editor.update(() => {
+            $unmergeCell()
+          })
+        },
+        $showOn: isMergedCell,
+        disabled: false,
+        icon: <IconSize size="sm"><SplitSquareVertical /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Chèn cột bên phải`, {
+        $onSelect: () => {
+          editor.update(() => {
+            $insertTableColumnAtSelection(true)
+          })
+        },
+        $showOn: isInTable,
+        disabled: false,
+        icon: <IconSize size="sm"><Columns3 /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Chèn cột bên trái`, {
+        $onSelect: () => {
+          editor.update(() => {
+            $insertTableColumnAtSelection(false)
+          })
+        },
+        $showOn: isInTable,
+        disabled: false,
+        icon: <IconSize size="sm"><Columns3 /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Chèn dòng bên dưới`, {
+        $onSelect: () => {
+          editor.update(() => {
+            $insertTableRowAtSelection(true)
+          })
+        },
+        $showOn: isInTable,
+        disabled: false,
+        icon: <IconSize size="sm"><Rows3 /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Chèn dòng bên trên`, {
+        $onSelect: () => {
+          editor.update(() => {
+            $insertTableRowAtSelection(false)
+          })
+        },
+        $showOn: isInTable,
+        disabled: false,
+        icon: <IconSize size="sm"><Rows3 /></IconSize>,
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: isInTable,
+      }),
+      new NodeContextMenuOption(`Cập nhật column layout`, {
+        $onSelect: () => {
+          let layoutItemKey: string | null = null
+          editor.getEditorState().read(() => {
+            const selection = $getSelection()
+            if (!$isRangeSelection(selection)) return
+            const layoutItem = $findMatchingParent(
+              selection.anchor.getNode(),
+              $isLayoutItemNode
+            )
+            if ($isLayoutItemNode(layoutItem)) layoutItemKey = layoutItem.getKey()
+          })
+          if (layoutItemKey)
+            editor.dispatchCommand(OPEN_UPDATE_LAYOUT_MODAL_COMMAND, {
+              layoutItemKey,
+            })
+        },
+        $showOn: isInLayoutItem,
+        disabled: false,
+        icon: <IconSize size="sm"><LayoutGrid /></IconSize>,
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: isInLayoutItem,
+      }),
+      new NodeContextMenuOption(`Đổi màu list`, {
+        $onSelect: () => {
+          let listKey: string | null = null
+          editor.getEditorState().read(() => {
+            const selection = $getSelection()
+            if (!$isRangeSelection(selection)) return
+            const listNode = $findMatchingParent(
+              selection.anchor.getNode(),
+              $isListNode
+            )
+            if ($isListNode(listNode)) listKey = listNode.getKey()
+          })
+          if (listKey)
+            editor.dispatchCommand(OPEN_LIST_COLOR_PICKER_COMMAND, {
+              listKey,
+            })
+        },
+        $showOn: isInList,
+        disabled: false,
+        icon: <IconSize size="sm"><Palette /></IconSize>,
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: isInList,
+      }),
+      new NodeContextMenuOption(`Remove Link`, {
+        $onSelect: () => {
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+        },
+        $showOn: (node: LexicalNode) => $isLinkNode(node.getParent()),
+        disabled: false,
+        icon: <IconSize size="sm"><Link2Off /></IconSize>,
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: (node: LexicalNode) => $isLinkNode(node.getParent()),
+      }),
+      new NodeContextMenuOption(`Cut`, {
+        $onSelect: () => {
+          editor.dispatchCommand(CUT_COMMAND, null)
+        },
+        disabled: false,
+        icon: <IconSize size="sm"><Scissors /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Copy`, {
+        $onSelect: () => {
+          editor.dispatchCommand(COPY_COMMAND, null)
+        },
+        disabled: false,
+        icon: <IconSize size="sm"><Copy /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Paste`, {
+        $onSelect: () => {
+          navigator.clipboard.read().then(async function (...args) {
+            void args
+            const data = new DataTransfer()
+
+            const readClipboardItems = await navigator.clipboard.read()
+            const item = readClipboardItems[0]
+            if (!item) return
+
+            const permission = await navigator.permissions.query({
+              name: "clipboard-read" as PermissionName,
+            })
+            if (permission.state === "denied") {
+              alert("Not allowed to paste from clipboard.")
+              return
+            }
+
+            for (const type of item.types) {
+              const dataString = await (await item.getType(type)).text()
+              data.setData(type, dataString)
+            }
+
+            const event = new ClipboardEvent("paste", {
+              clipboardData: data,
+            })
+
+            editor.dispatchCommand(PASTE_COMMAND, event)
+          })
+        },
+        disabled: false,
+        icon: <IconSize size="sm"><Clipboard /></IconSize>,
+      }),
+      new NodeContextMenuOption(`Paste as Plain Text`, {
+        $onSelect: () => {
+          navigator.clipboard.read().then(async function (...args) {
+            void args
+            const permission = await navigator.permissions.query({
+              name: "clipboard-read" as PermissionName,
+            })
+
+            if (permission.state === "denied") {
+              alert("Not allowed to paste from clipboard.")
+              return
+            }
+
+            const data = new DataTransfer()
+            const clipboardText = await navigator.clipboard.readText()
+            data.setData("text/plain", clipboardText)
+
+            const event = new ClipboardEvent("paste", {
+              clipboardData: data,
+            })
+            editor.dispatchCommand(PASTE_COMMAND, event)
+          })
+        },
+        disabled: false,
+        icon: <IconSize size="sm"><ClipboardType /></IconSize>,
+      }),
+      new NodeContextMenuSeparator(),
+      new NodeContextMenuOption(`Delete Node`, {
+        $onSelect: () => {
+          const selection = $getSelection()
+          if ($isRangeSelection(selection)) {
+            const currentNode = selection.anchor.getNode()
+            const ancestorNodeWithRootAsParent = currentNode.getParents().at(-2)
+
+            ancestorNodeWithRootAsParent?.remove()
+          } else if ($isNodeSelection(selection)) {
+            const selectedNodes = selection.getNodes()
+            selectedNodes.forEach((node) => {
+              if ($isDecoratorNode(node)) {
+                node.remove()
+              }
+            })
+          }
+        },
+        disabled: false,
+        icon: <IconSize size="sm"><Trash2 /></IconSize>,
+      }),
+    ]
+  }, [editor])
+
+  return (
+    <NodeContextMenuPlugin
+      className="editor-context-menu"
+      itemClassName="editor-context-menu-item"
+      separatorClassName="editor-context-menu-separator"
+      items={items}
+    />
+  )
+}

package/src/plugins/drag-drop-paste-plugin.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { DRAG_DROP_PASTE } from "@lexical/rich-text"
+import { isMimeType, mediaFileReader } from "@lexical/utils"
+import { COMMAND_PRIORITY_LOW } from "lexical"
+
+import { INSERT_IMAGE_COMMAND } from "./images-plugin"
+
+const ACCEPTABLE_IMAGE_TYPES = [
+  "image/",
+  "image/heic",
+  "image/heif",
+  "image/gif",
+  "image/webp",
+]
+
+export function DragDropPastePlugin(): null {
+  const [editor] = useLexicalComposerContext()
+  useEffect(() => {
+    return editor.registerCommand(
+      DRAG_DROP_PASTE,
+      (files) => {
+        ;(async () => {
+          const filesResult = await mediaFileReader(
+            files,
+            [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x)
+          )
+          for (const { file, result } of filesResult) {
+            if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                altText: file.name,
+                src: result,
+              })
+            }
+          }
+        })()
+        return true
+      },
+      COMMAND_PRIORITY_LOW
+    )
+  }, [editor])
+  return null
+}

package/src/plugins/draggable-block-plugin.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { JSX, useRef } from "react"
+import { DraggableBlockPlugin_EXPERIMENTAL } from "@lexical/react/LexicalDraggableBlockPlugin"
+import { GripVerticalIcon } from "lucide-react"
+import { IconSize } from "../ui/typography"
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = "editor-draggable-menu"
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`)
+}
+
+export function DraggableBlockPlugin({
+  anchorElem,
+}: {
+  anchorElem: HTMLElement | null
+}): JSX.Element | null {
+  const menuRef = useRef<HTMLDivElement>(null)
+  const targetLineRef = useRef<HTMLDivElement>(null)
+
+  if (!anchorElem) {
+    return null
+  }
+
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef as React.RefObject<HTMLDivElement>}
+      targetLineRef={targetLineRef as React.RefObject<HTMLDivElement>}
+      menuComponent={
+        <div
+          ref={menuRef}
+          className="editor-draggable-menu"
+        >
+          <IconSize size="sm" className="editor-opacity-30">
+            <GripVerticalIcon />
+          </IconSize>
+        </div>
+      }
+      targetLineComponent={
+        <div
+          ref={targetLineRef}
+          className="editor-draggable-line"
+        />
+      }
+      isOnMenu={isOnMenu}
+    />
+  )
+}