@lumir-company/editor 0.1.0

package/README.md

@@ -0,0 +1,191 @@
+# LumirEditor
+
+🖼️ **이미지 전용** BlockNote 기반 Rich Text 에디터
+
+## ✨ 핵심 특징
+
+- **이미지 전용**: 이미지 업로드/드래그앤드롭만 지원 (S3 연동 또는 커스텀 업로더)
+- **로딩 스피너**: 이미지 업로드 중 자동 스피너 표시
+- **애니메이션 최적화**: 기본 애니메이션 비활성화로 성능 향상
+- **TypeScript**: 완전한 타입 안전성
+- **경량화**: 비디오/오디오/파일 업로드 기능 제거
+
+## 📦 설치
+
+```bash
+npm install @lumir-company/editor
+```
+
+## 🚀 기본 사용법
+
+### 1. CSS 임포트 (필수)
+
+```tsx
+import "@lumir-company/editor/style.css";
+```
+
+### 2. 기본 사용
+
+```tsx
+import { LumirEditor } from "@lumir-company/editor";
+import "@lumir-company/editor/style.css";
+
+export default function App() {
+  return (
+    <div className="w-full h-[400px]">
+      <LumirEditor onContentChange={(blocks) => console.log(blocks)} />
+    </div>
+  );
+}
+```
+
+### 3. Next.js에서 사용 (SSR 비활성화)
+
+```tsx
+"use client";
+import dynamic from "next/dynamic";
+
+const LumirEditor = dynamic(
+  () =>
+    import("@lumir-company/editor").then((m) => ({ default: m.LumirEditor })),
+  { ssr: false }
+);
+
+export default function Editor() {
+  return (
+    <div className="w-full h-[500px]">
+      <LumirEditor />
+    </div>
+  );
+}
+```
+
+## 📚 핵심 Props
+
+| Prop              | 타입                               | 기본값    | 설명             |
+| ----------------- | ---------------------------------- | --------- | ---------------- |
+| `initialContent`  | `DefaultPartialBlock[] \| string`  | -         | 초기 콘텐츠      |
+| `onContentChange` | `(blocks) => void`                 | -         | 콘텐츠 변경 콜백 |
+| `uploadFile`      | `(file: File) => Promise<string>`  | -         | 커스텀 업로더    |
+| `s3Upload`        | `S3UploaderConfig`                 | -         | S3 업로드 설정   |
+| `className`       | `string`                           | `""`      | CSS 클래스       |
+| `theme`           | `"light" \| "dark" \| ThemeObject` | `"light"` | 에디터 테마      |
+| `editable`        | `boolean`                          | `true`    | 편집 가능 여부   |
+
+### S3 업로드 설정
+
+```tsx
+interface S3UploaderConfig {
+  apiEndpoint: string; // '/api/s3/presigned' (필수)
+  env: "development" | "production"; // 환경 (필수)
+  path: string; // 파일 경로 (필수)
+}
+```
+
+지원 이미지 파일
+"image/png", // PNG
+"image/jpeg", // JPEG/JPG  
+ "image/jpg", // JPG
+"image/gif", // GIF (애니메이션 포함)
+"image/webp", // WebP
+"image/bmp", // BMP
+"image/svg+xml", // SVG
+
+## 🖼️ 이미지 업로드 방식
+
+### 1. S3 업로드 (권장)
+
+```tsx
+<LumirEditor
+  s3Upload={{
+    apiEndpoint: "/api/s3/presigned",
+    env: "development",
+    path: "depth1/depth2/depth3",
+  }}
+  onContentChange={(blocks) => console.log(blocks)}
+/>
+```
+
+### 2. 커스텀 업로더
+
+```tsx
+<LumirEditor
+  uploadFile={async (file) => {
+    const formData = new FormData();
+    formData.append("image", file);
+    const response = await fetch("/api/upload", {
+      method: "POST",
+      body: formData,
+    });
+    return (await response.json()).url;
+  }}
+/>
+```
+
+### 3. S3 Helper 함수 사용
+
+```tsx
+import { LumirEditor, createS3Uploader } from "@lumir-company/editor";
+
+const s3Uploader = createS3Uploader({
+  apiEndpoint: "/api/s3/presigned",
+  env: "production",
+  path: "images",
+});
+
+<LumirEditor uploadFile={s3Uploader} />;
+```
+
+## 📖 주요 타입
+
+```tsx
+import type {
+  LumirEditorProps,
+  DefaultPartialBlock,
+  S3UploaderConfig,
+  ContentUtils,
+  EditorConfig,
+} from "@lumir-company/editor";
+
+// 콘텐츠 검증
+const isValidContent = ContentUtils.isValidJSONString(jsonString);
+const blocks = ContentUtils.parseJSONContent(jsonString);
+
+// 에디터 설정
+const tableConfig = EditorConfig.getDefaultTableConfig();
+const headingConfig = EditorConfig.getDefaultHeadingConfig();
+```
+
+## 💡 사용 팁
+
+```tsx
+// 1. 컨테이너 크기 설정
+<div className="h-[400px]">
+  <LumirEditor />
+</div>
+
+// 2. 읽기 전용 모드
+<LumirEditor
+  editable={false}
+  initialContent={savedContent}
+/>
+
+// 3. 테마 적용
+<LumirEditor theme="dark" />
+
+// 4. 반응형 디자인
+<div className="w-full h-64 md:h-96 lg:h-[500px]">
+  <LumirEditor className="h-full" />
+</div>
+```
+
+## ⚠️ 중요 사항
+
+1. **CSS 임포트 필수**: `import "@lumir-company/editor/style.css";`
+2. **Next.js SSR 비활성화**: `dynamic`으로 클라이언트 사이드 렌더링만 사용
+3. **이미지만 지원**: PNG, JPG, GIF, WebP, BMP, SVG (비디오/오디오/파일 ❌)
+4. **S3 설정**: 계층 구조 `{env}/{path}/{filename}`
+
+## 📄 라이선스
+
+MIT License

package/dist/index.d.mts

@@ -0,0 +1,140 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PartialBlock, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema, BlockNoteEditor } from '@blocknote/core';
+export { BlockNoteEditor, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema, PartialBlock } from '@blocknote/core';
+
+/**
+ * LumirEditor에서 사용하는 BlockNote 에디터 타입
+ */
+type EditorType = BlockNoteEditor<DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema>;
+/**
+ * LumirEditor에서 사용하는 기본 블록 타입
+ */
+type DefaultPartialBlock = PartialBlock<DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema>;
+/**
+ * LumirEditor 컴포넌트의 Props 인터페이스
+ */
+interface LumirEditorProps {
+    initialContent?: DefaultPartialBlock[] | string;
+    initialEmptyBlocks?: number;
+    placeholder?: string;
+    uploadFile?: (file: File) => Promise<string>;
+    s3Upload?: {
+        apiEndpoint: string;
+        env: "development" | "production";
+        path: string;
+    };
+    allowVideoUpload?: boolean;
+    allowAudioUpload?: boolean;
+    allowFileUpload?: boolean;
+    tables?: {
+        splitCells?: boolean;
+        cellBackgroundColor?: boolean;
+        cellTextColor?: boolean;
+        headers?: boolean;
+    };
+    heading?: {
+        levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
+    defaultStyles?: boolean;
+    disableExtensions?: string[];
+    tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
+    trailingBlock?: boolean;
+    editable?: boolean;
+    theme?: "light" | "dark" | Partial<Record<string, unknown>> | {
+        light: Partial<Record<string, unknown>>;
+        dark: Partial<Record<string, unknown>>;
+    };
+    formattingToolbar?: boolean;
+    linkToolbar?: boolean;
+    sideMenu?: boolean;
+    emojiPicker?: boolean;
+    filePanel?: boolean;
+    tableHandles?: boolean;
+    onSelectionChange?: () => void;
+    className?: string;
+    sideMenuAddButton?: boolean;
+    onContentChange?: (content: DefaultPartialBlock[]) => void;
+}
+
+/**
+ * 콘텐츠 관리 유틸리티
+ * 기본 블록 생성 및 콘텐츠 검증 로직을 담당
+ */
+declare class ContentUtils {
+    /**
+     * JSON 문자열의 유효성을 검증합니다
+     * @param jsonString 검증할 JSON 문자열
+     * @returns 유효한 JSON 문자열인지 여부
+     */
+    static isValidJSONString(jsonString: string): boolean;
+    /**
+     * JSON 문자열을 DefaultPartialBlock 배열로 파싱합니다
+     * @param jsonString JSON 문자열
+     * @returns 파싱된 블록 배열 또는 null (파싱 실패 시)
+     */
+    static parseJSONContent(jsonString: string): DefaultPartialBlock[] | null;
+    /**
+     * 기본 paragraph 블록 생성
+     * @returns 기본 설정이 적용된 DefaultPartialBlock
+     */
+    static createDefaultBlock(): DefaultPartialBlock;
+    /**
+     * 콘텐츠 유효성 검증 및 기본값 설정
+     * @param content 사용자 제공 콘텐츠 (객체 배열 또는 JSON 문자열)
+     * @param emptyBlockCount 빈 블록 개수 (기본값: 3)
+     * @returns 검증된 콘텐츠 배열
+     */
+    static validateContent(content?: DefaultPartialBlock[] | string, emptyBlockCount?: number): DefaultPartialBlock[];
+    /**
+     * 빈 블록들을 생성합니다
+     * @param emptyBlockCount 생성할 블록 개수
+     * @returns 생성된 빈 블록 배열
+     */
+    private static createEmptyBlocks;
+}
+/**
+ * 에디터 설정 관리 유틸리티
+ * 각종 설정의 기본값과 검증 로직을 담당
+ */
+declare class EditorConfig {
+    /**
+     * 테이블 설정 기본값 적용
+     * @param userTables 사용자 테이블 설정
+     * @returns 기본값이 적용된 테이블 설정
+     */
+    static getDefaultTableConfig(userTables?: LumirEditorProps["tables"]): {
+        splitCells: boolean;
+        cellBackgroundColor: boolean;
+        cellTextColor: boolean;
+        headers: boolean;
+    };
+    /**
+     * 헤딩 설정 기본값 적용
+     * @param userHeading 사용자 헤딩 설정
+     * @returns 기본값이 적용된 헤딩 설정
+     */
+    static getDefaultHeadingConfig(userHeading?: LumirEditorProps["heading"]): {
+        levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
+    /**
+     * 비활성화할 확장 기능 목록 생성
+     * @param userExtensions 사용자 정의 비활성 확장
+     * @param allowVideo 비디오 업로드 허용 여부
+     * @param allowAudio 오디오 업로드 허용 여부
+     * @param allowFile 일반 파일 업로드 허용 여부
+     * @returns 비활성화할 확장 기능 목록
+     */
+    static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
+}
+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;
+
+interface S3UploaderConfig {
+    apiEndpoint: string;
+    env: "production" | "development";
+    path: string;
+}
+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

@@ -0,0 +1,140 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PartialBlock, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema, BlockNoteEditor } from '@blocknote/core';
+export { BlockNoteEditor, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema, PartialBlock } from '@blocknote/core';
+
+/**
+ * LumirEditor에서 사용하는 BlockNote 에디터 타입
+ */
+type EditorType = BlockNoteEditor<DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema>;
+/**
+ * LumirEditor에서 사용하는 기본 블록 타입
+ */
+type DefaultPartialBlock = PartialBlock<DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema>;
+/**
+ * LumirEditor 컴포넌트의 Props 인터페이스
+ */
+interface LumirEditorProps {
+    initialContent?: DefaultPartialBlock[] | string;
+    initialEmptyBlocks?: number;
+    placeholder?: string;
+    uploadFile?: (file: File) => Promise<string>;
+    s3Upload?: {
+        apiEndpoint: string;
+        env: "development" | "production";
+        path: string;
+    };
+    allowVideoUpload?: boolean;
+    allowAudioUpload?: boolean;
+    allowFileUpload?: boolean;
+    tables?: {
+        splitCells?: boolean;
+        cellBackgroundColor?: boolean;
+        cellTextColor?: boolean;
+        headers?: boolean;
+    };
+    heading?: {
+        levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
+    defaultStyles?: boolean;
+    disableExtensions?: string[];
+    tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
+    trailingBlock?: boolean;
+    editable?: boolean;
+    theme?: "light" | "dark" | Partial<Record<string, unknown>> | {
+        light: Partial<Record<string, unknown>>;
+        dark: Partial<Record<string, unknown>>;
+    };
+    formattingToolbar?: boolean;
+    linkToolbar?: boolean;
+    sideMenu?: boolean;
+    emojiPicker?: boolean;
+    filePanel?: boolean;
+    tableHandles?: boolean;
+    onSelectionChange?: () => void;
+    className?: string;
+    sideMenuAddButton?: boolean;
+    onContentChange?: (content: DefaultPartialBlock[]) => void;
+}
+
+/**
+ * 콘텐츠 관리 유틸리티
+ * 기본 블록 생성 및 콘텐츠 검증 로직을 담당
+ */
+declare class ContentUtils {
+    /**
+     * JSON 문자열의 유효성을 검증합니다
+     * @param jsonString 검증할 JSON 문자열
+     * @returns 유효한 JSON 문자열인지 여부
+     */
+    static isValidJSONString(jsonString: string): boolean;
+    /**
+     * JSON 문자열을 DefaultPartialBlock 배열로 파싱합니다
+     * @param jsonString JSON 문자열
+     * @returns 파싱된 블록 배열 또는 null (파싱 실패 시)
+     */
+    static parseJSONContent(jsonString: string): DefaultPartialBlock[] | null;
+    /**
+     * 기본 paragraph 블록 생성
+     * @returns 기본 설정이 적용된 DefaultPartialBlock
+     */
+    static createDefaultBlock(): DefaultPartialBlock;
+    /**
+     * 콘텐츠 유효성 검증 및 기본값 설정
+     * @param content 사용자 제공 콘텐츠 (객체 배열 또는 JSON 문자열)
+     * @param emptyBlockCount 빈 블록 개수 (기본값: 3)
+     * @returns 검증된 콘텐츠 배열
+     */
+    static validateContent(content?: DefaultPartialBlock[] | string, emptyBlockCount?: number): DefaultPartialBlock[];
+    /**
+     * 빈 블록들을 생성합니다
+     * @param emptyBlockCount 생성할 블록 개수
+     * @returns 생성된 빈 블록 배열
+     */
+    private static createEmptyBlocks;
+}
+/**
+ * 에디터 설정 관리 유틸리티
+ * 각종 설정의 기본값과 검증 로직을 담당
+ */
+declare class EditorConfig {
+    /**
+     * 테이블 설정 기본값 적용
+     * @param userTables 사용자 테이블 설정
+     * @returns 기본값이 적용된 테이블 설정
+     */
+    static getDefaultTableConfig(userTables?: LumirEditorProps["tables"]): {
+        splitCells: boolean;
+        cellBackgroundColor: boolean;
+        cellTextColor: boolean;
+        headers: boolean;
+    };
+    /**
+     * 헤딩 설정 기본값 적용
+     * @param userHeading 사용자 헤딩 설정
+     * @returns 기본값이 적용된 헤딩 설정
+     */
+    static getDefaultHeadingConfig(userHeading?: LumirEditorProps["heading"]): {
+        levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
+    /**
+     * 비활성화할 확장 기능 목록 생성
+     * @param userExtensions 사용자 정의 비활성 확장
+     * @param allowVideo 비디오 업로드 허용 여부
+     * @param allowAudio 오디오 업로드 허용 여부
+     * @param allowFile 일반 파일 업로드 허용 여부
+     * @returns 비활성화할 확장 기능 목록
+     */
+    static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
+}
+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;
+
+interface S3UploaderConfig {
+    apiEndpoint: string;
+    env: "production" | "development";
+    path: string;
+}
+declare const createS3Uploader: (config: S3UploaderConfig) => (file: File) => Promise<string>;
+
+export { ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, LumirEditor, type LumirEditorProps, type S3UploaderConfig, cn, createS3Uploader };