@jvs-milkdown/preset-commonmark 1.0.0

package/src/node/hardbreak.ts

@@ -0,0 +1,134 @@
+import { commandsCtx } from '@jvs-milkdown/core'
+import { Selection, TextSelection } from '@jvs-milkdown/prose/state'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// HTML attributes for the hardbreak node.
+///
+/// Default value:
+/// - `data-is-inline` - Whether the hardbreak is inline.
+export const hardbreakAttr = $nodeAttr('hardbreak', (node) => {
+  return {
+    'data-type': 'hardbreak',
+    'data-is-inline': node.attrs.isInline,
+  }
+})
+
+withMeta(hardbreakAttr, {
+  displayName: 'Attr<hardbreak>',
+  group: 'Hardbreak',
+})
+
+/// Hardbreak node schema.
+export const hardbreakSchema = $nodeSchema('hardbreak', (ctx) => ({
+  inline: true,
+  group: 'inline',
+  attrs: {
+    isInline: {
+      default: false,
+      validate: 'boolean',
+    },
+  },
+  selectable: false,
+  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
+        ),
+      })
+    },
+  },
+  leafText: () => '\n',
+  toMarkdown: {
+    match: (node) => node.type.name === 'hardbreak',
+    runner: (state, node) => {
+      if (node.attrs.isInline) state.addNode('text', undefined, '\n')
+      else state.addNode('break')
+    },
+  },
+}))
+
+withMeta(hardbreakSchema.node, {
+  displayName: 'NodeSchema<hardbreak>',
+  group: 'Hardbreak',
+})
+
+withMeta(hardbreakSchema.ctx, {
+  displayName: 'NodeSchemaCtx<hardbreak>',
+  group: 'Hardbreak',
+})
+
+/// Command to insert a hardbreak.
+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
+      }
+    }
+    dispatch?.(
+      tr
+        .setMeta('hardbreak', true)
+        .replaceSelectionWith(hardbreakSchema.type(ctx).create())
+        .scrollIntoView()
+    )
+    return true
+  }
+)
+
+withMeta(insertHardbreakCommand, {
+  displayName: 'Command<insertHardbreakCommand>',
+  group: 'Hardbreak',
+})
+
+/// 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)
+    },
+  },
+})
+
+withMeta(hardbreakKeymap.ctx, {
+  displayName: 'KeymapCtx<hardbreak>',
+  group: 'Hardbreak',
+})
+
+withMeta(hardbreakKeymap.shortcuts, {
+  displayName: 'Keymap<hardbreak>',
+  group: 'Hardbreak',
+})

package/src/node/heading.ts

@@ -0,0 +1,271 @@
+import type { Node } from '@jvs-milkdown/prose/model'
+
+import { commandsCtx, editorViewCtx } 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,
+  $ctx,
+  $inputRule,
+  $nodeAttr,
+  $nodeSchema,
+  $useKeymap,
+} from '@jvs-milkdown/utils'
+
+import { serializeText, withMeta } from '../__internal__'
+import { paragraphSchema } from './paragraph'
+
+const headingIndex = Array(6)
+  .fill(0)
+  .map((_, i) => i + 1)
+
+function defaultHeadingIdGenerator(node: Node) {
+  return node.textContent.toLowerCase().trim().replace(/\s+/g, '-')
+}
+
+/// This is a slice contains a function to generate heading id.
+/// You can configure it to generate id in your own way.
+export const headingIdGenerator = $ctx(
+  defaultHeadingIdGenerator,
+  'headingIdGenerator'
+)
+
+withMeta(headingIdGenerator, {
+  displayName: 'Ctx<HeadingIdGenerator>',
+  group: 'Heading',
+})
+
+/// HTML attributes for heading node.
+export const headingAttr = $nodeAttr('heading')
+
+withMeta(headingAttr, {
+  displayName: 'Attr<heading>',
+  group: 'Heading',
+})
+
+/// Schema for heading node.
+export const headingSchema = $nodeSchema('heading', (ctx) => {
+  const getId = ctx.get(headingIdGenerator.key)
+  return {
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+    attrs: {
+      id: {
+        default: '',
+        validate: 'string',
+      },
+      level: {
+        default: 1,
+        validate: 'number',
+      },
+      align: { default: null },
+      indent: { default: 0 },
+    },
+    parseDOM: headingIndex.map((x) => ({
+      tag: `h${x}`,
+      getAttrs: (node) => {
+        if (!(node instanceof HTMLElement)) throw expectDomTypeError(node)
+
+        return {
+          level: x,
+          id: node.id,
+          align:
+            node.style.textAlign || node.getAttribute('data-align') || null,
+          indent: parseInt(node.getAttribute('data-indent') || '0', 10) || 0,
+        }
+      },
+    })),
+    toDOM: (node) => {
+      const { align, indent } = node.attrs
+      const attrs = {
+        ...ctx.get(headingAttr.key)(node),
+        id: node.attrs.id || getId(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 [`h${node.attrs.level}`, attrs, 0]
+    },
+    parseMarkdown: {
+      match: ({ type }) => type === 'heading',
+      runner: (state, node, type) => {
+        const depth = node.depth as number
+        state.openNode(type, { level: depth })
+        state.next(node.children)
+        state.closeNode()
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === 'heading',
+      runner: (state, node) => {
+        state.openNode('heading', undefined, { depth: node.attrs.level })
+        serializeText(state, node)
+        state.closeNode()
+      },
+    },
+  }
+})
+
+withMeta(headingSchema.node, {
+  displayName: 'NodeSchema<heading>',
+  group: 'Heading',
+})
+
+withMeta(headingSchema.ctx, {
+  displayName: 'NodeSchemaCtx<heading>',
+  group: 'Heading',
+})
+
+/// This input rule can turn the selected block into heading.
+/// You can input numbers of `#` and a `space` to create heading.
+export const wrapInHeadingInputRule = $inputRule((ctx) => {
+  return textblockTypeInputRule(
+    /^(?<hashes>#+)\s$/,
+    headingSchema.type(ctx),
+    (match) => {
+      const x = match.groups?.hashes?.length || 0
+
+      const view = ctx.get(editorViewCtx)
+      const { $from } = view.state.selection
+      const node = $from.node()
+      if (node.type.name === 'heading') {
+        let level = Number(node.attrs.level) + Number(x)
+        if (level > 6) level = 6
+
+        return { level }
+      }
+      return { level: x }
+    }
+  )
+})
+
+withMeta(wrapInHeadingInputRule, {
+  displayName: 'InputRule<wrapInHeadingInputRule>',
+  group: 'Heading',
+})
+
+/// This command can turn the selected block into heading.
+/// You can pass the level of heading to this command.
+/// By default, the level is 1, which means it will create a `h1` element.
+export const wrapInHeadingCommand = $command('WrapInHeading', (ctx) => {
+  return (level?: number) => {
+    level ??= 1
+
+    if (level < 1) return setBlockType(paragraphSchema.type(ctx))
+
+    return setBlockType(headingSchema.type(ctx), { level })
+  }
+})
+
+withMeta(wrapInHeadingCommand, {
+  displayName: 'Command<wrapInHeadingCommand>',
+  group: 'Heading',
+})
+
+/// This command can downgrade the selected heading.
+/// For example, if you have a `h2` element, and you call this command, you will get a `h1` element.
+/// If the element is already a `h1` element, it will turn it into a `p` element.
+export const downgradeHeadingCommand = $command(
+  'DowngradeHeading',
+  (ctx) => () => (state, dispatch, view) => {
+    const { $from } = state.selection
+    const node = $from.node()
+    if (
+      node.type !== headingSchema.type(ctx) ||
+      !state.selection.empty ||
+      $from.parentOffset !== 0
+    )
+      return false
+
+    const level = node.attrs.level - 1
+    if (!level)
+      return setBlockType(paragraphSchema.type(ctx))(state, dispatch, view)
+
+    dispatch?.(
+      state.tr.setNodeMarkup(state.selection.$from.before(), undefined, {
+        ...node.attrs,
+        level,
+      })
+    )
+    return true
+  }
+)
+
+withMeta(downgradeHeadingCommand, {
+  displayName: 'Command<downgradeHeadingCommand>',
+  group: 'Heading',
+})
+
+/// Keymap for heading node.
+/// - `<Mod-Alt-{1-6}>`: Turn the selected block into `h{1-6}` element.
+/// - `<Delete>/<Backspace>`: Downgrade the selected heading.
+export const headingKeymap = $useKeymap('headingKeymap', {
+  TurnIntoH1: {
+    shortcuts: 'Mod-Alt-1',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 1)
+    },
+  },
+  TurnIntoH2: {
+    shortcuts: 'Mod-Alt-2',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 2)
+    },
+  },
+  TurnIntoH3: {
+    shortcuts: 'Mod-Alt-3',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 3)
+    },
+  },
+  TurnIntoH4: {
+    shortcuts: 'Mod-Alt-4',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 4)
+    },
+  },
+  TurnIntoH5: {
+    shortcuts: 'Mod-Alt-5',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 5)
+    },
+  },
+  TurnIntoH6: {
+    shortcuts: 'Mod-Alt-6',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 6)
+    },
+  },
+  DowngradeHeading: {
+    shortcuts: ['Delete', 'Backspace'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(downgradeHeadingCommand.key)
+    },
+  },
+})
+
+withMeta(headingKeymap.ctx, {
+  displayName: 'KeymapCtx<heading>',
+  group: 'Heading',
+})
+
+withMeta(headingKeymap.shortcuts, {
+  displayName: 'Keymap<heading>',
+  group: 'Heading',
+})

package/src/node/hr.ts

@@ -0,0 +1,87 @@
+import { InputRule } from '@jvs-milkdown/prose/inputrules'
+import { Selection } from '@jvs-milkdown/prose/state'
+import { $command, $inputRule, $nodeAttr, $nodeSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+import { paragraphSchema } from './paragraph'
+
+/// HTML attributes for the hr node.
+export const hrAttr = $nodeAttr('hr')
+
+withMeta(hrAttr, {
+  displayName: 'Attr<hr>',
+  group: 'Hr',
+})
+
+/// Hr node schema.
+export const hrSchema = $nodeSchema('hr', (ctx) => ({
+  group: 'block',
+  parseDOM: [{ tag: 'hr' }],
+  toDOM: (node) => ['hr', ctx.get(hrAttr.key)(node)],
+  parseMarkdown: {
+    match: ({ type }) => type === 'thematicBreak',
+    runner: (state, _, type) => {
+      state.addNode(type)
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'hr',
+    runner: (state) => {
+      state.addNode('thematicBreak')
+    },
+  },
+}))
+
+withMeta(hrSchema.node, {
+  displayName: 'NodeSchema<hr>',
+  group: 'Hr',
+})
+
+withMeta(hrSchema.ctx, {
+  displayName: 'NodeSchemaCtx<hr>',
+  group: 'Hr',
+})
+
+/// Input rule to insert a hr.
+/// For example, `---` will be converted to a hr.
+export const insertHrInputRule = $inputRule(
+  (ctx) =>
+    new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
+      const { tr } = state
+
+      if (match[0]) tr.replaceWith(start - 1, end, hrSchema.type(ctx).create())
+
+      return tr
+    })
+)
+
+withMeta(insertHrInputRule, {
+  displayName: 'InputRule<insertHrInputRule>',
+  group: 'Hr',
+})
+
+/// Command to insert a hr.
+export const insertHrCommand = $command(
+  'InsertHr',
+  (ctx) => () => (state, dispatch) => {
+    if (!dispatch) return true
+
+    const paragraph = paragraphSchema.node.type(ctx).create()
+    const { tr, selection } = state
+    const { from } = selection
+    const node = hrSchema.type(ctx).create()
+    if (!node) return true
+
+    const _tr = tr.replaceSelectionWith(node).insert(from, paragraph)
+    const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true)
+    if (!sel) return true
+
+    dispatch(_tr.setSelection(sel).scrollIntoView())
+    return true
+  }
+)
+
+withMeta(insertHrCommand, {
+  displayName: 'Command<insertHrCommand>',
+  group: 'Hr',
+})

package/src/node/html.ts

@@ -0,0 +1,66 @@
+import { $nodeAttr, $nodeSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+export const htmlAttr = $nodeAttr('html')
+
+withMeta(htmlAttr, {
+  displayName: 'Attr<html>',
+  group: 'Html',
+})
+
+export const htmlSchema = $nodeSchema('html', (ctx) => {
+  return {
+    atom: true,
+    group: 'inline',
+    inline: true,
+    attrs: {
+      value: {
+        default: '',
+        validate: 'string',
+      },
+    },
+    toDOM: (node) => {
+      const span = document.createElement('span')
+      const attr = {
+        ...ctx.get(htmlAttr.key)(node),
+        'data-value': node.attrs.value,
+        'data-type': 'html',
+      }
+      span.textContent = node.attrs.value
+      return ['span', attr, node.attrs.value]
+    },
+    parseDOM: [
+      {
+        tag: 'span[data-type="html"]',
+        getAttrs: (dom) => {
+          return {
+            value: dom.dataset.value ?? '',
+          }
+        },
+      },
+    ],
+    parseMarkdown: {
+      match: ({ type }) => Boolean(type === 'html'),
+      runner: (state, node, type) => {
+        state.addNode(type, { value: node.value as string })
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === 'html',
+      runner: (state, node) => {
+        state.addNode('html', undefined, node.attrs.value)
+      },
+    },
+  }
+})
+
+withMeta(htmlSchema.node, {
+  displayName: 'NodeSchema<html>',
+  group: 'Html',
+})
+
+withMeta(htmlSchema.ctx, {
+  displayName: 'NodeSchemaCtx<html>',
+  group: 'Html',
+})