@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangph2146/lexical-editor",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Rich Text Editor library based on Lexical for React/Next.js",
   "license": "MIT",
   "type": "module",

package/src/components/lexical-editor.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react"
 import { Editor } from "../editor-x/editor"
 import type { SerializedEditorState } from "lexical"
 import { logger } from "../lib/logger"
+import { EditorUploadsProvider } from "../context/uploads-context"
 
 export interface LexicalEditorProps {
   value?: unknown
@@ -11,6 +12,7 @@ export interface LexicalEditorProps {
   readOnly?: boolean
   className?: string
   placeholder?: string
+  uploadsContext?: import("../context/uploads-context").EditorUploadsContextType
 }
 
 function isValidSerializedEditorState(value: unknown): value is SerializedEditorState {
@@ -31,6 +33,7 @@ export function LexicalEditor({
   readOnly = false,
   className,
   placeholder = "",
+  uploadsContext,
 }: LexicalEditorProps) {
   // Parse initial value as SerializedEditorState
   const [editorState, setEditorState] = useState<SerializedEditorState | undefined>(() => {
@@ -127,14 +130,24 @@ export function LexicalEditor({
     // }, 0)
   }
 
+  const editorContent = (
+    <Editor
+      editorSerializedState={editorState}
+      onSerializedChange={handleSerializedChange}
+      readOnly={readOnly}
+      placeholder={placeholder}
+    />
+  )
+
   return (
     <div className={className}>
-      <Editor
-        editorSerializedState={editorState}
-        onSerializedChange={handleSerializedChange}
-        readOnly={readOnly}
-        placeholder={placeholder}
-      />
+      {uploadsContext ? (
+        <EditorUploadsProvider value={uploadsContext}>
+          {editorContent}
+        </EditorUploadsProvider>
+      ) : (
+        editorContent
+      )}
     </div>
   )
 }

package/src/context/uploads-context.tsx

@@ -22,6 +22,7 @@ export interface FolderNode {
 export interface EditorUploadsContextType {
   isLoading: boolean
   folderTree?: FolderNode
+  onUploadFile?: (file: File) => Promise<{ url: string; error?: string }>
 }
 
 const EditorUploadsContext = createContext<EditorUploadsContextType | undefined>(undefined)

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

@@ -6,17 +6,21 @@ type Props = {
   placeholder?: string
   className?: string
   placeholderClassName?: string
-  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
+  /** Khi true (mặc định), thêm class nền `.editor-placeholder` (padding/vị trí mặc định). */
+  placeholderDefaults?: boolean
 }
 
 export function ContentEditable({
-  placeholder,
+  placeholder = "",
   className,
   placeholderClassName,
   placeholderDefaults = true,
 }: Props): JSX.Element {
   const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
 
+  const text = placeholder.trim()
+  const showLexicalPlaceholder = text.length > 0
+
   return (
     <LexicalContentEditable
       className={cn(
@@ -25,6 +29,18 @@ export function ContentEditable({
         className
       )}
       aria-label={"Editor nội dung"}
+      {...(showLexicalPlaceholder
+        ? {
+            "aria-placeholder": text,
+            placeholder: (
+              <div
+                className={cn(placeholderDefaults && "editor-placeholder", placeholderClassName)}
+              >
+                {text}
+              </div>
+            ),
+          }
+        : { placeholder: null })}
     />
   )
 }

package/src/editor-x/nodes.ts

@@ -24,6 +24,7 @@ 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 { DownloadLinkNode } from "../nodes/download-link-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). */
@@ -58,6 +59,7 @@ export const nodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> =
     ListWithColorNode,
     ListItemNode,
     LinkNode,
+    DownloadLinkNode,
     OverflowNode,
     HashtagNode,
     TableNode,

package/src/nodes/download-link-node.tsx

@@ -0,0 +1,118 @@
+import type { EditorConfig, LexicalNode, NodeKey } from "lexical"
+import type { LinkAttributes, SerializedLinkNode } from "@lexical/link"
+import { LinkNode } from "@lexical/link"
+
+// NOTE:
+// Lexical's `LinkNode` doesn't support the HTML `download` attribute.
+// This custom node adds `download` so file links can trigger browser download.
+
+export type SerializedDownloadLinkNode = SerializedLinkNode & {
+  download: string | null
+  type: "download-link"
+  version: 1
+}
+
+export class DownloadLinkNode extends LinkNode {
+  __download: string | null
+
+  static getType(): string {
+    return "download-link"
+  }
+
+  static clone(node: DownloadLinkNode): DownloadLinkNode {
+    return new DownloadLinkNode(
+      node.getURL(),
+      node.__download,
+      {
+        rel: node.getRel(),
+        target: node.getTarget(),
+        title: node.getTitle(),
+      },
+      node.__key,
+    )
+  }
+
+  constructor(
+    url?: string,
+    download: string | null = null,
+    attributes?: LinkAttributes,
+    key?: NodeKey
+  ) {
+    super(url, attributes, key)
+    this.__download = download
+  }
+
+  getDownload(): string | null {
+    return this.__download
+  }
+
+  setDownload(download: string | null): this {
+    const writable = this.getWritable()
+    writable.__download = download
+    return this
+  }
+
+  override createDOM(config: EditorConfig): HTMLAnchorElement | HTMLSpanElement {
+    const dom = super.createDOM(config)
+    this.applyDownloadDOM(dom)
+    return dom
+  }
+
+  override updateLinkDOM(
+    prevNode: this | null,
+    anchorElem: HTMLAnchorElement | HTMLSpanElement,
+    config: EditorConfig
+  ): void {
+    super.updateLinkDOM(prevNode, anchorElem, config)
+    this.applyDownloadDOM(anchorElem)
+  }
+
+  override exportJSON(): SerializedDownloadLinkNode {
+    return {
+      ...(super.exportJSON() as unknown as SerializedLinkNode),
+      type: DownloadLinkNode.getType() as "download-link",
+      version: 1,
+      download: this.__download,
+    } as SerializedDownloadLinkNode
+  }
+
+  static override importJSON(serializedNode: SerializedDownloadLinkNode): DownloadLinkNode {
+    const node = new DownloadLinkNode(
+      serializedNode.url,
+      serializedNode.download,
+      {
+        rel: serializedNode.rel ?? null,
+        target: serializedNode.target ?? null,
+        title: serializedNode.title ?? null,
+      },
+      (serializedNode as unknown as { key?: NodeKey }).key,
+    )
+    return node
+  }
+
+  private applyDownloadDOM(dom: HTMLAnchorElement | HTMLSpanElement): void {
+    // `download` attribute only applies to <a>.
+    if (dom instanceof HTMLAnchorElement) {
+      if (this.__download === null) {
+        dom.removeAttribute("download")
+      } else {
+        dom.setAttribute("download", this.__download)
+      }
+    }
+  }
+}
+
+export function $createDownloadLinkNode(
+  url?: string,
+  download: string | null = null,
+  attributes?: LinkAttributes
+): DownloadLinkNode {
+  return new DownloadLinkNode(url, download, attributes)
+}
+
+export function $isDownloadLinkNode(
+  node: LexicalNode | null | undefined
+): node is DownloadLinkNode {
+  return node instanceof DownloadLinkNode
+}
+