@lumir-company/editor 0.2.1 → 0.4.0

package/dist/index.d.mts

@@ -18,7 +18,15 @@ interface LumirEditorProps {
     initialEmptyBlocks?: number;
     placeholder?: string;
     uploadFile?: (file: File) => Promise<string>;
-    storeImagesAsBase64?: boolean;
+    s3Upload?: {
+        apiEndpoint: string;
+        env: "development" | "production";
+        path: string;
+        /** 파일명 변환 콜백 - 업로드 전 파일명을 변경할 수 있습니다 */
+        fileNameTransform?: (originalName: string, file: File) => string;
+        /** true일 경우 파일명 뒤에 UUID를 자동으로 추가합니다 (예: image_abc123.png) */
+        appendUUID?: boolean;
+    };
     allowVideoUpload?: boolean;
     allowAudioUpload?: boolean;
     allowFileUpload?: boolean;
@@ -31,21 +39,18 @@ interface LumirEditorProps {
     heading?: {
         levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     };
-    animations?: boolean;
     defaultStyles?: boolean;
     disableExtensions?: string[];
-    tabBehavior?: 'prefer-navigate-ui' | 'prefer-indent';
+    tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
     trailingBlock?: boolean;
-    resolveFileUrl?: (url: string) => Promise<string>;
     editable?: boolean;
-    theme?: 'light' | 'dark' | Partial<Record<string, unknown>> | {
+    theme?: "light" | "dark" | Partial<Record<string, unknown>> | {
         light: Partial<Record<string, unknown>>;
         dark: Partial<Record<string, unknown>>;
     };
     formattingToolbar?: boolean;
     linkToolbar?: boolean;
     sideMenu?: boolean;
-    slashMenu?: boolean;
     emojiPicker?: boolean;
     filePanel?: boolean;
     tableHandles?: boolean;
@@ -101,7 +106,7 @@ declare class EditorConfig {
      * @param userTables 사용자 테이블 설정
      * @returns 기본값이 적용된 테이블 설정
      */
-    static getDefaultTableConfig(userTables?: LumirEditorProps['tables']): {
+    static getDefaultTableConfig(userTables?: LumirEditorProps["tables"]): {
         splitCells: boolean;
         cellBackgroundColor: boolean;
         cellTextColor: boolean;
@@ -112,7 +117,7 @@ declare class EditorConfig {
      * @param userHeading 사용자 헤딩 설정
      * @returns 기본값이 적용된 헤딩 설정
      */
-    static getDefaultHeadingConfig(userHeading?: LumirEditorProps['heading']): {
+    static getDefaultHeadingConfig(userHeading?: LumirEditorProps["heading"]): {
         levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     };
     /**
@@ -125,8 +130,19 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, tables, heading, animations, defaultStyles, disableExtensions, tabBehavior, trailingBlock, resolveFileUrl, storeImagesAsBase64, allowVideoUpload, allowAudioUpload, allowFileUpload, editable, theme, formattingToolbar, linkToolbar, sideMenu, slashMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, sideMenuAddButton, onContentChange, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, sideMenuAddButton, onContentChange, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 
-export { ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, LumirEditor, type LumirEditorProps, cn };
+interface S3UploaderConfig {
+    apiEndpoint: string;
+    env: "production" | "development";
+    path: string;
+    /** 파일명 변환 콜백 - 업로드 전 파일명을 변경할 수 있습니다 */
+    fileNameTransform?: (originalName: string, file: File) => string;
+    /** true일 경우 파일명 뒤에 UUID를 자동으로 추가합니다 (예: image_abc123.png) */
+    appendUUID?: boolean;
+}
+declare const createS3Uploader: (config: S3UploaderConfig) => (file: File) => Promise<string>;
+
+export { ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, LumirEditor, type LumirEditorProps, type S3UploaderConfig, cn, createS3Uploader };

package/dist/index.d.ts

@@ -18,7 +18,15 @@ interface LumirEditorProps {
     initialEmptyBlocks?: number;
     placeholder?: string;
     uploadFile?: (file: File) => Promise<string>;
-    storeImagesAsBase64?: boolean;
+    s3Upload?: {
+        apiEndpoint: string;
+        env: "development" | "production";
+        path: string;
+        /** 파일명 변환 콜백 - 업로드 전 파일명을 변경할 수 있습니다 */
+        fileNameTransform?: (originalName: string, file: File) => string;
+        /** true일 경우 파일명 뒤에 UUID를 자동으로 추가합니다 (예: image_abc123.png) */
+        appendUUID?: boolean;
+    };
     allowVideoUpload?: boolean;
     allowAudioUpload?: boolean;
     allowFileUpload?: boolean;
@@ -31,21 +39,18 @@ interface LumirEditorProps {
     heading?: {
         levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     };
-    animations?: boolean;
     defaultStyles?: boolean;
     disableExtensions?: string[];
-    tabBehavior?: 'prefer-navigate-ui' | 'prefer-indent';
+    tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
     trailingBlock?: boolean;
-    resolveFileUrl?: (url: string) => Promise<string>;
     editable?: boolean;
-    theme?: 'light' | 'dark' | Partial<Record<string, unknown>> | {
+    theme?: "light" | "dark" | Partial<Record<string, unknown>> | {
         light: Partial<Record<string, unknown>>;
         dark: Partial<Record<string, unknown>>;
     };
     formattingToolbar?: boolean;
     linkToolbar?: boolean;
     sideMenu?: boolean;
-    slashMenu?: boolean;
     emojiPicker?: boolean;
     filePanel?: boolean;
     tableHandles?: boolean;
@@ -101,7 +106,7 @@ declare class EditorConfig {
      * @param userTables 사용자 테이블 설정
      * @returns 기본값이 적용된 테이블 설정
      */
-    static getDefaultTableConfig(userTables?: LumirEditorProps['tables']): {
+    static getDefaultTableConfig(userTables?: LumirEditorProps["tables"]): {
         splitCells: boolean;
         cellBackgroundColor: boolean;
         cellTextColor: boolean;
@@ -112,7 +117,7 @@ declare class EditorConfig {
      * @param userHeading 사용자 헤딩 설정
      * @returns 기본값이 적용된 헤딩 설정
      */
-    static getDefaultHeadingConfig(userHeading?: LumirEditorProps['heading']): {
+    static getDefaultHeadingConfig(userHeading?: LumirEditorProps["heading"]): {
         levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     };
     /**
@@ -125,8 +130,19 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, tables, heading, animations, defaultStyles, disableExtensions, tabBehavior, trailingBlock, resolveFileUrl, storeImagesAsBase64, allowVideoUpload, allowAudioUpload, allowFileUpload, editable, theme, formattingToolbar, linkToolbar, sideMenu, slashMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, sideMenuAddButton, onContentChange, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, sideMenuAddButton, onContentChange, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 
-export { ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, LumirEditor, type LumirEditorProps, cn };
+interface S3UploaderConfig {
+    apiEndpoint: string;
+    env: "production" | "development";
+    path: string;
+    /** 파일명 변환 콜백 - 업로드 전 파일명을 변경할 수 있습니다 */
+    fileNameTransform?: (originalName: string, file: File) => string;
+    /** true일 경우 파일명 뒤에 UUID를 자동으로 추가합니다 (예: image_abc123.png) */
+    appendUUID?: boolean;
+}
+declare const createS3Uploader: (config: S3UploaderConfig) => (file: File) => Promise<string>;
+
+export { ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, LumirEditor, type LumirEditorProps, type S3UploaderConfig, cn, createS3Uploader };

package/dist/index.js

@@ -24,7 +24,8 @@ __export(index_exports, {
   ContentUtils: () => ContentUtils,
   EditorConfig: () => EditorConfig,
   LumirEditor: () => LumirEditor,
-  cn: () => cn
+  cn: () => cn,
+  createS3Uploader: () => createS3Uploader
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -38,6 +39,86 @@ function cn(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
 
+// src/utils/s3-uploader.ts
+var generateUUID = () => {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+};
+var createS3Uploader = (config) => {
+  const { apiEndpoint, env, path, fileNameTransform, appendUUID } = config;
+  if (!apiEndpoint || apiEndpoint.trim() === "") {
+    throw new Error(
+      "apiEndpoint is required for S3 upload. Please provide a valid API endpoint."
+    );
+  }
+  if (!env) {
+    throw new Error("env is required. Must be 'development' or 'production'.");
+  }
+  if (!path || path.trim() === "") {
+    throw new Error("path is required and cannot be empty.");
+  }
+  const appendUUIDToFileName = (filename) => {
+    const lastDotIndex = filename.lastIndexOf(".");
+    if (lastDotIndex === -1) {
+      return `${filename}_${generateUUID()}`;
+    }
+    const name = filename.substring(0, lastDotIndex);
+    const ext = filename.substring(lastDotIndex);
+    return `${name}_${generateUUID()}${ext}`;
+  };
+  const generateHierarchicalFileName = (file) => {
+    let filename = file.name;
+    if (fileNameTransform) {
+      filename = fileNameTransform(filename, file);
+    }
+    if (appendUUID) {
+      filename = appendUUIDToFileName(filename);
+    }
+    return `${env}/${path}/${filename}`;
+  };
+  return async (file) => {
+    try {
+      if (!apiEndpoint || apiEndpoint.trim() === "") {
+        throw new Error(
+          "Invalid apiEndpoint: Cannot upload file without a valid API ENDPOINT"
+        );
+      }
+      const fileName = generateHierarchicalFileName(file);
+      const response = await fetch(
+        `${apiEndpoint}?key=${encodeURIComponent(fileName)}`
+      );
+      if (!response.ok) {
+        const errorText = await response.text() || "";
+        throw new Error(
+          `Failed to get presigned URL: ${response.statusText}, ${errorText}`
+        );
+      }
+      const responseData = await response.json();
+      const { presignedUrl, publicUrl } = responseData;
+      const uploadResponse = await fetch(presignedUrl, {
+        method: "PUT",
+        headers: {
+          "Content-Type": file.type || "application/octet-stream"
+        },
+        body: file
+      });
+      if (!uploadResponse.ok) {
+        throw new Error(`Failed to upload file: ${uploadResponse.statusText}`);
+      }
+      return publicUrl;
+    } catch (error) {
+      console.error("S3 upload failed:", error);
+      throw error;
+    }
+  };
+};
+
 // src/components/LumirEditor.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var ContentUtils = class {
@@ -158,32 +239,21 @@ var EditorConfig = class {
     return Array.from(set);
   }
 };
-var createObjectUrlUploader = async (file) => {
-  return URL.createObjectURL(file);
-};
 var isImageFile = (file) => {
   return file.size > 0 && (file.type?.startsWith("image/") || !file.type && /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(file.name || ""));
 };
-var fileToBase64 = async (file) => await new Promise((resolve, reject) => {
-  const reader = new FileReader();
-  reader.onload = () => resolve(String(reader.result));
-  reader.onerror = () => reject(new Error("FileReader failed"));
-  reader.readAsDataURL(file);
-});
 function LumirEditor({
   // editor options
   initialContent,
   initialEmptyBlocks = 3,
   uploadFile,
+  s3Upload,
   tables,
   heading,
-  animations = true,
   defaultStyles = true,
   disableExtensions,
   tabBehavior = "prefer-navigate-ui",
   trailingBlock = true,
-  resolveFileUrl,
-  storeImagesAsBase64 = true,
   allowVideoUpload = false,
   allowAudioUpload = false,
   allowFileUpload = false,
@@ -193,7 +263,6 @@ function LumirEditor({
   formattingToolbar = true,
   linkToolbar = true,
   sideMenu = true,
-  slashMenu = true,
   emojiPicker = true,
   filePanel = true,
   tableHandles = true,
@@ -203,6 +272,7 @@ function LumirEditor({
   // callbacks / refs
   onContentChange
 }) {
+  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
   const validatedContent = (0, import_react.useMemo)(() => {
     return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
   }, [initialContent, initialEmptyBlocks]);
@@ -225,33 +295,60 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
+  const fileNameTransformRef = (0, import_react.useRef)(s3Upload?.fileNameTransform);
+  (0, import_react.useEffect)(() => {
+    fileNameTransformRef.current = s3Upload?.fileNameTransform;
+  }, [s3Upload?.fileNameTransform]);
+  const memoizedS3Upload = (0, import_react.useMemo)(() => {
+    if (!s3Upload) return void 0;
+    return {
+      apiEndpoint: s3Upload.apiEndpoint,
+      env: s3Upload.env,
+      path: s3Upload.path,
+      appendUUID: s3Upload.appendUUID,
+      // 최신 콜백을 항상 사용하도록 ref를 통해 접근
+      fileNameTransform: (originalName, file) => {
+        return fileNameTransformRef.current ? fileNameTransformRef.current(originalName, file) : originalName;
+      }
+    };
+  }, [
+    s3Upload?.apiEndpoint,
+    s3Upload?.env,
+    s3Upload?.path,
+    s3Upload?.appendUUID
+  ]);
   const editor = (0, import_react2.useCreateBlockNote)(
     {
       initialContent: validatedContent,
       tables: tableConfig,
       heading: headingConfig,
-      animations,
+      animations: false,
+      // 기본적으로 애니메이션 비활성화
       defaultStyles,
       // 확장 비활성: 비디오/오디오/파일 제어
       disableExtensions: disabledExtensions,
       tabBehavior,
       trailingBlock,
-      resolveFileUrl,
       uploadFile: async (file) => {
         if (!isImageFile(file)) {
           throw new Error("Only image files are allowed");
         }
-        const custom = uploadFile;
-        const fallback = storeImagesAsBase64 ? fileToBase64 : createObjectUrlUploader;
         try {
-          if (custom) return await custom(file);
-          return await fallback(file);
-        } catch (_) {
-          try {
-            return await createObjectUrlUploader(file);
-          } catch {
-            throw new Error("Failed to process file for upload");
+          let imageUrl;
+          if (uploadFile) {
+            imageUrl = await uploadFile(file);
+          } else if (memoizedS3Upload?.apiEndpoint) {
+            const s3Uploader = createS3Uploader(memoizedS3Upload);
+            imageUrl = await s3Uploader(file);
+          } else {
+            throw new Error("No upload method available");
           }
+          return imageUrl;
+        } catch (error) {
+          console.error("Image upload failed:", error);
+          throw new Error(
+            "Upload failed: " + (error instanceof Error ? error.message : String(error))
+          );
         }
       },
       pasteHandler: (ctx) => {
@@ -268,17 +365,22 @@ function LumirEditor({
         }
         event.preventDefault();
         (async () => {
-          for (const file of acceptedFiles) {
-            try {
-              const url = await editor2.uploadFile(file);
-              editor2.pasteHTML(`<img src="${url}" alt="image" />`);
-            } catch (err) {
-              console.warn(
-                "Image upload failed, skipped:",
-                file.name || "",
-                err
-              );
+          setIsUploading(true);
+          try {
+            for (const file of acceptedFiles) {
+              try {
+                const url = await editor2.uploadFile(file);
+                editor2.pasteHTML(`<img src="${url}" alt="image" />`);
+              } catch (err) {
+                console.warn(
+                  "Image upload failed, skipped:",
+                  file.name || "",
+                  err
+                );
+              }
             }
+          } finally {
+            setIsUploading(false);
           }
         })();
         return true;
@@ -288,14 +390,12 @@ function LumirEditor({
       validatedContent,
       tableConfig,
       headingConfig,
-      animations,
       defaultStyles,
       disabledExtensions,
       tabBehavior,
       trailingBlock,
-      resolveFileUrl,
       uploadFile,
-      storeImagesAsBase64
+      memoizedS3Upload
     ]
   );
   (0, import_react.useEffect)(() => {
@@ -333,17 +433,26 @@ function LumirEditor({
       const acceptedFiles = files.filter(isImageFile);
       if (acceptedFiles.length === 0) return;
       (async () => {
-        for (const file of acceptedFiles) {
-          try {
-            if (editor?.uploadFile) {
-              const url = await editor.uploadFile(file);
-              if (url) {
-                editor.pasteHTML(`<img src="${url}" alt="image" />`);
+        setIsUploading(true);
+        try {
+          for (const file of acceptedFiles) {
+            try {
+              if (editor?.uploadFile) {
+                const url = await editor.uploadFile(file);
+                if (url) {
+                  editor.pasteHTML(`<img src="${url}" alt="image" />`);
+                }
               }
+            } catch (err) {
+              console.warn(
+                "Image upload failed, skipped:",
+                file.name || "",
+                err
+              );
             }
-          } catch (err) {
-            console.warn("Image upload failed, skipped:", file.name || "", err);
           }
+        } finally {
+          setIsUploading(false);
         }
       })();
     };
@@ -362,58 +471,69 @@ function LumirEditor({
   const DragHandleOnlySideMenu = (0, import_react.useMemo)(() => {
     return (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("lumirEditor", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_mantine.BlockNoteView,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
     {
-      editor,
-      editable,
-      theme,
-      formattingToolbar,
-      linkToolbar,
-      sideMenu: computedSideMenu,
-      slashMenu: false,
-      emojiPicker,
-      filePanel,
-      tableHandles,
-      onSelectionChange,
+      className: cn("lumirEditor", className),
+      style: { position: "relative" },
       children: [
-        slashMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react2.SuggestionMenuController,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_mantine.BlockNoteView,
           {
-            triggerCharacter: "/",
-            getItems: (0, import_react.useCallback)(
-              async (query) => {
-                const items = (0, import_react2.getDefaultReactSlashMenuItems)(editor);
-                const filtered = items.filter((item) => {
-                  const key = (item?.key || "").toString().toLowerCase();
-                  const title = (item?.title || "").toString().toLowerCase();
-                  if (["video", "audio", "file"].includes(key)) return false;
-                  if (title.includes("video") || title.includes("audio") || title.includes("file"))
-                    return false;
-                  return true;
-                });
-                if (!query) return filtered;
-                const q = query.toLowerCase();
-                return filtered.filter(
-                  (item) => item.title?.toLowerCase().includes(q) || (item.aliases || []).some(
-                    (a) => a.toLowerCase().includes(q)
+            editor,
+            editable,
+            theme,
+            formattingToolbar,
+            linkToolbar,
+            sideMenu: computedSideMenu,
+            slashMenu: false,
+            emojiPicker,
+            filePanel,
+            tableHandles,
+            onSelectionChange,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react2.SuggestionMenuController,
+                {
+                  triggerCharacter: "/",
+                  getItems: (0, import_react.useCallback)(
+                    async (query) => {
+                      const items = (0, import_react2.getDefaultReactSlashMenuItems)(editor);
+                      const filtered = items.filter((item) => {
+                        const key = (item?.key || "").toString().toLowerCase();
+                        const title = (item?.title || "").toString().toLowerCase();
+                        if (["video", "audio", "file"].includes(key)) return false;
+                        if (title.includes("video") || title.includes("audio") || title.includes("file"))
+                          return false;
+                        return true;
+                      });
+                      if (!query) return filtered;
+                      const q = query.toLowerCase();
+                      return filtered.filter(
+                        (item) => item.title?.toLowerCase().includes(q) || (item.aliases || []).some(
+                          (a) => a.toLowerCase().includes(q)
+                        )
+                      );
+                    },
+                    [editor]
                   )
-                );
-              },
-              [editor]
-            )
+                }
+              ),
+              !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+            ]
           }
         ),
-        !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+        isUploading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lumirEditor-upload-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lumirEditor-spinner" }) })
       ]
     }
-  ) });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ContentUtils,
   EditorConfig,
   LumirEditor,
-  cn
+  cn,
+  createS3Uploader
 });
 //# sourceMappingURL=index.js.map