@jvs-milkdown/preset-commonmark 1.0.0

package/src/mark/link.ts

@@ -0,0 +1,134 @@
+import type { Node as ProseNode } from '@jvs-milkdown/prose/model'
+
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { toggleMark } from '@jvs-milkdown/prose/commands'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import { $command, $markAttr, $markSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for the link mark.
+export const linkAttr = $markAttr('link')
+
+withMeta(linkAttr, {
+  displayName: 'Attr<link>',
+  group: 'Link',
+})
+
+/// Link mark schema.
+export const linkSchema = $markSchema('link', (ctx) => ({
+  attrs: {
+    href: { validate: 'string' },
+    title: { default: null, validate: 'string|null' },
+  },
+  parseDOM: [
+    {
+      tag: 'a[href]',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+        return {
+          href: dom.getAttribute('href'),
+          title: dom.getAttribute('title'),
+        }
+      },
+    },
+  ],
+  toDOM: (mark) => ['a', { ...ctx.get(linkAttr.key)(mark), ...mark.attrs }],
+  parseMarkdown: {
+    match: (node) => node.type === 'link',
+    runner: (state, node, markType) => {
+      const url = node.url as string
+      const title = node.title as string
+      state.openMark(markType, { href: url, title })
+      state.next(node.children)
+      state.closeMark(markType)
+    },
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === 'link',
+    runner: (state, mark) => {
+      state.withMark(mark, 'link', undefined, {
+        title: mark.attrs.title,
+        url: mark.attrs.href,
+      })
+    },
+  },
+}))
+
+withMeta(linkSchema.mark, {
+  displayName: 'MarkSchema<link>',
+  group: 'Link',
+})
+
+/// @internal
+export interface UpdateLinkCommandPayload {
+  href?: string
+  title?: string
+}
+/// 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)
+)
+
+withMeta(toggleLinkCommand, {
+  displayName: 'Command<toggleLinkCommand>',
+  group: 'Link',
+})
+
+/// 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
+      })
+
+      if (!node) 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
+
+      dispatch(
+        tr
+          .removeMark(start, end, mark)
+          .addMark(start, end, linkMark)
+          .setSelection(new TextSelection(tr.selection.$anchor))
+          .scrollIntoView()
+      )
+
+      return true
+    }
+)
+
+withMeta(updateLinkCommand, {
+  displayName: 'Command<updateLinkCommand>',
+  group: 'Link',
+})

package/src/mark/strong.ts

@@ -0,0 +1,130 @@
+import { commandsCtx, remarkStringifyOptionsCtx } from '@jvs-milkdown/core'
+import { markRule } from '@jvs-milkdown/prose'
+import { toggleMark } from '@jvs-milkdown/prose/commands'
+import {
+  $command,
+  $inputRule,
+  $markAttr,
+  $markSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for the strong mark.
+export const strongAttr = $markAttr('strong')
+
+withMeta(strongAttr, {
+  displayName: 'Attr<strong>',
+  group: 'Strong',
+})
+
+/// Strong mark schema.
+export const strongSchema = $markSchema('strong', (ctx) => ({
+  attrs: {
+    marker: {
+      default: ctx.get(remarkStringifyOptionsCtx).strong || '*',
+      validate: 'string',
+    },
+  },
+  parseDOM: [
+    // This works around a Google Docs misbehavior where
+    // pasted content will be inexplicably wrapped in `<b>`
+    // tags with a font-weight normal.
+    {
+      tag: 'b',
+      getAttrs: (node: HTMLElement) =>
+        node.style.fontWeight != 'normal' && null,
+    },
+    { tag: 'strong' },
+    { style: 'font-style', getAttrs: (value) => (value === 'bold') as false },
+    { style: 'font-weight=400', clearMark: (m) => m.type.name == 'strong' },
+    {
+      style: 'font-weight',
+      getAttrs: (value: string) =>
+        /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
+    },
+  ],
+  toDOM: (mark) => ['strong', ctx.get(strongAttr.key)(mark)],
+  parseMarkdown: {
+    match: (node) => node.type === 'strong',
+    runner: (state, node, markType) => {
+      state.openMark(markType, { marker: node.marker })
+      state.next(node.children)
+      state.closeMark(markType)
+    },
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === 'strong',
+    runner: (state, mark) => {
+      state.withMark(mark, 'strong', undefined, {
+        marker: mark.attrs.marker,
+      })
+    },
+  },
+}))
+
+withMeta(strongSchema.mark, {
+  displayName: 'MarkSchema<strong>',
+  group: 'Strong',
+})
+
+withMeta(strongSchema.ctx, {
+  displayName: 'MarkSchemaCtx<strong>',
+  group: 'Strong',
+})
+
+/// A command to toggle the strong mark.
+export const toggleStrongCommand = $command('ToggleStrong', (ctx) => () => {
+  return toggleMark(strongSchema.type(ctx))
+})
+
+withMeta(toggleStrongCommand, {
+  displayName: 'Command<toggleStrongCommand>',
+  group: 'Strong',
+})
+
+/// A input rule that will capture the strong mark.
+export const strongInputRule = $inputRule((ctx) => {
+  // Avoid matching when the opening delimiter is directly adjacent to alphanumeric characters,
+  // colon or slash (to prevent matches inside file paths, URLs, or intra-word like `a**b**c`).
+  // Also ensure the closing delimiter is not followed by such characters (mirrors strike-through rule).
+  return markRule(
+    /(?<![\w:/])(?:\*\*|__)([^*_]+?)(?:\*\*|__)(?![\w/])$/,
+    strongSchema.type(ctx),
+    {
+      getAttr: (match) => {
+        return {
+          marker: match[0].startsWith('*') ? '*' : '_',
+        }
+      },
+    }
+  )
+})
+
+withMeta(strongInputRule, {
+  displayName: 'InputRule<strong>',
+  group: 'Strong',
+})
+
+/// 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)
+    },
+  },
+})
+
+withMeta(strongKeymap.ctx, {
+  displayName: 'KeymapCtx<strong>',
+  group: 'Strong',
+})
+
+withMeta(strongKeymap.shortcuts, {
+  displayName: 'Keymap<strong>',
+  group: 'Strong',
+})

package/src/node/blockquote.ts

@@ -0,0 +1,100 @@
+import type { $NodeSchema } from '@jvs-milkdown/utils'
+
+import { commandsCtx } from '@jvs-milkdown/core'
+import { wrapIn } from '@jvs-milkdown/prose/commands'
+import { wrappingInputRule } from '@jvs-milkdown/prose/inputrules'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for blockquote node.
+export const blockquoteAttr = $nodeAttr('blockquote')
+
+withMeta(blockquoteAttr, {
+  displayName: 'Attr<blockquote>',
+  group: '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()
+      },
+    },
+  })
+)
+
+withMeta(blockquoteSchema.node, {
+  displayName: 'NodeSchema<blockquote>',
+  group: 'Blockquote',
+})
+
+withMeta(blockquoteSchema.ctx, {
+  displayName: 'NodeSchemaCtx<blockquote>',
+  group: '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((ctx) =>
+  wrappingInputRule(/^\s*>\s$/, blockquoteSchema.type(ctx))
+)
+
+withMeta(wrapInBlockquoteInputRule, {
+  displayName: 'InputRule<wrapInBlockquoteInputRule>',
+  group: 'Blockquote',
+})
+
+/// This command will wrap the current selection in a blockquote.
+export const wrapInBlockquoteCommand = $command(
+  'WrapInBlockquote',
+  (ctx) => () => wrapIn(blockquoteSchema.type(ctx))
+)
+
+withMeta(wrapInBlockquoteCommand, {
+  displayName: 'Command<wrapInBlockquoteCommand>',
+  group: 'Blockquote',
+})
+
+/// 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)
+    },
+  },
+})
+
+withMeta(blockquoteKeymap.ctx, {
+  displayName: 'KeymapCtx<blockquote>',
+  group: 'Blockquote',
+})
+
+withMeta(blockquoteKeymap.shortcuts, {
+  displayName: 'Keymap<blockquote>',
+  group: 'Blockquote',
+})

package/src/node/bullet-list.ts

@@ -0,0 +1,129 @@
+import { commandsCtx } from '@jvs-milkdown/core'
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { wrapIn } from '@jvs-milkdown/prose/commands'
+import { wrappingInputRule } from '@jvs-milkdown/prose/inputrules'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for bullet list node.
+export const bulletListAttr = $nodeAttr('bulletList')
+
+withMeta(bulletListAttr, {
+  displayName: 'Attr<bulletList>',
+  group: 'BulletList',
+})
+
+/// Schema for bullet list node.
+export const bulletListSchema = $nodeSchema('bullet_list', (ctx) => {
+  return {
+    content: 'listItem+',
+    group: 'block',
+    attrs: {
+      spread: {
+        default: false,
+        validate: 'boolean',
+      },
+    },
+    parseDOM: [
+      {
+        tag: 'ul',
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+          return {
+            spread: dom.dataset.spread === 'true',
+          }
+        },
+      },
+    ],
+    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 === 'bullet_list',
+      runner: (state, node) => {
+        state
+          .openNode('list', undefined, {
+            ordered: false,
+            spread: node.attrs.spread,
+          })
+          .next(node.content)
+          .closeNode()
+      },
+    },
+  }
+})
+
+withMeta(bulletListSchema.node, {
+  displayName: 'NodeSchema<bulletList>',
+  group: 'BulletList',
+})
+
+withMeta(bulletListSchema.ctx, {
+  displayName: 'NodeSchemaCtx<bulletList>',
+  group: 'BulletList',
+})
+
+/// Input rule for wrapping a block in bullet list node.
+export const wrapInBulletListInputRule = $inputRule((ctx) =>
+  wrappingInputRule(/^\s*([-+*])\s$/, bulletListSchema.type(ctx))
+)
+
+withMeta(wrapInBulletListInputRule, {
+  displayName: 'InputRule<wrapInBulletListInputRule>',
+  group: 'BulletList',
+})
+
+/// Command for creating bullet list node.
+export const wrapInBulletListCommand = $command(
+  'WrapInBulletList',
+  (ctx) => () => wrapIn(bulletListSchema.type(ctx))
+)
+
+withMeta(wrapInBulletListCommand, {
+  displayName: 'Command<wrapInBulletListCommand>',
+  group: 'BulletList',
+})
+
+/// 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)
+    },
+  },
+})
+
+withMeta(bulletListKeymap.ctx, {
+  displayName: 'KeymapCtx<bulletListKeymap>',
+  group: 'BulletList',
+})
+
+withMeta(bulletListKeymap.shortcuts, {
+  displayName: 'Keymap<bulletListKeymap>',
+  group: 'BulletList',
+})

package/src/node/code-block.ts

@@ -0,0 +1,176 @@
+import { commandsCtx } from '@jvs-milkdown/core'
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { setBlockType } from '@jvs-milkdown/prose/commands'
+import { textblockTypeInputRule } from '@jvs-milkdown/prose/inputrules'
+import {
+  $command,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for code block node.
+export const codeBlockAttr = $nodeAttr('codeBlock', () => ({
+  pre: {},
+  code: {},
+}))
+
+withMeta(codeBlockAttr, {
+  displayName: 'Attr<codeBlock>',
+  group: 'CodeBlock',
+})
+
+/// 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: '',
+        validate: 'string',
+      },
+    },
+    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)
+      const language = node.attrs.language
+      const languageAttrs =
+        language && language.length > 0
+          ? { 'data-language': language }
+          : undefined
+
+      return [
+        'pre',
+        {
+          ...attr.pre,
+          ...languageAttrs,
+        },
+        ['code', attr.code, 0],
+      ]
+    },
+    parseMarkdown: {
+      match: ({ type }) => type === 'code',
+      runner: (state, node, type) => {
+        const language = node.lang ?? ''
+        const value = node.value as string | null
+        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,
+        })
+      },
+    },
+  }
+})
+
+withMeta(codeBlockSchema.node, {
+  displayName: 'NodeSchema<codeBlock>',
+  group: 'CodeBlock',
+})
+
+withMeta(codeBlockSchema.ctx, {
+  displayName: 'NodeSchemaCtx<codeBlock>',
+  group: 'CodeBlock',
+})
+
+/// 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 ?? '',
+    })
+  )
+)
+
+withMeta(createCodeBlockInputRule, {
+  displayName: 'InputRule<createCodeBlockInputRule>',
+  group: 'CodeBlock',
+})
+
+/// 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 })
+)
+
+withMeta(createCodeBlockCommand, {
+  displayName: 'Command<createCodeBlockCommand>',
+  group: 'CodeBlock',
+})
+
+/// 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
+    }
+)
+
+withMeta(updateCodeBlockLanguageCommand, {
+  displayName: 'Command<updateCodeBlockLanguageCommand>',
+  group: 'CodeBlock',
+})
+
+/// 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)
+    },
+  },
+})
+
+withMeta(codeBlockKeymap.ctx, {
+  displayName: 'KeymapCtx<codeBlock>',
+  group: 'CodeBlock',
+})
+
+withMeta(codeBlockKeymap.shortcuts, {
+  displayName: 'Keymap<codeBlock>',
+  group: 'CodeBlock',
+})

package/src/node/doc.ts

@@ -0,0 +1,26 @@
+import { $node } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// 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)
+    },
+  },
+}))
+
+withMeta(docSchema, {
+  displayName: 'NodeSchema<doc>',
+  group: 'Doc',
+})