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

package/src/node/image.ts

@@ -1,224 +1,128 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { ThemeImageType, ThemeInputChipType } from '@milkdown/core'
-import { commandsCtx, createCmd, createCmdKey } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
 import { findSelectedNodeOfType } from '@milkdown/prose'
 import { InputRule } from '@milkdown/prose/inputrules'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import type { EditorView, NodeView } from '@milkdown/prose/view'
-import { createNode } from '@milkdown/utils'
+import { $command, $inputRule, $nodeAttr, $nodeSchema } from '@milkdown/utils'
 
-export const ModifyImage = createCmdKey<string>('ModifyImage')
-export const InsertImage = createCmdKey<string>('InsertImage')
-const id = 'image'
-export interface ImageOptions {
-  isBlock: boolean
-  placeholder: string
-  input: {
-    placeholder: string
-    buttonText?: string
-  }
-}
-const key = new PluginKey('MILKDOWN_IMAGE_INPUT')
+/// HTML attributes for image node.
+export const imageAttr = $nodeAttr('image')
 
-export const image = createNode<string, ImageOptions>((utils, options) => {
+/// Schema for image node.
+export const imageSchema = $nodeSchema('image', (ctx) => {
   return {
-    id: 'image',
-    schema: () => ({
-      inline: true,
-      group: 'inline',
-      selectable: true,
-      draggable: true,
-      marks: '',
-      atom: true,
-      defining: true,
-      isolating: true,
-      attrs: {
-        src: { default: '' },
-        alt: { default: '' },
-        title: { default: '' },
-      },
-      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') || '',
-            }
-          },
+    inline: true,
+    group: 'inline',
+    selectable: true,
+    draggable: true,
+    marks: '',
+    atom: true,
+    defining: true,
+    isolating: true,
+    attrs: {
+      src: { default: '' },
+      alt: { default: '' },
+      title: { default: '' },
+    },
+    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',
-          {
-            ...node.attrs,
-            class: utils.getClassName(node.attrs, id),
-          },
-        ]
       },
-      parseMarkdown: {
-        match: ({ type }) => type === id,
-        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,
-          })
-        },
+    ],
+    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 === id,
-        runner: (state, node) => {
-          state.addNode('image', undefined, undefined, {
-            title: node.attrs.title,
-            url: node.attrs.src,
-            alt: node.attrs.alt,
-          })
-        },
+    },
+    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,
+        })
       },
-    }),
-    commands: type => [
-      createCmd(InsertImage, (src = '') => (state, dispatch) => {
-        if (!dispatch)
-          return true
-        const { tr } = state
-        const node = type.create({ src })
-        if (!node)
-          return true
-
-        const _tr = tr.replaceSelectionWith(node)
-        dispatch(_tr.scrollIntoView())
-        return true
-      }),
-      createCmd(ModifyImage, (src = '') => (state, dispatch) => {
-        const node = findSelectedNodeOfType(state.selection, type)
-        if (!node)
-          return false
-
-        const { tr } = state
-        dispatch?.(
-          tr.setNodeMarkup(node.pos, undefined, { ...node.node.attrs, loading: true, src }).scrollIntoView(),
-        )
-
-        return true
-      }),
-    ],
-    inputRules: type => [
-      new InputRule(
-        /!\[(?<alt>.*?)]\((?<filename>.*?)\s*(?="|\))"?(?<title>[^"]+)?"?\)/,
-        (state, match, start, end) => {
-          const [okay, alt, src = '', title] = match
-          const { tr } = state
-          if (okay)
-            tr.replaceWith(start, end, type.create({ src, alt, title }))
-
-          return tr
-        },
-      ),
-    ],
-    view: () => (node) => {
-      let currNode = node
-
-      const placeholder = options?.placeholder ?? 'Add an Image'
-      const isBlock = options?.isBlock ?? false
-      const renderer = utils.themeManager.get<ThemeImageType>('image', {
-        placeholder,
-        isBlock,
-      })
-
-      if (!renderer)
-        return {} as NodeView
-
-      const { dom, onUpdate } = renderer
-      onUpdate(currNode)
-
-      return {
-        dom,
-        update: (updatedNode) => {
-          if (updatedNode.type.name !== id)
-            return false
-
-          currNode = updatedNode
-          onUpdate(currNode)
-
-          return true
-        },
-        selectNode: () => {
-          dom.classList.add('ProseMirror-selectednode')
-        },
-        deselectNode: () => {
-          dom.classList.remove('ProseMirror-selectednode')
-        },
-      }
     },
-    prosePlugins: (type, ctx) => {
-      return [
-        new Plugin({
-          key,
-          view: (editorView) => {
-            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
-              placeholder: options?.input?.placeholder ?? 'Input Image Link',
-              buttonText: options?.input?.buttonText,
-              onUpdate: (value) => {
-                ctx.get(commandsCtx).call(ModifyImage, value)
-              },
-            })
-            if (!inputChipRenderer)
-              return {}
-            const shouldDisplay = (view: EditorView) => {
-              return Boolean(
-                view.hasFocus() && type && findSelectedNodeOfType(view.state.selection, type),
-              )
-            }
-            const getCurrentLink = (view: EditorView) => {
-              const result = findSelectedNodeOfType(view.state.selection, type)
-              if (!result)
-                return
-
-              const value = result.node.attrs.src
-              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
+/// @internal
+export type UpdateImageCommandPayload = {
+  src?: string
+  title?: string
+  alt?: string
+}
 
-                renderByView(view)
-              },
-              destroy: () => {
-                inputChipRenderer.destroy()
-              },
-            }
-          },
-        }),
-      ]
-    },
-  }
+/// 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', () => (payload: UpdateImageCommandPayload = {}) =>
+  (state, dispatch) => {
+    if (!dispatch)
+      return true
+
+    const { src = '', alt = '', title = '' } = payload
+
+    const node = imageSchema.type().create({ src, alt, title })
+    if (!node)
+      return true
+
+    dispatch(state.tr.replaceSelectionWith(node).scrollIntoView())
+    return true
+  })
+
+/// 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', () => (payload: UpdateImageCommandPayload = {}) => (state, dispatch) => {
+  const nodeWithPos = findSelectedNodeOfType(state.selection, imageSchema.type())
+  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
 })
+
+/// 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(() => 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().create({ src, alt, title }))
+
+    return null
+  },
+))

package/src/node/index.ts

@@ -1,43 +1,14 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { AtomPlugin } from '@milkdown/utils'
 
-import { blockquote } from './blockquote'
-import { bulletList } from './bullet-list'
-import { codeFence } from './code-fence'
-import { doc } from './doc'
-import { hardbreak } from './hardbreak'
-import { heading } from './heading'
-import { hr } from './hr'
-import { image } from './image'
-import { listItem } from './list-item'
-import { orderedList } from './ordered-list'
-import { paragraph } from './paragraph'
-import { text } from './text'
-
-export const nodes: AtomPlugin[] = [
-  doc(),
-  paragraph(),
-  hardbreak(),
-  blockquote(),
-  codeFence(),
-  bulletList(),
-  orderedList(),
-  listItem(),
-  heading(),
-  hr(),
-  image(),
-  text(),
-]
-
-export * from './blockquote'
-export * from './bullet-list'
-export * from './code-fence'
 export * from './doc'
-export * from './hardbreak'
 export * from './heading'
-export * from './hr'
+export * from './blockquote'
+export * from './code-block'
 export * from './image'
-export * from './list-item'
+export * from './hardbreak'
+export * from './hr'
+export * from './bullet-list'
 export * from './ordered-list'
+export * from './list-item'
 export * from './paragraph'
 export * from './text'

package/src/node/list-item.ts

@@ -1,157 +1,141 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
-import { getNodeFromSchema } from '@milkdown/prose'
-import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import type { NodeType } from '@milkdown/prose/model'
 import { liftListItem, sinkListItem, splitListItem } from '@milkdown/prose/schema-list'
-import type { EditorState, Transaction } from '@milkdown/prose/state'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import { createNode, createShortcut } from '@milkdown/utils'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for list item node.
+export const listItemAttr = $nodeAttr('listItem')
 
-type Keys = SupportedKeys['SinkListItem'] | SupportedKeys['LiftListItem'] | SupportedKeys['NextListItem']
-
-const id = 'list_item'
-
-export const SplitListItem = createCmdKey('SplitListItem')
-export const SinkListItem = createCmdKey('SinkListItem')
-export const LiftListItem = createCmdKey('LiftListItem')
-
-const keepListOrderPluginKey = new PluginKey('MILKDOWN_KEEP_LIST_ORDER')
-
-const createKeepListOrderPlugin = (type: NodeType) => {
-  const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
-    const orderedListType = getNodeFromSchema('ordered_list', state.schema)
-    let tr = state.tr
-    state.doc.descendants((node, pos, parent, index) => {
-      if (node.type === type && parent?.type === orderedListType) {
-        let changed = false
-        const attrs = { ...node.attrs }
-        if (node.attrs.listType !== 'ordered') {
-          attrs.listType = 'ordered'
-          changed = true
-        }
-
-        const base = parent?.maybeChild(0)
-        if (base && base.type === type && base.attrs.listType === 'ordered') {
-          attrs.label = `${index + 1}.`
-          changed = true
-        }
-
-        if (node.attrs.label === '•') {
-          attrs.label = `${index + 1}.`
-          changed = true
-        }
-
-        if (changed)
-          tr = tr.setNodeMarkup(pos, undefined, attrs)
-      }
-    })
-    callback(tr)
-  }
-  return new Plugin({
-    key: keepListOrderPluginKey,
-    appendTransaction: (transactions, _oldState, nextState) => {
-      let tr: Transaction | null = null
-      if (transactions.some(transaction => transaction.docChanged)) {
-        walkThrough(nextState, (t) => {
-          tr = t
-        })
-      }
-
-      return tr
+/// Schema for list item node.
+export const listItemSchema = $nodeSchema('list_item', ctx => ({
+  group: 'listItem',
+  content: 'paragraph block*',
+  attrs: {
+    label: {
+      default: '•',
+    },
+    listType: {
+      default: 'bullet',
+    },
+    spread: {
+      default: 'true',
     },
-  })
-}
+  },
+  defining: true,
+  parseDOM: [
+    {
+      tag: 'li',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement))
+          throw expectDomTypeError(dom)
 
-export const listItem = createNode<Keys>(utils => ({
-  id,
-  schema: () => ({
-    group: 'listItem',
-    content: 'paragraph block*',
-    attrs: {
-      label: {
-        default: '•',
-      },
-      listType: {
-        default: 'bullet',
-      },
-      spread: {
-        default: 'true',
+        return {
+          label: dom.dataset.label,
+          listType: dom.dataset['list-type'],
+          spread: dom.dataset.spread,
+        }
       },
     },
-    defining: true,
-    parseDOM: [
-      {
-        tag: 'li.list-item',
-        getAttrs: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw expectDomTypeError(dom)
+  ],
+  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 === 'true' })
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
 
-          return {
-            label: dom.dataset.label,
-            listType: dom.dataset['list-type'],
-            spread: dom.dataset.spread,
-          }
-        },
-        contentElement: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw expectDomTypeError(dom)
+/// 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', () => () => sinkListItem(listItemSchema.type()))
 
-          const body = dom.querySelector<HTMLElement>('.list-item_body')
-          if (!body)
-            return dom
+/// 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('SplitListItem', () => () => liftListItem(listItemSchema.type()))
 
-          return body
-        },
-      },
-      { tag: 'li' },
-    ],
-    toDOM: (node) => {
-      return [
-        'li',
-        {
-          'class': utils.getClassName(node.attrs, 'list-item'),
-          'data-label': node.attrs.label,
-          'data-list-type': node.attrs.listType,
-          'data-spread': node.attrs.spread,
-        },
-        ['div', { class: utils.getClassName(node.attrs, 'list-item_label') }, node.attrs.label],
-        ['div', { class: utils.getClassName(node.attrs, 'list-item_body') }, 0],
-      ]
+/// 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', () => () => splitListItem(listItemSchema.type()))
+
+/// 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)
     },
-    parseMarkdown: {
-      match: ({ type, checked }) => type === 'listItem' && checked === null,
-      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()
-      },
+  },
+  SinkListItem: {
+    shortcuts: ['Tab', 'Mod-]'],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(sinkListItemCommand.key)
     },
-    toMarkdown: {
-      match: node => node.type.name === id,
-      runner: (state, node) => {
-        state.openNode('listItem', undefined, { spread: node.attrs.spread === 'true' })
-        state.next(node.content)
-        state.closeNode()
-      },
+  },
+  LiftListItem: {
+    shortcuts: ['Shift-Tab', 'Mod-['],
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(liftListItemCommand.key)
     },
-  }),
-  inputRules: nodeType => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
-  commands: nodeType => [
-    createCmd(SplitListItem, () => splitListItem(nodeType)),
-    createCmd(SinkListItem, () => sinkListItem(nodeType)),
-    createCmd(LiftListItem, () => liftListItem(nodeType)),
-  ],
-  shortcuts: {
-    [SupportedKeys.NextListItem]: createShortcut(SplitListItem, 'Enter'),
-    [SupportedKeys.SinkListItem]: createShortcut(SinkListItem, 'Mod-]'),
-    [SupportedKeys.LiftListItem]: createShortcut(LiftListItem, 'Mod-['),
   },
-  prosePlugins: nodeType => [createKeepListOrderPlugin(nodeType)],
-}))
+})