@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,37 @@
+import { JSX } from "react"
+import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
+import { cn } from "../lib/utils"
+
+type Props = {
+  placeholder: string
+  className?: string
+  placeholderClassName?: string
+  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
+}
+
+export function ContentEditable({
+  placeholder,
+  className,
+  placeholderClassName,
+  placeholderDefaults = true,
+}: Props): JSX.Element {
+  return (
+    <LexicalContentEditable
+      className={cn("ContentEditable__root relative block min-h-72 px-8 py-4 focus:outline-none", className)}
+      aria-placeholder={placeholder}
+      aria-label={placeholder || "Editor nội dung"}
+      placeholder={
+        <div
+          className={cn(
+            placeholderClassName,
+            "text-muted-foreground pointer-events-none select-none",
+            placeholderDefaults &&
+              "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
+          )}
+        >
+          {placeholder}
+        </div>
+      }
+    />
+  )
+}

package/src/editor-ui/hooks/use-image-caption-controls.ts

@@ -0,0 +1,118 @@
+"use client"
+import { useState, useEffect, useRef, useCallback } from "react"
+import { LexicalEditor, NodeKey, $getNodeByKey, $getRoot } from "lexical"
+import { $isImageNode } from "../../nodes/image-node"
+
+interface UseImageCaptionControlsProps {
+  caption: LexicalEditor
+  editor: LexicalEditor
+  nodeKey: NodeKey
+  showCaption: boolean
+}
+
+type TimeoutHandle = ReturnType<typeof setTimeout>
+
+/**
+ * Custom hook to handle image caption logic.
+ * Manages caption visibility and content synchronization.
+ */
+export function useImageCaptionControls({
+  caption,
+  editor,
+  nodeKey,
+  showCaption,
+}: UseImageCaptionControlsProps) {
+  const [hasCaptionContent, setHasCaptionContent] = useState(false)
+  const [localShowCaption, setLocalShowCaption] = useState(showCaption)
+  const isUpdatingCaptionRef = useRef(false)
+  const lastShowCaptionRef = useRef(showCaption)
+
+  useEffect(() => {
+    let timeout: TimeoutHandle | null = null
+    timeout = setTimeout(() => {
+      if (!showCaption) {
+        setHasCaptionContent(false)
+        setLocalShowCaption(false)
+      } else if (
+        !isUpdatingCaptionRef.current &&
+        lastShowCaptionRef.current !== showCaption
+      ) {
+        setLocalShowCaption(showCaption)
+        lastShowCaptionRef.current = showCaption
+      }
+      isUpdatingCaptionRef.current = false
+    }, 0)
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+    }
+  }, [showCaption])
+
+  const setShowCaption = useCallback(
+    (show: boolean) => {
+      isUpdatingCaptionRef.current = true
+      lastShowCaptionRef.current = show
+
+      setLocalShowCaption(show)
+
+      if (!show) {
+        setHasCaptionContent(false)
+      }
+
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if ($isImageNode(node)) {
+          node.setShowCaption(show)
+
+          if (!show) {
+            caption.update(() => {
+              const root = $getRoot()
+              root.clear()
+            })
+          }
+        }
+      })
+    },
+    [caption, editor, nodeKey]
+  )
+
+  useEffect(() => {
+    const computeHasContent = () => {
+      const state = caption.getEditorState()
+      const hasContent = state.read(() => {
+        const root = $getRoot()
+        const raw = root.getTextContent()
+        const text = raw.replace(/[\u200B\u00A0\s]+/g, "")
+        return text.length > 0
+      })
+      setHasCaptionContent(showCaption && hasContent)
+    }
+
+    const timer = setTimeout(() => {
+      computeHasContent()
+    }, 0)
+
+    const unregister = caption.registerUpdateListener(() => {
+      computeHasContent()
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if ($isImageNode(node)) {
+          node.setShowCaption(showCaption)
+        }
+      })
+    })
+
+    return () => {
+      clearTimeout(timer)
+      unregister()
+    }
+  }, [caption, editor, nodeKey, showCaption])
+
+  return {
+    hasCaptionContent,
+    localShowCaption,
+    setShowCaption,
+  }
+}

package/src/editor-ui/hooks/use-image-node-interactions.ts

@@ -0,0 +1,245 @@
+"use client"
+import { useState, useEffect, useRef, useCallback } from "react"
+import { 
+  LexicalEditor, 
+  NodeKey, 
+  BaseSelection, 
+  $getSelection, 
+  $isNodeSelection, 
+  $setSelection,
+  SELECTION_CHANGE_COMMAND,
+  CLICK_COMMAND,
+  DRAGSTART_COMMAND,
+  KEY_DELETE_COMMAND,
+  KEY_BACKSPACE_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  LexicalCommand,
+  $isRangeSelection
+} from "lexical"
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"
+import { mergeRegister } from "@lexical/utils"
+import { $isImageNode } from "../../nodes/image-node"
+
+export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent> = createCommand("RIGHT_CLICK_IMAGE_COMMAND")
+
+interface UseImageNodeInteractionsProps {
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>
+  caption: LexicalEditor
+  editor: LexicalEditor
+  imageRef: React.MutableRefObject<HTMLImageElement | null>
+  isResizing: boolean
+  nodeKey: NodeKey
+  showCaption: boolean
+}
+
+/**
+ * Custom hook to handle interactions with the image node.
+ * Handles selection, deletion, keyboard navigation, and context menu.
+ */
+export function useImageNodeInteractions({
+  buttonRef,
+  caption,
+  editor,
+  imageRef,
+  isResizing,
+  nodeKey,
+  showCaption,
+}: UseImageNodeInteractionsProps) {
+  const [selection, setSelection] = useState<BaseSelection | null>(null)
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
+  const activeEditorRef = useRef<LexicalEditor | null>(null)
+
+  const $onDelete = useCallback(
+    (payload: KeyboardEvent) => {
+      const deleteSelection = $getSelection()
+      if (isSelected && $isNodeSelection(deleteSelection)) {
+        const event: KeyboardEvent = payload
+        event.preventDefault()
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isImageNode(node)) {
+              node.remove()
+            }
+          })
+        })
+        return true
+      }
+      return false
+    },
+    [editor, isSelected]
+  )
+
+  const $onEnter = useCallback(
+    (event: KeyboardEvent) => {
+      const latestSelection = $getSelection()
+      const buttonElem = buttonRef.current
+      if (
+        isSelected &&
+        $isNodeSelection(latestSelection) &&
+        latestSelection.getNodes().length === 1
+      ) {
+        if (showCaption) {
+          $setSelection(null)
+          event.preventDefault()
+          caption.focus()
+          return true
+        } else if (
+          buttonElem !== null &&
+          buttonElem !== document.activeElement
+        ) {
+          event.preventDefault()
+          buttonElem.focus()
+          return true
+        }
+      }
+      return false
+    },
+    [buttonRef, caption, isSelected, showCaption]
+  )
+
+  const $onEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (
+        activeEditorRef.current === caption ||
+        buttonRef.current === event.target
+      ) {
+        $setSelection(null)
+        editor.update(() => {
+          setSelected(true)
+          const parentRootElement = editor.getRootElement()
+          if (parentRootElement !== null) {
+            parentRootElement.focus()
+          }
+        })
+        return true
+      }
+      return false
+    },
+    [buttonRef, caption, editor, setSelected]
+  )
+
+  const onClick = useCallback(
+    (payload: MouseEvent) => {
+      const event = payload
+
+      if (isResizing) {
+        return true
+      }
+      if (event.target === imageRef.current) {
+        if (event.shiftKey) {
+          setSelected(!isSelected)
+        } else {
+          clearSelection()
+          setSelected(true)
+        }
+        return true
+      }
+
+      return false
+    },
+    [clearSelection, imageRef, isResizing, isSelected, setSelected]
+  )
+
+  const onRightClick = useCallback(
+    (event: MouseEvent): void => {
+      editor.getEditorState().read(() => {
+        const latestSelection = $getSelection()
+        const domElement = event.target as HTMLElement
+        if (
+          domElement.tagName === "IMG" &&
+          $isRangeSelection(latestSelection) &&
+          latestSelection.getNodes().length === 1
+        ) {
+          editor.dispatchCommand(
+            RIGHT_CLICK_IMAGE_COMMAND,
+            event as MouseEvent
+          )
+        }
+      })
+    },
+    [editor]
+  )
+
+  useEffect(() => {
+    let isMounted = true
+    const rootElement = editor.getRootElement()
+    const unregister = mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()))
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand<MouseEvent>(
+        CLICK_COMMAND,
+        onClick,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand<MouseEvent>(
+        RIGHT_CLICK_IMAGE_COMMAND,
+        onClick,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          if (event.target === imageRef.current) {
+            event.preventDefault()
+            return true
+          }
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_DELETE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        $onEscape,
+        COMMAND_PRIORITY_LOW
+      )
+    )
+
+    rootElement?.addEventListener("contextmenu", onRightClick)
+
+    return () => {
+      isMounted = false
+      unregister()
+      rootElement?.removeEventListener("contextmenu", onRightClick)
+    }
+  }, [
+    clearSelection,
+    editor,
+    imageRef,
+    isResizing,
+    isSelected,
+    nodeKey,
+    $onDelete,
+    $onEnter,
+    $onEscape,
+    onClick,
+    onRightClick,
+    setSelected,
+  ])
+
+  return { isSelected, selection, setSelected, clearSelection }
+}

package/src/editor-ui/hooks/use-responsive-image-dimensions.ts

@@ -0,0 +1,202 @@
+"use client"
+import { useState, useEffect } from "react"
+import { LexicalEditor } from "lexical"
+import { 
+  getContainerWidth, 
+  getImageAspectRatio 
+} from "../image-sizing"
+
+export type DimensionValue = "inherit" | number
+
+export const imageCache = new Map<string, { width: number; height: number; ratio: number }>()
+export const DEFAULT_ASPECT_RATIO = 16 / 9
+export const DEFAULT_WIDTH = 800
+export const DEFAULT_HEIGHT = Math.round(DEFAULT_WIDTH / DEFAULT_ASPECT_RATIO)
+export const DEFAULT_DIMENSIONS = { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT, ratio: DEFAULT_ASPECT_RATIO }
+
+interface UseResponsiveImageDimensionsProps {
+  editor: LexicalEditor
+  height: DimensionValue
+  imageRef: { current: null | HTMLImageElement }
+  width: DimensionValue
+  isResizing: boolean
+  fullWidth?: boolean
+  maxWidthLimit?: number
+  src: string
+}
+
+/**
+ * Custom hook to handle responsive image dimensions.
+ * Calculates width and height based on container width and image aspect ratio.
+ */
+export function useResponsiveImageDimensions({
+  editor,
+  height,
+  imageRef,
+  width,
+  isResizing,
+  fullWidth,
+  maxWidthLimit,
+  src,
+}: UseResponsiveImageDimensionsProps) {
+  const [dimensions, setDimensions] = useState<{
+    width: DimensionValue
+    height: DimensionValue
+  }>({
+    width,
+    height,
+  })
+
+  useEffect(() => {
+    if (isResizing) {
+      return
+    }
+
+    let cancelScheduledUpdate: null | (() => void) = null
+    const cleanupTasks: Array<() => void> = []
+
+    const scheduleDimensionsUpdate = (next: {
+      width: DimensionValue
+      height: DimensionValue
+    }) => {
+      if (cancelScheduledUpdate) {
+        cancelScheduledUpdate()
+      }
+
+      const applyNext = () => {
+        cancelScheduledUpdate = null
+        setDimensions((prev) => {
+          if (prev.width === next.width && prev.height === next.height) {
+            return prev
+          }
+          return next
+        })
+      }
+
+      if (
+        typeof window !== "undefined" &&
+        typeof window.requestAnimationFrame === "function"
+      ) {
+        const frameId = window.requestAnimationFrame(applyNext)
+        cancelScheduledUpdate = () => window.cancelAnimationFrame(frameId)
+      } else {
+        const timeoutId = setTimeout(applyNext)
+        cancelScheduledUpdate = () => clearTimeout(timeoutId)
+      }
+    }
+
+    const editorRoot = editor.getRootElement()
+    const image = imageRef.current
+
+    if (fullWidth) {
+      scheduleDimensionsUpdate({ width: "inherit", height: "inherit" })
+      return () => {
+        cancelScheduledUpdate?.()
+      }
+    }
+
+    if (!image) {
+      scheduleDimensionsUpdate({ width, height })
+      return () => {
+        cancelScheduledUpdate?.()
+      }
+    }
+
+
+
+
+
+    const updateDimensions = () => {
+      if (fullWidth) {
+        scheduleDimensionsUpdate({ width: "inherit", height: "inherit" })
+        return
+      }
+
+      const containerWidth = getContainerWidth(
+        image,
+        editorRoot,
+        maxWidthLimit
+      )
+
+      if (!containerWidth) {
+        scheduleDimensionsUpdate({ width, height })
+        return
+      }
+
+      const cached = imageCache.get(src)
+      const baseWidth =
+        typeof width === "number"
+          ? width
+          : image.naturalWidth || cached?.width || image.getBoundingClientRect().width || containerWidth
+
+      let baseHeight: DimensionValue
+      if (typeof height === "number") {
+        baseHeight = height
+      } else if (image.naturalHeight > 0) {
+        baseHeight = image.naturalHeight
+      } else if (cached?.height) {
+        baseHeight = cached.height
+      } else {
+        const ratio = cached?.ratio || getImageAspectRatio(image) || DEFAULT_ASPECT_RATIO
+        baseHeight = ratio > 0 ? Math.round(baseWidth / ratio) : "inherit"
+      }
+
+      let nextWidth: DimensionValue = baseWidth
+      let nextHeight: DimensionValue = baseHeight
+
+      if (
+        width === "inherit" &&
+        typeof baseWidth === "number" &&
+        baseWidth > containerWidth
+      ) {
+        const scale = containerWidth / baseWidth
+        nextWidth = containerWidth
+        if (typeof baseHeight === "number") {
+          nextHeight = Math.max(Math.round(baseHeight * scale), 1)
+        } else if (baseHeight === "inherit") {
+          const ratio = cached?.ratio || getImageAspectRatio(image) || DEFAULT_ASPECT_RATIO
+          nextHeight =
+            ratio > 0 ? Math.max(Math.round(containerWidth / ratio), 1) : baseHeight
+        }
+      }
+
+      scheduleDimensionsUpdate({ width: nextWidth, height: nextHeight })
+    }
+
+    updateDimensions()
+
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(updateDimensions)
+      if (editorRoot) {
+        resizeObserver.observe(editorRoot)
+      }
+      if (image.parentElement) {
+        resizeObserver.observe(image.parentElement)
+      }
+      cleanupTasks.push(() => {
+        resizeObserver.disconnect()
+      })
+    } else if (typeof window !== "undefined") {
+      window.addEventListener("resize", updateDimensions)
+      cleanupTasks.push(() => {
+        window.removeEventListener("resize", updateDimensions)
+      })
+    }
+
+    return () => {
+      cancelScheduledUpdate?.()
+      cleanupTasks.forEach((task) => task())
+    }
+  }, [
+    editor,
+    height,
+    imageRef,
+    isResizing,
+    width,
+    fullWidth,
+    maxWidthLimit,
+    src,
+  ])
+
+  return dimensions
+}