feature state: add proper style rendering

Author: nam

browser/components/MarkdownPreview.js

@@ -870,7 +870,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.state'),
       el => {
-        stateRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
+        stateRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
       }
     )
 

browser/components/markdown.styl

@@ -71,7 +71,7 @@ body
     padding 5px
     margin -5px
     border-radius 5px
-  .flowchart-error, .sequence-error .chart-error
+  .flowchart-error, .sequence-error .chart-error, .state-error
     background-color errorBackgroundColor
     color errorTextColor
     padding 5px
@@ -238,6 +238,8 @@ pre
       overflow-x auto
   &.mermaid svg
     max-width 100% !important
+  &.state svg
+    max-width 100% !important
   &>span.filename
     margin -0.5rem 100% 0.5rem -0.5rem
     padding 0.125rem 0.375rem
@@ -414,7 +416,7 @@ dd + dd
 pre.fence
   flex-wrap wrap
 
-  .chart, .flowchart, .mermaid, .sequence
+  .chart, .flowchart, .mermaid, .sequence, .state
     display flex
     justify-content center
     background-color white

browser/components/render/StateRender.js

@@ -1,6 +1,6 @@
 const smcat = require('state-machine-cat')
 
-function render (element, content, theme, enableHTMLLabel) {
+function render (element, content, theme) {
   try {
     const height = element.attributes.getNamedItem('data-height')
     if (height && height.value !== 'undefined') {
@@ -10,10 +10,10 @@ function render (element, content, theme, enableHTMLLabel) {
     element.innerHTML = renderedOutput
   } catch (e) {
     element.className = 'state-error'
-    element.innerHTML = 'error: ' + e.message
+    element.innerHTML = 'state rendering error: ' + e.message
   }
 }
 
-// TODO: add method to scale svg depending on given html size
+// TODO nammn for future: add method to scale svg depending on given html size
 
 export default render

browser/lib/markdown.js

@@ -180,6 +180,12 @@ class Markdown {
           <span class="filename">${token.fileName}</span>
           <div class="sequence" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
+      },
+      state: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="state" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
       }
     }, token => {
       return `<pre class="code CodeMirror" data-line="${token.map[0]}">