@milkdown/preset-commonmark - npm Package Compare versions

Comparing version 4.10.5 to 4.11.0

lib/index.d.ts

 import { AtomList } from '@milkdown/utils';
 import { commonmarkPlugins } from './plugin';
+export * from './mark';
 export * from './node';
-export * from './mark';
 export * from './supported-keys';
-export declare const commonmarkNodes: AtomList<import("@milkdown/core").MilkdownPlugin & {
-    origin: import("@milkdown/utils/lib/atom/types").Origin<"Node" | "Mark", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
-}>;
+export declare const commonmarkNodes: AtomList<import("@milkdown/utils/lib/atom/types").PluginWithMetadata<"CodeFence", {
+    languageList?: string[] | undefined;
+}, import("@milkdown/core").Node>>;
 export { commonmarkPlugins };
-export declare const commonmark: import("@milkdown/core").MilkdownPlugin[];
+export declare const commonmark: AtomList<import("@milkdown/core").MilkdownPlugin>;
 export declare const commands: {
@@ -12,0 +12,0 @@ readonly ToggleInlineCode: import("@milkdown/core").CmdKey<undefined>;

lib/index.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { AtomList } from '@milkdown/utils';
@@ -5,8 +6,8 @@ import { marks, ModifyLink, ToggleBold, ToggleInlineCode, ToggleItalic, ToggleLink } from './mark';
 import { commonmarkPlugins } from './plugin';
+export * from './mark';
 export * from './node';
-export * from './mark';
 export * from './supported-keys';
 export const commonmarkNodes = AtomList.create([...nodes, ...marks]);
 export { commonmarkPlugins };
-export const commonmark = [...commonmarkPlugins, ...commonmarkNodes];
+export const commonmark = AtomList.create([...commonmarkPlugins, ...commonmarkNodes]);
 export const commands = {
@@ -13,0 +14,0 @@ ToggleInlineCode,

lib/mark/code-inline.d.ts

 export declare const ToggleInlineCode: import("@milkdown/core").CmdKey<undefined>;
-export declare const codeInline: import("@milkdown/utils/lib/atom/types").Origin<"Mark", "CodeInline", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const codeInline: import("@milkdown/utils/lib/atom/types").Origin<"CodeInline", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Mark>;
 //# sourceMappingURL=code-inline.d.ts.map

lib/mark/code-inline.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
@@ -8,14 +9,11 @@ import { createCmd, createCmdKey } from '@milkdown/core';
 export const ToggleInlineCode = createCmdKey();
-export const codeInline = createMark((options, utils) => {
-    const { palette } = utils.themeTool;
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              background-color: ${palette('neutral')};
-              color: ${palette('background')};
-              border-radius: ${utils.themeTool.size.radius};
-              font-weight: 500;
-              font-family: ${utils.themeTool.font.fontCode};
-              padding: 0 0.2rem;
-          `;
+export const codeInline = createMark((_, utils) => {
+    const style = utils.getStyle(({ palette, size, font }) => css `
+                background-color: ${palette('neutral')};
+                color: ${palette('background')};
+                border-radius: ${size.radius};
+                font-weight: 500;
+                font-family: ${font.code};
+                padding: 0 0.2rem;
+            `);
     return {
@@ -22,0 +20,0 @@ id,

lib/mark/em.d.ts

 export declare const ToggleItalic: import("@milkdown/core").CmdKey<undefined>;
-export declare const em: import("@milkdown/utils/lib/atom/types").Origin<"Mark", "Em", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const em: import("@milkdown/utils/lib/atom/types").Origin<"Em", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Mark>;
 //# sourceMappingURL=em.d.ts.map

lib/mark/em.js

@@ -1,4 +0,4 @@
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createMark, markRule } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createMark, createShortcut, markRule } from '@milkdown/utils';
 import { toggleMark } from 'prosemirror-commands';
@@ -5,0 +5,0 @@ import { SupportedKeys } from '../supported-keys';

lib/mark/index.d.ts

@@ -1,2 +0,2 @@
-export declare const marks: import("@milkdown/utils/lib/atom/types").PluginWithMetadata<"Mark", "CodeInline", import("@milkdown/utils/lib/type-utility").UnknownRecord>[];
+export declare const marks: import("@milkdown/utils/lib/atom/types").PluginWithMetadata<"CodeInline", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Mark>[];
 export * from './code-inline';
@@ -3,0 +3,0 @@ export * from './em';

lib/mark/index.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { codeInline } from './code-inline';
@@ -2,0 +3,0 @@ import { em } from './em';

lib/mark/link.d.ts

 export declare const ToggleLink: import("@milkdown/core").CmdKey<string>;
 export declare const ModifyLink: import("@milkdown/core").CmdKey<string>;
-export declare const link: import("@milkdown/utils/lib/atom/types").Origin<"Mark", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const link: import("@milkdown/utils/lib/atom/types").Origin<string, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Mark>;
 //# sourceMappingURL=link.d.ts.map

lib/mark/link.js

@@ -0,1 +1,3 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
@@ -6,20 +8,19 @@ import { createMark } from '@milkdown/utils';
 import { TextSelection } from 'prosemirror-state';
-import { css } from '@emotion/css';
 export const ToggleLink = createCmdKey();
 export const ModifyLink = createCmdKey();
 const id = 'link';
-export const link = createMark((options, utils) => {
-    const lineColor = utils.themeTool.palette('line');
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              color: ${utils.themeTool.palette('secondary')};
-              cursor: pointer;
-              transition: all 0.4s ease-in-out;
-              font-weight: 500;
-              &:hover {
-                  background-color: ${lineColor};
-                  box-shadow: 0 0.2rem ${lineColor}, 0 -0.2rem ${lineColor};
-              }
-          `;
+export const link = createMark((_, utils) => {
+    const style = utils.getStyle((themeTool) => {
+        const lineColor = themeTool.palette('line');
+        return css `
+            color: ${themeTool.palette('secondary')};
+            cursor: pointer;
+            transition: all 0.4s ease-in-out;
+            font-weight: 500;
+            &:hover {
+                background-color: ${lineColor};
+                box-shadow: 0 0.2rem ${lineColor}, 0 -0.2rem ${lineColor};
+            }
+        `;
+    });
     return {
@@ -100,7 +101,8 @@ id,
         inputRules: (markType, schema) => [
-            new InputRule(/\[(?<text>.+?)]\((?<href>.*?)(?=“|\))"?(?<title>[^"]+)?"?\)/, (state, match, start, end) => {
+            new InputRule(/\[(?<text>.*?)]\((?<href>.*?)(?=“|\))"?(?<title>[^"]+)?"?\)/, (state, match, start, end) => {
                 const [okay, text = '', href, title] = match;
                 const { tr } = state;
                 if (okay) {
-                    tr.replaceWith(start, end, schema.text(text)).addMark(start, text.length + start, markType.create({ title, href }));
+                    const content = text || 'link';
+                    tr.replaceWith(start, end, schema.text(content)).addMark(start, content.length + start, markType.create({ title, href }));
                 }
@@ -107,0 +109,0 @@ return tr;

lib/mark/strong.d.ts

 export declare const ToggleBold: import("@milkdown/core").CmdKey<undefined>;
-export declare const strong: import("@milkdown/utils/lib/atom/types").Origin<"Mark", "Bold", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const strong: import("@milkdown/utils/lib/atom/types").Origin<"Bold", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Mark>;
 //# sourceMappingURL=strong.d.ts.map

lib/mark/strong.js

@@ -0,5 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createMark, markRule } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createMark, createShortcut, markRule } from '@milkdown/utils';
 import { toggleMark } from 'prosemirror-commands';
@@ -9,8 +9,6 @@ import { SupportedKeys } from '../supported-keys';
 export const ToggleBold = createCmdKey();
-export const strong = createMark((options, utils) => {
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              font-weight: 600;
-          `;
+export const strong = createMark((_, utils) => {
+    const style = utils.getStyle(() => css `
+                font-weight: 600;
+            `);
     return {
@@ -17,0 +15,0 @@ id,

lib/node/blockquote.d.ts

 export declare const WrapInBlockquote: import("@milkdown/core").CmdKey<undefined>;
-export declare const blockquote: import("@milkdown/utils/lib/atom/types").Origin<"Node", "Blockquote", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const blockquote: import("@milkdown/utils/lib/atom/types").Origin<"Blockquote", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=blockquote.d.ts.map

lib/node/blockquote.js

@@ -0,5 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { wrapIn } from 'prosemirror-commands';
@@ -10,14 +10,12 @@ import { wrappingInputRule } from 'prosemirror-inputrules';
 export const WrapInBlockquote = createCmdKey();
-export const blockquote = createNode((options, utils) => {
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              padding-left: 1.875rem;
-              line-height: 1.75rem;
-              border-left: 4px solid ${utils.themeTool.palette('primary')};
-              * {
-                  font-size: 1rem;
-                  line-height: 1.5rem;
-              }
-          `;
+export const blockquote = createNode((_, 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 {
@@ -24,0 +22,0 @@ id,

lib/node/bullet-list.d.ts

 export declare const WrapInBulletList: import("@milkdown/core").CmdKey<undefined>;
-export declare const bulletList: import("@milkdown/utils/lib/atom/types").Origin<"Node", "BulletList", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const bulletList: import("@milkdown/utils/lib/atom/types").Origin<"BulletList", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=bullet-list.d.ts.map

lib/node/bullet-list.js

@@ -1,4 +0,4 @@
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { wrapIn } from 'prosemirror-commands';
@@ -5,0 +5,0 @@ import { wrappingInputRule } from 'prosemirror-inputrules';

lib/node/code-fence.d.ts

 export declare const TurnIntoCodeFence: import("@milkdown/core").CmdKey<undefined>;
-export declare const codeFence: import("@milkdown/utils/lib/atom/types").Origin<"Node", "CodeFence", {
+export declare const codeFence: import("@milkdown/utils/lib/atom/types").Origin<"CodeFence", {
     languageList?: string[] | undefined;
-}>;
+}, import("@milkdown/core").Node>;
 //# sourceMappingURL=code-fence.d.ts.map

lib/node/code-fence.js

@@ -0,5 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { setBlockType } from 'prosemirror-commands';
@@ -30,115 +30,113 @@ import { textblockTypeInputRule } from 'prosemirror-inputrules';
 export const codeFence = createNode((options, utils) => {
-    const { palette } = utils.themeTool;
-    const { shadow, icon, scrollbar, border } = utils.themeTool.widget;
-    const { lineWidth } = utils.themeTool.size;
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              background-color: ${palette('background')};
-              color: ${palette('neutral')};
-              font-size: 0.85rem;
-              padding: 1.2rem 0.4rem 1.4rem;
-              border-radius: ${utils.themeTool.size.radius};
-              font-family: ${utils.themeTool.font.font};
+    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;
-              }
+            * {
+                margin: 0;
+            }
 
-              .code-fence_select-wrapper {
-                  position: relative;
-              }
+            .code-fence_select-wrapper {
+                position: relative;
+            }
 
-              .code-fence_value {
-                  width: 10.25rem;
-                  box-sizing: border-box;
-                  border-radius: ${utils.themeTool.size.radius};
-                  margin: 0 1.2rem 1.2rem;
-                  ${border === null || border === void 0 ? void 0 : border()};
-                  ${shadow === null || shadow === void 0 ? void 0 : 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;
+            .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;
 
-                  &::after {
-                      ${icon === null || icon === void 0 ? void 0 : icon('expand_more')};
-                      width: 2.625rem;
-                      height: 100%;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                      color: ${palette('solid', 0.87)};
-                      border-left: ${lineWidth} solid ${palette('line')};
+                & > *: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.4s ease-in-out;
-                  }
-                  &:hover::after {
-                      background: ${palette('background')};
-                      color: ${palette('primary')};
-                  }
+                    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;
-                  }
-              }
+                > 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-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;
-                  }
+            .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 === null || border === void 0 ? void 0 : border()};
-                  ${shadow === null || shadow === void 0 ? void 0 : shadow()};
-                  background-color: ${palette('surface')};
-                  border-top: none;
-                  overflow-y: auto;
-                  display: flex;
-                  flex-direction: column;
+                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 === null || scrollbar === void 0 ? void 0 : scrollbar('y')}
-              }
+                ${scrollbar('y')}
+            }
 
-              code {
-                  line-height: 1.5;
-              }
+            code {
+                line-height: 1.5;
+            }
 
-              pre {
-                  font-family: var(--font-code);
-                  margin: 0 1.2rem !important;
-                  overflow-x: scroll;
-                  white-space: pre !important;
+            pre {
+                font-family: var(--font-code);
+                margin: 0 1.2rem !important;
+                overflow-x: scroll;
+                white-space: pre !important;
 
-                  padding-bottom: 1.4rem;
+                padding-bottom: 1.4rem;
 
-                  ${scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar('x')}
-              }
-          `;
+                ${scrollbar('x')}
+            }
+        `;
+    });
     return {
@@ -224,2 +222,3 @@ id,
             valueWrapper.appendChild(value);
+            valueWrapper.appendChild(utils.ctx.get(themeToolCtx).slots.icon('downArrow'));
             select.className = 'code-fence_select';
@@ -226,0 +225,0 @@ select.addEventListener('mousedown', (e) => {

lib/node/doc.d.ts

@@ -1,2 +0,2 @@
-export declare const doc: import("@milkdown/utils/lib/atom/types").Origin<"Node", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const doc: import("@milkdown/utils/lib/atom/types").Origin<string, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=doc.d.ts.map

lib/node/doc.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { createNode } from '@milkdown/utils';
@@ -2,0 +3,0 @@ export const doc = createNode(() => ({

lib/node/hardbreak.d.ts

 export declare const InsertHardbreak: import("@milkdown/core").CmdKey<undefined>;
-export declare const hardbreak: import("@milkdown/utils/lib/atom/types").Origin<"Node", "HardBreak", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const hardbreak: import("@milkdown/utils/lib/atom/types").Origin<"HardBreak", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=hardbreak.d.ts.map

lib/node/hardbreak.js

@@ -1,4 +0,4 @@
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { SupportedKeys } from '../supported-keys';
@@ -5,0 +5,0 @@ const id = 'hardbreak';

lib/node/heading.d.ts

 import { SupportedKeys } from '../supported-keys';
 declare type Keys = SupportedKeys['H1'] | SupportedKeys['H2'] | SupportedKeys['H3'] | SupportedKeys['H4'] | SupportedKeys['H5'] | SupportedKeys['H6'];
 export declare const TurnIntoHeading: import("@milkdown/core").CmdKey<number>;
-export declare const heading: import("@milkdown/utils/lib/atom/types").Origin<"Node", Keys, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const heading: import("@milkdown/utils/lib/atom/types").Origin<Keys, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 export {};
 //# sourceMappingURL=heading.d.ts.map

lib/node/heading.js

@@ -1,8 +0,8 @@
-import { createNode } from '@milkdown/utils';
+/* 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 { setBlockType } from 'prosemirror-commands';
 import { SupportedKeys } from '../supported-keys';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createShortcut } from '@milkdown/utils';
-import { css } from '@emotion/css';
 const headingIndex = Array(5)
@@ -9,0 +9,0 @@ .fill(0)

lib/node/hr.d.ts

 export declare const InsertHr: import("@milkdown/core").CmdKey<string>;
-export declare const hr: import("@milkdown/utils/lib/atom/types").Origin<"Node", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const hr: import("@milkdown/utils/lib/atom/types").Origin<string, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=hr.d.ts.map

lib/node/hr.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
@@ -8,10 +9,8 @@ import { createCmd, createCmdKey } from '@milkdown/core';
 export const InsertHr = createCmdKey();
-export const hr = createNode((options, utils) => {
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              height: ${utils.themeTool.size.lineWidth};
-              background-color: ${utils.themeTool.palette('line')};
-              border-width: 0;
-          `;
+export const hr = createNode((_, utils) => {
+    const style = utils.getStyle((themeTool) => css `
+            height: ${themeTool.size.lineWidth};
+            background-color: ${themeTool.palette('line')};
+            border-width: 0;
+        `);
     return {
@@ -18,0 +17,0 @@ id,

lib/node/image.d.ts

 export declare const ModifyImage: import("@milkdown/core").CmdKey<string>;
 export declare const InsertImage: import("@milkdown/core").CmdKey<string>;
-export declare const image: import("@milkdown/utils/lib/atom/types").Origin<"Node", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const image: import("@milkdown/utils/lib/atom/types").Origin<string, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=image.d.ts.map

lib/node/image.js

@@ -0,3 +1,4 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmd, createCmdKey } from '@milkdown/core';
+import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
 import { createNode, findSelectedNodeOfType } from '@milkdown/utils';
@@ -9,119 +10,83 @@ import { InputRule } from 'prosemirror-inputrules';
 const id = 'image';
-export const image = createNode((options, utils) => {
-    var _a, _b, _c, _d, _e, _f;
-    const containerStyle = (options === null || options === void 0 ? void 0 : options.headless)
-        ? ''
-        : css `
-              display: inline-block;
-              margin: 0 auto;
-              position: relative;
-              text-align: center;
-              font-size: 0;
-              width: 100%;
-              img {
-                  width: 100%;
-                  height: auto;
-                  object-fit: contain;
-              }
-              .icon,
-              .placeholder {
-                  display: none;
-              }
+export const image = createNode((_, utils) => {
+    const containerStyle = utils.getStyle((themeTool) => css `
+                display: inline-block;
+                margin: 0 auto;
+                position: relative;
+                text-align: center;
+                font-size: 0;
+                width: 100%;
+                img {
+                    width: 100%;
+                    height: auto;
+                    object-fit: contain;
+                }
+                .icon,
+                .placeholder {
+                    display: none;
+                }
 
-              &.system {
-                  img {
-                      width: 0;
-                      height: 0;
-                      visibility: hidden;
-                  }
+                &.system {
+                    img {
+                        width: 0;
+                        height: 0;
+                        visibility: hidden;
+                    }
 
-                  .icon,
-                  .placeholder {
-                      display: inline;
-                  }
+                    .icon,
+                    .placeholder {
+                        display: inline;
+                    }
 
-                  box-sizing: border-box;
-                  height: 3rem;
-                  background-color: ${utils.themeTool.palette('background')};
-                  border-radius: ${utils.themeTool.size.radius};
-                  display: inline-flex;
-                  gap: 2rem;
-                  justify-content: flex-start;
-                  align-items: center;
-                  .icon {
-                      width: 1.5rem;
-                      height: 1.5rem;
-                      margin: 0;
-                      margin-left: 1rem;
-                      position: relative;
-                      &::before {
-                          position: absolute;
-                          top: 0;
-                          bottom: 0;
-                          left: 0;
-                          right: 0;
-                      }
-                  }
-                  .placeholder {
-                      margin: 0;
-                      &::before {
-                          content: '';
-                          font-size: 0.875rem;
-                          color: ${utils.themeTool.palette('neutral', 0.6)};
-                      }
-                  }
-              }
+                    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;
+                        &::before {
+                            content: '';
+                            font-size: 0.875rem;
+                            color: ${themeTool.palette('neutral', 0.6)};
+                        }
+                    }
+                }
 
-              &.loading {
-                  .icon {
-                      &::before {
-                          ${(_b = (_a = utils.themeTool.widget).icon) === null || _b === void 0 ? void 0 : _b.call(_a, 'hourglass_empty')}
-                      }
-                  }
+                &.loading {
+                    .placeholder {
+                        &::before {
+                            content: 'Loading...';
+                        }
+                    }
+                }
 
-                  .placeholder {
-                      &::before {
-                          content: 'Loading...';
-                      }
-                  }
-              }
+                &.empty {
+                    .placeholder {
+                        &::before {
+                            content: 'Add an image';
+                        }
+                    }
+                }
 
-              &.empty {
-                  .icon {
-                      &::before {
-                          ${(_d = (_c = utils.themeTool.widget).icon) === null || _d === void 0 ? void 0 : _d.call(_c, 'image')}
-                      }
-                  }
-                  .placeholder {
-                      &::before {
-                          content: 'Add an image';
-                      }
-                  }
-              }
-
-              &.failed {
-                  .icon {
-                      &::before {
-                          ${(_f = (_e = utils.themeTool.widget).icon) === null || _f === void 0 ? void 0 : _f.call(_e, 'broken_image')}
-                      }
-                  }
-
-                  .placeholder {
-                      &::before {
-                          content: 'Image load failed';
-                      }
-                  }
-              }
-          `;
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? ''
-        : css `
-              display: inline-block;
-              margin: 0 auto;
-              object-fit: contain;
-              width: 100%;
-              position: relative;
-              height: auto;
-              text-align: center;
-          `;
+                &.failed {
+                    .placeholder {
+                        &::before {
+                            content: 'Image load 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 {
@@ -226,2 +191,3 @@ id,
         view: (_editor, nodeType, node, view, getPos) => {
+            const createIcon = utils.ctx.get(themeToolCtx).slots.icon;
             const container = document.createElement('div');
@@ -231,9 +197,14 @@ container.className = utils.getClassName(node.attrs, id, containerStyle);
             container.append(content);
-            const icon = document.createElement('span');
-            icon.classList.add('icon');
+            let icon = createIcon('image');
             const placeholder = document.createElement('span');
             placeholder.classList.add('placeholder');
             container.append(icon, placeholder);
+            const setIcon = (name) => {
+                const nextIcon = createIcon(name);
+                container.replaceChild(nextIcon, icon);
+                icon = nextIcon;
+            };
             const loadImage = (src) => {
                 container.classList.add('system', 'loading');
+                setIcon('loading');
                 const img = document.createElement('img');
@@ -256,8 +227,9 @@ img.src = src;
             content.alt = alt;
-            if (loading) {
-                loadImage(src);
-            }
             if (src.length === 0) {
                 container.classList.add('system', 'empty');
+                setIcon('image');
             }
+            else if (loading) {
+                loadImage(src);
+            }
             return {
@@ -280,2 +252,3 @@ dom: container,
                         container.classList.add('system', 'failed');
+                        setIcon('brokenImage');
                         return true;
@@ -288,2 +261,3 @@ }
                     container.classList.add('system', 'empty');
+                    setIcon('image');
                     return true;
@@ -290,0 +264,0 @@ },

lib/node/index.d.ts

@@ -1,4 +0,4 @@
-export declare const nodes: import("@milkdown/utils/lib/atom/types").PluginWithMetadata<"Node", "CodeFence", {
+export declare const nodes: import("@milkdown/utils/lib/atom/types").PluginWithMetadata<"CodeFence", {
     languageList?: string[] | undefined;
-}>[];
+}, import("@milkdown/core").Node>[];
 export * from './blockquote';
@@ -5,0 +5,0 @@ export * from './bullet-list';

lib/node/index.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { blockquote } from './blockquote';
@@ -2,0 +3,0 @@ import { bulletList } from './bullet-list';

lib/node/list-item.d.ts

@@ -6,4 +6,4 @@ import { SupportedKeys } from '../supported-keys';
 export declare const LiftListItem: import("@milkdown/core").CmdKey<undefined>;
-export declare const listItem: import("@milkdown/utils/lib/atom/types").Origin<"Node", Keys, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const listItem: import("@milkdown/utils/lib/atom/types").Origin<Keys, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 export {};
 //# sourceMappingURL=list-item.d.ts.map

lib/node/list-item.js

@@ -1,8 +0,8 @@
-import { createNode } from '@milkdown/utils';
+/* 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 { wrappingInputRule } from 'prosemirror-inputrules';
 import { SupportedKeys } from '../supported-keys';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createShortcut } from '@milkdown/utils';
-import { css } from '@emotion/css';
 const id = 'list_item';
@@ -12,18 +12,16 @@ export const SplitListItem = createCmdKey();
 export const LiftListItem = createCmdKey();
-export const listItem = createNode((options, utils) => {
-    const style = (options === null || options === void 0 ? void 0 : options.headless)
-        ? null
-        : css `
-              &,
-              & > * {
-                  margin: 0.5rem 0;
-              }
+export const listItem = createNode((_, utils) => {
+    const style = utils.getStyle((themeTool) => css `
+                &,
+                & > * {
+                    margin: 0.5rem 0;
+                }
 
-              &,
-              li {
-                  &::marker {
-                      color: ${utils.themeTool.palette('primary')};
-                  }
-              }
-          `;
+                &,
+                li {
+                    &::marker {
+                        color: ${themeTool.palette('primary')};
+                    }
+                }
+            `);
     return {
@@ -30,0 +28,0 @@ id,

lib/node/ordered-list.d.ts

 export declare const WrapInOrderedList: import("@milkdown/core").CmdKey<undefined>;
-export declare const orderedList: import("@milkdown/utils/lib/atom/types").Origin<"Node", "OrderedList", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const orderedList: import("@milkdown/utils/lib/atom/types").Origin<"OrderedList", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=ordered-list.d.ts.map

lib/node/ordered-list.js

@@ -1,4 +0,4 @@
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+/* Copyright 2021, Milkdown by Mirone. */
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { wrapIn } from 'prosemirror-commands';
@@ -5,0 +5,0 @@ import { wrappingInputRule } from 'prosemirror-inputrules';

lib/node/paragraph.d.ts

 export declare const TurnIntoText: import("@milkdown/core").CmdKey<undefined>;
-export declare const paragraph: import("@milkdown/utils/lib/atom/types").Origin<"Node", "Text", import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const paragraph: import("@milkdown/utils/lib/atom/types").Origin<"Text", import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=paragraph.d.ts.map

lib/node/paragraph.js

@@ -0,5 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmdKey, createCmd } from '@milkdown/core';
-import { createNode } from '@milkdown/utils';
-import { createShortcut } from '@milkdown/utils';
+import { createCmd, createCmdKey } from '@milkdown/core';
+import { createNode, createShortcut } from '@milkdown/utils';
 import { setBlockType } from 'prosemirror-commands';
@@ -6,0 +6,0 @@ import { SupportedKeys } from '../supported-keys';

lib/node/text.d.ts

@@ -1,2 +0,2 @@
-export declare const text: import("@milkdown/utils/lib/atom/types").Origin<"Node", string, import("@milkdown/utils/lib/type-utility").UnknownRecord>;
+export declare const text: import("@milkdown/utils/lib/atom/types").Origin<string, import("@milkdown/utils/lib/type-utility").UnknownRecord, import("@milkdown/core").Node>;
 //# sourceMappingURL=text.d.ts.map

lib/node/text.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { createNode } from '@milkdown/utils';
@@ -2,0 +3,0 @@ export const text = createNode(() => ({

lib/plugin/index.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 import { remarkPluginFactory } from '@milkdown/core';
@@ -2,0 +3,0 @@ import links from 'remark-inline-links';

lib/supported-keys.js

@@ -0,1 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
 export const SupportedKeys = {
@@ -2,0 +3,0 @@ HardBreak: 'HardBreak',

package.json

 {
   "name": "@milkdown/preset-commonmark",
-  "version": "4.10.5",
+  "version": "4.11.0",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "module": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

115833

decreased by-1.13%

Lines of code

1504

decreased by-1.64%

No dependency changes