@milkdown/preset-commonmark 5.5.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';
 
@@ -33,119 +33,11 @@ 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: '',
@@ -172,13 +64,54 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 },
             ],
             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: {
@@ -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/heading.ts

@@ -32,42 +32,6 @@ 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: () => ({
@@ -96,11 +60,7 @@ export const heading = createNode<Keys>((utils) => {
                     `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']),
-                        ),
+                        class: utils.getClassName(node.attrs, `heading h${node.attrs['level']}`),
                     },
                     0,
                 ];

package/src/node/hr.ts

@@ -6,19 +6,12 @@ import { createNode } from '@milkdown/utils';
 const id = 'hr';
 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) => {