@lumir-company/editor 0.4.14 → 0.4.15

package/README.md

@@ -21,6 +21,7 @@
   - [업로드 진행률 표시](#업로드-진행률-표시-이미지동영상-공통)
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
+- [테이블](#테이블)
 - [HTML 미리보기](#html-미리보기)
 - [Placeholder](#placeholder)
 - [링크 프리뷰](#링크-프리뷰)
@@ -40,6 +41,7 @@
 | **S3 연동**             | Presigned URL 기반 S3 업로드 내장                                                |
 | **파일명 커스터마이징** | 업로드 파일명 변경 콜백 + UUID 자동 추가 지원                                    |
 | **로딩 스피너**         | 이미지 업로드 중 자동 스피너 표시                                                |
+| **테이블**              | Notion 스타일 행·열·셀 grip 핸들, 셀 배경색, Excel 셀 붙여넣기 지원              |
 | **성능 최적화**         | 애니메이션 비활성화로 빠른 렌더링                                                |
 | **TypeScript**          | 완전한 타입 안전성                                                               |
 | **테마 지원**           | 라이트/다크 테마 및 커스텀 테마                                                  |
@@ -894,6 +896,50 @@ const handleImageDelete = async (imageUrl: string) => {
 
 ---
 
+## 테이블
+
+슬래시 메뉴(`/`)에서 "Table"을 선택하거나 Excel/스프레드시트 셀을 붙여넣어 테이블을 만들 수 있습니다.
+
+### Notion 스타일 grip 핸들
+
+셀에 포커스하면 셀 주변에 핸들(grip)이 표시됩니다.
+
+| 위치          | 동작                                                                  |
+| ------------- | --------------------------------------------------------------------- |
+| **상단 grip** | 클릭 → 열 메뉴 (열 삭제, 왼쪽/오른쪽에 열 추가, 색) / 드래그 → 열 이동 |
+| **좌측 grip** | 클릭 → 행 메뉴 (행 삭제, 위/아래에 행 추가, 색) / 드래그 → 행 이동     |
+| **우측 grip** | hover → 셀 메뉴 (셀 배경색 등)                                         |
+
+- 행/열 메뉴가 열리면 해당 행/열 전체가 하이라이트됩니다
+- 표 우측/하단 가장자리 hover 시 행/열 추가 버튼이 표시됩니다
+
+### 셀 배경색·정렬
+
+- **단일 셀**: 우측 grip 또는 행/열 메뉴의 "색" 항목에서 셀 배경색 적용
+- **다중 셀**: 셀을 드래그로 범위 선택한 뒤 플로팅 툴바의 색상 버튼으로 일괄 적용
+- **정렬**: 셀 선택 후 툴바의 정렬 버튼으로 셀 단위 텍스트 정렬 적용
+
+### Excel/스프레드시트 붙여넣기
+
+Excel 등에서 복사한 셀 범위를 붙여넣으면(`Ctrl+V`) 이미지가 아닌 **편집 가능한 테이블**로 삽입됩니다. 셀 배경색, 글자색, 정렬, 굵게/기울임/밑줄 서식이 함께 변환됩니다.
+
+### 테이블 기능 설정 (`tables` prop)
+
+```tsx
+<LumirEditor
+  tables={{
+    splitCells: true, // 셀 병합/분할 (기본: true)
+    cellBackgroundColor: true, // 셀 배경색 (기본: true)
+    cellTextColor: true, // 셀 글자색 (기본: true)
+    headers: true, // 헤더 행/열 (기본: true)
+  }}
+/>
+```
+
+테이블 핸들 UI 전체를 끄려면 `tableHandles={false}`를 사용합니다.
+
+---
+
 ## HTML 미리보기
 
 LumirEditor는 HTML 파일을 iframe을 사용하여 미리보기할 수 있는 커스텀 블록을 제공합니다. 편집 불가능한 순수 미리보기 기능으로, HTML 문서를 안전하게 표시할 수 있습니다.
@@ -912,7 +958,7 @@ HTML 파일(`.html`, `.htm`)을 에디터에 드래그 앤 드롭하면 자동
 - **특징**:
   - 편집 불가능한 순수 미리보기
   - 접기/펼치기 기능
-  - 안전한 sandbox 처리 (`allow-same-origin`, JavaScript 실행 비활성화)
+  - 안전한 sandbox 처리 (`allow-scripts`·`allow-same-origin` 미허용 → JavaScript 실행 및 부모 페이지 접근 차단)
   - 파일명 표시
 
 #### 2. 슬래시 메뉴
@@ -926,7 +972,7 @@ HTML 파일(`.html`, `.htm`)을 에디터에 드래그 앤 드롭하면 자동
 ### 특징
 
 - **iframe 기반**: HTML 문서를 독립된 iframe에서 안전하게 렌더링
-- **Sandbox 보안**: `sandbox="allow-same-origin"` 속성으로 보안 강화 (JavaScript 실행 의도적 비활성화)
+- **Sandbox 보안**: `sandbox="allow-popups allow-forms"` — `allow-scripts`와 `allow-same-origin`을 의도적으로 제외하여 JavaScript 실행과 부모 페이지 접근을 차단
 - **접기/펼치기**: 헤더 클릭으로 미리보기 영역 토글
 - **드래그 리사이즈**: 하단 핸들을 드래그하여 높이 조절 가능 (100px ~ 1200px)
 - **새 창 열기**: HTML 문서를 새 창에서 전체 화면으로 확인
@@ -956,7 +1002,7 @@ function App() {
 ### 프로그래밍 방식으로 블록 삽입
 
 ```tsx
-import { HtmlPreview } from "@lumir-company/editor";
+import { HtmlPreviewBlock } from "@lumir-company/editor";
 
 // 에디터 인스턴스에서 직접 블록 삽입
 editor.insertBlocks([
@@ -973,7 +1019,7 @@ editor.insertBlocks([
 
 ### 주의사항
 
-- HTML 내용은 iframe의 `sandbox="allow-same-origin"` 속성으로 보안이 강화되어 있습니다
+- HTML 내용은 iframe의 `sandbox="allow-popups allow-forms"` 속성으로 보안이 강화되어 있습니다 (`allow-scripts`·`allow-same-origin` 미허용)
 - **JavaScript는 의도적으로 비활성화**되어 있습니다 (보안상 이유)
 - 외부 리소스(CSS, JS, 이미지 등)는 상대 경로가 작동하지 않을 수 있습니다
 - 인라인 CSS 스타일을 권장합니다
@@ -1093,7 +1139,9 @@ app.get("/api/link-preview", async (req, res) => {
 | `editable`         | `boolean`                           | `true`      | 편집 가능 여부                            |
 | `placeholder`      | `string`                            | `undefined` | 빈 블록 안내 텍스트                       |
 | `linkPreview`      | `{ apiEndpoint: string }`           | `undefined` | 링크 프리뷰 설정                          |
-| `theme`            | `"light" \| "dark"`                 | `"light"`   | 테마                                      |
+| `theme`            | `"light" \| "dark" \| ThemeObject`  | `"light"`   | 테마 (커스텀 테마 객체 지원)              |
+| `allowVideoUpload` | `boolean`                           | `false`     | 동영상 업로드 허용                        |
+| `tables`           | `TableConfig`                       | 모두 `true` | 테이블 기능 설정 ([테이블](#테이블) 참고) |
 | `className`        | `string`                            | `""`        | CSS 클래스                                |
 | `maxImageFileSize` | `number`                            | `undefined` | 이미지 최대 용량(바이트). 미설정 시 10MB  |
 | `maxVideoFileSize` | `number`                            | `undefined` | 동영상 최대 용량(바이트). 미설정 시 100MB |
@@ -1150,7 +1198,12 @@ interface LumirEditorProps {
   onError?: (error: LumirEditorError) => void; // 에러 발생 시 호출
 
   // 기능 설정
-  tables?: TableConfig; // 테이블 기능 설정 (splitCells, cellBackgroundColor 등)
+  tables?: {
+    splitCells?: boolean; // 셀 병합/분할 (기본: true)
+    cellBackgroundColor?: boolean; // 셀 배경색 (기본: true)
+    cellTextColor?: boolean; // 셀 글자색 (기본: true)
+    headers?: boolean; // 헤더 행/열 (기본: true)
+  };
   heading?: { levels?: (1 | 2 | 3 | 4 | 5 | 6)[] }; // 헤딩 레벨 설정 (기본: [1,2,3,4,5,6])
   defaultStyles?: boolean; // 기본 스타일 활성화 (기본: true)
   disableExtensions?: string[]; // 비활성화할 확장 기능 목록
@@ -1159,7 +1212,7 @@ interface LumirEditorProps {
 
   // === UI 설정 ===
   editable?: boolean; // 편집 가능 여부 (기본: true)
-  theme?: "light" | "dark" | ThemeObject; // 에디터 테마 (기본: "light")
+  theme?: "light" | "dark" | ThemeObject | { light: ThemeObject; dark: ThemeObject }; // 에디터 테마 (기본: "light")
   formattingToolbar?: boolean; // 서식 툴바 표시 (기본: true)
   linkToolbar?: boolean; // 링크 툴바 표시 (기본: true)
   sideMenu?: boolean; // 사이드 메뉴 표시 (기본: true)
@@ -1167,6 +1220,8 @@ interface LumirEditorProps {
   emojiPicker?: boolean; // 이모지 선택기 표시 (기본: true)
   filePanel?: boolean; // 파일 패널 표시 (기본: true)
   tableHandles?: boolean; // 테이블 핸들 표시 (기본: true)
+  floatingMenu?: boolean; // 상단 고정 플로팅 메뉴 표시 (기본: false)
+  floatingMenuPosition?: "sticky" | "fixed"; // 플로팅 메뉴 위치 (기본: "sticky")
   className?: string; // 컨테이너 CSS 클래스
 
   // === 링크 프리뷰 설정 ===
@@ -1384,7 +1439,29 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
-### v0.4.10
+### v0.4.15
+
+- **Notion 스타일 테이블 셀 색상·정렬·포커스 핸들**
+  - 셀 focus 시 상(열)·좌(행)·우(셀) gutter/grip 표시, grip 클릭으로 행·열·셀 드롭다운 메뉴 (`LumirTableHandlesController`)
+  - 셀 배경색 지원: 셀 메뉴의 "색" 항목 및 플로팅 툴바에서 다중 셀 드래그 선택 후 일괄 적용
+  - 텍스트 색·배경 vs 셀 배경을 구분한 컨텍스트 라벨 색상 컨트롤
+  - 상단 고정 툴바(FloatingMenu)의 정렬·배경색 버튼이 테이블 셀에 올바르게 적용되도록 수정
+  - 행/열 grip 메뉴가 열려 범위 하이라이트 중일 때 셀 우측 grip 미노출 처리
+
+### v0.4.14
+
+- **Excel/스프레드시트 셀 붙여넣기 → 편집 가능한 테이블**
+  - Excel 복사 시 클립보드의 비트맵 이미지가 업로드되어 테이블이 무시되던 문제 수정
+  - 클립보드 HTML에 `<table>`이 있으면 이미지보다 우선 파싱하여 실제 테이블 블록 생성
+  - Excel 서식(셀 배경, 글자색, 정렬, 굵게/기울임/밑줄)을 BlockNote 속성으로 매핑
+
+### v0.4.13
+
+- **@tiptap/core 외부화(externalize)**
+  - 번들에 포함된 @tiptap/core 중복으로 발생하던 `proseMirrorPlugins` 런타임 에러 수정
+  - `@tiptap/core`를 peerDependency로 전환하고 빌드에서 external 처리
+
+### v0.4.12
 
 - **Numbered List & Bullet List font size 14px**
   - Numbered List & Bullet List의 font size 14px로 일반 텍스트 크기와 통일성 있게 변경