Wrong parsing of emphasis and strong emphasis formatting

susnux commented

2022-07-11 13:34:08 +02:00

(Migrated from github.com)

From CommonMark example 431:

**foo *bar **baz**
bim* bop**

should be parsed as:

<p><strong>foo <em>bar <strong>baz</strong>
bim</em> bop</strong></p>

Using just markdown-it this works as expected but the defaultMarkdownParser creates this incorrect representation:

<p><strong>foo </strong><em><strong>bar baz</strong>
bim</em> bop</p>

From CommonMark [example 431](https://spec.commonmark.org/0.30/#example-431): ```markdown **foo *bar **baz** bim* bop** ``` should be parsed as: ```html foo bar baz bim bop ``` Using just `markdown-it` this works as expected but the `defaultMarkdownParser` creates this incorrect representation: ```html foo bar baz bim bop ``` ![Invalid parsing of emphasis and strong emphasis](https://user-images.githubusercontent.com/1855448/178255195-14eed513-7474-4438-a834-7f3341d809f0.gif)

👍 1

marijnh commented

2022-07-11 21:02:08 +02:00

(Migrated from github.com)

ProseMirror does not allow marks of the same type to be nested like this. I guess the markdown parser could be a bit more graceful about this (just ignoring the inner opening and closing strong tokens).

susnux commented

2022-07-12 16:39:40 +02:00

(Migrated from github.com)

ProseMirror does not allow marks of the same type to be nested like this.

Well one could workaround this as ProseMirror supports multiple marks of the same type if they have different attributes. Meaning you have to set excludes: '' for the marks em and strong and add a nesting attribute to them.

e.g. something like this:

function nesting(...types) {
  const fn = (node) => {
    let el = (node as HTMLElement).parentElement
    let nesting = 0
    while(el !== null) {
      if ([...arguments].includes(el.tagName)) nesting++
      el = el.parentElement
    }
    return {nesting: nesting}
  }
  return fn
}

// ... inside the schema:
marks: {
    em: {
      attrs: {
        nesting: {
          default: null
        }
      },
      parseDOM: [
        {tag: "i", getAttrs: nesting("EM", "I")},
        {tag: "em", getAttrs: nesting("EM", "I")},
      ],
      toDOM() { return ["em"] },
      excludes: ''
    },

    strong: {
      excludes: '',
      attrs: {
        nesting: {
          default: null
        }
      },
      parseDOM: [
        {tag: "b", getAttrs: nesting("STRONG", "B")},
        {tag: "strong", getAttrs: nesting("STRONG", "B")},
      ],
      toDOM() { return ["strong"] }
    },
}

> ProseMirror does not allow marks of the same type to be nested like this. Well one could workaround this as ProseMirror supports multiple marks of the same type if they have different attributes. Meaning you have to set `excludes: ''` for the marks `em` and `strong` and add a nesting attribute to them. e.g. something like this: ```js function nesting(...types) { const fn = (node) => { let el = (node as HTMLElement).parentElement let nesting = 0 while(el !== null) { if ([...arguments].includes(el.tagName)) nesting++ el = el.parentElement } return {nesting: nesting} } return fn } // ... inside the schema: marks: { em: { attrs: { nesting: { default: null } }, parseDOM: [ {tag: "i", getAttrs: nesting("EM", "I")}, {tag: "em", getAttrs: nesting("EM", "I")}, ], toDOM() { return ["em"] }, excludes: '' }, strong: { excludes: '', attrs: { nesting: { default: null } }, parseDOM: [ {tag: "b", getAttrs: nesting("STRONG", "B")}, {tag: "strong", getAttrs: nesting("STRONG", "B")}, ], toDOM() { return ["strong"] } }, } ```

Rows
Columns

Wrong parsing of emphasis and strong emphasis formatting #82