@teriusu/rich-editor 0.9.5 → 0.9.7

package/dist/utils/splitCell.js

@@ -0,0 +1,74 @@
+import { TableMap, splitCellWithType } from "@tiptap/pm/tables";
+/**
+ * 셀 분할 — **헤더 표시를 원래 자리로 되돌린다**.
+ *
+ * ⚠️ 기본 `splitCell()` 은 나눈 조각을 **원래 셀 타입 그대로** 만든다. 그런데 헤더 셀과
+ * 일반 셀을 병합하면 결과가 `tableHeader` 가 되므로, 그걸 다시 나누면 **원래 일반 셀이던
+ * 자리까지 전부 헤더로 남는다.** 그 상태는 `헤더 행/열 토글` 로도 못 고친다 — 그건 행·열
+ * 전체를 뒤집는 것이라 표 한가운데 남은 헤더 셀에는 닿지 않는다(사용자 지적: "헤더표시가
+ * 남아서 없앨수가 없어").
+ *
+ * 그래서 나눌 때 **자리에 맞는 타입**을 직접 정해 준다:
+ *   · 표에 헤더 행이 있으면 → 첫 행 조각은 헤더
+ *   · 표에 헤더 열이 있으면 → 첫 열 조각은 헤더
+ *   · 그 밖은 전부 일반 셀
+ *
+ * ⚠️ "헤더 행이 있는가" 는 **병합에 끼지 않은 셀**로 판정한다. 병합 결과 셀은 그 자체가
+ * 헤더 타입일 수 있어서, 그걸 근거로 삼으면 "헤더가 있다" 고 잘못 읽는다.
+ */
+export function splitCellPreservingHeaders(editor) {
+    const { state, view } = editor;
+    const { schema, selection } = state;
+    const headerType = schema.nodes.tableHeader;
+    const cellType = schema.nodes.tableCell;
+    if (!headerType || !cellType)
+        return editor.chain().focus().splitCell().run();
+    /* 지금 셀이 속한 표를 찾는다. */
+    const $from = selection.$from;
+    let table = null;
+    for (let d = $from.depth; d > 0; d--) {
+        const node = $from.node(d);
+        if (node.type.name === "table") {
+            table = node;
+            break;
+        }
+    }
+    if (!table)
+        return editor.chain().focus().splitCell().run();
+    const map = TableMap.get(table);
+    /** (r,c) 자리의 셀. 병합된 자리는 같은 셀을 여러 번 가리킨다. */
+    const cellAt = (r, c) => {
+        const pos = map.map[r * map.width + c];
+        return pos === undefined ? null : table.nodeAt(pos);
+    };
+    /** 그 자리가 **자기 칸 하나만 차지하는** 셀인지 — 병합 셀은 근거로 쓰지 않는다. */
+    const isPlain = (r, c) => {
+        const cell = cellAt(r, c);
+        if (!cell)
+            return false;
+        const { colspan = 1, rowspan = 1 } = cell.attrs;
+        return colspan === 1 && rowspan === 1;
+    };
+    const isHeader = (r, c) => cellAt(r, c)?.type === headerType;
+    let hasHeaderRow = false;
+    for (let c = 0; c < map.width; c++) {
+        if (isPlain(0, c) && isHeader(0, c)) {
+            hasHeaderRow = true;
+            break;
+        }
+    }
+    let hasHeaderCol = false;
+    for (let r = 0; r < map.height; r++) {
+        if (isPlain(r, 0) && isHeader(r, 0)) {
+            hasHeaderCol = true;
+            break;
+        }
+    }
+    return splitCellWithType(({ row, col }) => {
+        if (hasHeaderRow && row === 0)
+            return headerType;
+        if (hasHeaderCol && col === 0)
+            return headerType;
+        return cellType;
+    })(state, view.dispatch);
+}

package/dist/utils/table.d.ts

@@ -0,0 +1,22 @@
+import type { Editor } from "@tiptap/core";
+/**
+ * 표를 넣되 **열 너비를 미리 박아 둔다**.
+ *
+ * ⚠️ 왜 필요한가 — `insertTable` 만 부르면 열에 `colwidth` 가 없다. 그 상태에서 표를
+ * 화면 폭에 맞추려면 CSS 로 `table { width: 100% }` 를 거는 수밖에 없는데, 그러면
+ * **표 전체 폭이 컨테이너에 묶여** 맨 오른쪽 열을 줄여도 앞 열들이 그만큼 늘어나
+ * 상쇄된다 — 표 크기가 안 줄어드는 것처럼 보인다(사용자 지적, A/B 로 재현:
+ * `width:100%` 없을 때 표 182px / 있을 때 407px 고정에 마지막 열만 55px).
+ *
+ * 열 너비를 처음부터 넣어 두면 **표 폭 = `colwidth` 합**이 되어, 처음엔 화면을 꽉 채우고
+ * 이후에는 어느 열이든 끌어서 표를 줄일 수 있다.
+ *
+ * ⚠️ 옛 문서의 표에는 `colwidth` 가 없다. 그쪽이 좁아지지 않도록 CSS 는
+ * **`colwidth` 가 없는 표에만** `width: 100%` 를 건다(소비 앱 `layout`/`TipTap.svelte`).
+ */
+export declare function insertTableSized(editor: Editor, opts: {
+    rows: number;
+    cols: number;
+    withHeaderRow: boolean;
+}): void;
+//# sourceMappingURL=table.d.ts.map

package/dist/utils/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/utils/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC/B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,GAC1D,IAAI,CAoCN"}

package/dist/utils/table.js

@@ -0,0 +1,68 @@
+/**
+ * 표를 넣되 **열 너비를 미리 박아 둔다**.
+ *
+ * ⚠️ 왜 필요한가 — `insertTable` 만 부르면 열에 `colwidth` 가 없다. 그 상태에서 표를
+ * 화면 폭에 맞추려면 CSS 로 `table { width: 100% }` 를 거는 수밖에 없는데, 그러면
+ * **표 전체 폭이 컨테이너에 묶여** 맨 오른쪽 열을 줄여도 앞 열들이 그만큼 늘어나
+ * 상쇄된다 — 표 크기가 안 줄어드는 것처럼 보인다(사용자 지적, A/B 로 재현:
+ * `width:100%` 없을 때 표 182px / 있을 때 407px 고정에 마지막 열만 55px).
+ *
+ * 열 너비를 처음부터 넣어 두면 **표 폭 = `colwidth` 합**이 되어, 처음엔 화면을 꽉 채우고
+ * 이후에는 어느 열이든 끌어서 표를 줄일 수 있다.
+ *
+ * ⚠️ 옛 문서의 표에는 `colwidth` 가 없다. 그쪽이 좁아지지 않도록 CSS 는
+ * **`colwidth` 가 없는 표에만** `width: 100%` 를 건다(소비 앱 `layout`/`TipTap.svelte`).
+ */
+export function insertTableSized(editor, opts) {
+    const { rows, cols, withHeaderRow } = opts;
+    editor.chain().focus().insertTable({ rows, cols, withHeaderRow }).run();
+    const per = columnWidth(editor, cols);
+    if (!per)
+        return;
+    const { state } = editor;
+    const { $from } = state.selection;
+    /* 방금 만든 표를 selection 조상에서 찾는다. */
+    let tableNode = null;
+    let tablePos = -1;
+    for (let d = $from.depth; d > 0; d--) {
+        const node = $from.node(d);
+        if (node.type.name === "table") {
+            tableNode = node;
+            tablePos = $from.before(d);
+            break;
+        }
+    }
+    const firstRow = tableNode?.firstChild;
+    if (!tableNode || !firstRow)
+        return;
+    /*
+     * 첫 행의 셀들에만 넣으면 된다 — `colwidth` 는 열 단위라 나머지 행은 따라온다.
+     * 위치: 표 시작(+1) → 첫 행 시작(+1) → 첫 셀.
+     */
+    const tr = state.tr;
+    let pos = tablePos + 2;
+    firstRow.forEach((cell) => {
+        tr.setNodeMarkup(pos, undefined, { ...cell.attrs, colwidth: [per] });
+        pos += cell.nodeSize;
+    });
+    editor.view.dispatch(tr);
+}
+/**
+ * 열 하나에 줄 픽셀 너비. 본문에서 좌우 여백을 뺀 폭을 열 수로 나눈다.
+ *
+ * ⚠️ 테두리 때문에 딱 나누어떨어지지 않는다. 조금 **작게** 잡아야 표가 컨테이너를 넘겨
+ * 가로 스크롤을 만들지 않는다.
+ */
+function columnWidth(editor, cols) {
+    const dom = editor.view.dom;
+    if (!dom?.clientWidth)
+        return null;
+    const cs = getComputedStyle(dom);
+    const inner = dom.clientWidth - parseFloat(cs.paddingLeft || "0") - parseFloat(cs.paddingRight || "0");
+    if (!Number.isFinite(inner) || inner <= 0)
+        return null;
+    /* 표 테두리(2px)와 셀 경계 몫을 덜어 낸다. */
+    const usable = inner - 2 - cols;
+    /* `cellMinWidth` 기본값(25) 아래로는 의미가 없다. */
+    return Math.max(25, Math.floor(usable / cols));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teriusu/rich-editor",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -11,6 +11,10 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./lowlight": {
+      "types": "./dist/utils/lowlight.d.ts",
+      "default": "./dist/utils/lowlight.js"
+    },
     "./styles": {
       "style": "./dist/styles/editor.css",
       "default": "./dist/styles/editor.css"
@@ -30,6 +34,7 @@
   },
   "dependencies": {
     "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-blockquote": "^3.22.2",
     "@tiptap/extension-bubble-menu": "^3.20.4",
     "@tiptap/extension-character-count": "^3.21.0",
     "@tiptap/extension-code-block-lowlight": "^3.20.5",