Update development/v0.1.4 branch with diagram creation using textual representation

[chuajiaxuan]

No description provided.

[amoshydra]

I will do a manual merging with dev/encapsulate-viewer-with-iframe and submit a pull-request together.
Putting content into iframe will change how some of the library behave.

[amoshydra]

This pull-request is closed. Do not delete the branch yet.

[amoshydra]

Manual merging is not necessary, using iframe for rendering does not change any behaviour.
We can merge this after reviewing. Reopening this pull-request

[amoshydra]

Looks good.
Added 2 suggestions for this pull-request. You may review the suggestion and merge the pr.

[amoshydra]

Looks like switch case could be beneficial here to remove the need of repeating <pre class="sequence">${token.content}</pre>;

You can consider doing this:

switch (token.info) {
  case 'sequence':
  case 'flow':
  case 'mermaid':
  case 'graphviz':  // fallthrought
    return `<pre class="${token.info}">${token.content}</pre>`;
  default: {
    // pass token to default renderer.
    return defaultRender(tokens, idx, opts, env, self);
  }
}

[chuajiaxuan]

Thanks! You gave me another idea! I store the accepted diagrams library in an array and do this:

if (diagramsLib.includes(token.info)) {
      return `<pre class="${token.info}">${token.content}</pre>`;
}

[amoshydra]

Using innerHTML may not be a good practice here.
In the future, you may consider manipulating the DOM using api like "appendChild", "removeChild" etc.

See:

• http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
• http://stackoverflow.com/questions/7476638/if-people-recommend-i-shouldnt-use-innerhtml-what-then-should-i-instead-use

In this case, you may consider using a for loop to remove all the children inside seqDiagrams[i]

[chuajiaxuan]

Ahh yes yes. I have read about this before! Will go change it! :)