Rulers: Methods

Methods determine how a tag get processed into HTML. Only certain methods works with other, and some with the proper ruler type. In general, method returns either a string of a HTML element (done in CSS naming scheme; see wrap) or is a function that returns a token. Here is a list of the ones we're aware of:

• wrap
• replace
• before
• after

Here we're only discussing the different method types. For actual code on how to process a tag and generate HTML, see _____

See Structure of a Ruler for how to make a Ruler

Functions

Remake entire section into its own page

For the simple way of doing methods, see wrap. Anyway, function allow for tagInfo and content processing. Here is an example:

  md.block.bbcode.ruler.push("print", {
    tag: "print",
    replace: function (state, tagInfo, content) {
      let printOption = tagInfo.attrs['_default'];

      let token = state.push("div_open", "div", 1);
      if (!printOption) {
        token.attrs = [["class", "bbcode-print"]];
      } else {
        token.attrs = [["class", "bbcode-print-" + printOption]];
      }

      token = state.push("inline", "", 0);
      token.content = content;
      token.children = [];

      state.push("div_close", "div", -1);

      return true;
    }
  });

A function in method requires either state or startToken and endToken at the beginning, with the optional arguments tagInfo and content. For those looking at the API, state is just a token. Ignore the weird syntax we have, swapping between state and token, we've been through a lot.

tagInfo.attrs contains the tag arguments, as explained earlier.

Wrap

wrap is the simplest method. Here is an example:

  md.inline.bbcode.ruler.push("highlight", {
    tag: "highlight",
    wrap: "span.bbcodeHighlight"
  });

Here [highlight]text[/highlight] becomes <span class="bbcodeHighlight">text</span>.

wrap in this use case is extremely simple, but not very useful. Instead, we can give it a function similar to every other method.

sfadsf

wrap works with both inline and block level rulers. That being said, in our plugin, we have another function called wrap(), which only works with inline. See ____ for more info

Replace

replace simply replaces the entire BBCode with whatever HTML is generated. Here is an example:

  md.inline.bbcode.ruler.push("ooc", {
    tag: "ooc",
    replace: function (state, tagInfo, content) {

      let token = state.push("div_open", "div", 1);
      token.attrs = [["class", "bbcode-ooc"]];

      state.push("div_open", "div", 1);

      token = state.push("text", "", 0);
      token.content = "OOC";

      state.push("div_close", "div", -1);

      token = state.push("text", "", 0);
      token.content = content;

      state.push("div_close", "div", -1);

      return true;
    }
  });

Before & After

before and after give the greatest amount of control, as it determines what goes before and after a tag without affecting the content inside it.

  md.block.bbcode.ruler.push("border", {
    tag: "border",
    before: function (state, tagInfo) {
      let styleOption = tagInfo.attrs['_default'];
      let token = state.push('div_open', 'div', 1);
      token.attrs = [["class", "bbcode-border"], ["style", "border: " + styleOption]];
    },
    after: function (state) {
      state.push('div_close', 'div', -1);
    }
  });

Unfortunately, this only works with block level rulers. However, it means that it allows blocks to be nested inside each other.