@milkdown/preset-commonmark 7.3.1 → 7.3.3

package/src/plugin/inline-sync-plugin/config.ts

@@ -1,78 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/ctx'
-import type { Node, NodeType } from '@milkdown/prose/model'
-import type { Transaction } from '@milkdown/prose/state'
-import { $ctx } from '@milkdown/utils'
-
-import { withMeta } from '../../__internal__'
-import { swap } from './utils'
-
-/// @internal
-export type ShouldSyncNode = (context: {
-  prevNode: Node
-  nextNode: Node
-  ctx: Ctx
-  tr: Transaction
-  text: string
-}) => boolean
-
-/// @internal
-export interface SyncNodePlaceholder {
-  hole: string
-  punctuation: string
-  char: string
-}
-
-/// @internal
-export interface InlineSyncConfig {
-  placeholderConfig: SyncNodePlaceholder
-  shouldSyncNode: ShouldSyncNode
-  globalNodes: Array<NodeType | string>
-  movePlaceholder: (placeholderToMove: string, text: string) => string
-}
-
-/// @internal
-export const defaultConfig: InlineSyncConfig = {
-  placeholderConfig: {
-    hole: '∅',
-    punctuation: '⁂',
-    char: '∴',
-  },
-  globalNodes: ['footnote_definition'],
-  shouldSyncNode: ({ prevNode, nextNode }) =>
-    prevNode.inlineContent
-        && nextNode
-        // if node type changes, do not sync
-        && prevNode.type === nextNode.type
-        // if two node fully equal, we don't modify them
-        && !prevNode.eq(nextNode),
-  movePlaceholder: (placeholderToMove: string, text: string) => {
-    const symbolsNeedToMove = ['*', '_']
-
-    let index = text.indexOf(placeholderToMove)
-    while (symbolsNeedToMove.includes(text[index - 1] || '') && symbolsNeedToMove.includes(text[index + 1] || '')) {
-      text = swap(text, index, index + 1)
-      index = index + 1
-    }
-
-    return text
-  },
-}
-
-/// A slice that contains the inline sync config.
-/// You can set value to this slice to change the config.
-///
-/// ```typescript
-/// ctx.update(inlineSyncConfigCtx, (prevCfg) => ({
-///   ...prevCfg,
-///   // your config
-/// }));
-/// ```
-///
-/// You can find the default config [here](https://github.com/Milkdown/milkdown/blob/main/packages/preset-commonmark/src/plugin/inline-sync-plugin/config.ts).
-export const inlineSyncConfig = $ctx<InlineSyncConfig, 'inlineSyncConfig'>(defaultConfig, 'inlineSyncConfig')
-
-withMeta(inlineSyncConfig, {
-  displayName: 'Ctx<inlineSyncConfig>',
-  group: 'Prose',
-})

package/src/plugin/inline-sync-plugin/context.ts

@@ -1,121 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/ctx'
-import { parserCtx, serializerCtx } from '@milkdown/core'
-import type { Node } from '@milkdown/prose/model'
-import type { EditorState } from '@milkdown/prose/state'
-import { pipe } from '@milkdown/utils'
-
-import { inlineSyncConfig } from './config'
-import { calculatePlaceholder, keepLink, mergeSlash, replacePunctuation } from './utils'
-import { asterisk, asteriskHolder, underline, underlineHolder } from './regexp'
-
-export interface InlineSyncContext {
-  text: string
-  prevNode: Node
-  nextNode: Node
-  placeholder: string
-}
-
-const getNodeFromSelection = (state: EditorState) => {
-  return state.selection.$from.node()
-}
-
-const getMarkdown = (ctx: Ctx, state: EditorState, node: Node, globalNode: Node[]) => {
-  const serializer = ctx.get(serializerCtx)
-  const doc = state.schema.topNodeType.create(undefined, [node, ...globalNode])
-
-  return serializer(doc)
-}
-
-const addPlaceholder = (ctx: Ctx, markdown: string) => {
-  const config = ctx.get(inlineSyncConfig.key)
-  const holePlaceholder = config.placeholderConfig.hole
-
-  const [firstLine = '', ...rest] = markdown.split('\n\n')
-
-  const movePlaceholder = (text: string) => config.movePlaceholder(holePlaceholder, text)
-
-  const handleText = pipe(replacePunctuation(holePlaceholder), movePlaceholder, keepLink, mergeSlash)
-
-  let text = handleText(firstLine)
-  const placeholder = calculatePlaceholder(config.placeholderConfig)(text)
-
-  text = text.replace(holePlaceholder, placeholder)
-
-  text = [text, ...rest].join('\n\n')
-
-  return [text, placeholder] as [markdown: string, placeholder: string]
-}
-
-const getNewNode = (ctx: Ctx, text: string) => {
-  const parser = ctx.get(parserCtx)
-  const parsed = parser(text)
-
-  if (!parsed)
-    return null
-
-  return parsed.firstChild
-}
-
-const collectGlobalNodes = (ctx: Ctx, state: EditorState) => {
-  const { globalNodes } = ctx.get(inlineSyncConfig.key)
-  const nodes: Node[] = []
-
-  state.doc.descendants((node) => {
-    if (globalNodes.includes(node.type.name) || globalNodes.includes(node.type)) {
-      nodes.push(node)
-      return false
-    }
-
-    return undefined
-  })
-
-  return nodes
-}
-
-const removeGlobalFromText = (text: string) => text.split('\n\n')[0] || ''
-
-const onlyHTML = (node: Node) => {
-  return node.childCount === 1 && node.child(0).type.name === 'html'
-}
-
-export const getContextByState = (ctx: Ctx, state: EditorState): InlineSyncContext | null => {
-  try {
-    const globalNode = collectGlobalNodes(ctx, state)
-    const node = getNodeFromSelection(state)
-
-    const markdown = getMarkdown(ctx, state, node, globalNode)
-    const [text, placeholder] = addPlaceholder(ctx, markdown)
-
-    const newNode = getNewNode(ctx, text)
-
-    if (!newNode || node.type !== newNode.type || onlyHTML(newNode))
-      return null
-
-    // @ts-expect-error hijack the node attribute
-    newNode.attrs = { ...node.attrs }
-
-    newNode.descendants((node) => {
-      const marks = node.marks
-      const link = marks.find(mark => mark.type.name === 'link')
-      if (link && node.text?.includes(placeholder) && link.attrs.href.includes(placeholder)) {
-        // @ts-expect-error hijack the mark attribute
-        link.attrs.href = link.attrs.href.replace(placeholder, '')
-      }
-      if (node.text?.includes(asteriskHolder) || node.text?.includes(underlineHolder)) {
-        // @ts-expect-error hijack the attribute
-        node.text = node.text.replaceAll(asteriskHolder, asterisk).replaceAll(underlineHolder, underline)
-      }
-    })
-
-    return {
-      text: removeGlobalFromText(text),
-      prevNode: node,
-      nextNode: newNode,
-      placeholder,
-    }
-  }
-  catch {
-    return null
-  }
-}

package/src/plugin/inline-sync-plugin/index.ts

@@ -1,4 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export * from './config'
-export * from './inline-sync-plugin'

package/src/plugin/inline-sync-plugin/inline-sync-plugin.ts

@@ -1,72 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/ctx'
-import { editorViewCtx } from '@milkdown/core'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import { $prose } from '@milkdown/utils'
-
-import { withMeta } from '../../__internal__'
-import { inlineSyncConfig } from './config'
-import { getContextByState } from './context'
-import { runReplacer } from './replacer'
-
-/// This plugin is used to sync the inline mark.
-/// It will create and remove marks automatically according to the user input.
-///
-/// When users type something, the plugin will transform the line (for better performance) to real markdown AST by serializer
-/// and render the AST to dom by parser, thus the input texts can be displayed correctly.
-export const inlineSyncPlugin = $prose((ctx: Ctx) => {
-  let requestId: number | null = null
-  const inlineSyncPluginKey = new PluginKey('MILKDOWN_INLINE_SYNC')
-
-  return new Plugin<null>({
-    key: inlineSyncPluginKey,
-    state: {
-      init: () => {
-        return null
-      },
-      apply: (tr, _value, _oldState, newState) => {
-        const view = ctx.get(editorViewCtx)
-        if (!view.hasFocus?.() || !view.editable)
-          return null
-
-        if (!tr.docChanged)
-          return null
-
-        const meta = tr.getMeta(inlineSyncPluginKey)
-        if (meta)
-          return null
-
-        const context = getContextByState(ctx, newState)
-        if (!context)
-          return null
-
-        if (requestId) {
-          cancelAnimationFrame(requestId)
-          requestId = null
-        }
-
-        const { prevNode, nextNode, text } = context
-
-        const { shouldSyncNode } = ctx.get(inlineSyncConfig.key)
-
-        if (!shouldSyncNode({ prevNode, nextNode, ctx, tr, text }))
-          return null
-
-        requestId = requestAnimationFrame(() => {
-          requestId = null
-
-          const { dispatch, state } = ctx.get(editorViewCtx)
-
-          runReplacer(ctx, inlineSyncPluginKey, state, dispatch, prevNode.attrs)
-        })
-
-        return null
-      },
-    },
-  })
-})
-
-withMeta(inlineSyncPlugin, {
-  displayName: 'Prose<inlineSyncPlugin>',
-  group: 'Prose',
-})

package/src/plugin/inline-sync-plugin/regexp.ts

@@ -1,15 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export const linkRegexp = /\[([^\]]+)]\([^\s\]]+\)/
-
-export const keepLinkRegexp = /\[(?<span>((www|https:\/\/|http:\/\/)[^\s\]]+))]\((?<url>[^\s\]]+)\)/
-
-export const punctuationRegexp = (holePlaceholder: string) =>
-  new RegExp(`\\\\(?=[^\\w\\s${holePlaceholder}\\\\]|_)`, 'g')
-
-export const ZERO_WIDTH_SPACE = '\u200B'
-
-export const asterisk = `${ZERO_WIDTH_SPACE}*`
-export const asteriskHolder = `${ZERO_WIDTH_SPACE}＊`
-export const underline = `${ZERO_WIDTH_SPACE}_`
-export const underlineHolder = `${ZERO_WIDTH_SPACE}⎽`

package/src/plugin/inline-sync-plugin/replacer.ts

@@ -1,56 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/ctx'
-import type { Attrs } from '@milkdown/prose/model'
-import type { EditorState, PluginKey, Transaction } from '@milkdown/prose/state'
-import { TextSelection } from '@milkdown/prose/state'
-
-import { inlineSyncConfig } from './config'
-import { getContextByState } from './context'
-import { calcOffset } from './utils'
-import { linkRegexp } from './regexp'
-
-export const runReplacer = (
-  ctx: Ctx,
-  key: PluginKey,
-  state: EditorState,
-  dispatch: (tr: Transaction) => void,
-  attrs: Attrs,
-) => {
-  const { placeholderConfig } = ctx.get(inlineSyncConfig.key)
-  const holePlaceholder = placeholderConfig.hole
-  // insert a placeholder to restore the selection
-  let tr = state.tr.setMeta(key, true).insertText(holePlaceholder, state.selection.from)
-
-  const nextState = state.apply(tr)
-  const context = getContextByState(ctx, nextState)
-
-  if (!context)
-    return
-
-  const lastUserInput = context.text.slice(0, context.text.indexOf(context.placeholder))
-
-  const { $from } = nextState.selection
-  const from = $from.before()
-  const to = $from.after()
-
-  const offset = calcOffset(context.nextNode, from, context.placeholder)
-
-  tr = tr
-    .replaceWith(from, to, context.nextNode)
-    .setNodeMarkup(from, undefined, attrs)
-    // delete the placeholder
-    .delete(offset + 1, offset + 2)
-
-  // restore the selection
-  tr = tr.setSelection(TextSelection.near(tr.doc.resolve(offset + 1)))
-
-  const needsRestoreMark = linkRegexp.test(lastUserInput) || ['*', '_', '~'].includes(lastUserInput.at(-1) || '')
-  if (needsRestoreMark && tr.selection instanceof TextSelection) {
-    const marks = tr.selection.$cursor?.marks() ?? []
-    marks.forEach((mark) => {
-      tr = tr.removeStoredMark(mark.type)
-    })
-  }
-
-  dispatch(tr)
-}

package/src/plugin/inline-sync-plugin/utils.ts

@@ -1,92 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { Node } from '@milkdown/prose/model'
-
-import type { SyncNodePlaceholder } from './config'
-import {
-  asterisk,
-  asteriskHolder,
-  keepLinkRegexp,
-  punctuationRegexp,
-  underline,
-  underlineHolder,
-} from './regexp'
-
-export const keepLink = (str: string) => {
-  let text = str
-  let match = text.match(keepLinkRegexp)
-  while (match && match.groups) {
-    const { span } = match.groups
-    text = text.replace(keepLinkRegexp, span as string)
-
-    match = text.match(keepLinkRegexp)
-  }
-  return text
-}
-
-export const mergeSlash = (str: string) => {
-  return str
-    .replaceAll(/\\\\\*/g, asterisk)
-    .replaceAll(/\\\\_/g, underline)
-    .replaceAll(asterisk, asteriskHolder)
-    .replaceAll(underline, underlineHolder)
-}
-
-export const swap = (text: string, first: number, last: number) => {
-  const arr = text.split('')
-  const temp = arr[first]
-  if (arr[first] && arr[last]) {
-    arr[first] = arr[last] as string
-    arr[last] = temp as string
-  }
-  return arr.join('').toString()
-}
-
-export const replacePunctuation = (holePlaceholder: string) => (text: string) =>
-  text.replace(punctuationRegexp(holePlaceholder), '')
-
-export const calculatePlaceholder = (placeholder: SyncNodePlaceholder) => (text: string) => {
-  const index = text.indexOf(placeholder.hole)
-  const left = text.charAt(index - 1)
-  const right = text.charAt(index + 1)
-  const notAWord = /[^\w]|_/
-
-  // cursor on the right
-  if (!right)
-    return placeholder.punctuation
-
-  // cursor on the left
-  if (!left)
-    return placeholder.char
-
-  if (notAWord.test(left) && notAWord.test(right))
-    return placeholder.punctuation
-
-  return placeholder.char
-}
-
-export const calcOffset = (node: Node, from: number, placeholder: string) => {
-  let offset = from
-  let find = false
-  node.descendants((n) => {
-    if (find)
-      return false
-    if (!n.textContent.includes(placeholder)) {
-      offset += n.nodeSize
-      return false
-    }
-    if (n.isText) {
-      const i = n.text?.indexOf(placeholder)
-      if (i != null && i >= 0) {
-        find = true
-        offset += i
-        return false
-      }
-    }
-
-    // enter the node
-    offset += 1
-    return true
-  })
-  return offset
-}