@milkdown/preset-gfm 6.5.2 → 6.5.4

package/src/table/utils.ts

@@ -1,162 +1,165 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { cloneTr, findParentNode } from '@milkdown/prose';
-import { Node as ProsemirrorNode, Schema } from '@milkdown/prose/model';
-import { Selection, Transaction } from '@milkdown/prose/state';
-
-import { CellSelection } from './plugin/cell-selection';
-import { tableNodeTypes } from './plugin/schema';
-import { Rect, TableMap } from './plugin/table-map';
-
-export type CellPos = {
-    pos: number;
-    start: number;
-    node: ProsemirrorNode;
-};
+import { cloneTr, findParentNode } from '@milkdown/prose'
+import type { Node as ProsemirrorNode, Schema } from '@milkdown/prose/model'
+import type { Selection, Transaction } from '@milkdown/prose/state'
+
+import { CellSelection } from './plugin/cell-selection'
+import { tableNodeTypes } from './plugin/schema'
+import type { Rect } from './plugin/table-map'
+import { TableMap } from './plugin/table-map'
+
+export interface CellPos {
+  pos: number
+  start: number
+  node: ProsemirrorNode
+}
 
 export const findTable = (selection: Selection) =>
-    findParentNode((node) => node.type.spec['tableRole'] === 'table')(selection);
-
-export const getCellsInColumn =
-    (columnIndex: number) =>
-    (selection: Selection): CellPos[] | undefined => {
-        const table = findTable(selection);
-        if (!table) return undefined;
-        const map = TableMap.get(table.node);
-        if (columnIndex < 0 || columnIndex >= map.width) {
-            return undefined;
-        }
+  findParentNode(node => node.type.spec.tableRole === 'table')(selection)
+
+export const getCellsInColumn
+    = (columnIndex: number) =>
+      (selection: Selection): CellPos[] | undefined => {
+        const table = findTable(selection)
+        if (!table)
+          return undefined
+        const map = TableMap.get(table.node)
+        if (columnIndex < 0 || columnIndex >= map.width)
+          return undefined
 
         return map
-            .cellsInRect({ left: columnIndex, right: columnIndex + 1, top: 0, bottom: map.height })
-            .map((pos) => {
-                const node = table.node.nodeAt(pos);
-                if (!node) return;
-                const start = pos + table.start;
-                return {
-                    pos: start,
-                    start: start + 1,
-                    node,
-                };
-            })
-            .filter((x): x is CellPos => x != null);
-    };
-
-export const getCellsInRow =
-    (rowIndex: number) =>
-    (selection: Selection): CellPos[] | undefined => {
-        const table = findTable(selection);
-        if (!table) return undefined;
-        const map = TableMap.get(table.node);
-        if (rowIndex < 0 || rowIndex >= map.height) {
-            return undefined;
-        }
+          .cellsInRect({ left: columnIndex, right: columnIndex + 1, top: 0, bottom: map.height })
+          .map((pos) => {
+            const node = table.node.nodeAt(pos)
+            if (!node)
+              return undefined
+            const start = pos + table.start
+            return {
+              pos: start,
+              start: start + 1,
+              node,
+            }
+          })
+          .filter((x): x is CellPos => x != null)
+      }
+
+export const getCellsInRow
+    = (rowIndex: number) =>
+      (selection: Selection): CellPos[] | undefined => {
+        const table = findTable(selection)
+        if (!table)
+          return undefined
+        const map = TableMap.get(table.node)
+        if (rowIndex < 0 || rowIndex >= map.height)
+          return undefined
 
         return map
-            .cellsInRect({ left: 0, right: map.width, top: rowIndex, bottom: rowIndex + 1 })
-            .map((pos) => {
-                const node = table.node.nodeAt(pos);
-                if (!node) return;
-                const start = pos + table.start;
-                return {
-                    pos: start,
-                    start: start + 1,
-                    node,
-                };
-            })
-            .filter((x): x is CellPos => x != null);
-    };
+          .cellsInRect({ left: 0, right: map.width, top: rowIndex, bottom: rowIndex + 1 })
+          .map((pos) => {
+            const node = table.node.nodeAt(pos)
+            if (!node)
+              return undefined
+            const start = pos + table.start
+            return {
+              pos: start,
+              start: start + 1,
+              node,
+            }
+          })
+          .filter((x): x is CellPos => x != null)
+      }
 
 export const createTable = (schema: Schema, rowsCount = 3, colsCount = 3) => {
-    const { cell: tableCell, header_cell: tableHeader, row: tableRow, table } = tableNodeTypes(schema);
+  const { cell: tableCell, header_cell: tableHeader, row: tableRow, table } = tableNodeTypes(schema)
 
-    const cells = Array(colsCount)
-        .fill(0)
-        .map(() => tableCell.createAndFill(null) as ProsemirrorNode);
+  const cells = Array(colsCount)
+    .fill(0)
+    .map(() => tableCell.createAndFill(null) as ProsemirrorNode)
 
-    const headerCells = Array(colsCount)
-        .fill(0)
-        .map(() => tableHeader.createAndFill(null) as ProsemirrorNode);
+  const headerCells = Array(colsCount)
+    .fill(0)
+    .map(() => tableHeader.createAndFill(null) as ProsemirrorNode)
 
-    const rows = Array(rowsCount)
-        .fill(0)
-        .map((_, i) => tableRow.create(null, i === 0 ? headerCells : cells));
+  const rows = Array(rowsCount)
+    .fill(0)
+    .map((_, i) => tableRow.create(null, i === 0 ? headerCells : cells))
 
-    return table.create(null, rows);
-};
+  return table.create(null, rows)
+}
 
 export const selectLine = (type: 'row' | 'col') => (index: number) => (tr: Transaction) => {
-    const table = findTable(tr.selection);
-    const isRowSelection = type === 'row';
-    if (table) {
-        const map = TableMap.get(table.node);
-
-        // Check if the index is valid
-        if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
-            const lastCell = map.positionAt(
-                isRowSelection ? index : map.height - 1,
-                isRowSelection ? map.width - 1 : index,
-                table.node,
-            );
-            const $lastCell = tr.doc.resolve(table.start + lastCell);
-
-            const createCellSelection = isRowSelection ? CellSelection.rowSelection : CellSelection.colSelection;
-
-            const firstCell = map.positionAt(isRowSelection ? index : 0, isRowSelection ? 0 : index, table.node);
-            const $firstCell = tr.doc.resolve(table.start + firstCell);
-            return cloneTr(tr.setSelection(createCellSelection($lastCell, $firstCell) as unknown as Selection));
-        }
+  const table = findTable(tr.selection)
+  const isRowSelection = type === 'row'
+  if (table) {
+    const map = TableMap.get(table.node)
+
+    // Check if the index is valid
+    if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
+      const lastCell = map.positionAt(
+        isRowSelection ? index : map.height - 1,
+        isRowSelection ? map.width - 1 : index,
+        table.node,
+      )
+      const $lastCell = tr.doc.resolve(table.start + lastCell)
+
+      const createCellSelection = isRowSelection ? CellSelection.rowSelection : CellSelection.colSelection
+
+      const firstCell = map.positionAt(isRowSelection ? index : 0, isRowSelection ? 0 : index, table.node)
+      const $firstCell = tr.doc.resolve(table.start + firstCell)
+      return cloneTr(tr.setSelection(createCellSelection($lastCell, $firstCell) as unknown as Selection))
     }
-    return tr;
-};
+  }
+  return tr
+}
 
 export const getCellsInTable = (selection: Selection) => {
-    const table = findTable(selection);
-    if (!table) {
-        return;
-    }
-    const map = TableMap.get(table.node);
-    const cells = map.cellsInRect({
-        left: 0,
-        right: map.width,
-        top: 0,
-        bottom: map.height,
-    });
-    return cells.map((nodePos) => {
-        const node = table.node.nodeAt(nodePos);
-        const pos = nodePos + table.start;
-        return { pos, start: pos + 1, node };
-    });
-};
+  const table = findTable(selection)
+  if (!table)
+    return
+
+  const map = TableMap.get(table.node)
+  const cells = map.cellsInRect({
+    left: 0,
+    right: map.width,
+    top: 0,
+    bottom: map.height,
+  })
+  return cells.map((nodePos) => {
+    const node = table.node.nodeAt(nodePos)
+    const pos = nodePos + table.start
+    return { pos, start: pos + 1, node }
+  })
+}
 
 export const selectTable = (tr: Transaction) => {
-    const cells = getCellsInTable(tr.selection);
-    if (cells && cells[0]) {
-        const $firstCell = tr.doc.resolve(cells[0].pos);
-        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));
-        }
+  const cells = getCellsInTable(tr.selection)
+  if (cells && cells[0]) {
+    const $firstCell = tr.doc.resolve(cells[0].pos)
+    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;
-};
+  }
+  return tr
+}
 
 export function addRowWithAlignment(tr: Transaction, { map, tableStart, table }: Required<Rect>, row: number) {
-    const rowPos = Array(row)
-        .fill(0)
-        .reduce((acc, _, i) => {
-            return acc + table.child(i).nodeSize;
-        }, tableStart);
-
-    const { cell: cellType, row: rowType } = tableNodeTypes(table.type.schema);
-
-    const cells = Array(map.width)
-        .fill(0)
-        .map((_, col) => {
-            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));
-    return tr;
+  const rowPos = Array(row)
+    .fill(0)
+    .reduce((acc, _, i) => {
+      return acc + table.child(i).nodeSize
+    }, tableStart)
+
+  const { cell: cellType, row: rowType } = tableNodeTypes(table.type.schema)
+
+  const cells = Array(map.width)
+    .fill(0)
+    .map((_, col) => {
+      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))
+  return tr
 }

package/src/task-list-item.ts

@@ -1,154 +1,159 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, editorViewCtx, ThemeTaskListItemType } from '@milkdown/core';
-import { expectDomTypeError } from '@milkdown/exception';
-import { wrapIn } from '@milkdown/prose/commands';
-import { wrappingInputRule } from '@milkdown/prose/inputrules';
-import { liftListItem, sinkListItem, splitListItem } from '@milkdown/prose/schema-list';
-import { NodeView } from '@milkdown/prose/view';
-import { createNode, createShortcut } from '@milkdown/utils';
+import type { ThemeTaskListItemType } from '@milkdown/core'
+import { createCmd, createCmdKey, editorViewCtx } from '@milkdown/core'
+import { expectDomTypeError } from '@milkdown/exception'
+import { wrapIn } from '@milkdown/prose/commands'
+import { wrappingInputRule } from '@milkdown/prose/inputrules'
+import { liftListItem, sinkListItem, splitListItem } from '@milkdown/prose/schema-list'
+import type { NodeView } from '@milkdown/prose/view'
+import { createNode, createShortcut } from '@milkdown/utils'
 
-import { SupportedKeys } from './supported-keys';
+import { SupportedKeys } from './supported-keys'
 
-type Keys = Extract<keyof SupportedKeys, 'SinkListItem' | 'LiftListItem' | 'NextListItem' | 'TaskList'>;
+type Keys = Extract<keyof SupportedKeys, 'SinkListItem' | 'LiftListItem' | 'NextListItem' | 'TaskList'>
 
-export const SplitTaskListItem = createCmdKey('SplitTaskListItem');
-export const SinkTaskListItem = createCmdKey('SinkTaskListItem');
-export const LiftTaskListItem = createCmdKey('LiftTaskListItem');
-export const TurnIntoTaskList = createCmdKey('TurnIntoTaskList');
+export const SplitTaskListItem = createCmdKey('SplitTaskListItem')
+export const SinkTaskListItem = createCmdKey('SinkTaskListItem')
+export const LiftTaskListItem = createCmdKey('LiftTaskListItem')
+export const TurnIntoTaskList = createCmdKey('TurnIntoTaskList')
 
 export const taskListItem = createNode<Keys>((utils) => {
-    const id = 'task_list_item';
-
-    return {
-        id,
-        schema: (ctx) => ({
-            group: 'listItem',
-            content: 'paragraph block*',
-            defining: true,
-            priority: 60,
-            attrs: {
-                checked: {
-                    default: false,
-                },
-            },
-            parseDOM: [
-                {
-                    tag: 'li[data-type="task-item"]',
-                    getAttrs: (dom) => {
-                        if (!(dom instanceof HTMLElement)) {
-                            throw expectDomTypeError(dom);
-                        }
-                        return { checked: dom.dataset['checked'] === 'true' };
-                    },
-                },
-            ],
-            toDOM: (node) => {
-                const checkbox = document.createElement('input');
-                checkbox.type = 'checkbox';
-                checkbox.checked = node.attrs['checked'];
-                checkbox.className = utils.getClassName(node.attrs, 'task-list-item_checkbox');
-                checkbox.onchange = (event) => {
-                    const target = event.target;
-                    if (!(target instanceof HTMLInputElement)) return;
-                    const view = ctx.get(editorViewCtx);
-
-                    if (!view.editable) {
-                        checkbox.checked = !checkbox.checked;
-
-                        return;
-                    }
-
-                    const { top, left } = target.getBoundingClientRect();
-                    const result = view.posAtCoords({ top, left });
-                    if (!result) return;
-
-                    const { tr } = view.state;
-
-                    view.dispatch(
-                        tr.setNodeMarkup(result.inside, undefined, {
-                            checked: target.checked,
-                        }),
-                    );
-                };
-                return [
-                    'li',
-                    {
-                        'data-type': 'task-item',
-                        'data-checked': node.attrs['checked'] ? 'true' : 'false',
-                        class: utils.getClassName(node.attrs, 'task-list-item'),
-                    },
-                    checkbox,
-                    ['span', { class: utils.getClassName(node.attrs, 'task-list-item_body') }, 0],
-                ];
-            },
-            parseMarkdown: {
-                match: ({ type, checked }) => {
-                    return type === 'listItem' && checked !== null;
-                },
-                runner: (state, node, type) => {
-                    state.openNode(type, { checked: node['checked'] as boolean });
-                    state.next(node.children);
-                    state.closeNode();
-                },
-            },
-            toMarkdown: {
-                match: (node) => node.type.name === id,
-                runner: (state, node) => {
-                    state.openNode('listItem', undefined, { checked: node.attrs['checked'] });
-                    state.next(node.content);
-                    state.closeNode();
-                },
-            },
-        }),
-        inputRules: (nodeType) => [
-            wrappingInputRule(/^\s*(\[([ |x])\])\s$/, nodeType, (match) => ({
-                checked: match[match.length - 1] === 'x',
-            })),
-        ],
-        commands: (nodeType) => [
-            createCmd(SplitTaskListItem, () => splitListItem(nodeType)),
-            createCmd(SinkTaskListItem, () => sinkListItem(nodeType)),
-            createCmd(LiftTaskListItem, () => liftListItem(nodeType)),
-            createCmd(TurnIntoTaskList, () => wrapIn(nodeType)),
-        ],
-        shortcuts: {
-            [SupportedKeys.NextListItem]: createShortcut(SplitTaskListItem, 'Enter'),
-            [SupportedKeys.SinkListItem]: createShortcut(SinkTaskListItem, 'Mod-]'),
-            [SupportedKeys.LiftListItem]: createShortcut(LiftTaskListItem, 'Mod-['),
-            [SupportedKeys.TaskList]: createShortcut(TurnIntoTaskList, 'Mod-Alt-9'),
+  const id = 'task_list_item'
+
+  return {
+    id,
+    schema: ctx => ({
+      group: 'listItem',
+      content: 'paragraph block*',
+      defining: true,
+      priority: 60,
+      attrs: {
+        checked: {
+          default: false,
         },
-        view: () => (node, view, getPos) => {
-            let currNode = node;
-
-            const renderer = utils.themeManager.get<ThemeTaskListItemType>('task-list-item', {
-                editable: () => view.editable,
-                onChange: (selected) => {
-                    const { tr } = view.state;
-                    view.dispatch(
-                        tr.setNodeMarkup(getPos(), undefined, {
-                            checked: selected,
-                        }),
-                    );
-                },
-            });
-
-            if (!renderer) return {} as NodeView;
-
-            const { dom, contentDOM, onUpdate } = renderer;
-            onUpdate(currNode);
-
-            return {
-                dom,
-                contentDOM,
-                update: (updatedNode) => {
-                    if (updatedNode.type.name !== id) return false;
-
-                    currNode = updatedNode;
-                    onUpdate(currNode);
-
-                    return true;
-                },
-            };
+      },
+      parseDOM: [
+        {
+          tag: 'li[data-type="task-item"]',
+          getAttrs: (dom) => {
+            if (!(dom instanceof HTMLElement))
+              throw expectDomTypeError(dom)
+
+            return { checked: dom.dataset.checked === 'true' }
+          },
         },
-    };
-});
+      ],
+      toDOM: (node) => {
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.checked = node.attrs.checked
+        checkbox.className = utils.getClassName(node.attrs, 'task-list-item_checkbox')
+        checkbox.onchange = (event) => {
+          const target = event.target
+          if (!(target instanceof HTMLInputElement))
+            return
+          const view = ctx.get(editorViewCtx)
+
+          if (!view.editable) {
+            checkbox.checked = !checkbox.checked
+
+            return
+          }
+
+          const { top, left } = target.getBoundingClientRect()
+          const result = view.posAtCoords({ top, left })
+          if (!result)
+            return
+
+          const { tr } = view.state
+
+          view.dispatch(
+            tr.setNodeMarkup(result.inside, undefined, {
+              checked: target.checked,
+            }),
+          )
+        }
+        return [
+          'li',
+          {
+            'data-type': 'task-item',
+            'data-checked': node.attrs.checked ? 'true' : 'false',
+            'class': utils.getClassName(node.attrs, 'task-list-item'),
+          },
+          checkbox,
+          ['span', { class: utils.getClassName(node.attrs, 'task-list-item_body') }, 0],
+        ]
+      },
+      parseMarkdown: {
+        match: ({ type, checked }) => {
+          return type === 'listItem' && checked !== null
+        },
+        runner: (state, node, type) => {
+          state.openNode(type, { checked: node.checked as boolean })
+          state.next(node.children)
+          state.closeNode()
+        },
+      },
+      toMarkdown: {
+        match: node => node.type.name === id,
+        runner: (state, node) => {
+          state.openNode('listItem', undefined, { checked: node.attrs.checked })
+          state.next(node.content)
+          state.closeNode()
+        },
+      },
+    }),
+    inputRules: nodeType => [
+      wrappingInputRule(/^\s*(\[([ |x])\])\s$/, nodeType, match => ({
+        checked: match[match.length - 1] === 'x',
+      })),
+    ],
+    commands: nodeType => [
+      createCmd(SplitTaskListItem, () => splitListItem(nodeType)),
+      createCmd(SinkTaskListItem, () => sinkListItem(nodeType)),
+      createCmd(LiftTaskListItem, () => liftListItem(nodeType)),
+      createCmd(TurnIntoTaskList, () => wrapIn(nodeType)),
+    ],
+    shortcuts: {
+      [SupportedKeys.NextListItem]: createShortcut(SplitTaskListItem, 'Enter'),
+      [SupportedKeys.SinkListItem]: createShortcut(SinkTaskListItem, 'Mod-]'),
+      [SupportedKeys.LiftListItem]: createShortcut(LiftTaskListItem, 'Mod-['),
+      [SupportedKeys.TaskList]: createShortcut(TurnIntoTaskList, 'Mod-Alt-9'),
+    },
+    view: () => (node, view, getPos) => {
+      let currNode = node
+
+      const renderer = utils.themeManager.get<ThemeTaskListItemType>('task-list-item', {
+        editable: () => view.editable,
+        onChange: (selected) => {
+          const { tr } = view.state
+          view.dispatch(
+            tr.setNodeMarkup(getPos(), undefined, {
+              checked: selected,
+            }),
+          )
+        },
+      })
+
+      if (!renderer)
+        return {} as NodeView
+
+      const { dom, contentDOM, onUpdate } = renderer
+      onUpdate(currNode)
+
+      return {
+        dom,
+        contentDOM,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== id)
+            return false
+
+          currNode = updatedNode
+          onUpdate(currNode)
+
+          return true
+        },
+      }
+    },
+  }
+})