Use brace wrapped param

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

Author: birdca

public/js/extra.js

@@ -15,16 +15,19 @@ 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'
 
 /* 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

@@ -30,34 +30,11 @@ const switchListH = {
   ' ': `<div class='cell empty'>${dotEmptyH}</div>`
 }
 
-const getArgument = (argName, content) => {
-  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) => {
+export const renderFretBoard = (content, { title: fretTitle, type }) => {
   const fretboardHTML = $('<div class="fretboard_instance"></div>')
+  const fretType = type.split(' ')
 
-  // parsing arguments
-  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>`))
+  $(fretboardHTML).append($(`<div class="fretTitle">${fretTitle}</div>`))
 
   // create fretboard background HTML
   const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'