@lumir-company/editor 0.2.0 → 0.3.3

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/LumirEditor.tsx
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useCallback, useState } from "react";
 import {
   useCreateBlockNote,
   SideMenu as BlockSideMenu,
@@ -17,6 +17,62 @@ function cn(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
 
+// src/utils/s3-uploader.ts
+var createS3Uploader = (config) => {
+  const { apiEndpoint, env, path } = 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 generateHierarchicalFileName = (file) => {
+    const now = /* @__PURE__ */ new Date();
+    const filename = file.name;
+    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
 import { jsx, jsxs } from "react/jsx-runtime";
 var ContentUtils = class {
@@ -69,39 +125,34 @@ var ContentUtils = class {
    * 콘텐츠 유효성 검증 및 기본값 설정
    * @param content 사용자 제공 콘텐츠 (객체 배열 또는 JSON 문자열)
    * @param emptyBlockCount 빈 블록 개수 (기본값: 3)
-   * @param placeholder 첫 번째 블록의 placeholder 텍스트
    * @returns 검증된 콘텐츠 배열
    */
-  static validateContent(content, emptyBlockCount = 3, placeholder) {
+  static validateContent(content, emptyBlockCount = 3) {
     if (typeof content === "string") {
       if (content.trim() === "") {
-        return this.createEmptyBlocks(emptyBlockCount, placeholder);
+        return this.createEmptyBlocks(emptyBlockCount);
       }
       const parsedContent = this.parseJSONContent(content);
       if (parsedContent && parsedContent.length > 0) {
         return parsedContent;
       }
-      return this.createEmptyBlocks(emptyBlockCount, placeholder);
+      return this.createEmptyBlocks(emptyBlockCount);
     }
     if (!content || content.length === 0) {
-      return this.createEmptyBlocks(emptyBlockCount, placeholder);
+      return this.createEmptyBlocks(emptyBlockCount);
     }
     return content;
   }
   /**
    * 빈 블록들을 생성합니다
    * @param emptyBlockCount 생성할 블록 개수
-   * @param placeholder 첫 번째 블록의 placeholder 텍스트
    * @returns 생성된 빈 블록 배열
    */
-  static createEmptyBlocks(emptyBlockCount, placeholder) {
-    return Array.from({ length: emptyBlockCount }, (_, index) => {
-      const block = this.createDefaultBlock();
-      if (index === 0 && placeholder) {
-        block.content = [{ type: "text", text: placeholder, styles: {} }];
-      }
-      return block;
-    });
+  static createEmptyBlocks(emptyBlockCount) {
+    return Array.from(
+      { length: emptyBlockCount },
+      () => this.createDefaultBlock()
+    );
   }
 };
 var EditorConfig = class {
@@ -131,41 +182,32 @@ var EditorConfig = class {
    * @param userExtensions 사용자 정의 비활성 확장
    * @param allowVideo 비디오 업로드 허용 여부
    * @param allowAudio 오디오 업로드 허용 여부
+   * @param allowFile 일반 파일 업로드 허용 여부
    * @returns 비활성화할 확장 기능 목록
    */
-  static getDisabledExtensions(userExtensions, allowVideo = false, allowAudio = false) {
+  static getDisabledExtensions(userExtensions, allowVideo = false, allowAudio = false, allowFile = false) {
     const set = new Set(userExtensions ?? []);
     if (!allowVideo) set.add("video");
     if (!allowAudio) set.add("audio");
+    if (!allowFile) set.add("file");
     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,
-  placeholder,
   uploadFile,
-  pasteHandler,
+  s3Upload,
   tables,
   heading,
-  animations = true,
   defaultStyles = true,
   disableExtensions,
-  domAttributes,
   tabBehavior = "prefer-navigate-ui",
   trailingBlock = true,
-  resolveFileUrl,
-  storeImagesAsBase64 = true,
   allowVideoUpload = false,
   allowAudioUpload = false,
   allowFileUpload = false,
@@ -175,144 +217,135 @@ function LumirEditor({
   formattingToolbar = true,
   linkToolbar = true,
   sideMenu = true,
-  slashMenu = true,
   emojiPicker = true,
   filePanel = true,
   tableHandles = true,
-  comments = true,
   onSelectionChange,
   className = "",
-  includeDefaultStyles = true,
-  sideMenuAddButton = true,
+  sideMenuAddButton = false,
   // callbacks / refs
-  onContentChange,
-  editorRef
+  onContentChange
 }) {
+  const [isUploading, setIsUploading] = useState(false);
   const validatedContent = useMemo(() => {
-    return ContentUtils.validateContent(
-      initialContent,
-      initialEmptyBlocks,
-      placeholder
+    return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
+  }, [initialContent, initialEmptyBlocks]);
+  const tableConfig = useMemo(() => {
+    return EditorConfig.getDefaultTableConfig(tables);
+  }, [
+    tables?.splitCells,
+    tables?.cellBackgroundColor,
+    tables?.cellTextColor,
+    tables?.headers
+  ]);
+  const headingConfig = useMemo(() => {
+    return EditorConfig.getDefaultHeadingConfig(heading);
+  }, [heading?.levels?.join(",") ?? ""]);
+  const disabledExtensions = useMemo(() => {
+    return EditorConfig.getDisabledExtensions(
+      disableExtensions,
+      allowVideoUpload,
+      allowAudioUpload,
+      allowFileUpload
     );
-  }, [initialContent, initialEmptyBlocks, placeholder]);
+  }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
+  const memoizedS3Upload = useMemo(() => {
+    return s3Upload;
+  }, [s3Upload?.apiEndpoint, s3Upload?.env, s3Upload?.path]);
   const editor = useCreateBlockNote(
     {
       initialContent: validatedContent,
-      tables: EditorConfig.getDefaultTableConfig(tables),
-      heading: EditorConfig.getDefaultHeadingConfig(heading),
-      animations,
+      tables: tableConfig,
+      heading: headingConfig,
+      animations: false,
+      // 기본적으로 애니메이션 비활성화
       defaultStyles,
-      // 확장 비활성: 비디오/오디오만 제어(파일 확장은 내부 드롭 로직 의존 → 비활성화하지 않음)
-      disableExtensions: useMemo(() => {
-        return EditorConfig.getDisabledExtensions(
-          disableExtensions,
-          allowVideoUpload,
-          allowAudioUpload
-        );
-      }, [disableExtensions, allowVideoUpload, allowAudioUpload]),
-      domAttributes,
+      // 확장 비활성: 비디오/오디오/파일 제어
+      disableExtensions: disabledExtensions,
       tabBehavior,
       trailingBlock,
-      resolveFileUrl,
       uploadFile: async (file) => {
-        const custom = uploadFile;
-        const fallback = storeImagesAsBase64 ? fileToBase64 : createObjectUrlUploader;
+        if (!isImageFile(file)) {
+          throw new Error("Only image files are allowed");
+        }
         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) => {
         const { event, editor: editor2, defaultPasteHandler } = ctx;
         const fileList = event?.clipboardData?.files ?? null;
         const files = fileList ? Array.from(fileList) : [];
-        const accepted = files.filter(
-          (f) => f.size > 0 && (f.type?.startsWith("image/") || !f.type && /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(f.name || ""))
-        );
-        if (files.length > 0 && accepted.length === 0) {
+        const acceptedFiles = files.filter(isImageFile);
+        if (files.length > 0 && acceptedFiles.length === 0) {
           event.preventDefault();
           return true;
         }
-        if (accepted.length === 0) return defaultPasteHandler() ?? false;
+        if (acceptedFiles.length === 0) {
+          return defaultPasteHandler() ?? false;
+        }
         event.preventDefault();
         (async () => {
-          const doUpload = uploadFile ?? (storeImagesAsBase64 ? fileToBase64 : createObjectUrlUploader);
-          for (const file of accepted) {
-            try {
-              const url = await doUpload(file);
-              editor2.pasteHTML(`<img src="${url}" alt="image" />`);
-            } catch (err) {
-              console.warn(
-                "Image upload failed, skipped:",
-                file.name || "",
-                err
-              );
-              continue;
+          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;
       }
     },
     [
-      uploadFile,
-      pasteHandler,
-      storeImagesAsBase64,
-      allowVideoUpload,
-      allowAudioUpload,
-      allowFileUpload,
-      tables?.splitCells,
-      tables?.cellBackgroundColor,
-      tables?.cellTextColor,
-      tables?.headers,
-      heading?.levels?.join(","),
-      animations,
+      validatedContent,
+      tableConfig,
+      headingConfig,
       defaultStyles,
-      disableExtensions?.join(","),
-      domAttributes ? JSON.stringify(domAttributes) : void 0,
+      disabledExtensions,
       tabBehavior,
       trailingBlock,
-      resolveFileUrl
+      uploadFile,
+      memoizedS3Upload
     ]
   );
   useEffect(() => {
-    if (!editor) return;
-    editor.isEditable = editable;
-    const el = editor.domElement;
-    if (!editable) {
-      if (el) {
-        el.style.userSelect = "text";
-        el.style.webkitUserSelect = "text";
-      }
+    if (editor) {
+      editor.isEditable = editable;
     }
   }, [editor, editable]);
   useEffect(() => {
     if (!editor || !onContentChange) return;
-    let lastContent = "";
     const handleContentChange = () => {
-      const topLevelBlocks = editor.topLevelBlocks;
-      const currentContent = JSON.stringify(topLevelBlocks);
-      if (lastContent === currentContent) return;
-      lastContent = currentContent;
-      onContentChange(topLevelBlocks);
-    };
-    editor.onEditorContentChange(handleContentChange);
-    return () => {
+      const blocks = editor.topLevelBlocks;
+      onContentChange(blocks);
     };
+    return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  useEffect(() => {
-    if (!editorRef) return;
-    editorRef.current = editor ?? null;
-    return () => {
-      if (editorRef) editorRef.current = null;
-    };
-  }, [editor, editorRef]);
   useEffect(() => {
     const el = editor?.domElement;
     if (!el) return;
@@ -322,9 +355,6 @@ function LumirEditor({
       if (hasFiles) {
         e.preventDefault();
         e.stopPropagation();
-        if (typeof e.stopImmediatePropagation === "function") {
-          e.stopImmediatePropagation();
-        }
       }
     };
     const handleDrop = (e) => {
@@ -333,23 +363,31 @@ function LumirEditor({
       if (!hasFiles) return;
       e.preventDefault();
       e.stopPropagation();
-      e.stopImmediatePropagation?.();
       const items = Array.from(e.dataTransfer.items ?? []);
       const files = items.filter((it) => it.kind === "file").map((it) => it.getAsFile()).filter((f) => !!f);
-      const accepted = files.filter(
-        (f) => f.size > 0 && (f.type?.startsWith("image/") || !f.type && /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(f.name || ""))
-      );
-      if (accepted.length === 0) return;
+      const acceptedFiles = files.filter(isImageFile);
+      if (acceptedFiles.length === 0) return;
       (async () => {
-        const doUpload = uploadFile ?? (storeImagesAsBase64 ? fileToBase64 : createObjectUrlUploader);
-        for (const f of accepted) {
-          try {
-            const url = await doUpload(f);
-            editor?.pasteHTML(`<img src="${url}" alt="image" />`);
-          } catch (err) {
-            console.warn("Image upload failed, skipped:", f.name || "", err);
-            continue;
+        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
+              );
+            }
           }
+        } finally {
+          setIsUploading(false);
         }
       })();
     };
@@ -361,59 +399,66 @@ function LumirEditor({
       });
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
-  }, [
-    editor,
-    uploadFile,
-    storeImagesAsBase64,
-    allowVideoUpload,
-    allowAudioUpload
-  ]);
-  const computedSideMenu = sideMenuAddButton ? sideMenu : false;
-  const DragHandleOnlySideMenu = (props) => {
-    return /* @__PURE__ */ jsx(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx(DragHandleButton, { ...props }) });
-  };
+  }, [editor]);
+  const computedSideMenu = useMemo(() => {
+    return sideMenuAddButton ? sideMenu : false;
+  }, [sideMenuAddButton, sideMenu]);
+  const DragHandleOnlySideMenu = useMemo(() => {
+    return (props) => /* @__PURE__ */ jsx(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx(DragHandleButton, { ...props }) });
+  }, []);
   return /* @__PURE__ */ jsxs(
-    BlockNoteView,
+    "div",
     {
-      className: cn(
-        includeDefaultStyles && 'lumirEditor w-full h-full min-w-[300px] overflow-auto rounded-md border border-gray-300 focus-within:ring-2 focus-within:ring-black [&_.bn-editor]:px-[12px] [&_[data-content-type="paragraph"]]:text-[14px] bg-white',
-        className
-      ),
-      editor,
-      editable,
-      theme,
-      formattingToolbar,
-      linkToolbar,
-      sideMenu: computedSideMenu,
-      slashMenu: false,
-      emojiPicker,
-      filePanel,
-      tableHandles,
-      comments,
-      onSelectionChange,
+      className: cn("lumirEditor", className),
+      style: { position: "relative" },
       children: [
-        /* @__PURE__ */ jsx(
-          SuggestionMenuController,
+        /* @__PURE__ */ jsxs(
+          BlockNoteView,
           {
-            triggerCharacter: "/",
-            getItems: async (query) => {
-              const items = getDefaultReactSlashMenuItems(editor);
-              const filtered = items.filter((it) => {
-                const k = (it?.key || "").toString();
-                if (["video", "audio", "file"].includes(k)) return false;
-                return true;
-              });
-              if (!query) return filtered;
-              const q = query.toLowerCase();
-              return filtered.filter(
-                (it) => (it.title || "").toLowerCase().includes(q) || (it.aliases || []).some(
-                  (a) => a.toLowerCase().includes(q)
-                )
-              );
-            }
+            editor,
+            editable,
+            theme,
+            formattingToolbar,
+            linkToolbar,
+            sideMenu: computedSideMenu,
+            slashMenu: false,
+            emojiPicker,
+            filePanel,
+            tableHandles,
+            onSelectionChange,
+            children: [
+              /* @__PURE__ */ jsx(
+                SuggestionMenuController,
+                {
+                  triggerCharacter: "/",
+                  getItems: useCallback(
+                    async (query) => {
+                      const items = 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]
+                  )
+                }
+              ),
+              !sideMenuAddButton && /* @__PURE__ */ jsx(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+            ]
           }
         ),
-        !sideMenuAddButton && /* @__PURE__ */ jsx(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+        isUploading && /* @__PURE__ */ jsx("div", { className: "lumirEditor-upload-overlay", children: /* @__PURE__ */ jsx("div", { className: "lumirEditor-spinner" }) })
       ]
     }
   );
@@ -422,6 +467,7 @@ export {
   ContentUtils,
   EditorConfig,
   LumirEditor,
-  cn
+  cn,
+  createS3Uploader
 };
 //# sourceMappingURL=index.mjs.map