@jvs-milkdown/preset-commonmark 1.0.0

package/src/node/image.ts

@@ -0,0 +1,173 @@
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { findSelectedNodeOfType } from '@jvs-milkdown/prose'
+import { InputRule } from '@jvs-milkdown/prose/inputrules'
+import { $command, $inputRule, $nodeAttr, $nodeSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for image node.
+export const imageAttr = $nodeAttr('image')
+
+withMeta(imageAttr, {
+  displayName: 'Attr<image>',
+  group: 'Image',
+})
+
+/// Schema for image node.
+export const imageSchema = $nodeSchema('image', (ctx) => {
+  return {
+    inline: true,
+    group: 'inline',
+    selectable: true,
+    draggable: true,
+    marks: '',
+    atom: true,
+    defining: true,
+    isolating: true,
+    attrs: {
+      src: { default: '', validate: 'string' },
+      alt: { default: '', validate: 'string' },
+      title: { default: '', validate: 'string' },
+    },
+    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', { ...ctx.get(imageAttr.key)(node), ...node.attrs }]
+    },
+    parseMarkdown: {
+      match: ({ type }) => type === 'image',
+      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 === 'image',
+      runner: (state, node) => {
+        state.addNode('image', undefined, undefined, {
+          title: node.attrs.title,
+          url: node.attrs.src,
+          alt: node.attrs.alt,
+        })
+      },
+    },
+  }
+})
+
+withMeta(imageSchema.node, {
+  displayName: 'NodeSchema<image>',
+  group: 'Image',
+})
+
+withMeta(imageSchema.ctx, {
+  displayName: 'NodeSchemaCtx<image>',
+  group: 'Image',
+})
+
+/// @internal
+export interface UpdateImageCommandPayload {
+  src?: string
+  title?: string
+  alt?: string
+}
+
+/// This command will insert a image node.
+/// You can pass a payload to set `src`, `alt` and `title` for the image node.
+export const insertImageCommand = $command(
+  'InsertImage',
+  (ctx) =>
+    (payload: UpdateImageCommandPayload = {}) =>
+    (state, dispatch) => {
+      if (!dispatch) return true
+
+      const { src = '', alt = '', title = '' } = payload
+
+      const node = imageSchema.type(ctx).create({ src, alt, title })
+      if (!node) return true
+
+      dispatch(state.tr.replaceSelectionWith(node).scrollIntoView())
+      return true
+    }
+)
+
+withMeta(insertImageCommand, {
+  displayName: 'Command<insertImageCommand>',
+  group: 'Image',
+})
+
+/// This command will update the selected image node.
+/// You can pass a payload to update `src`, `alt` and `title` for the image node.
+export const updateImageCommand = $command(
+  'UpdateImage',
+  (ctx) =>
+    (payload: UpdateImageCommandPayload = {}) =>
+    (state, dispatch) => {
+      const nodeWithPos = findSelectedNodeOfType(
+        state.selection,
+        imageSchema.type(ctx)
+      )
+      if (!nodeWithPos) return false
+
+      const { node, pos } = nodeWithPos
+
+      const newAttrs = { ...node.attrs }
+      const { src, alt, title } = payload
+      if (src !== undefined) newAttrs.src = src
+      if (alt !== undefined) newAttrs.alt = alt
+      if (title !== undefined) newAttrs.title = title
+
+      dispatch?.(
+        state.tr.setNodeMarkup(pos, undefined, newAttrs).scrollIntoView()
+      )
+      return true
+    }
+)
+
+withMeta(updateImageCommand, {
+  displayName: 'Command<updateImageCommand>',
+  group: 'Image',
+})
+
+/// This input rule will insert a image node.
+/// You can input `![alt](src "title")` to insert a image node.
+/// The `title` is optional.
+export const insertImageInputRule = $inputRule(
+  (ctx) =>
+    new InputRule(
+      /!\[(?<alt>.*?)]\((?<filename>.*?)\s*(?="|\))"?(?<title>[^"]+)?"?\)/,
+      (state, match, start, end) => {
+        const [matched, alt, src = '', title] = match
+        if (matched)
+          return state.tr.replaceWith(
+            start,
+            end,
+            imageSchema.type(ctx).create({ src, alt, title })
+          )
+
+        return null
+      }
+    )
+)
+
+withMeta(insertImageInputRule, {
+  displayName: 'InputRule<insertImageInputRule>',
+  group: 'Image',
+})

package/src/node/index.ts

@@ -0,0 +1,14 @@
+export * from './doc'
+export * from './heading'
+export * from './blockquote'
+export * from './code-block'
+export * from './image'
+export * from './hardbreak'
+export * from './hr'
+export * from './bullet-list'
+export * from './ordered-list'
+export * from './list-item'
+export * from './paragraph'
+export * from './text'
+
+export * from './html'

package/src/node/list-item.ts

@@ -0,0 +1,244 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { commandsCtx } from '@jvs-milkdown/core'
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { joinBackward } from '@jvs-milkdown/prose/commands'
+import {
+  liftListItem,
+  sinkListItem,
+  splitListItem,
+} from '@jvs-milkdown/prose/schema-list'
+import { type Command, TextSelection } from '@jvs-milkdown/prose/state'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for list item node.
+export const listItemAttr = $nodeAttr('listItem')
+
+withMeta(listItemAttr, {
+  displayName: 'Attr<listItem>',
+  group: 'ListItem',
+})
+
+/// Schema for list item node.
+export const listItemSchema = $nodeSchema('list_item', (ctx) => ({
+  group: 'listItem',
+  content: 'paragraph block*',
+  attrs: {
+    label: {
+      default: '•',
+      validate: 'string',
+    },
+    listType: {
+      default: 'bullet',
+      validate: 'string',
+    },
+    spread: {
+      default: true,
+      validate: 'boolean',
+    },
+  },
+  defining: true,
+  parseDOM: [
+    {
+      tag: 'li',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+        return {
+          label: dom.dataset.label,
+          listType: dom.dataset.listType,
+          spread: dom.dataset.spread === 'true',
+        }
+      },
+    },
+  ],
+  toDOM: (node) => [
+    'li',
+    {
+      ...ctx.get(listItemAttr.key)(node),
+      'data-label': node.attrs.label,
+      'data-list-type': node.attrs.listType,
+      'data-spread': node.attrs.spread,
+    },
+    0,
+  ],
+  parseMarkdown: {
+    match: ({ type }) => type === 'listItem',
+    runner: (state, node, type) => {
+      const label = node.label != null ? `${node.label}.` : '•'
+      const listType = node.label != null ? 'ordered' : 'bullet'
+      const spread = node.spread != null ? `${node.spread}` : 'true'
+      state.openNode(type, { label, listType, spread })
+      state.next(node.children)
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'list_item',
+    runner: (state, node) => {
+      state.openNode('listItem', undefined, {
+        spread: node.attrs.spread,
+      })
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(listItemSchema.node, {
+  displayName: 'NodeSchema<listItem>',
+  group: 'ListItem',
+})
+
+withMeta(listItemSchema.ctx, {
+  displayName: 'NodeSchemaCtx<listItem>',
+  group: 'ListItem',
+})
+
+/// The command to sink list item.
+///
+/// For example:
+/// ```md
+/// * List item 1
+/// * List item 2 <- cursor here
+/// ```
+/// Will get:
+/// ```md
+/// * List item 1
+///   * List item 2
+/// ```
+export const sinkListItemCommand = $command(
+  'SinkListItem',
+  (ctx) => () => sinkListItem(listItemSchema.type(ctx))
+)
+
+withMeta(sinkListItemCommand, {
+  displayName: 'Command<sinkListItemCommand>',
+  group: 'ListItem',
+})
+
+/// The command to lift list item.
+///
+/// For example:
+/// ```md
+/// * List item 1
+///   * List item 2 <- cursor here
+/// ```
+/// Will get:
+/// ```md
+/// * List item 1
+/// * List item 2
+/// ```
+export const liftListItemCommand = $command(
+  'LiftListItem',
+  (ctx) => () => liftListItem(listItemSchema.type(ctx))
+)
+
+withMeta(liftListItemCommand, {
+  displayName: 'Command<liftListItemCommand>',
+  group: 'ListItem',
+})
+
+/// The command to split a list item.
+///
+/// For example:
+/// ```md
+/// * List item 1
+/// * List item 2 <- cursor here
+/// ```
+/// Will get:
+/// ```md
+/// * List item 1
+/// * List item 2
+/// * <- cursor here
+/// ```
+export const splitListItemCommand = $command(
+  'SplitListItem',
+  (ctx) => () => splitListItem(listItemSchema.type(ctx))
+)
+
+withMeta(splitListItemCommand, {
+  displayName: 'Command<splitListItemCommand>',
+  group: 'ListItem',
+})
+
+function liftFirstListItem(ctx: Ctx): Command {
+  return (state, dispatch, view) => {
+    const { selection } = state
+    if (!(selection instanceof TextSelection)) return false
+
+    const { empty, $from } = selection
+
+    // selection should be empty and at the start of the node
+    if (!empty || $from.parentOffset !== 0) return false
+
+    const parentItem = $from.node(-1)
+    // selection should be in list item
+    if (parentItem.type !== listItemSchema.type(ctx)) return false
+
+    return joinBackward(state, dispatch, view)
+  }
+}
+
+/// The command to remove list item **only if**:
+///
+/// - Selection is at the start of the list item.
+/// - List item is the only child of the list.
+///
+/// Most of the time, you shouldn't use this command directly.
+export const liftFirstListItemCommand = $command(
+  'LiftFirstListItem',
+  (ctx) => () => liftFirstListItem(ctx)
+)
+
+withMeta(liftFirstListItemCommand, {
+  displayName: 'Command<liftFirstListItemCommand>',
+  group: 'ListItem',
+})
+
+/// Keymap for list item node.
+/// - `<Enter>`: Split the current list item.
+/// - `<Tab>/<Mod-]>`: Sink the current list item.
+/// - `<Shift-Tab>/<Mod-[>`: Lift the current list item.
+export const listItemKeymap = $useKeymap('listItemKeymap', {
+  NextListItem: {
+    shortcuts: 'Enter',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(splitListItemCommand.key)
+    },
+  },
+  SinkListItem: {
+    shortcuts: ['Tab', 'Mod-]'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(sinkListItemCommand.key)
+    },
+  },
+  LiftListItem: {
+    shortcuts: ['Shift-Tab', 'Mod-['],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(liftListItemCommand.key)
+    },
+  },
+  LiftFirstListItem: {
+    shortcuts: ['Backspace', 'Delete'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(liftFirstListItemCommand.key)
+    },
+  },
+})
+
+withMeta(listItemKeymap.ctx, {
+  displayName: 'KeymapCtx<listItem>',
+  group: 'ListItem',
+})
+
+withMeta(listItemKeymap.shortcuts, {
+  displayName: 'Keymap<listItem>',
+  group: 'ListItem',
+})

package/src/node/ordered-list.ts

@@ -0,0 +1,141 @@
+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 ordered list node.
+export const orderedListAttr = $nodeAttr('orderedList')
+
+withMeta(orderedListAttr, {
+  displayName: 'Attr<orderedList>',
+  group: 'OrderedList',
+})
+
+/// Schema for ordered list node.
+export const orderedListSchema = $nodeSchema('ordered_list', (ctx) => ({
+  content: 'listItem+',
+  group: 'block',
+  attrs: {
+    order: {
+      default: 1,
+      validate: 'number',
+    },
+    spread: {
+      default: false,
+      validate: 'boolean',
+    },
+  },
+  parseDOM: [
+    {
+      tag: 'ol',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+        return {
+          spread: dom.dataset.spread,
+          order: dom.hasAttribute('start')
+            ? Number(dom.getAttribute('start'))
+            : 1,
+        }
+      },
+    },
+  ],
+  toDOM: (node) => [
+    'ol',
+    {
+      ...ctx.get(orderedListAttr.key)(node),
+      ...(node.attrs.order === 1 ? {} : { start: node.attrs.order }),
+      'data-spread': node.attrs.spread,
+    },
+    0,
+  ],
+  parseMarkdown: {
+    match: ({ type, ordered }) => type === 'list' && !!ordered,
+    runner: (state, node, type) => {
+      const spread = node.spread != null ? `${node.spread}` : 'true'
+      state
+        .openNode(type, { spread, order: node.start ?? 1 })
+        .next(node.children)
+        .closeNode()
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'ordered_list',
+    runner: (state, node) => {
+      state.openNode('list', undefined, {
+        ordered: true,
+        start: node.attrs.order ?? 1,
+        spread: node.attrs.spread === 'true',
+      })
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(orderedListSchema.node, {
+  displayName: 'NodeSchema<orderedList>',
+  group: 'OrderedList',
+})
+
+withMeta(orderedListSchema.ctx, {
+  displayName: 'NodeSchemaCtx<orderedList>',
+  group: 'OrderedList',
+})
+
+/// Input rule for wrapping a block in ordered list node.
+export const wrapInOrderedListInputRule = $inputRule((ctx) =>
+  wrappingInputRule(
+    /^\s*(\d+)\.\s$/,
+    orderedListSchema.type(ctx),
+    (match) => ({ order: Number(match[1]) }),
+    (match, node) => node.childCount + node.attrs.order === Number(match[1])
+  )
+)
+
+withMeta(wrapInOrderedListInputRule, {
+  displayName: 'InputRule<wrapInOrderedListInputRule>',
+  group: 'OrderedList',
+})
+
+/// Command for wrapping a block in ordered list node.
+export const wrapInOrderedListCommand = $command(
+  'WrapInOrderedList',
+  (ctx) => () => wrapIn(orderedListSchema.type(ctx))
+)
+
+withMeta(wrapInOrderedListCommand, {
+  displayName: 'Command<wrapInOrderedListCommand>',
+  group: 'OrderedList',
+})
+
+/// Keymap for ordered list node.
+/// - `Mod-Alt-7`: Wrap a block in ordered list.
+export const orderedListKeymap = $useKeymap('orderedListKeymap', {
+  WrapInOrderedList: {
+    shortcuts: 'Mod-Alt-7',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInOrderedListCommand.key)
+    },
+  },
+})
+
+withMeta(orderedListKeymap.ctx, {
+  displayName: 'KeymapCtx<orderedList>',
+  group: 'OrderedList',
+})
+
+withMeta(orderedListKeymap.shortcuts, {
+  displayName: 'Keymap<orderedList>',
+  group: 'OrderedList',
+})

package/src/node/paragraph.ts

@@ -0,0 +1,136 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { commandsCtx, editorViewCtx } from '@jvs-milkdown/core'
+import { setBlockType } from '@jvs-milkdown/prose/commands'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@jvs-milkdown/utils'
+
+import { serializeText, withMeta } from '../__internal__'
+import { remarkPreserveEmptyLinePlugin } from '../plugin/remark-preserve-empty-line'
+
+/// HTML attributes for paragraph node.
+export const paragraphAttr = $nodeAttr('paragraph')
+
+withMeta(paragraphAttr, {
+  displayName: 'Attr<paragraph>',
+  group: 'Paragraph',
+})
+
+/// Schema for paragraph node.
+export const paragraphSchema = $nodeSchema('paragraph', (ctx) => ({
+  content: 'inline*',
+  group: 'block',
+  attrs: {
+    align: { default: null },
+    indent: { default: 0 },
+  },
+  parseDOM: [
+    {
+      tag: 'p',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement)) return null
+        return {
+          align: dom.style.textAlign || dom.getAttribute('data-align') || null,
+          indent: parseInt(dom.getAttribute('data-indent') || '0', 10) || 0,
+        }
+      },
+    },
+  ],
+  toDOM: (node) => {
+    const { align, indent } = node.attrs
+    const attrs = { ...ctx.get(paragraphAttr.key)(node) } as Record<
+      string,
+      string
+    >
+    if (align) {
+      attrs.style = (attrs.style || '') + `text-align: ${align};`
+      attrs['data-align'] = align
+    }
+    if (indent) {
+      attrs.style = (attrs.style || '') + `margin-left: ${indent * 2}em;`
+      attrs['data-indent'] = indent.toString()
+    }
+    return ['p', attrs, 0]
+  },
+  parseMarkdown: {
+    match: (node) => node.type === 'paragraph',
+    runner: (state, node, type) => {
+      state.openNode(type)
+      if (node.children) state.next(node.children)
+      else state.addText((node.value || '') as string)
+
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'paragraph',
+    runner: (state, node) => {
+      const view = ctx.get(editorViewCtx)
+      const lastNode = view.state?.doc.lastChild
+
+      state.openNode('paragraph')
+      if (
+        (!node.content || node.content.size === 0) &&
+        node !== lastNode &&
+        shouldPreserveEmptyLine(ctx)
+      ) {
+        state.addNode('html', undefined, '<br />')
+      } else {
+        serializeText(state, node)
+      }
+      state.closeNode()
+    },
+  },
+}))
+
+function shouldPreserveEmptyLine(ctx: Ctx) {
+  let shouldPreserveEmptyLine = false
+  try {
+    ctx.get(remarkPreserveEmptyLinePlugin.id)
+    shouldPreserveEmptyLine = true
+  } catch {
+    shouldPreserveEmptyLine = false
+  }
+  return shouldPreserveEmptyLine
+}
+
+withMeta(paragraphSchema.node, {
+  displayName: 'NodeSchema<paragraph>',
+  group: 'Paragraph',
+})
+withMeta(paragraphSchema.ctx, {
+  displayName: 'NodeSchemaCtx<paragraph>',
+  group: 'Paragraph',
+})
+
+/// This command can turn the selected block into paragraph.
+export const turnIntoTextCommand = $command(
+  'TurnIntoText',
+  (ctx) => () => setBlockType(paragraphSchema.type(ctx))
+)
+
+withMeta(turnIntoTextCommand, {
+  displayName: 'Command<turnIntoTextCommand>',
+  group: 'Paragraph',
+})
+
+/// Keymap for paragraph node.
+/// - `<Mod-Alt-0>`: Turn the selected block into paragraph.
+export const paragraphKeymap = $useKeymap('paragraphKeymap', {
+  TurnIntoText: {
+    shortcuts: 'Mod-Alt-0',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(turnIntoTextCommand.key)
+    },
+  },
+})
+
+withMeta(paragraphKeymap.ctx, {
+  displayName: 'KeymapCtx<paragraph>',
+  group: 'Paragraph',
+})
+
+withMeta(paragraphKeymap.shortcuts, {
+  displayName: 'Keymap<paragraph>',
+  group: 'Paragraph',
+})