@milkdown/preset-gfm 4.11.2 → 4.13.2

package/README.md

@@ -1,7 +1,7 @@
-# @milkdown/preset-commonmark
+# @milkdown/preset-gfm
 
-Common mark preset for [milkdown](https://saul-mirone.github.io/milkdown/).
-Add support for commonmark.
+Github flavored markdown preset for [milkdown](https://saul-mirone.github.io/milkdown/).
+Add support for gfm.
 
 # Example Usage
 
@@ -9,16 +9,15 @@ Add support for commonmark.
 import { Editor } from '@milkdown/core';
 import { nord } from '@milkdown/theme-nord';
 
-import { commonmark } from '@milkdown/preset-commonmark';
-import '@milkdown/preset-commonmark/lib/style.css';
+import { gfm } from '@milkdown/preset-gfm';
 
-Editor.make().use(nord).use(commonmark).create();
+Editor.make().use(nord).use(gfm).create();
 ```
 
 ## Custom Keymap
 
 ```typescript
-import { commonmark, blockquote, SupportedKeys } from '@milkdown/preset-commonmark';
+import { commonmark, blockquote, SupportedKeys } from '@milkdown/preset-gfm';
 
 const nodes = commonmark.configure(blockquote, {
     keymap: {
@@ -51,11 +50,14 @@ Keymap supported:
 -   NextListItem
 -   SinkListItem
 -   LiftListItem
+-   NextCell
+-   PrevCell
+-   ExitTable
 
 ## Custom Style
 
 ```typescript
-import { commonmark, paragraph, heading } from '@milkdown/commonmark';
+import { commonmark, paragraph, heading } from '@milkdown/preset-gfm';
 
 const nodes = commonmark
     .configure(paragraph, {

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@milkdown/preset-gfm",
-  "version": "4.11.2",
+  "version": "4.13.2",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "milkdown",
@@ -20,9 +21,9 @@
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
-    "@milkdown/plugin-table": "4.11.2",
-    "@milkdown/preset-commonmark": "4.11.2",
-    "@milkdown/utils": "4.11.2",
+    "@milkdown/plugin-table": "4.13.2",
+    "@milkdown/preset-commonmark": "4.13.2",
+    "@milkdown/utils": "4.13.2",
     "@types/prosemirror-schema-list": "^1.0.3",
     "prosemirror-schema-list": "^1.1.4",
     "tslib": "^2.2.0"

package/src/auto-link.ts

@@ -0,0 +1,27 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { prosePluginFactory } from '@milkdown/core';
+import { InputRule, inputRules } from 'prosemirror-inputrules';
+
+const urlRegex =
+    /(https?:\/\/)?www\.[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)$/;
+
+const proseUrlPlugin = () =>
+    inputRules({
+        rules: [
+            new InputRule(urlRegex, (state, match, start, end) => {
+                const { schema } = state;
+                const [text] = match;
+                if (!text) return null;
+
+                return state.tr
+                    .replaceWith(start, end, schema.text(text))
+                    .addMark(
+                        start,
+                        text.length + start,
+                        schema.marks.link.create({ href: text.startsWith('www') ? `https://${text}` : text }),
+                    );
+            }),
+        ],
+    });
+
+export const urlPlugin = prosePluginFactory(proseUrlPlugin());

package/src/index.ts

@@ -0,0 +1,86 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { tableNodes, tablePlugins } from '@milkdown/plugin-table';
+import { commands as commonmarkCommands, commonmarkNodes, commonmarkPlugins } from '@milkdown/preset-commonmark';
+import { AtomList } from '@milkdown/utils';
+
+import { urlPlugin } from './auto-link';
+import { strikeThrough, ToggleStrikeThrough } from './strike-through';
+import {
+    LiftTaskListItem,
+    SinkTaskListItem,
+    SplitTaskListItem,
+    taskListItem,
+    TurnIntoTaskList,
+} from './task-list-item';
+
+export * from './strike-through';
+export { SupportedKeys } from './supported-keys';
+export * from './task-list-item';
+export {
+    BreakTable,
+    // command
+    createTable,
+    InsertTable,
+    NextCell,
+    PrevCell,
+    // gather
+    table,
+    tableNodes,
+    tablePlugins,
+} from '@milkdown/plugin-table';
+export {
+    blockquote,
+    bulletList,
+    codeFence,
+    codeInline,
+    commonmark,
+    // gather
+    commonmarkNodes,
+    commonmarkPlugins,
+    // node
+    doc,
+    em,
+    hardbreak,
+    heading,
+    hr,
+    image,
+    // command
+    InsertHardbreak,
+    InsertHr,
+    InsertImage,
+    LiftListItem,
+    link,
+    listItem,
+    ModifyImage,
+    ModifyLink,
+    orderedList,
+    paragraph,
+    SinkListItem,
+    SplitListItem,
+    strong,
+    text,
+    ToggleBold,
+    ToggleInlineCode,
+    ToggleItalic,
+    ToggleLink,
+    TurnIntoCodeFence,
+    TurnIntoHeading,
+    TurnIntoText,
+    WrapInBlockquote,
+    WrapInBulletList,
+    WrapInOrderedList,
+} from '@milkdown/preset-commonmark';
+
+export const gfmNodes = AtomList.create([...commonmarkNodes, ...tableNodes, strikeThrough(), taskListItem()]);
+export const gfmPlugins = AtomList.create([...tablePlugins, ...commonmarkPlugins, urlPlugin]);
+export const gfm = AtomList.create([...gfmNodes, ...gfmPlugins]);
+
+export const commands = {
+    ...commonmarkCommands,
+    ToggleStrikeThrough,
+    TurnIntoTaskList,
+    SinkTaskListItem,
+    LiftTaskListItem,
+    SplitTaskListItem,
+} as const;
+export type Commands = typeof commands;

package/src/strike-through.ts

@@ -0,0 +1,54 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createMark, createShortcut, markRule } from '@milkdown/utils';
+import { toggleMark } from 'prosemirror-commands';
+
+import { SupportedKeys } from './supported-keys';
+
+type Keys = SupportedKeys['StrikeThrough'];
+
+export const ToggleStrikeThrough = createCmdKey();
+
+export const strikeThrough = createMark<Keys>((_, utils) => {
+    const id = 'strike_through';
+    const style = utils.getStyle(
+        (themeTool) =>
+            css`
+                text-decoration-color: ${themeTool.palette('secondary')};
+            `,
+    );
+
+    return {
+        id,
+        schema: {
+            parseDOM: [
+                { tag: 'del' },
+                { style: 'text-decoration', getAttrs: (value) => (value === 'line-through') as false },
+            ],
+            toDOM: (mark) => ['del', { class: utils.getClassName(mark.attrs, 'strike-through', style) }],
+        },
+        parser: {
+            match: (node) => node.type === 'delete',
+            runner: (state, node, markType) => {
+                state.openMark(markType);
+                state.next(node.children);
+                state.closeMark(markType);
+            },
+        },
+        serializer: {
+            match: (mark) => mark.type.name === id,
+            runner: (state, mark) => {
+                state.withMark(mark, 'delete');
+            },
+        },
+        inputRules: (markType) => [
+            markRule(/(?:~~)([^~]+)(?:~~)$/, markType),
+            markRule(/(?:^|[^~])(~([^~]+)~)$/, markType),
+        ],
+        commands: (markType) => [createCmd(ToggleStrikeThrough, () => toggleMark(markType))],
+        shortcuts: {
+            [SupportedKeys.StrikeThrough]: createShortcut(ToggleStrikeThrough, 'Mod-Alt-x'),
+        },
+    };
+});

package/src/supported-keys.ts

@@ -0,0 +1,11 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { SupportedKeys as TableKeys } from '@milkdown/plugin-table';
+import { SupportedKeys as CommonmarkKeys } from '@milkdown/preset-commonmark';
+
+export const SupportedKeys = {
+    ...CommonmarkKeys,
+    ...TableKeys,
+    StrikeThrough: 'StrikeThrough',
+    TaskList: 'TaskList',
+} as const;
+export type SupportedKeys = typeof SupportedKeys;

package/src/task-list-item.ts

@@ -0,0 +1,220 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
+import type { Icon } from '@milkdown/design-system';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { wrapIn } from 'prosemirror-commands';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
+
+import { SupportedKeys } from './supported-keys';
+
+type Keys = Extract<keyof SupportedKeys, 'SinkListItem' | 'LiftListItem' | 'NextListItem' | 'TaskList'>;
+
+export const SplitTaskListItem = createCmdKey();
+export const SinkTaskListItem = createCmdKey();
+export const LiftTaskListItem = createCmdKey();
+export const TurnIntoTaskList = createCmdKey();
+
+export const taskListItem = createNode<Keys>((options, utils) => {
+    const id = 'task_list_item';
+    const style = utils.getStyle(
+        ({ palette, size }) =>
+            css`
+                list-style-type: none;
+                position: relative;
+
+                & > div {
+                    overflow: hidden;
+                    padding: 0 2px;
+                }
+
+                label {
+                    position: absolute;
+                    top: 0;
+                    left: -2rem;
+                    display: inline-block;
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    margin: 0.5rem 0;
+                    input {
+                        visibility: hidden;
+                    }
+                }
+                label:before {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    border-radius: ${size.radius};
+                }
+                label:hover:before {
+                    background: ${palette('background')};
+                }
+                &[data-checked='true'] {
+                    label {
+                        color: ${palette('primary')};
+                    }
+                }
+                &[data-checked='false'] {
+                    label {
+                        color: ${palette('solid', 0.87)};
+                    }
+                }
+                .paragraph {
+                    margin: 0.5rem 0;
+                }
+            `,
+    );
+
+    return {
+        id,
+        schema: {
+            group: 'listItem',
+            content: 'paragraph block*',
+            defining: true,
+            attrs: {
+                checked: {
+                    default: false,
+                },
+            },
+            parseDOM: [
+                {
+                    tag: 'li[data-type="task-list-item"]',
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error();
+                        }
+                        return { checked: dom.dataset.checked === 'true' };
+                    },
+                },
+            ],
+            toDOM: (node) => [
+                'li',
+                {
+                    'data-type': 'task-item',
+                    'data-checked': node.attrs.checked ? 'true' : 'false',
+                    class: utils.getClassName(node.attrs, 'task-list-item', style),
+                },
+                0,
+            ],
+        },
+        parser: {
+            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();
+            },
+        },
+        serializer: {
+            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: (editor, nodeType, node, view, getPos, decorations) => {
+            if (options?.view) {
+                return options.view(editor, nodeType, node, view, getPos, decorations);
+            }
+            const createIcon = utils.ctx.get(themeToolCtx).slots.icon;
+
+            const listItem = document.createElement('li');
+            const checkboxWrapper = document.createElement('label');
+            const checkboxStyler = document.createElement('span');
+            const checkbox = document.createElement('input');
+            const content = document.createElement('div');
+
+            let icon = createIcon('unchecked');
+            checkboxWrapper.appendChild(icon);
+            const setIcon = (name: Icon) => {
+                const nextIcon = createIcon(name);
+                checkboxWrapper.replaceChild(nextIcon, icon);
+                icon = nextIcon;
+            };
+
+            checkboxWrapper.contentEditable = 'false';
+            checkbox.type = 'checkbox';
+            const onChange = (event: Event) => {
+                const target = event.target;
+                if (!(target instanceof HTMLInputElement)) return;
+
+                if (!view.editable) {
+                    checkbox.checked = !checkbox.checked;
+
+                    return;
+                }
+
+                const { tr } = view.state;
+
+                view.dispatch(
+                    tr.setNodeMarkup(getPos(), undefined, {
+                        checked: target.checked,
+                    }),
+                );
+            };
+            checkbox.addEventListener('change', onChange);
+
+            listItem.dataset.checked = node.attrs.checked;
+            if (node.attrs.checked) {
+                checkbox.setAttribute('checked', 'checked');
+            }
+
+            checkboxWrapper.append(checkbox, checkboxStyler);
+            listItem.append(checkboxWrapper, content);
+
+            const attributes = {
+                'data-type': 'task-item',
+                'data-checked': node.attrs.checked ? 'true' : 'false',
+                class: utils.getClassName(node.attrs, 'task-list-item', style),
+            };
+            Object.entries(attributes).forEach(([key, value]) => {
+                listItem.setAttribute(key, value);
+            });
+            setIcon(node.attrs.checked ? 'checked' : 'unchecked');
+
+            return {
+                dom: listItem,
+                contentDOM: content,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== id) return false;
+
+                    listItem.dataset.checked = updatedNode.attrs.checked;
+                    if (updatedNode.attrs.checked) {
+                        checkbox.setAttribute('checked', 'checked');
+                    } else {
+                        checkbox.removeAttribute('checked');
+                    }
+                    setIcon(updatedNode.attrs.checked ? 'checked' : 'unchecked');
+
+                    return true;
+                },
+                destroy: () => {
+                    checkbox.removeEventListener('change', onChange);
+                },
+            };
+        },
+    };
+});