@jvs-milkdown/components 1.0.0 → 1.1.0

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

@@ -7,10 +7,17 @@ import {
   addRowAfterCommand,
   addRowBeforeCommand,
   deleteSelectedCellsCommand,
+  mergeCellsCommand,
   selectColCommand,
   selectRowCommand,
   setAlignCommand,
 } from '@jvs-milkdown/preset-gfm'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import {
+  CellSelection,
+  selectedRect,
+  splitCellWithType,
+} from '@jvs-milkdown/prose/tables'
 
 import type { Refs } from './types'
 
@@ -19,67 +26,43 @@ export function useOperation(
   ctx?: Ctx,
   getPos?: () => number | undefined
 ) {
-  const {
-    xLineHandleRef,
-    contentWrapperRef,
-    colHandleRef,
-    rowHandleRef,
-    hoverIndex,
-    lineHoverIndex,
-  } = refs
-
-  const onAddRow = () => {
-    if (!ctx) return
-    const xHandle = xLineHandleRef.value
-    if (!xHandle) return
+  const { contentWrapperRef, hoverIndex } = refs
 
-    const [rowIndex] = lineHoverIndex.value!
-    if (rowIndex < 0) return
-
-    if (!ctx.get(editorViewCtx).editable) return
+  const addRowByIndex = (index: number) => {
+    if (!ctx || !ctx.get(editorViewCtx).editable) return
 
     const rows = Array.from(
       contentWrapperRef.value?.querySelectorAll('tr') ?? []
     )
     const commands = ctx.get(commandsCtx)
     const pos = (getPos?.() ?? 0) + 1
-    if (rows.length === rowIndex) {
-      commands.call(selectRowCommand.key, { pos, index: rowIndex - 1 })
+    if (rows.length === index) {
+      commands.call(selectRowCommand.key, { pos, index: index - 1 })
       commands.call(addRowAfterCommand.key)
     } else {
-      commands.call(selectRowCommand.key, { pos, index: rowIndex })
+      commands.call(selectRowCommand.key, { pos, index })
       commands.call(addRowBeforeCommand.key)
     }
 
-    commands.call(selectRowCommand.key, { pos, index: rowIndex })
-    xHandle.dataset.show = 'false'
+    commands.call(selectRowCommand.key, { pos, index })
   }
 
-  const onAddCol = () => {
-    if (!ctx) return
-    const xHandle = xLineHandleRef.value
-    if (!xHandle) return
-
-    const [_, colIndex] = lineHoverIndex.value!
-    if (colIndex < 0) return
-
-    if (!ctx.get(editorViewCtx).editable) return
-
+  const addColByIndex = (index: number) => {
+    if (!ctx || !ctx.get(editorViewCtx).editable) return
     const cols = Array.from(
       contentWrapperRef.value?.querySelector('tr')?.children ?? []
     )
     const commands = ctx.get(commandsCtx)
 
     const pos = (getPos?.() ?? 0) + 1
-    if (cols.length === colIndex) {
-      commands.call(selectColCommand.key, { pos, index: colIndex - 1 })
+    if (cols.length === index) {
+      commands.call(selectColCommand.key, { pos, index: index - 1 })
       commands.call(addColAfterCommand.key)
     } else {
-      commands.call(selectColCommand.key, { pos, index: colIndex })
+      commands.call(selectColCommand.key, { pos, index })
       commands.call(addColBeforeCommand.key)
     }
-
-    commands.call(selectColCommand.key, { pos, index: colIndex })
+    commands.call(selectColCommand.key, { pos, index })
   }
 
   const selectCol = () => {
@@ -88,11 +71,6 @@ export function useOperation(
     const commands = ctx.get(commandsCtx)
     const pos = (getPos?.() ?? 0) + 1
     commands.call(selectColCommand.key, { pos, index: colIndex })
-    const buttonGroup =
-      colHandleRef.value?.querySelector<HTMLElement>('.button-group')
-    if (buttonGroup)
-      buttonGroup.dataset.show =
-        buttonGroup.dataset.show === 'true' ? 'false' : 'true'
   }
 
   const selectRow = () => {
@@ -101,11 +79,6 @@ export function useOperation(
     const commands = ctx.get(commandsCtx)
     const pos = (getPos?.() ?? 0) + 1
     commands.call(selectRowCommand.key, { pos, index: rowIndex })
-    const buttonGroup =
-      rowHandleRef.value?.querySelector<HTMLElement>('.button-group')
-    if (buttonGroup && rowIndex > 0)
-      buttonGroup.dataset.show =
-        buttonGroup.dataset.show === 'true' ? 'false' : 'true'
   }
 
   const deleteSelected = (e: PointerEvent) => {
@@ -137,12 +110,98 @@ export function useOperation(
       })
     }
 
+  const onMergeCells = (e: PointerEvent) => {
+    if (!ctx) return
+    if (!ctx.get(editorViewCtx).editable) return
+    e.preventDefault()
+    e.stopPropagation()
+    const commands = ctx.get(commandsCtx)
+    commands.call(mergeCellsCommand.key)
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
+  }
+
+  const onSplitCell = (e: PointerEvent) => {
+    if (!ctx) return
+    if (!ctx.get(editorViewCtx).editable) return
+    e.preventDefault()
+    e.stopPropagation()
+    const view = ctx.get(editorViewCtx)
+    const { state } = view
+    const { selection } = state
+
+    // Find the merged cell
+    let cellNode: ReturnType<typeof selection.$from.node> | null = null
+    let cellPos: number | null = null
+
+    if (selection instanceof CellSelection) {
+      selection.forEachCell((cell, pos) => {
+        if (
+          !cellNode &&
+          ((cell.attrs.rowspan ?? 1) > 1 || (cell.attrs.colspan ?? 1) > 1)
+        ) {
+          cellNode = cell
+          cellPos = pos
+        }
+      })
+    } else {
+      const { $from } = selection
+      for (let d = $from.depth; d > 0; d--) {
+        const n = $from.node(d)
+        if (n.type.name === 'table_cell' || n.type.name === 'table_header') {
+          cellNode = n
+          cellPos = $from.before(d)
+          break
+        }
+      }
+    }
+
+    if (!cellNode || cellPos == null) return
+    if (
+      (cellNode.attrs.colspan ?? 1) == 1 &&
+      (cellNode.attrs.rowspan ?? 1) == 1
+    )
+      return
+
+    // Set selection to TextSelection inside the merged cell.
+    // This avoids the prosemirror-tables bug where splitCell creates
+    // a CellSelection using unmapped positions after the split.
+    const $cellPos = state.doc.resolve(cellPos + 2)
+    view.dispatch(state.tr.setSelection(TextSelection.near($cellPos)))
+
+    // Use splitCellWithType to produce correct cell types per row.
+    // prosemirror-tables' splitCell always uses the merged cell's type
+    // (e.g. table_header) for ALL new cells, but milkdown's schema
+    // requires table_header in table_header_row and table_cell in
+    // table_row. Without this, inserts into body rows fail due to
+    // schema mismatch, corrupting the table.
+    const newState = view.state
+    const { table } = selectedRect(newState)
+    const { schema } = newState
+
+    splitCellWithType(({ row }) => {
+      const rowNode = table.child(row)
+      return rowNode.type.name === 'table_header_row'
+        ? schema.nodes.table_header!
+        : schema.nodes.table_cell!
+    })(newState, (tr) => {
+      view.dispatch(tr)
+    })
+
+    requestAnimationFrame(() => {
+      view.focus()
+    })
+  }
+
   return {
-    onAddRow,
-    onAddCol,
+    addRowByIndex,
+    addColByIndex,
     selectCol,
     selectRow,
     deleteSelected,
     onAlign,
+    onMergeCells,
+    onSplitCell,
   }
 }

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

@@ -1,162 +1,10 @@
 import type { EditorView } from '@jvs-milkdown/prose/view'
 
-import { computePosition, offset } from '@floating-ui/dom'
-import { throttle } from 'lodash-es'
-
 import type { Refs } from './types'
 
-import {
-  computeColHandlePositionByIndex,
-  computeRowHandlePositionByIndex,
-  findPointerIndex,
-  getRelatedDOM,
-} from './utils'
-
-function createPointerMoveHandler(
-  refs: Refs,
-  view?: EditorView
-): (e: PointerEvent) => void {
-  return throttle((e: PointerEvent) => {
-    if (!view?.editable) return
-    const {
-      contentWrapperRef,
-      yLineHandleRef,
-      xLineHandleRef,
-      colHandleRef,
-      rowHandleRef,
-      hoverIndex,
-      lineHoverIndex,
-    } = refs
-    const yHandle = yLineHandleRef.value
-    if (!yHandle) return
-    const xHandle = xLineHandleRef.value
-    if (!xHandle) return
-    const content = contentWrapperRef.value
-    if (!content) return
-    const rowHandle = rowHandleRef.value
-    if (!rowHandle) return
-    const colHandle = colHandleRef.value
-    if (!colHandle) return
-
-    const index = findPointerIndex(e, view)
-    if (!index) return
-
-    const dom = getRelatedDOM(contentWrapperRef, index)
-    if (!dom) return
-
-    const [rowIndex, colIndex] = index
-    const boundary = dom.col.getBoundingClientRect()
-    const closeToBoundaryLeft = Math.abs(e.clientX - boundary.left) < 8
-    const closeToBoundaryRight = Math.abs(boundary.right - e.clientX) < 8
-    const closeToBoundaryTop = Math.abs(e.clientY - boundary.top) < 8
-    const closeToBoundaryBottom = Math.abs(boundary.bottom - e.clientY) < 8
-
-    const closeToBoundary =
-      closeToBoundaryLeft ||
-      closeToBoundaryRight ||
-      closeToBoundaryTop ||
-      closeToBoundaryBottom
-
-    const rowButtonGroup = rowHandle.querySelector<HTMLElement>('.button-group')
-    const colButtonGroup = colHandle.querySelector<HTMLElement>('.button-group')
-    if (rowButtonGroup) rowButtonGroup.dataset.show = 'false'
-    if (colButtonGroup) colButtonGroup.dataset.show = 'false'
-
-    if (closeToBoundary) {
-      const contentBoundary = content.getBoundingClientRect()
-      rowHandle.dataset.show = 'false'
-      colHandle.dataset.show = 'false'
-      xHandle.dataset.displayType = 'tool'
-      yHandle.dataset.displayType = 'tool'
-
-      const yHandleWidth = yHandle.getBoundingClientRect().width
-      const xHandleHeight = xHandle.getBoundingClientRect().height
-
-      // display vertical line handle
-      if (closeToBoundaryLeft || closeToBoundaryRight) {
-        lineHoverIndex.value![1] = closeToBoundaryLeft ? colIndex : colIndex + 1
-        computePosition(dom.col, yHandle, {
-          placement: closeToBoundaryLeft ? 'left' : 'right',
-          middleware: [offset(closeToBoundaryLeft ? -1 * yHandleWidth : 0)],
-        })
-          .then(({ x }) => {
-            yHandle.dataset.show = 'true'
-            Object.assign(yHandle.style, {
-              height: `${contentBoundary.height}px`,
-              left: `${x}px`,
-            })
-          })
-          .catch(console.error)
-      } else {
-        yHandle.dataset.show = 'false'
-      }
-
-      // display horizontal line handle
-      // won't display if the row is the header row
-      if (index[0] !== 0 && (closeToBoundaryTop || closeToBoundaryBottom)) {
-        lineHoverIndex.value![0] = closeToBoundaryTop ? rowIndex : rowIndex + 1
-        computePosition(dom.row, xHandle, {
-          placement: closeToBoundaryTop ? 'top' : 'bottom',
-          middleware: [offset(closeToBoundaryTop ? -1 * xHandleHeight : 0)],
-        })
-          .then(({ y }) => {
-            xHandle.dataset.show = 'true'
-            Object.assign(xHandle.style, {
-              width: `${contentBoundary.width}px`,
-              top: `${y}px`,
-            })
-          })
-          .catch(console.error)
-      } else {
-        xHandle.dataset.show = 'false'
-      }
-
-      return
-    }
-
-    lineHoverIndex.value = [-1, -1]
-
-    yHandle.dataset.show = 'false'
-    xHandle.dataset.show = 'false'
-    rowHandle.dataset.show = 'true'
-    colHandle.dataset.show = 'true'
-
-    computeRowHandlePositionByIndex({
-      refs,
-      index,
-    })
-    computeColHandlePositionByIndex({
-      refs,
-      index,
-    })
-    hoverIndex.value = index
-  }, 20)
-}
-
-function createPointerLeaveHandler(refs: Refs): () => void {
-  return () => {
-    const { rowHandleRef, colHandleRef, yLineHandleRef, xLineHandleRef } = refs
-    setTimeout(() => {
-      const rowHandle = rowHandleRef.value
-      if (!rowHandle) return
-      const colHandle = colHandleRef.value
-      if (!colHandle) return
-      const yHandle = yLineHandleRef.value
-      if (!yHandle) return
-      const xHandle = xLineHandleRef.value
-      if (!xHandle) return
-
-      rowHandle.dataset.show = 'false'
-      colHandle.dataset.show = 'false'
-      yHandle.dataset.show = 'false'
-      xHandle.dataset.show = 'false'
-    }, 200)
-  }
-}
-
-export function usePointerHandlers(refs: Refs, view?: EditorView) {
-  const pointerMove = createPointerMoveHandler(refs, view)
-  const pointerLeave = createPointerLeaveHandler(refs)
+export function usePointerHandlers(_refs: Refs, _view?: EditorView) {
+  const pointerMove = (_e: PointerEvent) => {}
+  const pointerLeave = () => {}
 
   return {
     pointerMove,

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

@@ -17,18 +17,12 @@ export interface DragContext {
   contentRoot: HTMLTableSectionElement
   yHandle: HTMLDivElement
   xHandle: HTMLDivElement
-  colHandle: HTMLDivElement
-  rowHandle: HTMLDivElement
 }
 
 export interface Refs {
   dragPreviewRef: Ref<HTMLDivElement | undefined>
   tableWrapperRef: Ref<HTMLDivElement | undefined>
   contentWrapperRef: Ref<HTMLElement | undefined>
-  yLineHandleRef: Ref<HTMLDivElement | undefined>
-  xLineHandleRef: Ref<HTMLDivElement | undefined>
-  colHandleRef: Ref<HTMLDivElement | undefined>
-  rowHandleRef: Ref<HTMLDivElement | undefined>
   hoverIndex: Ref<CellIndex>
   lineHoverIndex: Ref<CellIndex>
   dragInfo: Ref<DragInfo | undefined>

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

@@ -2,7 +2,6 @@ import type { Node } from '@jvs-milkdown/prose/model'
 import type { EditorView } from '@jvs-milkdown/prose/view'
 import type { Ref } from 'vue'
 
-import { computePosition } from '@floating-ui/dom'
 import { findParent } from '@jvs-milkdown/prose'
 import { CellSelection, findTable } from '@jvs-milkdown/prose/tables'
 
@@ -98,15 +97,7 @@ export function recoveryStateBetweenUpdate(
   if (selection.isColSelection()) {
     const { $head } = selection
     const colIndex = $head.index($head.depth - 1)
-    computeColHandlePositionByIndex({
-      refs,
-      index: [0, colIndex],
-      before: (handleDOM) => {
-        handleDOM
-          .querySelector('.button-group')
-          ?.setAttribute('data-show', 'true')
-      },
-    })
+    refs.hoverIndex.value = [0, colIndex]
     return
   }
   if (selection.isRowSelection()) {
@@ -117,76 +108,6 @@ export function recoveryStateBetweenUpdate(
     )($head)
     if (!rowNode) return
     const rowIndex = findNodeIndex(table.node, rowNode.node)
-    computeRowHandlePositionByIndex({
-      refs,
-      index: [rowIndex, 0],
-      before: (handleDOM) => {
-        if (rowIndex > 0)
-          handleDOM
-            .querySelector('.button-group')
-            ?.setAttribute('data-show', 'true')
-      },
-    })
+    refs.hoverIndex.value = [rowIndex, 0]
   }
 }
-
-interface ComputeHandlePositionByIndexProps {
-  refs: Refs
-  index: CellIndex
-  before?: (handleDOM: HTMLDivElement) => void
-  after?: (handleDOM: HTMLDivElement) => void
-}
-
-export function computeColHandlePositionByIndex({
-  refs,
-  index,
-  before,
-  after,
-}: ComputeHandlePositionByIndexProps) {
-  const { contentWrapperRef, colHandleRef, hoverIndex } = refs
-  const colHandle = colHandleRef.value
-  if (!colHandle) return
-
-  hoverIndex.value = index
-  const dom = getRelatedDOM(contentWrapperRef, index)
-  if (!dom) return
-  const { headerCol: col } = dom
-  colHandle.dataset.show = 'true'
-  if (before) before(colHandle)
-  computePosition(col, colHandle, { placement: 'top' })
-    .then(({ x, y }) => {
-      Object.assign(colHandle.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-      if (after) after(colHandle)
-    })
-    .catch(console.error)
-}
-
-export function computeRowHandlePositionByIndex({
-  refs,
-  index,
-  before,
-  after,
-}: ComputeHandlePositionByIndexProps) {
-  const { contentWrapperRef, rowHandleRef, hoverIndex } = refs
-  const rowHandle = rowHandleRef.value
-  if (!rowHandle) return
-
-  hoverIndex.value = index
-  const dom = getRelatedDOM(contentWrapperRef, index)
-  if (!dom) return
-  const { row } = dom
-  rowHandle.dataset.show = 'true'
-  if (before) before(rowHandle)
-  computePosition(row, rowHandle, { placement: 'left' })
-    .then(({ x, y }) => {
-      Object.assign(rowHandle.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-      if (after) after(rowHandle)
-    })
-    .catch(console.error)
-}

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

@@ -8,11 +8,14 @@ import type {
 } from '@jvs-milkdown/prose/view'
 
 import { tableSchema } from '@jvs-milkdown/preset-gfm'
-import { findParent } from '@jvs-milkdown/prose'
-import { NodeSelection, TextSelection } from '@jvs-milkdown/prose/state'
-import { CellSelection } from '@jvs-milkdown/prose/tables'
 import { $view } from '@jvs-milkdown/utils'
-import { createApp, shallowRef, type App, type ShallowRef } from 'vue'
+import {
+  createApp,
+  shallowRef,
+  triggerRef,
+  type App,
+  type ShallowRef,
+} from 'vue'
 
 import { withMeta } from '../../__internal__/meta'
 import { tableBlockConfig } from '../config'
@@ -24,6 +27,7 @@ export class TableNodeView implements NodeView {
   app: App
 
   nodeRef: ShallowRef<Node>
+  #selectionUpdateScheduled = false
 
   constructor(
     public ctx: Ctx,
@@ -59,8 +63,17 @@ export class TableNodeView implements NodeView {
   update(node: Node) {
     if (node.type !== this.node.type) return false
 
-    if (node.sameMarkup(this.node) && node.content.eq(this.node.content))
-      return false
+    if (node.sameMarkup(this.node) && node.content.eq(this.node.content)) {
+      // Content unchanged — still trigger a reactive tick for selection-based UI (cell toolbar)
+      if (!this.#selectionUpdateScheduled) {
+        this.#selectionUpdateScheduled = true
+        queueMicrotask(() => {
+          triggerRef(this.nodeRef)
+          this.#selectionUpdateScheduled = false
+        })
+      }
+      return true
+    }
 
     this.node = node
     this.nodeRef.value = node
@@ -68,63 +81,11 @@ export class TableNodeView implements NodeView {
     return true
   }
 
-  #handleClick(event: PointerEvent) {
-    const view = this.view
-    if (!view.editable) return false
-
-    const { state, dispatch } = view
-    const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
-
-    if (!pos) return false
-
-    const $pos = state.doc.resolve(pos.inside)
-    const node = findParent(
-      (node) =>
-        node.type.name === 'table_cell' || node.type.name === 'table_header'
-    )($pos)
-
-    if (!node) return false
-
-    // if the selection is a text selection, and the current node is the same as the node, return false
-    if (state.selection instanceof TextSelection) {
-      const currentNode = findParent(
-        (node) =>
-          node.type.name === 'table_cell' || node.type.name === 'table_header'
-      )(state.selection.$from)
-      if (currentNode?.node === node.node) return false
-    }
-
-    const { from } = node
-
-    const selection = NodeSelection.create(state.doc, from + 1)
-    if (state.selection.eq(selection)) return false
-
-    if (state.selection instanceof CellSelection) {
-      setTimeout(() => {
-        dispatch(state.tr.setSelection(selection).scrollIntoView())
-      }, 20)
-    } else {
-      requestAnimationFrame(() => {
-        dispatch(state.tr.setSelection(selection).scrollIntoView())
-      })
-    }
-    return true
-  }
-
   stopEvent(e: Event) {
     if (e.type === 'drop' || e.type.startsWith('drag')) return true
 
     if (e.type === 'mousedown' || e.type === 'pointerdown') {
       if (e.target instanceof Element && e.target.closest('button')) return true
-
-      const target = e.target
-      if (
-        target instanceof HTMLElement &&
-        (target.closest('th') || target.closest('td'))
-      ) {
-        const event = e as PointerEvent
-        return this.#handleClick(event)
-      }
     }
 
     return false

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2020-present Mirone
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.