@milkdown/preset-gfm 5.4.0 → 6.0.0-next.0

package/src/table/nodes/index.ts

@@ -1,13 +1,20 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey, MarkdownNode, schemaCtx } from '@milkdown/core';
-import { columnResizing, goToNextCell, InputRule, Selection, tableEditing, TextSelection } from '@milkdown/prose';
+import {
+    columnResizing,
+    goToNextCell,
+    InputRule,
+    NodeType,
+    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',
@@ -18,13 +25,12 @@ 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 PrevCell = createCmdKey('PrevCell');
+export const NextCell = createCmdKey('NextCell');
+export const BreakTable = createCmdKey('BreakTable');
+export const InsertTable = createCmdKey('InsertTable');
 
 export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof schema>((utils) => {
-    injectStyle(utils);
     return {
         schema: () => ({
             node: {
@@ -33,7 +39,7 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
                     parseMarkdown: {
                         match: (node) => node.type === 'table',
                         runner: (state, node, type) => {
-                            const align = node.align as (string | null)[];
+                            const align = node['align'] as (string | null)[];
                             const children = (node.children as MarkdownNode[]).map((x, i) => ({
                                 ...x,
                                 align,
@@ -52,7 +58,7 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
 
                             const align: (string | null)[] = [];
                             firstLine.forEach((cell) => {
-                                align.push(cell.attrs.alignment);
+                                align.push(cell.attrs['alignment']);
                             });
                             state.openNode('table', undefined, { align });
                             state.next(node.content);
@@ -65,11 +71,11 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
                     parseMarkdown: {
                         match: (node) => node.type === 'tableRow',
                         runner: (state, node, type) => {
-                            const align = node.align as (string | null)[];
+                            const align = node['align'] as (string | null)[];
                             const children = (node.children as MarkdownNode[]).map((x, i) => ({
                                 ...x,
                                 align: align[i],
-                                isHeader: node.isHeader,
+                                isHeader: node['isHeader'],
                             }));
                             state.openNode(type);
                             state.next(children);
@@ -88,12 +94,12 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
                 table_cell: {
                     ...schema.table_cell,
                     parseMarkdown: {
-                        match: (node) => node.type === 'tableCell' && !node.isHeader,
+                        match: (node) => node.type === 'tableCell' && !node['isHeader'],
                         runner: (state, node, type) => {
-                            const align = node.align as string;
+                            const align = node['align'] as string;
                             state
                                 .openNode(type, { alignment: align })
-                                .openNode(state.schema.nodes.paragraph)
+                                .openNode(state.schema.nodes['paragraph'] as NodeType)
                                 .next(node.children)
                                 .closeNode()
                                 .closeNode();
@@ -109,11 +115,11 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
                 table_header: {
                     ...schema.table_header,
                     parseMarkdown: {
-                        match: (node) => node.type === 'tableCell' && !!node.isHeader,
+                        match: (node) => node.type === 'tableCell' && !!node['isHeader'],
                         runner: (state, node, type) => {
-                            const align = node.align as string;
+                            const align = node['align'] as string;
                             state.openNode(type, { alignment: align });
-                            state.openNode(state.schema.nodes.paragraph);
+                            state.openNode(state.schema.nodes['paragraph'] as NodeType);
                             state.next(node.children);
                             state.closeNode();
                             state.closeNode();
@@ -144,7 +150,7 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
         commands: (_, ctx) => [
             createCmd(PrevCell, () => goToNextCell(-1)),
             createCmd(NextCell, () => goToNextCell(1)),
-            createCmd(BreakTable, () => exitTable(ctx.get(schemaCtx).nodes.paragraph)),
+            createCmd(BreakTable, () => exitTable(ctx.get(schemaCtx).nodes['paragraph'] as NodeType)),
             createCmd(InsertTable, () => (state, dispatch) => {
                 const { selection, tr } = state;
                 const { from } = selection;

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

@@ -1,5 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Ctx, themeToolCtx } from '@milkdown/core';
+import { Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';
 import {
     addColumnAfter,
     addColumnBefore,
@@ -35,17 +35,17 @@ export enum Action {
 
 export const createActions: (ctx: Ctx) => Record<Action, Item> = (ctx) => ({
     [Action.AddColLeft]: {
-        $: ctx.get(themeToolCtx).slots.icon('leftArrow'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'leftArrow')?.dom as HTMLElement,
         command: () => addColumnBefore,
         disable: (view) => !getCellSelection(view).isColSelection(),
     },
     [Action.AddColRight]: {
-        $: ctx.get(themeToolCtx).slots.icon('rightArrow'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'rightArrow')?.dom as HTMLElement,
         command: () => addColumnAfter,
         disable: (view) => !getCellSelection(view).isColSelection(),
     },
     [Action.AddRowTop]: {
-        $: ctx.get(themeToolCtx).slots.icon('upArrow'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'upArrow')?.dom as HTMLElement,
         command: () => (state, dispatch) => {
             if (!isInTable(state)) return false;
             if (dispatch) {
@@ -59,7 +59,7 @@ export const createActions: (ctx: Ctx) => Record<Action, Item> = (ctx) => ({
             getCellSelection(view).$head.parent.type.name === 'table_header',
     },
     [Action.AddRowBottom]: {
-        $: ctx.get(themeToolCtx).slots.icon('downArrow'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'downArrow')?.dom as HTMLElement,
         command: () => (state, dispatch) => {
             if (!isInTable(state)) return false;
             if (dispatch) {
@@ -71,22 +71,22 @@ export const createActions: (ctx: Ctx) => Record<Action, Item> = (ctx) => ({
         disable: (view) => !getCellSelection(view).isRowSelection(),
     },
     [Action.AlignLeft]: {
-        $: ctx.get(themeToolCtx).slots.icon('alignLeft'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignLeft')?.dom as HTMLElement,
         command: () => setCellAttr('alignment', 'left'),
         disable: (view) => !getCellSelection(view).isColSelection(),
     },
     [Action.AlignCenter]: {
-        $: ctx.get(themeToolCtx).slots.icon('alignCenter'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignCenter')?.dom as HTMLElement,
         command: () => setCellAttr('alignment', 'center'),
         disable: (view) => !getCellSelection(view).isColSelection(),
     },
     [Action.AlignRight]: {
-        $: ctx.get(themeToolCtx).slots.icon('alignRight'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'alignRight')?.dom as HTMLElement,
         command: () => setCellAttr('alignment', 'right'),
         disable: (view) => !getCellSelection(view).isColSelection(),
     },
     [Action.Delete]: {
-        $: ctx.get(themeToolCtx).slots.icon('delete'),
+        $: ctx.get(themeManagerCtx).get(ThemeIcon, 'delete')?.dom as HTMLElement,
         command: (_, view) => {
             const selection = getCellSelection(view);
             const isCol = selection.isColSelection();

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

@@ -19,7 +19,7 @@ export const isFirstRowSelected = (selection: CellSelection) => {
     );
 
     for (let i = 0, count = cells.length; i < count; i++) {
-        if (selectedCells.indexOf(cells[i]) === -1) {
+        if (selectedCells.indexOf(cells[i] as number) === -1) {
             return false;
         }
     }

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

@@ -4,7 +4,7 @@ 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 { CellPos, getCellsInColumn, getCellsInRow } from '../utils';
 import { createActions } from './actions';
 import { calculatePosition } from './calc-pos';
 import { ToolTipPos } from './constant';
@@ -17,10 +17,12 @@ 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);
-    }
+    utils.themeManager.onFlush(() => {
+        const style = utils.getStyle(injectStyle);
+        if (style) {
+            tooltip.classList.add(style);
+        }
+    });
     tooltip.classList.add('table-tooltip', 'hide');
 
     return new Plugin({
@@ -35,7 +37,7 @@ export const operatorPlugin = (ctx: Ctx, utils: Utils) => {
 
                 const [topLeft] = leftCells;
 
-                decorations.push(createWidget(ctx, topLeft, ToolTipPos.Point));
+                decorations.push(createWidget(ctx, topLeft as CellPos, ToolTipPos.Point));
                 leftCells.forEach((cell, i) => {
                     decorations.push(createWidget(ctx, cell, ToolTipPos.Left, i));
                 });

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

@@ -1,50 +1,122 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Emotion, ThemeTool } from '@milkdown/core';
+import { Emotion, getPalette, ThemeBorder, ThemeManager, ThemeShadow, ThemeSize } from '@milkdown/core';
 
-export const injectStyle = ({ size, mixin, palette }: ThemeTool, { css }: Emotion) => css`
-    display: inline-flex;
-    cursor: pointer;
-    z-index: 2;
+export const injectStyle = (themeManager: ThemeManager, { css, injectGlobal }: Emotion) => {
+    const palette = getPalette(themeManager);
+    const radius = themeManager.get(ThemeSize, 'radius');
+    const lineWidth = themeManager.get(ThemeSize, 'lineWidth');
 
-    justify-content: space-evenly;
+    injectGlobal`
+        .milkdown {
+            .tableWrapper {
+                table {
+                    width: calc(100% - 2em) !important;
+                    margin: 1em 0 1em 1em !important;
 
-    position: absolute;
+                    .milkdown-cell-left,
+                    .milkdown-cell-point,
+                    .milkdown-cell-top {
+                        position: absolute;
 
-    border-radius: ${size.radius};
+                        &::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: '';
+                        }
 
-    ${mixin.border?.()};
+                        &:hover::after {
+                            background: ${palette('secondary', 0.38)};
+                        }
+                    }
 
-    ${mixin.shadow?.()};
+                    .milkdown-cell-left {
+                        left: calc(-6px - 0.5em);
+                        top: 0;
+                        bottom: 0;
+                        width: 0.5em;
+                    }
 
-    overflow: hidden;
-    background: ${palette('surface')};
+                    .milkdown-cell-top {
+                        left: 0;
+                        right: 0;
+                        top: calc(-6px - 0.5em);
+                        height: 0.5em;
+                    }
 
-    .icon {
-        position: relative;
-        color: ${palette('solid', 0.87)};
+                    .milkdown-cell-point {
+                        left: calc(-2px - 1em);
+                        top: calc(-2px - 1em);
+                        width: 1em;
+                        height: 1em;
 
-        width: 3rem;
-        line-height: 3rem;
-        text-align: center;
-        transition: all 0.4s ease-in-out;
-        &:hover {
-            background-color: ${palette('secondary', 0.12)};
+                        .icon {
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            left: 0;
+                            right: 0;
+                        }
+                    }
+                }
+            }
         }
-        &.active {
-            color: ${palette('primary')};
+    `;
+
+    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: 2em;
+            line-height: 2em;
+            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')};
+            }
         }
-        &:not(:last-child)::after {
-            content: '';
-            position: absolute;
-            right: 0px;
-            top: 0;
-            width: ${size.lineWidth};
-            bottom: 0;
-            background: ${palette('line')};
+
+        &.hide,
+        .hide {
+            display: none;
         }
-    }
-    &.hide,
-    .hide {
-        display: none;
-    }
-`;
+    `;
+};

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

@@ -1,6 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { Ctx, themeToolCtx } from '@milkdown/core';
+import { Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';
 import { Decoration, WidgetDecorationSpec } from '@milkdown/prose';
 
 import { CellPos, selectLine, selectTable } from '../utils';
@@ -35,11 +35,11 @@ export function createWidget(
     index: number,
 ): Decoration<WidgetDecorationSpec>;
 export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos, index = 0) {
-    const widget = Decoration.widget(cell.pos + 1, (view) => {
+    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(themeToolCtx).slots.icon('select'));
+            div.appendChild(ctx.get(themeManagerCtx).get(ThemeIcon, 'select')?.dom as HTMLElement);
         }
         div.addEventListener('mousedown', (e) => {
             if (!view) return;
@@ -62,5 +62,4 @@ export function createWidget(ctx: Ctx, cell: CellPos, pos: ToolTipPos, index = 0
         });
         return div;
     });
-    return widget;
 }

package/src/table/utils.ts

@@ -19,7 +19,7 @@ export type CellPos = {
 };
 
 export const findTable = (selection: Selection) =>
-    findParentNode((node) => node.type.spec.tableRole === 'table')(selection);
+    findParentNode((node) => node.type.spec['tableRole'] === 'table')(selection);
 
 export const getCellsInColumn =
     (columnIndex: number) =>
@@ -129,10 +129,13 @@ export const getCellsInTable = (selection: Selection) => {
 
 export const selectTable = (tr: Transaction) => {
     const cells = getCellsInTable(tr.selection);
-    if (cells) {
+    if (cells && cells[0]) {
         const $firstCell = tr.doc.resolve(cells[0].pos);
-        const $lastCell = tr.doc.resolve(cells[cells.length - 1].pos);
-        return cloneTr(tr.setSelection(new CellSelection($lastCell, $firstCell) as unknown as Selection));
+        const last = cells[cells.length - 1];
+        if (last) {
+            const $lastCell = tr.doc.resolve(last.pos);
+            return cloneTr(tr.setSelection(new CellSelection($lastCell, $firstCell) as unknown as Selection));
+        }
     }
     return tr;
 };
@@ -149,8 +152,8 @@ export function addRowWithAlignment(tr: Transaction, { map, tableStart, table }:
     const cells = Array(map.width)
         .fill(0)
         .map((_, col) => {
-            const headerCol = table.nodeAt(map.map[col]);
-            return cellType.createAndFill({ alignment: headerCol?.attrs.alignment }) as ProsemirrorNode;
+            const headerCol = table.nodeAt(map.map[col] as number);
+            return cellType.createAndFill({ alignment: headerCol?.attrs['alignment'] }) as ProsemirrorNode;
         });
 
     tr.insert(rowPos, rowType.create(null, cells));