@milkdown/preset-gfm 5.2.0 → 5.3.2

package/src/table/nodes/index.ts

@@ -0,0 +1,169 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey, MarkdownNode, schemaCtx } from '@milkdown/core';
+import { columnResizing, goToNextCell, InputRule, Selection, tableEditing, TextSelection } from '@milkdown/prose';
+import { createPlugin, createShortcut } from '@milkdown/utils';
+
+import { exitTable } from '../command';
+import { operatorPlugin } from '../operator-plugin';
+import { createTable } from '../utils';
+import { schema } from './schema';
+import { injectStyle } from './style';
+
+export const SupportedKeys = {
+    NextCell: 'NextCell',
+    PrevCell: 'PrevCell',
+    ExitTable: 'ExitTable',
+} as const;
+export type SupportedKeys = typeof SupportedKeys;
+
+type Keys = keyof SupportedKeys;
+
+export const PrevCell = createCmdKey();
+export const NextCell = createCmdKey();
+export const BreakTable = createCmdKey();
+export const InsertTable = createCmdKey();
+
+export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof schema>((utils) => {
+    injectStyle(utils);
+    return {
+        schema: () => ({
+            node: {
+                table: {
+                    ...schema.table,
+                    parseMarkdown: {
+                        match: (node) => node.type === 'table',
+                        runner: (state, node, type) => {
+                            const align = node.align as (string | null)[];
+                            const children = (node.children as MarkdownNode[]).map((x, i) => ({
+                                ...x,
+                                align,
+                                isHeader: i === 0,
+                            }));
+                            state.openNode(type);
+                            state.next(children);
+                            state.closeNode();
+                        },
+                    },
+                    toMarkdown: {
+                        match: (node) => node.type.name === 'table',
+                        runner: (state, node) => {
+                            const firstLine = node.content.firstChild?.content;
+                            if (!firstLine) return;
+
+                            const align: (string | null)[] = [];
+                            firstLine.forEach((cell) => {
+                                align.push(cell.attrs.alignment);
+                            });
+                            state.openNode('table', undefined, { align });
+                            state.next(node.content);
+                            state.closeNode();
+                        },
+                    },
+                },
+                table_row: {
+                    ...schema.table_row,
+                    parseMarkdown: {
+                        match: (node) => node.type === 'tableRow',
+                        runner: (state, node, type) => {
+                            const align = node.align as (string | null)[];
+                            const children = (node.children as MarkdownNode[]).map((x, i) => ({
+                                ...x,
+                                align: align[i],
+                                isHeader: node.isHeader,
+                            }));
+                            state.openNode(type);
+                            state.next(children);
+                            state.closeNode();
+                        },
+                    },
+                    toMarkdown: {
+                        match: (node) => node.type.name === 'table_row',
+                        runner: (state, node) => {
+                            state.openNode('tableRow');
+                            state.next(node.content);
+                            state.closeNode();
+                        },
+                    },
+                },
+                table_cell: {
+                    ...schema.table_cell,
+                    parseMarkdown: {
+                        match: (node) => node.type === 'tableCell' && !node.isHeader,
+                        runner: (state, node, type) => {
+                            const align = node.align as string;
+                            state
+                                .openNode(type, { alignment: align })
+                                .openNode(state.schema.nodes.paragraph)
+                                .next(node.children)
+                                .closeNode()
+                                .closeNode();
+                        },
+                    },
+                    toMarkdown: {
+                        match: (node) => node.type.name === 'table_cell',
+                        runner: (state, node) => {
+                            state.openNode('tableCell').next(node.content).closeNode();
+                        },
+                    },
+                },
+                table_header: {
+                    ...schema.table_header,
+                    parseMarkdown: {
+                        match: (node) => node.type === 'tableCell' && !!node.isHeader,
+                        runner: (state, node, type) => {
+                            const align = node.align as string;
+                            state.openNode(type, { alignment: align });
+                            state.openNode(state.schema.nodes.paragraph);
+                            state.next(node.children);
+                            state.closeNode();
+                            state.closeNode();
+                        },
+                    },
+                    toMarkdown: {
+                        match: (node) => node.type.name === 'table_header',
+                        runner: (state, node) => {
+                            state.openNode('tableCell');
+                            state.next(node.content);
+                            state.closeNode();
+                        },
+                    },
+                },
+            },
+        }),
+        inputRules: (nodeType, ctx) => [
+            new InputRule(/^\|\|\s$/, (state, _match, start, end) => {
+                const $start = state.doc.resolve(start);
+                if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType.table))
+                    return null;
+
+                const tableNode = createTable(ctx.get(schemaCtx));
+                const tr = state.tr.replaceRangeWith(start, end, tableNode).scrollIntoView();
+                return tr.setSelection(TextSelection.create(tr.doc, start + 3));
+            }),
+        ],
+        commands: (_, ctx) => [
+            createCmd(PrevCell, () => goToNextCell(-1)),
+            createCmd(NextCell, () => goToNextCell(1)),
+            createCmd(BreakTable, () => exitTable(ctx.get(schemaCtx).nodes.paragraph)),
+            createCmd(InsertTable, () => (state, dispatch) => {
+                const { selection, tr } = state;
+                const { from } = selection;
+                const table = createTable(ctx.get(schemaCtx));
+                const _tr = tr.replaceSelectionWith(table);
+                const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true);
+                if (sel) {
+                    dispatch?.(_tr.setSelection(sel));
+                }
+                return true;
+            }),
+        ],
+        shortcuts: {
+            [SupportedKeys.NextCell]: createShortcut(NextCell, 'Mod-]'),
+            [SupportedKeys.PrevCell]: createShortcut(PrevCell, 'Mod-['),
+            [SupportedKeys.ExitTable]: createShortcut(BreakTable, 'Mod-Enter'),
+        },
+        prosePlugins: (_, ctx) => {
+            return [operatorPlugin(ctx, utils), columnResizing({}), tableEditing()];
+        },
+    };
+});

package/src/table/nodes/schema.ts

@@ -0,0 +1,16 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { tableNodes as tableNodesSpecCreator } from '@milkdown/prose';
+
+export const schema = tableNodesSpecCreator({
+    tableGroup: 'block',
+    cellContent: 'paragraph',
+    cellAttributes: {
+        alignment: {
+            default: 'left',
+            getFromDOM: (dom) => (dom as HTMLElement).style.textAlign || 'left',
+            setDOMAttr: (value, attrs) => {
+                attrs.style = `text-align: ${value || 'left'}`;
+            },
+        },
+    },
+});

package/src/table/nodes/style.ts

@@ -0,0 +1,170 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css, injectGlobal } from '@emotion/css';
+import { Utils } from '@milkdown/utils';
+
+const proseTableStyle = css`
+    /* copy from https://github.com/ProseMirror/prosemirror-tables/blob/master/style/tables.css */
+    .ProseMirror .tableWrapper {
+        overflow-x: auto;
+    }
+    .ProseMirror table {
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+        overflow: hidden;
+    }
+    .ProseMirror td,
+    .ProseMirror th {
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+    }
+    .ProseMirror .column-resize-handle {
+        position: absolute;
+        right: -2px;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+    }
+    .ProseMirror.resize-cursor {
+        cursor: ew-resize;
+        cursor: col-resize;
+    }
+    /* Give selected cells a blue overlay */
+    .ProseMirror .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+    }
+`;
+
+export const injectStyle = (utils: Utils) => {
+    const css = injectGlobal;
+    return utils.getStyle(({ size, palette, mixin }) => {
+        css`
+            ${proseTableStyle}
+
+            .tableWrapper {
+                margin: 0 !important;
+
+                ${mixin.scrollbar?.('x')};
+
+                width: 100%;
+
+                table {
+                    width: calc(100% - 2rem) !important;
+                    border-radius: ${size.radius};
+                    box-sizing: border-box;
+                    margin: 1rem 0 1rem 1rem !important;
+                    overflow: auto !important;
+                    * {
+                        margin: 0 !important;
+                        box-sizing: border-box;
+                        font-size: 1rem;
+                    }
+                    tr {
+                        ${mixin.border?.('bottom')};
+                    }
+
+                    th {
+                        background: ${palette('background', 0.5)};
+                        font-weight: 400;
+                    }
+
+                    th,
+                    td {
+                        min-width: 100px;
+                        ${mixin.border?.()};
+                        text-align: left;
+                        position: relative;
+                        line-height: 3rem;
+                        box-sizing: border-box;
+                        height: 3rem;
+                    }
+
+                    .selectedCell {
+                        &::after {
+                            background: ${palette('secondary', 0.38)};
+                        }
+                        & ::selection {
+                            background: transparent;
+                        }
+                    }
+
+                    .column-resize-handle {
+                        background: ${palette('primary')};
+                        width: ${size.lineWidth};
+                    }
+
+                    th,
+                    td {
+                        padding: 0 1rem;
+                        p {
+                            line-height: unset !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: calc(-6px - 0.5rem);
+                        top: 0;
+                        bottom: 0;
+                        width: 0.5rem;
+                    }
+
+                    .milkdown-cell-top {
+                        left: 0;
+                        right: 0;
+                        top: calc(-6px - 0.5rem);
+                        height: 0.5rem;
+                    }
+
+                    .milkdown-cell-point {
+                        left: calc(-2px - 1rem);
+                        top: calc(-2px - 1rem);
+                        width: 1rem;
+                        height: 1rem;
+
+                        .icon {
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            left: 0;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        `;
+    });
+};

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

@@ -0,0 +1,115 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Ctx, themeToolCtx } from '@milkdown/core';
+import {
+    addColumnAfter,
+    addColumnBefore,
+    Command,
+    deleteColumn,
+    deleteRow,
+    deleteTable,
+    EditorView,
+    isInTable,
+    selectedRect,
+    setCellAttr,
+} from '@milkdown/prose';
+
+import { addRowWithAlignment } from '../utils';
+import { getCellSelection, isFirstRowSelected } from './helper';
+
+export type 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(themeToolCtx).slots.icon('leftArrow'),
+        command: () => addColumnBefore,
+        disable: (view) => !getCellSelection(view).isColSelection(),
+    },
+    [Action.AddColRight]: {
+        $: ctx.get(themeToolCtx).slots.icon('rightArrow'),
+        command: () => addColumnAfter,
+        disable: (view) => !getCellSelection(view).isColSelection(),
+    },
+    [Action.AddRowTop]: {
+        $: ctx.get(themeToolCtx).slots.icon('upArrow'),
+        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(themeToolCtx).slots.icon('downArrow'),
+        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(themeToolCtx).slots.icon('alignLeft'),
+        command: () => setCellAttr('alignment', 'left'),
+        disable: (view) => !getCellSelection(view).isColSelection(),
+    },
+    [Action.AlignCenter]: {
+        $: ctx.get(themeToolCtx).slots.icon('alignCenter'),
+        command: () => setCellAttr('alignment', 'center'),
+        disable: (view) => !getCellSelection(view).isColSelection(),
+    },
+    [Action.AlignRight]: {
+        $: ctx.get(themeToolCtx).slots.icon('alignRight'),
+        command: () => setCellAttr('alignment', 'right'),
+        disable: (view) => !getCellSelection(view).isColSelection(),
+    },
+    [Action.Delete]: {
+        $: ctx.get(themeToolCtx).slots.icon('delete'),
+        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

@@ -0,0 +1,25 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { calculateNodePosition, CellSelection, EditorView } from '@milkdown/prose';
+
+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 new Error();
+        }
+        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];
+    });
+};

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

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

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

@@ -0,0 +1,38 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { CellSelection, EditorView, TableMap } from '@milkdown/prose';
+
+import { 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.indexOf(cells[i]) === -1) {
+            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

@@ -0,0 +1,98 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Ctx } from '@milkdown/core';
+import { CellSelection, Decoration, DecorationSet, Plugin, PluginKey } from '@milkdown/prose';
+import { Utils } from '@milkdown/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_PLUGIN_TABLE';
+
+export const operatorPlugin = (ctx: Ctx, utils: Utils) => {
+    const items = createActions(ctx);
+    const tooltip = document.createElement('div');
+    const style = utils.getStyle(injectStyle);
+    if (style) {
+        tooltip.classList.add(style);
+    }
+    tooltip.classList.add('table-tooltip', 'hide');
+
+    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, 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) => {
+            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

@@ -0,0 +1,51 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { ThemeTool } from '@milkdown/core';
+
+export const injectStyle = ({ size, mixin, palette }: ThemeTool) => css`
+    display: inline-flex;
+    cursor: pointer;
+    z-index: 2;
+
+    justify-content: space-evenly;
+
+    position: absolute;
+
+    border-radius: ${size.radius};
+
+    ${mixin.border?.()};
+
+    ${mixin.shadow?.()};
+
+    overflow: hidden;
+    background: ${palette('surface')};
+
+    .icon {
+        position: relative;
+        color: ${palette('solid', 0.87)};
+
+        width: 3rem;
+        line-height: 3rem;
+        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: 0px;
+            top: 0;
+            width: ${size.lineWidth};
+            bottom: 0;
+            background: ${palette('line')};
+        }
+    }
+    &.hide,
+    .hide {
+        display: none;
+    }
+`;