@jvs-milkdown/components 1.0.0

package/src/table-block/dnd/create-drag-handler.ts

@@ -0,0 +1,99 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx } from '@jvs-milkdown/core'
+
+import type { DragContext, Refs } from '../view/types'
+
+import { prepareDndContext } from './prepare-dnd-context'
+import { clearPreview, renderPreview } from './preview'
+
+export function createDragRowHandler(refs: Refs, ctx?: Ctx) {
+  return (event: DragEvent) => {
+    handleDrag(refs, event, ctx, (context) => {
+      updateDragInfo('y', event, context, refs)
+
+      const { preview, content, previewRoot } = context
+
+      clearPreview(previewRoot)
+
+      const { hoverIndex } = refs
+      const [rowIndex] = hoverIndex.value
+      renderPreview('y', preview, previewRoot, content, rowIndex)
+    })
+  }
+}
+
+export function createDragColHandler(refs: Refs, ctx?: Ctx) {
+  return (event: DragEvent) => {
+    handleDrag(refs, event, ctx, (context) => {
+      updateDragInfo('x', event, context, refs)
+
+      const { preview, content, previewRoot } = context
+
+      const { hoverIndex } = refs
+      const [_, colIndex] = hoverIndex.value
+
+      clearPreview(previewRoot)
+
+      renderPreview('x', preview, previewRoot, content, colIndex)
+    })
+  }
+}
+
+function updateDragInfo(
+  axis: 'x' | 'y',
+  event: DragEvent,
+  context: DragContext,
+  refs: Refs
+) {
+  const { xHandle, yHandle, colHandle, rowHandle, preview } = context
+  xHandle.dataset.displayType = axis === 'y' ? 'indicator' : 'none'
+  yHandle.dataset.displayType = axis === 'x' ? 'indicator' : 'none'
+
+  if (axis === 'y') {
+    colHandle.dataset.show = 'false'
+    hideButtonGroup(rowHandle)
+  } else {
+    rowHandle.dataset.show = 'false'
+    hideButtonGroup(colHandle)
+  }
+
+  const { hoverIndex, dragInfo } = refs
+  const [rowIndex, colIndex] = hoverIndex.value
+
+  dragInfo.value = {
+    startCoords: [event.clientX, event.clientY],
+    startIndex: axis === 'y' ? rowIndex : colIndex,
+    endIndex: axis === 'y' ? rowIndex : colIndex,
+    type: axis === 'y' ? 'row' : 'col',
+  }
+
+  preview.dataset.direction = axis === 'y' ? 'vertical' : 'horizontal'
+}
+
+function handleDrag(
+  refs: Refs,
+  event: DragEvent,
+  ctx: Ctx | undefined,
+  fn: (context: DragContext) => void
+) {
+  const view = ctx?.get(editorViewCtx)
+  if (!view?.editable) return
+
+  event.stopPropagation()
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+
+  const context = prepareDndContext(refs)
+
+  if (!context) return
+
+  // This is to avoid a chrome bug:
+  // https://stackoverflow.com/questions/14203734/dragend-dragenter-and-dragleave-firing-off-immediately-when-i-drag
+  requestAnimationFrame(() => {
+    fn(context)
+  })
+}
+
+function hideButtonGroup(handle: HTMLElement) {
+  handle.querySelector('.button-group')?.setAttribute('data-show', 'false')
+}

package/src/table-block/dnd/drag-over-handler.ts

@@ -0,0 +1,113 @@
+import { computePosition, offset } from '@floating-ui/dom'
+import { throttle } from 'lodash-es'
+
+import type { Refs } from '../view/types'
+
+import { getRelatedDOM } from '../view/utils'
+import { getDragOverColumn, getDragOverRow } from './calc-drag-over'
+import { prepareDndContext } from './prepare-dnd-context'
+
+export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
+  return throttle((e: DragEvent) => {
+    const context = prepareDndContext(refs)
+    if (!context) return
+    const { preview, content, contentRoot, xHandle, yHandle } = context
+    const { dragInfo, hoverIndex } = refs
+
+    if (preview.dataset.show === 'false') return
+    const dom = getRelatedDOM(refs.contentWrapperRef, hoverIndex.value!)
+    if (!dom) return
+    const firstRow = contentRoot.querySelector('tr')
+    if (!firstRow) return
+    const info = dragInfo.value
+    if (!info) return
+
+    if (!contentRoot.offsetParent) return
+
+    const wrapperOffsetTop = (contentRoot.offsetParent as HTMLElement).offsetTop
+    const wrapperOffsetLeft = (contentRoot.offsetParent as HTMLElement)
+      .offsetLeft
+
+    if (info.type === 'col') {
+      const width = dom.col.getBoundingClientRect().width
+      const { left, width: fullWidth } = contentRoot.getBoundingClientRect()
+      const leftGap = wrapperOffsetLeft - left
+      const previewLeft = e.clientX + leftGap - width / 2
+
+      const [startX] = info.startCoords
+      const direction = startX < e.clientX ? 'right' : 'left'
+
+      preview.style.top = `${wrapperOffsetTop}px`
+      const previewLeftOffset =
+        previewLeft < left + leftGap - 20
+          ? left + leftGap - 20
+          : previewLeft > left + fullWidth + leftGap - width + 20
+            ? left + fullWidth + leftGap - width + 20
+            : previewLeft
+
+      preview.style.left = `${previewLeftOffset}px`
+
+      const dragOverColumn = getDragOverColumn(contentRoot, e.clientX)
+      if (dragOverColumn) {
+        const [col, index] = dragOverColumn
+        const yHandleWidth = yHandle.getBoundingClientRect().width
+        const contentBoundary = content.getBoundingClientRect()
+        info.endIndex = index
+
+        computePosition(col, yHandle, {
+          placement: direction === 'left' ? 'left' : 'right',
+          middleware: [offset(direction === 'left' ? -1 * yHandleWidth : 0)],
+        })
+          .then(({ x }) => {
+            yHandle.dataset.show = 'true'
+            Object.assign(yHandle.style, {
+              height: `${contentBoundary.height}px`,
+              left: `${x}px`,
+              top: `${wrapperOffsetTop}px`,
+            })
+          })
+          .catch(console.error)
+      }
+    } else if (info.type === 'row') {
+      const height = dom.row.getBoundingClientRect().height
+      const { top, height: fullHeight } = contentRoot.getBoundingClientRect()
+
+      const topGap = wrapperOffsetTop - top
+      const previewTop = e.clientY + topGap - height / 2
+
+      const [_, startY] = info.startCoords
+      const direction = startY < e.clientY ? 'down' : 'up'
+
+      const previewTopOffset =
+        previewTop < top + topGap - 20
+          ? top + topGap - 20
+          : previewTop > top + fullHeight + topGap - height + 20
+            ? top + fullHeight + topGap - height + 20
+            : previewTop
+
+      preview.style.top = `${previewTopOffset}px`
+      preview.style.left = `${wrapperOffsetLeft}px`
+
+      const dragOverRow = getDragOverRow(contentRoot, e.clientY)
+      if (dragOverRow) {
+        const [row, index] = dragOverRow
+        const xHandleHeight = xHandle.getBoundingClientRect().height
+        const contentBoundary = content.getBoundingClientRect()
+        info.endIndex = index
+
+        computePosition(row, xHandle, {
+          placement: direction === 'up' ? 'top' : 'bottom',
+          middleware: [offset(direction === 'up' ? -1 * xHandleHeight : 0)],
+        })
+          .then(({ y }) => {
+            xHandle.dataset.show = 'true'
+            Object.assign(xHandle.style, {
+              width: `${contentBoundary.width}px`,
+              top: `${y}px`,
+            })
+          })
+          .catch(console.error)
+      }
+    }
+  }, 20)
+}

package/src/table-block/dnd/prepare-dnd-context.ts

@@ -0,0 +1,46 @@
+import type { DragContext, Refs } from '../view/types'
+
+export function prepareDndContext(refs: Refs): DragContext | undefined {
+  const {
+    dragPreviewRef,
+    tableWrapperRef,
+    contentWrapperRef,
+    yLineHandleRef,
+    xLineHandleRef,
+    colHandleRef,
+    rowHandleRef,
+  } = refs
+
+  const preview = dragPreviewRef.value
+  if (!preview) return
+  const wrapper = tableWrapperRef.value
+  if (!wrapper) return
+  const content = contentWrapperRef.value
+  if (!content) return
+  const contentRoot = content.querySelector('tbody')
+  if (!contentRoot) return
+  const previewRoot = preview.querySelector('tbody')
+  if (!previewRoot) return
+  const yHandle = yLineHandleRef.value
+  if (!yHandle) return
+  const xHandle = xLineHandleRef.value
+  if (!xHandle) return
+  const colHandle = colHandleRef.value
+  if (!colHandle) return
+  const rowHandle = rowHandleRef.value
+  if (!rowHandle) return
+
+  const context = {
+    preview,
+    wrapper,
+    content,
+    contentRoot,
+    previewRoot,
+    yHandle,
+    xHandle,
+    colHandle,
+    rowHandle,
+  }
+
+  return context
+}

package/src/table-block/dnd/preview.ts

@@ -0,0 +1,58 @@
+export function clearPreview(previewRoot: HTMLElement) {
+  while (previewRoot.firstChild) previewRoot.removeChild(previewRoot.firstChild)
+}
+
+export function renderPreview(
+  axis: 'x' | 'y',
+  preview: HTMLElement,
+  previewRoot: HTMLElement,
+  tableContent: HTMLElement,
+  index: number
+) {
+  const { width: tableWidth, height: tableHeight } = tableContent
+    .querySelector('tbody')!
+    .getBoundingClientRect()
+  if (axis === 'y') {
+    const rows = tableContent.querySelectorAll('tr')
+    const row = rows[index]
+    if (!row) return
+
+    previewRoot.appendChild(row.cloneNode(true))
+    const height = row.getBoundingClientRect().height
+
+    Object.assign(preview.style, {
+      width: `${tableWidth}px`,
+      height: `${height}px`,
+    })
+
+    preview.dataset.show = 'true'
+
+    return
+  }
+
+  if (axis === 'x') {
+    const rows = tableContent.querySelectorAll('tr')
+    let width: number | undefined
+
+    Array.from(rows).forEach((row) => {
+      const col = row.children[index]
+      if (!col) return
+
+      if (width === undefined) width = col.getBoundingClientRect().width
+
+      const tr = col.parentElement!.cloneNode(false)
+      const clone = col.cloneNode(true)
+      tr.appendChild(clone)
+      previewRoot.appendChild(tr)
+    })
+
+    Object.assign(preview.style, {
+      width: `${width}px`,
+      height: `${tableHeight}px`,
+    })
+
+    preview.dataset.show = 'true'
+
+    return
+  }
+}

package/src/table-block/index.ts

@@ -0,0 +1,9 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { tableBlockConfig } from './config'
+import { tableBlockView } from './view'
+
+export * from './view'
+export * from './config'
+
+export const tableBlock: MilkdownPlugin[] = [tableBlockConfig, tableBlockView]

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

@@ -0,0 +1,219 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { EditorView } from '@jvs-milkdown/prose/view'
+
+import {
+  defineComponent,
+  ref,
+  type VNodeRef,
+  h,
+  onMounted,
+  type Ref,
+} from 'vue'
+
+import type { TableBlockConfig } from '../config'
+import type { CellIndex, DragInfo, Refs } from './types'
+
+import { Icon } from '../../__internal__/components/icon'
+import { keepAlive } from '../../__internal__/keep-alive'
+import { useDragHandlers } from './drag'
+import { useOperation } from './operation'
+import { usePointerHandlers } from './pointer'
+import { recoveryStateBetweenUpdate } from './utils'
+
+keepAlive(h)
+
+type TableBlockProps = {
+  view: EditorView
+  ctx: Ctx
+  getPos: () => number | undefined
+  config: TableBlockConfig
+  onMount: (div: Element) => void
+  node: Ref<Node>
+}
+
+export const TableBlock = defineComponent<TableBlockProps>({
+  props: {
+    view: {
+      type: Object,
+      required: true,
+    },
+    ctx: {
+      type: Object,
+      required: true,
+    },
+    getPos: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    onMount: {
+      type: Function,
+      required: true,
+    },
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup({ view, node, ctx, getPos, config, onMount }) {
+    const contentWrapperRef = ref<HTMLElement>()
+    const contentWrapperFunctionRef: VNodeRef = (div) => {
+      if (div == null) return
+      if (div instanceof HTMLElement) {
+        contentWrapperRef.value = div
+        onMount(div)
+      } 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>()
+
+    const refs: Refs = {
+      dragPreviewRef,
+      tableWrapperRef,
+      contentWrapperRef,
+      yLineHandleRef,
+      xLineHandleRef,
+      colHandleRef,
+      rowHandleRef,
+      hoverIndex,
+      lineHoverIndex,
+      dragInfo,
+    }
+
+    const { pointerLeave, pointerMove } = usePointerHandlers(refs, view)
+    const { dragRow, dragCol } = useDragHandlers(refs, ctx, getPos)
+    const {
+      onAddRow,
+      onAddCol,
+      selectCol,
+      selectRow,
+      deleteSelected,
+      onAlign,
+    } = useOperation(refs, ctx, getPos)
+
+    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)
+      })
+    })
+
+    return () => {
+      return (
+        <div
+          onDragstart={(e) => e.preventDefault()}
+          onDragover={(e) => e.preventDefault()}
+          onDragleave={(e) => e.preventDefault()}
+          onPointermove={pointerMove}
+          onPointerleave={pointerLeave}
+        >
+          <div
+            data-show="false"
+            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')} />
+              </button>
+              <button type="button" onPointerdown={onAlign('center')}>
+                <Icon icon={config.renderButton('align_col_center')} />
+              </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}>
+            <div
+              data-show="false"
+              class="drag-preview"
+              data-direction="vertical"
+              ref={dragPreviewRef}
+            >
+              <table>
+                <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>
+          </div>
+        </div>
+      )
+    }
+  },
+})

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

@@ -0,0 +1,121 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { commandsCtx, editorViewCtx } from '@jvs-milkdown/core'
+import {
+  moveColCommand,
+  moveRowCommand,
+  selectColCommand,
+  selectRowCommand,
+} from '@jvs-milkdown/preset-gfm'
+import { onMounted, onUnmounted } from 'vue'
+
+import type { CellIndex, Refs } from './types'
+
+import {
+  createDragColHandler,
+  createDragRowHandler,
+} from '../dnd/create-drag-handler'
+import { createDragOverHandler } from '../dnd/drag-over-handler'
+import {
+  computeColHandlePositionByIndex,
+  computeRowHandlePositionByIndex,
+} from './utils'
+
+export function useDragHandlers(
+  refs: Refs,
+  ctx?: Ctx,
+  getPos?: () => number | undefined
+) {
+  const { dragPreviewRef, yLineHandleRef, xLineHandleRef, dragInfo } = refs
+
+  const dragRow = createDragRowHandler(refs, ctx)
+  const dragCol = createDragColHandler(refs, ctx)
+
+  const onDragEnd = () => {
+    const preview = dragPreviewRef.value
+    if (!preview) return
+
+    if (preview.dataset.show === 'false') return
+
+    const previewRoot = preview?.querySelector('tbody')
+
+    while (previewRoot?.firstChild)
+      previewRoot?.removeChild(previewRoot.firstChild)
+
+    if (preview) preview.dataset.show = 'false'
+  }
+
+  const onDrop = () => {
+    const preview = dragPreviewRef.value
+    if (!preview) return
+    const yHandle = yLineHandleRef.value
+    if (!yHandle) return
+    const xHandle = xLineHandleRef.value
+    if (!xHandle) return
+    const info = dragInfo.value
+    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'
+
+    if (info.startIndex === info.endIndex) return
+
+    const commands = ctx.get(commandsCtx)
+    const payload = {
+      from: info.startIndex,
+      to: info.endIndex,
+      pos: (getPos?.() ?? 0) + 1,
+    }
+    if (info.type === 'col') {
+      commands.call(selectColCommand.key, {
+        pos: payload.pos,
+        index: info.startIndex,
+      })
+      commands.call(moveColCommand.key, payload)
+      const index: CellIndex = [0, info.endIndex]
+      computeColHandlePositionByIndex({
+        refs,
+        index,
+      })
+    } else {
+      commands.call(selectRowCommand.key, {
+        pos: payload.pos,
+        index: info.startIndex,
+      })
+      commands.call(moveRowCommand.key, payload)
+      const index: CellIndex = [info.endIndex, 0]
+      computeRowHandlePositionByIndex({
+        refs,
+        index,
+      })
+    }
+
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
+  }
+  const onDragOver = createDragOverHandler(refs)
+
+  onMounted(() => {
+    window.addEventListener('dragover', onDragOver)
+    window.addEventListener('dragend', onDragEnd)
+    window.addEventListener('drop', onDrop)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('dragover', onDragOver)
+    window.removeEventListener('dragend', onDragEnd)
+    window.removeEventListener('drop', onDrop)
+  })
+
+  return {
+    dragRow,
+    dragCol,
+  }
+}

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

@@ -0,0 +1 @@
+export * from './view'