@thangph2146/lexical-editor 0.0.1

package/src/nodes/list-with-color-node.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import type { DOMExportOutput, EditorConfig, LexicalEditor } from "lexical"
+import {
+  ListNode,
+  type ListType,
+  type SerializedListNode,
+} from "@lexical/list"
+import type { LexicalNode, LexicalUpdateJSON, NodeKey } from "lexical"
+import { $applyNodeReplacement } from "lexical"
+
+export type SerializedListWithColorNode = Omit<SerializedListNode, "type"> & {
+  type: "listwithcolor"
+  listColor?: string
+  markerType?: string
+}
+
+const LIST_WITH_COLOR_TYPE = "listwithcolor"
+
+function applyListAttributesToDom(dom: HTMLElement, color?: string, markerType?: string): void {
+  if (color) {
+    dom.style.setProperty("--list-marker-color", color, "important")
+    dom.setAttribute("data-list-color", color)
+  } else {
+    dom.style.removeProperty("--list-marker-color")
+    dom.removeAttribute("data-list-color")
+  }
+  if (markerType) {
+    dom.setAttribute("data-list-marker", markerType)
+  } else {
+    dom.removeAttribute("data-list-marker")
+  }
+}
+
+export class ListWithColorNode extends ListNode {
+  __listColor?: string
+  __markerType?: string
+
+  constructor(listType?: ListType, start?: number, key?: NodeKey) {
+    super(listType, start, key)
+  }
+
+  static getType(): "listwithcolor" {
+    return LIST_WITH_COLOR_TYPE
+  }
+
+  override getType(): "listwithcolor" {
+    return LIST_WITH_COLOR_TYPE
+  }
+
+  static override clone(node: ListWithColorNode, key?: NodeKey): ListWithColorNode {
+    const listType = node.getListType()
+    const start = node.getStart()
+    const sameKey = key ?? node.getKey()
+    const cloned = new ListWithColorNode(listType, start, sameKey)
+    if (node.__listColor) cloned.__listColor = node.__listColor
+    if (node.__markerType) cloned.__markerType = node.__markerType
+    return cloned
+  }
+
+  static override importJSON(
+    serializedNode: SerializedListWithColorNode
+  ): ListWithColorNode {
+    const { listType, start, listColor, markerType } = serializedNode
+    const node = new ListWithColorNode(listType, start)
+    if (listColor != null) node.__listColor = listColor
+    if (markerType != null) node.__markerType = markerType
+    return node
+  }
+
+  override afterCloneFrom(prevNode: ListWithColorNode): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Lexical ListNode.afterCloneFrom(prevNode: this) không chấp nhận subtype
+    super.afterCloneFrom(prevNode as any)
+    this.__listColor = prevNode.__listColor
+    this.__markerType = prevNode.__markerType
+  }
+
+  getListColor(): string | undefined {
+    return this.getLatest().__listColor
+  }
+
+  setListColor(color: string | undefined): this {
+    const writable = this.getWritable()
+    writable.__listColor = color
+    return this
+  }
+
+  getMarkerType(): string | undefined {
+    return this.getLatest().__markerType
+  }
+
+  setMarkerType(markerType: string | undefined): this {
+    const writable = this.getWritable()
+    writable.__markerType = markerType
+    return this
+  }
+
+  override createDOM(config: EditorConfig, _editor?: LexicalEditor): HTMLElement {
+    const dom = super.createDOM(config, _editor)
+    applyListAttributesToDom(dom, this.__listColor, this.__markerType)
+    return dom
+  }
+
+  override updateDOM(
+    prevNode: ListWithColorNode,
+    dom: HTMLElement,
+    config: EditorConfig
+  ): boolean {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Lexical ListNode.updateDOM(prevNode: this)
+    const isUpdated = super.updateDOM(prevNode as any, dom, config)
+    if (
+      prevNode.__listColor !== this.__listColor ||
+      prevNode.__markerType !== this.__markerType
+    ) {
+      applyListAttributesToDom(dom, this.__listColor, this.__markerType)
+    }
+    return isUpdated
+  }
+
+  override updateFromJSON(
+    serializedNode: LexicalUpdateJSON<SerializedListWithColorNode>
+  ): this {
+    super.updateFromJSON(serializedNode)
+    const { listColor, markerType } = serializedNode as SerializedListWithColorNode
+    if (listColor !== undefined) this.setListColor(listColor)
+    if (markerType !== undefined) this.setMarkerType(markerType)
+    return this
+  }
+
+  override exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const output = super.exportDOM(editor)
+    if (output.element && output.element instanceof HTMLElement) {
+      applyListAttributesToDom(output.element, this.__listColor, this.__markerType)
+    }
+    return output
+  }
+
+  override exportJSON(): SerializedListWithColorNode {
+    const json = super.exportJSON() as SerializedListWithColorNode
+    json.type = LIST_WITH_COLOR_TYPE
+    if (this.__listColor) json.listColor = this.__listColor
+    if (this.__markerType) json.markerType = this.__markerType
+    return json
+  }
+}
+
+export function $createListWithColorNode(
+  listType?: ListType,
+  start?: number
+): ListWithColorNode {
+  return $applyNodeReplacement(
+    new ListWithColorNode(listType, start)
+  ) as ListWithColorNode
+}
+
+export function $isListWithColorNode(
+  node: LexicalNode | null | undefined
+): node is ListWithColorNode {
+  return node instanceof ListWithColorNode
+}

package/src/nodes/mention-node.ts

@@ -0,0 +1,122 @@
+import {
+  $applyNodeReplacement,
+  TextNode,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  type Spread,
+} from "lexical"
+
+export type SerializedMentionNode = Spread<
+  {
+    mentionName: string
+  },
+  SerializedTextNode
+>
+
+function $convertMentionElement(
+  domNode: HTMLElement
+): DOMConversionOutput | null {
+  const textContent = domNode.textContent
+
+  if (textContent !== null) {
+    const node = $createMentionNode(textContent)
+    return {
+      node,
+    }
+  }
+
+  return null
+}
+
+const mentionStyle = "background-color: rgba(24, 119, 232, 0.2)"
+export class MentionNode extends TextNode {
+  __mention: string
+
+  static getType(): string {
+    return "mention"
+  }
+
+  static clone(node: MentionNode): MentionNode {
+    return new MentionNode(node.__mention, node.__text, node.__key)
+  }
+  static importJSON(serializedNode: SerializedMentionNode): MentionNode {
+    const node = $createMentionNode(serializedNode.mentionName)
+    node.setTextContent(serializedNode.text)
+    node.setFormat(serializedNode.format)
+    node.setDetail(serializedNode.detail)
+    node.setMode(serializedNode.mode)
+    node.setStyle(serializedNode.style)
+    return node
+  }
+
+  constructor(mentionName: string, text?: string, key?: NodeKey) {
+    super(text ?? mentionName, key)
+    this.__mention = mentionName
+  }
+
+  exportJSON(): SerializedMentionNode {
+    return {
+      ...super.exportJSON(),
+      mentionName: this.__mention,
+      type: "mention",
+      version: 1,
+    }
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config)
+    dom.style.cssText = mentionStyle
+    dom.className = "mention"
+    return dom
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("span")
+    element.setAttribute("data-lexical-mention", "true")
+    element.textContent = this.__text
+    return { element }
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute("data-lexical-mention")) {
+          return null
+        }
+        return {
+          conversion: $convertMentionElement,
+          priority: 1,
+        }
+      },
+    }
+  }
+
+  isTextEntity(): true {
+    return true
+  }
+
+  canInsertTextBefore(): boolean {
+    return false
+  }
+
+  canInsertTextAfter(): boolean {
+    return false
+  }
+}
+
+export function $createMentionNode(mentionName: string): MentionNode {
+  const mentionNode = new MentionNode(mentionName)
+  mentionNode.setMode("segmented").toggleDirectionless()
+  return $applyNodeReplacement(mentionNode)
+}
+
+export function $isMentionNode(
+  node: LexicalNode | null | undefined
+): node is MentionNode {
+  return node instanceof MentionNode
+}

package/src/plugins/actions/actions-plugin.tsx

@@ -0,0 +1,3 @@
+export function ActionsPlugin({ children }: { children: React.ReactNode }) {
+  return children
+}

package/src/plugins/actions/character-limit-plugin.tsx

@@ -0,0 +1,27 @@
+import { CharacterLimitPlugin as LexicalCharacterLimitPlugin } from "@lexical/react/LexicalCharacterLimitPlugin"
+import { TypographySpanSmallMuted } from "../../ui/typography"
+import { cn } from "../../lib/utils"
+
+export function CharacterLimitPlugin({
+  maxLength,
+  charset,
+}: {
+  maxLength: number
+  charset: "UTF-8" | "UTF-16"
+}) {
+  return (
+    <LexicalCharacterLimitPlugin
+      maxLength={maxLength}
+      charset={charset}
+      renderer={(number) => (
+        <TypographySpanSmallMuted
+          className={cn(
+            number.remainingCharacters <= 0 ? "text-destructive" : ""
+          )}
+        >
+          {number.remainingCharacters}
+        </TypographySpanSmallMuted>
+      )}
+    />
+  )
+}

package/src/plugins/actions/clear-editor-plugin.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { CLEAR_EDITOR_COMMAND } from "lexical"
+import { Trash2Icon } from "lucide-react"
+
+import { Button } from "../../ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../ui/dialog"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { IconSize } from "../../ui/typography"
+
+export function ClearEditorActionPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  return (
+    <Dialog>
+      <Tooltip disableHoverableContent>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button size={"sm"} variant={"ghost"} className="editor-p-2">
+              <IconSize size="sm">
+                <Trash2Icon />
+              </IconSize>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Clear Editor</TooltipContent>
+      </Tooltip>
+
+      <DialogContent disableOutsideClick={true}>
+        <DialogHeader>
+          <DialogTitle>Clear Editor</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to clear the editor?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+
+          <DialogClose asChild>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined)
+                editor.focus()
+              }}
+            >
+              Clear
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/plugins/actions/counter-character-plugin.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { $rootTextContent } from "@lexical/text"
+import { TypographySpanSmallMuted } from "../../ui/typography"
+import { Separator } from "../../ui/separator"
+import { Flex } from "../../ui/flex"
+
+let textEncoderInstance: null | TextEncoder = null
+
+function textEncoder(): null | TextEncoder {
+  if (window.TextEncoder === undefined) {
+    return null
+  }
+
+  if (textEncoderInstance === null) {
+    textEncoderInstance = new window.TextEncoder()
+  }
+
+  return textEncoderInstance
+}
+
+function utf8Length(text: string) {
+  const currentTextEncoder = textEncoder()
+
+  if (currentTextEncoder === null) {
+    // http://stackoverflow.com/a/5515960/210370
+    const m = encodeURIComponent(text).match(/%[89ABab]/g)
+    return text.length + (m ? m.length : 0)
+  }
+
+  return currentTextEncoder.encode(text).length
+}
+
+interface CounterCharacterPluginProps {
+  charset?: "UTF-8" | "UTF-16"
+}
+
+const strlen = (text: string, charset: "UTF-8" | "UTF-16") => {
+  if (charset === "UTF-8") {
+    return utf8Length(text)
+  } else if (charset === "UTF-16") {
+    return text.length
+  }
+}
+
+const countWords = (text: string) => {
+  return text.split(/\s+/).filter((word) => word.length > 0).length
+}
+
+export function CounterCharacterPlugin({
+  charset = "UTF-16",
+}: CounterCharacterPluginProps) {
+  const [editor] = useLexicalComposerContext()
+  const [stats, setStats] = useState(() => {
+    const initialText = editor.getEditorState().read($rootTextContent)
+    return {
+      characters: strlen(initialText, charset),
+      words: countWords(initialText),
+    }
+  })
+
+  useEffect(() => {
+    return editor.registerTextContentListener((currentText: string) => {
+      setStats({
+        characters: strlen(currentText, charset),
+        words: countWords(currentText),
+      })
+    })
+  }, [editor, charset])
+
+  return (
+    <Flex gap={2} className="editor-whitespace-nowrap">
+      <TypographySpanSmallMuted>{stats.characters} characters</TypographySpanSmallMuted>
+      <Separator orientation="vertical" className="editor-h-4" />
+      <TypographySpanSmallMuted>{stats.words} words</TypographySpanSmallMuted>
+    </Flex>
+  )
+}

package/src/plugins/actions/edit-mode-toggle-plugin.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useState } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { LockIcon, UnlockIcon } from "lucide-react"
+
+import { Button } from "../../ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { IconSize } from "../../ui/typography"
+
+export function EditModeTogglePlugin() {
+  const [editor] = useLexicalComposerContext()
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable())
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant={"ghost"}
+          onClick={() => {
+            editor.setEditable(!editor.isEditable())
+            setIsEditable(editor.isEditable())
+          }}
+          title="Read-Only Mode"
+          aria-label={`${!isEditable ? "Unlock" : "Lock"} read-only mode`}
+          size={"sm"}
+          className="editor-p-2"
+        >
+          {isEditable ? (
+            <IconSize size="sm">
+              <LockIcon />
+            </IconSize>
+          ) : (
+            <IconSize size="sm">
+              <UnlockIcon />
+            </IconSize>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {isEditable ? "View Only Mode" : "Edit Mode"}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/plugins/actions/import-export-plugin.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { exportFile, importFile } from "@lexical/file"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { DownloadIcon, UploadIcon } from "lucide-react"
+
+import { Button } from "../../ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { IconSize } from "../../ui/typography"
+
+export function ImportExportPlugin() {
+  const [editor] = useLexicalComposerContext()
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={"ghost"}
+            onClick={() => importFile(editor)}
+            title="Import"
+            aria-label="Import editor state from JSON"
+            size={"sm"}
+            className="editor-p-2"
+          >
+            <IconSize size="sm">
+              <UploadIcon />
+            </IconSize>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Import Content</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={"ghost"}
+            onClick={() =>
+              exportFile(editor, {
+                fileName: `Playground ${new Date().toISOString()}`,
+                source: "Playground",
+              })
+            }
+            title="Export"
+            aria-label="Export editor state to JSON"
+            size={"sm"}
+            className="editor-p-2"
+          >
+            <IconSize size="sm">
+              <DownloadIcon />
+            </IconSize>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Export Content</TooltipContent>
+      </Tooltip>
+    </>
+  )
+}

package/src/plugins/actions/markdown-toggle-plugin.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useCallback } from "react"
+import { $createCodeNode, $isCodeNode } from "@lexical/code"
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  Transformer,
+} from "@lexical/markdown"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { $createTextNode, $getRoot } from "lexical"
+import { FileTextIcon } from "lucide-react"
+
+import { Button } from "../../ui/button"
+import { IconSize } from "../../ui/typography"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+
+export function MarkdownTogglePlugin({
+  shouldPreserveNewLinesInMarkdown,
+  transformers,
+}: {
+  shouldPreserveNewLinesInMarkdown: boolean
+  transformers: Array<Transformer>
+}) {
+  const [editor] = useLexicalComposerContext()
+
+  const handleMarkdownToggle = useCallback(() => {
+    editor.update(() => {
+      const root = $getRoot()
+      const firstChild = root.getFirstChild()
+      if ($isCodeNode(firstChild) && firstChild.getLanguage() === "markdown") {
+        $convertFromMarkdownString(
+          firstChild.getTextContent(),
+          transformers,
+          undefined, // node
+          shouldPreserveNewLinesInMarkdown
+        )
+      } else {
+        const markdown = $convertToMarkdownString(
+          transformers,
+          undefined, //node
+          shouldPreserveNewLinesInMarkdown
+        )
+        const codeNode = $createCodeNode("markdown")
+        codeNode.append($createTextNode(markdown))
+        root.clear().append(codeNode)
+        if (markdown.length === 0) {
+          codeNode.select()
+        }
+      }
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, shouldPreserveNewLinesInMarkdown])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant={"ghost"}
+          onClick={handleMarkdownToggle}
+          title="Convert From Markdown"
+          aria-label="Convert from markdown"
+          size={"sm"}
+          className="editor-p-2"
+        >
+          <IconSize size="sm">
+            <FileTextIcon />
+          </IconSize>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Markdown Mode</TooltipContent>
+    </Tooltip>
+  )
+}