@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,59 @@
+"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 { $trimTextContentFromAnchor } from "@lexical/selection"
+import { $restoreEditorState } from "@lexical/utils"
+import {
+  $getSelection,
+  $isRangeSelection,
+  EditorState,
+  RootNode,
+} from "lexical"
+
+export function MaxLengthPlugin({ maxLength }: { maxLength: number }): null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    let lastRestoredEditorState: EditorState | null = null
+
+    return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => {
+      const selection = $getSelection()
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return
+      }
+      const prevEditorState = editor.getEditorState()
+      const prevTextContentSize = prevEditorState.read(() =>
+        rootNode.getTextContentSize()
+      )
+      const textContentSize = rootNode.getTextContentSize()
+      if (prevTextContentSize !== textContentSize) {
+        const delCount = textContentSize - maxLength
+        const anchor = selection.anchor
+
+        if (delCount > 0) {
+          // Restore the old editor state instead if the last
+          // text content was already at the limit.
+          if (
+            prevTextContentSize === maxLength &&
+            lastRestoredEditorState !== prevEditorState
+          ) {
+            lastRestoredEditorState = prevEditorState
+            $restoreEditorState(editor, prevEditorState)
+          } else {
+            $trimTextContentFromAnchor(editor, anchor, delCount)
+          }
+        }
+      }
+    })
+  }, [editor, maxLength])
+
+  return null
+}

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

@@ -0,0 +1,72 @@
+"use client"
+
+import { useEffect } from "react"
+import {
+  editorStateFromSerializedDocument,
+  SerializedDocument,
+  serializedDocumentFromEditorState,
+} from "@lexical/file"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { CLEAR_HISTORY_COMMAND } from "lexical"
+import { SendIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import {
+  docFromHash,
+  docToHash,
+} from "../../utils/doc-serialization"
+import { Button } from "../../ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { IconSize } from "../../ui/typography"
+
+export function ShareContentPlugin() {
+  const [editor] = useLexicalComposerContext()
+  async function shareDoc(doc: SerializedDocument): Promise<void> {
+    const url = new URL(window.location.toString())
+    url.hash = await docToHash(doc)
+    const newUrl = url.toString()
+    window.history.replaceState({}, "", newUrl)
+    await window.navigator.clipboard.writeText(newUrl)
+  }
+  useEffect(() => {
+    docFromHash(window.location.hash).then((doc) => {
+      if (doc && doc.source === "editor") {
+        editor.setEditorState(editorStateFromSerializedDocument(editor, doc))
+        editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined)
+      }
+    })
+  }, [editor])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant={"ghost"}
+          onClick={() =>
+            shareDoc(
+              serializedDocumentFromEditorState(editor.getEditorState(), {
+                source: "editor",
+              })
+            ).then(
+              () => toast.success("URL copied to clipboard"),
+              () => toast.error("URL could not be copied to clipboard")
+            )
+          }
+          title="Share"
+          aria-label="Share Playground link to current editor state"
+          size={"sm"}
+          className="editor-p-2"
+        >
+          <IconSize size="sm">
+            <SendIcon />
+          </IconSize>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Share Content</TooltipContent>
+    </Tooltip>
+  )
+}

package/src/plugins/actions/speech-to-text-plugin.tsx

@@ -0,0 +1,159 @@
+"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, useRef, useState } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import type { LexicalCommand, LexicalEditor, RangeSelection } from "lexical"
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+} from "lexical"
+import { MicIcon } from "lucide-react"
+
+import { useReport } from "../../editor-hooks/use-report"
+import { CAN_USE_DOM } from "../../shared/can-use-dom"
+import { Button } from "../../ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { IconSize } from "../../ui/typography"
+
+export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand(
+  "SPEECH_TO_TEXT_COMMAND"
+)
+
+const VOICE_COMMANDS: Readonly<
+  Record<
+    string,
+    (arg0: { editor: LexicalEditor; selection: RangeSelection }) => void
+  >
+> = {
+  "\n": ({ selection }) => {
+    selection.insertParagraph()
+  },
+  redo: ({ editor }) => {
+    editor.dispatchCommand(REDO_COMMAND, undefined)
+  },
+  undo: ({ editor }) => {
+    editor.dispatchCommand(UNDO_COMMAND, undefined)
+  },
+}
+
+export const SUPPORT_SPEECH_RECOGNITION: boolean =
+  CAN_USE_DOM &&
+  ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)
+
+function SpeechToTextPluginImpl() {
+  const [editor] = useLexicalComposerContext()
+  const [isEnabled, setIsEnabled] = useState<boolean>(false)
+  const [isSpeechToText, setIsSpeechToText] = useState<boolean>(false)
+  const SpeechRecognition =
+    CAN_USE_DOM &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((window as any).SpeechRecognition || (window as any).webkitSpeechRecognition)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const recognition = useRef<any | null>(null)
+  const report = useReport()
+
+  useEffect(() => {
+    if (isEnabled && recognition.current === null) {
+      recognition.current = new SpeechRecognition()
+      recognition.current.continuous = true
+      recognition.current.interimResults = true
+      recognition.current.addEventListener(
+        "result",
+        (event: typeof SpeechRecognition) => {
+          const resultItem = event.results.item(event.resultIndex)
+          const { transcript } = resultItem.item(0)
+          report(transcript)
+
+          if (!resultItem.isFinal) {
+            return
+          }
+
+          editor.update(() => {
+            const selection = $getSelection()
+
+            if ($isRangeSelection(selection)) {
+              const command = VOICE_COMMANDS[transcript.toLowerCase().trim()]
+
+              if (command) {
+                command({
+                  editor,
+                  selection,
+                })
+              } else if (transcript.match(/\s*\n\s*/)) {
+                selection.insertParagraph()
+              } else {
+                selection.insertText(transcript)
+              }
+            }
+          })
+        }
+      )
+    }
+
+    if (recognition.current) {
+      if (isEnabled) {
+        recognition.current.start()
+      } else {
+        recognition.current.stop()
+      }
+    }
+
+    return () => {
+      if (recognition.current !== null) {
+        recognition.current.stop()
+      }
+    }
+  }, [SpeechRecognition, editor, isEnabled, report])
+  useEffect(() => {
+    return editor.registerCommand(
+      SPEECH_TO_TEXT_COMMAND,
+      (_isEnabled: boolean) => {
+        setIsEnabled(_isEnabled)
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [editor])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          onClick={() => {
+            editor.dispatchCommand(SPEECH_TO_TEXT_COMMAND, !isSpeechToText)
+            setIsSpeechToText(!isSpeechToText)
+          }}
+          variant={isSpeechToText ? "secondary" : "ghost"}
+          title="Speech To Text"
+          aria-label={`${isSpeechToText ? "Enable" : "Disable"} speech to text`}
+          className="editor-p-2"
+          size={"sm"}
+        >
+          <IconSize size="sm">
+            <MicIcon />
+          </IconSize>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Speech To Text</TooltipContent>
+    </Tooltip>
+  )
+}
+
+export const SpeechToTextPlugin = SUPPORT_SPEECH_RECOGNITION
+  ? SpeechToTextPluginImpl
+  : () => null

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

@@ -0,0 +1,63 @@
+"use client"
+
+import { JSX } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { TreeView } from "@lexical/react/LexicalTreeView"
+import { NotebookPenIcon } from "lucide-react"
+
+import { Button } from "../../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../ui/dialog"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip"
+import { ScrollArea, ScrollBar } from "../../ui/scroll-area"
+import { IconSize } from "../../ui/typography"
+
+export function TreeViewPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext()
+  return (
+    <Dialog>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button size={"sm"} variant={"ghost"} className="editor-p-2">
+              <IconSize size="sm">
+                <NotebookPenIcon />
+              </IconSize>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>View Tree</TooltipContent>
+      </Tooltip>
+      <DialogContent disableOutsideClick={true}>
+        <DialogHeader>
+          <DialogTitle>Tree View</DialogTitle>
+          <DialogDescription>
+            Xem cấu trúc cây của nội dung editor
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className="editor-tree-view-scroll-area">
+          <TreeView
+            viewClassName="tree-view-output"
+            treeTypeButtonClassName="debug-treetype-button"
+            timeTravelPanelClassName="debug-timetravel-panel"
+            timeTravelButtonClassName="debug-timetravel-button"
+            timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+            timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+            editor={editor}
+          />
+          <ScrollBar />
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/plugins/align-plugin.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  $isNodeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  ElementFormatType,
+  FORMAT_ELEMENT_COMMAND,
+  LexicalNode,
+} from "lexical"
+import { useEffect } from "react"
+
+export function AlignPlugin(): null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    // Ensure theme has textAlign configuration
+    // This handles cases where the consumer app's theme might be missing these definitions
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const config = editor._config as any
+    if (config.theme && !config.theme.textAlign) {
+      // eslint-disable-next-line react-hooks/immutability
+      config.theme.textAlign = {
+        left: "editor-text-align-left",
+        center: "editor-text-align-center",
+        right: "editor-text-align-right",
+        justify: "editor-text-align-justify",
+      }
+    }
+
+    return editor.registerCommand<ElementFormatType>(
+      FORMAT_ELEMENT_COMMAND,
+      (formatType) => {
+        const selection = $getSelection()
+        
+        if ($isRangeSelection(selection)) {
+          const nodes = selection.getNodes()
+          const processedBlocks = new Set<string>()
+
+          nodes.forEach((node) => {
+            let block: LexicalNode | null = node
+            // Navigate up to find the nearest block element
+            if (!$isElementNode(block) || block.isInline()) {
+              const parent = block.getParentOrThrow()
+              block = parent
+            }
+            
+            // Continue navigating up if it's still inline (just in case)
+            while (block !== null && (!$isElementNode(block) || block.isInline())) {
+               block = block.getParent()
+            }
+
+            if (block && $isElementNode(block) && !processedBlocks.has(block.getKey())) {
+              processedBlocks.add(block.getKey())
+              block.setFormat(formatType)
+            }
+          })
+        } else if ($isNodeSelection(selection)) {
+           const nodes = selection.getNodes()
+           const processedBlocks = new Set<string>()
+           
+           nodes.forEach((node) => {
+             // For NodeSelection (e.g. ImageNode), find the parent block
+             let block = node.getParent()
+             while (block !== null && (!$isElementNode(block) || block.isInline())) {
+                block = block.getParent()
+             }
+
+             if (block && $isElementNode(block) && !processedBlocks.has(block.getKey())) {
+                processedBlocks.add(block.getKey())
+                block.setFormat(formatType)
+             }
+           })
+        }
+        
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [editor])
+
+  return null
+}

package/src/plugins/auto-link-plugin.tsx

@@ -0,0 +1,34 @@
+"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 * as React from "react"
+import { JSX } from "react"
+import {
+  createLinkMatcherWithRegExp,
+  AutoLinkPlugin as LexicalAutoLinkPlugin,
+} from "@lexical/react/LexicalAutoLinkPlugin"
+
+const URL_REGEX =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/
+
+const EMAIL_REGEX =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
+
+const MATCHERS = [
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith("http") ? text : `https://${text}`
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`
+  }),
+]
+
+export function AutoLinkPlugin(): JSX.Element {
+  return <LexicalAutoLinkPlugin matchers={MATCHERS} />
+}