@milkdown/preset-commonmark 6.5.2 → 6.5.3

package/src/plugin/filter-html.ts

@@ -1,45 +1,43 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Literal, Node, Parent } from 'unist';
+import type { Literal, Node, Parent } from 'unist'
 
-const isParent = (node: Node): node is Parent => !!(node as Parent).children;
-const isHTML = (node: Node): node is Literal<string> => node.type === 'html';
+const isParent = (node: Node): node is Parent => !!(node as Parent).children
+const isHTML = (node: Node): node is Literal<string> => node.type === 'html'
 
 function flatMapWithDepth(ast: Node, fn: (node: Node, index: number, parent: Node | null) => Node[]) {
-    return transform(ast, 0, null)[0];
+  return transform(ast, 0, null)[0]
 
-    function transform(node: Node, index: number, parent: Node | null) {
-        if (isParent(node)) {
-            const out = [];
-            for (let i = 0, n = node.children.length; i < n; i++) {
-                const nthChild = node.children[i];
-                if (nthChild) {
-                    const xs = transform(nthChild, i, node);
-                    if (xs) {
-                        for (let j = 0, m = xs.length; j < m; j++) {
-                            const item = xs[j];
-                            if (item) {
-                                out.push(item);
-                            }
-                        }
-                    }
-                }
+  function transform(node: Node, index: number, parent: Node | null) {
+    if (isParent(node)) {
+      const out = []
+      for (let i = 0, n = node.children.length; i < n; i++) {
+        const nthChild = node.children[i]
+        if (nthChild) {
+          const xs = transform(nthChild, i, node)
+          if (xs) {
+            for (let j = 0, m = xs.length; j < m; j++) {
+              const item = xs[j]
+              if (item)
+                out.push(item)
             }
-            node.children = out;
+          }
         }
-
-        return fn(node, index, parent);
+      }
+      node.children = out
     }
+
+    return fn(node, index, parent)
+  }
 }
 
 export const filterHTMLPlugin = () => {
-    function transformer(tree: Node) {
-        flatMapWithDepth(tree, (node) => {
-            if (!isHTML(node)) {
-                return [node];
-            }
+  function transformer(tree: Node) {
+    flatMapWithDepth(tree, (node) => {
+      if (!isHTML(node))
+        return [node]
 
-            return [];
-        });
-    }
-    return transformer;
-};
+      return []
+    })
+  }
+  return transformer
+}

package/src/plugin/index.ts

@@ -1,17 +1,17 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createPlugin } from '@milkdown/utils';
-import links from 'remark-inline-links';
+import { createPlugin } from '@milkdown/utils'
+import links from 'remark-inline-links'
 
-import { addOrderInList } from './add-order-in-list';
-import { filterHTMLPlugin } from './filter-html';
-import { getInlineNodesCursorPlugin } from './inline-nodes-cursor';
-import { getInlineSyncPlugin, inlineSyncConfigCtx } from './inline-sync';
+import { addOrderInList } from './add-order-in-list'
+import { filterHTMLPlugin } from './filter-html'
+import { getInlineNodesCursorPlugin } from './inline-nodes-cursor'
+import { getInlineSyncPlugin, inlineSyncConfigCtx } from './inline-sync'
 
-export { inlineSyncConfigCtx };
+export { inlineSyncConfigCtx }
 export const commonmarkPlugins = [
-    createPlugin(() => ({
-        injectSlices: [inlineSyncConfigCtx],
-        prosePlugins: (_, ctx) => [getInlineNodesCursorPlugin(), getInlineSyncPlugin(ctx)],
-        remarkPlugins: () => [links, filterHTMLPlugin, addOrderInList],
-    }))(),
-];
+  createPlugin(() => ({
+    injectSlices: [inlineSyncConfigCtx],
+    prosePlugins: (_, ctx) => [getInlineNodesCursorPlugin(), getInlineSyncPlugin(ctx)],
+    remarkPlugins: () => [links, filterHTMLPlugin, addOrderInList],
+  }))(),
+]

package/src/plugin/inline-nodes-cursor.ts

@@ -1,94 +1,93 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { Decoration, DecorationSet } from '@milkdown/prose/view';
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import { Decoration, DecorationSet } from '@milkdown/prose/view'
 
-const inlineNodesCursorPluginKey = new PluginKey('MILKDOWN_INLINE_NODES_CURSOR');
+const inlineNodesCursorPluginKey = new PluginKey('MILKDOWN_INLINE_NODES_CURSOR')
 
 /**
  * This plugin is to solve the chrome 98 bug:
  * https://discuss.prosemirror.net/t/cursor-jumps-at-the-end-of-line-when-it-betweens-two-inline-nodes/4641
  */
 export const getInlineNodesCursorPlugin = (): Plugin => {
-    let lock = false;
-    const inlineNodesCursorPlugin: Plugin = new Plugin({
-        key: inlineNodesCursorPluginKey,
-        state: {
-            init() {
-                return false;
-            },
-            apply(tr) {
-                if (!tr.selection.empty) {
-                    return false;
-                }
-                const pos = tr.selection.$from;
-                const left = pos.nodeBefore;
-                const right = pos.nodeAfter;
-                if (left && right && left.isInline && !left.isText && right.isInline && !right.isText) {
-                    return true;
-                }
+  let lock = false
+  const inlineNodesCursorPlugin: Plugin = new Plugin({
+    key: inlineNodesCursorPluginKey,
+    state: {
+      init() {
+        return false
+      },
+      apply(tr) {
+        if (!tr.selection.empty)
+          return false
 
-                return false;
-            },
+        const pos = tr.selection.$from
+        const left = pos.nodeBefore
+        const right = pos.nodeAfter
+        if (left && right && left.isInline && !left.isText && right.isInline && !right.isText)
+          return true
+
+        return false
+      },
+    },
+    props: {
+      handleDOMEvents: {
+        compositionend: (view, e) => {
+          if (lock) {
+            lock = false
+            requestAnimationFrame(() => {
+              const active = inlineNodesCursorPlugin.getState(view.state)
+              if (active) {
+                const from = view.state.selection.from
+                e.preventDefault()
+                view.dispatch(view.state.tr.insertText(e.data || '', from))
+              }
+            })
+
+            return true
+          }
+          return false
         },
-        props: {
-            handleDOMEvents: {
-                compositionend: (view, e) => {
-                    if (lock) {
-                        lock = false;
-                        requestAnimationFrame(() => {
-                            const active = inlineNodesCursorPlugin.getState(view.state);
-                            if (active) {
-                                const from = view.state.selection.from;
-                                e.preventDefault();
-                                view.dispatch(view.state.tr.insertText(e.data || '', from));
-                            }
-                        });
+        compositionstart: (view) => {
+          const active = inlineNodesCursorPlugin.getState(view.state)
+          if (active)
+            lock = true
 
-                        return true;
-                    }
-                    return false;
-                },
-                compositionstart: (view) => {
-                    const active = inlineNodesCursorPlugin.getState(view.state);
-                    if (active) {
-                        lock = true;
-                    }
-                    return false;
-                },
-                beforeinput: (view, e) => {
-                    const active = inlineNodesCursorPlugin.getState(view.state);
-                    if (active && e instanceof InputEvent && e.data && !lock) {
-                        const from = view.state.selection.from;
-                        e.preventDefault();
-                        view.dispatch(view.state.tr.insertText(e.data || '', from));
+          return false
+        },
+        beforeinput: (view, e) => {
+          const active = inlineNodesCursorPlugin.getState(view.state)
+          if (active && e instanceof InputEvent && e.data && !lock) {
+            const from = view.state.selection.from
+            e.preventDefault()
+            view.dispatch(view.state.tr.insertText(e.data || '', from))
 
-                        return true;
-                    }
+            return true
+          }
 
-                    return false;
-                },
-            },
-            decorations(state) {
-                const active = inlineNodesCursorPlugin.getState(state);
-                if (active) {
-                    const pos = state.selection.$from;
-                    const position = pos.pos;
-                    const left = document.createElement('span');
-                    const leftDec = Decoration.widget(position, left, {
-                        side: -1,
-                    });
-                    const right = document.createElement('span');
-                    const rightDec = Decoration.widget(position, right);
-                    setTimeout(() => {
-                        left.contentEditable = 'true';
-                        right.contentEditable = 'true';
-                    });
-                    return DecorationSet.create(state.doc, [leftDec, rightDec]);
-                }
-                return DecorationSet.empty;
-            },
+          return false
         },
-    });
+      },
+      decorations(state) {
+        const active = inlineNodesCursorPlugin.getState(state)
+        if (active) {
+          const pos = state.selection.$from
+          const position = pos.pos
+          const left = document.createElement('span')
+          const leftDec = Decoration.widget(position, left, {
+            side: -1,
+          })
+          const right = document.createElement('span')
+          const rightDec = Decoration.widget(position, right)
+          setTimeout(() => {
+            left.contentEditable = 'true'
+            right.contentEditable = 'true'
+          })
+          return DecorationSet.create(state.doc, [leftDec, rightDec])
+        }
+        return DecorationSet.empty
+      },
+    },
+  })
 
-    return inlineNodesCursorPlugin;
-};
+  return inlineNodesCursorPlugin
+}

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

@@ -1,56 +1,57 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createSlice, Ctx } from '@milkdown/core';
-import { Node, NodeType } from '@milkdown/prose/model';
-import { Transaction } from '@milkdown/prose/state';
+import type { Ctx } from '@milkdown/core'
+import { createSlice } from '@milkdown/core'
+import type { Node, NodeType } from '@milkdown/prose/model'
+import type { Transaction } from '@milkdown/prose/state'
 
-import { swap } from './utils';
+import { swap } from './utils'
 
 export type ShouldSyncNode = (context: {
-    prevNode: Node;
-    nextNode: Node;
-    ctx: Ctx;
-    tr: Transaction;
-    text: string;
-}) => boolean;
-
-export type SyncNodePlaceholder = {
-    hole: string;
-    punctuation: string;
-    char: string;
-};
-
-export type InlineSyncConfig = {
-    placeholderConfig: SyncNodePlaceholder;
-    shouldSyncNode: ShouldSyncNode;
-    globalNodes: Array<NodeType | string>;
-    movePlaceholder: (placeholderToMove: string, text: string) => string;
-};
+  prevNode: Node
+  nextNode: Node
+  ctx: Ctx
+  tr: Transaction
+  text: string
+}) => boolean
+
+export interface SyncNodePlaceholder {
+  hole: string
+  punctuation: string
+  char: string
+}
+
+export interface InlineSyncConfig {
+  placeholderConfig: SyncNodePlaceholder
+  shouldSyncNode: ShouldSyncNode
+  globalNodes: Array<NodeType | string>
+  movePlaceholder: (placeholderToMove: string, text: string) => string
+}
 
 export const defaultConfig: InlineSyncConfig = {
-    placeholderConfig: {
-        hole: '∅',
-        punctuation: '⁂',
-        char: '∴',
-    },
-    globalNodes: ['footnote_definition'],
-    shouldSyncNode: ({ prevNode, nextNode }) =>
-        prevNode.inlineContent &&
-        nextNode &&
+  placeholderConfig: {
+    hole: '∅',
+    punctuation: '⁂',
+    char: '∴',
+  },
+  globalNodes: ['footnote_definition'],
+  shouldSyncNode: ({ prevNode, nextNode }) =>
+    prevNode.inlineContent
+        && nextNode
         // if node type changes, do not sync
-        prevNode.type === nextNode.type &&
+        && prevNode.type === nextNode.type
         // if two node fully equal, we don't modify them
-        !prevNode.eq(nextNode),
-    movePlaceholder: (placeholderToMove: string, text: string) => {
-        const symbolsNeedToMove = ['*', '_'];
+        && !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;
-        }
+    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;
-    },
-};
+    return text
+  },
+}
 
-export const inlineSyncConfigCtx = createSlice<InlineSyncConfig, 'inlineSyncConfig'>(defaultConfig, 'inlineSyncConfig');
+export const inlineSyncConfigCtx = createSlice<InlineSyncConfig, 'inlineSyncConfig'>(defaultConfig, 'inlineSyncConfig')

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

@@ -1,115 +1,120 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Ctx, parserCtx, serializerCtx } from '@milkdown/core';
-import { Node } from '@milkdown/prose/model';
-import { EditorState } from '@milkdown/prose/state';
-import { pipe } from '@milkdown/utils';
+import type { Ctx } from '@milkdown/core'
+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 { inlineSyncConfigCtx } from './config';
-import { calculatePlaceholder, keepLink, replacePunctuation } from './utils';
+import { inlineSyncConfigCtx } from './config'
+import { calculatePlaceholder, keepLink, replacePunctuation } from './utils'
 
-export * from './config';
+export * from './config'
 
-export type InlineSyncContext = {
-    text: string;
-    prevNode: Node;
-    nextNode: Node;
-    placeholder: string;
-};
+export interface InlineSyncContext {
+  text: string
+  prevNode: Node
+  nextNode: Node
+  placeholder: string
+}
 
 const getNodeFromSelection = (state: EditorState) => {
-    const { selection } = state;
-    const { $from } = selection;
-    const node = $from.node();
+  const { selection } = state
+  const { $from } = selection
+  const node = $from.node()
 
-    return node;
-};
+  return 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]);
+  const serializer = ctx.get(serializerCtx)
+  const doc = state.schema.topNodeType.create(undefined, [node, ...globalNode])
 
-    const markdown = serializer(doc);
+  const markdown = serializer(doc)
 
-    return markdown;
-};
+  return markdown
+}
 
 const addPlaceholder = (ctx: Ctx, markdown: string) => {
-    const config = ctx.get(inlineSyncConfigCtx);
-    const holePlaceholder = config.placeholderConfig.hole;
+  const config = ctx.get(inlineSyncConfigCtx)
+  const holePlaceholder = config.placeholderConfig.hole
 
-    const [firstLine = '', ...rest] = markdown.split('\n\n');
+  const [firstLine = '', ...rest] = markdown.split('\n\n')
 
-    const movePlaceholder = (text: string) => config.movePlaceholder(holePlaceholder, text);
+  const movePlaceholder = (text: string) => config.movePlaceholder(holePlaceholder, text)
 
-    const handleText = pipe(replacePunctuation(holePlaceholder), movePlaceholder, keepLink);
+  const handleText = pipe(replacePunctuation(holePlaceholder), movePlaceholder, keepLink)
 
-    let text = handleText(firstLine);
-    const placeholder = calculatePlaceholder(config.placeholderConfig)(text);
+  let text = handleText(firstLine)
+  const placeholder = calculatePlaceholder(config.placeholderConfig)(text)
 
-    text = text.replace(holePlaceholder, placeholder);
+  text = text.replace(holePlaceholder, placeholder)
 
-    text = [text, ...rest].join('\n\n');
+  text = [text, ...rest].join('\n\n')
 
-    return [text, placeholder] as [markdown: string, placeholder: string];
-};
+  return [text, placeholder] as [markdown: string, placeholder: string]
+}
 
 const getNewNode = (ctx: Ctx, text: string) => {
-    const parser = ctx.get(parserCtx);
-    const parsed = parser(text);
+  const parser = ctx.get(parserCtx)
+  const parsed = parser(text)
 
-    if (!parsed) return null;
+  if (!parsed)
+    return null
 
-    return parsed.firstChild;
-};
+  return parsed.firstChild
+}
 
 const collectGlobalNodes = (ctx: Ctx, state: EditorState) => {
-    const { globalNodes } = ctx.get(inlineSyncConfigCtx);
-    const nodes: Node[] = [];
+  const { globalNodes } = ctx.get(inlineSyncConfigCtx)
+  const nodes: Node[] = []
 
-    state.doc.descendants((node) => {
-        if (globalNodes.includes(node.type.name) || globalNodes.includes(node.type)) {
-            nodes.push(node);
-            return false;
-        }
-        return;
-    });
+  state.doc.descendants((node) => {
+    if (globalNodes.includes(node.type.name) || globalNodes.includes(node.type)) {
+      nodes.push(node)
+      return false
+    }
+
+    return undefined
+  })
 
-    return nodes;
-};
+  return nodes
+}
 
-const removeGlobalFromText = (text: string) => text.split('\n\n')[0] || '';
+const removeGlobalFromText = (text: string) => text.split('\n\n')[0] || ''
 
 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) 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, '');
-            }
-        });
-
-        return {
-            text: removeGlobalFromText(text),
-            prevNode: node,
-            nextNode: newNode,
-            placeholder,
-        };
-    } catch {
-        return 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)
+      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, '')
+      }
+    })
+
+    return {
+      text: removeGlobalFromText(text),
+      prevNode: node,
+      nextNode: newNode,
+      placeholder,
     }
-};
+  }
+  catch {
+    return null
+  }
+}