@milkdown/preset-commonmark 6.5.4 → 7.0.0-next.1

package/src/mark/strong.ts

@@ -1,42 +1,47 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { toggleMark } from '@milkdown/prose/commands'
-import { createMark, createShortcut } from '@milkdown/utils'
+import { $command, $markAttr, $markSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for the strong mark.
+export const strongAttr = $markAttr('strong')
 
-type Keys = SupportedKeys['Bold']
-const id = 'strong'
-export const ToggleBold = createCmdKey('ToggleBold')
-export const strong = createMark<Keys>((utils) => {
-  return {
-    id,
-    schema: () => ({
-      inclusive: false,
-      parseDOM: [
-        { tag: 'b' },
-        { tag: 'strong' },
-        { style: 'font-style', getAttrs: value => (value === 'bold') as false },
-      ],
-      toDOM: mark => ['strong', { class: utils.getClassName(mark.attrs, id) }],
-      parseMarkdown: {
-        match: node => node.type === 'strong',
-        runner: (state, node, markType) => {
-          state.openMark(markType)
-          state.next(node.children)
-          state.closeMark(markType)
-        },
-      },
-      toMarkdown: {
-        match: mark => mark.type.name === id,
-        runner: (state, mark) => {
-          state.withMark(mark, 'strong')
-        },
-      },
-    }),
-    commands: markType => [createCmd(ToggleBold, () => toggleMark(markType))],
-    shortcuts: {
-      [SupportedKeys.Bold]: createShortcut(ToggleBold, 'Mod-b'),
+/// Strong mark schema.
+export const strongSchema = $markSchema('strong', ctx => ({
+  inclusive: false,
+  parseDOM: [
+    { tag: 'b' },
+    { tag: 'strong' },
+    { style: 'font-style', getAttrs: value => (value === 'bold') as false },
+  ],
+  toDOM: mark => ['strong', ctx.get(strongAttr.key)(mark)],
+  parseMarkdown: {
+    match: node => node.type === 'strong',
+    runner: (state, node, markType) => {
+      state.openMark(markType)
+      state.next(node.children)
+      state.closeMark(markType)
     },
-  }
+  },
+  toMarkdown: {
+    match: mark => mark.type.name === 'strong',
+    runner: (state, mark) => {
+      state.withMark(mark, 'strong')
+    },
+  },
+}))
+
+/// A command to toggle the strong mark.
+export const toggleStrongCommand = $command('ToggleStrong', () => () => toggleMark(strongSchema.type()))
+
+/// Keymap for the strong mark.
+/// - `Mod-b` - Toggle the strong mark.
+export const strongKeymap = $useKeymap('strongKeymap', {
+  ToggleBold: {
+    shortcuts: ['Mod-b'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(toggleStrongCommand.key)
+    },
+  },
 })

package/src/node/blockquote.ts

@@ -1,43 +1,49 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { wrapIn } from '@milkdown/prose/commands'
 import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import { createNode, createShortcut } from '@milkdown/utils'
+import type { $NodeSchema } from '@milkdown/utils'
+import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for blockquote node.
+export const blockquoteAttr = $nodeAttr('blockquote')
 
-type Keys = SupportedKeys['Blockquote']
+/// 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()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'blockquote',
+    runner: (state, node) => {
+      state.openNode('blockquote').next(node.content).closeNode()
+    },
+  },
+}))
 
-const id = 'blockquote'
+/// 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(() => wrappingInputRule(/^\s*>\s$/, blockquoteSchema.type()))
 
-export const WrapInBlockquote = createCmdKey('WrapInBlockquote')
+/// This command will wrap the current selection in a blockquote.
+export const wrapInBlockquoteCommand = $command('WrapInBlockquote', () => () => wrapIn(blockquoteSchema.type()))
 
-export const blockquote = createNode<Keys>((utils) => {
-  return {
-    id,
-    schema: () => ({
-      content: 'block+',
-      group: 'block',
-      defining: true,
-      parseDOM: [{ tag: 'blockquote' }],
-      toDOM: node => ['blockquote', { class: utils.getClassName(node.attrs, id) }, 0],
-      parseMarkdown: {
-        match: ({ type }) => type === id,
-        runner: (state, node, type) => {
-          state.openNode(type).next(node.children).closeNode()
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === id,
-        runner: (state, node) => {
-          state.openNode('blockquote').next(node.content).closeNode()
-        },
-      },
-    }),
-    inputRules: nodeType => [wrappingInputRule(/^\s*>\s$/, nodeType)],
-    commands: nodeType => [createCmd(WrapInBlockquote, () => wrapIn(nodeType))],
-    shortcuts: {
-      [SupportedKeys.Blockquote]: createShortcut(WrapInBlockquote, 'Mod-Shift-b'),
+/// Keymap for blockquote.
+/// - `Mod-Shift-b`: Wrap selection in blockquote.
+export const blockquoteKeymap = $useKeymap('blockquoteKeymap', {
+  WrapInBlockquote: {
+    shortcuts: 'Mod-Shift-b',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInBlockquoteCommand.key)
     },
-  }
+  },
 })

package/src/node/bullet-list.ts

@@ -1,72 +1,79 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
 import { wrapIn } from '@milkdown/prose/commands'
 import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import { createNode, createShortcut } from '@milkdown/utils'
+import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for bullet list node.
+export const bulletListAttr = $nodeAttr('bulletList')
 
-type Keys = SupportedKeys['BulletList']
-
-export const WrapInBulletList = createCmdKey('WrapInBulletList')
-
-export const bulletList = createNode<Keys>((utils) => {
-  const id = 'bullet_list'
+/// Schema for bullet list node.
+export const bulletListSchema = $nodeSchema('bullet_list', (ctx) => {
   return {
-    id,
-    schema: () => ({
-      content: 'listItem+',
-      group: 'block',
-      attrs: {
-        spread: {
-          default: false,
-        },
+    content: 'listItem+',
+    group: 'block',
+    attrs: {
+      spread: {
+        default: false,
       },
-      parseDOM: [
-        {
-          tag: 'ul',
-          getAttrs: (dom) => {
-            if (!(dom instanceof HTMLElement))
-              throw expectDomTypeError(dom)
+    },
+    parseDOM: [
+      {
+        tag: 'ul',
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement))
+            throw expectDomTypeError(dom)
 
-            return {
-              spread: dom.dataset.spread,
-            }
-          },
+          return {
+            spread: dom.dataset.spread,
+          }
         },
-      ],
-      toDOM: (node) => {
-        return [
-          'ul',
-          {
-            'data-spread': node.attrs.spread,
-            'class': utils.getClassName(node.attrs, 'bullet-list'),
-          },
-          0,
-        ]
       },
-      parseMarkdown: {
-        match: ({ type, ordered }) => type === 'list' && !ordered,
-        runner: (state, node, type) => {
-          const spread = node.spread != null ? `${node.spread}` : 'false'
-          state.openNode(type, { spread }).next(node.children).closeNode()
+    ],
+    toDOM: (node) => {
+      return [
+        'ul',
+        {
+          ...ctx.get(bulletListAttr.key)(node),
+          'data-spread': node.attrs.spread,
         },
+        0,
+      ]
+    },
+    parseMarkdown: {
+      match: ({ type, ordered }) => type === 'list' && !ordered,
+      runner: (state, node, type) => {
+        const spread = node.spread != null ? `${node.spread}` : 'false'
+        state.openNode(type, { spread }).next(node.children).closeNode()
       },
-      toMarkdown: {
-        match: node => node.type.name === id,
-        runner: (state, node) => {
-          state
-            .openNode('list', undefined, { ordered: false, spread: node.attrs.spread === 'true' })
-            .next(node.content)
-            .closeNode()
-        },
+    },
+    toMarkdown: {
+      match: node => node.type.name === 'bullet_list',
+      runner: (state, node) => {
+        state
+          .openNode('list', undefined, { ordered: false, spread: node.attrs.spread === 'true' })
+          .next(node.content)
+          .closeNode()
       },
-    }),
-    inputRules: nodeType => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
-    commands: nodeType => [createCmd(WrapInBulletList, () => wrapIn(nodeType))],
-    shortcuts: {
-      [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, 'Mod-Alt-8'),
     },
   }
 })
+
+/// Input rule for wrapping a block in bullet list node.
+export const wrapInBulletListInputRule = $inputRule(() => wrappingInputRule(/^\s*([-+*])\s$/, bulletListSchema.type()))
+
+/// Command for creating bullet list node.
+export const wrapInBulletListCommand = $command('WrapInBulletList', () => () => wrapIn(bulletListSchema.type()))
+
+/// Keymap for bullet list node.
+/// - `Mod-Alt-8`: Wrap a block in bullet list.
+export const bulletListKeymap = $useKeymap('bulletListKeymap', {
+  WrapInBulletList: {
+    shortcuts: 'Mod-Alt-8',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInBulletListCommand.key)
+    },
+  },
+})

package/src/node/code-block.ts

@@ -0,0 +1,103 @@
+/* Copyright 2021, Milkdown by Mirone. */
+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'
+
+/// HTML attributes for code block node.
+export const codeBlockAttr = $nodeAttr('codeBlock', () => ({
+  pre: {},
+  code: {},
+}))
+
+/// Schema for code block node.
+export const codeBlockSchema = $nodeSchema('code_block', (ctx) => {
+  return {
+    content: 'text*',
+    group: 'block',
+    marks: '',
+    defining: true,
+    code: true,
+    attrs: {
+      language: {
+        default: '',
+      },
+    },
+    parseDOM: [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement))
+            throw expectDomTypeError(dom)
+
+          return { language: dom.dataset.language }
+        },
+      },
+    ],
+    toDOM: (node) => {
+      const attr = ctx.get(codeBlockAttr.key)(node)
+      return [
+        'pre',
+        {
+          ...attr.pre,
+          'data-language': node.attrs.language,
+        },
+        ['code', attr.code, 0],
+      ]
+    },
+    parseMarkdown: {
+      match: ({ type }) => type === 'code',
+      runner: (state, node, type) => {
+        const language = node.lang as string
+        const value = node.value as string
+        state.openNode(type, { language })
+        if (value)
+          state.addText(value)
+
+        state.closeNode()
+      },
+    },
+    toMarkdown: {
+      match: node => node.type.name === 'code_block',
+      runner: (state, node) => {
+        state.addNode('code', undefined, node.content.firstChild?.text || '', {
+          lang: node.attrs.language,
+        })
+      },
+    },
+  }
+})
+
+/// A input rule for creating code block.
+/// For example, ` ```javascript ` will create a code block with language javascript.
+export const createCodeBlockInputRule = $inputRule(() => textblockTypeInputRule(/^```(?<language>[a-z]*)?[\s\n]$/, codeBlockSchema.type(), match => ({
+  language: match.groups?.language ?? '',
+})))
+
+/// A command for creating code block.
+/// You can pass the language of the code block as the parameter.
+export const createCodeBlockCommand = $command('CreateCodeBlock', () => (language = '') => setBlockType(codeBlockSchema.type(), { language }))
+
+/// 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
+})
+
+/// Keymap for code block.
+/// - `Mod-Alt-c`: Create a code block.
+export const codeBlockKeymap = $useKeymap('codeBlockKeymap', {
+  CreateCodeBlock: {
+    shortcuts: 'Mod-Alt-c',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(createCodeBlockCommand.key)
+    },
+  },
+})

package/src/node/doc.ts

@@ -1,24 +1,20 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createNode } from '@milkdown/utils'
+import { $node } from '@milkdown/utils'
 
-export const doc = createNode(() => {
-  return {
-    id: 'doc',
-    schema: () => ({
-      content: 'block+',
-      parseMarkdown: {
-        match: ({ type }) => type === 'root',
-        runner: (state, node, type) => {
-          state.injectRoot(node, type)
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === 'doc',
-        runner: (state, node) => {
-          state.openNode('root')
-          state.next(node.content)
-        },
-      },
-    }),
-  }
-})
+/// The top-level document node.
+export const docSchema = $node('doc', () => ({
+  content: 'block+',
+  parseMarkdown: {
+    match: ({ type }) => type === 'root',
+    runner: (state, node, type) => {
+      state.injectRoot(node, type)
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'doc',
+    runner: (state, node) => {
+      state.openNode('root')
+      state.next(node.content)
+    },
+  },
+}))

package/src/node/hardbreak.ts

@@ -1,125 +1,76 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
-import { Plugin, PluginKey, Selection } from '@milkdown/prose/state'
-import { AddMarkStep, ReplaceStep } from '@milkdown/prose/transform'
-import { createNode, createShortcut } from '@milkdown/utils'
+import { commandsCtx } from '@milkdown/core'
+import { Selection } from '@milkdown/prose/state'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
-
-type Keys = SupportedKeys['HardBreak']
-
-export const InsertHardbreak = createCmdKey('InsertHardbreak')
-
-export const HardbreakFilterPluginKey = new PluginKey('MILKDOWN_HARDBREAK_FILTER')
-
-export const hardbreak = createNode<
-    Keys,
-    {
-      notIn: string[]
-    }
->((utils, options) => {
-  const notIn = options?.notIn ?? ['table', 'fence']
+/// HTML attributes for the hardbreak node.
+///
+/// Default value:
+/// - `data-is-inline` - Whether the hardbreak is inline.
+export const hardbreakAttr = $nodeAttr('hardbreak', (node) => {
   return {
-    id: 'hardbreak',
-    schema: () => ({
-      inline: true,
-      group: 'inline',
-      selectable: false,
-      parseDOM: [{ tag: 'br' }],
-      toDOM: node => ['br', { class: utils.getClassName(node.attrs, 'hardbreak') }],
-      parseMarkdown: {
-        match: ({ type }) => type === 'break',
-        runner: (state, _, type) => {
-          state.addNode(type)
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === 'hardbreak',
-        runner: (state) => {
-          state.addNode('break')
-        },
-      },
-    }),
-    commands: type => [
-      createCmd(InsertHardbreak, () => (state, dispatch) => {
-        const { selection, tr } = state
-        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(type.create()).scrollIntoView())
-        return true
-      }),
-    ],
-    shortcuts: {
-      [SupportedKeys.HardBreak]: createShortcut(InsertHardbreak, 'Shift-Enter'),
-    },
-    prosePlugins: type => [
-      new Plugin({
-        key: HardbreakFilterPluginKey,
-        filterTransaction: (tr, state) => {
-          const isInsertHr = tr.getMeta('hardbreak')
-          const [step] = tr.steps
-          if (isInsertHr && step) {
-            const { from } = step as unknown as { from: number }
-            const $from = state.doc.resolve(from)
-            let curDepth = $from.depth
-            let canApply = true
-            while (curDepth > 0) {
-              if (notIn.includes($from.node(curDepth).type.name))
-                canApply = false
-
-              curDepth--
-            }
-            return canApply
-          }
-          return true
-        },
-      }),
-      new Plugin({
-        key: new PluginKey('MILKDOWN_HARDBREAK_MARKS'),
-        appendTransaction: (trs, _oldState, newState) => {
-          if (!trs.length)
-            return
-          const [tr] = trs
-          if (!tr)
-            return
-
-          const [step] = tr.steps
-
-          const isInsertHr = tr.getMeta('hardbreak')
-          if (isInsertHr) {
-            if (!(step instanceof ReplaceStep))
-              return
-
-            const { from } = step as unknown as { from: number }
-            return newState.tr.setNodeMarkup(from, type, undefined, [])
-          }
+    'data-is-inline': node.attrs.isInline,
+  }
+})
 
-          const isAddMarkStep = step instanceof AddMarkStep
-          if (isAddMarkStep) {
-            let _tr = newState.tr
-            const { from, to } = step as unknown as { from: number; to: number }
-            newState.doc.nodesBetween(from, to, (node, pos) => {
-              if (node.type === type)
-                _tr = _tr.setNodeMarkup(pos, type, undefined, [])
-            })
+/// Hardbreak node schema.
+export const hardbreakSchema = $nodeSchema('hardbreak', ctx => ({
+  inline: true,
+  group: 'inline',
+  attrs: {
+    isInline: {
+      default: false,
+    },
+  },
+  selectable: false,
+  parseDOM: [{ tag: 'br' }],
+  toDOM: node => ['br', ctx.get(hardbreakAttr.key)(node)],
+  parseMarkdown: {
+    match: ({ type }) => type === 'break',
+    runner: (state, node, type) => {
+      state.addNode(type, { isInline: Boolean(node.data?.isInline) })
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'hardbreak',
+    runner: (state, node) => {
+      if (node.attrs.isInline)
+        state.addNode('text', undefined, '\n')
 
-            return _tr
-          }
+      else
+        state.addNode('break')
+    },
+  },
+}))
 
-          return undefined
-        },
-      }),
-    ],
+/// Command to insert a hardbreak.
+export const insertHardbreakCommand = $command('InsertHardbreak', () => () => (state, dispatch) => {
+  const { selection, tr } = state
+  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().create()).scrollIntoView())
+  return true
+})
+
+/// Keymap for the hardbreak node.
+/// - `Shift-Enter` - Insert a hardbreak.
+export const hardbreakKeymap = $useKeymap('hardbreakKeymap', {
+  InsertHardbreak: {
+    shortcuts: 'Shift-Enter',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(insertHardbreakCommand.key)
+    },
+  },
 })