@jvs-milkdown/components 1.0.0

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

@@ -0,0 +1,148 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { commandsCtx, editorViewCtx } from '@jvs-milkdown/core'
+import {
+  addColAfterCommand,
+  addColBeforeCommand,
+  addRowAfterCommand,
+  addRowBeforeCommand,
+  deleteSelectedCellsCommand,
+  selectColCommand,
+  selectRowCommand,
+  setAlignCommand,
+} from '@jvs-milkdown/preset-gfm'
+
+import type { Refs } from './types'
+
+export function useOperation(
+  refs: Refs,
+  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 [rowIndex] = lineHoverIndex.value!
+    if (rowIndex < 0) return
+
+    if (!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 })
+      commands.call(addRowAfterCommand.key)
+    } else {
+      commands.call(selectRowCommand.key, { pos, index: rowIndex })
+      commands.call(addRowBeforeCommand.key)
+    }
+
+    commands.call(selectRowCommand.key, { pos, index: rowIndex })
+    xHandle.dataset.show = 'false'
+  }
+
+  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 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 })
+      commands.call(addColAfterCommand.key)
+    } else {
+      commands.call(selectColCommand.key, { pos, index: colIndex })
+      commands.call(addColBeforeCommand.key)
+    }
+
+    commands.call(selectColCommand.key, { pos, index: colIndex })
+  }
+
+  const selectCol = () => {
+    if (!ctx) return
+    const [_, colIndex] = hoverIndex.value!
+    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 = () => {
+    if (!ctx) return
+    const [rowIndex, _] = hoverIndex.value!
+    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) => {
+    if (!ctx) return
+
+    if (!ctx.get(editorViewCtx).editable) return
+
+    e.preventDefault()
+    e.stopPropagation()
+    const commands = ctx.get(commandsCtx)
+    commands.call(deleteSelectedCellsCommand.key)
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
+  }
+
+  const onAlign =
+    (direction: 'left' | 'center' | 'right') => (e: PointerEvent) => {
+      if (!ctx) return
+
+      if (!ctx.get(editorViewCtx).editable) return
+
+      e.preventDefault()
+      e.stopPropagation()
+      const commands = ctx.get(commandsCtx)
+      commands.call(setAlignCommand.key, direction)
+      requestAnimationFrame(() => {
+        ctx.get(editorViewCtx).focus()
+      })
+    }
+
+  return {
+    onAddRow,
+    onAddCol,
+    selectCol,
+    selectRow,
+    deleteSelected,
+    onAlign,
+  }
+}

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

@@ -0,0 +1,165 @@
+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)
+
+  return {
+    pointerMove,
+    pointerLeave,
+  }
+}

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

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+
+export type CellIndex = [row: number, col: number]
+
+export interface DragInfo {
+  startCoords: [x: number, y: number]
+  startIndex: number
+  endIndex: number
+  type: 'row' | 'col'
+}
+
+export interface DragContext {
+  preview: HTMLDivElement
+  previewRoot: HTMLTableSectionElement
+  wrapper: HTMLDivElement
+  content: HTMLElement
+  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

@@ -0,0 +1,192 @@
+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'
+
+import type { CellIndex, Refs } from './types'
+
+function findNodeIndex(parent: Node, child: Node) {
+  for (let i = 0; i < parent.childCount; i++) {
+    if (parent.child(i) === child) return i
+  }
+  return -1
+}
+
+export function findPointerIndex(
+  event: PointerEvent,
+  view?: EditorView
+): CellIndex | undefined {
+  if (!view) return
+
+  try {
+    const posAtCoords = view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    })
+    if (!posAtCoords) return
+    const pos = posAtCoords?.inside
+    if (pos == null || pos < 0) return
+
+    const $pos = view.state.doc.resolve(pos)
+    const node = view.state.doc.nodeAt(pos)
+    if (!node) return
+
+    const cellType = ['table_cell', 'table_header']
+    const rowType = ['table_row', 'table_header_row']
+
+    const cell = cellType.includes(node.type.name)
+      ? node
+      : findParent((node) => cellType.includes(node.type.name))($pos)?.node
+    const row = findParent((node) => rowType.includes(node.type.name))(
+      $pos
+    )?.node
+    const table = findParent((node) => node.type.name === 'table')($pos)?.node
+    if (!cell || !row || !table) return
+
+    const columnIndex = findNodeIndex(row, cell)
+    const rowIndex = findNodeIndex(table, row)
+
+    return [rowIndex, columnIndex]
+  } catch {
+    return undefined
+  }
+}
+
+export function getRelatedDOM(
+  contentWrapperRef: Ref<HTMLElement | undefined>,
+  [rowIndex, columnIndex]: CellIndex
+) {
+  const content = contentWrapperRef.value
+  if (!content) return
+  const rows = content.querySelectorAll('tr')
+  const row = rows[rowIndex]
+  if (!row) return
+
+  const firstRow = rows[0]
+  if (!firstRow) return
+
+  const headerCol = firstRow.children[columnIndex]
+  if (!headerCol) return
+
+  const col = row.children[columnIndex]
+  if (!col) return
+
+  return {
+    row,
+    col,
+    headerCol,
+  }
+}
+
+export function recoveryStateBetweenUpdate(
+  refs: Refs,
+  view?: EditorView,
+  node?: Node
+) {
+  if (!node) return
+  if (!view) return
+  const { selection } = view.state
+  if (!(selection instanceof CellSelection)) return
+
+  const { $from } = selection
+  const table = findTable($from)
+  if (!table || table.node !== node) return
+
+  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')
+      },
+    })
+    return
+  }
+  if (selection.isRowSelection()) {
+    const { $head } = selection
+    const rowNode = findParent(
+      (node) =>
+        node.type.name === 'table_row' || node.type.name === 'table_header_row'
+    )($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')
+      },
+    })
+  }
+}
+
+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

@@ -0,0 +1,165 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+import type { Node } from '@jvs-milkdown/prose/model'
+import type {
+  EditorView,
+  NodeView,
+  NodeViewConstructor,
+  ViewMutationRecord,
+} 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 { withMeta } from '../../__internal__/meta'
+import { tableBlockConfig } from '../config'
+import { TableBlock } from './component'
+
+export class TableNodeView implements NodeView {
+  dom: HTMLElement
+  contentDOM: HTMLElement
+  app: App
+
+  nodeRef: ShallowRef<Node>
+
+  constructor(
+    public ctx: Ctx,
+    public node: Node,
+    public view: EditorView,
+    public getPos: () => number | undefined
+  ) {
+    const dom = document.createElement('div')
+    dom.className = 'milkdown-table-block'
+
+    const contentDOM = document.createElement('tbody')
+    this.contentDOM = contentDOM
+    contentDOM.setAttribute('data-content-dom', 'true')
+    contentDOM.classList.add('content-dom')
+    this.nodeRef = shallowRef(node)
+
+    const app = createApp(TableBlock, {
+      view,
+      ctx,
+      getPos,
+      config: ctx.get(tableBlockConfig.key),
+      onMount: (div: Element) => {
+        div.appendChild(contentDOM)
+      },
+      node: this.nodeRef,
+    })
+    app.mount(dom)
+    this.app = app
+
+    this.dom = dom
+  }
+
+  update(node: Node) {
+    if (node.type !== this.node.type) return false
+
+    if (node.sameMarkup(this.node) && node.content.eq(this.node.content))
+      return false
+
+    this.node = node
+    this.nodeRef.value = node
+
+    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
+  }
+
+  ignoreMutation(mutation: ViewMutationRecord) {
+    if (!this.dom || !this.contentDOM) return true
+
+    if ((mutation.type as unknown) === 'selection') return false
+
+    if (this.contentDOM === mutation.target && mutation.type === 'attributes')
+      return true
+
+    if (this.contentDOM.contains(mutation.target)) return false
+
+    return true
+  }
+
+  destroy() {
+    this.app.unmount()
+    this.dom.remove()
+    this.contentDOM.remove()
+  }
+}
+
+export const tableBlockView = $view(
+  tableSchema.node,
+  (ctx): NodeViewConstructor => {
+    return (initialNode, view, getPos) => {
+      return new TableNodeView(ctx, initialNode, view, getPos)
+    }
+  }
+)
+
+withMeta(tableBlockView, {
+  displayName: 'NodeView<table-block>',
+  group: 'TableBlock',
+})