🐛 FIX: Parsing directive content, when body followed by arguments

src/directives/admonitions.ts

@@ -27,11 +27,16 @@ class BaseAdmonition extends Directive {
       map: data.map,
       block: true
     })
-    adToken.attrSet("class", "admonition")
-    if (this.title)
+    if (data.options.class?.length >= 1) {
+      // Custom class information must go first for styling
+      // For example, `class=tip, kind=seealso` should be styled as a `tip`
+      adToken.attrSet("class", data.options.class.join(" "))
+      adToken.attrJoin("class", "admonition")
+    } else {
+      adToken.attrSet("class", "admonition")
+    }
+    if (this.title) {
       adToken.attrJoin("class", this.title.toLowerCase().replace(/ /g, ""))
-    if (data.options.class) {
-      adToken.attrJoin("class", data.options.class.join(" "))
     }
     newTokens.push(adToken)
 

src/directives/main.ts

@@ -182,11 +182,7 @@ export default function directiveToData(
     ;[body, options, bodyOffset] = parseDirectiveOptions(body, directive)
   }
   let args: string[] = []
-  if (
-    !directive.required_arguments &&
-    !directive.optional_arguments &&
-    !Object.keys(options).length
-  ) {
+  if (!directive.required_arguments && !directive.optional_arguments) {
     if (firstLine) {
       bodyOffset = 0
       body = [firstLine].concat(body)

tests/fixtures/directives.admonitions.md

@@ -0,0 +1,216 @@
+Admonition:
+.
+```{admonition} This is a **title**
+An example of an admonition with custom _title_.
+```
+.
+<aside class="admonition">
+<header class="admonition-title">This is a <strong>title</strong></header>
+<p>An example of an admonition with custom <em>title</em>.</p>
+</aside>
+.
+
+Note on split lines:
+.
+```{note} An example
+of an admonition on two lines.
+```
+.
+<aside class="admonition note">
+<header class="admonition-title">Note</header>
+<p>An example
+of an admonition on two lines.</p>
+</aside>
+.
+
+[FIX] Note on a single line [See #154](https://github.com/executablebooks/MyST-Parser/issues/154)
+.
+```{danger} An example of an admonition on a single line.
+```
+.
+<aside class="admonition danger">
+<header class="admonition-title">Danger</header>
+<p>An example of an admonition on a single line.</p>
+</aside>
+.
+
+Admonition with overridding class name
+.
+```{admonition} This is a title
+:class: tip
+An example of a `tip` with a custom _title_.
+```
+.
+<aside class="tip admonition">
+<header class="admonition-title">This is a title</header>
+<p>An example of a <code>tip</code> with a custom <em>title</em>.</p>
+</aside>
+.
+
+nested-admonition
+.
+````{note} This is a note
+```{warning} This is a nested warning
+```
+````
+.
+<aside class="admonition note">
+<header class="admonition-title">Note</header>
+<p>This is a note</p>
+<aside class="admonition warning">
+<header class="admonition-title">Warning</header>
+<p>This is a nested warning</p>
+</aside>
+</aside>
+.
+
+`attention` admonition:
+.
+```{attention}
+An example of a attention admonition.
+```
+.
+<aside class="admonition attention">
+<header class="admonition-title">Attention</header>
+<p>An example of a attention admonition.</p>
+</aside>
+.
+
+`caution` admonition:
+.
+```{caution}
+An example of a caution admonition.
+```
+.
+<aside class="admonition caution">
+<header class="admonition-title">Caution</header>
+<p>An example of a caution admonition.</p>
+</aside>
+.
+
+`danger` admonition:
+.
+```{danger}
+An example of a danger admonition.
+```
+.
+<aside class="admonition danger">
+<header class="admonition-title">Danger</header>
+<p>An example of a danger admonition.</p>
+</aside>
+.
+
+`error` admonition:
+.
+```{error}
+An example of an error admonition.
+```
+.
+<aside class="admonition error">
+<header class="admonition-title">Error</header>
+<p>An example of an error admonition.</p>
+</aside>
+.
+
+`hint` admonition:
+.
+```{hint}
+An example of a hint admonition.
+```
+.
+<aside class="admonition hint">
+<header class="admonition-title">Hint</header>
+<p>An example of a hint admonition.</p>
+</aside>
+.
+
+`important` admonition:
+.
+```{important}
+An example of an important admonition.
+```
+.
+<aside class="admonition important">
+<header class="admonition-title">Important</header>
+<p>An example of an important admonition.</p>
+</aside>
+.
+
+`note` admonition:
+.
+```{note}
+An example of a note admonition.
+```
+.
+<aside class="admonition note">
+<header class="admonition-title">Note</header>
+<p>An example of a note admonition.</p>
+</aside>
+.
+
+`tip` admonition:
+.
+```{tip}
+An example of a tip admonition.
+```
+.
+<aside class="admonition tip">
+<header class="admonition-title">Tip</header>
+<p>An example of a tip admonition.</p>
+</aside>
+.
+
+`warning` admonition:
+.
+```{warning}
+An example of a warning admonition.
+```
+.
+<aside class="admonition warning">
+<header class="admonition-title">Warning</header>
+<p>An example of a warning admonition.</p>
+</aside>
+.
+
+`see also` admonition:
+.
+```{seealso}
+See other things here!
+```
+.
+<aside class="admonition seealso">
+<header class="admonition-title">See Also</header>
+<p>See other things here!</p>
+</aside>
+.
+
+
+`see also` admonition with class, bump title
+.
+```{seealso} Not a title
+:class: tip
+See other things here!
+```
+.
+<aside class="tip admonition seealso">
+<header class="admonition-title">See Also</header>
+<p>Not a title
+See other things here!</p>
+</aside>
+.
+
+
+`see also` admonition with class, bump title new paragraph
+.
+```{seealso} Not a title
+:class: tip
+
+See other things here!
+```
+.
+<aside class="tip admonition seealso">
+<header class="admonition-title">See Also</header>
+<p>Not a title</p>
+<p>See other things here!</p>
+</aside>
+.

tests/fixtures/directives.md

@@ -10,47 +10,6 @@ content
 </pre></aside>
 .
 
-admonition
-.
-```{admonition} A **Title**
-Some *content*
-```
-.
-<aside class="admonition">
-<header class="admonition-title">A <strong>Title</strong></header>
-<p>Some <em>content</em></p>
-</aside>
-.
-
-admonition
-.
-```{seealso}
-See other things here!
-```
-.
-<aside class="admonition seealso">
-<header class="admonition-title">See Also</header>
-<p>See other things here!</p>
-</aside>
-.
-
-nested-admonition
-.
-````{note} This is a note
-```{warning} This is a nested warning
-```
-````
-.
-<aside class="admonition note">
-<header class="admonition-title">Note</header>
-<p>This is a note</p>
-<aside class="admonition warning">
-<header class="admonition-title">Warning</header>
-<p>This is a nested warning</p>
-</aside>
-</aside>
-.
-
 image
 .
 ```{image} https://via.placeholder.com/150

tests/fixturesDirectives.spec.ts

@@ -7,7 +7,11 @@ describe("Parses directives", () => {
   readFixtures("directives").forEach(([name, text, expected]) => {
     const mdit = MarkdownIt().use(docutils_plugin)
     const rendered = mdit.render(text)
-    // console.log(rendered)
+    it(name, () => expect(rendered.trim()).toEqual((expected || "").trim()))
+  })
+  readFixtures("directives.admonitions").forEach(([name, text, expected]) => {
+    const mdit = MarkdownIt().use(docutils_plugin)
+    const rendered = mdit.render(text)
     it(name, () => expect(rendered.trim()).toEqual((expected || "").trim()))
   })
 })
@@ -20,7 +24,6 @@ describe("Parses math directives", () => {
       return `<div class="math block">\n${tokens[idx].content.trimRight()}\n</div>`
     }
     const rendered = mdit.render(text)
-    // console.log(rendered)
     it(name, () => expect(rendered.trim()).toEqual((expected || "").trim()))
   })
 })