Operators for class directive

[jr-k]

More control over classnames (as described here: #233).

var class = "invert pink embed"; // => "invert pink embed"
var class = "invert -pink embed"; // => "invert embed"
var class = "invert -pink embed +pink"; // => "invert embed pink"

[yhatt]

It does not work as described in #233. This suggestion is expecting the result like following:

---
class: invert pink embed
---

This section should have class attribute as "invert pink embed" 

---

<!-- _class: -pink -->

This section should have class attribute as "invert embed" 

---

<!-- class: +foobar-->

This section should have class attribute as "invert pink embed foobar" 

---

<!-- _class: +lead -->

This section should have class attribute as "invert pink embed foobar lead" 

---

This section should have class attribute as "invert pink embed foobar" 

class directives in the middle of slides will overload the previous value of class. So you should preserve the class value of the previous slide, and operate words in the preserved class.

[jr-k]

Honestly, I'm not familiar with this project, is there any helper available to get that previous class reference inside this function ?

[yhatt]

Because it's private implementation details, we do not provide such a helper for now. It would be a good to keep a markdown-it token with marpitDirectives metadata that was processed previously within for loop.

[jr-k]

In Marp, when I want to set 'invert', I have to put it at the top. However, if I redefine a class for just one slide, I have to put 'invert' again. How can I set 'invert' just once while being able to add a class to a specific slide?

---
theme: default
class: invert
---

# Slide 1

---

<!-- _class: additional-class -->
# Slide 2 has no invert mode

[yhatt]

Current Marpit cannot do that. But It may make easy to implement if could only know the value of the class directive that was determined in a previous slide.

marpit/src/markdown/directives/directives.js

Line 82 in 5645028

class: (v) => ({ class: Array.isArray(v) ? v.join(' ') : v }),

If the already parsed directives can refer within this function, probably the convolution logic of the class value could update just like this:

{
  class: (value, { currentDirectives }) => {
    let currentClass = currentDirectives.class || ''

    const classValues = Array.isArray(value) ? value : value.split(/\s+/);

    classValues.forEach((className) => {
      const normalizedClassName = className.trim();
      if (!normalizedClassName) return

      if (normalizedClassName.startsWith('-')) {
        currentClass = currentClass.replace(new RegExp(`\\s*${normalizedClassName.substr(1)}\\b`, 'g'), '')
      } else if (normalizedClassName.startsWith('+')) {
        currentClass += ` ${normalizedClassName.slice(1)}`
      } else {
        currentClass = normalizedClassName
      }
    })

    return currentClass !== currentDirectives.class ? { class: currentClass } : {}
  },
}

ref. https://marpit.marp.app/directives?id=custom-directives