@thangph2146/lexical-editor 0.0.11 → 0.0.12

package/README.md

@@ -37,7 +37,7 @@ function MyEditor() {
     <LexicalEditor
       placeholder="Nhập nội dung tại đây..."
       onChange={handleChange}
-    />
+    />gioi-thieu:team-section
   );
 }
 ```
@@ -51,5 +51,6 @@ MIT
 ```bash
 pnpm build
 npm whoami
+npm login
 npm publish --access public
 ```

package/dist/editor-x/editor.cjs

@@ -20,9 +20,9 @@ var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
 var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
 var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
 var list = require('@lexical/list');
+var link = require('@lexical/link');
 var code = require('@lexical/code');
 var hashtag = require('@lexical/hashtag');
-var link = require('@lexical/link');
 var overflow = require('@lexical/overflow');
 var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
 var richText = require('@lexical/rich-text');
@@ -5095,12 +5095,14 @@ var init_image_placeholder = __esm({
   }
 });
 function ContentEditable({
-  placeholder,
+  placeholder = "",
   className,
   placeholderClassName,
   placeholderDefaults = true
 }) {
   const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review");
+  const text = placeholder.trim();
+  const showLexicalPlaceholder = text.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     LexicalContentEditable.ContentEditable,
     {
@@ -5109,7 +5111,17 @@ function ContentEditable({
         !isReadOnlyOrReview && "min-h-72 px-8 py-4",
         className
       ),
-      "aria-label": "Editor n\u1ED9i dung"
+      "aria-label": "Editor n\u1ED9i dung",
+      ...showLexicalPlaceholder ? {
+        "aria-placeholder": text,
+        placeholder: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(placeholderDefaults && "editor-placeholder", placeholderClassName),
+            children: text
+          }
+        )
+      } : { placeholder: null }
     }
   );
 }
@@ -6245,6 +6257,86 @@ var init_list_with_color_node = __esm({
     };
   }
 });
+function $createDownloadLinkNode(url, download = null, attributes) {
+  return new DownloadLinkNode(url, download, attributes);
+}
+function $isDownloadLinkNode(node) {
+  return node instanceof DownloadLinkNode;
+}
+var DownloadLinkNode;
+var init_download_link_node = __esm({
+  "src/nodes/download-link-node.tsx"() {
+    DownloadLinkNode = class _DownloadLinkNode extends link.LinkNode {
+      __download;
+      static getType() {
+        return "download-link";
+      }
+      static clone(node) {
+        return new _DownloadLinkNode(
+          node.getURL(),
+          node.__download,
+          {
+            rel: node.getRel(),
+            target: node.getTarget(),
+            title: node.getTitle()
+          },
+          node.__key
+        );
+      }
+      constructor(url, download = null, attributes, key) {
+        super(url, attributes, key);
+        this.__download = download;
+      }
+      getDownload() {
+        return this.__download;
+      }
+      setDownload(download) {
+        const writable = this.getWritable();
+        writable.__download = download;
+        return this;
+      }
+      createDOM(config) {
+        const dom = super.createDOM(config);
+        this.applyDownloadDOM(dom);
+        return dom;
+      }
+      updateLinkDOM(prevNode, anchorElem, config) {
+        super.updateLinkDOM(prevNode, anchorElem, config);
+        this.applyDownloadDOM(anchorElem);
+      }
+      exportJSON() {
+        return {
+          ...super.exportJSON(),
+          type: _DownloadLinkNode.getType(),
+          version: 1,
+          download: this.__download
+        };
+      }
+      static importJSON(serializedNode) {
+        const node = new _DownloadLinkNode(
+          serializedNode.url,
+          serializedNode.download,
+          {
+            rel: serializedNode.rel ?? null,
+            target: serializedNode.target ?? null,
+            title: serializedNode.title ?? null
+          },
+          serializedNode.key
+        );
+        return node;
+      }
+      applyDownloadDOM(dom) {
+        if (dom instanceof HTMLAnchorElement) {
+          if (this.__download === null) {
+            dom.removeAttribute("download");
+          } else {
+            dom.setAttribute("download", this.__download);
+          }
+        }
+      }
+    };
+  }
+});
 function $convertMentionElement(domNode) {
   const textContent = domNode.textContent;
   if (textContent !== null) {
@@ -6357,6 +6449,7 @@ var init_nodes = __esm({
     init_layout_container_node();
     init_layout_item_node();
     init_list_with_color_node();
+    init_download_link_node();
     init_mention_node();
     nodes = [
       richText.HeadingNode,
@@ -6372,6 +6465,7 @@ var init_nodes = __esm({
       ListWithColorNode,
       list.ListItemNode,
       link.LinkNode,
+      DownloadLinkNode,
       overflow.OverflowNode,
       hashtag.HashtagNode,
       table.TableNode,
@@ -28024,6 +28118,44 @@ var init_url = __esm({
     );
   }
 });
+function shouldTreatUrlAsDownload(url) {
+  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;
+  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) {
+  try {
+    const path = url.split("?")[0] ?? "";
+    const last = path.split("/").filter(Boolean).pop();
+    return last ? decodeURIComponent(last) : "download";
+  } catch {
+    return "download";
+  }
+}
+function getCookieValue(name) {
+  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) {
+  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]}`;
+  return "about:blank";
+}
 function FloatingLinkEditor({
   editor,
   isLink,
@@ -28037,6 +28169,9 @@ function FloatingLinkEditor({
   const [linkUrl, setLinkUrl] = React21.useState("");
   const [editedLinkUrl, setEditedLinkUrl] = React21.useState("https://");
   const [lastSelection, setLastSelection] = React21.useState(null);
+  const [isUploadingFile, setIsUploadingFile] = React21.useState(false);
+  const fileInputRef = React21.useRef(null);
+  const { onUploadFile } = useEditorUploads();
   const $updateLinkEditor = React21.useCallback(() => {
     const selection = lexical.$getSelection();
     let linkNode = null;
@@ -28230,9 +28365,11 @@ function FloatingLinkEditor({
       setIsLinkEditMode(false);
     }
   };
-  const handleLinkSubmission = () => {
-    const url = sanitizeUrl(editedLinkUrl);
-    if (url && url !== "https://" && url !== "http://") {
+  const handleLinkSubmission = (submittedUrl, originalFileName) => {
+    const rawUrl = typeof submittedUrl === "string" ? submittedUrl : editedLinkUrl;
+    const url = sanitizeUrl(rawUrl);
+    const downloadFileName = originalFileName || (shouldTreatUrlAsDownload(url) ? inferDownloadFileName(url) : null);
+    if (url && url !== "about:blank" && url !== "https://" && url !== "http://") {
       editor.update(() => {
         let selection = lexical.$getSelection();
         if (!selection && lastSelection !== null) {
@@ -28257,8 +28394,11 @@ function FloatingLinkEditor({
               const existingLinkNode = utils.$findMatchingParent(node, link.$isLinkNode) || (link.$isLinkNode(node.getParent()) ? node.getParent() : null);
               if (existingLinkNode) {
                 existingLinkNode.setURL(url);
+                if (downloadFileName && $isDownloadLinkNode(existingLinkNode)) {
+                  existingLinkNode.setDownload(downloadFileName);
+                }
               } else {
-                const linkNode = link.$createLinkNode(url);
+                const linkNode = downloadFileName ? $createDownloadLinkNode(url, downloadFileName) : link.$createLinkNode(url);
                 utils.$wrapNodeInElement(node, () => linkNode);
               }
             }
@@ -28267,25 +28407,114 @@ function FloatingLinkEditor({
           editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, url);
           const parent = getSelectedNode(selection).getParent();
           if (link.$isAutoLinkNode(parent)) {
-            const linkNode = link.$createLinkNode(parent.getURL(), {
+            const linkNode = downloadFileName ? $createDownloadLinkNode(parent.getURL(), downloadFileName, {
+              rel: parent.__rel,
+              target: parent.__target,
+              title: parent.__title
+            }) : link.$createLinkNode(parent.getURL(), {
               rel: parent.__rel,
               target: parent.__target,
               title: parent.__title
             });
             parent.replace(linkNode, true);
           }
+          if (downloadFileName) {
+            const selectedNode = getSelectedNode(selection);
+            const linkNode = utils.$findMatchingParent(selectedNode, link.$isLinkNode) || (link.$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) {
+                downloadLinkNode.append(lexical.$createTextNode(targetText));
+              } else {
+                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) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      setIsUploadingFile(true);
+      let uploadedUrl = void 0;
+      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 = {};
+        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 : void 0,
+          body: formData
+        });
+        if (!res.ok) {
+          throw new Error(`Upload failed: HTTP ${res.status}`);
+        }
+        const payload = await res.json();
+        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 /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: editorRef,
       className: "editor-floating-link-editor",
-      children: isLinkEditMode || isLink ? isLinkEditMode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-floating-link-editor__input-container", children: [
+      children: isLinkEditMode || isLink ? isLinkEditMode ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-floating-link-editor__input-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "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"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
@@ -28296,6 +28525,18 @@ function FloatingLinkEditor({
             className: "editor-flex-grow"
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "ghost",
+            onClick: handlePickLocalFile,
+            className: "editor-shrink-0",
+            disabled: isUploadingFile,
+            title: isUploadingFile ? "Uploading..." : "Upload file t\u1EEB thi\u1EBFt b\u1ECB",
+            children: isUploadingFile ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "editor-icon-sm animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "editor-icon-sm" })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -28313,22 +28554,39 @@ function FloatingLinkEditor({
           Button,
           {
             size: "icon",
-            onClick: handleLinkSubmission,
+            onClick: () => handleLinkSubmission(),
             className: "editor-shrink-0",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "editor-icon-sm" })
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-floating-link-editor__view-container", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: sanitizeUrl(linkUrl),
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "editor-floating-link-editor__link",
-            children: /* @__PURE__ */ jsxRuntime.jsx(TypographyPSmall, { className: "editor-truncate", children: linkUrl })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-floating-link-editor__view-container", children: [
+        (() => {
+          let href = sanitizeUrl(linkUrl);
+          const jsDownloadMatch = typeof linkUrl === "string" ? linkUrl.match(/^javascript:download\(\s*(['"])(.*?)\1\s*\)\s*$/i) : null;
+          let downloadAttr;
+          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 /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href,
+              download: downloadAttr,
+              target: isDownload ? "_self" : "_blank",
+              rel: isDownload ? void 0 : "noopener noreferrer",
+              className: "editor-floating-link-editor__link",
+              children: /* @__PURE__ */ jsxRuntime.jsx(TypographyPSmall, { className: "editor-truncate", children: text })
+            }
+          );
+        })(),
         /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 0, className: "editor-shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -28642,6 +28900,8 @@ var init_floating_link_editor_plugin = __esm({
     init_flex();
     init_typography();
     init_image_node();
+    init_download_link_node();
+    init_uploads_context();
   }
 });