feat(columns): gap 축소 + 빈 컬럼 Backspace로 해제

컬럼 간격 24→16, 컬럼 패딩 8→6 축소. 빈 컬럼에서 Backspace 시 컬럼 레이아웃 해제.

Author: teriusu-ko

src/extensions/Columns.ts

@@ -117,6 +117,37 @@ export const Columns = TiptapNode.create({
         }
         return false;
       },
+      // Backspace at start of empty column: if all columns empty → unset
+      Backspace: () => {
+        const { state } = this.editor;
+        const { from, empty } = state.selection;
+        if (!empty) return false;
+        const resolved = state.doc.resolve(from);
+        // Find columns ancestor
+        let columnsDepth = -1;
+        for (let d = resolved.depth; d > 0; d--) {
+          if (resolved.node(d).type.name === this.name) {
+            columnsDepth = d;
+            break;
+          }
+        }
+        if (columnsDepth === -1) return false;
+        // Must be at start of current textblock
+        const parentOffset = resolved.parentOffset;
+        if (parentOffset !== 0) return false;
+        // All columns must be empty
+        const columnsNode = resolved.node(columnsDepth);
+        let allEmpty = true;
+        columnsNode.descendants((node) => {
+          if (node.isTextblock && node.textContent.length > 0) {
+            allEmpty = false;
+            return false;
+          }
+          return true;
+        });
+        if (!allEmpty) return false;
+        return this.editor.chain().focus().unsetColumns().run();
+      },
     };
   },
 });

src/styles/editor.css

@@ -677,7 +677,7 @@
 /* ── 컬럼 레이아웃 ── */
 .tiptap div[data-type="columns"] {
   display: grid;
-  gap: 24px;
+  gap: 16px;
   margin: 1em 0;
 }
 
@@ -691,7 +691,7 @@
 
 .tiptap div[data-type="column"] {
   min-width: 0;
-  padding: 4px 8px;
+  padding: 4px 6px;
   border: 1px dashed var(--border);
   border-radius: 8px;
 }