Is there any way to get outerHTML of the node?

[SilentImp]

Hi,
I want render some nodes as html … well leaving them as is. Is it possible?

    const page = `
    <figure>
          <img src="/media-narrow.png" width="800" height="400" alt="A stacked component, image on the top, text below" />
      <figcaption>The component as a single column</figcaption>
    </figure>
    `;
    const breakdance = new Breakdance();
    breakdance.before(['figure'], function(node) {
      this.emit(`I DONT KNOW HOW TO PUT NODE INNER HTML HERE`, node);
    });
    const md = breakdance.render(page);

Also I think that would be nice transform this to:

    ![A stacked component, image on the top, text below][The component as a single column]
    [The component as a single column]: /media-narrow.png "A stacked component, image on the top, text below"

But not sure how to solve this

[jonschlinkert]

That's doable, although I'm not sure why you'd use a figcaption as the id for an image reference link. Do you still want the figcaption to display with the figure?

[jonschlinkert]

Try this:

const page = `<figure>
  <img src="/media-narrow.png" width="800" height="400" alt="A stacked component, image on the top, text below" />
  <figcaption>The component as a single column</figcaption>
</figure>`;

const breakdance = new Breakdance();

breakdance.set('figure', function(node) {
  const context = {};
  const stack = [];

  visit(node, child => {
    switch (child.type) {
      case 'figcaption.open':
        stack.push(child);
        break;
      case 'figcaption.close':
        stack.pop();
        break;
      case 'img':
        context.img = child;
        break;
      case 'text':
        if (stack.length) {
          context.figcaption = child;
          // console.log('inside <figcaption>', [child.val]);
        } else {
          // console.log('outside <figcaption>', [child.val]);
        }
        break;
      default: {
        // console.log('OTHER:', child.type)
        break;
      }
    }
  });

  const img = context.img.attribs;
  const value = `![${img.alt}][${context.figcaption.val}]\n[${context.figcaption.val}]: ${img.src} "${img.alt}"`;
  this.emit(value, node);
});

const md = breakdance.render(page);
console.log(md);

function visit(node, fn) {
  fn(node);
  return node.nodes ? mapVisit(node, fn) : node;
}

function mapVisit(node, fn) {
  for (const child of node.nodes) visit(child, fn);
  return node;
}

Basically, since the figcaption node is a child of figure (meaning figcaption comes after figure), but you want to combine the values from both nodes, rather than rendering them in order, we need to create a stack to capture the information we need, then we can re-order the values however we want.