@thangph2146/lexical-editor 0.0.11 → 0.0.13

package/dist/editor-x/editor.js

@@ -7,7 +7,7 @@ import { mergeRegister, IS_APPLE, $findMatchingParent, $getNearestNodeOfType, $g
 import { $getNodeByKey, FORMAT_ELEMENT_COMMAND, $isNodeSelection, $getRoot, $getSelection, $setSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND, $isRootOrShadowRoot, FORMAT_TEXT_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, $isTextNode, $createParagraphNode, $isElementNode, COMMAND_PRIORITY_EDITOR, $getNearestNodeFromDOMNode, $insertNodes, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DROP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, FOCUS_COMMAND, KEY_TAB_COMMAND, CUT_COMMAND, COPY_COMMAND, PASTE_COMMAND, $isDecoratorNode, $createTextNode, INDENT_CONTENT_COMMAND, CLEAR_HISTORY_COMMAND, CLEAR_EDITOR_COMMAND, ParagraphNode, TextNode, OUTDENT_CONTENT_COMMAND, $applyNodeReplacement, $createRangeSelection, $isParagraphNode, DecoratorNode, createEditor, RootNode, ElementNode, createCommand, HISTORY_MERGE_TAG, $isLineBreakNode, isHTMLElement, $addUpdateTag } from 'lexical';
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { $isDecoratorBlockNode, DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { UndoIcon, RedoIcon, PlusIcon, ScissorsIcon, ImageIcon, TableIcon, Columns3Icon, TypeIcon, Minus, Plus, SubscriptIcon, SuperscriptIcon, LinkIcon, EraserIcon, BaselineIcon, PaintBucketIcon, IndentDecreaseIcon, IndentIncreaseIcon, CircleUserRoundIcon, GripVerticalIcon, TextIcon, ListTodoIcon, ListOrderedIcon, ListIcon, QuoteIcon, CodeIcon, MinusIcon, Combine, SplitSquareVertical, Columns3, Rows3, LayoutGrid, Palette, Hash, Link2Off, Scissors, Copy, Clipboard, ClipboardType, Trash2, SendIcon, UploadIcon, DownloadIcon, FileTextIcon, LockIcon, UnlockIcon, Trash2Icon, NotebookPenIcon, Loader2, PipetteIcon, Heading3Icon, Heading2Icon, Heading1Icon, AlignJustifyIcon, AlignRightIcon, AlignCenterIcon, AlignLeftIcon, YoutubeIcon, TwitterIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ChevronRight, Folder, CircleCheckIcon, CopyIcon, X, Check, Pencil, Trash, MicIcon, ListPlusIcon, ListMinusIcon, CaseSensitiveIcon, AlignLeft, AlignCenter, AlignRight, Minimize2, Maximize2, ImageMinus, ImagePlus } from 'lucide-react';
+import { UndoIcon, RedoIcon, PlusIcon, ScissorsIcon, ImageIcon, TableIcon, Columns3Icon, TypeIcon, Minus, Plus, SubscriptIcon, SuperscriptIcon, LinkIcon, EraserIcon, BaselineIcon, PaintBucketIcon, IndentDecreaseIcon, IndentIncreaseIcon, CircleUserRoundIcon, GripVerticalIcon, TextIcon, ListTodoIcon, ListOrderedIcon, ListIcon, QuoteIcon, CodeIcon, MinusIcon, Combine, SplitSquareVertical, Columns3, Rows3, LayoutGrid, Palette, Hash, Link2Off, Scissors, Copy, Clipboard, ClipboardType, Trash2, SendIcon, UploadIcon, DownloadIcon, FileTextIcon, LockIcon, UnlockIcon, Trash2Icon, NotebookPenIcon, Loader2, PipetteIcon, Heading3Icon, Heading2Icon, Heading1Icon, AlignJustifyIcon, AlignRightIcon, AlignCenterIcon, AlignLeftIcon, YoutubeIcon, TwitterIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ChevronRight, Folder, CircleCheckIcon, CopyIcon, Upload, X, Check, Pencil, Trash, MicIcon, ListPlusIcon, ListMinusIcon, CaseSensitiveIcon, AlignLeft, AlignCenter, AlignRight, Minimize2, Maximize2, ImageMinus, ImagePlus } from 'lucide-react';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createPortal } from 'react-dom';
@@ -19,9 +19,9 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { $isListNode, ListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $createListItemNode } from '@lexical/list';
+import { TOGGLE_LINK_COMMAND, $isLinkNode, LinkNode, AutoLinkNode, $createLinkNode, $isAutoLinkNode } from '@lexical/link';
 import { $isCodeNode, getLanguageFriendlyName, registerCodeHighlighting, $createCodeNode, CodeNode, CodeHighlightNode, $isCodeHighlightNode, CODE_LANGUAGE_FRIENDLY_NAME_MAP, CODE_LANGUAGE_MAP } from '@lexical/code';
 import { HashtagNode } from '@lexical/hashtag';
-import { TOGGLE_LINK_COMMAND, $isLinkNode, LinkNode, AutoLinkNode, $createLinkNode, $isAutoLinkNode } from '@lexical/link';
 import { OverflowNode } from '@lexical/overflow';
 import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $isHeadingNode, $isQuoteNode, $createHeadingNode, $createQuoteNode, DRAG_DROP_PASTE, HeadingNode, QuoteNode } from '@lexical/rich-text';
@@ -5069,12 +5069,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__ */ jsx(
     ContentEditable$1,
     {
@@ -5083,7 +5085,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__ */ jsx(
+          "div",
+          {
+            className: cn(placeholderDefaults && "editor-placeholder", placeholderClassName),
+            children: text
+          }
+        )
+      } : { placeholder: null }
     }
   );
 }
@@ -6219,6 +6231,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 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) {
@@ -6331,6 +6423,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 = [
       HeadingNode,
@@ -6346,6 +6439,7 @@ var init_nodes = __esm({
       ListWithColorNode,
       ListItemNode,
       LinkNode,
+      DownloadLinkNode,
       OverflowNode,
       HashtagNode,
       TableNode,
@@ -27998,6 +28092,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,
@@ -28011,6 +28143,9 @@ function FloatingLinkEditor({
   const [linkUrl, setLinkUrl] = useState("");
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
   const [lastSelection, setLastSelection] = useState(null);
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
+  const fileInputRef = useRef(null);
+  const { onUploadFile } = useEditorUploads();
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
     let linkNode = null;
@@ -28204,9 +28339,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 = $getSelection();
         if (!selection && lastSelection !== null) {
@@ -28231,8 +28368,11 @@ function FloatingLinkEditor({
               const existingLinkNode = $findMatchingParent(node, $isLinkNode) || ($isLinkNode(node.getParent()) ? node.getParent() : null);
               if (existingLinkNode) {
                 existingLinkNode.setURL(url);
+                if (downloadFileName && $isDownloadLinkNode(existingLinkNode)) {
+                  existingLinkNode.setDownload(downloadFileName);
+                }
               } else {
-                const linkNode = $createLinkNode(url);
+                const linkNode = downloadFileName ? $createDownloadLinkNode(url, downloadFileName) : $createLinkNode(url);
                 $wrapNodeInElement(node, () => linkNode);
               }
             }
@@ -28241,25 +28381,114 @@ function FloatingLinkEditor({
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
           const parent = getSelectedNode(selection).getParent();
           if ($isAutoLinkNode(parent)) {
-            const linkNode = $createLinkNode(parent.getURL(), {
+            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);
+            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) {
+                downloadLinkNode.append($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__ */ jsx(
     "div",
     {
       ref: editorRef,
       className: "editor-floating-link-editor",
-      children: isLinkEditMode || isLink ? isLinkEditMode ? /* @__PURE__ */ jsxs("div", { className: "editor-floating-link-editor__input-container", children: [
+      children: isLinkEditMode || isLink ? isLinkEditMode ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "editor-floating-link-editor__input-container", children: [
+        /* @__PURE__ */ 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,.webm"
+          }
+        ),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -28270,6 +28499,18 @@ function FloatingLinkEditor({
             className: "editor-flex-grow"
           }
         ),
+        /* @__PURE__ */ 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__ */ jsx(Loader2, { className: "editor-icon-sm animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "editor-icon-sm" })
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -28287,22 +28528,39 @@ function FloatingLinkEditor({
           Button,
           {
             size: "icon",
-            onClick: handleLinkSubmission,
+            onClick: () => handleLinkSubmission(),
             className: "editor-shrink-0",
             children: /* @__PURE__ */ jsx(Check, { className: "editor-icon-sm" })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "editor-floating-link-editor__view-container", children: [
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: sanitizeUrl(linkUrl),
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "editor-floating-link-editor__link",
-            children: /* @__PURE__ */ jsx(TypographyPSmall, { className: "editor-truncate", children: linkUrl })
+      ] }) }) : /* @__PURE__ */ 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__ */ jsx(
+            "a",
+            {
+              href,
+              download: downloadAttr,
+              target: isDownload ? "_self" : "_blank",
+              rel: isDownload ? void 0 : "noopener noreferrer",
+              className: "editor-floating-link-editor__link",
+              children: /* @__PURE__ */ jsx(TypographyPSmall, { className: "editor-truncate", children: text })
+            }
+          );
+        })(),
         /* @__PURE__ */ jsxs(Flex, { gap: 0, className: "editor-shrink-0", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -28616,6 +28874,8 @@ var init_floating_link_editor_plugin = __esm({
     init_flex();
     init_typography();
     init_image_node();
+    init_download_link_node();
+    init_uploads_context();
   }
 });