@thangph2146/nextjs-editor 1.0.2 → 1.0.4

package/README.md

@@ -61,9 +61,141 @@ export function MyEditor() {
 
 ## Ghi chú
 
-- **Ảnh**: Trong bản standalone, dialog chèn ảnh mặc định chỉ có tab **URL**. Để dùng tab thư viện ảnh (upload/folder), app Next.js cần cung cấp implementation uploads và alias module `@thangph2146/nextjs-editor` tới hooks uploads của app.
+- **Ảnh**: Mặc định dialog chèn ảnh có tab **URL** và **File**. Để tab **Thư viện** hiển thị ảnh từ API của project, xem [Cấu hình API thư viện ảnh](#cấu-hình-api-thư-viện-ảnh) bên dưới.
 - **Next.js**: Package dùng `next/image` và `next/dynamic` khi chạy trong Next.js; cần cài `next` trong project.
 
+## Cấu hình API thư viện ảnh
+
+Tab **Thư viện** trong dialog chèn ảnh cần dữ liệu từ API/uploads của project. Bạn cấu hình bằng cách **alias** module uploads-hooks của package sang file hooks trong project.
+
+### Bước 1: Alias trong Next.js
+
+Trong `next.config.ts` (hoặc `next.config.js`), thêm `webpack.resolve.alias` để trỏ `@thangph2146/nextjs-editor/uploads-hooks` sang file hooks uploads của project:
+
+```ts
+// next.config.ts
+import type { NextConfig } from "next";
+import path from "path";
+
+const nextConfig: NextConfig = {
+  // ... config khác
+  webpack: (config) => {
+    config.resolve ??= {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@thangph2146/nextjs-editor/uploads-hooks": path.resolve(
+        __dirname,
+        "src/features/uploads/hooks/use-uploads-queries.ts"  // đường dẫn tới file hooks của bạn
+      ),
+    };
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+Đường dẫn file có thể khác tùy cấu trúc project (ví dụ `src/lib/uploads-queries.ts`).
+
+### Bước 2: File hooks phải export `useImagesList`
+
+File được alias tới phải export hook `useImagesList(page, limit)` với đúng chuẩn:
+
+- **Tham số:** `page: number`, `limit: number` (ví dụ `useImagesList(1, 100)`).
+- **Giá trị trả về:** object tương thích với TanStack Query (useQuery), ít nhất:
+  - `data`: response từ API, có dạng:
+    - `data.data.folderTree`: cây thư mục ảnh (xem kiểu `FolderNode` bên dưới).
+    - `data.data.pagination`: `{ page, limit, total, totalPages }` (tùy chọn).
+  - `isLoading`: boolean.
+
+**Kiểu dữ liệu (TypeScript):**
+
+```ts
+interface ImageItem {
+  fileName: string;
+  originalName: string;
+  size: number;
+  mimeType: string;
+  url: string;           // URL đầy đủ để hiển thị ảnh (img src)
+  relativePath: string;
+  createdAt: number;
+}
+
+interface FolderNode {
+  name: string;
+  path: string;
+  images: ImageItem[];
+  subfolders: FolderNode[];  // đệ quy
+}
+```
+
+**Ví dụ hook (gọi API):**
+
+```ts
+// useImagesList gọi GET /api/uploads?page=1&limit=100 (hoặc endpoint của bạn)
+export function useImagesList(page = 1, limit = 50) {
+  return useQuery({
+    queryKey: ["uploads", "images", page, limit],
+    queryFn: async () => {
+      const res = await fetch(`/api/uploads?page=${page}&limit=${limit}`);
+      const json = await res.json();
+      if (!json.success) throw new Error("Failed to fetch images");
+      return json; // { success, data: { data: [], folderTree, pagination } }
+    },
+  });
+}
+```
+
+### Bước 3: API backend trả về `folderTree`
+
+Endpoint list ảnh (ví dụ `GET /api/uploads` hoặc `GET /api/admin/uploads`) nên trả về JSON có **folderTree** — cây thư mục chứa ảnh, để editor hiển thị theo cấu trúc thư mục.
+
+**Ví dụ response:**
+
+```json
+{
+  "success": true,
+  "data": {
+    "data": [],
+    "folderTree": {
+      "name": "images",
+      "path": "images",
+      "images": [
+        {
+          "fileName": "2024/01/15/abc.jpg",
+          "originalName": "abc.jpg",
+          "size": 12345,
+          "mimeType": "image/jpeg",
+          "url": "https://example.com/api/uploads/serve/images/2024/01/15/abc.jpg",
+          "relativePath": "images/2024/01/15/abc.jpg",
+          "createdAt": 1705312800000
+        }
+      ],
+      "subfolders": [
+        {
+          "name": "2024",
+          "path": "images/2024",
+          "images": [],
+          "subfolders": []
+        }
+      ]
+    },
+    "pagination": { "page": 1, "limit": 100, "total": 50, "totalPages": 1 }
+  }
+}
+```
+
+- `folderTree.url` (hoặc mỗi `ImageItem.url`) phải là URL mà trình duyệt tải được (absolute hoặc same-origin).
+- Nếu không có alias, tab Thư viện sẽ hiển thị "Chưa có hình ảnh nào được upload" (stub mặc định).
+
+### Tóm tắt
+
+| Việc | Mô tả |
+|------|--------|
+| Alias | `@thangph2146/nextjs-editor/uploads-hooks` → file hooks uploads của project (next.config webpack). |
+| Hook | File đó export `useImagesList(page, limit)` trả về `{ data, isLoading }`, `data.data.folderTree` kiểu `FolderNode`. |
+| API | Backend trả về list ảnh kèm `folderTree` (cây thư mục + ảnh trong từng thư mục). |
+
 ## Build từ source
 
 ```bash

package/dist/index.cjs

@@ -1166,32 +1166,6 @@ var init_tabs = __esm({
   }
 });
 
-// src/features/uploads/hooks/use-uploads-queries.ts
-var emptyFolderTree, useImagesList;
-var init_use_uploads_queries = __esm({
-  "src/features/uploads/hooks/use-uploads-queries.ts"() {
-    "use strict";
-    emptyFolderTree = {
-      name: "",
-      path: "",
-      images: [],
-      subfolders: []
-    };
-    useImagesList = (_page = 1, _limit = 50) => ({
-      data: {
-        success: true,
-        data: {
-          data: [],
-          folderTree: emptyFolderTree,
-          pagination: { page: 1, limit: 50, total: 0, totalPages: 0 }
-        }
-      },
-      isLoading: false,
-      isError: false
-    });
-  }
-});
-
 // src/components/ui/collapsible.tsx
 function Collapsible({
   className,
@@ -1449,7 +1423,7 @@ function InsertImageUploadsDialogBody({
   const [altText, setAltText] = (0, import_react5.useState)("");
   const [openFolders, setOpenFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
   const limit = 100;
-  const { data: imagesData, isLoading } = useImagesList(1, limit);
+  const { data: imagesData, isLoading } = (0, import_uploads_hooks.useImagesList)(1, limit);
   const folderTree = imagesData?.data?.folderTree;
   const isDisabled = !selectedImage;
   const handleImageSelect = React6.useCallback((imageUrl, originalName) => {
@@ -1744,7 +1718,7 @@ function getDragSelection(event) {
   }
   return range;
 }
-var import_react5, React6, import_LexicalComposerContext2, import_utils14, import_lexical5, import_lucide_react3, import_image, import_jsx_runtime13, getDOMSelection, INSERT_IMAGE_COMMAND;
+var import_react5, React6, import_LexicalComposerContext2, import_utils14, import_lexical5, import_uploads_hooks, import_lucide_react3, import_image, import_jsx_runtime13, getDOMSelection, INSERT_IMAGE_COMMAND;
 var init_images_plugin = __esm({
   "src/components/editor/plugins/images-plugin.tsx"() {
     "use strict";
@@ -1761,7 +1735,7 @@ var init_images_plugin = __esm({
     init_input();
     init_label();
     init_tabs();
-    init_use_uploads_queries();
+    import_uploads_hooks = require("@thangph2146/nextjs-editor/uploads-hooks");
     import_lucide_react3 = require("lucide-react");
     import_image = __toESM(require("next/image"), 1);
     init_collapsible();
@@ -19644,12 +19618,12 @@ var init_emoji_list = __esm({
 });
 
 // src/index.tsx
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Editor: () => Editor,
   editorThemePath: () => editorThemePath
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/editor/editor-x/editor.tsx
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -23284,6 +23258,33 @@ function applyListColorToDom(dom, color) {
   dom.style.setProperty("--list-marker-color", color, "important");
   dom.setAttribute("data-list-color", color);
 }
+function getListColorFromDom(dom) {
+  const attr = dom.getAttribute("data-list-color");
+  if (attr) return attr;
+  const style = dom.style.getPropertyValue("list-style-color") || dom.style.getPropertyValue("--list-marker-color");
+  if (style) return style.trim();
+  const computed = typeof window !== "undefined" ? window.getComputedStyle(dom).getPropertyValue("list-style-color") : "";
+  return computed && computed !== "currentcolor" ? computed.trim() : void 0;
+}
+function $convertListWithColorElement(domNode) {
+  if (!(domNode instanceof HTMLElement)) return null;
+  const nodeName = domNode.nodeName.toLowerCase();
+  let listType = "bullet";
+  let start = 1;
+  if (nodeName === "ol") {
+    listType = "number";
+    const startAttr = domNode.getAttribute("start");
+    start = startAttr != null ? parseInt(startAttr, 10) || 1 : 1;
+  } else if (nodeName === "ul") {
+    listType = "bullet";
+  } else {
+    return null;
+  }
+  const node = $createListWithColorNode(listType, start);
+  const color = getListColorFromDom(domNode);
+  if (color) node.setListColor(color);
+  return { node };
+}
 var ListWithColorNode = class _ListWithColorNode extends import_list.ListNode {
   __listColor;
   constructor(listType, start, key) {
@@ -23292,6 +23293,12 @@ var ListWithColorNode = class _ListWithColorNode extends import_list.ListNode {
   static getType() {
     return LIST_WITH_COLOR_TYPE;
   }
+  static importDOM() {
+    return {
+      ol: () => ({ conversion: $convertListWithColorElement, priority: 0 }),
+      ul: () => ({ conversion: $convertListWithColorElement, priority: 0 })
+    };
+  }
   getType() {
     return LIST_WITH_COLOR_TYPE;
   }
@@ -23362,6 +23369,11 @@ var ListWithColorNode = class _ListWithColorNode extends import_list.ListNode {
     return json;
   }
 };
+function $createListWithColorNode(listType, start) {
+  return (0, import_lexical13.$applyNodeReplacement)(
+    new ListWithColorNode(listType, start)
+  );
+}
 function $isListWithColorNode(node) {
   return node instanceof ListWithColorNode;
 }