@lumir-company/editor 0.4.15 → 0.4.17

package/README.md

@@ -22,6 +22,7 @@
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
 - [테이블](#테이블)
+- [글자 크기](#글자-크기)
 - [HTML 미리보기](#html-미리보기)
 - [Placeholder](#placeholder)
 - [링크 프리뷰](#링크-프리뷰)
@@ -42,6 +43,7 @@
 | **파일명 커스터마이징** | 업로드 파일명 변경 콜백 + UUID 자동 추가 지원                                    |
 | **로딩 스피너**         | 이미지 업로드 중 자동 스피너 표시                                                |
 | **테이블**              | Notion 스타일 행·열·셀 grip 핸들, 셀 배경색, Excel 셀 붙여넣기 지원              |
+| **글자 크기**           | 인라인 글자 크기 변경 (프리셋 8단계 + 기본), 구버전 호환 직렬화                  |
 | **성능 최적화**         | 애니메이션 비활성화로 빠른 렌더링                                                |
 | **TypeScript**          | 완전한 타입 안전성                                                               |
 | **테마 지원**           | 라이트/다크 테마 및 커스텀 테마                                                  |
@@ -940,6 +942,43 @@ Excel 등에서 복사한 셀 범위를 붙여넣으면(`Ctrl+V`) 이미지가
 
 ---
 
+## 글자 크기
+
+텍스트를 선택한 뒤 **포매팅 툴바** 또는 **상단 고정 툴바(FloatingMenu)** 의 글자 크기 드롭다운으로 인라인 글자 크기를 변경할 수 있습니다.
+
+- 프리셋: **기본**(14px, 스타일 제거) / 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 (px)
+- 테이블 셀 내부 텍스트에도 동일하게 적용됩니다 (인라인 스타일)
+- 외부 HTML(웹페이지·Excel 등)을 붙여넣을 때의 글자 크기는 가져오지 않습니다
+
+### 하위호환 직렬화 포맷 (중요)
+
+글자 크기는 저장 JSON에서 `styles` 맵이 아닌 **styled-text의 형제(sibling) 키 `fontSize`** 로 직렬화됩니다:
+
+```json
+{
+  "type": "paragraph",
+  "content": [
+    { "type": "text", "text": "큰 글씨", "styles": { "bold": true }, "fontSize": "18px" }
+  ]
+}
+```
+
+이유: BlockNote는 `styles` 맵에 스키마에 없는 스타일 키가 있으면 예외를 던지므로,
+`styles.fontSize`로 저장하면 **fontSize 스펙이 없는 구버전 SDK(≤0.4.15)가 해당 JSON을
+`initialContent`로 로드할 때 에디터가 크래시**합니다. 형제 키 방식은 구버전에서
+조용히 무시되어(글자 크기만 미표시) 안전하게 로드됩니다.
+
+- 에디터 로드/저장 시 변환은 자동입니다 (`initialContent` ↔ `onContentChange`)
+- BlockNote 외부 렌더러에서 저장 JSON을 직접 렌더링한다면, 공개 export된
+  `liftFontSize(blocks)`로 형제 키를 `styles.fontSize`로 복원한 뒤 사용하세요
+- 직렬화 형태 타입은 `SerializedStyledText`로 export됩니다
+
+> ⚠️ 에디터 블록 JSON을 외부로 내보내는 새 경로를 추가할 경우 반드시
+> `lowerFontSize`를 거쳐야 합니다. `styles.fontSize`가 저장 JSON에 유출되면
+> 구버전 소비 앱이 크래시합니다.
+
+---
+
 ## HTML 미리보기
 
 LumirEditor는 HTML 파일을 iframe을 사용하여 미리보기할 수 있는 커스텀 블록을 제공합니다. 편집 불가능한 순수 미리보기 기능으로, HTML 문서를 안전하게 표시할 수 있습니다.
@@ -1439,6 +1478,32 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.17
+
+- **표 행 높이(세로) 리사이즈**
+  - 행 경계 hover → 드래그로 행 높이 조절(가로 열 리사이즈와 대칭). 드래그 중 셀 높이가 마우스를 따라 실시간 반영
+  - 높이는 셀 `rowHeight` attr로 저장·라운드트립. 행/열 추가·구조 편집 시에도 보존
+- **표 블록 정렬(좌/가운데/우)**
+  - 상단 포매팅 툴바 + 블록 드래그핸들 메뉴에서 표 전체를 에디터 영역 기준 좌/가운데/우 정렬
+- **표 하단 여백 축소**: 표 아래 불필요한 예약 공백(약 16px) 제거(핸들 여백은 유지)
+- **2단 컬럼(다단) 레이아웃** *(신규)*
+  - 슬래시 메뉴 `/2단 컬럼`으로 좌우 2단 삽입, 각 단에 일반 블록 자유 배치·편집
+  - **블록 DnD**: 블록을 다른 블록의 좌/우 가장자리로 끌어다 놓으면 2단 컬럼 생성(노션식, 세로 드롭 인디케이터)
+  - 빈 컬럼/1단 columnList 자동 정리 등 문서 불변식 보호
+  - 공식 `@blocknote/xl-multi-column`(AGPL) 대신 MIT 안전 자체 구현
+  - *제한(후속 예정)*: 컬럼 안↔밖 DnD/3단 추가, 컬럼 너비 리사이즈, 다중 블록 드래그
+
+### v0.4.16
+
+- **인라인 글자 크기 (Font Size)**
+  - 포매팅 툴바·상단 고정 툴바(FloatingMenu)에 글자 크기 드롭다운 추가 (기본 + 10~28px 프리셋 8단계)
+  - 커스텀 `fontSize` 스타일 스펙 등록 (`FontSize` export)
+  - **구버전 호환 직렬화**: 저장 JSON에는 `styles.fontSize` 대신 styled-text 형제 키 `fontSize`로 기록 — fontSize 스펙이 없는 구버전 SDK(≤0.4.15)에서도 파싱 오류 없이 로드(글자 크기만 무시)
+  - `liftFontSize`/`lowerFontSize` 변환 유틸 및 `SerializedStyledText` 타입 공개 export
+- **`floatingMenu` 사용 시 팝업 포매팅 툴바 동작 개선**
+  - 일반 텍스트 선택 시 선택 팝업 툴바를 표시하지 않음 (상단 고정 툴바와 중복 + 상단 툴바에서 스타일 적용 직후 팝업이 잘못된 위치(0,0)에 재표시되던 문제 수정)
+  - 테이블 셀 컨텍스트(셀 병합·세로 정렬·셀 배경)와 이미지/노드 선택(캡션·교체·다운로드 등)은 팝업에만 있는 도구이므로 기존대로 팝업 표시
+
 ### v0.4.15
 
 - **Notion 스타일 테이블 셀 색상·정렬·포커스 핸들**

package/dist/index.d.mts

@@ -138,6 +138,53 @@ interface LumirEditorProps {
     onImageDelete?: (imageUrl: string) => void;
 }
 
+/**
+ * 글자 크기(fontSize) 직렬화 호환 레이어.
+ *
+ * 배경:
+ *  - BlockNote는 인라인 `styles` 맵에 스키마에 없는 키가 있으면
+ *    `style ${name} not found in styleSchema` 예외를 던진다(blockToNode →
+ *    styledTextToNodes). 이미 배포된 구버전 SDK(≤0.4.15, fontSize 스펙 없음)가
+ *    `styles.fontSize`가 포함된 JSON을 initialContent로 받으면 에디터 생성이
+ *    실패하며 React 트리가 크래시한다.
+ *  - 반면 styled-text 객체의 **형제(sibling) 키**는 BlockNote가 읽지 않으므로
+ *    조용히 무시된다(크래시 없음).
+ *
+ * 전략:
+ *  - 저장/전달용 JSON(onContentChange 출력)에서는 `styles.fontSize`를 형제 키
+ *    `fontSize`로 내린다(lowerFontSize).
+ *  - 로드 시(initialContent)에는 형제 키를 다시 `styles.fontSize`로 올려
+ *    신버전 에디터가 렌더링하게 한다(liftFontSize).
+ *
+ * ⚠️ 불변 규칙: 에디터 외부로 블록 JSON을 내보내는 모든 경로는 반드시
+ * lowerFontSize를 거쳐야 한다(현재 출력 표면은 onContentChange 유일).
+ * styles.fontSize가 저장 JSON에 유출되면 구버전 소비 앱이 크래시한다.
+ */
+/**
+ * 직렬화(저장) 포맷의 styled-text 항목.
+ * fontSize는 styles 맵이 아닌 형제 키로 존재한다 — 구버전 SDK(≤0.4.15)는
+ * styles만 순회하므로 이 키를 조용히 무시한다(파싱 오류 없음).
+ */
+type SerializedStyledText = {
+    type: "text";
+    text: string;
+    styles: Record<string, unknown>;
+    /** 인라인 글자 크기(예: "18px"). 구버전 SDK에서는 무시됨 */
+    fontSize?: string;
+};
+/**
+ * 출력 방향: `styles.fontSize` → 형제 키 `fontSize`.
+ * onContentChange로 내보내는 블록 JSON에 적용해 구버전 SDK 크래시를 방지한다.
+ * 입력을 변형하지 않는다(불변).
+ */
+declare function lowerFontSize(blocks: DefaultPartialBlock[]): DefaultPartialBlock[];
+/**
+ * 입력 방향: 형제 키 `fontSize` → `styles.fontSize`.
+ * initialContent를 에디터에 넘기기 전에 적용해 글자 크기를 복원한다.
+ * 입력을 변형하지 않는다(불변).
+ */
+declare function liftFontSize(blocks: DefaultPartialBlock[]): DefaultPartialBlock[];
+
 /**
  * 콘텐츠 관리 유틸리티
  * 기본 블록 생성 및 콘텐츠 검증 로직을 담당
@@ -384,6 +431,30 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             readonly content: "none";
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
+    columnList: {
+        config: {
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
+    column: {
+        config: {
+            type: "column";
+            content: "none";
+            propSchema: {};
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            type: "column";
+            content: "none";
+            propSchema: {};
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";
@@ -852,6 +923,13 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
         implementation: any;
     };
 }>, _blocknote_core.StyleSchemaFromSpecs<{
+    fontSize: {
+        config: {
+            type: string;
+            propSchema: "string";
+        };
+        implementation: _blocknote_core.StyleImplementation;
+    };
     bold: {
         config: {
             type: string;
@@ -980,6 +1058,32 @@ interface FloatingMenuProps {
  */
 declare const FloatingMenu: React.FC<FloatingMenuProps>;
 
+/**
+ * 인라인 글자 크기 커스텀 스타일.
+ *
+ * - propSchema "string": 값으로 "18px" 같은 CSS 크기를 가진다.
+ * - HTML 직렬화: `<span data-style-type="fontSize" data-value="18px" style="font-size:18px">`
+ *   (BlockNote가 data-* 속성과 파싱 규칙을 자동 생성 → 신버전 에디터 간 복사/붙여넣기 왕복 보장,
+ *   구버전 에디터는 매칭 파싱 규칙이 없어 조용히 무시)
+ *
+ * ⚠️ 저장 JSON 하위호환: BlockNote는 styles 맵에 스키마에 없는 키가 있으면
+ * `style ... not found in styleSchema` 예외를 던지므로, 저장 JSON에는
+ * styles.fontSize 대신 형제 키 fontSize로 직렬화한다.
+ * → src/utils/font-size-serialization.ts (liftFontSize/lowerFontSize) 참고.
+ */
+declare const FontSize: {
+    config: {
+        type: string;
+        propSchema: "string";
+    };
+    implementation: _blocknote_core.StyleImplementation;
+};
+/** 툴바 드롭다운에서 제공하는 프리셋 (본문 기본은 14px = "기본") */
+declare const FONT_SIZE_PRESETS: readonly ["10px", "12px", "14px", "16px", "18px", "20px", "24px", "28px"];
+type FontSizePreset = (typeof FONT_SIZE_PRESETS)[number];
+
+declare function FontSizeButton(): react_jsx_runtime.JSX.Element | null;
+
 /**
  * 색상 팔레트 상수
  * BlockNote 기본 색상 팔레트와 일치
@@ -1002,4 +1106,4 @@ declare const BACKGROUND_COLORS: ColorItem[];
  */
 declare const getHexFromColorValue: (value: string, type: "text" | "background") => string;
 
-export { BACKGROUND_COLORS, type ColorItem, ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, FloatingMenu, HtmlPreviewBlock, schema as HtmlPreviewSchema, type LinkMetadata, LinkPreviewBlock, LumirEditor, LumirEditorError, type LumirEditorProps, type LumirErrorCode, type LumirErrorDetails, type S3UploaderConfig, TEXT_COLORS, clearMetadataCache, cn, createS3Uploader, fetchLinkMetadata, getHexFromColorValue };
+export { BACKGROUND_COLORS, type ColorItem, ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, FONT_SIZE_PRESETS, FloatingMenu, FontSize, FontSizeButton, type FontSizePreset, HtmlPreviewBlock, schema as HtmlPreviewSchema, type LinkMetadata, LinkPreviewBlock, LumirEditor, LumirEditorError, type LumirEditorProps, type LumirErrorCode, type LumirErrorDetails, type S3UploaderConfig, type SerializedStyledText, TEXT_COLORS, clearMetadataCache, cn, createS3Uploader, fetchLinkMetadata, getHexFromColorValue, liftFontSize, lowerFontSize };

package/dist/index.d.ts

@@ -138,6 +138,53 @@ interface LumirEditorProps {
     onImageDelete?: (imageUrl: string) => void;
 }
 
+/**
+ * 글자 크기(fontSize) 직렬화 호환 레이어.
+ *
+ * 배경:
+ *  - BlockNote는 인라인 `styles` 맵에 스키마에 없는 키가 있으면
+ *    `style ${name} not found in styleSchema` 예외를 던진다(blockToNode →
+ *    styledTextToNodes). 이미 배포된 구버전 SDK(≤0.4.15, fontSize 스펙 없음)가
+ *    `styles.fontSize`가 포함된 JSON을 initialContent로 받으면 에디터 생성이
+ *    실패하며 React 트리가 크래시한다.
+ *  - 반면 styled-text 객체의 **형제(sibling) 키**는 BlockNote가 읽지 않으므로
+ *    조용히 무시된다(크래시 없음).
+ *
+ * 전략:
+ *  - 저장/전달용 JSON(onContentChange 출력)에서는 `styles.fontSize`를 형제 키
+ *    `fontSize`로 내린다(lowerFontSize).
+ *  - 로드 시(initialContent)에는 형제 키를 다시 `styles.fontSize`로 올려
+ *    신버전 에디터가 렌더링하게 한다(liftFontSize).
+ *
+ * ⚠️ 불변 규칙: 에디터 외부로 블록 JSON을 내보내는 모든 경로는 반드시
+ * lowerFontSize를 거쳐야 한다(현재 출력 표면은 onContentChange 유일).
+ * styles.fontSize가 저장 JSON에 유출되면 구버전 소비 앱이 크래시한다.
+ */
+/**
+ * 직렬화(저장) 포맷의 styled-text 항목.
+ * fontSize는 styles 맵이 아닌 형제 키로 존재한다 — 구버전 SDK(≤0.4.15)는
+ * styles만 순회하므로 이 키를 조용히 무시한다(파싱 오류 없음).
+ */
+type SerializedStyledText = {
+    type: "text";
+    text: string;
+    styles: Record<string, unknown>;
+    /** 인라인 글자 크기(예: "18px"). 구버전 SDK에서는 무시됨 */
+    fontSize?: string;
+};
+/**
+ * 출력 방향: `styles.fontSize` → 형제 키 `fontSize`.
+ * onContentChange로 내보내는 블록 JSON에 적용해 구버전 SDK 크래시를 방지한다.
+ * 입력을 변형하지 않는다(불변).
+ */
+declare function lowerFontSize(blocks: DefaultPartialBlock[]): DefaultPartialBlock[];
+/**
+ * 입력 방향: 형제 키 `fontSize` → `styles.fontSize`.
+ * initialContent를 에디터에 넘기기 전에 적용해 글자 크기를 복원한다.
+ * 입력을 변형하지 않는다(불변).
+ */
+declare function liftFontSize(blocks: DefaultPartialBlock[]): DefaultPartialBlock[];
+
 /**
  * 콘텐츠 관리 유틸리티
  * 기본 블록 생성 및 콘텐츠 검증 로직을 담당
@@ -384,6 +431,30 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
             readonly content: "none";
         }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
     };
+    columnList: {
+        config: {
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
+    column: {
+        config: {
+            type: "column";
+            content: "none";
+            propSchema: {};
+        };
+        implementation: _blocknote_core.TiptapBlockImplementation<{
+            type: "column";
+            content: "none";
+            propSchema: {};
+        }, any, _blocknote_core.InlineContentSchema, _blocknote_core.StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";
@@ -852,6 +923,13 @@ declare const schema: BlockNoteSchema<_blocknote_core.BlockSchemaFromSpecs<{
         implementation: any;
     };
 }>, _blocknote_core.StyleSchemaFromSpecs<{
+    fontSize: {
+        config: {
+            type: string;
+            propSchema: "string";
+        };
+        implementation: _blocknote_core.StyleImplementation;
+    };
     bold: {
         config: {
             type: string;
@@ -980,6 +1058,32 @@ interface FloatingMenuProps {
  */
 declare const FloatingMenu: React.FC<FloatingMenuProps>;
 
+/**
+ * 인라인 글자 크기 커스텀 스타일.
+ *
+ * - propSchema "string": 값으로 "18px" 같은 CSS 크기를 가진다.
+ * - HTML 직렬화: `<span data-style-type="fontSize" data-value="18px" style="font-size:18px">`
+ *   (BlockNote가 data-* 속성과 파싱 규칙을 자동 생성 → 신버전 에디터 간 복사/붙여넣기 왕복 보장,
+ *   구버전 에디터는 매칭 파싱 규칙이 없어 조용히 무시)
+ *
+ * ⚠️ 저장 JSON 하위호환: BlockNote는 styles 맵에 스키마에 없는 키가 있으면
+ * `style ... not found in styleSchema` 예외를 던지므로, 저장 JSON에는
+ * styles.fontSize 대신 형제 키 fontSize로 직렬화한다.
+ * → src/utils/font-size-serialization.ts (liftFontSize/lowerFontSize) 참고.
+ */
+declare const FontSize: {
+    config: {
+        type: string;
+        propSchema: "string";
+    };
+    implementation: _blocknote_core.StyleImplementation;
+};
+/** 툴바 드롭다운에서 제공하는 프리셋 (본문 기본은 14px = "기본") */
+declare const FONT_SIZE_PRESETS: readonly ["10px", "12px", "14px", "16px", "18px", "20px", "24px", "28px"];
+type FontSizePreset = (typeof FONT_SIZE_PRESETS)[number];
+
+declare function FontSizeButton(): react_jsx_runtime.JSX.Element | null;
+
 /**
  * 색상 팔레트 상수
  * BlockNote 기본 색상 팔레트와 일치
@@ -1002,4 +1106,4 @@ declare const BACKGROUND_COLORS: ColorItem[];
  */
 declare const getHexFromColorValue: (value: string, type: "text" | "background") => string;
 
-export { BACKGROUND_COLORS, type ColorItem, ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, FloatingMenu, HtmlPreviewBlock, schema as HtmlPreviewSchema, type LinkMetadata, LinkPreviewBlock, LumirEditor, LumirEditorError, type LumirEditorProps, type LumirErrorCode, type LumirErrorDetails, type S3UploaderConfig, TEXT_COLORS, clearMetadataCache, cn, createS3Uploader, fetchLinkMetadata, getHexFromColorValue };
+export { BACKGROUND_COLORS, type ColorItem, ContentUtils, type DefaultPartialBlock, EditorConfig, type EditorType, FONT_SIZE_PRESETS, FloatingMenu, FontSize, FontSizeButton, type FontSizePreset, HtmlPreviewBlock, schema as HtmlPreviewSchema, type LinkMetadata, LinkPreviewBlock, LumirEditor, LumirEditorError, type LumirEditorProps, type LumirErrorCode, type LumirErrorDetails, type S3UploaderConfig, type SerializedStyledText, TEXT_COLORS, clearMetadataCache, cn, createS3Uploader, fetchLinkMetadata, getHexFromColorValue, liftFontSize, lowerFontSize };