@milkdown/preset-commonmark 7.4.0 → 7.5.8

package/src/mark/link.ts

@@ -14,7 +14,7 @@ withMeta(linkAttr, {
 })
 
 /// Link mark schema.
-export const linkSchema = $markSchema('link', ctx => ({
+export const linkSchema = $markSchema('link', (ctx) => ({
   attrs: {
     href: {},
     title: { default: null },
@@ -23,16 +23,18 @@ export const linkSchema = $markSchema('link', ctx => ({
     {
       tag: 'a[href]',
       getAttrs: (dom) => {
-        if (!(dom instanceof HTMLElement))
-          throw expectDomTypeError(dom)
+        if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
 
-        return { href: dom.getAttribute('href'), title: dom.getAttribute('title') }
+        return {
+          href: dom.getAttribute('href'),
+          title: dom.getAttribute('title'),
+        }
       },
     },
   ],
-  toDOM: mark => ['a', { ...ctx.get(linkAttr.key)(mark), ...mark.attrs }],
+  toDOM: (mark) => ['a', { ...ctx.get(linkAttr.key)(mark), ...mark.attrs }],
   parseMarkdown: {
-    match: node => node.type === 'link',
+    match: (node) => node.type === 'link',
     runner: (state, node, markType) => {
       const url = node.url as string
       const title = node.title as string
@@ -42,7 +44,7 @@ export const linkSchema = $markSchema('link', ctx => ({
     },
   },
   toMarkdown: {
-    match: mark => mark.type.name === 'link',
+    match: (mark) => mark.type.name === 'link',
     runner: (state, mark) => {
       state.withMark(mark, 'link', undefined, {
         title: mark.attrs.title,
@@ -64,7 +66,12 @@ export interface UpdateLinkCommandPayload {
 }
 /// A command to toggle the link mark.
 /// You can pass the `href` and `title` to the link.
-export const toggleLinkCommand = $command('ToggleLink', ctx => (payload: UpdateLinkCommandPayload = {}) => toggleMark(linkSchema.type(ctx), payload))
+export const toggleLinkCommand = $command(
+  'ToggleLink',
+  (ctx) =>
+    (payload: UpdateLinkCommandPayload = {}) =>
+      toggleMark(linkSchema.type(ctx), payload)
+)
 
 withMeta(toggleLinkCommand, {
   displayName: 'Command<toggleLinkCommand>',
@@ -73,48 +80,51 @@ withMeta(toggleLinkCommand, {
 
 /// A command to update the link mark.
 /// You can pass the `href` and `title` to update the link.
-export const updateLinkCommand = $command('UpdateLink', ctx => (payload: UpdateLinkCommandPayload = {}) => (state, dispatch) => {
-  if (!dispatch)
-    return false
-
-  let node: ProseNode | undefined
-  let pos = -1
-  const { selection } = state
-  const { from, to } = selection
-  state.doc.nodesBetween(from, from === to ? to + 1 : to, (n, p) => {
-    if (linkSchema.type(ctx).isInSet(n.marks)) {
-      node = n
-      pos = p
-      return false
-    }
-
-    return undefined
-  })
+export const updateLinkCommand = $command(
+  'UpdateLink',
+  (ctx) =>
+    (payload: UpdateLinkCommandPayload = {}) =>
+    (state, dispatch) => {
+      if (!dispatch) return false
+
+      let node: ProseNode | undefined
+      let pos = -1
+      const { selection } = state
+      const { from, to } = selection
+      state.doc.nodesBetween(from, from === to ? to + 1 : to, (n, p) => {
+        if (linkSchema.type(ctx).isInSet(n.marks)) {
+          node = n
+          pos = p
+          return false
+        }
+
+        return undefined
+      })
 
-  if (!node)
-    return false
+      if (!node) return false
 
-  const mark = node.marks.find(({ type }) => type === linkSchema.type(ctx))
-  if (!mark)
-    return false
+      const mark = node.marks.find(({ type }) => type === linkSchema.type(ctx))
+      if (!mark) return false
 
-  const start = pos
-  const end = pos + node.nodeSize
-  const { tr } = state
-  const linkMark = linkSchema.type(ctx).create({ ...mark.attrs, ...payload })
-  if (!linkMark)
-    return false
+      const start = pos
+      const end = pos + node.nodeSize
+      const { tr } = state
+      const linkMark = linkSchema
+        .type(ctx)
+        .create({ ...mark.attrs, ...payload })
+      if (!linkMark) return false
 
-  dispatch(
-    tr
-      .removeMark(start, end, mark)
-      .addMark(start, end, linkMark)
-      .setSelection(new TextSelection(tr.selection.$anchor))
-      .scrollIntoView(),
-  )
+      dispatch(
+        tr
+          .removeMark(start, end, mark)
+          .addMark(start, end, linkMark)
+          .setSelection(new TextSelection(tr.selection.$anchor))
+          .scrollIntoView()
+      )
 
-  return true
-})
+      return true
+    }
+)
 
 withMeta(updateLinkCommand, {
   displayName: 'Command<updateLinkCommand>',

package/src/mark/strong.ts

@@ -1,5 +1,11 @@
 import { commandsCtx, remarkStringifyOptionsCtx } from '@milkdown/core'
-import { $command, $inputRule, $markAttr, $markSchema, $useKeymap } from '@milkdown/utils'
+import {
+  $command,
+  $inputRule,
+  $markAttr,
+  $markSchema,
+  $useKeymap,
+} from '@milkdown/utils'
 import { toggleMark } from '@milkdown/prose/commands'
 import { markRule } from '@milkdown/prose'
 import { withMeta } from '../__internal__'
@@ -13,7 +19,7 @@ withMeta(strongAttr, {
 })
 
 /// Strong mark schema.
-export const strongSchema = $markSchema('strong', ctx => ({
+export const strongSchema = $markSchema('strong', (ctx) => ({
   attrs: {
     marker: {
       default: ctx.get(remarkStringifyOptionsCtx).strong || '*',
@@ -22,11 +28,11 @@ export const strongSchema = $markSchema('strong', ctx => ({
   parseDOM: [
     { tag: 'b' },
     { tag: 'strong' },
-    { style: 'font-style', getAttrs: value => (value === 'bold') as false },
+    { style: 'font-style', getAttrs: (value) => (value === 'bold') as false },
   ],
-  toDOM: mark => ['strong', ctx.get(strongAttr.key)(mark)],
+  toDOM: (mark) => ['strong', ctx.get(strongAttr.key)(mark)],
   parseMarkdown: {
-    match: node => node.type === 'strong',
+    match: (node) => node.type === 'strong',
     runner: (state, node, markType) => {
       state.openMark(markType, { marker: node.marker })
       state.next(node.children)
@@ -34,7 +40,7 @@ export const strongSchema = $markSchema('strong', ctx => ({
     },
   },
   toMarkdown: {
-    match: mark => mark.type.name === 'strong',
+    match: (mark) => mark.type.name === 'strong',
     runner: (state, mark) => {
       state.withMark(mark, 'strong', undefined, {
         marker: mark.attrs.marker,
@@ -54,7 +60,7 @@ withMeta(strongSchema.ctx, {
 })
 
 /// A command to toggle the strong mark.
-export const toggleStrongCommand = $command('ToggleStrong', ctx => () => {
+export const toggleStrongCommand = $command('ToggleStrong', (ctx) => () => {
   return toggleMark(strongSchema.type(ctx))
 })
 

package/src/node/blockquote.ts

@@ -2,7 +2,13 @@ import { commandsCtx } from '@milkdown/core'
 import { wrapIn } from '@milkdown/prose/commands'
 import { wrappingInputRule } from '@milkdown/prose/inputrules'
 import type { $NodeSchema } from '@milkdown/utils'
-import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@milkdown/utils'
 import { withMeta } from '../__internal__'
 
 /// HTML attributes for blockquote node.
@@ -14,25 +20,28 @@ withMeta(blockquoteAttr, {
 })
 
 /// Schema for blockquote node.
-export const blockquoteSchema: $NodeSchema<'blockquote'> = $nodeSchema('blockquote', ctx => ({
-  content: 'block+',
-  group: 'block',
-  defining: true,
-  parseDOM: [{ tag: 'blockquote' }],
-  toDOM: node => ['blockquote', ctx.get(blockquoteAttr.key)(node), 0],
-  parseMarkdown: {
-    match: ({ type }) => type === 'blockquote',
-    runner: (state, node, type) => {
-      state.openNode(type).next(node.children).closeNode()
+export const blockquoteSchema: $NodeSchema<'blockquote'> = $nodeSchema(
+  'blockquote',
+  (ctx) => ({
+    content: 'block+',
+    group: 'block',
+    defining: true,
+    parseDOM: [{ tag: 'blockquote' }],
+    toDOM: (node) => ['blockquote', ctx.get(blockquoteAttr.key)(node), 0],
+    parseMarkdown: {
+      match: ({ type }) => type === 'blockquote',
+      runner: (state, node, type) => {
+        state.openNode(type).next(node.children).closeNode()
+      },
     },
-  },
-  toMarkdown: {
-    match: node => node.type.name === 'blockquote',
-    runner: (state, node) => {
-      state.openNode('blockquote').next(node.content).closeNode()
+    toMarkdown: {
+      match: (node) => node.type.name === 'blockquote',
+      runner: (state, node) => {
+        state.openNode('blockquote').next(node.content).closeNode()
+      },
     },
-  },
-}))
+  })
+)
 
 withMeta(blockquoteSchema.node, {
   displayName: 'NodeSchema<blockquote>',
@@ -46,7 +55,9 @@ withMeta(blockquoteSchema.ctx, {
 
 /// This input rule will convert a line that starts with `> ` into a blockquote.
 /// You can type `> ` at the start of a line to create a blockquote.
-export const wrapInBlockquoteInputRule = $inputRule(ctx => wrappingInputRule(/^\s*>\s$/, blockquoteSchema.type(ctx)))
+export const wrapInBlockquoteInputRule = $inputRule((ctx) =>
+  wrappingInputRule(/^\s*>\s$/, blockquoteSchema.type(ctx))
+)
 
 withMeta(wrapInBlockquoteInputRule, {
   displayName: 'InputRule<wrapInBlockquoteInputRule>',
@@ -54,7 +65,10 @@ withMeta(wrapInBlockquoteInputRule, {
 })
 
 /// This command will wrap the current selection in a blockquote.
-export const wrapInBlockquoteCommand = $command('WrapInBlockquote', ctx => () => wrapIn(blockquoteSchema.type(ctx)))
+export const wrapInBlockquoteCommand = $command(
+  'WrapInBlockquote',
+  (ctx) => () => wrapIn(blockquoteSchema.type(ctx))
+)
 
 withMeta(wrapInBlockquoteCommand, {
   displayName: 'Command<wrapInBlockquoteCommand>',

package/src/node/bullet-list.ts

@@ -2,7 +2,13 @@ import { commandsCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
 import { wrapIn } from '@milkdown/prose/commands'
 import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@milkdown/utils'
 import { withMeta } from '../__internal__'
 
 /// HTML attributes for bullet list node.
@@ -27,8 +33,7 @@ export const bulletListSchema = $nodeSchema('bullet_list', (ctx) => {
       {
         tag: 'ul',
         getAttrs: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw expectDomTypeError(dom)
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
 
           return {
             spread: dom.dataset.spread,
@@ -54,10 +59,13 @@ export const bulletListSchema = $nodeSchema('bullet_list', (ctx) => {
       },
     },
     toMarkdown: {
-      match: node => node.type.name === 'bullet_list',
+      match: (node) => node.type.name === 'bullet_list',
       runner: (state, node) => {
         state
-          .openNode('list', undefined, { ordered: false, spread: node.attrs.spread === 'true' })
+          .openNode('list', undefined, {
+            ordered: false,
+            spread: node.attrs.spread === 'true',
+          })
           .next(node.content)
           .closeNode()
       },
@@ -76,7 +84,9 @@ withMeta(bulletListSchema.ctx, {
 })
 
 /// Input rule for wrapping a block in bullet list node.
-export const wrapInBulletListInputRule = $inputRule(ctx => wrappingInputRule(/^\s*([-+*])\s$/, bulletListSchema.type(ctx)))
+export const wrapInBulletListInputRule = $inputRule((ctx) =>
+  wrappingInputRule(/^\s*([-+*])\s$/, bulletListSchema.type(ctx))
+)
 
 withMeta(wrapInBulletListInputRule, {
   displayName: 'InputRule<wrapInBulletListInputRule>',
@@ -84,7 +94,10 @@ withMeta(wrapInBulletListInputRule, {
 })
 
 /// Command for creating bullet list node.
-export const wrapInBulletListCommand = $command('WrapInBulletList', ctx => () => wrapIn(bulletListSchema.type(ctx)))
+export const wrapInBulletListCommand = $command(
+  'WrapInBulletList',
+  (ctx) => () => wrapIn(bulletListSchema.type(ctx))
+)
 
 withMeta(wrapInBulletListCommand, {
   displayName: 'Command<wrapInBulletListCommand>',

package/src/node/code-block.ts

@@ -2,7 +2,13 @@ import { commandsCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
 import { setBlockType } from '@milkdown/prose/commands'
 import { textblockTypeInputRule } from '@milkdown/prose/inputrules'
-import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@milkdown/utils'
 import { withMeta } from '../__internal__'
 
 /// HTML attributes for code block node.
@@ -34,8 +40,7 @@ export const codeBlockSchema = $nodeSchema('code_block', (ctx) => {
         tag: 'pre',
         preserveWhitespace: 'full',
         getAttrs: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw expectDomTypeError(dom)
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
 
           return { language: dom.dataset.language }
         },
@@ -58,14 +63,13 @@ export const codeBlockSchema = $nodeSchema('code_block', (ctx) => {
         const language = node.lang as string
         const value = node.value as string
         state.openNode(type, { language })
-        if (value)
-          state.addText(value)
+        if (value) state.addText(value)
 
         state.closeNode()
       },
     },
     toMarkdown: {
-      match: node => node.type.name === 'code_block',
+      match: (node) => node.type.name === 'code_block',
       runner: (state, node) => {
         state.addNode('code', undefined, node.content.firstChild?.text || '', {
           lang: node.attrs.language,
@@ -87,9 +91,15 @@ withMeta(codeBlockSchema.ctx, {
 
 /// A input rule for creating code block.
 /// For example, ` ```javascript ` will create a code block with language javascript.
-export const createCodeBlockInputRule = $inputRule(ctx => textblockTypeInputRule(/^```(?<language>[a-z]*)?[\s\n]$/, codeBlockSchema.type(ctx), match => ({
-  language: match.groups?.language ?? '',
-})))
+export const createCodeBlockInputRule = $inputRule((ctx) =>
+  textblockTypeInputRule(
+    /^```(?<language>[a-z]*)?[\s\n]$/,
+    codeBlockSchema.type(ctx),
+    (match) => ({
+      language: match.groups?.language ?? '',
+    })
+  )
+)
 
 withMeta(createCodeBlockInputRule, {
   displayName: 'InputRule<createCodeBlockInputRule>',
@@ -98,7 +108,12 @@ withMeta(createCodeBlockInputRule, {
 
 /// A command for creating code block.
 /// You can pass the language of the code block as the parameter.
-export const createCodeBlockCommand = $command('CreateCodeBlock', ctx => (language = '') => setBlockType(codeBlockSchema.type(ctx), { language }))
+export const createCodeBlockCommand = $command(
+  'CreateCodeBlock',
+  (ctx) =>
+    (language = '') =>
+      setBlockType(codeBlockSchema.type(ctx), { language })
+)
 
 withMeta(createCodeBlockCommand, {
   displayName: 'Command<createCodeBlockCommand>',
@@ -106,14 +121,24 @@ withMeta(createCodeBlockCommand, {
 })
 
 /// A command for updating the code block language of the target position.
-export const updateCodeBlockLanguageCommand = $command('UpdateCodeBlockLanguage', () => ({ pos, language }: { pos: number, language: string } = { pos: -1, language: '' }) => (state, dispatch) => {
-  if (pos >= 0) {
-    dispatch?.(state.tr.setNodeAttribute(pos, 'language', language))
-    return true
-  }
-
-  return false
-})
+export const updateCodeBlockLanguageCommand = $command(
+  'UpdateCodeBlockLanguage',
+  () =>
+    (
+      { pos, language }: { pos: number; language: string } = {
+        pos: -1,
+        language: '',
+      }
+    ) =>
+    (state, dispatch) => {
+      if (pos >= 0) {
+        dispatch?.(state.tr.setNodeAttribute(pos, 'language', language))
+        return true
+      }
+
+      return false
+    }
+)
 
 withMeta(updateCodeBlockLanguageCommand, {
   displayName: 'Command<updateCodeBlockLanguageCommand>',

package/src/node/doc.ts

@@ -11,7 +11,7 @@ export const docSchema = $node('doc', () => ({
     },
   },
   toMarkdown: {
-    match: node => node.type.name === 'doc',
+    match: (node) => node.type.name === 'doc',
     runner: (state, node) => {
       state.openNode('root')
       state.next(node.content)

package/src/node/hardbreak.ts

@@ -9,6 +9,7 @@ import { withMeta } from '../__internal__'
 /// - `data-is-inline` - Whether the hardbreak is inline.
 export const hardbreakAttr = $nodeAttr('hardbreak', (node) => {
   return {
+    'data-type': 'hardbreak',
     'data-is-inline': node.attrs.isInline,
   }
 })
@@ -19,7 +20,7 @@ withMeta(hardbreakAttr, {
 })
 
 /// Hardbreak node schema.
-export const hardbreakSchema = $nodeSchema('hardbreak', ctx => ({
+export const hardbreakSchema = $nodeSchema('hardbreak', (ctx) => ({
   inline: true,
   group: 'inline',
   attrs: {
@@ -28,23 +29,33 @@ export const hardbreakSchema = $nodeSchema('hardbreak', ctx => ({
     },
   },
   selectable: false,
-  parseDOM: [{ tag: 'br' }],
-  toDOM: node => ['br', ctx.get(hardbreakAttr.key)(node)],
+  parseDOM: [
+    { tag: 'br' },
+    {
+      tag: 'span[data-type="hardbreak"]',
+      getAttrs: () => ({ isInline: true }),
+    },
+  ],
+  toDOM: (node) =>
+    node.attrs.isInline
+      ? ['span', ctx.get(hardbreakAttr.key)(node), ' ']
+      : ['br', ctx.get(hardbreakAttr.key)(node)],
   parseMarkdown: {
     match: ({ type }) => type === 'break',
     runner: (state, node, type) => {
-      state.addNode(type, { isInline: Boolean((node.data as (undefined | { isInline: boolean }))?.isInline) })
+      state.addNode(type, {
+        isInline: Boolean(
+          (node.data as undefined | { isInline: boolean })?.isInline
+        ),
+      })
     },
   },
   leafText: () => '\n',
   toMarkdown: {
-    match: node => node.type.name === 'hardbreak',
+    match: (node) => node.type.name === 'hardbreak',
     runner: (state, node) => {
-      if (node.attrs.isInline)
-        state.addNode('text', undefined, '\n')
-
-      else
-        state.addNode('break')
+      if (node.attrs.isInline) state.addNode('text', undefined, '\n')
+      else state.addNode('break')
     },
   },
 }))
@@ -60,27 +71,38 @@ withMeta(hardbreakSchema.ctx, {
 })
 
 /// Command to insert a hardbreak.
-export const insertHardbreakCommand = $command('InsertHardbreak', ctx => () => (state, dispatch) => {
-  const { selection, tr } = state
-  if (!(selection instanceof TextSelection))
-    return false
+export const insertHardbreakCommand = $command(
+  'InsertHardbreak',
+  (ctx) => () => (state, dispatch) => {
+    const { selection, tr } = state
+    if (!(selection instanceof TextSelection)) return false
 
-  if (selection.empty) {
-    // Transform two successive hardbreak into a new line
-    const node = selection.$from.node()
-    if (node.childCount > 0 && node.lastChild?.type.name === 'hardbreak') {
-      dispatch?.(
-        tr
-          .replaceRangeWith(selection.to - 1, selection.to, state.schema.node('paragraph'))
-          .setSelection(Selection.near(tr.doc.resolve(selection.to)))
-          .scrollIntoView(),
-      )
-      return true
+    if (selection.empty) {
+      // Transform two successive hardbreak into a new line
+      const node = selection.$from.node()
+      if (node.childCount > 0 && node.lastChild?.type.name === 'hardbreak') {
+        dispatch?.(
+          tr
+            .replaceRangeWith(
+              selection.to - 1,
+              selection.to,
+              state.schema.node('paragraph')
+            )
+            .setSelection(Selection.near(tr.doc.resolve(selection.to)))
+            .scrollIntoView()
+        )
+        return true
+      }
     }
+    dispatch?.(
+      tr
+        .setMeta('hardbreak', true)
+        .replaceSelectionWith(hardbreakSchema.type(ctx).create())
+        .scrollIntoView()
+    )
+    return true
   }
-  dispatch?.(tr.setMeta('hardbreak', true).replaceSelectionWith(hardbreakSchema.type(ctx).create()).scrollIntoView())
-  return true
-})
+)
 
 withMeta(insertHardbreakCommand, {
   displayName: 'Command<insertHardbreakCommand>',