@milkdown/preset-commonmark 4.12.0 → 4.13.3

package/src/node/hr.ts

@@ -0,0 +1,67 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode } from '@milkdown/utils';
+import { InputRule } from 'prosemirror-inputrules';
+import { Selection } from 'prosemirror-state';
+
+const id = 'hr';
+export const InsertHr = createCmdKey<string>();
+export const hr = createNode((_, utils) => {
+    const style = utils.getStyle(
+        (themeTool) => css`
+            height: ${themeTool.size.lineWidth};
+            background-color: ${themeTool.palette('line')};
+            border-width: 0;
+        `,
+    );
+    return {
+        id,
+        schema: {
+            group: 'block',
+            parseDOM: [{ tag: 'hr' }],
+            toDOM: (node) => ['hr', { class: utils.getClassName(node.attrs, id, style) }],
+        },
+        parser: {
+            match: ({ type }) => type === 'thematicBreak',
+            runner: (state, _, type) => {
+                state.addNode(type);
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state) => {
+                state.addNode('thematicBreak');
+            },
+        },
+        inputRules: (nodeType) => [
+            new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
+                const { tr } = state;
+
+                if (match[0]) {
+                    tr.replaceWith(start, end, nodeType.create({}));
+                }
+
+                return tr;
+            }),
+        ],
+        commands: (nodeType, schema) => [
+            createCmd(InsertHr, () => (state, dispatch) => {
+                if (!dispatch) return true;
+                const { tr, selection } = state;
+                const from = selection.from;
+                const node = nodeType.create();
+                if (!node) {
+                    return true;
+                }
+                const _tr = tr.replaceSelectionWith(node).insert(from, schema.node('paragraph'));
+                const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true);
+                if (!sel) {
+                    return true;
+                }
+                dispatch(_tr.setSelection(sel).scrollIntoView());
+                return true;
+            }),
+        ],
+    };
+});

package/src/node/image.ts

@@ -0,0 +1,334 @@
+/* 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, findSelectedNodeOfType } from '@milkdown/utils';
+import { InputRule } from 'prosemirror-inputrules';
+
+export const ModifyImage = createCmdKey<string>();
+export const InsertImage = createCmdKey<string>();
+const id = 'image';
+export type ImageOptions = {
+    isBlock: boolean;
+    placeholder: {
+        loading: string;
+        empty: string;
+        failed: string;
+    };
+};
+export const image = createNode<string, ImageOptions>((options, utils) => {
+    const placeholder = {
+        loading: 'Loading...',
+        empty: 'Add an Image',
+        failed: 'Image loads failed',
+        ...(options?.placeholder ?? {}),
+    };
+    const isBlock = options?.isBlock ?? false;
+    const containerStyle = utils.getStyle(
+        (themeTool) =>
+            css`
+                display: inline-block;
+                position: relative;
+                text-align: center;
+                font-size: 0;
+                vertical-align: text-bottom;
+                ${isBlock
+                    ? `
+                width: 100%;
+                margin: 0 auto;
+                `
+                    : ''}
+                img {
+                    max-width: 100%;
+                    height: auto;
+                    object-fit: contain;
+                    margin: 0 2px;
+                }
+                .icon,
+                .placeholder {
+                    display: none;
+                }
+
+                &.system {
+                    width: 100%;
+                    padding: 0 2rem;
+
+                    img {
+                        width: 0;
+                        height: 0;
+                        display: none;
+                    }
+
+                    .icon,
+                    .placeholder {
+                        display: inline;
+                    }
+
+                    box-sizing: border-box;
+                    height: 3rem;
+                    background-color: ${themeTool.palette('background')};
+                    border-radius: ${themeTool.size.radius};
+                    display: inline-flex;
+                    gap: 2rem;
+                    justify-content: flex-start;
+                    align-items: center;
+                    .placeholder {
+                        margin: 0;
+                        line-height: 1;
+                        &::before {
+                            content: '';
+                            font-size: 0.875rem;
+                            color: ${themeTool.palette('neutral', 0.6)};
+                        }
+                    }
+                }
+
+                &.loading {
+                    .placeholder {
+                        &::before {
+                            content: '${placeholder.loading}';
+                        }
+                    }
+                }
+
+                &.empty {
+                    .placeholder {
+                        &::before {
+                            content: '${placeholder.empty}';
+                        }
+                    }
+                }
+
+                &.failed {
+                    .placeholder {
+                        &::before {
+                            content: '${placeholder.failed}';
+                        }
+                    }
+                }
+            `,
+    );
+
+    const style = utils.getStyle(
+        () =>
+            css`
+                display: inline-block;
+                margin: 0 auto;
+                object-fit: contain;
+                width: 100%;
+                position: relative;
+                height: auto;
+                text-align: center;
+            `,
+    );
+
+    return {
+        id,
+        schema: {
+            inline: true,
+            group: 'inline',
+            draggable: true,
+            marks: '',
+            atom: true,
+            defining: true,
+            isolating: true,
+            attrs: {
+                src: { default: '' },
+                alt: { default: null },
+                title: { default: null },
+                failed: { default: false },
+                loading: { default: true },
+                width: { default: 0 },
+            },
+            parseDOM: [
+                {
+                    tag: 'img[src]',
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error();
+                        }
+                        return {
+                            failed: dom.classList.contains('failed'),
+                            loading: dom.classList.contains('loading'),
+                            src: dom.getAttribute('src') || '',
+                            alt: dom.getAttribute('alt'),
+                            title: dom.getAttribute('title') || dom.getAttribute('alt'),
+                            width: dom.getAttribute('width') || 0,
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                return [
+                    'img',
+                    {
+                        ...node.attrs,
+                        class: utils.getClassName(
+                            node.attrs,
+                            id,
+                            node.attrs.failed ? 'failed' : '',
+                            node.attrs.loading ? 'loading' : '',
+                            style,
+                        ),
+                    },
+                ];
+            },
+        },
+        parser: {
+            match: ({ type }) => type === id,
+            runner: (state, node, type) => {
+                const url = node.url as string;
+                const alt = node.alt as string;
+                const title = node.title as string;
+                state.addNode(type, {
+                    src: url,
+                    alt,
+                    title,
+                });
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.addNode('image', undefined, undefined, {
+                    title: node.attrs.title,
+                    url: node.attrs.src,
+                    alt: node.attrs.alt,
+                });
+            },
+        },
+        commands: (nodeType) => [
+            createCmd(InsertImage, (src = '') => (state, dispatch) => {
+                if (!dispatch) return true;
+                const { tr } = state;
+                const node = nodeType.create({ src });
+                if (!node) {
+                    return true;
+                }
+                const _tr = tr.replaceSelectionWith(node);
+                dispatch(_tr.scrollIntoView());
+                return true;
+            }),
+            createCmd(ModifyImage, (src = '') => (state, dispatch) => {
+                const node = findSelectedNodeOfType(state.selection, nodeType);
+                if (!node) return false;
+
+                const { tr } = state;
+                dispatch?.(
+                    tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, loading: true, src }).scrollIntoView(),
+                );
+
+                return true;
+            }),
+        ],
+        inputRules: (nodeType) => [
+            new InputRule(
+                /!\[(?<alt>.*?)]\((?<filename>.*?)\s*(?="|\))"?(?<title>[^"]+)?"?\)/,
+                (state, match, start, end) => {
+                    const [okay, alt, src = '', title] = match;
+                    const { tr } = state;
+                    if (okay) {
+                        tr.replaceWith(start, end, nodeType.create({ src, alt, title }));
+                    }
+
+                    return tr;
+                },
+            ),
+        ],
+        view: (_editor, nodeType, node, view, getPos) => {
+            const createIcon = utils.ctx.get(themeToolCtx).slots.icon;
+            const container = document.createElement('span');
+            container.className = utils.getClassName(node.attrs, id, containerStyle);
+            container.contentEditable = 'false';
+
+            const content = document.createElement('img');
+            content.contentEditable = 'true';
+
+            container.append(content);
+            let icon = createIcon('image');
+            const placeholder = document.createElement('span');
+            placeholder.classList.add('placeholder');
+            container.append(icon, placeholder);
+
+            const setIcon = (name: Icon) => {
+                const nextIcon = createIcon(name);
+                container.replaceChild(nextIcon, icon);
+                icon = nextIcon;
+            };
+
+            const loadImage = (src: string) => {
+                container.classList.add('system', 'loading');
+                setIcon('loading');
+                const img = document.createElement('img');
+                img.src = src;
+
+                img.onerror = () => {
+                    const { tr } = view.state;
+                    const _tr = tr.setNodeMarkup(getPos(), nodeType, {
+                        ...node.attrs,
+                        src,
+                        loading: false,
+                        failed: true,
+                    });
+                    view.dispatch(_tr);
+                };
+
+                img.onload = () => {
+                    const { tr } = view.state;
+                    const _tr = tr.setNodeMarkup(getPos(), nodeType, {
+                        ...node.attrs,
+                        width: img.width,
+                        src,
+                        loading: false,
+                        failed: false,
+                    });
+                    view.dispatch(_tr);
+                };
+            };
+
+            const { src, loading, title, alt, width } = node.attrs;
+            content.src = src;
+            content.title = title || alt;
+            content.alt = alt;
+            content.width = width;
+
+            if (src.length === 0) {
+                container.classList.add('system', 'empty');
+                setIcon('image');
+            } else if (loading) {
+                loadImage(src);
+            }
+
+            return {
+                dom: container,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== id) return false;
+
+                    const { src, alt, title, loading, failed, width } = updatedNode.attrs;
+                    content.src = src;
+                    content.alt = alt;
+                    content.title = title || alt;
+                    content.width = width;
+                    if (loading) {
+                        loadImage(src);
+                        return true;
+                    }
+                    if (failed) {
+                        container.classList.remove('loading', 'empty');
+                        container.classList.add('system', 'failed');
+                        setIcon('brokenImage');
+                        return true;
+                    }
+                    if (src.length > 0) {
+                        container.classList.remove('system', 'empty', 'loading');
+                        return true;
+                    }
+
+                    container.classList.add('system', 'empty');
+                    setIcon('image');
+                    return true;
+                },
+            };
+        },
+    };
+});

package/src/node/index.ts

@@ -0,0 +1,41 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { blockquote } from './blockquote';
+import { bulletList } from './bullet-list';
+import { codeFence } from './code-fence';
+import { doc } from './doc';
+import { hardbreak } from './hardbreak';
+import { heading } from './heading';
+import { hr } from './hr';
+import { image } from './image';
+import { listItem } from './list-item';
+import { orderedList } from './ordered-list';
+import { paragraph } from './paragraph';
+import { text } from './text';
+
+export const nodes = [
+    doc(),
+    paragraph(),
+    hardbreak(),
+    blockquote(),
+    codeFence(),
+    bulletList(),
+    orderedList(),
+    listItem(),
+    heading(),
+    hr(),
+    image(),
+    text(),
+];
+
+export * from './blockquote';
+export * from './bullet-list';
+export * from './code-fence';
+export * from './doc';
+export * from './hardbreak';
+export * from './heading';
+export * from './hr';
+export * from './image';
+export * from './list-item';
+export * from './ordered-list';
+export * from './paragraph';
+export * from './text';

package/src/node/list-item.ts

@@ -0,0 +1,73 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
+
+import { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['SinkListItem'] | SupportedKeys['LiftListItem'] | SupportedKeys['NextListItem'];
+
+const id = 'list_item';
+
+export const SplitListItem = createCmdKey();
+export const SinkListItem = createCmdKey();
+export const LiftListItem = createCmdKey();
+
+export const listItem = createNode<Keys>((_, utils) => {
+    const style = utils.getStyle(
+        (themeTool) =>
+            css`
+                &,
+                & > * {
+                    margin: 0.5rem 0;
+                }
+
+                &,
+                li {
+                    &::marker {
+                        color: ${themeTool.palette('primary')};
+                    }
+                }
+            `,
+    );
+
+    return {
+        id,
+        schema: {
+            group: 'listItem',
+            content: 'paragraph block*',
+            defining: true,
+            parseDOM: [{ tag: 'li' }],
+            toDOM: (node) => ['li', { class: utils.getClassName(node.attrs, 'list-item', style) }, 0],
+        },
+        parser: {
+            match: ({ type, checked }) => type === 'listItem' && checked === null,
+            runner: (state, node, type) => {
+                state.openNode(type);
+                state.next(node.children);
+                state.closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.openNode('listItem');
+                state.next(node.content);
+                state.closeNode();
+            },
+        },
+        inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
+        commands: (nodeType) => [
+            createCmd(SplitListItem, () => splitListItem(nodeType)),
+            createCmd(SinkListItem, () => sinkListItem(nodeType)),
+            createCmd(LiftListItem, () => liftListItem(nodeType)),
+        ],
+        shortcuts: {
+            [SupportedKeys.NextListItem]: createShortcut(SplitListItem, 'Enter'),
+            [SupportedKeys.SinkListItem]: createShortcut(SinkListItem, 'Mod-]'),
+            [SupportedKeys.LiftListItem]: createShortcut(LiftListItem, 'Mod-['),
+        },
+    };
+});

package/src/node/ordered-list.ts

@@ -0,0 +1,70 @@
+/* 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['OrderedList'];
+
+export const WrapInOrderedList = createCmdKey();
+
+const id = 'ordered_list';
+export const orderedList = createNode<Keys>((_, utils) => ({
+    id,
+    schema: {
+        content: 'listItem+',
+        group: 'block',
+        attrs: {
+            order: {
+                default: 1,
+            },
+        },
+        parseDOM: [
+            {
+                tag: 'ol',
+                getAttrs: (dom) => {
+                    if (!(dom instanceof HTMLElement)) {
+                        throw new Error();
+                    }
+                    return { order: dom.hasAttribute('start') ? Number(dom.getAttribute('start')) : 1 };
+                },
+            },
+        ],
+        toDOM: (node) => [
+            'ol',
+            {
+                ...(node.attrs.order === 1 ? {} : node.attrs.order),
+                class: utils.getClassName(node.attrs, 'ordered-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: true, start: 1 });
+            state.next(node.content);
+            state.closeNode();
+        },
+    },
+    inputRules: (nodeType) => [
+        wrappingInputRule(
+            /^(\d+)\.\s$/,
+            nodeType,
+            (match) => ({ order: Number(match[1]) }),
+            (match, node) => node.childCount + node.attrs.order === Number(match[1]),
+        ),
+    ],
+    commands: (nodeType) => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],
+    shortcuts: {
+        [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, 'Mod-Shift-7'),
+    },
+}));

package/src/node/paragraph.ts

@@ -0,0 +1,56 @@
+/* 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 { SupportedKeys } from '../supported-keys';
+
+type Keys = SupportedKeys['Text'];
+
+export const TurnIntoText = createCmdKey();
+
+const id = 'paragraph';
+export const paragraph = createNode<Keys>((options, utils) => {
+    const style = options?.headless
+        ? null
+        : css`
+              font-size: 1rem;
+              line-height: 1.5;
+              letter-spacing: 0.5px;
+          `;
+
+    return {
+        id,
+        schema: {
+            content: 'inline*',
+            group: 'block',
+            parseDOM: [{ tag: 'p' }],
+            toDOM: (node) => ['p', { class: utils.getClassName(node.attrs, id, style) }, 0],
+        },
+        parser: {
+            match: (node) => node.type === 'paragraph',
+            runner: (state, node, type) => {
+                state.openNode(type);
+                if (node.children) {
+                    state.next(node.children);
+                } else {
+                    state.addText(node.value as string);
+                }
+                state.closeNode();
+            },
+        },
+        serializer: {
+            match: (node) => node.type.name === 'paragraph',
+            runner: (state, node) => {
+                state.openNode('paragraph');
+                state.next(node.content);
+                state.closeNode();
+            },
+        },
+        commands: (nodeType) => [createCmd(TurnIntoText, () => setBlockType(nodeType))],
+        shortcuts: {
+            [SupportedKeys.Text]: createShortcut(TurnIntoText, 'Mod-Alt-0'),
+        },
+    };
+});

package/src/node/text.ts

@@ -0,0 +1,21 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createNode } from '@milkdown/utils';
+
+export const text = createNode(() => ({
+    id: 'text',
+    schema: {
+        group: 'inline',
+    },
+    parser: {
+        match: ({ type }) => type === 'text',
+        runner: (state, node) => {
+            state.addText(node.value as string);
+        },
+    },
+    serializer: {
+        match: (node) => node.type.name === 'text',
+        runner: (state, node) => {
+            state.addNode('text', undefined, node.text as string);
+        },
+    },
+}));