@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,136 @@
+import * as React from "react"
+import { JSX, useState, useRef, useEffect } from "react"
+import Image from "next/image"
+import { cn } from "../lib/utils"
+import { 
+  DimensionValue, 
+  imageCache, 
+  DEFAULT_WIDTH, 
+  DEFAULT_HEIGHT, 
+  DEFAULT_DIMENSIONS 
+} from "./hooks/use-responsive-image-dimensions"
+
+interface LazyImageProps {
+  altText: string
+  className: string | null
+  height: DimensionValue
+  imageRef: { current: null | HTMLImageElement }
+  maxWidth: number
+  src: string
+  width: DimensionValue
+  onError: () => void
+  fetchPriority?: "high" | "low" | "auto"
+}
+
+/**
+ * LazyImage - Handles image loading and rendering within the Lexical editor.
+ * Includes dimensions caching to prevent layout shift.
+ */
+export function LazyImage({
+  altText,
+  className,
+  imageRef,
+  src,
+  width,
+  height,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- prop reserved for future use
+  maxWidth: _maxWidth,
+  onError,
+  fetchPriority = "auto",
+}: LazyImageProps): JSX.Element {
+  // Convert DimensionValue to number for width/height attributes
+  const getNumericValue = (value: DimensionValue): number | undefined => {
+    if (typeof value === "number") return value
+    if (typeof value === "string") {
+      if (value === "inherit") return undefined
+      const num = parseInt((value as string).replace("px", ""), 10)
+      return isNaN(num) ? undefined : num
+    }
+    return undefined
+  }
+  
+  const widthAttr = getNumericValue(width)
+  const heightAttr = getNumericValue(height)
+  
+  const cachedDims = imageCache.get(src)
+  const [actualDimensions, setActualDimensions] = useState<{ width?: number; height?: number; ratio?: number }>(
+    cachedDims || DEFAULT_DIMENSIONS
+  )
+  
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const imgElement = wrapperRef.current.querySelector("img") as HTMLImageElement | null
+      if (imgElement) {
+        imageRef.current = imgElement
+        if ((width === "inherit" || height === "inherit") && imgElement.complete && imgElement.naturalWidth && imgElement.naturalHeight) {
+          const ratio = imgElement.naturalWidth / imgElement.naturalHeight
+          setActualDimensions({
+            width: imgElement.naturalWidth,
+            height: imgElement.naturalHeight,
+            ratio,
+          })
+          imageCache.set(src, {
+            width: imgElement.naturalWidth,
+            height: imgElement.naturalHeight,
+            ratio,
+          })
+        }
+      }
+    }
+  }, [width, height, imageRef, src])
+  
+  const getSizes = (): string => {
+    if (typeof widthAttr === "number" && widthAttr > 0) {
+      if (widthAttr <= 640) return "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+      return "(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
+    }
+    return "(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
+  }
+
+  const renderWidth = widthAttr || actualDimensions.width || DEFAULT_WIDTH
+  const renderHeight = heightAttr || actualDimensions.height || DEFAULT_HEIGHT
+
+  return (
+    <div ref={wrapperRef} className={cn("editor-lazy-image-wrapper", className)}>
+      <Image
+        src={src}
+        alt={altText}
+        title={altText}
+        width={renderWidth}
+        height={renderHeight}
+        sizes={getSizes()}
+        quality={75}
+        unoptimized={true}
+        style={{
+          height: height === "inherit" ? "auto" : height,
+          width: width === "inherit" ? "100%" : width,
+        }}
+        onError={onError}
+        draggable={false}
+        priority={fetchPriority === "high"}
+        loading="eager"
+        decoding="async"
+        onLoad={(e) => {
+          const img = e.currentTarget
+          if (img) {
+            imageRef.current = img
+            const ratio = img.naturalWidth / img.naturalHeight
+            imageCache.set(src, {
+              width: img.naturalWidth,
+              height: img.naturalHeight,
+              ratio,
+            })
+            if (width === "inherit" || height === "inherit") {
+              setActualDimensions({
+                width: img.naturalWidth,
+                height: img.naturalHeight,
+              })
+            }
+          }
+        }}
+      />
+    </div>
+  )
+}

package/src/editor-x/editor.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  InitialConfigType,
+  LexicalComposer,
+} from "@lexical/react/LexicalComposer"
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"
+import { EditorState, SerializedEditorState } from "lexical"
+
+import { editorTheme } from "../themes/editor-theme"
+import { TooltipProvider } from "../ui/tooltip"
+
+import { cn } from "../lib/utils"
+import { logger } from "../lib/logger"
+import { useElementSize } from "../hooks/use-element-size"
+import { EditorContainerProvider } from "../context/editor-container-context"
+
+function createEditorConfig(nodes: InitialConfigType["nodes"]) {
+  return {
+    namespace: "Editor",
+    theme: editorTheme,
+    nodes,
+    onError: (error: Error) => {
+      if (
+        error?.message?.includes("TableObserver") &&
+        error?.message?.includes("Expected to find TableElement in DOM")
+      ) {
+        return
+      }
+      logger.error("[Editor] Error:", error)
+    },
+  } satisfies Omit<InitialConfigType, "editable" | "editorState">
+}
+
+export function Editor({
+  editorState,
+  editorSerializedState,
+  onChange,
+  onSerializedChange,
+  readOnly = false,
+}: {
+  editorState?: EditorState
+  editorSerializedState?: SerializedEditorState
+  onChange?: (editorState: EditorState) => void
+  onSerializedChange?: (editorSerializedState: SerializedEditorState) => void
+  readOnly?: boolean
+}) {
+  const { ref: editorRef, width: editorWidth } = useElementSize<HTMLDivElement>()
+  const editorMaxWidth = editorWidth || undefined
+
+  const [config, setConfig] = useState<{
+    nodes: InitialConfigType["nodes"]
+    Plugins: React.ComponentType<{ readOnly?: boolean }>
+  } | null>(null)
+
+  useEffect(() => {
+    Promise.all([
+      import("./nodes").then((m) => m.nodes),
+      import("./plugins").then((m) => ({ Plugins: m.Plugins })),
+    ]).then(([nodes, { Plugins }]) => setConfig({ nodes, Plugins }))
+  }, [])
+
+  if (!config) {
+    return (
+      <div
+        className={cn(
+          "editor-loading-container"
+        )}
+        id="editor-x"
+      >
+        <div className="editor-loading-text">Đang tải editor...</div>
+      </div>
+    )
+  }
+
+  const editorConfig = createEditorConfig(config.nodes)
+  const { Plugins } = config
+
+  return (
+    <div
+      ref={editorRef}
+      className={cn(
+        "editor-root-container lexical-editor-root",
+        !readOnly && "editor-root-container--shadow"
+      )}
+      id="editor-x"
+    >
+      <EditorContainerProvider value={{ maxWidth: editorMaxWidth }}>
+        <LexicalComposer
+          initialConfig={{
+            ...editorConfig,
+            editable: !readOnly,
+            ...(editorState ? { editorState } : {}),
+            ...(editorSerializedState
+              ? { editorState: JSON.stringify(editorSerializedState) }
+              : {}),
+          }}
+        >
+          <TooltipProvider>
+            <Plugins readOnly={readOnly} />
+
+            {!readOnly && (
+              <OnChangePlugin
+                ignoreSelectionChange={true}
+                onChange={(editorState) => {
+                  onChange?.(editorState)
+                  onSerializedChange?.(editorState.toJSON())
+                }}
+              />
+            )}
+          </TooltipProvider>
+        </LexicalComposer>
+      </EditorContainerProvider>
+    </div>
+  )
+}

package/src/editor-x/nodes.ts

@@ -0,0 +1,79 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code"
+import { HashtagNode } from "@lexical/hashtag"
+import { AutoLinkNode, LinkNode } from "@lexical/link"
+import { ListItemNode, ListNode, type ListType } from "@lexical/list"
+import { OverflowNode } from "@lexical/overflow"
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode"
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table"
+import {
+  Klass,
+  LexicalEditor,
+  LexicalNode,
+  LexicalNodeReplacement,
+  ParagraphNode,
+  TextNode,
+} from "lexical"
+
+import { AutocompleteNode } from "../nodes/autocomplete-node"
+import { TweetNode } from "../nodes/embeds/tweet-node"
+import { YouTubeNode } from "../nodes/embeds/youtube-node"
+import { EmojiNode } from "../nodes/emoji-node"
+import { ImageNode } from "../nodes/image-node"
+import { KeywordNode } from "../nodes/keyword-node"
+import { LayoutContainerNode } from "../nodes/layout-container-node"
+import { LayoutItemNode } from "../nodes/layout-item-node"
+import { ListWithColorNode } from "../nodes/list-with-color-node"
+import { MentionNode } from "../nodes/mention-node"
+
+/** Tạo ListWithColorNode dùng đúng class đã đăng ký trong editor (tránh type mismatch khi bundle trùng). */
+export function createListWithColorNodeFromRegistry(
+  editor: LexicalEditor,
+  listType: ListType,
+  start: number
+): InstanceType<typeof ListWithColorNode> {
+  const config = (editor as unknown as { _config?: { nodes?: Array<Klass<LexicalNode>> } })
+    ._config
+  const Klass = config?.nodes?.find(
+    (K) =>
+      typeof (K as { getType?: () => string }).getType === "function" &&
+      (K as { getType: () => string }).getType() === "listwithcolor"
+  ) as typeof ListWithColorNode | undefined
+  if (Klass) return new Klass(listType, start) as InstanceType<typeof ListWithColorNode>
+  return new ListWithColorNode(listType, start)
+}
+
+export const nodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> =
+  [
+    HeadingNode,
+    ParagraphNode,
+    TextNode,
+    QuoteNode,
+    {
+      replace: ListNode,
+      with: (node: ListNode) => {
+        return new ListWithColorNode(node.getListType(), node.getStart())
+      },
+    },
+    ListWithColorNode,
+    ListItemNode,
+    LinkNode,
+    OverflowNode,
+    HashtagNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    CodeNode,
+    CodeHighlightNode,
+    HorizontalRuleNode,
+    MentionNode,
+    ImageNode,
+    EmojiNode,
+    KeywordNode,
+    LayoutContainerNode,
+    LayoutItemNode,
+    AutoLinkNode,
+    TweetNode,
+    YouTubeNode,
+    AutocompleteNode,
+  ]