Use brace wrapped param

Signed-off-by: Ca Chen <kiancaca@gmail.com>

public/js/extra.js

@@ -15,7 +15,12 @@ import { stripTags } from '../../utils/string'
 
 import getUIElements from './lib/editor/ui-elements'
 import { emojifyImageDir } from './lib/editor/constants'
-import { parseFenceCodeParams, serializeParamToAttribute } from './lib/markdown/utils'
+import {
+  parseFenceCodeParams,
+  serializeParamToAttribute,
+  deserializeParamAttributeFromElement
+} from './lib/markdown/utils'
+import { renderFretBoard } from './lib/renderer/fretboard/fretboard'
 
 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
@@ -23,8 +28,6 @@ import markdownitContainer from 'markdown-it-container'
 /* Defined regex markdown it plugins */
 import Plugin from 'markdown-it-regexp'
 
-import { renderFretBoard } from './lib/renderer/fretboard/fretboard.js'
-
 require('prismjs/themes/prism.css')
 require('prismjs/components/prism-wiki')
 require('prismjs/components/prism-haskell')
@@ -488,11 +491,12 @@ export function finishView (view) {
   // fretboard
   const fretboard = view.find('div.fretboard_instance.raw').removeClass('raw')
   fretboard.each((key, value) => {
+    const params = deserializeParamAttributeFromElement(value)
     const $value = $(value)
 
     try {
       const $ele = $(value).parent().parent()
-      $ele.html(renderFretBoard($value.text()))
+      $ele.html(renderFretBoard($value.text(), params))
     } catch (err) {
       $value.unwrap()
       $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@@ -1052,7 +1056,8 @@ const fenceCodeAlias = {
   mermaid: 'mermaid',
   abc: 'abc',
   vega: 'vega',
-  geo: 'geo'
+  geo: 'geo',
+  fretboard: 'fretboard_instance'
 }
 
 function highlightRender (code, lang) {

public/js/lib/renderer/fretboard/css/i.css

@@ -1 +1 @@
-.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.svg_wrapper{background-color:#fff;position:relative;height:0}.svg_wrapper svg.fretboard_bg{position:absolute;top:0;left:0;z-index:0}.svg_wrapper .cells{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.svg_wrapper.v4{padding-top:91.6666666667%}.svg_wrapper.v5{padding-top:106.9444444444%}.svg_wrapper.v7{padding-top:137.5%}.svg_wrapper.v9{padding-top:168.0555555556%}.svg_wrapper.v12{padding-top:213.8888888889%}.svg_wrapper.v15{padding-top:259.7222222222%}.svg_wrapper.v .cell svg{width:12.5%;float:left;display:block}.svg_wrapper.v4 .cell svg{height:16.6666666667%}.svg_wrapper.v5 .cell svg{height:14.2857142857%}.svg_wrapper.v7 .cell svg{height:11.1111111111%}.svg_wrapper.v9 .cell svg{height:9.0909090909%}.svg_wrapper.v12 .cell svg{height:7.1428571429%}.svg_wrapper.v15 .cell svg{height:5.8823529412%}.svg_wrapper.h5{padding-top:85.7142857143%}.svg_wrapper.h6{padding-top:75%}.svg_wrapper.h7{padding-top:72.7272727273%}.svg_wrapper.h .cell svg{height:12.5%;float:left;display:block;z-index:2}.svg_wrapper.h5 .cell svg{width:14.2857142857%}.svg_wrapper.h6 .cell svg{width:12.5%}.svg_wrapper.h7 .cell svg{width:12.1212121212%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.25}.fretboard_bg .fret_bg rect{fill:#fff}.fretboard_bg .frets rect{fill:#ddd}.fretboard_bg .nut rect{fill:#6e6e6e}.fretboard_bg .strings rect{fill:#6e6e6e}.svg_wrapper.noNut .fretboard_bg .nut rect{fill:none}/*# sourceMappingURL=i.css.map */
+.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:26px;margin:10px 0 15px 0;padding:5px;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.svg_wrapper{background-color:#fff;position:relative;height:0}.svg_wrapper svg.fretboard_bg{position:absolute;top:0;left:0;z-index:0}.svg_wrapper .cells{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.svg_wrapper.v4{padding-top:91.6666666667%}.svg_wrapper.v5{padding-top:106.9444444444%}.svg_wrapper.v7{padding-top:137.5%}.svg_wrapper.v9{padding-top:168.0555555556%}.svg_wrapper.v12{padding-top:213.8888888889%}.svg_wrapper.v15{padding-top:259.7222222222%}.svg_wrapper.v .cell svg{width:12.5%;float:left;display:block}.svg_wrapper.v4 .cell svg{height:16.6666666667%}.svg_wrapper.v5 .cell svg{height:14.2857142857%}.svg_wrapper.v7 .cell svg{height:11.1111111111%}.svg_wrapper.v9 .cell svg{height:9.0909090909%}.svg_wrapper.v12 .cell svg{height:7.1428571429%}.svg_wrapper.v15 .cell svg{height:5.8823529412%}.svg_wrapper.h5{padding-top:85.7142857143%}.svg_wrapper.h6{padding-top:75%}.svg_wrapper.h7{padding-top:72.7272727273%}.svg_wrapper.h .cell svg{height:12.5%;float:left;display:block;z-index:2}.svg_wrapper.h5 .cell svg{width:14.2857142857%}.svg_wrapper.h6 .cell svg{width:12.5%}.svg_wrapper.h7 .cell svg{width:12.1212121212%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.25}.fretboard_bg .fret_bg rect{fill:#fff}.fretboard_bg .frets rect{fill:#ddd}.fretboard_bg .nut rect{fill:#6e6e6e}.fretboard_bg .strings rect{fill:#6e6e6e}.svg_wrapper.noNut .fretboard_bg .nut rect{fill:none}/*# sourceMappingURL=i.css.map */

public/js/lib/renderer/fretboard/fretboard.js

@@ -30,34 +30,11 @@ const switchListH = {
   ' ': `<div class='cell empty'>${dotEmptyH}</div>`
 }
 
-const getArgument = (argName, content) => {
+export const renderFretBoard = (content, { title: fretTitle, type }) => {
-  const lineOfContent = content.data.split('\n')
-
-  let argv = ''
-  let idx = ''
-  for (idx in lineOfContent) {
-    if (lineOfContent[idx].startsWith(argName)) {
-      argv = lineOfContent[idx].split(argName)[1].trim()
-      break
-    }
-  }
-
-  lineOfContent.splice(idx, 1)
-  content.data = lineOfContent.join('\n')
-
-  return argv
-}
-
-export const renderFretBoard = (data) => {
   const fretboardHTML = $('<div class="fretboard_instance"></div>')
+  const fretType = type.split(' ')
 
-  // parsing arguments
+  $(fretboardHTML).append($(`<div class="fretTitle">${fretTitle}</div>`))
-  let content = { data: data }
-  const getTitle = getArgument('title:', content)
-  const fretType = getArgument('type:', content).split(' ')
-  content = content.data
-
-  $(fretboardHTML).append($(`<div class="fretTitle">${getTitle}</div>`))
 
   // create fretboard background HTML
   const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'