PostHTML Rich Content

A set of PostHTML plugins to transform rich content.

• Video block
• Element with caption
• Markup filter

They perform a transformation of document tree that PostHTML provides.

import posthtml from 'posthtml';
import filterMarkup from 'posthtml-rich-content/filterMarkup';
import replaceVideo from 'posthtml-rich-content/replaceVideo';
import convertToFigure from 'posthtml-rich-content/convertToFigure';

export default function (b) {
  const processor = posthtml([
    replaceVideo(b),
    convertToFigure(b, 'img'),
    convertToFigure(b, 'blockquote'),
    filterMarkup(b)
  ]);

  return html => processor.process(html, {sync: true}).html;
}

Some of the plugins depend on bem-cn-lite module, which generates proper class names.

Video block

It wraps <iframe> with <div> to make to proportional container

Given:

<iframe src="..." />

Output:

<div class="my-block__video">
  <iframe class="my-block__video-frame" src="..." />
</div>

Usage:

import replaceVideo from 'posthtml-rich-content/replaceVideo';
import block from 'bem-cn-lite';

const b = block('my-block');

replaceVideo(b);

Element with caption

Wrap element with caption into <figure>

Given:

<p><img src="..."/></p>
<p><em>Image Caption</em><p>

or

<p><em><img src="..."/></em></p>
<p><em>Image Caption</em><p>

Output:

<figure class="my-block__figure my-block__figure_type_picture">
  <img class="my-block__figure-content my-block__figure_type_picture" src="...">
  <figcation class="my-block__figure-caption my-block__figure_type_picture">Image Caption</figcaption>
</figure>

Usage:

import convertToFigure from 'posthtml-rich-content/convertToFigure';
import block from 'bem-cn-lite';

const b = block('my-block');

convertToFigure(b, 'img');
convertToFigure(b, 'blockquote');

Markup filter

Add "markup" class to each tag

Given:

<div>
  <p>
    <img src="..." class="picture"/>
  </p>
  <ul>
    <li>Lorem ipsum</li>
  </ul>
</div>

Output:

<div class="my-block__markup-div">
  <p class="my-block__markup-p">
    <img src="..." class="my-block__markup-img picture"/>
  </p>
  <ul class="my-block__markup-ul">
    <li class="my-block__markup-li">Lorem ipsum</li>
  </ul>
</div>

Usage:

import replaceVideo from 'posthtml-rich-content/replaceVideo';
import block from 'bem-cn-lite';
 
const b = block('my-block');
 
filterMarkup(b);