@lumir-company/editor 0.4.14 → 0.4.15

package/dist/style.css

@@ -1,6 +1,18 @@
-@import "@blocknote/core/fonts/inter.css";
-@import "@blocknote/mantine/style.css";
-@import "@blocknote/react/style.css";
+@import '@blocknote/core/fonts/inter.css';
+@import '@blocknote/mantine/style.css';
+@import '@blocknote/react/style.css';
+
+/* Pretendard 한글 글꼴 (가변 폰트, swap).
+   @import url()은 번들 시 @import 순서 규칙을 위반해 사용 불가 → @font-face로 로드.
+   호스트 앱이 Pretendard를 자체 로드한다면 이 블록은 제거해도 된다. */
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2')
+    format('woff2-variations');
+}
 
 .lumirEditor {
   width: 100%;
@@ -8,6 +20,15 @@
   min-width: 200px;
   overflow: visible; /* 슬래시 메뉴가 컨테이너를 넘어서 표시되도록 변경 */
   background-color: #ffffff;
+  /* 에디터 전체(본문·툴바·인-DOM 드롭다운) 한글 글꼴 Pretendard */
+  font-family:
+    'Pretendard',
+    'Noto Sans KR',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    sans-serif;
 }
 
 /* 에디터 내부 콘텐츠 영역만 스크롤 가능하게 설정 */
@@ -23,6 +44,23 @@
 .mantine-Popover-dropdown {
   z-index: 9999 !important;
 }
+
+/* 포털(body)로 빠지는 메뉴/드롭다운에도 Pretendard 적용 */
+.bn-suggestion-menu,
+.bn-slash-menu,
+.mantine-Menu-dropdown,
+.mantine-Popover-dropdown,
+.bn-table-handle-menu,
+.bn-menu-dropdown {
+  font-family:
+    'Pretendard',
+    'Noto Sans KR',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    sans-serif;
+}
 /* 포커스 상태 스타일 - 테두리 없음 */
 .lumirEditor:focus-within {
   outline: none;
@@ -36,15 +74,15 @@
 .lumirEditor .bn-editor,
 .lumirEditor .bn-inline-content {
   font-family:
-    "Pretendard",
-    "Noto Sans KR",
+    'Pretendard',
+    'Noto Sans KR',
     -apple-system,
     BlinkMacSystemFont,
-    "Segoe UI",
-    "Roboto",
-    "Oxygen",
-    "Ubuntu",
-    "Cantarell",
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
     sans-serif;
 }
 
@@ -76,24 +114,24 @@
  * `p.bn-inline-content`에 명시적으로 14px (`.bn-block-content`에 data-type이 붙음)
  */
 .lumirEditor
-  .bn-block-content[data-content-type="paragraph"]
+  .bn-block-content[data-content-type='paragraph']
   p.bn-inline-content,
 .lumirEditor
-  .bn-block-content[data-content-type="numberedListItem"]
+  .bn-block-content[data-content-type='numberedListItem']
   p.bn-inline-content,
 .lumirEditor
-  .bn-block-content[data-content-type="bulletListItem"]
+  .bn-block-content[data-content-type='bulletListItem']
   p.bn-inline-content,
 .lumirEditor
-  .bn-block-content[data-content-type="checkListItem"]
+  .bn-block-content[data-content-type='checkListItem']
   p.bn-inline-content {
   font-size: 14px;
 }
 
 /* 마커(번호·불릿)·체크 행 */
-.lumirEditor .bn-block-content[data-content-type="numberedListItem"],
-.lumirEditor .bn-block-content[data-content-type="bulletListItem"],
-.lumirEditor .bn-block-content[data-content-type="checkListItem"] {
+.lumirEditor .bn-block-content[data-content-type='numberedListItem'],
+.lumirEditor .bn-block-content[data-content-type='bulletListItem'],
+.lumirEditor .bn-block-content[data-content-type='checkListItem'] {
   font-size: 14px;
 }
 
@@ -102,7 +140,7 @@
 }
 
 /* File Panel: Embed 탭 미노출 (URL 입력 방식 비활성화) */
-.lumirEditor [data-test="embed-tab"] {
+.lumirEditor [data-test='embed-tab'] {
   display: none !important;
 }
 
@@ -114,7 +152,7 @@
 }
 
 /* 우측 정렬 시 빈 블록 placeholder 위치 수정 */
-.lumirEditor [data-text-alignment="right"] .bn-inline-content::before {
+.lumirEditor [data-text-alignment='right'] .bn-inline-content::before {
   position: relative;
   max-width: 100%;
 }
@@ -203,12 +241,12 @@
   padding: 0;
 }
 
-.lumir-floating-toolbar-wrapper[data-position="sticky"] {
+.lumir-floating-toolbar-wrapper[data-position='sticky'] {
   position: sticky;
   top: 0;
 }
 
-.lumir-floating-toolbar-wrapper[data-position="fixed"] {
+.lumir-floating-toolbar-wrapper[data-position='fixed'] {
   position: fixed;
   top: 64px;
   left: 0;
@@ -743,7 +781,7 @@
 }
 
 .lumir-color-swatch.is-active::after {
-  content: "✓";
+  content: '✓';
   position: absolute;
   top: 50%;
   left: 50%;
@@ -989,53 +1027,215 @@
 }
 
 /* 다크 테마 대응 */
-[data-color-scheme="dark"] .lumir-link-preview-card,
-.bn-container[data-color-scheme="dark"] .lumir-link-preview-card {
+[data-color-scheme='dark'] .lumir-link-preview-card,
+.bn-container[data-color-scheme='dark'] .lumir-link-preview-card {
   background-color: #292524 !important;
   border-color: #44403c !important;
 }
 
-[data-color-scheme="dark"] .lumir-link-preview-card:hover,
-.bn-container[data-color-scheme="dark"] .lumir-link-preview-card:hover {
+[data-color-scheme='dark'] .lumir-link-preview-card:hover,
+.bn-container[data-color-scheme='dark'] .lumir-link-preview-card:hover {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
 }
 
-[data-color-scheme="dark"] .lumir-link-preview-skeleton,
-.bn-container[data-color-scheme="dark"] .lumir-link-preview-skeleton {
+[data-color-scheme='dark'] .lumir-link-preview-skeleton,
+.bn-container[data-color-scheme='dark'] .lumir-link-preview-skeleton {
   background-color: #292524 !important;
   border-color: #44403c !important;
 }
 
-[data-color-scheme="dark"] .lumir-link-preview-error,
-.bn-container[data-color-scheme="dark"] .lumir-link-preview-error {
+[data-color-scheme='dark'] .lumir-link-preview-error,
+.bn-container[data-color-scheme='dark'] .lumir-link-preview-error {
   background-color: #292524 !important;
   border-color: #44403c !important;
 }
 
 /* 인용·코드·테이블 본문 14px */
-.lumirEditor .bn-block-content[data-content-type="quote"] p.bn-inline-content,
-.lumirEditor [data-content-type="quote"] blockquote {
+.lumirEditor .bn-block-content[data-content-type='quote'] p.bn-inline-content,
+.lumirEditor [data-content-type='quote'] blockquote {
   font-size: 14px;
 }
 
-.lumirEditor .bn-block-content[data-content-type="codeBlock"] pre,
-.lumirEditor .bn-block-content[data-content-type="codeBlock"] pre code {
+.lumirEditor .bn-block-content[data-content-type='codeBlock'] pre,
+.lumirEditor .bn-block-content[data-content-type='codeBlock'] pre code {
   font-size: 14px;
 }
 
-.lumirEditor .bn-editor [data-content-type="table"] th,
-.lumirEditor .bn-editor [data-content-type="table"] td,
-.lumirEditor .bn-editor [data-content-type="table"] p.bn-inline-content {
+.lumirEditor .bn-editor [data-content-type='table'] th,
+.lumirEditor .bn-editor [data-content-type='table'] td,
+.lumirEditor .bn-editor [data-content-type='table'] p.bn-inline-content {
   font-size: 14px;
 }
 
 /* 테이블 셀 세로 정렬 (VerticalAlignmentExtension) */
-.lumirEditor .bn-editor [data-content-type="table"] td[data-vertical-alignment="middle"],
-.lumirEditor .bn-editor [data-content-type="table"] th[data-vertical-alignment="middle"] {
+.lumirEditor
+  .bn-editor
+  [data-content-type='table']
+  td[data-vertical-alignment='middle'],
+.lumirEditor
+  .bn-editor
+  [data-content-type='table']
+  th[data-vertical-alignment='middle'] {
   vertical-align: middle;
 }
 
-.lumirEditor .bn-editor [data-content-type="table"] td[data-vertical-alignment="bottom"],
-.lumirEditor .bn-editor [data-content-type="table"] th[data-vertical-alignment="bottom"] {
+.lumirEditor
+  .bn-editor
+  [data-content-type='table']
+  td[data-vertical-alignment='bottom'],
+.lumirEditor
+  .bn-editor
+  [data-content-type='table']
+  th[data-vertical-alignment='bottom'] {
   vertical-align: bottom;
 }
+
+/* ==========================================================================
+   Notion 스타일 FOCUS 기반 테이블 gutter/grip (LumirTableHandlesController)
+   - 셀 focus 시: 셀 테두리 하이라이트(파란 보더, 셀을 살짝 감쌈)
+   - 상단(열)·좌측(행): 짧고 두꺼운 회색 gutter 바 / 우측(셀): 작은 파란 앵커
+   - gutter hover 시: 발판 grip 노출 → 클릭 시 드롭다운
+   - active(메뉴 열림/드래그): 발판이 파란 배경 + 흰 점
+   기본 BlockNote hover 핸들은 tableHandles={false}로 비활성.
+   ========================================================================== */
+
+/* focus된 셀 테두리 하이라이트 (셀을 ~2px 바깥에서 감싸는 비클릭 오버레이) */
+.lumirEditor .lumir-tbl-cell-focus {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 2px solid #2383e2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* gutter wrapper = hover 히트 영역. 보더에 걸쳐 중앙 배치(positioner offset -7). */
+.lumirEditor .lumir-tbl-gutter-wrap {
+  position: absolute;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.lumirEditor .lumir-tbl-gutter-wrap--col {
+  width: 34px;
+  height: 14px;
+}
+
+.lumirEditor .lumir-tbl-gutter-wrap--row,
+.lumirEditor .lumir-tbl-gutter-wrap--cell {
+  width: 14px;
+  height: 34px;
+}
+
+/* 기본 노출: 짧고 두꺼운 gutter 바. wrapper가 셀 보더에 중앙 정렬되어 있으므로,
+   gutter를 wrapper 중앙에 두면 "거터 중앙이 셀 보더선 위"에 오도록 걸쳐진다
+   (절반은 셀 안쪽, 절반은 바깥쪽). */
+.lumirEditor .lumir-tbl-gutter {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  box-sizing: border-box;
+  background-color: #c0c0c2;
+  transition: opacity 0.1s ease;
+}
+
+/* 상(top): 가로 pill — 상단 보더 중앙 */
+.lumirEditor .lumir-tbl-gutter-wrap--col .lumir-tbl-gutter {
+  width: 14px;
+  height: 4px;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+}
+
+/* 좌(left): 세로 pill — 좌측 보더 중앙 (Notion도 좌측에 표시) */
+.lumirEditor .lumir-tbl-gutter-wrap--row .lumir-tbl-gutter {
+  width: 4px;
+  height: 14px;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+}
+
+/* 우(right): Notion의 파란 선택 앵커 — 우측 보더 중앙 */
+/* 우(right): 셀 우측 보더의 파란 세로 앵커 */
+.lumirEditor .lumir-tbl-gutter-wrap--cell .lumir-tbl-gutter {
+  width: 4px;
+  height: 14px;
+  background-color: #2383e2;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+}
+
+.lumirEditor .lumir-tbl-gutter-wrap:hover .lumir-tbl-gutter {
+  opacity: 0;
+}
+
+/* 발판 grip: 기본 숨김, gutter hover 시 노출 */
+.lumirEditor .lumir-tbl-grip {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  cursor: pointer;
+  transition: opacity 0.1s ease;
+}
+
+.lumirEditor .lumir-tbl-gutter-wrap:hover .lumir-tbl-grip {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* 메뉴 열림(active) 동안 발판 유지(마우스가 떠나도) + rest 바 숨김 */
+.lumirEditor .lumir-tbl-gutter-wrap--active .lumir-tbl-grip {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lumirEditor .lumir-tbl-gutter-wrap--active .lumir-tbl-gutter {
+  opacity: 0;
+}
+
+/* 드롭다운 오픈(active)·드래그 시 발판: 배경·보더 파랑(#2383e2) + 흰 아이콘 */
+.lumirEditor .lumir-tbl-gutter-wrap--active .bn-table-handle,
+.lumirEditor .lumir-tbl-gutter-wrap--active .bn-table-cell-handle,
+.lumirEditor .lumir-tbl-grip .bn-table-handle-dragging {
+  background-color: #2383e2 !important;
+  border-color: #2383e2 !important;
+  color: #fff !important;
+}
+
+/* 발판 크기: 너비(11)↓·높이(14) 유지. 상단 발판은 90° 회전이라 너비↓ = 시각적 높이↓.
+   배경 흰색 + 보더 진하게(#999). */
+.lumirEditor .lumir-tbl-grip .bn-table-handle,
+.lumirEditor .lumir-tbl-grip .bn-table-cell-handle {
+  width: 12px;
+  min-width: 12px;
+  height: 16px;
+  padding: 0;
+  border-radius: 3px;
+  cursor: pointer; /* mantine 기본 grab → pointer */
+  background-color: #fff;
+  border: 1px solid #cfcfcf;
+  box-shadow: none; /* mantine 기본 그림자(--bn-shadow-light, 블러처럼 보임) 제거 */
+}
+
+/* hover 시에도 흰 배경 유지 (mantine hover 회색 오버라이드) */
+.lumirEditor .lumir-tbl-grip .bn-table-handle:hover,
+.lumirEditor .lumir-tbl-grip .bn-table-cell-handle:hover {
+  background-color: #fff;
+}
+
+.lumirEditor .lumir-tbl-grip .bn-table-handle svg {
+  width: 12px;
+  height: 12px;
+  margin-inline: 0;
+}
+
+.lumirEditor .lumir-tbl-grip .bn-table-cell-handle svg {
+  width: 12px;
+  height: 12px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumir-company/editor",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "private": false,
   "description": "Image-only BlockNote rich text editor with S3 upload, customizable filename transforms, UUID support, and loading spinner",
   "keywords": [
@@ -16,6 +16,7 @@
     "filename-transform",
     "uuid",
     "file-upload",
+    "table",
     "lumir"
   ],
   "main": "dist/index.js",
@@ -70,7 +71,8 @@
   "dependencies": {
     "@blocknote/core": "^0.35.0",
     "@blocknote/react": "^0.35.0",
-    "@blocknote/mantine": "^0.35.0"
+    "@blocknote/mantine": "^0.35.0",
+    "@floating-ui/react": "^0.26.28"
   },
   "devDependencies": {
     "typescript": "^5.4.0",