@milkdown/preset-commonmark 4.12.0 → 4.13.3

package/src/mark/strong.ts

@@ -0,0 +1,52 @@
+/* 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['Bold'];
+const id = 'strong';
+export const ToggleBold = createCmdKey();
+export const strong = createMark<Keys>((_, utils) => {
+    const style = utils.getStyle(
+        () =>
+            css`
+                font-weight: 600;
+            `,
+    );
+    return {
+        id,
+        schema: {
+            parseDOM: [
+                { tag: 'b' },
+                { tag: 'strong' },
+                { style: 'font-style', getAttrs: (value) => (value === 'bold') as false },
+            ],
+            toDOM: (mark) => ['strong', { class: utils.getClassName(mark.attrs, id, style) }],
+        },
+        parser: {
+            match: (node) => node.type === 'strong',
+            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, 'strong');
+            },
+        },
+        inputRules: (markType) => [
+            markRule(/(?:__)([^_]+)(?:__)$/, markType),
+            markRule(/(?:\*\*)([^*]+)(?:\*\*)$/, markType),
+        ],
+        commands: (markType) => [createCmd(ToggleBold, () => toggleMark(markType))],
+        shortcuts: {
+            [SupportedKeys.Bold]: createShortcut(ToggleBold, 'Mod-b'),
+        },
+    };
+});

package/src/node/blockquote.ts

@@ -0,0 +1,57 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { wrapIn } from 'prosemirror-commands';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+
+import { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['Blockquote'];
+
+const id = 'blockquote';
+
+export const WrapInBlockquote = createCmdKey();
+
+export const blockquote = createNode<Keys>((_, utils) => {
+    const style = utils.getStyle(
+        (themeTool) =>
+            css`
+                padding-left: 1.875rem;
+                line-height: 1.75rem;
+                border-left: 4px solid ${themeTool.palette('primary')};
+                * {
+                    font-size: 1rem;
+                    line-height: 1.5rem;
+                }
+            `,
+    );
+
+    return {
+        id,
+        schema: {
+            content: 'block+',
+            group: 'block',
+            defining: true,
+            parseDOM: [{ tag: 'blockquote' }],
+            toDOM: (node) => ['blockquote', { class: utils.getClassName(node.attrs, id, style) }, 0],
+        },
+        parser: {
+            match: ({ type }) => type === id,
+            runner: (state, node, type) => {
+                state.openNode(type).next(node.children).closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.openNode('blockquote').next(node.content).closeNode();
+            },
+        },
+        inputRules: (nodeType) => [wrappingInputRule(/^\s*>\s$/, nodeType)],
+        commands: (nodeType) => [createCmd(WrapInBlockquote, () => wrapIn(nodeType))],
+        shortcuts: {
+            [SupportedKeys.Blockquote]: createShortcut(WrapInBlockquote, 'Mod-Shift-b'),
+        },
+    };
+});

package/src/node/bullet-list.ts

@@ -0,0 +1,43 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { wrapIn } from 'prosemirror-commands';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+
+import { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['BulletList'];
+
+export const WrapInBulletList = createCmdKey();
+
+const id = 'bullet_list';
+export const bulletList = createNode<Keys>((_, utils) => {
+    return {
+        id,
+        schema: {
+            content: 'listItem+',
+            group: 'block',
+            parseDOM: [{ tag: 'ul' }],
+            toDOM: (node) => {
+                return ['ul', { class: utils.getClassName(node.attrs, 'bullet-list') }, 0];
+            },
+        },
+        parser: {
+            match: ({ type, ordered }) => type === 'list' && !ordered,
+            runner: (state, node, type) => {
+                state.openNode(type).next(node.children).closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.openNode('list', undefined, { ordered: false }).next(node.content).closeNode();
+            },
+        },
+        inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
+        commands: (nodeType) => [createCmd(WrapInBulletList, () => wrapIn(nodeType))],
+        shortcuts: {
+            [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, 'Mod-Shift-8'),
+        },
+    };
+});

package/src/node/code-fence.ts

@@ -0,0 +1,312 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { setBlockType } from 'prosemirror-commands';
+import { textblockTypeInputRule } from 'prosemirror-inputrules';
+
+import { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['CodeFence'];
+
+const languageOptions = [
+    '',
+    'javascript',
+    'typescript',
+    'bash',
+    'sql',
+    'json',
+    'html',
+    'css',
+    'c',
+    'cpp',
+    'java',
+    'ruby',
+    'python',
+    'go',
+    'rust',
+    'markdown',
+];
+
+const inputRegex = /^```(?<language>[a-z]*)? $/;
+
+export const TurnIntoCodeFence = createCmdKey();
+
+const id = 'fence';
+export const codeFence = createNode<Keys, { languageList?: string[] }>((options, utils) => {
+    const style = utils.getStyle(({ palette, mixin, size, font }) => {
+        const { shadow, scrollbar, border } = mixin;
+        const { lineWidth, radius } = size;
+        return css`
+            background-color: ${palette('background')};
+            color: ${palette('neutral')};
+            font-size: 0.85rem;
+            padding: 1.2rem 0.4rem 1.4rem;
+            border-radius: ${radius};
+            font-family: ${font.typography};
+
+            * {
+                margin: 0;
+            }
+
+            .code-fence_select-wrapper {
+                position: relative;
+            }
+
+            .code-fence_value {
+                width: 10.25rem;
+                box-sizing: border-box;
+                border-radius: ${size.radius};
+                margin: 0 1.2rem 1.2rem;
+                ${border()};
+                ${shadow()};
+                cursor: pointer;
+                background-color: ${palette('surface')};
+                position: relative;
+                display: flex;
+                color: ${palette('neutral', 0.87)};
+                letter-spacing: 0.5px;
+                height: 2.625rem;
+                align-items: center;
+
+                & > *:last-child {
+                    width: 2.625rem;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: ${palette('solid', 0.87)};
+                    border-left: ${lineWidth} solid ${palette('line')};
+
+                    text-align: center;
+                    transition: all 0.2s ease-in-out;
+                    &:hover {
+                        background: ${palette('background')};
+                        color: ${palette('primary')};
+                    }
+                }
+
+                > span:first-child {
+                    padding-left: 1rem;
+                    flex: 1;
+                    font-weight: 500;
+                }
+            }
+
+            .code-fence_select-option {
+                list-style: none;
+                line-height: 2rem;
+                padding-left: 1rem;
+                cursor: pointer;
+                :hover {
+                    background: ${palette('secondary', 0.12)};
+                    color: ${palette('primary')};
+                }
+            }
+
+            .code-fence_select {
+                &[data-fold='true'] {
+                    display: none;
+                }
+
+                font-weight: 500;
+                position: absolute;
+                z-index: 1;
+                top: 2.625rem;
+                box-sizing: border-box;
+                left: 1.2rem;
+                padding: 0.5rem 0;
+                max-height: 16.75rem;
+                width: 10.25rem;
+                ${border()};
+                ${shadow()};
+                background-color: ${palette('surface')};
+                border-top: none;
+                overflow-y: auto;
+                display: flex;
+                flex-direction: column;
+
+                ${scrollbar('y')}
+            }
+
+            code {
+                line-height: 1.5;
+            }
+
+            pre {
+                font-family: var(--font-code);
+                margin: 0 1.2rem !important;
+                overflow-x: scroll;
+                white-space: pre !important;
+
+                padding-bottom: 1.4rem;
+
+                ${scrollbar('x')}
+            }
+        `;
+    });
+
+    return {
+        id,
+        schema: {
+            content: 'text*',
+            group: 'block',
+            marks: '',
+            defining: true,
+            code: true,
+            attrs: {
+                language: {
+                    default: '',
+                },
+                fold: {
+                    default: true,
+                },
+            },
+            parseDOM: [
+                {
+                    tag: 'pre',
+                    preserveWhitespace: 'full',
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error('Parse DOM error.');
+                        }
+                        return { language: dom.dataset.language };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                return [
+                    'div',
+                    {
+                        'data-language': node.attrs.language,
+                        class: utils.getClassName(node.attrs, 'code-fence', style),
+                    },
+                    ['pre', ['code', { spellCheck: 'false' }, 0]],
+                ];
+            },
+        },
+        parser: {
+            match: ({ type }) => type === 'code',
+            runner: (state, node, type) => {
+                const language = node.lang as string;
+                const value = node.value as string;
+                state.openNode(type, { language });
+                state.addText(value);
+                state.closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.addNode('code', undefined, node.content.firstChild?.text || '', { lang: node.attrs.language });
+            },
+        },
+        inputRules: (nodeType) => [
+            textblockTypeInputRule(inputRegex, nodeType, ([ok, language]) => {
+                if (!ok) return;
+                return { language };
+            }),
+        ],
+        commands: (nodeType) => [createCmd(TurnIntoCodeFence, () => setBlockType(nodeType))],
+        shortcuts: {
+            [SupportedKeys.CodeFence]: createShortcut(TurnIntoCodeFence, 'Mod-Alt-c'),
+        },
+        view: (editor, nodeType, node, view, getPos, decorations) => {
+            if (options?.view) {
+                return options.view(editor, nodeType, node, view, getPos, decorations);
+            }
+            const container = document.createElement('div');
+            const selectWrapper = document.createElement('div');
+            const select = document.createElement('ul');
+            const pre = document.createElement('pre');
+            const code = document.createElement('code');
+
+            const valueWrapper = document.createElement('div');
+            valueWrapper.className = 'code-fence_value';
+            const value = document.createElement('span');
+            valueWrapper.appendChild(value);
+            valueWrapper.appendChild(utils.ctx.get(themeToolCtx).slots.icon('downArrow'));
+
+            select.className = 'code-fence_select';
+            select.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (!view.editable) return;
+
+                const el = e.target;
+                if (!(el instanceof HTMLLIElement)) return;
+                const { tr } = view.state;
+
+                view.dispatch(
+                    tr.setNodeMarkup(getPos(), undefined, {
+                        fold: true,
+                        language: el.dataset.value,
+                    }),
+                );
+            });
+            valueWrapper.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (!view.editable) return;
+                const { tr } = view.state;
+
+                view.dispatch(
+                    tr.setNodeMarkup(getPos(), undefined, {
+                        fold: false,
+                        language: container.dataset.language,
+                    }),
+                );
+            });
+            document.addEventListener('mousedown', () => {
+                if (!view.editable || select.dataset.fold === 'true') return;
+
+                const { tr } = view.state;
+
+                view.dispatch(
+                    tr.setNodeMarkup(getPos(), undefined, {
+                        fold: true,
+                        language: container.dataset.language,
+                    }),
+                );
+            });
+
+            (options?.languageList || languageOptions).forEach((lang) => {
+                const option = document.createElement('li');
+                option.className = 'code-fence_select-option';
+                option.innerText = lang || '--';
+                select.appendChild(option);
+                option.setAttribute('data-value', lang);
+            });
+
+            code.spellcheck = false;
+            selectWrapper.className = 'code-fence_select-wrapper';
+            selectWrapper.contentEditable = 'false';
+            selectWrapper.append(valueWrapper);
+            selectWrapper.append(select);
+            pre.append(code);
+
+            container.append(selectWrapper, pre);
+            container.setAttribute('class', utils.getClassName(node.attrs, 'code-fence', style));
+            container.setAttribute('data-language', node.attrs.language);
+            value.innerText = node.attrs.language || '--';
+            select.setAttribute('data-fold', node.attrs.fold ? 'true' : 'false');
+
+            return {
+                dom: container,
+                contentDOM: code,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== id) return false;
+
+                    const lang = updatedNode.attrs.language;
+                    container.dataset.language = lang;
+                    value.innerText = lang || '--';
+                    select.setAttribute('data-fold', updatedNode.attrs.fold ? 'true' : 'false');
+
+                    return true;
+                },
+            };
+        },
+    };
+});

package/src/node/doc.ts

@@ -0,0 +1,22 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createNode } from '@milkdown/utils';
+
+export const doc = createNode(() => ({
+    id: 'doc',
+    schema: {
+        content: 'block+',
+    },
+    parser: {
+        match: ({ type }) => type === 'root',
+        runner: (state, node, type) => {
+            state.injectRoot(node, type);
+        },
+    },
+    serializer: {
+        match: (node) => node.type.name === 'doc',
+        runner: (state, node) => {
+            state.openNode('root');
+            state.next(node.content);
+        },
+    },
+}));

package/src/node/hardbreak.ts

@@ -0,0 +1,43 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+
+import { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['HardBreak'];
+
+const id = 'hardbreak';
+
+export const InsertHardbreak = createCmdKey();
+
+export const hardbreak = createNode<Keys>((_, utils) => ({
+    id,
+    schema: {
+        inline: true,
+        group: 'inline',
+        selectable: false,
+        parseDOM: [{ tag: 'br' }],
+        toDOM: (node) => ['br', { class: utils.getClassName(node.attrs, id) }],
+    },
+    parser: {
+        match: ({ type }) => type === 'break',
+        runner: (state, _, type) => {
+            state.addNode(type);
+        },
+    },
+    serializer: {
+        match: (node) => node.type.name === id,
+        runner: (state) => {
+            state.addNode('break');
+        },
+    },
+    commands: (nodeType) => [
+        createCmd(InsertHardbreak, () => (state, dispatch) => {
+            dispatch?.(state.tr.replaceSelectionWith(nodeType.create()).scrollIntoView());
+            return true;
+        }),
+    ],
+    shortcuts: {
+        [SupportedKeys.HardBreak]: createShortcut(InsertHardbreak, 'Shift-Enter'),
+    },
+}));

package/src/node/heading.ts

@@ -0,0 +1,101 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { setBlockType } from 'prosemirror-commands';
+import { textblockTypeInputRule } from 'prosemirror-inputrules';
+
+import { SupportedKeys } from '../supported-keys';
+
+const headingIndex = Array(5)
+    .fill(0)
+    .map((_, i) => i + 1);
+
+type Keys =
+    | SupportedKeys['H1']
+    | SupportedKeys['H2']
+    | SupportedKeys['H3']
+    | SupportedKeys['H4']
+    | SupportedKeys['H5']
+    | SupportedKeys['H6'];
+
+const id = 'heading';
+
+export const TurnIntoHeading = createCmdKey<number>();
+
+export const heading = createNode<Keys>((options, utils) => {
+    const headingMap: Record<number, string> = {
+        1: css`
+            font-size: 3rem;
+            line-height: 3.5rem;
+        `,
+        2: css`
+            font-size: 2.125rem;
+            line-height: 2.25rem;
+        `,
+        3: css`
+            font-size: 1.5rem;
+            line-height: 1.5rem;
+        `,
+    };
+
+    const style = (level: number) =>
+        options?.headless
+            ? null
+            : css`
+                  ${headingMap[level] || ''}
+                  margin: 2.5rem 0 !important;
+                  font-weight: 400;
+              `;
+
+    return {
+        id,
+        schema: {
+            content: 'inline*',
+            group: 'block',
+            attrs: {
+                level: {
+                    default: 1,
+                },
+            },
+            parseDOM: headingIndex.map((x) => ({ tag: `h${x}`, attrs: { level: x } })),
+            toDOM: (node) => [
+                `h${node.attrs.level}`,
+                { class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level)) },
+                0,
+            ],
+        },
+        parser: {
+            match: ({ type }) => type === id,
+            runner: (state, node, type) => {
+                const depth = node.depth as number;
+                state.openNode(type, { level: depth });
+                state.next(node.children);
+                state.closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.openNode('heading', undefined, { depth: node.attrs.level });
+                state.next(node.content);
+                state.closeNode();
+            },
+        },
+        inputRules: (nodeType) =>
+            headingIndex.map((x) =>
+                textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), nodeType, () => ({
+                    level: x,
+                })),
+            ),
+        commands: (nodeType) => [createCmd(TurnIntoHeading, (level = 1) => setBlockType(nodeType, { level }))],
+        shortcuts: {
+            [SupportedKeys.H1]: createShortcut(TurnIntoHeading, 'Mod-Alt-1', 1),
+            [SupportedKeys.H2]: createShortcut(TurnIntoHeading, 'Mod-Alt-2', 2),
+            [SupportedKeys.H3]: createShortcut(TurnIntoHeading, 'Mod-Alt-3', 3),
+            [SupportedKeys.H4]: createShortcut(TurnIntoHeading, 'Mod-Alt-4', 4),
+            [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
+            [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
+        },
+    };
+});