@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/src/plugins/floating-link-editor-plugin.tsx

@@ -17,6 +17,7 @@ import {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
 import { $findMatchingParent, $wrapNodeInElement, mergeRegister } from "@lexical/utils"
 import {
+  $createTextNode,
   $getSelection,
   $isLineBreakNode,
   $isNodeSelection,
@@ -31,7 +32,7 @@ import {
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
 } from "lexical"
-import { Check, Pencil, Trash, X } from "lucide-react"
+import { Check, Pencil, Trash, X, Upload, Loader2 } from "lucide-react"
 import { createPortal } from "react-dom"
 
 import { getSelectedNode } from "../utils/get-selected-node"
@@ -42,6 +43,72 @@ import { Input } from "../ui/input"
 import { Flex } from "../ui/flex"
 import { TypographyPSmall } from "../ui/typography"
 import { $isImageNode } from "../nodes/image-node"
+import { $createDownloadLinkNode, $isDownloadLinkNode } from "../nodes/download-link-node"
+import { useEditorUploads } from "../context/uploads-context"
+
+function shouldTreatUrlAsDownload(url: string): boolean {
+  // Handle absolute file URLs and internal uploads.
+  if (typeof url !== "string") return false
+  const u = url.toLowerCase()
+  if (
+    u.includes("/api/uploads/") ||
+    u.includes("/uploads/") ||
+    u.includes("/api/admin/uploads/") ||
+    u.includes("/admin/uploads/")
+  )
+    return true
+
+  // Common downloadable file extensions.
+  return /\.(pdf|doc|docx|xls|xlsx|csv|zip|rar|7z|txt|rtf|png|jpg|jpeg|gif|webp|mp3|wav|mp4|mov|avi)(\?.*)?$/.test(
+    u
+  )
+}
+
+function inferDownloadFileName(url: string): string {
+  try {
+    const path = url.split("?")[0] ?? ""
+    const last = path.split("/").filter(Boolean).pop()
+    return last ? decodeURIComponent(last) : "download"
+  } catch {
+    return "download"
+  }
+}
+
+function getCookieValue(name: string): string | null {
+  if (typeof document === "undefined") return null
+  const row = document.cookie
+    .split("; ")
+    .find((item) => item.startsWith(`${name}=`))
+  if (!row) return null
+  return row.split("=").slice(1).join("=") || null
+}
+
+
+
+function buildHrefFromJsDownloadArg(jsArg: string): string {
+  // jsArg is the inner string from javascript:download("...").
+  // It might be a relativePath like `files/2026/04/02/foo.pdf`, or an absolute URL.
+  const firstSegment = typeof window !== "undefined" ? window.location.pathname.split("/").filter(Boolean)[0] ?? "" : ""
+  const serveBase =
+    firstSegment === "admin"
+      ? "/api/admin/uploads/serve"
+      : "/api/uploads/serve"
+
+  const arg = jsArg.trim()
+  if (!arg) return "about:blank"
+  if (/^https?:\/\//i.test(arg)) return arg
+  if (arg.startsWith("/api/")) return arg
+
+  if (arg.startsWith("images/") || arg.startsWith("files/")) {
+    return `${serveBase}/${arg}`
+  }
+
+  const m = arg.match(/(images|files)\/.+/i)
+  if (m?.[0]) return `${serveBase}/${m[0]}`
+
+  // Can't reliably map "filename-only" to a full relativePath.
+  return "about:blank"
+}
 
 function FloatingLinkEditor({
   editor,
@@ -63,6 +130,9 @@ function FloatingLinkEditor({
   const [linkUrl, setLinkUrl] = useState("")
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://")
   const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null)
+  const [isUploadingFile, setIsUploadingFile] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { onUploadFile } = useEditorUploads()
 
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection()
@@ -122,8 +192,8 @@ function FloatingLinkEditor({
 
     // Check if we have a valid selection (with or without link)
     const hasValidSelection = selection !== null
-    const hasValidNativeSelection = 
-      nativeSelection !== null && 
+    const hasValidNativeSelection =
+      nativeSelection !== null &&
       rootElement !== null &&
       (nativeSelection.anchorNode && rootElement.contains(nativeSelection.anchorNode))
 
@@ -147,12 +217,12 @@ function FloatingLinkEditor({
     if (shouldShowEditor) {
       // For node selection (e.g., image), try to get the DOM element
       let domRect: DOMRect | undefined
-      
+
       if ($isNodeSelection(selection) && selectedNode) {
         // Try to get DOM element using node key
         const nodeKey = selectedNode.getKey()
         const nodeElement = editor.getElementByKey(nodeKey)
-        
+
         if (nodeElement) {
           // For image nodes wrapped in links, find the link element
           if ($isImageNode(selectedNode) && linkNode) {
@@ -168,7 +238,7 @@ function FloatingLinkEditor({
           }
         }
       }
-      
+
       // Fallback to native selection if we don't have a specific DOM rect
       if (!domRect && nativeSelection) {
         // Try to find link element in DOM if we have a link node
@@ -180,7 +250,7 @@ function FloatingLinkEditor({
           } else if (nativeSelection.focusNode.parentElement) {
             focusElement = nativeSelection.focusNode.parentElement
           }
-          
+
           if (focusElement) {
             const linkElement = focusElement.closest("a") || focusElement.parentElement?.closest("a")
             if (linkElement) {
@@ -322,13 +392,16 @@ function FloatingLinkEditor({
     }
   }
 
-  const handleLinkSubmission = () => {
-    const url = sanitizeUrl(editedLinkUrl)
-    if (url && url !== "https://" && url !== "http://") {
+  const handleLinkSubmission = (submittedUrl?: string, originalFileName?: string) => {
+    const rawUrl = typeof submittedUrl === "string" ? submittedUrl : editedLinkUrl
+    const url = sanitizeUrl(rawUrl)
+    const downloadFileName = originalFileName || (shouldTreatUrlAsDownload(url) ? inferDownloadFileName(url) : null)
+    // Block unsafe protocols (e.g. `javascript:`). `sanitizeUrl()` returns `about:blank` for unsupported schemes.
+    if (url && url !== "about:blank" && url !== "https://" && url !== "http://") {
       editor.update(() => {
         // Try to get current selection first
         let selection = $getSelection()
-        
+
         // If no current selection, try to restore from lastSelection
         if (!selection && lastSelection !== null) {
           // Clone the selection to avoid frozen object error
@@ -342,29 +415,34 @@ function FloatingLinkEditor({
             selection = $getSelection()
           }
         }
-        
+
         if (!selection) {
           return
         }
-        
+
         // Handle node selection (e.g., image nodes)
         if ($isNodeSelection(selection)) {
           const nodes = selection.getNodes()
           if (nodes.length > 0) {
             const node = nodes[0]
-            
+
             // If it's an image node
             if ($isImageNode(node)) {
               // Check if already wrapped in a link
-              const existingLinkNode = $findMatchingParent(node, $isLinkNode) || 
+              const existingLinkNode = $findMatchingParent(node, $isLinkNode) ||
                 ($isLinkNode(node.getParent()) ? node.getParent() : null)
-              
+
               if (existingLinkNode) {
                 // Update existing link
                 existingLinkNode.setURL(url)
+                if (downloadFileName && $isDownloadLinkNode(existingLinkNode)) {
+                  existingLinkNode.setDownload(downloadFileName)
+                }
               } else {
                 // Wrap image in link using wrapNodeInElement (safe for all cases including root)
-                const linkNode = $createLinkNode(url)
+                const linkNode = downloadFileName
+                  ? $createDownloadLinkNode(url, downloadFileName)
+                  : $createLinkNode(url)
                 $wrapNodeInElement(node, () => linkNode)
               }
             }
@@ -372,23 +450,131 @@ function FloatingLinkEditor({
         }
         // Handle range selection
         else if ($isRangeSelection(selection)) {
-          // Use default TOGGLE_LINK_COMMAND for range selection
+          // Use default TOGGLE_LINK_COMMAND for range selection, then post-process to add `download`.
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, url)
           const parent = getSelectedNode(selection).getParent()
           if ($isAutoLinkNode(parent)) {
-            const linkNode = $createLinkNode(parent.getURL(), {
-              rel: parent.__rel,
-              target: parent.__target,
-              title: parent.__title,
-            })
+            const linkNode = downloadFileName
+              ? $createDownloadLinkNode(parent.getURL(), downloadFileName, {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              })
+              : $createLinkNode(parent.getURL(), {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              })
             parent.replace(linkNode, true)
           }
+
+          if (downloadFileName) {
+            const selectedNode = getSelectedNode(selection)
+            // After TOGGLE_LINK_COMMAND, selection's node should be wrapped in a link node.
+            const linkNode = $findMatchingParent(selectedNode, $isLinkNode) || ($isLinkNode(selectedNode) ? selectedNode : null)
+            if (linkNode) {
+              const currentText = linkNode.getTextContent()
+              const targetText = originalFileName || downloadFileName
+              
+              const downloadLinkNode = $createDownloadLinkNode(url, downloadFileName, {
+                rel: linkNode.getRel(),
+                target: linkNode.getTarget(),
+                title: linkNode.getTitle(),
+              })
+              
+              if (currentText === url && targetText) {
+                // If the user didn't have any text selected, Lexical's TOGGLE_LINK inserted the raw URL.
+                // Replace that text with our targetFileName.
+                downloadLinkNode.append($createTextNode(targetText))
+              } else {
+                // Otherwise keep the children (user's selection)
+                const children = linkNode.getChildren()
+                if (children.length > 0) {
+                  downloadLinkNode.append(...children)
+                }
+              }
+
+              linkNode.replace(downloadLinkNode)
+            }
+          }
         }
       })
       setEditedLinkUrl("https://")
       setIsLinkEditMode(false)
     }
   }
+
+  const handlePickLocalFile = () => {
+    if (isUploadingFile) return
+    fileInputRef.current?.click()
+  }
+
+  const handleUploadLocalFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    try {
+      setIsUploadingFile(true)
+      let uploadedUrl: string | undefined = undefined
+
+      if (onUploadFile) {
+        const result = await onUploadFile(file)
+        if (result.error) throw new Error(result.error)
+        uploadedUrl = result.url
+      } else {
+        const formData = new FormData()
+        formData.append("file", file)
+
+        const firstSegment = typeof window !== "undefined" ? window.location.pathname.split("/").filter(Boolean)[0] ?? "" : ""
+        const pathPart = firstSegment === "admin" ? "/admin/uploads" : "/uploads"
+        const endpoint = firstSegment === "admin" ? `/admin/api${pathPart}` : `/api${pathPart}`
+
+        const userId = getCookieValue("app_user_id")
+        const authToken = getCookieValue("auth-token")
+        const headers: Record<string, string> = {}
+        if (userId) headers["X-User-Id"] = userId
+        if (authToken) headers["Authorization"] = `Bearer ${authToken}`
+
+        const res = await fetch(endpoint, {
+          method: "POST",
+          credentials: "include",
+          headers: Object.keys(headers).length > 0 ? headers : undefined,
+          body: formData,
+        })
+
+        if (!res.ok) {
+          throw new Error(`Upload failed: HTTP ${res.status}`)
+        }
+
+        const payload = (await res.json()) as {
+          success?: boolean
+          data?: { url?: string }
+          message?: string
+          error?: string
+        }
+
+        uploadedUrl = payload?.data?.url
+        if (!payload?.success || !uploadedUrl) {
+          throw new Error(payload?.message || payload?.error || "Upload failed")
+        }
+      }
+
+      if (uploadedUrl) {
+        setEditedLinkUrl(uploadedUrl)
+        handleLinkSubmission(uploadedUrl, file.name)
+      }
+    } catch (error) {
+      console.error("[FloatingLinkEditor] Upload local file failed:", error)
+    } finally {
+      setIsUploadingFile(false)
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    }
+  }
+
   return (
     <div
       ref={editorRef}
@@ -396,43 +582,104 @@ function FloatingLinkEditor({
     >
       {isLinkEditMode || isLink ? (
         isLinkEditMode ? (
-          <div className="editor-floating-link-editor__input-container">
-            <Input
-              ref={inputRef}
-              value={editedLinkUrl}
-              onChange={(event) => setEditedLinkUrl(event.target.value)}
-              onKeyDown={monitorInputInteraction}
-              className="editor-flex-grow"
-            />
-            <Button
-              size="icon"
-              variant="ghost"
-              onClick={() => {
-                setIsLinkEditMode(false)
-                setIsLink(false)
-              }}
-              className="editor-shrink-0"
-            >
-              <X className="editor-icon-sm" />
-            </Button>
-            <Button
-              size="icon"
-              onClick={handleLinkSubmission}
-              className="editor-shrink-0"
-            >
-              <Check className="editor-icon-sm" />
-            </Button>
-          </div>
+          <>
+            <div className="editor-floating-link-editor__input-container">
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                onChange={handleUploadLocalFile}
+                accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.rtf,.txt,.zip,.rar,.7z,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.webp,.svg,.mp3,.wav,.mp4,.mov,.avi,.webm"
+              />
+              <Input
+                ref={inputRef}
+                value={editedLinkUrl}
+                onChange={(event) => setEditedLinkUrl(event.target.value)}
+                onKeyDown={monitorInputInteraction}
+                className="editor-flex-grow"
+              />
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={handlePickLocalFile}
+                className="editor-shrink-0"
+                disabled={isUploadingFile}
+                title={isUploadingFile ? "Uploading..." : "Upload file từ thiết bị"}
+              >
+                {isUploadingFile ? (
+                  <Loader2 className="editor-icon-sm animate-spin" />
+                ) : (
+                  <Upload className="editor-icon-sm" />
+                )}
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => {
+                  setIsLinkEditMode(false)
+                  setIsLink(false)
+                }}
+                className="editor-shrink-0"
+              >
+                <X className="editor-icon-sm" />
+              </Button>
+              <Button
+                size="icon"
+                onClick={() => handleLinkSubmission()}
+                className="editor-shrink-0"
+              >
+                <Check className="editor-icon-sm" />
+              </Button>
+            </div>
+          </>
         ) : (
           <div className="editor-floating-link-editor__view-container">
-            <a
-              href={sanitizeUrl(linkUrl)}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="editor-floating-link-editor__link"
-            >
-              <TypographyPSmall className="editor-truncate">{linkUrl}</TypographyPSmall>
-            </a>
+            {/**
+             * UX: show sanitized/derived text instead of raw input (prevents showing `javascript:...`).
+             * `sanitizeUrl()` may return `about:blank` for unsupported protocols.
+             */}
+
+            {(() => {
+              let href = sanitizeUrl(linkUrl)
+              const jsDownloadMatch =
+                typeof linkUrl === "string"
+                  ? linkUrl.match(/^javascript:download\(\s*(['"])(.*?)\1\s*\)\s*$/i)
+                  : null
+
+              let downloadAttr: string | undefined
+              if (jsDownloadMatch) {
+                const jsArg = jsDownloadMatch[2] ?? ""
+                href = buildHrefFromJsDownloadArg(jsArg)
+                if (href !== "about:blank") {
+                  downloadAttr = inferDownloadFileName(href)
+                }
+              } else if (shouldTreatUrlAsDownload(href)) {
+                downloadAttr = inferDownloadFileName(href)
+              }
+
+              const isDownload = typeof downloadAttr === "string" && downloadAttr.length > 0
+              const text =
+                jsDownloadMatch
+                  ? "Download"
+                  : shouldTreatUrlAsDownload(href)
+                    ? inferDownloadFileName(href)
+                    : href === "about:blank"
+                      ? "Invalid URL"
+                      : linkUrl
+
+              return (
+                <a
+                  href={href}
+                  download={downloadAttr}
+                  // `download` hoạt động tốt hơn nếu không mở tab mới
+                  target={isDownload ? "_self" : "_blank"}
+                  rel={isDownload ? undefined : "noopener noreferrer"}
+                  className="editor-floating-link-editor__link"
+                >
+                  <TypographyPSmall className="editor-truncate">{text}</TypographyPSmall>
+                </a>
+              )
+            })()}
             <Flex gap={0} className="editor-shrink-0">
               <Button
                 size="icon"
@@ -451,12 +698,12 @@ function FloatingLinkEditor({
                   editor.update(() => {
                     const selection = $getSelection()
                     // Handle node selection (e.g., image nodes)
-                  if ($isNodeSelection(selection)) {
-                    const nodes = selection.getNodes()
-                    if (nodes.length > 0) {
-                      const node = nodes[0]
+                    if ($isNodeSelection(selection)) {
+                      const nodes = selection.getNodes()
+                      if (nodes.length > 0) {
+                        const node = nodes[0]
                         if ($isImageNode(node)) {
-                          const linkNode = $findMatchingParent(node, $isLinkNode) || 
+                          const linkNode = $findMatchingParent(node, $isLinkNode) ||
                             ($isLinkNode(node.getParent()) ? node.getParent() : null)
                           if (linkNode) {
                             // Remove link by unwrapping - insert children into parent and remove link
@@ -470,16 +717,16 @@ function FloatingLinkEditor({
                             }
                           }
                         }
+                      }
+                    } else {
+                      // Use default TOGGLE_LINK_COMMAND for range selection
+                      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
                     }
-                  } else {
-                    // Use default TOGGLE_LINK_COMMAND for range selection
-                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-                  }
-                })
-              }}
-            >
-              <Trash className="editor-icon-sm" />
-            </Button>
+                  })
+                }}
+              >
+                <Trash className="editor-icon-sm" />
+              </Button>
             </Flex>
           </div>
         )
@@ -573,19 +820,19 @@ function useFloatingLinkEditorToolbar(
         TOGGLE_LINK_COMMAND,
         (url: string | null) => {
           const selection = $getSelection()
-          
+
           // Handle node selection (e.g., image nodes)
           if ($isNodeSelection(selection)) {
             const nodes = selection.getNodes()
             if (nodes.length > 0) {
               const node = nodes[0]
-              
+
               if ($isImageNode(node)) {
                 if (url) {
                   // Create or update link
-                  const existingLinkNode = $findMatchingParent(node, $isLinkNode) || 
+                  const existingLinkNode = $findMatchingParent(node, $isLinkNode) ||
                     ($isLinkNode(node.getParent()) ? node.getParent() : null)
-                  
+
                   if (existingLinkNode) {
                     // Update existing link
                     existingLinkNode.setURL(url)
@@ -596,7 +843,7 @@ function useFloatingLinkEditorToolbar(
                   }
                 } else {
                   // Remove link
-                  const linkNode = $findMatchingParent(node, $isLinkNode) || 
+                  const linkNode = $findMatchingParent(node, $isLinkNode) ||
                     ($isLinkNode(node.getParent()) ? node.getParent() : null)
                   if (linkNode) {
                     // Remove link by unwrapping - insert children into parent and remove link
@@ -614,7 +861,7 @@ function useFloatingLinkEditorToolbar(
               }
             }
           }
-          
+
           // Let default handler process range selection
           return false
         },
@@ -642,7 +889,7 @@ function useFloatingLinkEditorToolbar(
               if (nodes.length > 0) {
                 const node = nodes[0]
                 if ($isImageNode(node)) {
-                  const linkNode = $findMatchingParent(node, $isLinkNode) || 
+                  const linkNode = $findMatchingParent(node, $isLinkNode) ||
                     ($isLinkNode(node.getParent()) ? node.getParent() : null)
                   if (linkNode) {
                     // Delay to ensure DOM is updated
@@ -664,10 +911,10 @@ function useFloatingLinkEditorToolbar(
         CLICK_COMMAND,
         (payload) => {
           let shouldReturnTrue = false
-          
+
           editor.getEditorState().read(() => {
             const selection = $getSelection()
-            
+
             // Check if we clicked on an image node (with or without link)
             let hasImageNode = false
             if ($isNodeSelection(selection)) {
@@ -679,7 +926,7 @@ function useFloatingLinkEditorToolbar(
                 }
               }
             }
-            
+
             // Handle Ctrl/Cmd + click to open link
             if (payload.metaKey || payload.ctrlKey) {
               if ($isRangeSelection(selection)) {
@@ -705,15 +952,15 @@ function useFloatingLinkEditorToolbar(
                     linkNode = node
                   } else {
                     if (node) {
-                    linkNode = $findMatchingParent(node, $isLinkNode)
-                    if (!linkNode && $isImageNode(node)) {
-                      const parent = node.getParent()
-                      if ($isLinkNode(parent)) {
-                        linkNode = parent
+                      linkNode = $findMatchingParent(node, $isLinkNode)
+                      if (!linkNode && $isImageNode(node)) {
+                        const parent = node.getParent()
+                        if ($isLinkNode(parent)) {
+                          linkNode = parent
+                        }
                       }
                     }
                   }
-                  }
                   if (linkNode) {
                     const url = linkNode.getURL()
                     if (url && validateUrl(url)) {
@@ -725,7 +972,7 @@ function useFloatingLinkEditorToolbar(
                 }
               }
             }
-            
+
             // If we clicked on an image (with or without link), trigger toolbar update
             if (hasImageNode) {
               // Use requestAnimationFrame to ensure selection is updated
@@ -736,11 +983,11 @@ function useFloatingLinkEditorToolbar(
               })
             }
           })
-          
+
           if (shouldReturnTrue) {
             return true
           }
-          
+
           // Trigger toolbar update on click to ensure floating editor shows
           setTimeout(() => {
             editor.getEditorState().read(() => {

package/src/themes/core/_tables.scss

@@ -6,7 +6,6 @@
   .editor-table {
     border-collapse: collapse;
     border-spacing: 0;
-    width: 100%; 
     table-layout: fixed; 
     margin: $editor-table-margin-vertical 0;
     border-radius: $editor-border-radius;