@milkdown/preset-gfm 6.5.0 → 6.5.3

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

@@ -1,29 +1,36 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { missingRootElement } from '@milkdown/exception';
-import { calculateNodePosition } from '@milkdown/prose';
-import { EditorView } from '@milkdown/prose/view';
+import { missingRootElement } from '@milkdown/exception'
+import { calculateNodePosition } from '@milkdown/prose'
+import type { EditorView } from '@milkdown/prose/view'
 
-import { CellSelection } from '../plugin';
+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;
-        const top = selected.top - parent.top - target.height - (isCol ? 14 : 0) - 14 + $editor.scrollTop;
-
-        if (left < 0) {
-            left = 0;
-        }
-        return [top, left];
-    });
-};
+  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 +1,7 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
 export enum ToolTipPos {
-    Left = 'Left',
-    Top = 'Top',
-    Point = 'Point',
+  Left = 'Left',
+  Top = 'Top',
+  Point = 'Point',
 }

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

@@ -1,40 +1,39 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { EditorView } from '@milkdown/prose/view';
+import type { EditorView } from '@milkdown/prose/view'
 
-import { CellSelection } from '../plugin';
-import { TableMap } from '../plugin/table-map';
-import { Item } from './actions';
+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 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),
-    );
+  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.indexOf(cells[i] as number) === -1) {
-            return false;
-        }
-    }
-    return true;
-};
+  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');
-    });
-};
+  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,101 +1,110 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { Ctx } from '@milkdown/core';
-import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { Decoration, DecorationSet } from '@milkdown/prose/view';
-import { ThemeUtils } from '@milkdown/utils';
-
-import { CellSelection } from '../plugin';
-import { CellPos, 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';
+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 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);
-            },
+  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)
         },
-        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();
-                },
-            };
+        destroy: () => {
+          tooltip.removeEventListener('mousedown', listener)
+          tooltip.remove()
         },
-    });
-};
+      }
+    },
+  })
+}

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

@@ -1,12 +1,13 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Emotion, getPalette, ThemeBorder, ThemeManager, ThemeShadow, ThemeSize } from '@milkdown/core';
+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');
+  const palette = getPalette(themeManager)
+  const radius = themeManager.get(ThemeSize, 'radius')
+  const lineWidth = themeManager.get(ThemeSize, 'lineWidth')
 
-    injectGlobal`
+  injectGlobal`
         .milkdown {
             .tableWrapper {
                 table {
@@ -67,9 +68,9 @@ export const injectStyle = (themeManager: ThemeManager, { css, injectGlobal }: E
                 }
             }
         }
-    `;
+    `
 
-    return css`
+  return css`
         display: inline-flex;
         cursor: pointer;
         z-index: 2;
@@ -118,5 +119,5 @@ export const injectStyle = (themeManager: ThemeManager, { css, injectGlobal }: E
         .hide {
             display: none;
         }
-    `;
-};
+    `
+}

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

@@ -1,55 +1,57 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';
-import { Decoration } from '@milkdown/prose/view';
+import type { Ctx } from '@milkdown/core'
+import { ThemeIcon, themeManagerCtx } from '@milkdown/core'
+import { Decoration } from '@milkdown/prose/view'
 
-import { CellPos, selectLine, selectTable } from '../utils';
-import { ToolTipPos } from './constant';
+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';
-        }
+  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.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;
+  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;
-                }
-            }
-        });
-        return div;
-    });
+      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
+  })
 }

package/src/table/plugin/auto-insert-zero-space.ts

@@ -1,51 +1,51 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { browser } from '@milkdown/prose';
-import { Node } from '@milkdown/prose/model';
-import { Plugin, PluginKey } from '@milkdown/prose/state';
+import { browser } from '@milkdown/prose'
+import type { Node } from '@milkdown/prose/model'
+import { Plugin, PluginKey } from '@milkdown/prose/state'
 
-import { isInTable } from './util';
+import { isInTable } from './util'
 
 const isEmptyParagraph = (node: Node) => {
-    return node.type.name === 'paragraph' && node.nodeSize === 2;
-};
+  return node.type.name === 'paragraph' && node.nodeSize === 2
+}
 
 const isParagraph = (node: Node) => {
-    return node.type.name === 'paragraph';
-};
+  return node.type.name === 'paragraph'
+}
 
-const pluginKey = new PluginKey('plugin_autoInsertZeroSpace');
+const pluginKey = new PluginKey('plugin_autoInsertZeroSpace')
 
 export const autoInsertZeroSpace = () => {
-    return new Plugin({
-        key: pluginKey,
-        props: {
-            handleDOMEvents: {
-                compositionstart(view) {
-                    const { state, dispatch } = view;
-                    const { tr, selection } = state;
-                    const { $from } = selection;
-                    if (browser.safari && isInTable(state) && selection.empty && isEmptyParagraph($from.parent)) {
-                        dispatch(tr.insertText('\u2060', $from.start()));
-                    }
-                    return false;
-                },
-                compositionend(view) {
-                    const { state, dispatch } = view;
-                    const { tr, selection } = state;
-                    const { $from } = selection;
-
-                    if (
-                        browser.safari &&
-                        isInTable(state) &&
-                        selection.empty &&
-                        isParagraph($from.parent) &&
-                        $from.parent.textContent.startsWith('\u2060')
-                    ) {
-                        dispatch(tr.delete($from.start(), $from.start() + 1));
-                    }
-                    return false;
-                },
-            },
+  return new Plugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        compositionstart(view) {
+          const { state, dispatch } = view
+          const { tr, selection } = state
+          const { $from } = selection
+          if (browser.safari && isInTable(state) && selection.empty && isEmptyParagraph($from.parent))
+            dispatch(tr.insertText('\u2060', $from.start()))
+
+          return false
+        },
+        compositionend(view) {
+          const { state, dispatch } = view
+          const { tr, selection } = state
+          const { $from } = selection
+
+          if (
+            browser.safari
+                        && isInTable(state)
+                        && selection.empty
+                        && isParagraph($from.parent)
+                        && $from.parent.textContent.startsWith('\u2060')
+          )
+            dispatch(tr.delete($from.start(), $from.start() + 1))
+
+          return false
         },
-    });
-};
+      },
+    },
+  })
+}