feat: add drop indicator plugin (#2097)

* chore: first setup

* feat: add drop indicator plugin

Author: Saul-Mirone

docs/api/plugin-cursor.md

@@ -16,9 +16,17 @@ Editor.make().use(nord).use(commonmark).use(cursor).create()
 
 @cursor
 
-## Plugins
+## Ctx
 
-@dropCursorConfig
-@dropCursorPlugin
+@dropIndicatorConfig
+@dropIndicatorState
+
+## Plugins
 
+@dropIndicatorDOMPlugin
+@dropIndicatorPlugin
 @gapCursorPlugin
+
+## Deprecated
+
+@dropCursorConfig

packages/crepe/src/feature/cursor/index.ts

@@ -1,6 +1,6 @@
 import {
   cursor as cursorPlugin,
-  dropCursorConfig,
+  dropIndicatorConfig,
 } from '@milkdown/kit/plugin/cursor'
 import { $prose } from '@milkdown/kit/utils'
 import { createVirtualCursor } from 'prosemirror-virtual-cursor'
@@ -21,7 +21,7 @@ export const cursor: DefineFeature<CursorFeatureConfig> = (editor, config) => {
   editor
     .config(crepeFeatureConfig(CrepeFeature.Cursor))
     .config((ctx) => {
-      ctx.update(dropCursorConfig.key, () => ({
+      ctx.update(dropIndicatorConfig.key, () => ({
         class: 'crepe-drop-cursor',
         width: config?.width ?? 4,
         color: config?.color ?? false,

packages/plugins/plugin-cursor/src/__internal__/with-meta.ts

@@ -0,0 +1,15 @@
+import type { Meta, MilkdownPlugin } from '@milkdown/ctx'
+
+export function withMeta<T extends MilkdownPlugin>(
+  plugin: T,
+  meta: Partial<Meta> & Pick<Meta, 'displayName'>
+): T {
+  Object.assign(plugin, {
+    meta: {
+      package: '@milkdown/plugin-cursor',
+      ...meta,
+    },
+  })
+
+  return plugin
+}

packages/plugins/plugin-cursor/src/drop-indicator/draw.ts

@@ -0,0 +1,41 @@
+import type { Line } from './types'
+
+export function drawIndicator(
+  element: HTMLElement,
+  lineWidth: number,
+  line: Line
+) {
+  const {
+    p1: { x: x1, y: y1 },
+    p2: { x: x2, y: y2 },
+  } = line
+  const horizontal = y1 === y2
+
+  let width: number
+  let height: number
+  let top: number = y1
+  let left: number = x1
+
+  if (horizontal) {
+    width = x2 - x1
+    height = lineWidth
+    top -= lineWidth / 2
+  } else {
+    width = lineWidth
+    height = y2 - y1
+    left -= lineWidth / 2
+  }
+
+  top = Math.round(top)
+  left = Math.round(left)
+
+  Object.assign(element.style, {
+    position: 'fixed',
+    pointerEvents: 'none',
+    width: `${width}px`,
+    height: `${height}px`,
+    transform: `translate(${left}px, ${top}px)`,
+    left: '0px',
+    top: '0px',
+  })
+}

packages/plugins/plugin-cursor/src/drop-indicator/drop-indicator-dom.ts

@@ -0,0 +1,100 @@
+import type { Ctx } from '@milkdown/ctx'
+
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import { $prose } from '@milkdown/utils'
+
+import { withMeta } from '../__internal__/with-meta'
+import {
+  dropIndicatorConfig,
+  dropIndicatorState,
+  type DropIndicatorState,
+} from './state'
+
+const key = new PluginKey('MILKDOWN_DROP_INDICATOR_DOM')
+
+/// The drop indicator DOM plugin to render the drop indicator as a DOM element.
+export const dropIndicatorDOMPlugin = $prose(
+  (ctx: Ctx) =>
+    new Plugin({
+      key,
+      view: (view) => {
+        const config = ctx.get(dropIndicatorConfig.key)
+        const dom = document.createElement('div')
+        Object.assign(dom.style, {
+          position: 'fixed',
+          pointerEvents: 'none',
+          display: 'none',
+          backgroundColor: config.color,
+          top: '0',
+          left: '0',
+        })
+        dom.classList.add(config.class)
+        dom.classList.add('milkdown-drop-indicator')
+
+        view.dom.parentNode?.appendChild(dom)
+        const stateSlice = ctx.use(dropIndicatorState.key)
+
+        const onUpdate = (state: DropIndicatorState) => {
+          renderIndicator(dom, state, config)
+        }
+
+        stateSlice.on(onUpdate)
+
+        return {
+          destroy: () => {
+            stateSlice.off(onUpdate)
+            dom.remove()
+          },
+        }
+      },
+    })
+)
+
+withMeta(dropIndicatorDOMPlugin, {
+  displayName: 'Prose<dropIndicatorDOM>',
+})
+
+function renderIndicator(
+  dom: HTMLDivElement,
+  state: DropIndicatorState,
+  config: dropIndicatorConfig
+) {
+  if (!state) {
+    Object.assign(dom.style, { display: 'none' })
+    return
+  }
+
+  const { line } = state
+  const { width: lineWidth } = config
+
+  const {
+    p1: { x: x1, y: y1 },
+    p2: { x: x2, y: y2 },
+  } = line
+  const horizontal = y1 === y2
+
+  let width: number
+  let height: number
+  let top: number = y1
+  let left: number = x1
+
+  if (horizontal) {
+    width = x2 - x1
+    height = lineWidth
+    top -= lineWidth / 2
+  } else {
+    width = lineWidth
+    height = y2 - y1
+    left -= lineWidth / 2
+  }
+
+  top = Math.round(top)
+  left = Math.round(left)
+
+  Object.assign(dom.style, {
+    display: 'block',
+    width: `${width}px`,
+    height: `${height}px`,
+    transform: `translate(${left}px, ${top}px)`,
+  })
+}

packages/plugins/plugin-cursor/src/drop-indicator/drop-indicator-plugin.ts

@@ -0,0 +1,158 @@
+import type { ResolvedPos } from '@milkdown/prose/model'
+import type { EditorView } from '@milkdown/prose/view'
+
+import {
+  NodeSelection,
+  Plugin,
+  PluginKey,
+  TextSelection,
+  type PluginView,
+} from '@milkdown/prose/state'
+
+import type { DragEventHandler, ShowHandler, ViewDragging } from './types'
+
+import { buildGetTarget, type GetTarget } from './drop-target'
+
+interface DropIndicatorPluginOptions {
+  onDrag: DragEventHandler
+  onShow: ShowHandler
+  onHide: VoidFunction
+}
+
+const key = new PluginKey('MILKDOWN_DROP_INDICATOR')
+
+export function createDropIndicatorPlugin(
+  options: DropIndicatorPluginOptions
+): Plugin {
+  let getTarget: GetTarget | undefined
+
+  return new Plugin({
+    key,
+    view: (view) => {
+      getTarget = buildGetTarget(view, options.onDrag)
+      return createDropIndicatorView(view, getTarget, options)
+    },
+    props: {
+      handleDrop(view, event, slice, move): boolean {
+        if (!getTarget) return false
+
+        const target = getTarget([event.clientX, event.clientY], event)
+
+        if (!target) return false
+
+        event.preventDefault()
+        let insertPos = target[0]
+
+        let tr = view.state.tr
+        if (move) {
+          let { node } = (view.dragging as ViewDragging | null) || {}
+          if (node) node.replace(tr)
+          else tr.deleteSelection()
+        }
+
+        let pos = tr.mapping.map(insertPos)
+        let isNode =
+          slice.openStart == 0 &&
+          slice.openEnd == 0 &&
+          slice.content.childCount == 1
+        let beforeInsert = tr.doc
+        if (isNode) tr.replaceRangeWith(pos, pos, slice.content.firstChild!)
+        else tr.replaceRange(pos, pos, slice)
+        if (tr.doc.eq(beforeInsert)) {
+          return true
+        }
+
+        let $pos = tr.doc.resolve(pos)
+        if (
+          isNode &&
+          NodeSelection.isSelectable(slice.content.firstChild!) &&
+          $pos.nodeAfter &&
+          $pos.nodeAfter.sameMarkup(slice.content.firstChild!)
+        ) {
+          tr.setSelection(new NodeSelection($pos))
+        } else {
+          let end = tr.mapping.map(insertPos)
+          tr.mapping.maps[tr.mapping.maps.length - 1]?.forEach(
+            (_from, _to, _newFrom, newTo) => (end = newTo)
+          )
+          tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end)))
+        }
+        view.focus()
+        view.dispatch(tr.setMeta('uiEvent', 'drop'))
+        return true
+      },
+    },
+  })
+}
+
+function selectionBetween(
+  view: EditorView,
+  $anchor: ResolvedPos,
+  $head: ResolvedPos,
+  bias?: number
+) {
+  return (
+    view.someProp('createSelectionBetween', (f) => f(view, $anchor, $head)) ||
+    TextSelection.between($anchor, $head, bias)
+  )
+}
+
+function createDropIndicatorView(
+  view: EditorView,
+  getTarget: GetTarget,
+  options: DropIndicatorPluginOptions
+): PluginView {
+  const dom = view.dom
+  let hideId: ReturnType<typeof setTimeout> | undefined
+  let prevX: number | undefined
+  let prevY: number | undefined
+  let hasDragOverEvent: boolean = false
+
+  const scheduleHide = () => {
+    if (hideId) {
+      clearTimeout(hideId)
+    }
+
+    hasDragOverEvent = false
+    hideId = setTimeout(() => {
+      if (hasDragOverEvent) return
+      options.onHide()
+    }, 30)
+  }
+
+  const handleDragOver = (event: DragEvent): void => {
+    hasDragOverEvent = true
+
+    const { clientX, clientY } = event
+    if (prevX === clientX && prevY === clientY) {
+      return
+    }
+    prevX = clientX
+    prevY = clientY
+
+    let target = getTarget([clientX, clientY], event)
+
+    if (!target) {
+      scheduleHide()
+      return
+    } else {
+      const [pos, [x1, y1, x2, y2]] = target
+      const line = { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } }
+      options.onShow({ view, pos, line })
+    }
+  }
+
+  dom.addEventListener('dragover', handleDragOver)
+  dom.addEventListener('dragend', scheduleHide)
+  dom.addEventListener('drop', scheduleHide)
+  dom.addEventListener('dragleave', scheduleHide)
+
+  const destroy = () => {
+    dom.removeEventListener('dragover', handleDragOver)
+    dom.removeEventListener('dragend', scheduleHide)
+    dom.removeEventListener('drop', scheduleHide)
+    dom.removeEventListener('dragleave', scheduleHide)
+  }
+
+  return { destroy }
+}