@thangph2146/lexical-editor 0.0.1

package/src/plugins/list-color-plugin.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import type { JSX } from "react"
+import * as React from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { mergeRegister } from "@lexical/utils"
+import { COMMAND_PRIORITY_EDITOR, createCommand, $getNodeByKey } from "lexical"
+import type { LexicalCommand, NodeKey } from "lexical"
+import {
+  ColorPicker,
+  ColorPickerArea,
+  ColorPickerContent,
+  ColorPickerHueSlider,
+  ColorPickerInput,
+  ColorPickerPresets,
+} from "../editor-ui/color-picker"
+import { useEditorModal } from "../editor-hooks/use-modal"
+import {
+  $isListWithColorNode,
+} from "../nodes/list-with-color-node"
+import { createListWithColorNodeFromRegistry } from "../editor-x/nodes"
+import { $isListNode, ListNode } from "@lexical/list"
+import { Button } from "../ui/button"
+import { DialogFooter } from "../ui/dialog"
+import { Flex } from "../ui/flex"
+
+export const OPEN_LIST_COLOR_PICKER_COMMAND: LexicalCommand<{
+  listKey: NodeKey
+}> = createCommand<{ listKey: NodeKey }>("OPEN_LIST_COLOR_PICKER_COMMAND")
+
+const listColorStore = new Map<NodeKey, string>()
+
+/** Patch serialized state: thêm listColor vào list nodes theo listColorStore (fallback khi load content cũ). */
+export function patchListColorsInSerializedState(
+  json: Record<string, unknown>
+): void {
+  const root = json.root as Record<string, unknown> | undefined
+  if (!root || typeof root !== "object") return
+  const children = root.children as Array<Record<string, unknown>> | undefined
+  if (!Array.isArray(children)) return
+
+  function walk(nodes: Array<Record<string, unknown>>): void {
+    for (const node of nodes) {
+      const key = node.key as string | undefined
+      const type = node.type as string | undefined
+      if (type === "list" && key && listColorStore.has(key)) {
+        ;(node as Record<string, unknown>).listColor = listColorStore.get(key)
+      }
+      const childList = node.children as Array<Record<string, unknown>> | undefined
+      if (Array.isArray(childList)) walk(childList)
+    }
+  }
+  walk(children)
+}
+
+function getListElement(element: HTMLElement): HTMLElement | null {
+  const tag = element.tagName.toUpperCase()
+  if (tag === "UL" || tag === "OL") return element
+  const list = element.querySelector("ul, ol")
+  return list instanceof HTMLElement ? list : null
+}
+
+function applyListColor(editor: ReturnType<typeof useLexicalComposerContext>[0]) {
+  listColorStore.forEach((color, listKey) => {
+    const element = editor.getElementByKey(listKey)
+    if (!(element instanceof HTMLElement)) return
+    const listEl = getListElement(element)
+    if (!listEl) return
+    listEl.style.setProperty("--list-marker-color", color, "important")
+    listEl.setAttribute("data-list-color", color)
+  })
+}
+
+export function ListColorPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+  const [modal, showModal] = useEditorModal()
+
+  React.useEffect(() => {
+    const applyColor = (color: string, listKey: NodeKey) => {
+      listColorStore.set(listKey, color)
+      editor.update(() => {
+        const node = $getNodeByKey(listKey)
+        if ($isListWithColorNode(node)) {
+          node.setListColor(color)
+          return
+        }
+        if ($isListNode(node)) {
+          const listType = node.getListType()
+          const start = node.getStart()
+          const newList = createListWithColorNodeFromRegistry(editor, listType, start)
+          newList.setListColor(color)
+          const children = node.getChildren()
+          for (const c of children) newList.append(c)
+          node.replace(newList)
+        }
+      })
+      applyListColor(editor)
+    }
+
+    return mergeRegister(
+      editor.registerNodeTransform(ListNode, (node) => {
+        if ($isListWithColorNode(node)) return
+        const listType = node.getListType()
+        const start = node.getStart()
+        const newList = createListWithColorNodeFromRegistry(editor, listType, start)
+        const children = node.getChildren()
+        for (const c of children) newList.append(c)
+        node.replace(newList)
+      }),
+      editor.registerUpdateListener(() => {
+        applyListColor(editor)
+      }),
+      editor.registerCommand(
+        OPEN_LIST_COLOR_PICKER_COMMAND,
+        ({ listKey }) => {
+          const element = editor.getElementByKey(listKey)
+          if (!(element instanceof HTMLElement)) return true
+          const listEl = getListElement(element)
+          if (!listEl) return true
+
+          const fromStore = listColorStore.get(listKey)
+          const fromVar = listEl.style.getPropertyValue("--list-marker-color")
+          const fromAttr = listEl.getAttribute("data-list-color")
+          const initialColor =
+            fromStore || fromVar || fromAttr || "#000000"
+
+          function ListColorModalContent({ onClose }: { onClose: () => void }) {
+            const [color, setColor] = React.useState(initialColor)
+            return (
+              <div className="editor-list-color-dialog">
+                <Flex direction="column" gap={4}>
+                  <div className="editor-text-xs-muted">
+                    Chọn màu cho bullet hoặc số thứ tự của list.
+                  </div>
+                  
+                  <ColorPicker
+                    inline
+                    value={color}
+                    onValueChange={(next) => {
+                      setColor(next)
+                      applyColor(next, listKey)
+                      applyListColor(editor)
+                    }}
+                  >
+                    <ColorPickerContent className="editor-w-full editor-border-0 editor-shadow-none editor-p-0">
+                      <ColorPickerArea className="editor-h-40 editor-w-full editor-rounded-md" />
+                      <Flex direction="column" gap={3} className="editor-mt-3">
+                        <Flex direction="column" gap={2}>
+                           <ColorPickerHueSlider className="editor-w-full" />
+                           <ColorPickerInput className="editor-w-full" />
+                        </Flex>
+                        <ColorPickerPresets />
+                      </Flex>
+                    </ColorPickerContent>
+                  </ColorPicker>
+
+                  <DialogFooter className="editor-px-0">
+                    <Button variant="outline" size="sm" onClick={onClose} className="editor-w-full">
+                      Hoàn tất
+                    </Button>
+                  </DialogFooter>
+                </Flex>
+              </div>
+            )
+          }
+
+          showModal("Đổi màu list", (onClose) => (
+            <ListColorModalContent onClose={onClose} />
+          ))
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    )
+  }, [editor, showModal])
+
+  return <>{modal}</>
+}

package/src/plugins/list-max-indent-level-plugin.tsx

@@ -0,0 +1,85 @@
+"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 { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import type { ElementNode, RangeSelection } from "lexical"
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  INDENT_CONTENT_COMMAND,
+} from "lexical"
+
+function getElementNodesInSelection(
+  selection: RangeSelection
+): Set<ElementNode> {
+  const nodesInSelection = selection.getNodes()
+
+  if (nodesInSelection.length === 0) {
+    return new Set([
+      selection.anchor.getNode().getParentOrThrow(),
+      selection.focus.getNode().getParentOrThrow(),
+    ])
+  }
+
+  return new Set(
+    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow()))
+  )
+}
+
+function $shouldPreventIndent(maxDepth: number): boolean {
+  const selection = $getSelection()
+
+  if (!$isRangeSelection(selection)) {
+    return false
+  }
+
+  const elementNodesInSelection: Set<ElementNode> =
+    getElementNodesInSelection(selection)
+
+  let totalDepth = 0
+
+  for (const elementNode of Array.from(elementNodesInSelection)) {
+    if ($isListNode(elementNode)) {
+      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth)
+    } else if ($isListItemNode(elementNode)) {
+      const parent = elementNode.getParent()
+
+      if (!$isListNode(parent)) {
+        throw new Error(
+          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
+        )
+      }
+
+      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth)
+    }
+  }
+
+  return totalDepth > maxDepth
+}
+
+export function ListMaxIndentLevelPlugin({
+  maxDepth = 7,
+}: {
+  maxDepth?: number
+}): null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return editor.registerCommand(
+      INDENT_CONTENT_COMMAND,
+      () => $shouldPreventIndent(maxDepth),
+      COMMAND_PRIORITY_CRITICAL
+    )
+  }, [editor, maxDepth])
+  return null
+}