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

package/src/composed/inputrules.ts

@@ -0,0 +1,13 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { MilkdownPlugin } from '@milkdown/ctx'
+import { createCodeBlockInputRule, insertHrInputRule, wrapInBlockquoteInputRule, wrapInBulletListInputRule, wrapInHeadingInputRule, wrapInOrderedListInputRule } from '../node'
+
+/// @internal
+export const inputrules: MilkdownPlugin[] = [
+  wrapInBlockquoteInputRule,
+  wrapInBulletListInputRule,
+  wrapInOrderedListInputRule,
+  createCodeBlockInputRule,
+  insertHrInputRule,
+  wrapInHeadingInputRule,
+].flat()

package/src/composed/keymap.ts

@@ -0,0 +1,20 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { MilkdownPlugin } from '@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,23 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import type { MilkdownPlugin } from '@milkdown/ctx'
+import { hardbreakClearMarkPlugin, hardbreakFilterNodes, hardbreakFilterPlugin, inlineNodesCursorPlugin, inlineSyncConfig, inlineSyncPlugin, remarkAddOrderInListPlugin, remarkInlineLinkPlugin, remarkLineBreak, syncHeadingIdPlugin, syncListOrderPlugin } from '../plugin'
+
+/// @internal
+export const plugins: MilkdownPlugin[] = [
+  inlineSyncConfig,
+  inlineSyncPlugin,
+
+  hardbreakClearMarkPlugin,
+  hardbreakFilterNodes,
+  hardbreakFilterPlugin,
+
+  inlineNodesCursorPlugin,
+
+  remarkAddOrderInListPlugin,
+  remarkInlineLinkPlugin,
+  remarkLineBreak,
+
+  syncHeadingIdPlugin,
+  syncListOrderPlugin,
+]

package/src/composed/schema.ts

@@ -0,0 +1,55 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import type { MilkdownPlugin } from '@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, 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,
+
+  textSchema,
+].flat()

package/src/index.ts

@@ -1,57 +1,11 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { AtomList } from '@milkdown/utils'
 
-import { ModifyLink, ToggleBold, ToggleInlineCode, ToggleItalic, ToggleLink, marks } from './mark'
-import {
-  InsertHardbreak,
-  InsertHr,
-  InsertImage,
-  LiftListItem,
-  ModifyImage,
-  SinkListItem,
-  SplitListItem,
-  TurnIntoCodeFence,
-  TurnIntoHeading,
-  TurnIntoText,
-  WrapInBlockquote,
-  WrapInBulletList,
-  WrapInOrderedList,
-  nodes,
-} from './node'
-import { commonmarkPlugins } from './plugin'
+import { commands, inputrules, keymap, plugins, schema } from './composed'
 
-export * from './mark'
 export * from './node'
-export { inlineSyncConfigCtx } from './plugin'
-export * from './supported-keys'
-
-export const commonmarkNodes = AtomList.create([...nodes, ...marks])
-export { commonmarkPlugins }
-export const commonmark = AtomList.create([...commonmarkPlugins, ...commonmarkNodes])
-
-export const commands = {
-  ToggleInlineCode,
-  ToggleItalic,
-  ToggleLink,
-  ToggleBold,
-
-  ModifyLink,
-  ModifyImage,
-
-  WrapInBlockquote,
-  WrapInBulletList,
-  WrapInOrderedList,
-
-  TurnIntoCodeFence,
-  TurnIntoHeading,
-  TurnIntoText,
-
-  InsertHardbreak,
-  InsertHr,
-  InsertImage,
+export * from './mark'
+export * from './plugin'
+export * from './composed'
 
-  SplitListItem,
-  SinkListItem,
-  LiftListItem,
-} as const
-export type Commands = typeof commands
+/// The commonmark preset, includes all the plugins.
+export const commonmark = [schema, inputrules, commands, keymap, plugins].flat()

package/src/mark/emphasis.ts

@@ -0,0 +1,47 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { commandsCtx } from '@milkdown/core'
+import { toggleMark } from '@milkdown/prose/commands'
+import { $command, $markAttr, $markSchema, $useKeymap } from '@milkdown/utils'
+
+/// HTML attributes for the emphasis mark.
+export const emphasisAttr = $markAttr('emphasis')
+
+/// Emphasis mark schema.
+export const emphasisSchema = $markSchema('emphasis', ctx => ({
+  inclusive: false,
+  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)
+      state.next(node.children)
+      state.closeMark(markType)
+    },
+  },
+  toMarkdown: {
+    match: mark => mark.type.name === 'emphasis',
+    runner: (state, mark) => {
+      state.withMark(mark, 'emphasis')
+    },
+  },
+}))
+
+/// A command to toggle the emphasis mark.
+export const toggleEmphasisCommand = $command('ToggleEmphasis', () => () => toggleMark(emphasisSchema.type()))
+
+/// 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)
+    },
+  },
+})

package/src/mark/index.ts

@@ -1,12 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { codeInline } from './code-inline'
-import { em } from './em'
-import { link } from './link'
-import { strong } from './strong'
-
-export const marks = [codeInline(), em(), strong(), link()]
-
-export * from './code-inline'
-export * from './em'
-export * from './link'
+export * from './emphasis'
 export * from './strong'
+export * from './inline-code'
+export * from './link'

package/src/mark/inline-code.ts

@@ -0,0 +1,70 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { commandsCtx } from '@milkdown/core'
+import type { MarkType } from '@milkdown/prose/model'
+import { $command, $markAttr, $markSchema, $useKeymap } from '@milkdown/utils'
+
+/// HTML attributes for the inlineCode mark.
+export const inlineCodeAttr = $markAttr('inlineCode')
+
+/// InlineCode mark schema.
+export const inlineCodeSchema = $markSchema('inlineCode', ctx => ({
+  priority: 100,
+  code: true,
+  inclusive: false,
+  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 || '')
+    },
+  },
+}))
+
+/// A command to toggle the inlineCode mark.
+export const toggleInlineCodeCommand = $command('ToggleInlineCode', () => () => (state, dispatch) => {
+  const { selection, tr } = state
+  if (selection.empty)
+    return false
+  const { from, to } = selection
+
+  const has = state.doc.rangeHasMark(from, to, inlineCodeSchema.type())
+  // remove exists inlineCode mark if have
+  if (has) {
+    dispatch?.(tr.removeMark(from, to, inlineCodeSchema.type()))
+    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().create()))
+  return true
+})
+
+/// 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)
+    },
+  },
+})

package/src/mark/link.ts

@@ -1,253 +1,102 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { ThemeInputChipType } from '@milkdown/core'
-import { commandsCtx, createCmd, createCmdKey } from '@milkdown/core'
-import { expectDomTypeError, missingRootElement } from '@milkdown/exception'
-import { calculateTextPosition } from '@milkdown/prose'
+import { expectDomTypeError } from '@milkdown/exception'
 import { toggleMark } from '@milkdown/prose/commands'
 import type { Node as ProseNode } from '@milkdown/prose/model'
-import { NodeSelection, Plugin, PluginKey, TextSelection } from '@milkdown/prose/state'
-import type { EditorView } from '@milkdown/prose/view'
-import { createMark } from '@milkdown/utils'
-
-const key = new PluginKey('MILKDOWN_LINK_INPUT')
-
-export const ToggleLink = createCmdKey<string>('ToggleLink')
-export const ModifyLink = createCmdKey<string>('ModifyLink')
-const id = 'link'
-export interface LinkOptions {
-  input: {
-    placeholder?: string
-    buttonText?: string
-    displayWhenSelected?: boolean
-  }
-}
-export const link = createMark<string, LinkOptions>((utils, options) => {
-  return {
-    id,
-    schema: () => ({
-      attrs: {
-        href: {},
-        title: { default: 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', { ...mark.attrs, class: utils.getClassName(mark.attrs, id) }],
-      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 === id,
-        runner: (state, mark) => {
-          state.withMark(mark, 'link', undefined, {
-            title: mark.attrs.title,
-            url: mark.attrs.href,
-          })
-        },
+import { TextSelection } from '@milkdown/prose/state'
+import { $command, $markAttr, $markSchema } from '@milkdown/utils'
+
+/// HTML attributes for the link mark.
+export const linkAttr = $markAttr('link')
+
+/// Link mark schema.
+export const linkSchema = $markSchema('link', ctx => ({
+  attrs: {
+    href: {},
+    title: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: 'a[href]',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement))
+          throw expectDomTypeError(dom)
+
+        return { href: dom.getAttribute('href'), title: dom.getAttribute('title') }
       },
-    }),
-    commands: markType => [
-      createCmd(ToggleLink, (href = '') => toggleMark(markType, { href })),
-      createCmd(ModifyLink, (href = '') => (state, dispatch) => {
-        if (!dispatch)
-          return false
-
-        const { marks } = state.schema
-
-        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 (marks.link?.isInSet(n.marks)) {
-            node = n
-            pos = p
-            return false
-          }
-
-          return undefined
-        })
-        if (!node)
-          return false
-
-        const mark = node.marks.find(({ type }) => type === markType)
-        if (!mark)
-          return false
-
-        const start = pos
-        const end = pos + node.nodeSize
-        const { tr } = state
-        const linkMark = marks.link?.create({ ...mark.attrs, href })
-        if (!linkMark)
-          return false
-        dispatch(
-          tr
-            .removeMark(start, end, mark)
-            .addMark(start, end, linkMark)
-            .setSelection(new TextSelection(tr.selection.$anchor))
-            .scrollIntoView(),
-        )
-
-        return true
-      }),
-    ],
-    prosePlugins: (type, ctx) => {
-      let renderOnTop = false
-      return [
-        new Plugin({
-          key,
-          view: (editorView) => {
-            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
-              placeholder: options?.input?.placeholder ?? 'Input Web Link',
-              buttonText: options?.input?.buttonText,
-              onUpdate: (value) => {
-                ctx.get(commandsCtx).call(ModifyLink, value)
-              },
-              calculatePosition: (view, input) => {
-                calculateTextPosition(view, input, (start, end, target, parent) => {
-                  const $editor = view.dom.parentElement
-                  if (!$editor)
-                    throw missingRootElement()
-
-                  const selectionWidth = end.left - start.left
-                  let left = start.left - parent.left - (target.width - selectionWidth) / 2
-                  let top = start.bottom - parent.top + 14 + $editor.scrollTop
-
-                  if (renderOnTop)
-                    top = start.top - parent.top - target.height - 14 + $editor.scrollTop
-
-                  if (left < 0)
-                    left = 0
-
-                  const maxLeft = $editor.clientWidth - (target.width + 4)
-                  if (left > maxLeft)
-                    left = maxLeft
-
-                  return [top, left]
-                })
-              },
-            })
-            if (!inputChipRenderer)
-              return {}
-            const shouldDisplay = (view: EditorView) => {
-              const { selection, doc } = view.state
-              const { from, to } = selection
-
-              if (!view.hasFocus())
-                return false
-
-              if (
-                selection instanceof TextSelection
-                                && to < doc.content.size
-                                && from < doc.content.size
-                                && doc.rangeHasMark(from, from === to ? to + 1 : to, type)
-              ) {
-                let shouldDisplay = selection.empty
-                if (options?.input?.displayWhenSelected && !shouldDisplay) {
-                  doc.nodesBetween(from, from === to ? to + 1 : to, (node, pos) => {
-                    if (
-                      node.marks.some(
-                        mark =>
-                          mark.type === type && from >= pos && to <= pos + node.nodeSize,
-                      )
-                    ) {
-                      shouldDisplay = true
-                      return false
-                    }
-
-                    return undefined
-                  })
-                }
-                if (shouldDisplay) {
-                  renderOnTop = false
-                  return true
-                }
-              }
-
-              if (selection instanceof NodeSelection) {
-                const { node } = selection
-                if (
-                  node.type.name === 'image'
-                                    && node.marks.findIndex(mark => mark.type.name === id) > -1
-                ) {
-                  renderOnTop = true
-                  return true
-                }
-              }
-
-              return false
-            }
-            const getCurrentLink = (view: EditorView) => {
-              const { selection } = view.state
-              let node: ProseNode | undefined
-              const { from, to } = selection
-              view.state.doc.nodesBetween(from, from === to ? to + 1 : to, (n) => {
-                if (type.isInSet(n.marks)) {
-                  node = n
-                  return false
-                }
-
-                return undefined
-              })
-              if (!node)
-                return
-
-              const mark = node.marks.find(m => m.type === type)
-              if (!mark)
-                return
-
-              const value = mark.attrs.href
-              return value
-            }
-            const renderByView = (view: EditorView) => {
-              if (!view.editable)
-                return
-
-              const display = shouldDisplay(view)
-              if (display) {
-                inputChipRenderer.show(view)
-                inputChipRenderer.update(getCurrentLink(view))
-              }
-              else {
-                inputChipRenderer.hide()
-              }
-            }
-            inputChipRenderer.init(editorView)
-            renderByView(editorView)
-
-            return {
-              update: (view, prevState) => {
-                const isEqualSelection
-                                    = prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection)
-                if (isEqualSelection)
-                  return
-
-                requestAnimationFrame(() => {
-                  renderByView(view)
-                })
-              },
-              destroy: () => {
-                inputChipRenderer.destroy()
-              },
-            }
-          },
-        }),
-      ]
     },
-  }
+  ],
+  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,
+      })
+    },
+  },
+}))
+
+/// @internal
+export type 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', () => (payload: UpdateLinkCommandPayload = {}) => toggleMark(linkSchema.type(), payload))
+
+/// A command to update the link mark.
+/// You can pass the `href` and `title` to update the link.
+export const updateLinkCommand = $command('UpdateLink', () => (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().isInSet(n.marks)) {
+      node = n
+      pos = p
+      return false
+    }
+
+    return undefined
+  })
+
+  if (!node)
+    return false
+
+  const mark = node.marks.find(({ type }) => type === linkSchema.type())
+  if (!mark)
+    return false
+
+  const start = pos
+  const end = pos + node.nodeSize
+  const { tr } = state
+  const linkMark = linkSchema.type().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
 })