@milkdown/preset-gfm 5.5.0 → 6.0.0

package/src/footnote/definition.ts

@@ -0,0 +1,184 @@
+/* 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));
+                };
+
+                const a = document.createElement('a');
+                a.href = `#${getFootnoteRefId(label)}`;
+                a.contentEditable = 'false';
+                a.textContent = '↩';
+                a.onmousedown = (e) => {
+                    e.preventDefault();
+                };
+
+                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],
+                ];
+            },
+            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,
+                    };
+                },
+                () => false,
+            ),
+        ],
+        prosePlugins: (type, ctx) => {
+            return [
+                new Plugin({
+                    key,
+                    view: (editorView) => {
+                        const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
+                            width: '12em',
+                            placeholder: 'Input Footnote Label',
+                            onUpdate: (value) => {
+                                ctx.get(commandsCtx).call(ModifyFootnoteDef, value);
+                            },
+                            isBindMode: true,
+                        });
+                        if (!inputChipRenderer) return {};
+                        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();
+                            }
+                        };
+                        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,171 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { commandsCtx, createCmd, createCmdKey, editorViewCtx, 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: (ctx) => ({
+            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'];
+                const a = document.createElement('a');
+                const href = `#${getFootnoteDefId(label)}`;
+                a.href = href;
+                a.textContent = `[${label}]`;
+                a.onclick = (e) => {
+                    const view = ctx.get(editorViewCtx);
+                    if (view.editable) {
+                        e.preventDefault();
+                    }
+                };
+                a.ondblclick = () => {
+                    const view = ctx.get(editorViewCtx);
+                    if (view.editable) {
+                        window.location.href = href;
+                    }
+                };
+                return [
+                    'sup',
+                    {
+                        'data-label': label,
+                        'data-type': id,
+                        id: getFootnoteRefId(label),
+                    },
+                    a,
+                ];
+            },
+            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', {
+                width: '12em',
+                placeholder: 'Input Footnote Label',
+                onUpdate: (value) => {
+                    ctx.get(commandsCtx).call(ModifyFootnoteRef, value);
+                },
+                isBindMode: true,
+            });
+            if (!inputChipRenderer) return [];
+            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) => `footnote-ref-${label}`;
+
+export const getFootnoteDefId = (label: string) => `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

@@ -15,7 +15,6 @@ 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',
@@ -32,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: {

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/index.ts

@@ -15,14 +15,6 @@ 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: {
@@ -47,6 +39,15 @@ export const operatorPlugin = (ctx: Ctx, utils: Utils) => {
             },
         },
         view: (editorView) => {
+            const items = Object.fromEntries(Object.entries(createActions(ctx)).filter(([, value]) => value.$ != null));
+            const tooltip = document.createElement('div');
+            utils.themeManager.onFlush(() => {
+                const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
+                if (style) {
+                    tooltip.classList.add(style);
+                }
+            });
+            tooltip.classList.add('table-tooltip', 'hide');
             Object.values(items).forEach(({ $ }) => tooltip.appendChild($));
             editorView.dom.parentNode?.appendChild(tooltip);