@jvs-milkdown/preset-commonmark 1.0.0

package/src/commands/index.ts

@@ -0,0 +1,140 @@
+import { findNodeInSelection } from '@jvs-milkdown/prose'
+import {
+  Node,
+  type Attrs,
+  type MarkType,
+  type NodeType,
+} from '@jvs-milkdown/prose/model'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import { findWrapping } from '@jvs-milkdown/prose/transform'
+import { $command } from '@jvs-milkdown/utils'
+
+/// A command to check if a mark is selected.
+export const isMarkSelectedCommand = $command(
+  'IsMarkSelected',
+  () => (markType?: MarkType) => (state) => {
+    if (!markType) return false
+    const { doc, selection } = state
+    const hasLink = doc.rangeHasMark(selection.from, selection.to, markType)
+    return hasLink
+  }
+)
+
+/// A command to check if a node is selected.
+export const isNodeSelectedCommand = $command(
+  'IsNoteSelected',
+  () => (nodeType?: NodeType) => (state) => {
+    if (!nodeType) return false
+    const result = findNodeInSelection(state, nodeType)
+    return result.hasNode
+  }
+)
+
+/// A command to clear text in the current block.
+export const clearTextInCurrentBlockCommand = $command(
+  'ClearTextInCurrentBlock',
+  () => () => (state, dispatch) => {
+    let tr = state.tr
+    const { $from, $to } = tr.selection
+    const { pos: from } = $from
+    const { pos: right } = $to
+    const left = from - $from.node().content.size
+    if (left < 0) return false
+
+    tr = tr.deleteRange(left, right)
+    dispatch?.(tr)
+    return true
+  }
+)
+
+/// Set block type to target block and attribute.
+export const setBlockTypeCommand = $command(
+  'SetBlockType',
+  () =>
+    (payload?: { nodeType: NodeType; attrs?: Attrs | null }) =>
+    (state, dispatch) => {
+      const { nodeType, attrs = null } = payload ?? {}
+      if (!nodeType) return false
+      const tr = state.tr
+      const { from, to } = tr.selection
+      try {
+        tr.setBlockType(from, to, nodeType, attrs)
+      } catch {
+        return false
+      }
+      dispatch?.(tr)
+      return true
+    }
+)
+
+/// A command to wrap the current block with a block type.
+export const wrapInBlockTypeCommand = $command(
+  'WrapInBlockType',
+  () =>
+    (payload?: { nodeType: NodeType; attrs?: Attrs | null }) =>
+    (state, dispatch) => {
+      const { nodeType, attrs = null } = payload ?? {}
+      if (!nodeType) return false
+
+      let tr = state.tr
+
+      try {
+        const { $from, $to } = tr.selection
+        const blockRange = $from.blockRange($to)
+        const wrapping = blockRange && findWrapping(blockRange, nodeType, attrs)
+        if (!wrapping) return false
+        tr = tr.wrap(blockRange, wrapping)
+      } catch {
+        return false
+      }
+
+      dispatch?.(tr)
+      return true
+    }
+)
+
+/// A command to add a block type to the current selection.
+export const addBlockTypeCommand = $command(
+  'AddBlockType',
+  () =>
+    (payload?: { nodeType: NodeType | Node; attrs?: Attrs | null }) =>
+    (state, dispatch) => {
+      const { nodeType, attrs = null } = payload ?? {}
+      if (!nodeType) return false
+      const tr = state.tr
+
+      try {
+        const node =
+          nodeType instanceof Node ? nodeType : nodeType.createAndFill(attrs)
+        if (!node) return false
+
+        tr.replaceSelectionWith(node)
+      } catch {
+        return false
+      }
+      dispatch?.(tr)
+      return true
+    }
+)
+
+/// A command to select text near a position.
+export const selectTextNearPosCommand = $command(
+  'SelectTextNearPos',
+  () => (payload?: { pos?: number }) => (state, dispatch) => {
+    const { pos } = payload ?? {}
+    if (pos == null) return false
+
+    const clamp = (value: number, min: number, max: number) =>
+      Math.min(Math.max(value, min), max)
+
+    const tr = state.tr
+    try {
+      const $pos = state.doc.resolve(clamp(pos, 0, state.doc.content.size))
+      tr.setSelection(TextSelection.near($pos))
+    } catch {
+      return false
+    }
+    dispatch?.(tr.scrollIntoView())
+    return true
+  }
+)

package/src/composed/commands.ts

@@ -0,0 +1,72 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  addBlockTypeCommand,
+  clearTextInCurrentBlockCommand,
+  isMarkSelectedCommand,
+  isNodeSelectedCommand,
+  selectTextNearPosCommand,
+  setBlockTypeCommand,
+  wrapInBlockTypeCommand,
+} from '../commands'
+import {
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleLinkCommand,
+  toggleStrongCommand,
+  updateLinkCommand,
+} from '../mark'
+import {
+  createCodeBlockCommand,
+  downgradeHeadingCommand,
+  insertHardbreakCommand,
+  insertHrCommand,
+  insertImageCommand,
+  liftFirstListItemCommand,
+  liftListItemCommand,
+  sinkListItemCommand,
+  splitListItemCommand,
+  turnIntoTextCommand,
+  updateImageCommand,
+  wrapInBlockquoteCommand,
+  wrapInBulletListCommand,
+  wrapInHeadingCommand,
+  wrapInOrderedListCommand,
+} from '../node'
+
+/// @internal
+export const commands: MilkdownPlugin[] = [
+  turnIntoTextCommand,
+  wrapInBlockquoteCommand,
+  wrapInHeadingCommand,
+  downgradeHeadingCommand,
+  createCodeBlockCommand,
+  insertHardbreakCommand,
+  insertHrCommand,
+
+  insertImageCommand,
+  updateImageCommand,
+
+  wrapInOrderedListCommand,
+  wrapInBulletListCommand,
+  sinkListItemCommand,
+  splitListItemCommand,
+  liftListItemCommand,
+  liftFirstListItemCommand,
+
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+
+  toggleLinkCommand,
+  updateLinkCommand,
+
+  isMarkSelectedCommand,
+  isNodeSelectedCommand,
+
+  clearTextInCurrentBlockCommand,
+  setBlockTypeCommand,
+  wrapInBlockTypeCommand,
+  addBlockTypeCommand,
+  selectTextNearPosCommand,
+]

package/src/composed/index.ts

@@ -0,0 +1,5 @@
+export * from './schema'
+export * from './inputrules'
+export * from './commands'
+export * from './keymap'
+export * from './plugins'

package/src/composed/inputrules.ts

@@ -0,0 +1,34 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  emphasisStarInputRule,
+  emphasisUnderscoreInputRule,
+  inlineCodeInputRule,
+  strongInputRule,
+} from '../mark'
+import {
+  createCodeBlockInputRule,
+  insertHrInputRule,
+  wrapInBlockquoteInputRule,
+  wrapInBulletListInputRule,
+  wrapInHeadingInputRule,
+  wrapInOrderedListInputRule,
+} from '../node'
+
+/// @internal
+export const inputRules: MilkdownPlugin[] = [
+  wrapInBlockquoteInputRule,
+  wrapInBulletListInputRule,
+  wrapInOrderedListInputRule,
+  createCodeBlockInputRule,
+  insertHrInputRule,
+  wrapInHeadingInputRule,
+].flat()
+
+/// @internal
+export const markInputRules: MilkdownPlugin[] = [
+  emphasisStarInputRule,
+  emphasisUnderscoreInputRule,
+  inlineCodeInputRule,
+  strongInputRule,
+]

package/src/composed/keymap.ts

@@ -0,0 +1,29 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { emphasisKeymap, inlineCodeKeymap, strongKeymap } from '../mark'
+import {
+  blockquoteKeymap,
+  bulletListKeymap,
+  codeBlockKeymap,
+  hardbreakKeymap,
+  headingKeymap,
+  listItemKeymap,
+  orderedListKeymap,
+  paragraphKeymap,
+} from '../node'
+
+/// @internal
+export const keymap: MilkdownPlugin[] = [
+  blockquoteKeymap,
+  codeBlockKeymap,
+  hardbreakKeymap,
+  headingKeymap,
+  listItemKeymap,
+  orderedListKeymap,
+  bulletListKeymap,
+  paragraphKeymap,
+
+  emphasisKeymap,
+  inlineCodeKeymap,
+  strongKeymap,
+].flat()

package/src/composed/plugins.ts

@@ -0,0 +1,35 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  hardbreakClearMarkPlugin,
+  hardbreakFilterNodes,
+  hardbreakFilterPlugin,
+  inlineNodesCursorPlugin,
+  remarkAddOrderInListPlugin,
+  remarkHtmlTransformer,
+  remarkInlineLinkPlugin,
+  remarkLineBreak,
+  remarkMarker,
+  remarkPreserveEmptyLinePlugin,
+  syncHeadingIdPlugin,
+  syncListOrderPlugin,
+} from '../plugin'
+
+/// @internal
+export const plugins: MilkdownPlugin[] = [
+  hardbreakClearMarkPlugin,
+  hardbreakFilterNodes,
+  hardbreakFilterPlugin,
+
+  inlineNodesCursorPlugin,
+
+  remarkAddOrderInListPlugin,
+  remarkInlineLinkPlugin,
+  remarkLineBreak,
+  remarkHtmlTransformer,
+  remarkMarker,
+  remarkPreserveEmptyLinePlugin,
+
+  syncHeadingIdPlugin,
+  syncListOrderPlugin,
+].flat()

package/src/composed/schema.ts

@@ -0,0 +1,92 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  emphasisAttr,
+  emphasisSchema,
+  inlineCodeAttr,
+  inlineCodeSchema,
+  linkAttr,
+  linkSchema,
+  strongAttr,
+  strongSchema,
+} from '../mark'
+import {
+  blockquoteAttr,
+  blockquoteSchema,
+  bulletListAttr,
+  bulletListSchema,
+  codeBlockAttr,
+  codeBlockSchema,
+  docSchema,
+  hardbreakAttr,
+  hardbreakSchema,
+  headingAttr,
+  headingIdGenerator,
+  headingSchema,
+  hrAttr,
+  hrSchema,
+  htmlAttr,
+  htmlSchema,
+  imageAttr,
+  imageSchema,
+  listItemAttr,
+  listItemSchema,
+  orderedListAttr,
+  orderedListSchema,
+  paragraphAttr,
+  paragraphSchema,
+  textSchema,
+} from '../node'
+
+/// @internal
+export const schema: MilkdownPlugin[] = [
+  docSchema,
+
+  paragraphAttr,
+  paragraphSchema,
+
+  headingIdGenerator,
+  headingAttr,
+  headingSchema,
+
+  hardbreakAttr,
+  hardbreakSchema,
+
+  blockquoteAttr,
+  blockquoteSchema,
+
+  codeBlockAttr,
+  codeBlockSchema,
+
+  hrAttr,
+  hrSchema,
+
+  imageAttr,
+  imageSchema,
+
+  bulletListAttr,
+  bulletListSchema,
+
+  orderedListAttr,
+  orderedListSchema,
+
+  listItemAttr,
+  listItemSchema,
+
+  emphasisAttr,
+  emphasisSchema,
+
+  strongAttr,
+  strongSchema,
+
+  inlineCodeAttr,
+  inlineCodeSchema,
+
+  linkAttr,
+  linkSchema,
+
+  htmlAttr,
+  htmlSchema,
+
+  textSchema,
+].flat()

package/src/index.ts

@@ -0,0 +1,26 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  commands,
+  inputRules,
+  keymap,
+  markInputRules,
+  plugins,
+  schema,
+} from './composed'
+
+export * from './node'
+export * from './mark'
+export * from './plugin'
+export * from './composed'
+export * from './commands'
+
+/// The commonmark preset, includes all the plugins.
+export const commonmark: MilkdownPlugin[] = [
+  schema,
+  inputRules,
+  markInputRules,
+  commands,
+  keymap,
+  plugins,
+].flat()

package/src/mark/emphasis.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 emphasis mark.
+export const emphasisAttr = $markAttr('emphasis')
+
+withMeta(emphasisAttr, {
+  displayName: 'Attr<emphasis>',
+  group: 'Emphasis',
+})
+
+/// Emphasis mark schema.
+export const emphasisSchema = $markSchema('emphasis', (ctx) => ({
+  attrs: {
+    marker: {
+      default: ctx.get(remarkStringifyOptionsCtx).emphasis || '*',
+      validate: 'string',
+    },
+  },
+  parseDOM: [
+    { tag: 'i' },
+    { tag: 'em' },
+    { style: 'font-style', getAttrs: (value) => (value === 'italic') as false },
+  ],
+  toDOM: (mark) => ['em', ctx.get(emphasisAttr.key)(mark)],
+  parseMarkdown: {
+    match: (node) => node.type === 'emphasis',
+    runner: (state, node, markType) => {
+      state.openMark(markType, { marker: node.marker })
+      state.next(node.children)
+      state.closeMark(markType)
+    },
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === 'emphasis',
+    runner: (state, mark) => {
+      state.withMark(mark, 'emphasis', undefined, {
+        marker: mark.attrs.marker,
+      })
+    },
+  },
+}))
+
+withMeta(emphasisSchema.mark, {
+  displayName: 'MarkSchema<emphasis>',
+  group: 'Emphasis',
+})
+
+withMeta(emphasisSchema.ctx, {
+  displayName: 'MarkSchemaCtx<emphasis>',
+  group: 'Emphasis',
+})
+
+/// A command to toggle the emphasis mark.
+export const toggleEmphasisCommand = $command('ToggleEmphasis', (ctx) => () => {
+  return toggleMark(emphasisSchema.type(ctx))
+})
+
+withMeta(toggleEmphasisCommand, {
+  displayName: 'Command<toggleEmphasisCommand>',
+  group: 'Emphasis',
+})
+
+/// Input rule for use `*` to create emphasis mark.
+export const emphasisStarInputRule = $inputRule((ctx) => {
+  return markRule(/(?:^|[^*])\*([^*]+)\*$/, emphasisSchema.type(ctx), {
+    getAttr: () => ({
+      marker: '*',
+    }),
+    updateCaptured: ({ fullMatch, start }) =>
+      !fullMatch.startsWith('*')
+        ? { fullMatch: fullMatch.slice(1), start: start + 1 }
+        : {},
+  })
+})
+
+withMeta(emphasisStarInputRule, {
+  displayName: 'InputRule<emphasis>|Star',
+  group: 'Emphasis',
+})
+
+/// Input rule for use `_` to create emphasis mark.
+export const emphasisUnderscoreInputRule = $inputRule((ctx) => {
+  return markRule(/\b_(?![_\s])(.*?[^_\s])_\b/, emphasisSchema.type(ctx), {
+    getAttr: () => ({
+      marker: '_',
+    }),
+    updateCaptured: ({ fullMatch, start }) =>
+      !fullMatch.startsWith('_')
+        ? { fullMatch: fullMatch.slice(1), start: start + 1 }
+        : {},
+  })
+})
+
+withMeta(emphasisUnderscoreInputRule, {
+  displayName: 'InputRule<emphasis>|Underscore',
+  group: 'Emphasis',
+})
+
+/// Keymap for the emphasis mark.
+/// - `Mod-i` - Toggle the emphasis mark.
+export const emphasisKeymap = $useKeymap('emphasisKeymap', {
+  ToggleEmphasis: {
+    shortcuts: 'Mod-i',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(toggleEmphasisCommand.key)
+    },
+  },
+})
+
+withMeta(emphasisKeymap.ctx, {
+  displayName: 'KeymapCtx<emphasis>',
+  group: 'Emphasis',
+})
+
+withMeta(emphasisKeymap.shortcuts, {
+  displayName: 'Keymap<emphasis>',
+  group: 'Emphasis',
+})

package/src/mark/index.ts

@@ -0,0 +1,4 @@
+export * from './emphasis'
+export * from './strong'
+export * from './inline-code'
+export * from './link'

package/src/mark/inline-code.ts

@@ -0,0 +1,123 @@
+import type { MarkType } from '@jvs-milkdown/prose/model'
+
+import { commandsCtx } from '@jvs-milkdown/core'
+import { markRule } from '@jvs-milkdown/prose'
+import {
+  $command,
+  $inputRule,
+  $markAttr,
+  $markSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for the inlineCode mark.
+export const inlineCodeAttr = $markAttr('inlineCode')
+
+withMeta(inlineCodeAttr, {
+  displayName: 'Attr<inlineCode>',
+  group: 'InlineCode',
+})
+
+/// InlineCode mark schema.
+export const inlineCodeSchema = $markSchema('inlineCode', (ctx) => ({
+  priority: 100,
+  code: true,
+  parseDOM: [{ tag: 'code' }],
+  toDOM: (mark) => ['code', ctx.get(inlineCodeAttr.key)(mark)],
+  parseMarkdown: {
+    match: (node) => node.type === 'inlineCode',
+    runner: (state, node, markType) => {
+      state.openMark(markType)
+      state.addText(node.value as string)
+      state.closeMark(markType)
+    },
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === 'inlineCode',
+    runner: (state, mark, node) => {
+      state.withMark(mark, 'inlineCode', node.text || '')
+      return true
+    },
+  },
+}))
+
+withMeta(inlineCodeSchema.mark, {
+  displayName: 'MarkSchema<inlineCode>',
+  group: 'InlineCode',
+})
+
+withMeta(inlineCodeSchema.ctx, {
+  displayName: 'MarkSchemaCtx<inlineCode>',
+  group: 'InlineCode',
+})
+
+/// A command to toggle the inlineCode mark.
+export const toggleInlineCodeCommand = $command(
+  'ToggleInlineCode',
+  (ctx) => () => (state, dispatch) => {
+    const { selection, tr } = state
+    if (selection.empty) return false
+    const { from, to } = selection
+
+    const has = state.doc.rangeHasMark(from, to, inlineCodeSchema.type(ctx))
+    // remove exists inlineCode mark if have
+    if (has) {
+      dispatch?.(tr.removeMark(from, to, inlineCodeSchema.type(ctx)))
+      return true
+    }
+
+    const restMarksName = Object.keys(state.schema.marks).filter(
+      (x) => x !== inlineCodeSchema.type.name
+    )
+
+    // remove other marks
+    restMarksName
+      .map((name) => state.schema.marks[name] as MarkType)
+      .forEach((t) => {
+        tr.removeMark(from, to, t)
+      })
+
+    // add inlineCode mark
+    dispatch?.(tr.addMark(from, to, inlineCodeSchema.type(ctx).create()))
+    return true
+  }
+)
+
+withMeta(toggleInlineCodeCommand, {
+  displayName: 'Command<toggleInlineCodeCommand>',
+  group: 'InlineCode',
+})
+
+/// Input rule for create inlineCode mark.
+export const inlineCodeInputRule = $inputRule((ctx) => {
+  return markRule(/(?:`)([^`]+)(?:`)$/, inlineCodeSchema.type(ctx))
+})
+
+withMeta(inlineCodeInputRule, {
+  displayName: 'InputRule<inlineCodeInputRule>',
+  group: 'InlineCode',
+})
+
+/// Keymap for the inlineCode mark.
+/// - `Mod-e` - Toggle the inlineCode mark.
+export const inlineCodeKeymap = $useKeymap('inlineCodeKeymap', {
+  ToggleInlineCode: {
+    shortcuts: 'Mod-e',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(toggleInlineCodeCommand.key)
+    },
+  },
+})
+
+withMeta(inlineCodeKeymap.ctx, {
+  displayName: 'KeymapCtx<inlineCode>',
+  group: 'InlineCode',
+})
+
+withMeta(inlineCodeKeymap.shortcuts, {
+  displayName: 'Keymap<inlineCode>',
+  group: 'InlineCode',
+})