@milkdown/preset-commonmark 5.4.0 → 6.0.0-next.0

package/src/node/code-fence.ts

@@ -1,5 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
+import { createCmd, createCmdKey, editorViewCtx, ThemeCodeFenceType } from '@milkdown/core';
 import { setBlockType, textblockTypeInputRule } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
 
@@ -29,123 +29,15 @@ const languageOptions = [
 export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
 export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 
-export const TurnIntoCodeFence = createCmdKey();
+export const TurnIntoCodeFence = createCmdKey('TurnIntoCodeFence');
 
 const id = 'fence';
 export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, options) => {
-    const style = utils.getStyle(({ palette, mixin, size, font }, { css }) => {
-        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;
-
-                & > .icon {
-                    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;
-                font-family: ${font.code};
-            }
-
-            pre {
-                font-family: ${font.code};
-                margin: 0 1.2rem !important;
-                white-space: pre;
-                overflow: auto;
-                ${scrollbar('x')};
-            }
-        `;
-    });
+    const languageList = options?.languageList || languageOptions;
 
     return {
         id,
-        schema: () => ({
+        schema: (ctx) => ({
             content: 'text*',
             group: 'block',
             marks: '',
@@ -167,25 +59,66 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                         if (!(dom instanceof HTMLElement)) {
                             throw new Error('Parse DOM error.');
                         }
-                        return { language: dom.dataset.language };
+                        return { language: dom.dataset['language'] };
                     },
                 },
             ],
             toDOM: (node) => {
+                const select = document.createElement('select');
+                languageList.forEach((lang) => {
+                    const option = document.createElement('option');
+                    option.value = lang;
+                    option.innerText = !lang ? '--' : lang;
+                    if (lang === node.attrs['language']) {
+                        option.selected = true;
+                    }
+                    select.appendChild(option);
+                });
+                select.onchange = (e) => {
+                    const target = e.target;
+                    if (!(target instanceof HTMLSelectElement)) {
+                        return;
+                    }
+                    const view = ctx.get(editorViewCtx);
+                    if (!view.editable) {
+                        target.value = node.attrs['language'];
+                        return;
+                    }
+
+                    const { top, left } = target.getBoundingClientRect();
+                    const result = view.posAtCoords({ top, left });
+                    if (!result) return;
+
+                    const { tr } = view.state;
+
+                    view.dispatch(
+                        tr.setNodeMarkup(result.inside, undefined, {
+                            ...node.attrs,
+                            language: target.value,
+                        }),
+                    );
+                };
                 return [
-                    'pre',
+                    'div',
                     {
-                        'data-language': node.attrs.language,
-                        class: utils.getClassName(node.attrs, 'code-fence', style),
+                        class: 'code-fence-container',
                     },
-                    ['code', { spellCheck: 'false' }, 0],
+                    select,
+                    [
+                        'pre',
+                        {
+                            'data-language': node.attrs['language'],
+                            class: utils.getClassName(node.attrs, 'code-fence'),
+                        },
+                        ['code', { spellCheck: 'false' }, 0],
+                    ],
                 ];
             },
             parseMarkdown: {
                 match: ({ type }) => type === 'code',
                 runner: (state, node, type) => {
-                    const language = node.lang as string;
-                    const value = node.value as string;
+                    const language = node['lang'] as string;
+                    const value = node['value'] as string;
                     state.openNode(type, { language });
                     if (value) {
                         state.addText(value);
@@ -197,7 +130,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 match: (node) => node.type.name === id,
                 runner: (state, node) => {
                     state.addNode('code', undefined, node.content.firstChild?.text || '', {
-                        lang: node.attrs.language,
+                        lang: node.attrs['language'],
                     });
                 },
             },
@@ -218,103 +151,62 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
         shortcuts: {
             [SupportedKeys.CodeFence]: createShortcut(TurnIntoCodeFence, 'Mod-Alt-c'),
         },
-        view: (ctx) => (node, view, getPos) => {
-            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');
+        view: () => (node, view, getPos) => {
+            let currNode = node;
 
-            const valueWrapper = document.createElement('div');
-            valueWrapper.className = 'code-fence_value';
-            const value = document.createElement('span');
-            valueWrapper.appendChild(value);
-            if (view.editable) {
-                valueWrapper.appendChild(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 onSelectLanguage = (language: string) => {
                 const { tr } = view.state;
-
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
                         fold: true,
-                        language: el.dataset.value,
+                        language,
                     }),
                 );
-            });
-            valueWrapper.addEventListener('mousedown', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (!view.editable) return;
+            };
+            const onBlur = () => {
                 const { tr } = view.state;
 
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
-                        fold: false,
-                        language: container.dataset.language,
+                        ...currNode.attrs,
+                        fold: true,
                     }),
                 );
-            });
-            document.addEventListener('mousedown', () => {
-                if (!view.editable || select.dataset.fold === 'true') return;
-
+            };
+            const onFocus = () => {
                 const { tr } = view.state;
 
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
-                        fold: true,
-                        language: container.dataset.language,
+                        ...currNode.attrs,
+                        fold: false,
                     }),
                 );
-            });
+            };
 
-            (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);
+            const renderer = utils.themeManager.get<ThemeCodeFenceType>('code-fence', {
+                onBlur,
+                onFocus,
+                onSelectLanguage,
+                editable: () => view.editable,
+                languageList,
             });
+            if (!renderer) return {};
 
-            code.spellcheck = false;
-            selectWrapper.className = 'code-fence_select-wrapper';
-            selectWrapper.contentEditable = 'false';
-            selectWrapper.append(valueWrapper);
-            selectWrapper.append(select);
-            pre.append(code);
-            const codeContent = document.createElement('div');
-            code.append(codeContent);
-            codeContent.style.whiteSpace = 'inherit';
-
-            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');
+            const { dom, contentDOM, onUpdate, onDestroy } = renderer;
+            onUpdate(currNode);
 
             return {
-                dom: container,
-                contentDOM: codeContent,
+                dom,
+                contentDOM,
                 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');
+                    currNode = updatedNode;
+                    onUpdate(currNode);
 
                     return true;
                 },
+                destroy: onDestroy,
             };
         },
     };

package/src/node/hardbreak.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['HardBreak'];
 
-export const InsertHardbreak = createCmdKey();
+export const InsertHardbreak = createCmdKey('InsertHardbreak');
 
 export const hardbreak = createNode<Keys>((utils) => {
     return {
@@ -42,10 +42,11 @@ export const hardbreak = createNode<Keys>((utils) => {
         },
         prosePlugins: (type) => [
             new Plugin({
-                key: new PluginKey('hardbreak-marks'),
+                key: new PluginKey('MILKDOWN_PLUGIN_HARDBREAK_MARKS'),
                 appendTransaction: (trs, _oldState, newState) => {
                     if (!trs.length) return;
                     const [tr] = trs;
+                    if (!tr) return;
 
                     const [step] = tr.steps;
 

package/src/node/heading.ts

@@ -25,49 +25,13 @@ type Keys =
     | SupportedKeys['H5']
     | SupportedKeys['H6'];
 
-export const TurnIntoHeading = createCmdKey<number>();
+export const TurnIntoHeading = createCmdKey<number>('TurnIntoHeading');
 
 export const headingPluginKey = new PluginKey('MILKDOWN_PLUGIN_ID');
 
 export const heading = createNode<Keys>((utils) => {
     const id = 'heading';
 
-    const style = (level: number) =>
-        utils.getStyle((_, { css }) => {
-            const headingMap: Record<number, string> = {
-                1: css`
-                    font-size: 3rem;
-                    line-height: 3.5rem;
-                `,
-                2: css`
-                    font-size: 2.5rem;
-                    line-height: 3rem;
-                `,
-                3: css`
-                    font-size: 2.125rem;
-                    line-height: 2.25rem;
-                `,
-                4: css`
-                    font-size: 1.75rem;
-                    line-height: 2rem;
-                `,
-                5: css`
-                    font-size: 1.5rem;
-                    line-height: 1.5rem;
-                `,
-                6: css`
-                    font-size: 1.25rem;
-                    line-height: 1.25rem;
-                `,
-            };
-
-            return css`
-                ${headingMap[level] || ''}
-                margin: 2.5rem 0 !important;
-                font-weight: 400;
-            `;
-        });
-
     return {
         id,
         schema: () => ({
@@ -93,10 +57,10 @@ export const heading = createNode<Keys>((utils) => {
             })),
             toDOM: (node) => {
                 return [
-                    `h${node.attrs.level}`,
+                    `h${node.attrs['level']}`,
                     {
-                        id: node.attrs.id || node.textContent.split(' ').join('-').toLocaleLowerCase(),
-                        class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level)),
+                        id: node.attrs['id'] || node.textContent.split(' ').join('-').toLocaleLowerCase(),
+                        class: utils.getClassName(node.attrs, `heading h${node.attrs['level']}`),
                     },
                     0,
                 ];
@@ -104,7 +68,7 @@ export const heading = createNode<Keys>((utils) => {
             parseMarkdown: {
                 match: ({ type }) => type === id,
                 runner: (state, node, type) => {
-                    const depth = node.depth as number;
+                    const depth = node['depth'] as number;
                     state.openNode(type, { level: depth });
                     state.next(node.children);
                     state.closeNode();
@@ -113,7 +77,7 @@ export const heading = createNode<Keys>((utils) => {
             toMarkdown: {
                 match: (node) => node.type.name === id,
                 runner: (state, node) => {
-                    state.openNode('heading', undefined, { depth: node.attrs.level });
+                    state.openNode('heading', undefined, { depth: node.attrs['level'] });
                     state.next(node.content);
                     state.closeNode();
                 },
@@ -152,8 +116,8 @@ export const heading = createNode<Keys>((utils) => {
                         const attrs = node.attrs;
                         const id = createId(node);
 
-                        if (attrs.id !== id) {
-                            tr.setNodeMarkup(pos, undefined, {
+                        if (attrs['id'] !== id) {
+                            tr.setMeta(headingPluginKey, true).setNodeMarkup(pos, undefined, {
                                 ...attrs,
                                 id,
                             });
@@ -174,7 +138,9 @@ export const heading = createNode<Keys>((utils) => {
                             compositionend: () => {
                                 lock = false;
                                 const view = ctx.get(editorViewCtx);
-                                walkThrough(view.state, (tr) => view.dispatch(tr));
+                                setTimeout(() => {
+                                    walkThrough(view.state, (tr) => view.dispatch(tr));
+                                }, 0);
                                 return false;
                             },
                         },
@@ -182,7 +148,10 @@ export const heading = createNode<Keys>((utils) => {
                     appendTransaction: (transactions, _, nextState) => {
                         let tr: Transaction | null = null;
 
-                        if (transactions.some((transaction) => transaction.docChanged)) {
+                        if (
+                            transactions.every((transaction) => !transaction.getMeta(headingPluginKey)) &&
+                            transactions.some((transaction) => transaction.docChanged)
+                        ) {
                             walkThrough(nextState, (t) => {
                                 tr = t;
                             });

package/src/node/hr.ts

@@ -4,21 +4,14 @@ import { InputRule, Selection } from '@milkdown/prose';
 import { createNode } from '@milkdown/utils';
 
 const id = 'hr';
-export const InsertHr = createCmdKey<string>();
+export const InsertHr = createCmdKey<string>('InsertHr');
 export const hr = createNode((utils) => {
-    const style = utils.getStyle(
-        (themeTool, { css }) => 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) }],
+            toDOM: (node) => ['hr', { class: utils.getClassName(node.attrs, id) }],
             parseMarkdown: {
                 match: ({ type }) => type === 'thematicBreak',
                 runner: (state, _, type) => {