@thangph2146/lexical-editor 0.0.4 → 0.0.6

package/package.json

@@ -1,84 +1,86 @@
-{
-  "name": "@thangph2146/lexical-editor",
-  "version": "0.0.4",
-  "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/typescript-config": "0.0.0",
-    "@workspace/eslint-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"
-  }
-}
+{
+  "name": "@thangph2146/lexical-editor",
+  "version": "0.0.6",
+  "description": "Rich Text Editor library based on Lexical for React/Next.js",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "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",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "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"
+  },
+  "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"
+  }
+}

package/src/components/lexical-editor.tsx

@@ -1,123 +1,140 @@
-"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>
-  )
-}
+"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
+}
+
+function isValidSerializedEditorState(value: unknown): value is SerializedEditorState {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "root" in value &&
+    value.root !== null &&
+    typeof value.root === "object" &&
+    "type" in (value.root as Record<string, unknown>) &&
+    (value.root as Record<string, unknown>).type === "root"
+  )
+}
+
+export function LexicalEditor({
+  value,
+  onChange,
+  readOnly = false,
+  className,
+  placeholder = "",
+}: LexicalEditorProps) {
+  // Parse initial value as SerializedEditorState
+  const [editorState, setEditorState] = useState<SerializedEditorState | undefined>(() => {
+    if (value && typeof value === "object" && value !== null) {
+      if (isValidSerializedEditorState(value)) {
+        return value
+      }
+      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 (isValidSerializedEditorState(parsed)) {
+          return parsed
+        }
+      } catch {
+        // Invalid JSON, return undefined
+      }
+    }
+    return undefined
+  })
+
+  // Ref to track if we are syncing from external value
+  const isSyncingRef = useRef(false)
+  const lastValueRef = useRef(value)
+
+  // Ref to track current state for comparison
+  const editorStateRef = useRef(editorState)
+  useEffect(() => {
+    editorStateRef.current = editorState
+  }, [editorState])
+
+  useEffect(() => {
+    // Skip if value hasn't changed by reference
+    if (value === lastValueRef.current && !isSyncingRef.current) return
+    
+    lastValueRef.current = value
+
+    const syncState = (newState: SerializedEditorState | undefined) => {
+      const currentStateStr = JSON.stringify(editorStateRef.current)
+      const newStateStr = JSON.stringify(newState)
+      
+      if (currentStateStr !== newStateStr) {
+        isSyncingRef.current = true
+        setEditorState(newState)
+        // Reset syncing flag in next tick
+        setTimeout(() => {
+          isSyncingRef.current = false
+        }, 0)
+      }
+    }
+
+    if (value && typeof value === "object" && value !== null) {
+      if (isValidSerializedEditorState(value)) {
+        syncState(value)
+      } else {
+        logger.error("[LexicalEditor] Invalid value object structure:", value)
+      }
+    } else if (typeof value === "string" && value.trim().startsWith("{")) {
+      try {
+        const parsed = JSON.parse(value)
+        if (isValidSerializedEditorState(parsed)) {
+          syncState(parsed)
+        } else {
+          logger.error("[LexicalEditor] Invalid parsed JSON structure:", parsed)
+        }
+      } catch (error) {
+        logger.error("[LexicalEditor] Error parsing value string:", error)
+      }
+    } else if (value === null || value === undefined) {
+      if (editorStateRef.current !== undefined) {
+        syncState(undefined)
+      }
+    }
+  }, [value]) // Only depend on value
+
+  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}
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}

package/src/editor-x/editor.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import {
   InitialConfigType,
   LexicalComposer,
@@ -39,19 +39,21 @@ export function Editor({
   onChange,
   onSerializedChange,
   readOnly = false,
+  placeholder = "",
 }: {
   editorState?: EditorState
   editorSerializedState?: SerializedEditorState
   onChange?: (editorState: EditorState) => void
   onSerializedChange?: (editorSerializedState: SerializedEditorState) => void
   readOnly?: boolean
+  placeholder?: string
 }) {
   const { ref: editorRef, width: editorWidth } = useElementSize<HTMLDivElement>()
   const editorMaxWidth = editorWidth || undefined
 
   const [config, setConfig] = useState<{
     nodes: InitialConfigType["nodes"]
-    Plugins: React.ComponentType<{ readOnly?: boolean }>
+    Plugins: React.ComponentType<{ readOnly?: boolean; placeholder?: string }>
   } | null>(null)
 
   useEffect(() => {
@@ -61,7 +63,21 @@ export function Editor({
     ]).then(([nodes, { Plugins }]) => setConfig({ nodes, Plugins }))
   }, [])
 
-  if (!config) {
+  const editorConfig = useMemo(() => {
+    if (!config || !config.nodes) return null
+
+    const validNodes = config.nodes.filter((node) => {
+      if (node === undefined) {
+        console.error("[Editor] Found undefined node in config.nodes")
+        return false
+      }
+      return true
+    })
+
+    return createEditorConfig(validNodes)
+  }, [config])
+
+  if (!config || !editorConfig) {
     return (
       <div
         className={cn(
@@ -74,7 +90,6 @@ export function Editor({
     )
   }
 
-  const editorConfig = createEditorConfig(config.nodes)
   const { Plugins } = config
 
   return (
@@ -98,7 +113,7 @@ export function Editor({
           }}
         >
           <TooltipProvider>
-            <Plugins readOnly={readOnly} />
+            <Plugins readOnly={readOnly} placeholder={placeholder} />
 
             {!readOnly && (
               <OnChangePlugin