@lumir-company/editor 0.4.5 → 0.4.6

package/README.md

@@ -18,6 +18,7 @@
   - [파일명 커스터마이징](#파일명-커스터마이징)
   - [커스텀 업로더](#2-커스텀-업로더)
 - [동영상 업로드 및 임베딩](#동영상-업로드-및-임베딩)
+  - [비디오 플레이어 동작 (커스텀 블록)](#비디오-플레이어-동작-커스텀-블록)
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
 - [HTML 미리보기](#html-미리보기)
@@ -359,12 +360,24 @@ const imageUrl = await s3Uploader(imageFile);
 
 ### 데이터 내부 동영상 임베딩
 
-동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "..." } }` 형태로 블록이 유지됩니다.
+동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "...", previewWidth?, previewHeight? } }` 형태로 블록이 유지됩니다.
 
-- **재생**: 화면에서 동영상을 재생하려면 `allowVideoUpload={true}`로 두어야 합니다. 이렇게 해야 video 확장이 활성화되어 BlockNote 기본 플레이어가 렌더링됩니다.
+- **재생**: 화면에서 동영상을 재생하려면 `allowVideoUpload={true}`로 두어야 합니다. LumirEditor는 **커스텀 비디오 블록**을 사용하여 플레이어를 렌더링합니다.
 - `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)가 없으면 기본값이 적용됩니다.
+
 ---
 
 ## 이미지·동영상 업로드 상세 가이드
@@ -491,14 +504,17 @@ const imageUrl = await s3Uploader(imageFile);
 {
   "type": "video",
   "props": {
-    "url": "https://your-cdn.com/videos/clip_xxx.mp4"
+    "url": "https://your-cdn.com/videos/clip_xxx.mp4",
+    "previewWidth": 640,
+    "previewHeight": 360
   },
   "content": [],
   "children": []
 }
 ```
 
-`url`은 반드시 **브라우저에서 직접 재생 가능한 URL**이어야 합니다. 동영상은 YouTube/Vimeo 링크가 아니라, 업로드 후 받은 `.mp4` 등 직접 재생 URL만 지원합니다.
+- `url`: 필수. 브라우저에서 직접 재생 가능한 URL이어야 합니다. YouTube/Vimeo 링크가 아니라, 업로드 후 받은 `.mp4` 등 직접 재생 URL만 지원합니다.
+- `previewWidth`, `previewHeight`: 선택. 픽셀 단위. 없으면 기본 640×360이 적용되며, 에디터에서 리사이즈하면 저장됩니다.
 
 ### 6. 삭제 시 콜백
 

package/dist/index.d.mts

@@ -260,6 +260,38 @@ 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";
@@ -758,70 +790,6 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             fileBlockAccept: string[];
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
-    video: {
-        config: {
-            type: "video";
-            propSchema: {
-                textAlignment: {
-                    default: "left";
-                    values: readonly ["left", "center", "right", "justify"];
-                };
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-                showPreview: {
-                    default: true;
-                };
-                previewWidth: {
-                    default: undefined;
-                    type: "number";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-            fileBlockAccept: string[];
-        };
-        implementation: _blocknote_core.TiptapBlockImplementation<{
-            type: "video";
-            propSchema: {
-                textAlignment: {
-                    default: "left";
-                    values: readonly ["left", "center", "right", "justify"];
-                };
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-                showPreview: {
-                    default: true;
-                };
-                previewWidth: {
-                    default: undefined;
-                    type: "number";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-            fileBlockAccept: string[];
-        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
-    };
     audio: {
         config: {
             type: "audio";

package/dist/index.d.ts

@@ -260,6 +260,38 @@ 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";
@@ -758,70 +790,6 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             fileBlockAccept: string[];
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
-    video: {
-        config: {
-            type: "video";
-            propSchema: {
-                textAlignment: {
-                    default: "left";
-                    values: readonly ["left", "center", "right", "justify"];
-                };
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-                showPreview: {
-                    default: true;
-                };
-                previewWidth: {
-                    default: undefined;
-                    type: "number";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-            fileBlockAccept: string[];
-        };
-        implementation: _blocknote_core.TiptapBlockImplementation<{
-            type: "video";
-            propSchema: {
-                textAlignment: {
-                    default: "left";
-                    values: readonly ["left", "center", "right", "justify"];
-                };
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-                showPreview: {
-                    default: true;
-                };
-                previewWidth: {
-                    default: undefined;
-                    type: "number";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-            fileBlockAccept: string[];
-        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
-    };
     audio: {
         config: {
             type: "audio";