@milkdown/preset-gfm 6.5.3 → 7.0.0-next.0

package/src/table/operator-plugin/actions.ts

@@ -1,116 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { ThemeIcon, themeManagerCtx } from '@milkdown/core'
-import type { Command } from '@milkdown/prose/state'
-import type { EditorView } from '@milkdown/prose/view'
-
-import {
-  addColumnAfter,
-  addColumnBefore,
-  deleteColumn,
-  deleteRow,
-  deleteTable,
-  isInTable,
-  selectedRect,
-  setCellAttr,
-} from '../plugin'
-import { addRowWithAlignment } from '../utils'
-import { getCellSelection, isFirstRowSelected } from './helper'
-
-export interface Item {
-  $: HTMLElement
-  command: (e: Event, view: EditorView) => Command
-  disable?: (view: EditorView) => boolean
-}
-
-export enum Action {
-  AddColLeft,
-  AddColRight,
-  AddRowTop,
-  AddRowBottom,
-  AlignLeft,
-  AlignCenter,
-  AlignRight,
-  Delete,
-}
-
-export const createActions: (ctx: Ctx) => Record<Action, Item> = ctx => ({
-  [Action.AddColLeft]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'leftArrow')?.dom as HTMLElement,
-    command: () => addColumnBefore,
-    disable: view => !getCellSelection(view).isColSelection(),
-  },
-  [Action.AddColRight]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'rightArrow')?.dom as HTMLElement,
-    command: () => addColumnAfter,
-    disable: view => !getCellSelection(view).isColSelection(),
-  },
-  [Action.AddRowTop]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'upArrow')?.dom as HTMLElement,
-    command: () => (state, dispatch) => {
-      if (!isInTable(state))
-        return false
-      if (dispatch) {
-        const rect = selectedRect(state)
-        dispatch(addRowWithAlignment(state.tr, rect, rect.top))
-      }
-      return true
-    },
-    disable: view =>
-      !getCellSelection(view).isRowSelection()
-            || getCellSelection(view).$head.parent.type.name === 'table_header',
-  },
-  [Action.AddRowBottom]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'downArrow')?.dom as HTMLElement,
-    command: () => (state, dispatch) => {
-      if (!isInTable(state))
-        return false
-      if (dispatch) {
-        const rect = selectedRect(state)
-        dispatch(addRowWithAlignment(state.tr, rect, rect.bottom))
-      }
-      return true
-    },
-    disable: view => !getCellSelection(view).isRowSelection(),
-  },
-  [Action.AlignLeft]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignLeft')?.dom as HTMLElement,
-    command: () => setCellAttr('alignment', 'left'),
-    disable: view => !getCellSelection(view).isColSelection(),
-  },
-  [Action.AlignCenter]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignCenter')?.dom as HTMLElement,
-    command: () => setCellAttr('alignment', 'center'),
-    disable: view => !getCellSelection(view).isColSelection(),
-  },
-  [Action.AlignRight]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignRight')?.dom as HTMLElement,
-    command: () => setCellAttr('alignment', 'right'),
-    disable: view => !getCellSelection(view).isColSelection(),
-  },
-  [Action.Delete]: {
-    $: ctx.get(themeManagerCtx).get(ThemeIcon, 'delete')?.dom as HTMLElement,
-    command: (_, view) => {
-      const selection = getCellSelection(view)
-      const isCol = selection.isColSelection()
-      const isRow = selection.isRowSelection()
-      if (isCol && isRow)
-        return deleteTable
-
-      if (isCol)
-        return deleteColumn
-
-      return deleteRow
-    },
-    disable: (view) => {
-      const selection = getCellSelection(view)
-      if (selection.isRowSelection()) {
-        if (selection.isColSelection())
-          return false
-
-        return isFirstRowSelected(selection)
-      }
-      return false
-    },
-  },
-})

package/src/table/operator-plugin/calc-pos.ts

@@ -1,36 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import { missingRootElement } from '@milkdown/exception'
-import { calculateNodePosition } from '@milkdown/prose'
-import type { EditorView } from '@milkdown/prose/view'
-
-import type { CellSelection } from '../plugin'
-
-export const calculatePosition = (view: EditorView, dom: HTMLElement) => {
-  const { selection } = view.state as unknown as { selection: CellSelection }
-  const isCol = selection.isColSelection()
-  const isRow = selection.isRowSelection()
-
-  calculateNodePosition(view, dom, (selected, target, parent) => {
-    const $editor = dom.parentElement
-    if (!$editor)
-      throw missingRootElement()
-
-    let left = !isRow
-      ? selected.left - parent.left + (selected.width - target.width) / 2
-      : selected.left - parent.left - target.width / 2 - 8
-    let top = selected.top - parent.top - target.height - (isCol ? 14 : 0) - 14 + $editor.scrollTop
-
-    if (left < 0)
-      left = 0
-
-    const maxLeft = $editor.clientWidth - (target.width + 4)
-    if (left > maxLeft)
-      left = maxLeft
-
-    if (top < $editor.scrollTop)
-      top = selected.top - parent.top + 14 + $editor.scrollTop
-
-    return [top, left]
-  })
-}

package/src/table/operator-plugin/constant.ts

@@ -1,7 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export enum ToolTipPos {
-  Left = 'Left',
-  Top = 'Top',
-  Point = 'Point',
-}

package/src/table/operator-plugin/helper.ts

@@ -1,39 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorView } from '@milkdown/prose/view'
-
-import type { CellSelection } from '../plugin'
-import { TableMap } from '../plugin/table-map'
-import type { Item } from './actions'
-
-export const getCellSelection = (view: EditorView): CellSelection => view.state.selection as unknown as CellSelection
-
-export const isFirstRowSelected = (selection: CellSelection) => {
-  const map = TableMap.get(selection.$anchorCell.node(-1))
-  const start = selection.$anchorCell.start(-1)
-  const cells = map.cellsInRect({
-    left: 0,
-    right: map.width,
-    top: 0,
-    bottom: 1,
-  })
-  const selectedCells = map.cellsInRect(
-    map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start),
-  )
-
-  for (let i = 0, count = cells.length; i < count; i++) {
-    if (!selectedCells.includes(cells[i] as number))
-      return false
-  }
-  return true
-}
-
-export const calculateItem = (actions: Record<string, Item>, view: EditorView) => {
-  Object.values(actions).forEach((item) => {
-    const disable = item.disable?.(view)
-    if (disable) {
-      item.$.classList.add('hide')
-      return
-    }
-    item.$.classList.remove('hide')
-  })
-}

package/src/table/operator-plugin/index.ts

@@ -1,110 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { Ctx } from '@milkdown/core'
-import { editorViewCtx } from '@milkdown/core'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import type { Decoration } from '@milkdown/prose/view'
-import { DecorationSet } from '@milkdown/prose/view'
-import type { ThemeUtils } from '@milkdown/utils'
-
-import { CellSelection } from '../plugin'
-import type { CellPos } from '../utils'
-import { getCellsInColumn, getCellsInRow } from '../utils'
-import { createActions } from './actions'
-import { calculatePosition } from './calc-pos'
-import { ToolTipPos } from './constant'
-import { calculateItem } from './helper'
-import { injectStyle } from './style'
-import { createWidget } from './widget'
-
-export const key = 'MILKDOWN_TABLE'
-
-export const operatorPlugin = (ctx: Ctx, utils: ThemeUtils) => {
-  return new Plugin({
-    key: new PluginKey('MILKDOWN_TABLE_OP'),
-    props: {
-      decorations: (state) => {
-        const view = ctx.get(editorViewCtx)
-        if (!view.editable)
-          return null
-
-        const decorations: Decoration[] = []
-        const leftCells = getCellsInColumn(0)(state.selection)
-        if (!leftCells)
-          return null
-        const topCells = getCellsInRow(0)(state.selection)
-        if (!topCells)
-          return null
-
-        const [topLeft] = leftCells
-
-        decorations.push(createWidget(ctx, topLeft as CellPos, ToolTipPos.Point))
-        leftCells.forEach((cell, i) => {
-          decorations.push(createWidget(ctx, cell, ToolTipPos.Left, i))
-        })
-        topCells.forEach((cell, i) => {
-          decorations.push(createWidget(ctx, cell, ToolTipPos.Top, i))
-        })
-
-        return DecorationSet.create(state.doc, decorations)
-      },
-    },
-    view: (editorView) => {
-      const items = Object.fromEntries(Object.entries(createActions(ctx)).filter(([, value]) => value.$ != null))
-      const tooltip = document.createElement('div')
-      utils.themeManager.onFlush(() => {
-        const style = utils.getStyle(emotion => injectStyle(utils.themeManager, emotion))
-        if (style)
-          tooltip.classList.add(style)
-      })
-      tooltip.classList.add('table-tooltip', 'hide')
-      Object.values(items).forEach(({ $ }) => tooltip.appendChild($))
-      editorView.dom.parentNode?.appendChild(tooltip)
-
-      const listener = (e: Event) => {
-        if (!editorView)
-          return
-        e.stopPropagation()
-        e.preventDefault()
-        Object.values(items).forEach(({ $, command }) => {
-          if ($.contains(e.target as Element))
-            command(e, editorView)(editorView.state, editorView.dispatch, editorView)
-        })
-      }
-
-      const hide = () => {
-        tooltip.classList.add('hide')
-      }
-
-      tooltip.addEventListener('mousedown', listener)
-
-      return {
-        update: (view, prevState) => {
-          const state = view.state
-
-          if (prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection))
-            return
-
-          const isCellSelection = state.selection instanceof CellSelection
-
-          if (!isCellSelection || !view.editable) {
-            hide()
-            return
-          }
-
-          calculateItem(items, view)
-          if (Object.values(items).every(({ $ }) => $.classList.contains('hide'))) {
-            hide()
-            return
-          }
-          tooltip.classList.remove('hide')
-          calculatePosition(view, tooltip)
-        },
-        destroy: () => {
-          tooltip.removeEventListener('mousedown', listener)
-          tooltip.remove()
-        },
-      }
-    },
-  })
-}

package/src/table/operator-plugin/style.ts

@@ -1,123 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Emotion, ThemeManager } from '@milkdown/core'
-import { ThemeBorder, ThemeShadow, ThemeSize, getPalette } from '@milkdown/core'
-
-export const injectStyle = (themeManager: ThemeManager, { css, injectGlobal }: Emotion) => {
-  const palette = getPalette(themeManager)
-  const radius = themeManager.get(ThemeSize, 'radius')
-  const lineWidth = themeManager.get(ThemeSize, 'lineWidth')
-
-  injectGlobal`
-        .milkdown {
-            .tableWrapper {
-                table {
-                    width: calc(100% - 32px) !important;
-                    margin: 16px 0 16px 16px !important;
-
-                    .milkdown-cell-left,
-                    .milkdown-cell-point,
-                    .milkdown-cell-top {
-                        position: absolute;
-
-                        &::after {
-                            cursor: pointer;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            height: 100%;
-                            width: 100%;
-                            display: block;
-                            transition: all 0.2s ease-in-out;
-                            background: ${palette('secondary', 0.12)};
-                            content: '';
-                        }
-
-                        &:hover::after {
-                            background: ${palette('secondary', 0.38)};
-                        }
-                    }
-
-                    .milkdown-cell-left {
-                        left: -14px;
-                        top: 0;
-                        bottom: 0;
-                        width: 8px;
-                    }
-
-                    .milkdown-cell-top {
-                        left: 0;
-                        right: 0;
-                        top: -14px;
-                        height: 8px;
-                    }
-
-                    .milkdown-cell-point {
-                        left: -18px;
-                        top: -18px;
-                        width: 16px;
-                        height: 16px;
-
-                        .icon {
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            left: 0;
-                            right: 0;
-                        }
-                    }
-                }
-            }
-        }
-    `
-
-  return css`
-        display: inline-flex;
-        cursor: pointer;
-        z-index: 2;
-
-        justify-content: space-evenly;
-
-        position: absolute;
-
-        border-radius: ${radius};
-
-        ${themeManager.get(ThemeBorder, undefined)};
-        ${themeManager.get(ThemeShadow, undefined)};
-
-        overflow: hidden;
-        background: ${palette('surface')};
-
-        .icon {
-            position: relative;
-            color: ${palette('solid', 0.87)};
-
-            width: 48px;
-            line-height: 48px;
-            text-align: center;
-            transition: all 0.4s ease-in-out;
-
-            &:hover {
-                background-color: ${palette('secondary', 0.12)};
-            }
-
-            &.active {
-                color: ${palette('primary')};
-            }
-
-            &:not(:last-child)::after {
-                content: '';
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: ${lineWidth};
-                bottom: 0;
-                background: ${palette('line')};
-            }
-        }
-
-        &.hide,
-        .hide {
-            display: none;
-        }
-    `
-}

package/src/table/operator-plugin/widget.ts

@@ -1,57 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { Ctx } from '@milkdown/core'
-import { ThemeIcon, themeManagerCtx } from '@milkdown/core'
-import { Decoration } from '@milkdown/prose/view'
-
-import type { CellPos } from '../utils'
-import { selectLine, selectTable } from '../utils'
-import { ToolTipPos } from './constant'
-
-const calculateClassName = (pos: ToolTipPos) => {
-  switch (pos) {
-    case ToolTipPos.Left: {
-      return 'milkdown-cell-left'
-    }
-    case ToolTipPos.Top: {
-      return 'milkdown-cell-top'
-    }
-    case ToolTipPos.Point:
-    default: {
-      return 'milkdown-cell-point'
-    }
-  }
-}
-
-export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos.Point): Decoration
-export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos.Left, index: number): Decoration
-export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos.Top, index: number): Decoration
-export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos, index = 0) {
-  return Decoration.widget(cell.pos + 1, (view) => {
-    const div = document.createElement('div')
-    div.classList.add(calculateClassName(pos))
-    if (pos === ToolTipPos.Point)
-      div.appendChild(ctx.get(themeManagerCtx).get(ThemeIcon, 'select')?.dom as HTMLElement)
-
-    div.addEventListener('mousedown', (e) => {
-      if (!view)
-        return
-
-      e.preventDefault()
-      switch (pos) {
-        case ToolTipPos.Point: {
-          view.dispatch(selectTable(view.state.tr))
-          return
-        }
-        case ToolTipPos.Left: {
-          view.dispatch(selectLine('row')(index)(view.state.tr))
-          return
-        }
-        case ToolTipPos.Top: {
-          view.dispatch(selectLine('col')(index)(view.state.tr))
-        }
-      }
-    })
-    return div
-  })
-}