@milkdown/preset-commonmark 6.5.2 → 6.5.4

package/src/node/hr.ts

@@ -1,61 +1,61 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
-import { InputRule } from '@milkdown/prose/inputrules';
-import { Selection } from '@milkdown/prose/state';
-import { createNode } from '@milkdown/utils';
+import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core'
+import { InputRule } from '@milkdown/prose/inputrules'
+import { Selection } from '@milkdown/prose/state'
+import { createNode } from '@milkdown/utils'
 
-const id = 'hr';
-export const InsertHr = createCmdKey<string>('InsertHr');
+const id = 'hr'
+export const InsertHr = createCmdKey<string>('InsertHr')
 export const hr = createNode((utils) => {
-    return {
-        id,
-        schema: () => ({
-            group: 'block',
-            parseDOM: [{ tag: 'hr' }],
-            toDOM: (node) => ['hr', { class: utils.getClassName(node.attrs, id) }],
-            parseMarkdown: {
-                match: ({ type }) => type === 'thematicBreak',
-                runner: (state, _, type) => {
-                    state.addNode(type);
-                },
-            },
-            toMarkdown: {
-                match: (node) => node.type.name === id,
-                runner: (state) => {
-                    state.addNode('thematicBreak');
-                },
-            },
-        }),
-        inputRules: (type) => [
-            new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
-                const { tr } = state;
+  return {
+    id,
+    schema: () => ({
+      group: 'block',
+      parseDOM: [{ tag: 'hr' }],
+      toDOM: node => ['hr', { class: utils.getClassName(node.attrs, id) }],
+      parseMarkdown: {
+        match: ({ type }) => type === 'thematicBreak',
+        runner: (state, _, type) => {
+          state.addNode(type)
+        },
+      },
+      toMarkdown: {
+        match: node => node.type.name === id,
+        runner: (state) => {
+          state.addNode('thematicBreak')
+        },
+      },
+    }),
+    inputRules: type => [
+      new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
+        const { tr } = state
 
-                if (match[0]) {
-                    tr.replaceWith(start - 1, end, type.create());
-                }
+        if (match[0])
+          tr.replaceWith(start - 1, end, type.create())
 
-                return tr;
-            }),
-        ],
-        commands: (type, ctx) => [
-            createCmd(InsertHr, () => (state, dispatch) => {
-                if (!dispatch) return true;
+        return tr
+      }),
+    ],
+    commands: (type, ctx) => [
+      createCmd(InsertHr, () => (state, dispatch) => {
+        if (!dispatch)
+          return true
 
-                const paragraph = ctx.get(schemaCtx).node('paragraph');
-                const { tr, selection } = state;
-                const { from } = selection;
-                const node = type.create();
-                if (!node) {
-                    return true;
-                }
-                const _tr = tr.replaceSelectionWith(node).insert(from, paragraph);
-                const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true);
-                if (!sel) {
-                    return true;
-                }
-                dispatch(_tr.setSelection(sel).scrollIntoView());
-                return true;
-            }),
-        ],
-    };
-});
+        const paragraph = ctx.get(schemaCtx).node('paragraph')
+        const { tr, selection } = state
+        const { from } = selection
+        const node = type.create()
+        if (!node)
+          return true
+
+        const _tr = tr.replaceSelectionWith(node).insert(from, 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

@@ -1,218 +1,224 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { commandsCtx, createCmd, createCmdKey, ThemeImageType, ThemeInputChipType } from '@milkdown/core';
-import { expectDomTypeError } from '@milkdown/exception';
-import { findSelectedNodeOfType } from '@milkdown/prose';
-import { InputRule } from '@milkdown/prose/inputrules';
-import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { EditorView, NodeView } from '@milkdown/prose/view';
-import { createNode } from '@milkdown/utils';
-
-export const ModifyImage = createCmdKey<string>('ModifyImage');
-export const InsertImage = createCmdKey<string>('InsertImage');
-const id = 'image';
-export type ImageOptions = {
-    isBlock: boolean;
-    placeholder: string;
-    input: {
-        placeholder: string;
-        buttonText?: string;
-    };
-};
-const key = new PluginKey('MILKDOWN_IMAGE_INPUT');
+import type { ThemeImageType, ThemeInputChipType } from '@milkdown/core'
+import { commandsCtx, createCmd, createCmdKey } from '@milkdown/core'
+import { expectDomTypeError } from '@milkdown/exception'
+import { findSelectedNodeOfType } from '@milkdown/prose'
+import { InputRule } from '@milkdown/prose/inputrules'
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import type { EditorView, NodeView } from '@milkdown/prose/view'
+import { createNode } from '@milkdown/utils'
+
+export const ModifyImage = createCmdKey<string>('ModifyImage')
+export const InsertImage = createCmdKey<string>('InsertImage')
+const id = 'image'
+export interface ImageOptions {
+  isBlock: boolean
+  placeholder: string
+  input: {
+    placeholder: string
+    buttonText?: string
+  }
+}
+const key = new PluginKey('MILKDOWN_IMAGE_INPUT')
 
 export const image = createNode<string, ImageOptions>((utils, options) => {
-    return {
-        id: 'image',
-        schema: () => ({
-            inline: true,
-            group: 'inline',
-            selectable: true,
-            draggable: true,
-            marks: '',
-            atom: true,
-            defining: true,
-            isolating: true,
-            attrs: {
-                src: { default: '' },
-                alt: { default: '' },
-                title: { default: '' },
-            },
-            parseDOM: [
-                {
-                    tag: 'img[src]',
-                    getAttrs: (dom) => {
-                        if (!(dom instanceof HTMLElement)) {
-                            throw expectDomTypeError(dom);
-                        }
-                        return {
-                            src: dom.getAttribute('src') || '',
-                            alt: dom.getAttribute('alt') || '',
-                            title: dom.getAttribute('title') || dom.getAttribute('alt') || '',
-                        };
-                    },
-                },
-            ],
-            toDOM: (node) => {
-                return [
-                    'img',
-                    {
-                        ...node.attrs,
-                        class: utils.getClassName(node.attrs, id),
-                    },
-                ];
-            },
-            parseMarkdown: {
-                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,
-                    });
-                },
-            },
-            toMarkdown: {
-                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: (type) => [
-            createCmd(InsertImage, (src = '') => (state, dispatch) => {
-                if (!dispatch) return true;
-                const { tr } = state;
-                const node = type.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, type);
-                if (!node) return false;
-
-                const { tr } = state;
-                dispatch?.(
-                    tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, loading: true, src }).scrollIntoView(),
-                );
-
-                return true;
-            }),
-        ],
-        inputRules: (type) => [
-            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, type.create({ src, alt, title }));
-                    }
-
-                    return tr;
-                },
-            ),
-        ],
-        view: () => (node) => {
-            let currNode = node;
-
-            const placeholder = options?.placeholder ?? 'Add an Image';
-            const isBlock = options?.isBlock ?? false;
-            const renderer = utils.themeManager.get<ThemeImageType>('image', {
-                placeholder,
-                isBlock,
-            });
-
-            if (!renderer) {
-                return {} as NodeView;
+  return {
+    id: 'image',
+    schema: () => ({
+      inline: true,
+      group: 'inline',
+      selectable: true,
+      draggable: true,
+      marks: '',
+      atom: true,
+      defining: true,
+      isolating: true,
+      attrs: {
+        src: { default: '' },
+        alt: { default: '' },
+        title: { default: '' },
+      },
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: (dom) => {
+            if (!(dom instanceof HTMLElement))
+              throw expectDomTypeError(dom)
+
+            return {
+              src: dom.getAttribute('src') || '',
+              alt: dom.getAttribute('alt') || '',
+              title: dom.getAttribute('title') || dom.getAttribute('alt') || '',
             }
+          },
+        },
+      ],
+      toDOM: (node) => {
+        return [
+          'img',
+          {
+            ...node.attrs,
+            class: utils.getClassName(node.attrs, id),
+          },
+        ]
+      },
+      parseMarkdown: {
+        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,
+          })
+        },
+      },
+      toMarkdown: {
+        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: type => [
+      createCmd(InsertImage, (src = '') => (state, dispatch) => {
+        if (!dispatch)
+          return true
+        const { tr } = state
+        const node = type.create({ src })
+        if (!node)
+          return true
 
-            const { dom, onUpdate } = renderer;
-            onUpdate(currNode);
+        const _tr = tr.replaceSelectionWith(node)
+        dispatch(_tr.scrollIntoView())
+        return true
+      }),
+      createCmd(ModifyImage, (src = '') => (state, dispatch) => {
+        const node = findSelectedNodeOfType(state.selection, type)
+        if (!node)
+          return false
 
-            return {
-                dom,
-                update: (updatedNode) => {
-                    if (updatedNode.type.name !== id) return false;
-
-                    currNode = updatedNode;
-                    onUpdate(currNode);
-
-                    return true;
-                },
-                selectNode: () => {
-                    dom.classList.add('ProseMirror-selectednode');
-                },
-                deselectNode: () => {
-                    dom.classList.remove('ProseMirror-selectednode');
-                },
-            };
+        const { tr } = state
+        dispatch?.(
+          tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, loading: true, src }).scrollIntoView(),
+        )
+
+        return true
+      }),
+    ],
+    inputRules: type => [
+      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, type.create({ src, alt, title }))
+
+          return tr
+        },
+      ),
+    ],
+    view: () => (node) => {
+      let currNode = node
+
+      const placeholder = options?.placeholder ?? 'Add an Image'
+      const isBlock = options?.isBlock ?? false
+      const renderer = utils.themeManager.get<ThemeImageType>('image', {
+        placeholder,
+        isBlock,
+      })
+
+      if (!renderer)
+        return {} as NodeView
+
+      const { dom, onUpdate } = renderer
+      onUpdate(currNode)
+
+      return {
+        dom,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== id)
+            return false
+
+          currNode = updatedNode
+          onUpdate(currNode)
+
+          return true
+        },
+        selectNode: () => {
+          dom.classList.add('ProseMirror-selectednode')
         },
-        prosePlugins: (type, ctx) => {
-            return [
-                new Plugin({
-                    key,
-                    view: (editorView) => {
-                        const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
-                            placeholder: options?.input?.placeholder ?? 'Input Image Link',
-                            buttonText: options?.input?.buttonText,
-                            onUpdate: (value) => {
-                                ctx.get(commandsCtx).call(ModifyImage, value);
-                            },
-                        });
-                        if (!inputChipRenderer) return {};
-                        const shouldDisplay = (view: EditorView) => {
-                            return Boolean(
-                                view.hasFocus() && type && findSelectedNodeOfType(view.state.selection, type),
-                            );
-                        };
-                        const getCurrentLink = (view: EditorView) => {
-                            const result = findSelectedNodeOfType(view.state.selection, type);
-                            if (!result) return;
-
-                            const value = result.node.attrs['src'];
-                            return value;
-                        };
-                        const renderByView = (view: EditorView) => {
-                            if (!view.editable) {
-                                return;
-                            }
-                            const display = shouldDisplay(view);
-                            if (display) {
-                                inputChipRenderer.show(view);
-                                inputChipRenderer.update(getCurrentLink(view));
-                            } else {
-                                inputChipRenderer.hide();
-                            }
-                        };
-                        inputChipRenderer.init(editorView);
-                        renderByView(editorView);
-
-                        return {
-                            update: (view, prevState) => {
-                                const isEqualSelection =
-                                    prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection);
-                                if (isEqualSelection) return;
-
-                                renderByView(view);
-                            },
-                            destroy: () => {
-                                inputChipRenderer.destroy();
-                            },
-                        };
-                    },
-                }),
-            ];
+        deselectNode: () => {
+          dom.classList.remove('ProseMirror-selectednode')
         },
-    };
-});
+      }
+    },
+    prosePlugins: (type, ctx) => {
+      return [
+        new Plugin({
+          key,
+          view: (editorView) => {
+            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
+              placeholder: options?.input?.placeholder ?? 'Input Image Link',
+              buttonText: options?.input?.buttonText,
+              onUpdate: (value) => {
+                ctx.get(commandsCtx).call(ModifyImage, value)
+              },
+            })
+            if (!inputChipRenderer)
+              return {}
+            const shouldDisplay = (view: EditorView) => {
+              return Boolean(
+                view.hasFocus() && type && findSelectedNodeOfType(view.state.selection, type),
+              )
+            }
+            const getCurrentLink = (view: EditorView) => {
+              const result = findSelectedNodeOfType(view.state.selection, type)
+              if (!result)
+                return
+
+              const value = result.node.attrs.src
+              return value
+            }
+            const renderByView = (view: EditorView) => {
+              if (!view.editable)
+                return
+
+              const display = shouldDisplay(view)
+              if (display) {
+                inputChipRenderer.show(view)
+                inputChipRenderer.update(getCurrentLink(view))
+              }
+              else {
+                inputChipRenderer.hide()
+              }
+            }
+            inputChipRenderer.init(editorView)
+            renderByView(editorView)
+
+            return {
+              update: (view, prevState) => {
+                const isEqualSelection
+                                    = prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection)
+                if (isEqualSelection)
+                  return
+
+                renderByView(view)
+              },
+              destroy: () => {
+                inputChipRenderer.destroy()
+              },
+            }
+          },
+        }),
+      ]
+    },
+  }
+})

package/src/node/index.ts

@@ -1,43 +1,43 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { AtomPlugin } from '@milkdown/utils';
+import type { AtomPlugin } from '@milkdown/utils'
 
-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';
+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: AtomPlugin[] = [
-    doc(),
-    paragraph(),
-    hardbreak(),
-    blockquote(),
-    codeFence(),
-    bulletList(),
-    orderedList(),
-    listItem(),
-    heading(),
-    hr(),
-    image(),
-    text(),
-];
+  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';
+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'