@lumir-company/editor 0.4.6 → 0.4.8

package/README.md

@@ -18,7 +18,6 @@
   - [파일명 커스터마이징](#파일명-커스터마이징)
   - [커스텀 업로더](#2-커스텀-업로더)
 - [동영상 업로드 및 임베딩](#동영상-업로드-및-임베딩)
-  - [비디오 플레이어 동작 (커스텀 블록)](#비디오-플레이어-동작-커스텀-블록)
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
 - [HTML 미리보기](#html-미리보기)
@@ -146,6 +145,106 @@ production/blog/images/my-photo.png
 }
 ```
 
+클라이언트는 `apiEndpoint?key={파일키}&contentType={MIME}` 형태로 GET 요청을 보내고, 서버는 위 형식으로 JSON을 반환하면 됩니다.
+
+#### S3 Presigned URL API 구현 예시
+
+**Next.js (App Router)**
+
+파일: `app/api/s3/presigned/route.ts`
+
+```typescript
+import { NextRequest, NextResponse } from "next/server";
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+
+const s3 = new S3Client({
+  region: process.env.AWS_REGION!,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+  },
+});
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const key = searchParams.get("key");
+  const contentType = searchParams.get("contentType");
+
+  if (!key) {
+    return NextResponse.json({ error: "key is required" }, { status: 400 });
+  }
+
+  const command = new PutObjectCommand({
+    Bucket: process.env.AWS_S3_BUCKET!,
+    Key: key,
+    ContentType: contentType || "application/octet-stream",
+  });
+
+  const presignedUrl = await getSignedUrl(s3, command, { expiresIn: 60 });
+  const publicUrl = `https://${process.env.AWS_S3_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
+
+  return NextResponse.json({ presignedUrl, publicUrl, key });
+}
+```
+
+필요한 환경 변수: `AWS_REGION`, `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_S3_BUCKET`
+
+**Next.js가 아닌 프로젝트에서 사용하기**
+
+동일하게 **GET** 요청으로 `key`, `contentType` 쿼리 파라미터를 받아 `presignedUrl`, `publicUrl`을 JSON으로 반환하는 엔드포인트를 구현하면 됩니다.
+
+- **Express (Node.js)**
+
+```javascript
+const express = require("express");
+const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");
+const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");
+
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+});
+
+app.get("/api/s3/presigned", async (req, res) => {
+  const key = req.query.key;
+  const contentType = req.query.contentType || "application/octet-stream";
+
+  if (!key) {
+    return res.status(400).json({ error: "key is required" });
+  }
+
+  const command = new PutObjectCommand({
+    Bucket: process.env.AWS_S3_BUCKET,
+    Key: key,
+    ContentType: contentType,
+  });
+
+  const presignedUrl = await getSignedUrl(s3, command, { expiresIn: 60 });
+  const publicUrl = `https://${process.env.AWS_S3_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
+
+  res.json({ presignedUrl, publicUrl, key });
+});
+```
+
+에디터 사용 시 `apiEndpoint`만 해당 서버 주소로 맞추면 됩니다.
+
+```tsx
+<LumirEditor
+  s3Upload={{
+    apiEndpoint: "https://api.myapp.com/api/s3/presigned",
+    env: "production",
+    path: "uploads",
+  }}
+/>
+```
+
+- **Remix / SvelteKit / 기타 프레임워크**  
+  GET 라우트에서 `key`, `contentType`을 받아 `@aws-sdk/client-s3`의 `PutObjectCommand`와 `@aws-sdk/s3-request-presigner`의 `getSignedUrl`로 presigned URL을 생성한 뒤, `{ presignedUrl, publicUrl, key }` 형태로 JSON 응답하면 동일하게 사용할 수 있습니다. CORS가 필요한 경우 해당 도메인을 허용해 두세요.
+
 ---
 
 ### 파일명 커스터마이징
@@ -360,24 +459,12 @@ const imageUrl = await s3Uploader(imageFile);
 
 ### 데이터 내부 동영상 임베딩
 
-동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "...", previewWidth?, previewHeight? } }` 형태로 블록이 유지됩니다.
+동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "..." } }` 형태로 블록이 유지됩니다.
 
-- **재생**: 화면에서 동영상을 재생하려면 `allowVideoUpload={true}`로 두어야 합니다. LumirEditor는 **커스텀 비디오 블록**을 사용하여 플레이어를 렌더링합니다.
+- **재생**: 화면에서 동영상을 재생하려면 `allowVideoUpload={true}`로 두어야 합니다. 이렇게 해야 video 확장이 활성화되어 BlockNote 기본 플레이어가 렌더링됩니다.
 - `allowVideoUpload={false}`인 상태에서 initialContent에 video 블록만 넣으면 데이터는 보존되지만, 재생 UI는 비활성화된 확장 때문에 표시되지 않을 수 있습니다.
 - **지원 URL**: 비디오 블록의 `url`은 **직접 재생 가능한 비디오 파일 URL**만 지원합니다(예: S3에 업로드된 `.mp4`, `.webm`, `.ogg`). YouTube·Vimeo 등 스트리밍 페이지 URL(`youtube.com/watch?v=...` 등)은 `<video>` 요소의 `src`로 재생되지 않으므로, 해당 링크를 video 블록 URL로 넣으면 재생되지 않습니다. YouTube 임베드가 필요하면 별도 embed 블록 또는 iframe 삽입 방식을 고려해야 합니다.
 
-### 비디오 플레이어 동작 (커스텀 블록)
-
-LumirEditor의 비디오 블록은 BlockNote 기본 플레이어를 대체한 **커스텀 비디오 블록**입니다.
-
-| 항목 | 동작 |
-|------|------|
-| **더보기 / 다운로드** | 미노출 (UI에서 제거됨) |
-| **우클릭 메뉴** | 비디오 영역에서 컨텍스트 메뉴 비활성화 |
-| **사이즈 조절** | 편집 모드에서 좌·우·하단 리사이즈 핸들로 크기 조절 가능. `previewWidth`, `previewHeight`로 블록에 저장됨 (기본 640×360) |
-
-블록 데이터에 `previewWidth`(px), `previewHeight`(px)가 없으면 기본값이 적용됩니다.
-
 ---
 
 ## 이미지·동영상 업로드 상세 가이드
@@ -460,7 +547,29 @@ LumirEditor의 비디오 블록은 BlockNote 기본 플레이어를 대체한 **
 />
 ```
 
-동영상은 같은 `s3Upload`로 업로드되며, 서버에서 경로를 구분하려면 `path`를 `"media"`로 두거나, `fileNameTransform`에서 이미지/동영상에 따라 다른 prefix를 붙이면 됩니다.
+동영상은 같은 `s3Upload`로 업로드됩니다. 서버에서 이미지와 동영상을 다른 경로에 두고 싶다면 아래처럼 `fileNameTransform`으로 prefix를 분리하면 됩니다.
+
+**이미지·동영상 업로드 경로 분리 (fileNameTransform)**
+
+`fileNameTransform`의 두 번째 인자 `file`로 이미지/동영상을 구분해, 파일명 앞에 폴더 prefix를 붙이면 됩니다. 최종 S3 키는 `{env}/{path}/{filename}` 이므로, `filename`에 `images/...` / `videos/...` 를 넣으면 경로가 나뉩니다.
+
+```tsx
+<LumirEditor
+  allowVideoUpload={true}
+  s3Upload={{
+    apiEndpoint: "/api/s3/presigned",
+    env: "production",
+    path: "uploads", // 공통 상위 경로
+    appendUUID: true,
+    fileNameTransform: (nameWithoutExt, file) => {
+      const isVideo = file.type.startsWith("video/");
+      return `${isVideo ? "videos" : "images"}/${nameWithoutExt}`;
+    },
+  }}
+/>
+```
+
+결과 예: 이미지 → `production/uploads/images/photo_abc123.png`, 동영상 → `production/uploads/videos/clip_def456.mp4`
 
 **커스텀 업로더로 이미지·동영상 통합**
 
@@ -504,17 +613,14 @@ LumirEditor의 비디오 블록은 BlockNote 기본 플레이어를 대체한 **
 {
   "type": "video",
   "props": {
-    "url": "https://your-cdn.com/videos/clip_xxx.mp4",
-    "previewWidth": 640,
-    "previewHeight": 360
+    "url": "https://your-cdn.com/videos/clip_xxx.mp4"
   },
   "content": [],
   "children": []
 }
 ```
 
-- `url`: 필수. 브라우저에서 직접 재생 가능한 URL이어야 합니다. YouTube/Vimeo 링크가 아니라, 업로드 후 받은 `.mp4` 등 직접 재생 URL만 지원합니다.
-- `previewWidth`, `previewHeight`: 선택. 픽셀 단위. 없으면 기본 640×360이 적용되며, 에디터에서 리사이즈하면 저장됩니다.
+`url`은 반드시 **브라우저에서 직접 재생 가능한 URL**이어야 합니다. 동영상은 YouTube/Vimeo 링크가 아니라, 업로드 후 받은 `.mp4` 등 직접 재생 URL만 지원합니다.
 
 ### 6. 삭제 시 콜백
 
@@ -1222,6 +1328,19 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.8
+
+- Redme update (video & image upload)
+- 버전 배포
+
+### v0.4.6
+
+- **README: S3 Presigned URL API**
+  - Next.js App Router용 `app/api/s3/presigned/route.ts` 구현 예시 추가 (PutObjectCommand, getSignedUrl)
+  - Next.js가 아닌 프로젝트: Express 예시 및 Remix/SvelteKit 등 동일 패턴 안내
+- **README: 이미지·동영상 업로드 경로 분리**
+  - `fileNameTransform`으로 이미지/동영상 prefix 분리 (`images/`, `videos/`) 예시 및 결과 경로 설명 추가
+
 ### v0.4.5
 
 - **README: 이미지·동영상 업로드**

package/dist/index.d.mts

@@ -260,38 +260,6 @@ declare const HtmlPreviewBlock: {
     }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
 };
 declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
-    video: {
-        config: {
-            readonly type: "video";
-            readonly propSchema: {
-                readonly url: {
-                    readonly default: "";
-                };
-                readonly previewWidth: {
-                    readonly default: 640;
-                };
-                readonly previewHeight: {
-                    readonly default: 360;
-                };
-            };
-            readonly content: "none";
-        };
-        implementation: _blocknote_core.TiptapBlockImplementation<{
-            readonly type: "video";
-            readonly propSchema: {
-                readonly url: {
-                    readonly default: "";
-                };
-                readonly previewWidth: {
-                    readonly default: 640;
-                };
-                readonly previewHeight: {
-                    readonly default: 360;
-                };
-            };
-            readonly content: "none";
-        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
-    };
     htmlPreview: {
         config: {
             readonly type: "htmlPreview";
@@ -380,6 +348,38 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             readonly content: "none";
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
+    video: {
+        config: {
+            readonly type: "video";
+            readonly propSchema: {
+                readonly url: {
+                    readonly default: "";
+                };
+                readonly previewWidth: {
+                    readonly default: 640;
+                };
+                readonly previewHeight: {
+                    readonly default: 360;
+                };
+            };
+            readonly content: "none";
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            readonly type: "video";
+            readonly propSchema: {
+                readonly url: {
+                    readonly default: "";
+                };
+                readonly previewWidth: {
+                    readonly default: 640;
+                };
+                readonly previewHeight: {
+                    readonly default: 360;
+                };
+            };
+            readonly content: "none";
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";

package/dist/index.d.ts

@@ -260,38 +260,6 @@ declare const HtmlPreviewBlock: {
     }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
 };
 declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
-    video: {
-        config: {
-            readonly type: "video";
-            readonly propSchema: {
-                readonly url: {
-                    readonly default: "";
-                };
-                readonly previewWidth: {
-                    readonly default: 640;
-                };
-                readonly previewHeight: {
-                    readonly default: 360;
-                };
-            };
-            readonly content: "none";
-        };
-        implementation: _blocknote_core.TiptapBlockImplementation<{
-            readonly type: "video";
-            readonly propSchema: {
-                readonly url: {
-                    readonly default: "";
-                };
-                readonly previewWidth: {
-                    readonly default: 640;
-                };
-                readonly previewHeight: {
-                    readonly default: 360;
-                };
-            };
-            readonly content: "none";
-        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
-    };
     htmlPreview: {
         config: {
             readonly type: "htmlPreview";
@@ -380,6 +348,38 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             readonly content: "none";
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
+    video: {
+        config: {
+            readonly type: "video";
+            readonly propSchema: {
+                readonly url: {
+                    readonly default: "";
+                };
+                readonly previewWidth: {
+                    readonly default: 640;
+                };
+                readonly previewHeight: {
+                    readonly default: 360;
+                };
+            };
+            readonly content: "none";
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            readonly type: "video";
+            readonly propSchema: {
+                readonly url: {
+                    readonly default: "";
+                };
+                readonly previewWidth: {
+                    readonly default: 640;
+                };
+                readonly previewHeight: {
+                    readonly default: 360;
+                };
+            };
+            readonly content: "none";
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";

package/dist/index.js

@@ -1018,39 +1018,48 @@ var VideoBlockCard = ({
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, [resizeParams, localWidth, localHeight, onWidthChange, onHeightChange]);
-  const handleLeftDown = (0, import_react4.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setResizeParams({
-      handleUsed: "left",
-      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
-      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
-      initialClientX: e.clientX,
-      initialClientY: e.clientY
-    });
-  }, [localHeight]);
-  const handleRightDown = (0, import_react4.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setResizeParams({
-      handleUsed: "right",
-      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
-      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
-      initialClientX: e.clientX,
-      initialClientY: e.clientY
-    });
-  }, [localHeight]);
-  const handleBottomDown = (0, import_react4.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setResizeParams({
-      handleUsed: "bottom",
-      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
-      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
-      initialClientX: e.clientX,
-      initialClientY: e.clientY
-    });
-  }, [localHeight]);
+  const handleLeftDown = (0, import_react4.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setResizeParams({
+        handleUsed: "left",
+        initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+        initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+        initialClientX: e.clientX,
+        initialClientY: e.clientY
+      });
+    },
+    [localHeight]
+  );
+  const handleRightDown = (0, import_react4.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setResizeParams({
+        handleUsed: "right",
+        initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+        initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+        initialClientX: e.clientX,
+        initialClientY: e.clientY
+      });
+    },
+    [localHeight]
+  );
+  const handleBottomDown = (0, import_react4.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setResizeParams({
+        handleUsed: "bottom",
+        initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+        initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+        initialClientX: e.clientX,
+        initialClientY: e.clientY
+      });
+    },
+    [localHeight]
+  );
   const resizeCursor = resizeParams ? resizeParams.handleUsed === "bottom" ? "ns-resize" : "ew-resize" : "default";
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -1107,6 +1116,7 @@ var VideoBlockCard = ({
                 {
                   src: url,
                   controls: true,
+                  controlsList: "nodownload",
                   playsInline: true,
                   style: {
                     width: "100%",
@@ -1561,9 +1571,9 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
 var schema = import_core.BlockNoteSchema.create({
   blockSpecs: {
     ...import_core.defaultBlockSpecs,
-    video: VideoBlock,
     htmlPreview: HtmlPreviewBlock,
-    linkPreview: LinkPreviewBlock
+    linkPreview: LinkPreviewBlock,
+    video: VideoBlock
   },
   inlineContentSpecs: import_core.defaultInlineContentSpecs,
   styleSpecs: import_core.defaultStyleSpecs