@milkdown/preset-commonmark 7.0.0 → 7.1.0

package/lib/node/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAA;AACrB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,MAAM,CAAA;AACpB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAA;AACrB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,MAAM,CAAA;AACpB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AAEtB,cAAc,QAAQ,CAAA"}

package/lib/plugin/index.d.ts

@@ -2,7 +2,7 @@ export * from './inline-sync-plugin';
 export * from './remark-add-order-in-list-plugin';
 export * from './remark-line-break';
 export * from './remark-inline-link-plugin';
-export * from './remark-html-filter';
+export * from './remark-html-transformer';
 export * from './inline-nodes-cursor-plugin';
 export * from './hardbreak-clear-mark-plugin';
 export * from './hardbreak-filter-plugin';

package/lib/plugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AAEpC,cAAc,mCAAmC,CAAA;AACjD,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AAEpC,cAAc,8BAA8B,CAAA;AAE5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AAEzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AAEpC,cAAc,mCAAmC,CAAA;AACjD,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AAEzC,cAAc,8BAA8B,CAAA;AAE5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AAEzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA"}

package/lib/plugin/remark-html-transformer.d.ts

@@ -0,0 +1,2 @@
+export declare const remarkHtmlTransformer: import("@milkdown/utils").$Remark;
+//# sourceMappingURL=remark-html-transformer.d.ts.map

package/lib/plugin/remark-html-transformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remark-html-transformer.d.ts","sourceRoot":"","sources":["../../src/plugin/remark-html-transformer.ts"],"names":[],"mappings":"AAmCA,eAAO,MAAM,qBAAqB,mCAahC,CAAA"}

package/lib/plugin/sync-list-order-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sync-list-order-plugin.d.ts","sourceRoot":"","sources":["../../src/plugin/sync-list-order-plugin.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,kCA+C9B,CAAA"}
+{"version":3,"file":"sync-list-order-plugin.d.ts","sourceRoot":"","sources":["../../src/plugin/sync-list-order-plugin.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,mBAAmB,kCAyE9B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/preset-commonmark",
   "type": "module",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,14 +30,14 @@
     "remark-inline-links": "^6.0.0",
     "tslib": "^2.4.0",
     "unist-util-visit": "^4.0.0",
-    "@milkdown/exception": "7.0.0",
-    "@milkdown/utils": "7.0.0"
+    "@milkdown/exception": "7.1.0",
+    "@milkdown/utils": "7.1.0"
   },
   "devDependencies": {
     "@types/unist": "^2.0.6",
-    "@milkdown/core": "7.0.0",
-    "@milkdown/ctx": "7.0.0",
-    "@milkdown/prose": "7.0.0"
+    "@milkdown/core": "7.1.0",
+    "@milkdown/ctx": "7.1.0",
+    "@milkdown/prose": "7.1.0"
   },
   "nx": {
     "targets": {

package/src/composed/plugins.ts

@@ -1,7 +1,20 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
 import type { MilkdownPlugin } from '@milkdown/ctx'
-import { hardbreakClearMarkPlugin, hardbreakFilterNodes, hardbreakFilterPlugin, inlineNodesCursorPlugin, inlineSyncConfig, inlineSyncPlugin, remarkAddOrderInListPlugin, remarkHTMLFilter, remarkInlineLinkPlugin, remarkLineBreak, syncHeadingIdPlugin, syncListOrderPlugin } from '../plugin'
+import {
+  hardbreakClearMarkPlugin,
+  hardbreakFilterNodes,
+  hardbreakFilterPlugin,
+  inlineNodesCursorPlugin,
+  inlineSyncConfig,
+  inlineSyncPlugin,
+  remarkAddOrderInListPlugin,
+  remarkHtmlTransformer,
+  remarkInlineLinkPlugin,
+  remarkLineBreak,
+  syncHeadingIdPlugin,
+  syncListOrderPlugin,
+} from '../plugin'
 
 /// @internal
 export const plugins: MilkdownPlugin[] = [
@@ -17,7 +30,7 @@ export const plugins: MilkdownPlugin[] = [
   remarkAddOrderInListPlugin,
   remarkInlineLinkPlugin,
   remarkLineBreak,
-  remarkHTMLFilter,
+  remarkHtmlTransformer,
 
   syncHeadingIdPlugin,
   syncListOrderPlugin,

package/src/composed/schema.ts

@@ -2,7 +2,32 @@
 
 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'
+import {
+  blockquoteAttr,
+  blockquoteSchema,
+  bulletListAttr,
+  bulletListSchema,
+  codeBlockAttr,
+  codeBlockSchema,
+  docSchema,
+  hardbreakAttr,
+  hardbreakSchema,
+  headingAttr,
+  headingIdGenerator,
+  headingSchema,
+  hrAttr,
+  hrSchema, htmlAttr,
+  htmlSchema,
+  imageAttr,
+  imageSchema,
+  listItemAttr,
+  listItemSchema,
+  orderedListAttr,
+  orderedListSchema,
+  paragraphAttr,
+  paragraphSchema,
+  textSchema,
+} from '../node'
 
 /// @internal
 export const schema: MilkdownPlugin[] = [
@@ -51,5 +76,8 @@ export const schema: MilkdownPlugin[] = [
   linkAttr,
   linkSchema,
 
+  htmlAttr,
+  htmlSchema,
+
   textSchema,
 ].flat()

package/src/node/html.ts

@@ -0,0 +1,47 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { $nodeAttr, $nodeSchema } from '@milkdown/utils'
+
+export const htmlAttr = $nodeAttr('html')
+
+export const htmlSchema = $nodeSchema('html', (ctx) => {
+  return {
+    atom: true,
+    group: 'inline',
+    inline: true,
+    attrs: {
+      value: {
+        default: '',
+      },
+    },
+    toDOM: (node) => {
+      const span = document.createElement('span')
+      const attr = {
+        ...ctx.get(htmlAttr.key)(node),
+        'data-value': node.attrs.value,
+        'data-type': 'html',
+      }
+      span.textContent = node.attrs.value
+      return ['span', attr, node.attrs.value]
+    },
+    parseDOM: [{
+      tag: 'span[data-type="html"]',
+      getAttrs: (dom) => {
+        return {
+          value: (dom as HTMLElement).dataset.value ?? '',
+        }
+      },
+    }],
+    parseMarkdown: {
+      match: ({ type }) => Boolean(type === 'html'),
+      runner: (state, node, type) => {
+        state.addNode(type, { value: node.value as string })
+      },
+    },
+    toMarkdown: {
+      match: node => node.type.name === 'html',
+      runner: (state, node) => {
+        state.addNode('html', undefined, node.attrs.value)
+      },
+    },
+  }
+})

package/src/node/index.ts

@@ -12,3 +12,5 @@ export * from './ordered-list'
 export * from './list-item'
 export * from './paragraph'
 export * from './text'
+
+export * from './html'

package/src/plugin/index.ts

@@ -5,7 +5,7 @@ export * from './inline-sync-plugin'
 export * from './remark-add-order-in-list-plugin'
 export * from './remark-line-break'
 export * from './remark-inline-link-plugin'
-export * from './remark-html-filter'
+export * from './remark-html-transformer'
 
 export * from './inline-nodes-cursor-plugin'
 

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

@@ -16,11 +16,7 @@ export interface InlineSyncContext {
 }
 
 const getNodeFromSelection = (state: EditorState) => {
-  const { selection } = state
-  const { $from } = selection
-  const node = $from.node()
-
-  return node
+  return state.selection.$from.node()
 }
 
 const getMarkdown = (ctx: Ctx, state: EditorState, node: Node, globalNode: Node[]) => {
@@ -80,6 +76,10 @@ const collectGlobalNodes = (ctx: Ctx, state: EditorState) => {
 
 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)
@@ -90,7 +90,7 @@ export const getContextByState = (ctx: Ctx, state: EditorState): InlineSyncConte
 
     const newNode = getNewNode(ctx, text)
 
-    if (!newNode || node.type !== newNode.type)
+    if (!newNode || node.type !== newNode.type || onlyHTML(newNode))
       return null
 
     // @ts-expect-error hijack the node attribute

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

@@ -35,7 +35,7 @@ export const runReplacer = (
   tr = tr
     .replaceWith(from, to, context.nextNode)
     .setNodeMarkup(from, undefined, attrs)
-  // delete the placeholder
+    // delete the placeholder
     .delete(offset + 1, offset + 2)
 
   // restore the selection

package/src/plugin/{remark-html-filter.ts → remark-html-transformer.ts}

@@ -33,11 +33,17 @@ function flatMapWithDepth(ast: Node, fn: (node: Node, index: number, parent: Nod
 
 /// @internal
 /// This plugin should be deprecated after we support HTML.
-export const remarkHTMLFilter = $remark(() => () => (tree: Node) => {
-  flatMapWithDepth(tree, (node) => {
+export const remarkHtmlTransformer = $remark(() => () => (tree: Node) => {
+  flatMapWithDepth(tree, (node, _index, parent) => {
     if (!isHTML(node))
       return [node]
 
-    return []
+    if (parent?.type === 'root') {
+      (node as Literal & { children: Literal[] }).children = [{ ...node }]
+      delete (node as Literal).value
+      node.type = 'paragraph'
+    }
+
+    return [node]
   })
 })

package/src/plugin/sync-list-order-plugin.ts

@@ -1,57 +1,84 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { EditorState, Transaction } from '@milkdown/prose/state'
 import { Plugin, PluginKey } from '@milkdown/prose/state'
 import { $prose } from '@milkdown/utils'
+import type { EditorView } from '@milkdown/prose/view'
 import { listItemSchema } from '../node/list-item'
 
 import { orderedListSchema } from '../node/ordered-list'
+import { bulletListSchema } from '../node'
 
 /// This plugin is used to keep the label of list item up to date in ordered list.
 export const syncListOrderPlugin = $prose(() => {
-  const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
+  const syncOrderLabel = (view: EditorView) => {
+    if (view.composing || !view.editable)
+      return
+
     const orderedListType = orderedListSchema.type()
+    const bulletListType = bulletListSchema.type()
     const listItemType = listItemSchema.type()
+    const state = view.state
+    const handleNodeItem = (attrs: Record<string, any>, index: number): boolean => {
+      let changed = false
+      const expectedLabel = `${index + 1}.`
+      if (attrs.label !== expectedLabel) {
+        attrs.label = expectedLabel
+        changed = true
+      }
+
+      return changed
+    }
+
     let tr = state.tr
+    let needDispatch = false
     state.doc.descendants((node, pos, parent, index) => {
-      if (node.type === listItemType && parent?.type === orderedListType) {
-        let changed = false
+      if (node.type === bulletListType) {
+        const base = node.maybeChild(0)
+        if (base?.type === listItemType && base.attrs.listType === 'ordered') {
+          needDispatch = true
+          tr.setNodeMarkup(pos, orderedListType, { spread: 'true' })
+
+          node.descendants((child, pos, _parent, index) => {
+            if (child.type === listItemType) {
+              const attrs = { ...child.attrs }
+              const changed = handleNodeItem(attrs, index)
+              if (changed)
+                tr = tr.setNodeMarkup(pos, undefined, attrs)
+            }
+            return false
+          })
+        }
+      }
+      else if (node.type === listItemType && parent?.type === orderedListType) {
         const attrs = { ...node.attrs }
-        if (node.attrs.listType !== 'ordered') {
+        let changed = false
+        if (attrs.listType !== 'ordered') {
           attrs.listType = 'ordered'
           changed = true
         }
 
         const base = parent?.maybeChild(0)
-        if (base === node) {
-          attrs.label = '1.'
-          changed = true
-        }
-        else if (base?.type === listItemType && base.attrs.listType === 'ordered') {
-          attrs.label = `${index + 1}.`
-          changed = true
-        }
-        else if (node.attrs.label === '•') {
-          attrs.label = `${index + 1}.`
-          changed = true
-        }
+        if (base)
+          changed = handleNodeItem(attrs, index)
 
-        if (changed)
+        if (changed) {
           tr = tr.setNodeMarkup(pos, undefined, attrs)
+          needDispatch = true
+        }
       }
     })
-    callback(tr)
+
+    if (needDispatch)
+      view.dispatch(tr.setMeta('addToHistory', false))
   }
   return new Plugin({
     key: new PluginKey('MILKDOWN_KEEP_LIST_ORDER'),
-    appendTransaction: (transactions, _oldState, nextState) => {
-      let tr: Transaction | null = null
-      if (transactions.some(transaction => transaction.docChanged)) {
-        walkThrough(nextState, (t) => {
-          tr = t
-        })
+    view: (view) => {
+      syncOrderLabel(view)
+      return {
+        update: (view) => {
+          syncOrderLabel(view)
+        },
       }
-
-      return tr
     },
   })
 })

package/lib/plugin/remark-html-filter.d.ts

@@ -1,2 +0,0 @@
-export declare const remarkHTMLFilter: import("@milkdown/utils").$Remark;
-//# sourceMappingURL=remark-html-filter.d.ts.map

package/lib/plugin/remark-html-filter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"remark-html-filter.d.ts","sourceRoot":"","sources":["../../src/plugin/remark-html-filter.ts"],"names":[],"mappings":"AAmCA,eAAO,MAAM,gBAAgB,mCAO3B,CAAA"}