@jvs-milkdown/components 1.0.0 → 1.1.0

package/src/table-block/view/component.tsx

@@ -2,12 +2,15 @@ import type { Ctx } from '@jvs-milkdown/ctx'
 import type { Node } from '@jvs-milkdown/prose/model'
 import type { EditorView } from '@jvs-milkdown/prose/view'
 
+import { computePosition } from '@floating-ui/dom'
+import { CellSelection } from '@jvs-milkdown/prose/tables'
 import {
   defineComponent,
   ref,
   type VNodeRef,
   h,
   onMounted,
+  onBeforeUnmount,
   type Ref,
 } from 'vue'
 
@@ -61,33 +64,54 @@ export const TableBlock = defineComponent<TableBlockProps>({
   },
   setup({ view, node, ctx, getPos, config, onMount }) {
     const contentWrapperRef = ref<HTMLElement>()
+    let contentMounted = false
     const contentWrapperFunctionRef: VNodeRef = (div) => {
       if (div == null) return
       if (div instanceof HTMLElement) {
         contentWrapperRef.value = div
-        onMount(div)
+        if (!contentMounted) {
+          onMount(div)
+          contentMounted = true
+        }
       } else {
         contentWrapperRef.value = undefined
       }
     }
-    const colHandleRef = ref<HTMLDivElement>()
-    const rowHandleRef = ref<HTMLDivElement>()
-    const xLineHandleRef = ref<HTMLDivElement>()
-    const yLineHandleRef = ref<HTMLDivElement>()
     const tableWrapperRef = ref<HTMLDivElement>()
     const dragPreviewRef = ref<HTMLDivElement>()
     const hoverIndex = ref<CellIndex>([0, 0])
     const lineHoverIndex = ref<CellIndex>([-1, -1])
     const dragInfo = ref<DragInfo>()
 
+    // --- Column resize state ---
+    const resizingCol = ref(-1)
+    const colWidths = ref<number[]>([])
+
+    const syncColWidths = () => {
+      if (resizingCol.value >= 0) return
+      const firstRow = node.value.firstChild
+      if (!firstRow) return
+      const colCount = firstRow.content.childCount
+      const widths: number[] = []
+      const hasBounds = colBounds.value.length === colCount
+      for (let i = 0; i < colCount; i++) {
+        const cell = firstRow.content.child(i)
+        const w = cell.attrs.colwidth
+        if (Array.isArray(w) && w[0]) {
+          widths.push(w[0])
+        } else if (hasBounds) {
+          widths.push(Math.round(colBounds.value[i]!.width))
+        } else {
+          widths.push(0)
+        }
+      }
+      colWidths.value = widths
+    }
+
     const refs: Refs = {
       dragPreviewRef,
       tableWrapperRef,
       contentWrapperRef,
-      yLineHandleRef,
-      xLineHandleRef,
-      colHandleRef,
-      rowHandleRef,
       hoverIndex,
       lineHoverIndex,
       dragInfo,
@@ -98,20 +122,270 @@ export const TableBlock = defineComponent<TableBlockProps>({
     const {
       onAddRow,
       onAddCol,
+      addRowByIndex,
+      addColByIndex,
       selectCol,
       selectRow,
       deleteSelected,
       onAlign,
+      onMergeCells,
+      onSplitCell,
     } = useOperation(refs, ctx, getPos)
 
+    // --- Floating cell toolbar state ---
+    const cellToolbarRef = ref<HTMLDivElement>()
+    const showCellToolbar = ref(false)
+    const canMerge = ref(false)
+    const canSplit = ref(false)
+
+    const updateCellToolbar = () => {
+      const { selection } = view.state
+      const tablePos = getPos()
+      if (tablePos == null) {
+        showCellToolbar.value = false
+        return
+      }
+      const tableEnd = tablePos + node.value.nodeSize
+      if (selection.from < tablePos || selection.from > tableEnd) {
+        showCellToolbar.value = false
+        return
+      }
+
+      if (selection instanceof CellSelection) {
+        // Compute merge/split availability
+        let _cellCount = 0
+        let hasMerged = false
+        selection.forEachCell((cell) => {
+          _cellCount++
+          if ((cell.attrs.rowspan ?? 1) > 1 || (cell.attrs.colspan ?? 1) > 1) {
+            hasMerged = true
+          }
+        })
+        canMerge.value = _cellCount > 1
+        canSplit.value = hasMerged
+      } else {
+        // TextSelection: only show toolbar for CellSelection-based actions
+        showCellToolbar.value = false
+        return
+      }
+
+      if (!canMerge.value && !canSplit.value) {
+        showCellToolbar.value = false
+        return
+      }
+
+      showCellToolbar.value = true
+
+      // Position toolbar above the first selected cell using floating-ui
+      requestAnimationFrame(() => {
+        const toolbar = cellToolbarRef.value
+        const content = contentWrapperRef.value
+        if (!toolbar || !content) return
+
+        const selectedCells = content.querySelectorAll('.selectedCell')
+        let refEl: Element | null =
+          selectedCells.length > 0 ? selectedCells[0]! : null
+
+        if (!refEl && !(view.state.selection instanceof CellSelection)) {
+          const { $from } = view.state.selection
+          for (let d = $from.depth; d > 0; d--) {
+            const node = $from.node(d)
+            if (
+              node.type.name === 'table_cell' ||
+              node.type.name === 'table_header'
+            ) {
+              const cellPos = $from.before(d)
+              const dom = view.nodeDOM(cellPos)
+              if (dom instanceof HTMLElement) refEl = dom
+              break
+            }
+          }
+        }
+
+        if (!refEl) return
+
+        computePosition(refEl, toolbar, { placement: 'top' })
+          .then(({ x, y }) => {
+            toolbar.style.left = `${x}px`
+            toolbar.style.top = `${y}px`
+            toolbar.dataset.show = 'true'
+          })
+          .catch(console.error)
+      })
+    }
+
+    const colBounds = ref<{ left: number; width: number }[]>([])
+    const rowBounds = ref<{ top: number; height: number }[]>([])
+
+    let ro: ResizeObserver | null = null
+    let mo: MutationObserver | null = null
+
+    const updateBounds = () => {
+      const content = contentWrapperRef.value
+      if (!content) return
+
+      const firstRow = content.querySelector('tr')
+      const tableRect = content.getBoundingClientRect()
+
+      if (firstRow) {
+        colBounds.value = Array.from(firstRow.children).map((c) => {
+          const rect = c.getBoundingClientRect()
+          return { left: rect.left - tableRect.left, width: rect.width }
+        })
+      }
+
+      const rows = content.querySelectorAll('tr')
+      rowBounds.value = Array.from(rows).map((c) => {
+        const rect = c.getBoundingClientRect()
+        return { top: rect.top - tableRect.top, height: rect.height }
+      })
+      syncColWidths()
+    }
+
+    const startResize = (e: PointerEvent, colIndex: number) => {
+      if (!view.editable) return
+      e.preventDefault()
+      e.stopPropagation()
+      const startX = e.clientX
+      const startWidth = colBounds.value[colIndex]?.width ?? 100
+      resizingCol.value = colIndex
+
+      const onMove = (ev: PointerEvent) => {
+        const delta = ev.clientX - startX
+        const newWidth = Math.max(50, startWidth + delta)
+        colWidths.value = colWidths.value.map((w, i) =>
+          i === colIndex ? newWidth : w
+        )
+      }
+
+      const onUp = (ev: PointerEvent) => {
+        document.removeEventListener('pointermove', onMove)
+        document.removeEventListener('pointerup', onUp)
+
+        const delta = ev.clientX - startX
+        const newWidth = Math.max(50, startWidth + delta)
+
+        // Commit via ProseMirror transaction
+        const tablePos = getPos()
+        if (tablePos == null) {
+          resizingCol.value = -1
+          return
+        }
+        const tableNode = node.value
+        let tr = view.state.tr
+        let pos = tablePos + 1
+
+        tableNode.forEach((row) => {
+          let cellIdx = 0
+          row.forEach((cell, _offset, cellNodePos) => {
+            if (cellIdx === colIndex) {
+              const absPos = tablePos + 1 + cellNodePos
+              const colwidth = [Math.round(newWidth)]
+              tr = tr.setNodeMarkup(absPos, undefined, {
+                ...cell.attrs,
+                colwidth,
+              })
+            }
+            cellIdx++
+          })
+          pos += row.nodeSize
+        })
+
+        resizingCol.value = -1
+        if (tr.docChanged) view.dispatch(tr)
+      }
+
+      document.addEventListener('pointermove', onMove)
+      document.addEventListener('pointerup', onUp)
+    }
+
+    const activeColIndex = ref(-1)
+    const activeRowIndex = ref(-1)
+
+    // Listen for ProseMirror state updates
+    const dispatchListener = () => {
+      updateCellToolbar()
+
+      // Update active handler button groups based on selection
+      const { selection } = view.state
+      if (selection instanceof CellSelection) {
+        if (selection.isColSelection()) {
+          const { $head } = selection
+          activeColIndex.value = $head.index($head.depth - 1)
+          activeRowIndex.value = -1
+        } else if (selection.isRowSelection()) {
+          activeColIndex.value = -1
+          // Simple approach for row index: derive from hoverIndex which is updated by pointer? Or compute.
+          // recoveryStateBetweenUpdate updates hoverIndex.
+        } else {
+          activeColIndex.value = -1
+          activeRowIndex.value = -1
+        }
+      } else {
+        activeColIndex.value = -1
+        activeRowIndex.value = -1
+      }
+    }
+
     onMounted(() => {
       requestAnimationFrame(() => {
-        // This is a wordaround to keep the popover open when click the select col/row button
         if (view.editable) recoveryStateBetweenUpdate(refs, view, node.value)
+        syncColWidths()
+      })
+      view.dom.addEventListener('keyup', dispatchListener)
+      view.dom.addEventListener('pointerup', dispatchListener)
+      updateCellToolbar()
+
+      ro = new ResizeObserver(() => {
+        requestAnimationFrame(updateBounds)
       })
+      mo = new MutationObserver((mutations) => {
+        let shouldUpdate = false
+        for (const mut of mutations) {
+          if (mut.type === 'childList') {
+            for (const node of mut.addedNodes) {
+              if (
+                node instanceof HTMLElement &&
+                ['TR', 'TD', 'TH', 'TBODY'].includes(node.nodeName)
+              )
+                shouldUpdate = true
+            }
+            for (const node of mut.removedNodes) {
+              if (
+                node instanceof HTMLElement &&
+                ['TR', 'TD', 'TH', 'TBODY'].includes(node.nodeName)
+              )
+                shouldUpdate = true
+            }
+          } else if (mut.type === 'attributes') {
+            shouldUpdate = true
+          }
+        }
+        if (shouldUpdate) {
+          requestAnimationFrame(updateBounds)
+        }
+      })
+
+      if (contentWrapperRef.value) {
+        ro.observe(contentWrapperRef.value)
+        mo.observe(contentWrapperRef.value, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+        })
+      }
+    })
+
+    onBeforeUnmount(() => {
+      view.dom.removeEventListener('keyup', dispatchListener)
+      view.dom.removeEventListener('pointerup', dispatchListener)
+      if (ro) ro.disconnect()
+      if (mo) mo.disconnect()
     })
 
     return () => {
+      updateCellToolbar()
+
       return (
         <div
           onDragstart={(e) => e.preventDefault()}
@@ -119,63 +393,204 @@ export const TableBlock = defineComponent<TableBlockProps>({
           onDragleave={(e) => e.preventDefault()}
           onPointermove={pointerMove}
           onPointerleave={pointerLeave}
+          class="milkdown-table-wrapper-outer"
         >
+          {/* Floating cell toolbar (merge/split) */}
           <div
-            data-show="false"
+            ref={cellToolbarRef}
+            data-show={showCellToolbar.value ? 'true' : 'false'}
+            class="cell-toolbar"
             contenteditable="false"
-            draggable="true"
-            data-role="col-drag-handle"
-            class="handle cell-handle"
-            onDragstart={dragCol}
-            onClick={selectCol}
             onPointerdown={(e: PointerEvent) => e.stopPropagation()}
-            onPointermove={(e: PointerEvent) => e.stopPropagation()}
-            ref={colHandleRef}
           >
-            <Icon icon={config.renderButton('col_drag_handle')} />
-            <div
-              data-show="false"
-              class="button-group"
-              onPointermove={(e: PointerEvent) => e.stopPropagation()}
-            >
-              <button type="button" onPointerdown={onAlign('left')}>
-                <Icon icon={config.renderButton('align_col_left')} />
+            {canMerge.value && (
+              <button
+                type="button"
+                class="cell-toolbar-btn"
+                onPointerdown={onMergeCells}
+              >
+                <Icon icon={config.renderButton('merge_cells')} />
               </button>
-              <button type="button" onPointerdown={onAlign('center')}>
-                <Icon icon={config.renderButton('align_col_center')} />
+            )}
+            {canSplit.value && (
+              <button
+                type="button"
+                class="cell-toolbar-btn"
+                onPointerdown={onSplitCell}
+              >
+                <Icon icon={config.renderButton('split_cell')} />
               </button>
-              <button type="button" onPointerdown={onAlign('right')}>
-                <Icon icon={config.renderButton('align_col_right')} />
-              </button>
-              <button type="button" onPointerdown={deleteSelected}>
-                <Icon icon={config.renderButton('delete_col')} />
-              </button>
-            </div>
-          </div>
-          <div
-            data-show="false"
-            contenteditable="false"
-            draggable="true"
-            data-role="row-drag-handle"
-            class="handle cell-handle"
-            onDragstart={dragRow}
-            onClick={selectRow}
-            onPointerdown={(e: PointerEvent) => e.stopPropagation()}
-            onPointermove={(e: PointerEvent) => e.stopPropagation()}
-            ref={rowHandleRef}
-          >
-            <Icon icon={config.renderButton('row_drag_handle')} />
-            <div
-              data-show="false"
-              class="button-group"
-              onPointermove={(e: PointerEvent) => e.stopPropagation()}
-            >
-              <button type="button" onPointerdown={deleteSelected}>
-                <Icon icon={config.renderButton('delete_row')} />
-              </button>
-            </div>
+            )}
           </div>
+
           <div class="table-wrapper" ref={tableWrapperRef}>
+            {/* Fixed Col Drag Handles */}
+            <div contenteditable="false" class="fixed-handles-col">
+              {colBounds.value.map((bound, i) => (
+                <div
+                  key={`col-${i}`}
+                  class="handle cell-handle fixed"
+                  data-role="col-drag-handle"
+                  draggable="true"
+                  style={{ left: `${bound.left}px`, width: `${bound.width}px` }}
+                  onDragstart={(e) => {
+                    hoverIndex.value = [0, i]
+                    dragCol(e)
+                  }}
+                  onClick={(e) => {
+                    hoverIndex.value = [0, i]
+                    selectCol(e)
+                    activeColIndex.value = i
+                    activeRowIndex.value = -1
+                  }}
+                  onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                  onPointermove={(e: PointerEvent) => e.stopPropagation()}
+                >
+                  <div
+                    class="button-group"
+                    data-show={activeColIndex.value === i ? 'true' : 'false'}
+                    onPointermove={(e: PointerEvent) => e.stopPropagation()}
+                  >
+                    <button
+                      type="button"
+                      onPointerdown={(e) => {
+                        hoverIndex.value = [0, i]
+                        onAlign('left')(e)
+                      }}
+                    >
+                      <Icon icon={config.renderButton('align_col_left')} />
+                    </button>
+                    <button
+                      type="button"
+                      onPointerdown={(e) => {
+                        hoverIndex.value = [0, i]
+                        onAlign('center')(e)
+                      }}
+                    >
+                      <Icon icon={config.renderButton('align_col_center')} />
+                    </button>
+                    <button
+                      type="button"
+                      onPointerdown={(e) => {
+                        hoverIndex.value = [0, i]
+                        onAlign('right')(e)
+                      }}
+                    >
+                      <Icon icon={config.renderButton('align_col_right')} />
+                    </button>
+                    <button
+                      type="button"
+                      onPointerdown={(e) => {
+                        hoverIndex.value = [0, i]
+                        deleteSelected(e)
+                      }}
+                    >
+                      <Icon icon={config.renderButton('delete_col')} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Add Col Dots */}
+            <div contenteditable="false" class="add-dots-col">
+              {[
+                ...colBounds.value.map((b) => b.left),
+                colBounds.value.length
+                  ? colBounds.value[colBounds.value.length - 1].left +
+                    colBounds.value[colBounds.value.length - 1].width
+                  : 0,
+              ].map((left, i) => (
+                <div
+                  key={`add-col-${i}`}
+                  class="add-dot"
+                  style={{ left: `${left}px` }}
+                  onClick={() => addColByIndex(i)}
+                  onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                >
+                  <Icon icon={config.renderButton('add_col')} />
+                </div>
+              ))}
+            </div>
+
+            {/* Column Resize Handles */}
+            <div contenteditable="false" class="resize-handles-col">
+              {colBounds.value.map((bound, i) => (
+                <div
+                  key={`resize-${i}`}
+                  class={[
+                    'col-resize-handle',
+                    resizingCol.value === i ? 'active' : '',
+                  ].join(' ')}
+                  style={{
+                    left: `${bound.left + bound.width - 3}px`,
+                  }}
+                  onPointerdown={(e: PointerEvent) => startResize(e, i)}
+                />
+              ))}
+            </div>
+
+            {/* Fixed Row Drag Handles */}
+            <div contenteditable="false" class="fixed-handles-row">
+              {rowBounds.value.map((bound, i) => (
+                <div
+                  key={`row-${i}`}
+                  class="handle cell-handle fixed"
+                  data-role="row-drag-handle"
+                  draggable="true"
+                  style={{ top: `${bound.top}px`, height: `${bound.height}px` }}
+                  onDragstart={(e) => {
+                    hoverIndex.value = [i, 0]
+                    dragRow(e)
+                  }}
+                  onClick={(e) => {
+                    hoverIndex.value = [i, 0]
+                    selectRow(e)
+                    activeRowIndex.value = i
+                    activeColIndex.value = -1
+                  }}
+                  onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                >
+                  <div
+                    class="button-group"
+                    data-show={activeRowIndex.value === i ? 'true' : 'false'}
+                    onPointermove={(e: PointerEvent) => e.stopPropagation()}
+                  >
+                    <button
+                      type="button"
+                      onPointerdown={(e) => {
+                        hoverIndex.value = [i, 0]
+                        deleteSelected(e)
+                      }}
+                    >
+                      <Icon icon={config.renderButton('delete_row')} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Add Row Dots */}
+            <div contenteditable="false" class="add-dots-row">
+              {[
+                ...rowBounds.value.map((b) => b.top),
+                rowBounds.value.length
+                  ? rowBounds.value[rowBounds.value.length - 1].top +
+                    rowBounds.value[rowBounds.value.length - 1].height
+                  : 0,
+              ].map((top, i) => (
+                <div
+                  key={`add-row-${i}`}
+                  class="add-dot"
+                  style={{ top: `${top}px` }}
+                  onClick={() => addRowByIndex(i)}
+                  onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                >
+                  <Icon icon={config.renderButton('add_row')} />
+                </div>
+              ))}
+            </div>
+
             <div
               data-show="false"
               class="drag-preview"
@@ -186,31 +601,17 @@ export const TableBlock = defineComponent<TableBlockProps>({
                 <tbody></tbody>
               </table>
             </div>
-            <div
-              data-show="false"
-              contenteditable="false"
-              data-display-type="tool"
-              data-role="x-line-drag-handle"
-              class="handle line-handle"
-              ref={xLineHandleRef}
-            >
-              <button type="button" onClick={onAddRow} class="add-button">
-                <Icon icon={config.renderButton('add_row')} />
-              </button>
-            </div>
-            <div
-              data-show="false"
-              contenteditable="false"
-              data-display-type="tool"
-              data-role="y-line-drag-handle"
-              class="handle line-handle"
-              ref={yLineHandleRef}
-            >
-              <button type="button" onClick={onAddCol} class="add-button">
-                <Icon icon={config.renderButton('add_col')} />
-              </button>
-            </div>
-            <table ref={contentWrapperFunctionRef} class="children"></table>
+
+            <table ref={contentWrapperFunctionRef} class="children">
+              <colgroup>
+                {colWidths.value.map((w, i) => (
+                  <col
+                    key={i}
+                    style={w > 0 ? { width: `${w}px` } : undefined}
+                  />
+                ))}
+              </colgroup>
+            </table>
           </div>
         </div>
       )

package/src/table-block/view/drag.ts

@@ -16,10 +16,6 @@ import {
   createDragRowHandler,
 } from '../dnd/create-drag-handler'
 import { createDragOverHandler } from '../dnd/drag-over-handler'
-import {
-  computeColHandlePositionByIndex,
-  computeRowHandlePositionByIndex,
-} from './utils'
 
 export function useDragHandlers(
   refs: Refs,
@@ -56,10 +52,6 @@ export function useDragHandlers(
     if (!info) return
     if (!ctx) return
     if (preview.dataset.show === 'false') return
-    const colHandle = refs.colHandleRef.value
-    if (!colHandle) return
-    const rowHandle = refs.rowHandleRef.value
-    if (!rowHandle) return
 
     yHandle.dataset.show = 'false'
     xHandle.dataset.show = 'false'
@@ -79,10 +71,7 @@ export function useDragHandlers(
       })
       commands.call(moveColCommand.key, payload)
       const index: CellIndex = [0, info.endIndex]
-      computeColHandlePositionByIndex({
-        refs,
-        index,
-      })
+      refs.hoverIndex.value = index
     } else {
       commands.call(selectRowCommand.key, {
         pos: payload.pos,
@@ -90,10 +79,7 @@ export function useDragHandlers(
       })
       commands.call(moveRowCommand.key, payload)
       const index: CellIndex = [info.endIndex, 0]
-      computeRowHandlePositionByIndex({
-        refs,
-        index,
-      })
+      refs.hoverIndex.value = index
     }
 
     requestAnimationFrame(() => {