@milkdown/preset-gfm 5.4.1 → 6.0.0-next.1

package/src/footnote/definition.ts

@@ -0,0 +1,181 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { commandsCtx, createCmd, createCmdKey, editorViewCtx, ThemeInputChipType } from '@milkdown/core';
+import {
+    EditorView,
+    findSelectedNodeOfType,
+    NodeSelection,
+    Plugin,
+    PluginKey,
+    wrappingInputRule,
+} from '@milkdown/prose';
+import { createNode } from '@milkdown/utils';
+
+import { getFootnoteDefId, getFootnoteRefId } from './utils';
+
+const key = new PluginKey('MILKDOWN_PLUGIN_FOOTNOTE_DEF_INPUT');
+export const ModifyFootnoteDef = createCmdKey<string>('ModifyFootnoteDef');
+
+export const footnoteDefinition = createNode((utils) => {
+    const id = 'footnote_definition';
+    const markdownId = 'footnoteDefinition';
+
+    return {
+        id,
+        schema: (ctx) => ({
+            group: 'block',
+            content: 'block+',
+            defining: true,
+            attrs: {
+                label: {
+                    default: '',
+                },
+            },
+            parseDOM: [
+                {
+                    tag: `div[data-type="${id}"]`,
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error();
+                        }
+                        return {
+                            label: dom.dataset['label'],
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const label = node.attrs['label'];
+                const className = utils.getClassName(node.attrs, 'footnote-definition');
+
+                const dt = document.createElement('dt');
+                dt.textContent = `[ ${label} ]:`;
+                dt.onclick = () => {
+                    const view = ctx.get(editorViewCtx);
+                    const selection = NodeSelection.create(view.state.doc, view.state.selection.from - 2);
+                    view.dispatch(view.state.tr.setSelection(selection));
+                };
+
+                return [
+                    'div',
+                    {
+                        class: className,
+                        'data-label': label,
+                        'data-type': id,
+                        id: getFootnoteDefId(label),
+                    },
+                    ['div', { class: 'footnote-definition_content' }, dt, ['dd', 0]],
+                    [
+                        'div',
+                        { class: 'footnote-definition_anchor' },
+                        [
+                            'a',
+                            {
+                                href: `#${getFootnoteRefId(label)}`,
+                                'content-editable': 'false',
+                                class: className,
+                            },
+                            '↩',
+                        ],
+                    ],
+                ];
+            },
+            parseMarkdown: {
+                match: ({ type }) => type === markdownId,
+                runner: (state, node, type) => {
+                    state
+                        .openNode(type, {
+                            label: node['label'] as string,
+                        })
+                        .next(node.children)
+                        .closeNode();
+                },
+            },
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state
+                        .openNode(markdownId, undefined, {
+                            label: node.attrs['label'],
+                            identifier: node.attrs['label'],
+                        })
+                        .next(node.content)
+                        .closeNode();
+                },
+            },
+        }),
+        commands: (nodeType) => [
+            createCmd(ModifyFootnoteDef, (label = '') => (state, dispatch) => {
+                const node = findSelectedNodeOfType(state.selection, nodeType);
+                if (!node) return false;
+
+                const { tr } = state;
+                const _tr = tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, label });
+                dispatch?.(_tr.setSelection(NodeSelection.create(_tr.doc, node.pos)));
+
+                return true;
+            }),
+        ],
+        inputRules: (nodeType) => [
+            wrappingInputRule(/(?:\[\^)([^:]+)(?::)$/, nodeType, (match) => {
+                const label = match[1] ?? 'footnote';
+                return {
+                    label,
+                };
+            }),
+        ],
+        prosePlugins: (type, ctx) => {
+            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
+                placeholder: 'Input Footnote Label',
+                onUpdate: (value) => {
+                    ctx.get(commandsCtx).call(ModifyFootnoteDef, value);
+                },
+                isBindMode: true,
+            });
+            const shouldDisplay = (view: EditorView) => {
+                return Boolean(type && findSelectedNodeOfType(view.state.selection, type));
+            };
+            const getCurrentLabel = (view: EditorView) => {
+                const result = findSelectedNodeOfType(view.state.selection, type);
+                if (!result) return;
+
+                const value = result.node.attrs['label'];
+                return value;
+            };
+            const renderByView = (view: EditorView) => {
+                if (!view.editable) {
+                    return;
+                }
+                const display = shouldDisplay(view);
+                if (display) {
+                    inputChipRenderer.show(view);
+                    inputChipRenderer.update(getCurrentLabel(view));
+                } else {
+                    inputChipRenderer.hide();
+                }
+            };
+            return [
+                new Plugin({
+                    key,
+                    view: (editorView) => {
+                        inputChipRenderer.init(editorView);
+                        renderByView(editorView);
+
+                        return {
+                            update: (view, prevState) => {
+                                const isEqualSelection =
+                                    prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection);
+                                if (isEqualSelection) return;
+
+                                renderByView(view);
+                            },
+                            destroy: () => {
+                                inputChipRenderer.destroy();
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    };
+});

package/src/footnote/index.ts

@@ -0,0 +1,3 @@
+/* Copyright 2021, Milkdown by Mirone. */
+export * from './definition';
+export * from './reference';

package/src/footnote/reference.ts

@@ -0,0 +1,153 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { commandsCtx, createCmd, createCmdKey, ThemeInputChipType } from '@milkdown/core';
+import { EditorView, findSelectedNodeOfType, InputRule, NodeSelection, Plugin, PluginKey } from '@milkdown/prose';
+import { createNode } from '@milkdown/utils';
+
+import { getFootnoteDefId, getFootnoteRefId } from './utils';
+
+export const ModifyFootnoteRef = createCmdKey<string>('ModifyFootnoteRef');
+const key = new PluginKey('MILKDOWN_PLUGIN_FOOTNOTE_REF_INPUT');
+
+export const footnoteReference = createNode((utils) => {
+    const id = 'footnote_reference';
+
+    return {
+        id,
+        schema: () => ({
+            group: 'inline',
+            inline: true,
+            atom: true,
+            attrs: {
+                label: {
+                    default: '',
+                },
+            },
+            parseDOM: [
+                {
+                    tag: `sup[data-type="${id}"]`,
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error();
+                        }
+                        return {
+                            label: dom.dataset['label'],
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const label = node.attrs['label'];
+                return [
+                    'sup',
+                    {
+                        'data-label': label,
+                        'data-type': id,
+                        id: getFootnoteRefId(label),
+                    },
+                    ['a', { href: `#${getFootnoteDefId(label)}` }, `[${label}]`],
+                ];
+            },
+            parseMarkdown: {
+                match: ({ type }) => type === 'footnoteReference',
+                runner: (state, node, type) => {
+                    state.addNode(type, {
+                        label: node['label'] as string,
+                    });
+                },
+            },
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.addNode('footnoteReference', undefined, undefined, {
+                        label: node.attrs['label'],
+                        identifier: node.attrs['label'],
+                    });
+                },
+            },
+        }),
+        commands: (nodeType) => [
+            createCmd(ModifyFootnoteRef, (label = '') => (state, dispatch) => {
+                const node = findSelectedNodeOfType(state.selection, nodeType);
+                if (!node) return false;
+
+                const { tr } = state;
+                const _tr = tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, label });
+                dispatch?.(_tr.setSelection(NodeSelection.create(_tr.doc, node.pos)));
+
+                return true;
+            }),
+        ],
+        inputRules: (nodeType) => [
+            new InputRule(/(?:\[\^)([^\]]+)(?:\])$/, (state, match, start, end) => {
+                const $start = state.doc.resolve(start);
+                const index = $start.index();
+                const $end = state.doc.resolve(end);
+                if (!$start.parent.canReplaceWith(index, $end.index(), nodeType)) {
+                    return null;
+                }
+                const label = match[1];
+                return state.tr.replaceRangeWith(
+                    start,
+                    end,
+                    nodeType.create({
+                        label,
+                    }),
+                );
+            }),
+        ],
+        prosePlugins: (type, ctx) => {
+            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
+                placeholder: 'Input Footnote Label',
+                onUpdate: (value) => {
+                    ctx.get(commandsCtx).call(ModifyFootnoteRef, value);
+                },
+                isBindMode: true,
+            });
+            const shouldDisplay = (view: EditorView) => {
+                return Boolean(type && findSelectedNodeOfType(view.state.selection, type));
+            };
+            const getCurrentLabel = (view: EditorView) => {
+                const result = findSelectedNodeOfType(view.state.selection, type);
+                if (!result) return;
+
+                const value = result.node.attrs['label'];
+                return value;
+            };
+            const renderByView = (view: EditorView) => {
+                if (!view.editable) {
+                    return;
+                }
+                const display = shouldDisplay(view);
+                if (display) {
+                    inputChipRenderer.show(view);
+                    inputChipRenderer.update(getCurrentLabel(view));
+                } else {
+                    inputChipRenderer.hide();
+                }
+            };
+            return [
+                new Plugin({
+                    key,
+                    view: (editorView) => {
+                        inputChipRenderer.init(editorView);
+                        renderByView(editorView);
+
+                        return {
+                            update: (view, prevState) => {
+                                const isEqualSelection =
+                                    prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection);
+                                if (isEqualSelection) return;
+
+                                renderByView(view);
+                            },
+                            destroy: () => {
+                                inputChipRenderer.destroy();
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    };
+});

package/src/footnote/utils.ts

@@ -0,0 +1,4 @@
+/* Copyright 2021, Milkdown by Mirone. */
+export const getFootnoteRefId = (label: string) => `milkdown_footnote_ref_${label}`;
+
+export const getFootnoteDefId = (label: string) => `milkdown_footnote_def_${label}`;

package/src/index.ts

@@ -4,6 +4,8 @@ import { $remark, AtomList } from '@milkdown/utils';
 import remarkGFM from 'remark-gfm';
 
 import { urlPlugin } from './auto-link';
+import { footnoteReference } from './footnote';
+import { footnoteDefinition } from './footnote/definition';
 import { strikeThrough, ToggleStrikeThrough } from './strike-through';
 import { table } from './table';
 import {
@@ -14,6 +16,7 @@ import {
     TurnIntoTaskList,
 } from './task-list-item';
 
+export * from './footnote';
 export * from './strike-through';
 export { SupportedKeys } from './supported-keys';
 export {
@@ -77,6 +80,8 @@ export const gfm = AtomList.create([
     urlPlugin,
     strikeThrough(),
     taskListItem(),
+    footnoteReference(),
+    footnoteDefinition(),
 ]);
 
 export const commands = {

package/src/strike-through.ts

@@ -9,15 +9,8 @@ type Keys = SupportedKeys['StrikeThrough'];
 
 export const ToggleStrikeThrough = createCmdKey('ToggleStrikeThrough');
 
+const id = 'strike_through';
 export const strikeThrough = createMark<Keys>((utils) => {
-    const id = 'strike_through';
-    const style = utils.getStyle(
-        (themeTool, { css }) =>
-            css`
-                text-decoration-color: ${themeTool.palette('secondary')};
-            `,
-    );
-
     return {
         id,
         schema: () => ({
@@ -25,7 +18,7 @@ export const strikeThrough = createMark<Keys>((utils) => {
                 { tag: 'del' },
                 { style: 'text-decoration', getAttrs: (value) => (value === 'line-through') as false },
             ],
-            toDOM: (mark) => ['del', { class: utils.getClassName(mark.attrs, 'strike-through', style) }],
+            toDOM: (mark) => ['del', { class: utils.getClassName(mark.attrs, 'strike-through') }],
             parseMarkdown: {
                 match: (node) => node.type === 'delete',
                 runner: (state, node, markType) => {

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',
@@ -24,7 +31,6 @@ 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));
                 });