@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangph2146/lexical-editor",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "private": false,
   "main": "./dist/index.cjs",

package/src/components/lexical-editor.tsx

@@ -1,123 +1,138 @@
-"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,
+}: 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}
+      />
+    </div>
+  )
+}

package/src/editor-ui/content-editable.tsx

@@ -15,13 +15,13 @@ export function ContentEditable({
   placeholderClassName,
   placeholderDefaults = true,
 }: Props): JSX.Element {
-  const isReadOnly = className?.includes("--readonly")
+  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
 
   return (
     <LexicalContentEditable
       className={cn(
         "ContentEditable__root relative block focus:outline-none",
-        !isReadOnly && "min-h-72 px-8 py-4",
+        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
         className
       )}
       aria-placeholder={placeholder}
@@ -31,7 +31,7 @@ export function ContentEditable({
           className={cn(
             placeholderClassName,
             "text-muted-foreground pointer-events-none select-none",
-            placeholderDefaults && !isReadOnly && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
+            placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
           )}
         >
           {placeholder}

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,
@@ -61,7 +61,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 +88,6 @@ export function Editor({
     )
   }
 
-  const editorConfig = createEditorConfig(config.nodes)
   const { Plugins } = config
 
   return (