feat: add readonly support for table (#1416)

packages/components/src/index.ts

@@ -4,3 +4,4 @@ export * from './code-block'
 export * from './link-tooltip'
 export * from './image-inline'
 export * from './table-block'
+export { html } from 'atomico'

packages/components/src/table-block/view/component.ts

@@ -4,6 +4,7 @@ import type { Node } from '@milkdown/prose/model'
 import type { EditorView } from '@milkdown/prose/view'
 import type { Ctx } from '@milkdown/ctx'
 
+import clsx from 'clsx'
 import type { TableBlockConfig } from '../config'
 import { useDragHandlers } from './drag'
 import type { CellIndex, DragInfo, Refs } from './types'
@@ -62,7 +63,8 @@ export const tableComponent: Component<TableComponentProps> = ({
     if (contentDOM)
       current.appendChild(contentDOM)
 
-    recoveryStateBetweenUpdate(refs, ctx, node)
+    if (view?.editable)
+      recoveryStateBetweenUpdate(refs, ctx, node)
   }, [])
 
   const { pointerLeave, pointerMove } = usePointerHandlers(refs, view)
@@ -78,6 +80,7 @@ export const tableComponent: Component<TableComponentProps> = ({
 
   return html`
     <host
+      class=${clsx(!view?.editable && 'readonly')}
       ondragstart=${(e: DragEvent) => e.preventDefault()}
       ondragover=${(e: DragEvent) => e.preventDefault()}
       ondragleave=${(e: DragEvent) => e.preventDefault()}

packages/components/src/table-block/view/drag.ts

@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle'
 import { computePosition, offset } from '@floating-ui/dom'
 import { useEffect, useHost, useMemo } from 'atomico'
-import { commandsCtx } from '@milkdown/core'
+import { commandsCtx, editorViewCtx } from '@milkdown/core'
 import { moveColCommand, moveRowCommand, selectColCommand, selectRowCommand } from '@milkdown/preset-gfm'
 import type { Ctx } from '@milkdown/ctx'
 import { computeColHandlePositionByIndex, computeRowHandlePositionByIndex, getRelatedDOM } from './utils'
@@ -61,7 +61,11 @@ function prepareDndContext(refs: Refs): DragContext | undefined {
   return context
 }
 
-function handleDrag(refs: Refs, event: DragEvent, fn: (context: DragContext) => void) {
+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'
@@ -78,9 +82,9 @@ function handleDrag(refs: Refs, event: DragEvent, fn: (context: DragContext) =>
   })
 }
 
-export function createDragRowHandler(refs: Refs) {
+export function createDragRowHandler(refs: Refs, ctx?: Ctx) {
   return (event: DragEvent) => {
-    handleDrag(refs, event, ({
+    handleDrag(refs, event, ctx, ({
       preview,
       content,
       previewRoot,
@@ -127,9 +131,9 @@ export function createDragRowHandler(refs: Refs) {
   }
 }
 
-export function createDragColHandler(refs: Refs) {
+export function createDragColHandler(refs: Refs, ctx?: Ctx) {
   return (event: DragEvent) => {
-    handleDrag(refs, event, ({
+    handleDrag(refs, event, ctx, ({
       preview,
       content,
       previewRoot,
@@ -351,8 +355,8 @@ export function useDragHandlers(
   const host = useHost()
   const root = useMemo(() => host.current.getRootNode() as HTMLElement, [host])
 
-  const dragRow = useMemo(() => createDragRowHandler(refs), [refs])
-  const dragCol = useMemo(() => createDragColHandler(refs), [refs])
+  const dragRow = useMemo(() => createDragRowHandler(refs, ctx), [refs])
+  const dragCol = useMemo(() => createDragColHandler(refs, ctx), [refs])
 
   useEffect(() => {
     const onDragEnd = () => {

packages/components/src/table-block/view/operation.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'atomico'
-import { commandsCtx } from '@milkdown/core'
+import { commandsCtx, editorViewCtx } from '@milkdown/core'
 import {
   addColAfterCommand,
   addColBeforeCommand,
@@ -34,6 +34,9 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
     if (rowIndex < 0)
       return
 
+    if (!ctx.get(editorViewCtx).editable)
+      return
+
     const rows = Array.from(contentWrapperRef.current?.querySelectorAll('tr') ?? [])
     const commands = ctx.get(commandsCtx)
     const pos = (getPos?.() ?? 0) + 1
@@ -61,6 +64,9 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
     if (colIndex < 0)
       return
 
+    if (!ctx.get(editorViewCtx).editable)
+      return
+
     const cols = Array.from(contentWrapperRef.current?.querySelector('tr')?.children ?? [])
     const commands = ctx.get(commandsCtx)
 
@@ -104,6 +110,10 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
   const deleteSelected = useCallback((e: PointerEvent) => {
     if (!ctx)
       return
+
+    if (!ctx.get(editorViewCtx).editable)
+      return
+
     e.preventDefault()
     e.stopPropagation()
     const commands = ctx.get(commandsCtx)
@@ -114,6 +124,10 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
     (e: PointerEvent) => {
       if (!ctx)
         return
+
+      if (!ctx.get(editorViewCtx).editable)
+        return
+
       e.preventDefault()
       e.stopPropagation()
       const commands = ctx.get(commandsCtx)

packages/components/src/table-block/view/pointer.ts

@@ -12,6 +12,8 @@ import {
 
 export function createPointerMoveHandler(refs: Refs, view?: EditorView): (e: PointerEvent) => void {
   return throttle((e: PointerEvent) => {
+    if (!view?.editable)
+      return
     const {
       contentWrapperRef,
       yLineHandleRef,

packages/components/src/table-block/view/view.ts

@@ -52,6 +52,9 @@ export class TableNodeView implements NodeView {
 
   #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 })
 

packages/crepe/src/theme/common/table.css

@@ -53,6 +53,8 @@
 
     .cell-handle {
       z-index: 50;
+      left: -999px;
+      top: -999px;
       cursor: grab;
       background-color: var(--crepe-color-surface);
       color: var(--crepe-color-outline);
@@ -128,15 +130,18 @@
     .line-handle {
       z-index: 20;
       background-color: var(--crepe-color-primary);
+      &:hover{
+        opacity: 1;
+      }
       .add-button {
         cursor: pointer;
         background-color: var(--crepe-color-surface);
         color: var(--crepe-color-outline);
         border-radius: 100px;
         box-shadow: var(--crepe-shadow-1);
+        transition: background-color 0.2s ease-in-out;
 
         &:hover {
-          transition: background-color 0.2s ease-in-out;
           background-color: var(--crepe-color-hover);
         }
       }
@@ -166,5 +171,9 @@
         }
       }
     }
+
+    &.readonly .handle {
+      display: none;
+    }
   }
 }