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

package/src/node/heading.ts

@@ -1,315 +1,206 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { createCmd, createCmdKey, editorViewCtx, getPalette, schemaCtx } from '@milkdown/core'
+import { commandsCtx, editorViewCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
-import { cloneTr } from '@milkdown/prose'
 import { setBlockType } from '@milkdown/prose/commands'
 import { textblockTypeInputRule } from '@milkdown/prose/inputrules'
-import type { Node, NodeType } from '@milkdown/prose/model'
+import type { Node } from '@milkdown/prose/model'
 import { Fragment } from '@milkdown/prose/model'
-import type { EditorState, Transaction } from '@milkdown/prose/state'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import { Decoration, DecorationSet } from '@milkdown/prose/view'
-import type { ThemeUtils } from '@milkdown/utils'
-import { createNode, createShortcut } from '@milkdown/utils'
-
-import { SupportedKeys } from '../supported-keys'
+import { $command, $ctx, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import { paragraphSchema } from './paragraph'
 
 const headingIndex = Array(6)
   .fill(0)
   .map((_, i) => i + 1)
 
-type Keys =
-    | SupportedKeys['H1']
-    | SupportedKeys['H2']
-    | SupportedKeys['H3']
-    | SupportedKeys['H4']
-    | SupportedKeys['H5']
-    | SupportedKeys['H6']
-    | SupportedKeys['DowngradeHeading']
-
-export const TurnIntoHeading = createCmdKey<number>('TurnIntoHeading')
-export const DowngradeHeading = createCmdKey('DowngradeHeading')
-
-export const headingIdPluginKey = new PluginKey('MILKDOWN_HEADING_ID')
-export const headingHashPluginKey = new PluginKey('MILKDOWN_HEADING_HASH')
-
-const createId = (node: Node) =>
+const defaultHeadingIdGenerator = (node: Node) =>
   node.textContent
     .replace(/[\p{P}\p{S}]/gu, '')
     .replace(/\s/g, '-')
     .toLowerCase()
     .trim()
 
-const headingIdPlugin = (ctx: Ctx, type: NodeType, getId: (node: Node) => string): Plugin => {
-  let lock = false
-  const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
-    const tr = state.tr.setMeta('addToHistory', false)
-    let found = false
-    state.doc.descendants((node, pos) => {
-      if (node.type === type && !lock) {
-        if (node.textContent.trim().length === 0)
-          return
-
-        const attrs = node.attrs
-        const id = getId(node)
-
-        if (attrs.id !== id) {
-          found = true
-          tr.setMeta(headingIdPluginKey, true).setNodeMarkup(pos, undefined, {
-            ...attrs,
-            id,
-          })
-        }
-      }
-    })
-    if (found)
-      callback(tr)
-  }
-  return new Plugin({
-    key: headingIdPluginKey,
-    props: {
-      handleDOMEvents: {
-        compositionstart: () => {
-          lock = true
-          return false
-        },
-        compositionend: () => {
-          lock = false
-          const view = ctx.get(editorViewCtx)
-          setTimeout(() => {
-            walkThrough(view.state, tr => view.dispatch(tr))
-          }, 0)
-          return false
-        },
+/// 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')
+
+/// HTML attributes for heading node.
+export const headingAttr = $nodeAttr('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: '',
       },
-    },
-    appendTransaction: (transactions, _, nextState) => {
-      let tr: Transaction | null = null
-
-      if (
-        transactions.every(transaction => !transaction.getMeta(headingIdPluginKey))
-                && transactions.some(transaction => transaction.docChanged)
-      ) {
-        walkThrough(nextState, (t) => {
-          tr = t
-        })
-      }
-
-      return tr
-    },
-    view: (view) => {
-      const doc = view.state.doc
-      let tr = view.state.tr.setMeta('addToHistory', false)
-      doc.descendants((node, pos) => {
-        if (node.type.name === 'heading' && node.attrs.level) {
-          if (!node.attrs.id) {
-            tr = tr.setNodeMarkup(pos, undefined, {
-              ...node.attrs,
-              id: getId(node),
-            })
-          }
-        }
-      })
-      view.dispatch(tr)
-      return {}
-    },
-  })
-}
-
-const headingHashPlugin = (ctx: Ctx, type: NodeType, utils: ThemeUtils): Plugin => {
-  return new Plugin({
-    key: headingHashPluginKey,
-    state: {
-      init: () => {
-        return DecorationSet.empty
+      level: {
+        default: 1,
       },
-      apply: (tr) => {
-        const view = ctx.get(editorViewCtx)
-        if (!view.hasFocus?.() || !view.editable)
-          return DecorationSet.empty
-
-        const { $from } = tr.selection
-        const node = $from.node()
-        if (node.type !== type)
-          return DecorationSet.empty
-
-        const level = node.attrs.level
-        const getHashes = (level: number) => {
-          return Array(level)
-            .fill(0)
-            .map(_ => '#')
-            .join('')
-        }
-        const widget = document.createElement('span')
-        widget.textContent = getHashes(level)
-        widget.contentEditable = 'false'
-        utils.themeManager.onFlush(() => {
-          const style = utils.getStyle(({ css }) => {
-            const palette = getPalette(utils.themeManager)
-            return css`
-                            margin-right: 4px;
-                            color: ${palette('primary')};
-                        `
-          })
-          if (style)
-            widget.className = style
-        })
+    },
+    parseDOM: headingIndex.map(x => ({
+      tag: `h${x}`,
+      getAttrs: (node) => {
+        if (!(node instanceof HTMLElement))
+          throw expectDomTypeError(node)
 
-        const deco = Decoration.widget($from.before() + 1, widget, { side: -1 })
-        return DecorationSet.create(tr.doc, [deco])
+        return { level: x, id: node.id }
       },
-    },
-    props: {
-      handleDOMEvents: {
-        focus: (view) => {
-          const tr = cloneTr(view.state.tr)
-          view.dispatch(tr)
-          return false
+    })),
+    toDOM: (node) => {
+      return [
+        `h${node.attrs.level}`,
+        {
+          ...ctx.get(headingAttr.key)(node),
+          id: node.attrs.id || getId(node),
         },
+        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()
       },
-      decorations(this: Plugin, state) {
-        return this.getState(state)
+    },
+    toMarkdown: {
+      match: node => node.type.name === 'heading',
+      runner: (state, node) => {
+        state.openNode('heading', undefined, { depth: node.attrs.level })
+        const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
+        if (lastIsHardbreak) {
+          const contentArr: Node[] = []
+          node.content.forEach((n, _, i) => {
+            if (i === node.childCount - 1)
+              return
+
+            contentArr.push(n)
+          })
+          state.next(Fragment.fromArray(contentArr))
+        }
+        else {
+          state.next(node.content)
+        }
+        state.closeNode()
       },
     },
+  }
+})
+
+/// 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(), (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 }
   })
-}
-
-export const heading = createNode<Keys, { getId: (node: Node) => string; displayHashtag: boolean }>(
-  (utils, options) => {
-    const id = 'heading'
-
-    const getId = options?.getId ?? createId
-    const displayHashtag = options?.displayHashtag ?? true
+})
 
-    return {
-      id,
-      schema: () => ({
-        content: 'inline*',
-        group: 'block',
-        defining: true,
-        attrs: {
-          id: {
-            default: '',
-          },
-          level: {
-            default: 1,
-          },
-        },
-        parseDOM: headingIndex.map(x => ({
-          tag: `h${x}`,
-          getAttrs: (node) => {
-            if (!(node instanceof HTMLElement))
-              throw expectDomTypeError(node)
+/// 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', () => {
+  return (level?: number) => {
+    level ??= 1
 
-            return { level: x, id: node.id }
-          },
-        })),
-        toDOM: (node) => {
-          return [
-                        `h${node.attrs.level}`,
-                        {
-                          id: node.attrs.id || getId(node),
-                          class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`),
-                        },
-                        0,
-          ]
-        },
-        parseMarkdown: {
-          match: ({ type }) => type === id,
-          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 === id,
-          runner: (state, node) => {
-            state.openNode('heading', undefined, { depth: node.attrs.level })
-            const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
-            if (lastIsHardbreak) {
-              const contentArr: Node[] = []
-              node.content.forEach((n, _, i) => {
-                if (i === node.childCount - 1)
-                  return
+    if (level < 1)
+      return setBlockType(paragraphSchema.type())
 
-                contentArr.push(n)
-              })
-              state.next(Fragment.fromArray(contentArr))
-            }
-            else {
-              state.next(node.content)
-            }
-            state.closeNode()
-          },
-        },
+    return setBlockType(headingSchema.type(), { level })
+  }
+})
+
+/// 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', () => () =>
+  (state, dispatch, view) => {
+    const { $from } = state.selection
+    const node = $from.node()
+    if (node.type !== headingSchema.type() || !state.selection.empty || $from.parentOffset !== 0)
+      return false
+
+    const level = node.attrs.level - 1
+    if (!level)
+      return setBlockType(paragraphSchema.type())(state, dispatch, view)
+
+    dispatch?.(
+      state.tr.setNodeMarkup(state.selection.$from.before(), undefined, {
+        ...node.attrs,
+        level,
       }),
-      inputRules: (type, ctx) =>
-        headingIndex.map(x =>
-          textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), type, () => {
-            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,
-            }
-          }),
-        ),
-      commands: (type, ctx) => [
-        createCmd(TurnIntoHeading, (level = 1) => {
-          if (level < 1)
-            return setBlockType(level === 0 ? ctx.get(schemaCtx).nodes.paragraph || type : type)
-
-          return setBlockType(level === 0 ? ctx.get(schemaCtx).nodes.paragraph || type : type, { level })
-        }),
-        createCmd(DowngradeHeading, () => {
-          return (state, dispatch, view) => {
-            const { $from } = state.selection
-            const node = $from.node()
-            if (node.type !== type || !state.selection.empty || $from.parentOffset !== 0)
-              return false
-
-            const level = node.attrs.level - 1
-            if (!level)
-              return setBlockType(ctx.get(schemaCtx).nodes.paragraph || type)(state, dispatch, view)
-
-            dispatch?.(
-              state.tr.setNodeMarkup(state.selection.$from.before(), undefined, {
-                ...node.attrs,
-                level,
-              }),
-            )
-            return true
-          }
-        }),
-      ],
-      shortcuts: {
-        [SupportedKeys.H1]: createShortcut(TurnIntoHeading, 'Mod-Alt-1', 1),
-        [SupportedKeys.H2]: createShortcut(TurnIntoHeading, 'Mod-Alt-2', 2),
-        [SupportedKeys.H3]: createShortcut(TurnIntoHeading, 'Mod-Alt-3', 3),
-        [SupportedKeys.H4]: createShortcut(TurnIntoHeading, 'Mod-Alt-4', 4),
-        [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
-        [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
-        [SupportedKeys.DowngradeHeading]: createShortcut(DowngradeHeading, ['Backspace', 'Delete']),
-      },
-      prosePlugins: (type, ctx) => {
-        const plugins = [headingIdPlugin(ctx, type, getId)]
-        if (displayHashtag)
-          plugins.push(headingHashPlugin(ctx, type, utils))
+    )
+    return true
+  })
 
-        return plugins
-      },
-    }
+/// 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, 3)
+    },
+  },
+  TurnIntoH5: {
+    shortcuts: 'Mod-Alt-5',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 3)
+    },
+  },
+  TurnIntoH6: {
+    shortcuts: 'Mod-Alt-6',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInHeadingCommand.key, 3)
+    },
+  },
+  DowngradeHeading: {
+    shortcuts: ['Delete', 'Backspace'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(downgradeHeadingCommand.key)
+    },
   },
-)
+})

package/src/node/hr.ts

@@ -1,61 +1,61 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core'
 import { InputRule } from '@milkdown/prose/inputrules'
 import { Selection } from '@milkdown/prose/state'
-import { createNode } from '@milkdown/utils'
-
-const id = 'hr'
-export const InsertHr = createCmdKey<string>('InsertHr')
-export const hr = createNode((utils) => {
-  return {
-    id,
-    schema: () => ({
-      group: 'block',
-      parseDOM: [{ tag: 'hr' }],
-      toDOM: node => ['hr', { class: utils.getClassName(node.attrs, id) }],
-      parseMarkdown: {
-        match: ({ type }) => type === 'thematicBreak',
-        runner: (state, _, type) => {
-          state.addNode(type)
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === id,
-        runner: (state) => {
-          state.addNode('thematicBreak')
-        },
-      },
-    }),
-    inputRules: type => [
-      new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
-        const { tr } = state
-
-        if (match[0])
-          tr.replaceWith(start - 1, end, type.create())
-
-        return tr
-      }),
-    ],
-    commands: (type, ctx) => [
-      createCmd(InsertHr, () => (state, dispatch) => {
-        if (!dispatch)
-          return true
-
-        const paragraph = ctx.get(schemaCtx).node('paragraph')
-        const { tr, selection } = state
-        const { from } = selection
-        const node = type.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
-      }),
-    ],
-  }
+import { $command, $inputRule, $nodeAttr, $nodeSchema } from '@milkdown/utils'
+import { paragraphSchema } from './paragraph'
+
+/// HTML attributes for the hr node.
+export const hrAttr = $nodeAttr('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')
+    },
+  },
+}))
+
+/// Input rule to insert a hr.
+/// For example, `---` will be converted to a hr.
+export const insertHrInputRule = $inputRule(() => new InputRule(
+  /^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
+    const { tr } = state
+
+    if (match[0])
+      tr.replaceWith(start - 1, end, hrSchema.type().create())
+
+    return tr
+  },
+))
+
+/// Command to insert a hr.
+export const insertHrCommand = $command('InsertHr', () => () => (state, dispatch) => {
+  if (!dispatch)
+    return true
+
+  const paragraph = paragraphSchema.node.type().create()
+  const { tr, selection } = state
+  const { from } = selection
+  const node = hrSchema.type().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
 })