@thangph2146/lexical-editor 0.0.1

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@thangph2146/lexical-editor",
+  "version": "0.0.1",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lexical/code": "^0.38.2",
+    "@lexical/file": "^0.38.2",
+    "@lexical/hashtag": "^0.38.2",
+    "@lexical/link": "^0.38.2",
+    "@lexical/list": "^0.38.2",
+    "@lexical/markdown": "^0.38.2",
+    "@lexical/overflow": "^0.38.2",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/table": "^0.38.2",
+    "@lexical/text": "^0.38.2",
+    "@lexical/utils": "^0.38.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
+    "framer-motion": "^12.4.7",
+    "lucide-react": "^0.552.0",
+    "sonner": "^2.0.7"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.38.2",
+    "lexical": "^0.38.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "esbuild-sass-plugin": "^3.3.1",
+    "eslint": "^9.39.2",
+    "next": "16.1.6",
+    "sass": "^1.83.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3",
+    "@workspace/eslint-config": "0.0.0",
+    "@workspace/typescript-config": "0.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/index.css",
+    "./editor": {
+      "types": "./dist/editor-x/editor.d.ts",
+      "import": "./dist/editor-x/editor.js",
+      "require": "./dist/editor-x/editor.cjs"
+    },
+    "./styles": {
+      "sass": "./src/themes/editor-theme.scss",
+      "default": "./src/themes/editor-theme.scss"
+    },
+    "./variables": {
+      "sass": "./src/themes/_variables.scss",
+      "default": "./src/themes/_variables.scss"
+    },
+    "./themes/*": "./src/themes/*.ts",
+    "./utils/*": "./src/utils/*.ts"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/lexical-editor.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Editor } from "../editor-x/editor"
+import type { SerializedEditorState } from "lexical"
+import { logger } from "../lib/logger"
+
+export interface LexicalEditorProps {
+  value?: unknown
+  onChange?: (value: SerializedEditorState) => void
+  readOnly?: boolean
+  className?: string
+  placeholder?: string
+}
+
+export function LexicalEditor({
+  value,
+  onChange,
+  readOnly = false,
+  className,
+}: LexicalEditorProps) {
+  // Parse initial value as SerializedEditorState
+  const [editorState, setEditorState] = useState<SerializedEditorState | undefined>(() => {
+    if (value && typeof value === "object" && value !== null) {
+      try {
+        return value as unknown as SerializedEditorState
+      } catch {
+        return undefined
+      }
+    }
+    // If value is a JSON string, try to parse it
+    if (typeof value === "string" && value.trim().startsWith("{")) {
+      try {
+        const parsed = JSON.parse(value)
+        if (parsed && typeof parsed === "object" && parsed !== null) {
+          return parsed as SerializedEditorState
+        }
+      } catch {
+        // Invalid JSON, return undefined
+      }
+    }
+    return undefined
+  })
+
+  // Ref to track if we are syncing from external value
+  const isSyncingRef = useRef(false)
+
+  useEffect(() => {
+    if (isSyncingRef.current) return
+
+    if (value && typeof value === "object" && value !== null) {
+      try {
+        const newState = value as unknown as SerializedEditorState
+        const currentStateStr = editorState ? JSON.stringify(editorState) : null
+        const newStateStr = JSON.stringify(newState)
+        if (currentStateStr !== newStateStr) {
+          isSyncingRef.current = true
+          setEditorState(newState)
+          setTimeout(() => {
+            isSyncingRef.current = false
+          }, 0)
+        }
+      } catch (error) {
+        logger.error("[LexicalEditor] Error parsing value object:", error)
+      }
+    } else if (typeof value === "string" && value.trim().startsWith("{")) {
+      try {
+        const parsed = JSON.parse(value)
+        if (parsed && typeof parsed === "object" && parsed !== null) {
+          const newState = parsed as SerializedEditorState
+          const currentStateStr = editorState ? JSON.stringify(editorState) : null
+          const newStateStr = JSON.stringify(newState)
+          if (currentStateStr !== newStateStr) {
+            isSyncingRef.current = true
+            setEditorState(newState)
+            setTimeout(() => {
+              isSyncingRef.current = false
+            }, 0)
+          }
+        }
+      } catch (error) {
+        logger.error("[LexicalEditor] Error parsing value string:", error)
+      }
+    } else if (value === null || value === undefined) {
+      if (editorState !== undefined) {
+        isSyncingRef.current = true
+        setEditorState(undefined)
+        setTimeout(() => {
+          isSyncingRef.current = false
+        }, 0)
+      }
+    }
+  }, [value, editorState])
+
+  const handleSerializedChange = (newState: SerializedEditorState) => {
+    if (readOnly) return
+    
+    // Avoid triggering update if state hasn't effectively changed (optional optimization)
+    // But Lexical's onChange usually implies a change.
+    
+    // Update local state to avoid re-syncing from props immediately if parent re-renders
+    // isSyncingRef.current = true
+    setEditorState(newState)
+    
+    if (onChange) {
+      onChange(newState)
+    }
+    
+    // setTimeout(() => {
+    //   isSyncingRef.current = false
+    // }, 0)
+  }
+
+  return (
+    <div className={className}>
+      <Editor
+        editorSerializedState={editorState}
+        onSerializedChange={handleSerializedChange}
+        readOnly={readOnly}
+      />
+    </div>
+  )
+}

package/src/context/editor-container-context.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { createContext, useContext, type ReactNode } from "react"
+
+type EditorContainerContextValue = {
+  maxWidth?: number
+}
+
+const EditorContainerContext = createContext<EditorContainerContextValue | null>(
+  null
+)
+
+export function EditorContainerProvider({
+  value,
+  children,
+}: {
+  value: EditorContainerContextValue
+  children: ReactNode
+}) {
+  return (
+    <EditorContainerContext.Provider value={value}>
+      {children}
+    </EditorContainerContext.Provider>
+  )
+}
+
+export function useEditorContainer() {
+  return useContext(EditorContainerContext)
+}

package/src/context/priority-image-context.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+export const PriorityImageContext = createContext<string | null>(null)
+
+export const usePriorityImage = () => useContext(PriorityImageContext)

package/src/context/toolbar-context.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { createContext, JSX, useContext } from "react"
+import { LexicalEditor } from "lexical"
+
+const Context = createContext<{
+  activeEditor: LexicalEditor
+  $updateToolbar: () => void
+  blockType: string
+  setBlockType: (blockType: string) => void
+  showModal: (
+    title: string,
+    showModal: (onClose: () => void) => JSX.Element,
+    closeOnClickOutside?: boolean
+  ) => void
+}>({
+  activeEditor: {} as LexicalEditor,
+  $updateToolbar: () => {},
+  blockType: "paragraph",
+  setBlockType: () => {},
+  showModal: () => {},
+})
+
+export function ToolbarContext({
+  activeEditor,
+  $updateToolbar,
+  blockType,
+  setBlockType,
+  showModal,
+  children,
+}: {
+  activeEditor: LexicalEditor
+  $updateToolbar: () => void
+  blockType: string
+  setBlockType: (blockType: string) => void
+  showModal: (
+    title: string,
+    showModal: (onClose: () => void) => JSX.Element,
+    closeOnClickOutside?: boolean
+  ) => void
+  children: React.ReactNode
+}) {
+  return (
+    <Context.Provider
+      value={{
+        activeEditor,
+        $updateToolbar,
+        blockType,
+        setBlockType,
+        showModal,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}
+
+export function useToolbarContext() {
+  return useContext(Context)
+}

package/src/context/uploads-context.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import React, { createContext, useContext, ReactNode } from "react"
+
+export interface ImageItem {
+  fileName: string
+  originalName: string
+  size: number
+  mimeType: string
+  url: string
+  relativePath: string
+  createdAt: number
+}
+
+export interface FolderNode {
+  name: string
+  path: string
+  images: ImageItem[]
+  subfolders: FolderNode[]
+}
+
+export interface EditorUploadsContextType {
+  isLoading: boolean
+  folderTree?: FolderNode
+}
+
+const EditorUploadsContext = createContext<EditorUploadsContextType | undefined>(undefined)
+
+export function EditorUploadsProvider({
+  children,
+  value,
+}: {
+  children: ReactNode
+  value: EditorUploadsContextType
+}) {
+  return (
+    <EditorUploadsContext.Provider value={value}>
+      {children}
+    </EditorUploadsContext.Provider>
+  )
+}
+
+export function useEditorUploads() {
+  const context = useContext(EditorUploadsContext)
+  if (context === undefined) {
+    // Default values if provider is not used
+    return {
+      isLoading: false,
+      folderTree: undefined,
+    }
+  }
+  return context
+}

package/src/editor-hooks/use-debounce.ts

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useRef } from "react"
+
+/**
+ * Debounce with optional maxWait (invoke at latest after maxWait from first call).
+ * Inline implementation to avoid lodash dependency.
+ */
+function debounce<T extends (...args: never[]) => void>(
+  fn: T,
+  ms: number,
+  options?: { maxWait?: number }
+): T & { cancel: () => void } {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  let maxWaitId: ReturnType<typeof setTimeout> | null = null
+  let lastArgs: Parameters<T> = [] as unknown as Parameters<T>
+
+  const cancel = () => {
+    if (timeoutId) clearTimeout(timeoutId)
+    if (maxWaitId) clearTimeout(maxWaitId)
+    timeoutId = null
+    maxWaitId = null
+  }
+
+  const flush = () => {
+    if (timeoutId) clearTimeout(timeoutId)
+    if (maxWaitId) clearTimeout(maxWaitId)
+    timeoutId = null
+    maxWaitId = null
+    fn(...lastArgs)
+  }
+
+  const debounced = (...args: Parameters<T>) => {
+    lastArgs = args
+    if (timeoutId) clearTimeout(timeoutId)
+    timeoutId = setTimeout(flush, ms)
+    if (options?.maxWait != null && maxWaitId === null) {
+      maxWaitId = setTimeout(flush, options.maxWait)
+    }
+  }
+
+  ;(debounced as T & { cancel: () => void }).cancel = cancel
+  return debounced as T & { cancel: () => void }
+}
+
+export function useDebounce<T extends (...args: never[]) => void>(
+  fn: T,
+  ms: number,
+  maxWait?: number
+) {
+  const funcRef = useRef<T>(fn)
+  const debouncedRef = useRef<((...args: Parameters<T>) => void) & { cancel: () => void } | null>(null)
+
+  useEffect(() => {
+    funcRef.current = fn
+  }, [fn])
+
+  useEffect(() => {
+    const debounced = debounce(
+      ((...args: Parameters<T>) => {
+        funcRef.current(...args)
+      }) as T,
+      ms,
+      { maxWait }
+    )
+    debouncedRef.current = debounced
+    return () => {
+      debounced.cancel()
+      debouncedRef.current = null
+    }
+  }, [ms, maxWait])
+
+  return useMemo(() => {
+    const run = (...args: Parameters<T>) => {
+      debouncedRef.current?.(...args)
+    }
+    ;(run as unknown as { cancel: () => void }).cancel = () => {
+      debouncedRef.current?.cancel()
+    }
+    return run as unknown as T & { cancel: () => void }
+  }, [])
+}

package/src/editor-hooks/use-modal.tsx

@@ -0,0 +1,64 @@
+import { JSX, useCallback, useMemo, useState } from "react"
+import * as React from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog"
+
+export function useEditorModal(): [
+  JSX.Element | null,
+  (
+    title: string,
+    showModal: (onClose: () => void) => JSX.Element,
+    closeOnClickOutside?: boolean
+  ) => void,
+] {
+  const [modalContent, setModalContent] = useState<null | {
+    closeOnClickOutside: boolean
+    content: JSX.Element
+    title: string
+  }>(null)
+
+  const onClose = useCallback(() => {
+    setModalContent(null)
+  }, [])
+
+  const modal = useMemo(() => {
+    if (modalContent === null) {
+      return null
+    }
+    const { title, content, closeOnClickOutside } = modalContent
+    return (
+      <Dialog open={true} onOpenChange={onClose}>
+        <DialogContent disableOutsideClick={!closeOnClickOutside}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{title}</DialogDescription>
+          </DialogHeader>
+          {content}
+        </DialogContent>
+      </Dialog>
+    )
+  }, [modalContent, onClose])
+
+  const showModal = useCallback(
+    (
+      title: string,
+      getContent: (onClose: () => void) => JSX.Element,
+      closeOnClickOutside = false
+    ) => {
+      setModalContent({
+        closeOnClickOutside,
+        content: getContent(onClose),
+        title,
+      })
+    },
+    [onClose]
+  )
+
+  return [modal, showModal]
+}

package/src/editor-hooks/use-report.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef } from "react"
+import { logger } from "../lib/logger"
+
+const getElement = (): HTMLElement => {
+  let element = document.getElementById("report-container")
+
+  if (element === null) {
+    element = document.createElement("div")
+    element.id = "report-container"
+    element.style.position = "fixed"
+    element.style.top = "50%"
+    element.style.left = "50%"
+    element.style.fontSize = "32px"
+    element.style.transform = "translate(-50%, -50px)"
+    element.style.padding = "20px"
+    element.style.background = "rgba(240, 240, 240, 0.4)"
+    element.style.borderRadius = "20px"
+
+    if (document.body) {
+      document.body.appendChild(element)
+    }
+  }
+
+  return element
+}
+
+export function useReport(): (arg0: string) => ReturnType<typeof setTimeout> {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const cleanup = useCallback(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current)
+      timer.current = null
+    }
+
+    if (document.body) {
+      document.body.removeChild(getElement())
+    }
+  }, [])
+
+  useEffect(() => {
+    return cleanup
+  }, [cleanup])
+
+  return useCallback(
+    (content) => {
+      logger.debug("Report content", { content })
+      const element = getElement()
+      if (timer.current !== null) {
+        clearTimeout(timer.current)
+      }
+      element.innerHTML = content
+      timer.current = setTimeout(cleanup, 1000)
+      return timer.current
+    },
+    [cleanup]
+  )
+}

package/src/editor-hooks/use-update-toolbar.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  $getSelection,
+  BaseSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical"
+
+import { useToolbarContext } from "../context/toolbar-context"
+
+export function useUpdateToolbarHandler(
+  callback: (selection: BaseSelection) => void
+) {
+  const [editor] = useLexicalComposerContext()
+  const { activeEditor } = useToolbarContext()
+
+  useEffect(() => {
+    return activeEditor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        const selection = $getSelection()
+        if (selection) {
+          callback(selection)
+        }
+        return false
+      },
+      COMMAND_PRIORITY_CRITICAL
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, callback])
+
+  useEffect(() => {
+    activeEditor.getEditorState().read(() => {
+      const selection = $getSelection()
+      if (selection) {
+        callback(selection)
+      }
+    })
+  }, [activeEditor, callback])
+}

package/src/editor-ui/broken-image.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { JSX } from "react"
+
+/**
+ * BrokenImage - Fallback component for when an image fails to load.
+ */
+export function BrokenImage(): JSX.Element {
+  const transparentPixel = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E"
+  
+  return (
+    <div className="editor-broken-image-container">
+      <img
+        src={transparentPixel}
+        alt="Broken Image"
+      />
+    </div>
+  )
+}

package/src/editor-ui/caption-composer.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { LexicalEditor } from "lexical"
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer"
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin"
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { ContentEditable } from "./content-editable"
+
+interface CaptionComposerProps {
+  caption: LexicalEditor
+  isEditable: boolean
+}
+
+/**
+ * CaptionComposer - A nested editor for image captions.
+ */
+export function CaptionComposer({
+  caption,
+  isEditable,
+}: CaptionComposerProps) {
+  return (
+    <LexicalNestedComposer initialEditor={caption}>
+      <AutoFocusPlugin />
+      <HistoryPlugin />
+      <RichTextPlugin
+        contentEditable={
+          <div className="editor-relative">
+            <ContentEditable
+              className={`ImageNode__contentEditable editor-relative editor-block editor-min-h-5 editor-w-full editor-resize-none editor-border-0 editor-bg-transparent editor-px-2.5 editor-py-2 editor-text-sm editor-whitespace-pre-wrap editor-outline-none editor-word-break-break-word ${
+                isEditable
+                  ? "editor-box-border editor-cursor-text editor-caret-primary editor-user-select-text"
+                  : "editor-cursor-default editor-select-text"
+              }`}
+              placeholder={isEditable ? "Enter a caption..." : ""}
+              placeholderDefaults={false}
+              placeholderClassName="ImageNode__placeholder editor-absolute editor-top-0 editor-left-0 editor-overflow-hidden editor-px-2.5 editor-py-2 editor-text-ellipsis editor-text-sm"
+            />
+          </div>
+        }
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+    </LexicalNestedComposer>
+  )
+}