@milkdown/preset-commonmark 7.0.1 → 7.1.1

package/lib/node/html.d.ts

@@ -0,0 +1,3 @@
+export declare const htmlAttr: import("@milkdown/utils").$NodeAttr;
+export declare const htmlSchema: import("@milkdown/utils").$NodeSchema<"html">;
+//# sourceMappingURL=html.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/node/html.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,qCAAoB,CAAA;AAEzC,eAAO,MAAM,UAAU,+CAyCrB,CAAA"}

package/lib/node/index.d.ts

@@ -10,4 +10,5 @@ export * from './ordered-list';
 export * from './list-item';
 export * from './paragraph';
 export * from './text';
+export * from './html';
 //# sourceMappingURL=index.d.ts.map

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/node/paragraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../src/node/paragraph.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,qCAAyB,CAAA;AAGnD,eAAO,MAAM,eAAe,oDAuCzB,CAAA;AAGH,eAAO,MAAM,mBAAmB,6CAA6E,CAAA;AAI7G,eAAO,MAAM,eAAe,0EAQ1B,CAAA"}
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../src/node/paragraph.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa,qCAAyB,CAAA;AAGnD,eAAO,MAAM,eAAe,oDA0BzB,CAAA;AAGH,eAAO,MAAM,mBAAmB,6CAA6E,CAAA;AAI7G,eAAO,MAAM,eAAe,0EAQ1B,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/inline-sync-plugin/inline-sync-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/plugin/inline-sync-plugin/inline-sync-plugin.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,gBAAgB,kCAkD3B,CAAA"}
+{"version":3,"file":"inline-sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/plugin/inline-sync-plugin/inline-sync-plugin.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,gBAAgB,kCAoD3B,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/utils/index.d.ts

@@ -0,0 +1,4 @@
+import type { SerializerState } from '@milkdown/transformer';
+import type { Node } from '@milkdown/prose/model';
+export declare const serializeText: (state: SerializerState, node: Node) => void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,aAAa,UAAW,eAAe,QAAQ,IAAI,SAe/D,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/preset-commonmark",
   "type": "module",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,20 +24,23 @@
   "peerDependencies": {
     "@milkdown/core": "^7.0.0-next.0",
     "@milkdown/ctx": "^7.0.0-next.0",
-    "@milkdown/prose": "^7.0.0-next.0"
+    "@milkdown/prose": "^7.0.0-next.0",
+    "@milkdown/transformer": "^7.0.0-next.0"
   },
   "dependencies": {
+    "@sindresorhus/slugify": "^2.2.0",
     "remark-inline-links": "^6.0.0",
-    "tslib": "^2.4.0",
+    "tslib": "^2.5.0",
     "unist-util-visit": "^4.0.0",
-    "@milkdown/exception": "7.0.1",
-    "@milkdown/utils": "7.0.1"
+    "@milkdown/exception": "7.1.1",
+    "@milkdown/utils": "7.1.1"
   },
   "devDependencies": {
     "@types/unist": "^2.0.6",
-    "@milkdown/core": "7.0.1",
-    "@milkdown/ctx": "7.0.1",
-    "@milkdown/prose": "7.0.1"
+    "@milkdown/core": "7.1.1",
+    "@milkdown/ctx": "7.1.1",
+    "@milkdown/prose": "7.1.1",
+    "@milkdown/transformer": "7.1.1"
   },
   "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/hardbreak.ts

@@ -31,6 +31,7 @@ export const hardbreakSchema = $nodeSchema('hardbreak', ctx => ({
       state.addNode(type, { isInline: Boolean(node.data?.isInline) })
     },
   },
+  leafText: () => '\n',
   toMarkdown: {
     match: node => node.type.name === 'hardbreak',
     runner: (state, node) => {

package/src/node/heading.ts

@@ -4,8 +4,9 @@ import { expectDomTypeError } from '@milkdown/exception'
 import { setBlockType } from '@milkdown/prose/commands'
 import { textblockTypeInputRule } from '@milkdown/prose/inputrules'
 import type { Node } from '@milkdown/prose/model'
-import { Fragment } from '@milkdown/prose/model'
 import { $command, $ctx, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import slugify from '@sindresorhus/slugify'
+import { serializeText } from '../utils'
 import { paragraphSchema } from './paragraph'
 
 const headingIndex = Array(6)
@@ -13,11 +14,7 @@ const headingIndex = Array(6)
   .map((_, i) => i + 1)
 
 const defaultHeadingIdGenerator = (node: Node) =>
-  node.textContent
-    .replace(/[\p{P}\p{S}]/gu, '')
-    .replace(/\s/g, '-')
-    .toLowerCase()
-    .trim()
+  slugify(node.textContent)
 
 /// This is a slice contains a function to generate heading id.
 /// You can configure it to generate id in your own way.
@@ -73,20 +70,7 @@ export const headingSchema = $nodeSchema('heading', (ctx) => {
       match: node => node.type.name === 'heading',
       runner: (state, node) => {
         state.openNode('heading', undefined, { depth: node.attrs.level })
-        const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
-        if (lastIsHardbreak) {
-          const contentArr: Node[] = []
-          node.content.forEach((n, _, i) => {
-            if (i === node.childCount - 1)
-              return
-
-            contentArr.push(n)
-          })
-          state.next(Fragment.fromArray(contentArr))
-        }
-        else {
-          state.next(node.content)
-        }
+        serializeText(state, node)
         state.closeNode()
       },
     },

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/node/paragraph.ts

@@ -1,9 +1,8 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { commandsCtx } from '@milkdown/core'
 import { setBlockType } from '@milkdown/prose/commands'
-import type { Node } from '@milkdown/prose/model'
-import { Fragment } from '@milkdown/prose/model'
 import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
+import { serializeText } from '../utils'
 
 /// HTML attributes for paragraph node.
 export const paragraphAttr = $nodeAttr('paragraph')
@@ -31,20 +30,7 @@ export const paragraphSchema = $nodeSchema('paragraph', ctx => ({
     match: node => node.type.name === 'paragraph',
     runner: (state, node) => {
       state.openNode('paragraph')
-      const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
-      if (lastIsHardbreak) {
-        const contentArr: Node[] = []
-        node.content.forEach((n, _, i) => {
-          if (i === node.childCount - 1)
-            return
-
-          contentArr.push(n)
-        })
-        state.next(Fragment.fromArray(contentArr))
-      }
-      else {
-        state.next(node.content)
-      }
+      serializeText(state, node)
       state.closeNode()
     },
   },

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/inline-sync-plugin.ts

@@ -59,6 +59,8 @@ export const inlineSyncPlugin = $prose((ctx: Ctx) => {
           runReplacer(ctx, inlineSyncPluginKey, state, dispatch, prevNode.attrs)
         })
 
+        tr.setMeta('addToHistory', false)
+
         return null
       },
     },

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/utils/index.ts

@@ -0,0 +1,22 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { SerializerState } from '@milkdown/transformer'
+import { Fragment } from '@milkdown/prose/model'
+import type { Node } from '@milkdown/prose/model'
+import { hardbreakSchema } from '../node'
+
+export const serializeText = (state: SerializerState, node: Node) => {
+  const lastIsHardBreak = node.childCount >= 1 && node.lastChild?.type === hardbreakSchema.type()
+  if (!lastIsHardBreak) {
+    state.next(node.content)
+    return
+  }
+
+  const contentArr: Node[] = []
+  node.content.forEach((n, _, i) => {
+    if (i === node.childCount - 1)
+      return
+
+    contentArr.push(n)
+  })
+  state.next(Fragment.fromArray(contentArr))
+}

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"}