@milkdown/preset-gfm 5.2.1 → 5.3.3

package/src/index.ts

@@ -1,10 +1,11 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { tablePlugin } from '@milkdown/plugin-table';
 import { commands as commonmarkCommands, commonmark } from '@milkdown/preset-commonmark';
-import { AtomList } from '@milkdown/utils';
+import { $remark, AtomList } from '@milkdown/utils';
+import remarkGFM from 'remark-gfm';
 
 import { urlPlugin } from './auto-link';
 import { strikeThrough, ToggleStrikeThrough } from './strike-through';
+import { table } from './table';
 import {
     LiftTaskListItem,
     SinkTaskListItem,
@@ -15,7 +16,6 @@ import {
 
 export * from './strike-through';
 export { SupportedKeys } from './supported-keys';
-export * from './task-list-item';
 export {
     BreakTable,
     // command
@@ -25,8 +25,8 @@ export {
     PrevCell,
     // gather
     table,
-    tablePlugin,
-} from '@milkdown/plugin-table';
+} from './table';
+export * from './task-list-item';
 export {
     blockquote,
     bulletList,
@@ -70,7 +70,14 @@ export {
     WrapInOrderedList,
 } from '@milkdown/preset-commonmark';
 
-export const gfm = AtomList.create([...commonmark, tablePlugin(), urlPlugin(), strikeThrough(), taskListItem()]);
+export const gfm = AtomList.create([
+    ...commonmark,
+    $remark(() => remarkGFM),
+    table(),
+    urlPlugin,
+    strikeThrough(),
+    taskListItem(),
+]);
 
 export const commands = {
     ...commonmarkCommands,

package/src/strike-through.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { markRule, toggleMark } from '@milkdown/prose';
 import { createMark, createShortcut } from '@milkdown/utils';
@@ -13,7 +12,7 @@ export const ToggleStrikeThrough = createCmdKey();
 export const strikeThrough = createMark<Keys>((utils) => {
     const id = 'strike_through';
     const style = utils.getStyle(
-        (themeTool) =>
+        (themeTool, { css }) =>
             css`
                 text-decoration-color: ${themeTool.palette('secondary')};
             `,

package/src/supported-keys.ts

@@ -1,7 +1,8 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { SupportedKeys as TableKeys } from '@milkdown/plugin-table';
 import { SupportedKeys as CommonmarkKeys } from '@milkdown/preset-commonmark';
 
+import { SupportedKeys as TableKeys } from './table';
+
 export const SupportedKeys = {
     ...CommonmarkKeys,
     ...TableKeys,

package/src/table/command.ts

@@ -0,0 +1,16 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Command, isInTable, Node, NodeType, Selection } from '@milkdown/prose';
+
+export const exitTable =
+    (node: NodeType): Command =>
+    (state, dispatch) => {
+        if (!isInTable(state)) {
+            return false;
+        }
+        const { $head } = state.selection;
+        const pos = $head.after();
+        const tr = state.tr.replaceWith(pos, pos, node.createAndFill() as Node);
+        tr.setSelection(Selection.near(tr.doc.resolve(pos), 1));
+        dispatch?.(tr.scrollIntoView());
+        return true;
+    };

package/src/table/index.ts

@@ -0,0 +1,13 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { BreakTable, InsertTable, NextCell, PrevCell } from './nodes';
+
+export { BreakTable, InsertTable, NextCell, PrevCell, SupportedKeys, table } from './nodes';
+export { createTable } from './utils';
+
+export const commands = {
+    NextCell,
+    PrevCell,
+    BreakTable,
+    InsertTable,
+} as const;
+export type Commands = typeof commands;

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 { Emotion } from '@milkdown/design-system';
+import { Utils } from '@milkdown/utils';
+
+const proseTableStyle = ({ css }: Emotion) => 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) => {
+    return utils.getStyle(({ size, palette, mixin }, emotion) => {
+        const css = emotion.injectGlobal;
+        css`
+            ${proseTableStyle(emotion)}
+
+            .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');
+    });
+};