@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,321 @@
+"use client"
+import * as React from "react"
+import {
+  JSX,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable"
+import { $isNodeSelection, $getNodeByKey, NodeKey, LexicalEditor, FORMAT_ELEMENT_COMMAND, ElementFormatType } from "lexical"
+
+import { ImageResizer } from "../editor-ui/image-resizer"
+import { $isImageNode } from "../nodes/image-node"
+import { cn } from "../lib/utils"
+import { useEditorContainer } from "../context/editor-container-context"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog"
+import {
+  InsertImageDialog,
+  InsertImagePayload,
+} from "../plugins/images-plugin"
+import { usePriorityImage } from "../context/priority-image-context"
+
+// Sub-components
+import { LazyImage } from "./lazy-image"
+import { BrokenImage } from "./broken-image"
+import { ImagePlaceholder } from "./image-placeholder"
+import { CaptionComposer } from "./caption-composer"
+
+// Hooks
+import { useResponsiveImageDimensions, DimensionValue } from "./hooks/use-responsive-image-dimensions"
+import { useImageCaptionControls } from "./hooks/use-image-caption-controls"
+import { useImageNodeInteractions } from "./hooks/use-image-node-interactions"
+
+const RESIZE_HANDLE_HIDE_DELAY = 200
+
+interface ImageComponentProps {
+  altText: string
+  caption: LexicalEditor
+  captionsEnabled: boolean
+  fullWidth: boolean
+  height: DimensionValue
+  maxWidth: number
+  nodeKey: NodeKey
+  resizable: boolean
+  showCaption: boolean
+  src: string
+  width: DimensionValue
+}
+
+/**
+ * ImageComponent - The main component for image nodes in the Lexical editor.
+ * Orchestrates image rendering, resizing, captions, and interactions.
+ */
+export default function ImageComponent({
+  altText,
+  caption,
+  captionsEnabled,
+  fullWidth,
+  height,
+  maxWidth,
+  nodeKey,
+  resizable,
+  showCaption,
+  src,
+  width,
+}: ImageComponentProps): JSX.Element {
+  const imageRef = useRef<null | HTMLImageElement>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const [isResizing, setIsResizing] = useState<boolean>(false)
+  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [editor] = useLexicalComposerContext()
+  const [isLoadError, setIsLoadError] = useState<boolean>(false)
+  const [isReplaceDialogOpen, setIsReplaceDialogOpen] = useState(false)
+  const isEditable = useLexicalEditable()
+  const editorContainer = useEditorContainer()
+  
+  const prioritySrc = usePriorityImage()
+  const isPriority = src === prioritySrc
+  
+  // Custom hooks for logic separation
+  const {
+    hasCaptionContent,
+    localShowCaption,
+    setShowCaption,
+  } = useImageCaptionControls({
+    caption,
+    editor,
+    nodeKey,
+    showCaption,
+  })
+
+  const responsiveDimensions = useResponsiveImageDimensions({
+    editor,
+    imageRef,
+    width,
+    height,
+    isResizing,
+    fullWidth,
+    maxWidthLimit: editorContainer?.maxWidth,
+    src,
+  })
+
+  const { isSelected, selection } = useImageNodeInteractions({
+    buttonRef,
+    caption,
+    editor,
+    imageRef,
+    isResizing,
+    nodeKey,
+    showCaption,
+  })
+
+  useEffect(() => {
+    if (!isEditable && isReplaceDialogOpen) {
+      setTimeout(() => {
+        setIsReplaceDialogOpen(false)
+      }, 0)
+    }
+  }, [isEditable, isReplaceDialogOpen])
+
+  useEffect(() => {
+    return () => {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const onResizeEnd = useCallback(
+    (nextWidth: DimensionValue, nextHeight: DimensionValue) => {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current)
+      }
+      resizeTimeoutRef.current = setTimeout(() => {
+        setIsResizing(false)
+      }, RESIZE_HANDLE_HIDE_DELAY)
+
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if ($isImageNode(node)) {
+          node.setWidthAndHeight(nextWidth, nextHeight)
+        }
+      })
+    },
+    [editor, nodeKey]
+  )
+
+  const onResizeStart = useCallback(() => {
+    setIsResizing(true)
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey)
+      if ($isImageNode(node)) {
+        node.setFullWidth(false)
+      }
+    })
+  }, [editor, nodeKey])
+
+  useEffect(() => {
+    const element = editor.getElementByKey(nodeKey)
+    if (element) {
+      if (fullWidth) {
+        element.style.width = "100%"
+        element.style.display = "block"
+      } else {
+        element.style.width = ""
+        element.style.display = "inline-block"
+      }
+    }
+  }, [editor, nodeKey, fullWidth])
+
+  const onSetFullWidth = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey)
+      if ($isImageNode(node)) {
+        node.setFullWidth(!fullWidth)
+      }
+    })
+  }, [editor, fullWidth, nodeKey])
+
+  const onAlign = useCallback(
+    (format: ElementFormatType) => {
+      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format)
+    },
+    [editor]
+  )
+
+  const handleReplaceImage = useCallback(
+    (payload: InsertImagePayload) => {
+      if (!payload?.src) {
+        return
+      }
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if ($isImageNode(node)) {
+          node.setSrc(payload.src)
+          if (payload.altText !== undefined) {
+            node.setAltText(payload.altText)
+          }
+          node.setWidthAndHeight("inherit", "inherit")
+        }
+      })
+    },
+    [editor, nodeKey]
+  )
+
+  const onDelete = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey)
+      if ($isImageNode(node)) {
+        node.remove()
+      }
+    })
+  }, [editor, nodeKey])
+
+  const draggable = isSelected && $isNodeSelection(selection) && !isResizing
+  const isFocused = (isSelected || isResizing) && isEditable
+  const shouldRenderCaption =
+    showCaption &&
+    (isEditable
+      ? localShowCaption && captionsEnabled
+      : hasCaptionContent)
+
+  const imageClassName = cn(
+    "editor-image",
+    isFocused && "editor-image-focused",
+    isFocused && $isNodeSelection(selection) && "editor-image-draggable",
+    fullWidth && "full-width"
+  )
+
+  const captionWrapperClass = cn(
+    "editor-image-caption",
+    isEditable ? "editable" : "readonly"
+  )
+
+  return (
+    <Suspense
+      fallback={
+        <div draggable={draggable}>
+          <ImagePlaceholder
+            width={responsiveDimensions.width}
+            height={responsiveDimensions.height}
+          />
+        </div>
+      }
+    >
+      <>
+        <div draggable={draggable} style={{ display: "inline-block" }}>
+          {isLoadError ? (
+            <BrokenImage />
+          ) : (
+            <LazyImage
+              className={imageClassName}
+              src={src}
+              altText={altText}
+              imageRef={imageRef}
+              width={responsiveDimensions.width}
+              height={responsiveDimensions.height}
+              maxWidth={maxWidth}
+              onError={() => setIsLoadError(true)}
+              fetchPriority={isPriority ? "high" : "auto"}
+            />
+          )}
+        </div>
+
+        {shouldRenderCaption && (
+          <div className={captionWrapperClass}>
+            <CaptionComposer caption={caption} isEditable={isEditable} />
+          </div>
+        )}
+
+        {resizable && isFocused && (
+          <ImageResizer
+            buttonRef={buttonRef}
+            showCaption={showCaption}
+            setShowCaption={setShowCaption}
+            editor={editor}
+            mediaRef={imageRef}
+            onResizeStart={onResizeStart}
+            onResizeEnd={onResizeEnd}
+            captionsEnabled={captionsEnabled}
+            onReplaceMedia={() => setIsReplaceDialogOpen(true)}
+            onSetFullWidth={onSetFullWidth}
+            isFullWidth={fullWidth}
+            onDelete={onDelete}
+            onAlign={onAlign}
+          />
+        )}
+
+        {isEditable && isReplaceDialogOpen && (
+          <Dialog
+            open={isReplaceDialogOpen}
+            onOpenChange={setIsReplaceDialogOpen}
+          >
+            <DialogContent className="editor-dialog-content--lg" disableOutsideClick={true}>
+              <DialogHeader>
+                <DialogTitle>Thay thế hình ảnh</DialogTitle>
+              </DialogHeader>
+              <InsertImageDialog
+                activeEditor={editor}
+                activeTab="url"
+                onClose={() => setIsReplaceDialogOpen(false)}
+                onInsert={(payload) => {
+                  handleReplaceImage(payload)
+                  setIsReplaceDialogOpen(false)
+                }}
+              />
+            </DialogContent>
+          </Dialog>
+        )}
+      </>
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { JSX } from "react"
+import { DimensionValue } from "./hooks/use-responsive-image-dimensions"
+
+interface ImagePlaceholderProps {
+  width: DimensionValue
+  height: DimensionValue
+}
+
+/**
+ * ImagePlaceholder - Rendered while an image is loading or when dimensions are being calculated.
+ */
+export function ImagePlaceholder({
+  width,
+  height,
+}: ImagePlaceholderProps): JSX.Element {
+  const MAX_CONTAINER_WIDTH = 800
+  const MAX_CONTAINER_HEIGHT = 600
+  
+  const getNumeric = (val: DimensionValue, max: number) => {
+    if (typeof val === "number") return val
+    return max
+  }
+
+  const pWidth = getNumeric(width, MAX_CONTAINER_WIDTH)
+  const pHeight = getNumeric(height, MAX_CONTAINER_HEIGHT)
+
+  return (
+    <div
+      className="editor-article-image-placeholder editor-animate-pulse editor-bg-muted editor-flex editor-items-center editor-justify-center editor-rounded-lg"
+      style={{
+        width: width === "inherit" ? "100%" : pWidth,
+        height: height === "inherit" ? "auto" : pHeight,
+        aspectRatio: width === "inherit" || height === "inherit" ? "16/9" : undefined,
+        maxWidth: "100%",
+      }}
+    >
+      <div className="editor-flex editor-flex-col editor-items-center editor-gap-2 editor-text-muted-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+      </div>
+    </div>
+  )
+}