Store the parser options for each parser separately

background/background.js

@@ -6,12 +6,14 @@ chrome.storage.sync.get((res) => {
   var match = '\\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*)?$'
 
   var defaults = {
-    compiler: md.marked.defaults,
+    theme: 'github',
+    compiler: 'marked',
+    marked: md.marked.defaults,
+    showdown: md.showdown.defaults,
     content: {
       toc: false,
       scroll: true
     },
-    theme: 'github',
     raw: false,
     match,
     origins: {
@@ -40,8 +42,10 @@ chrome.storage.sync.get((res) => {
     options.content = defaults.content
   }
   // v2.7 -> v2.8
-  if (!options.compiler.name && !options.compiler.options) {
-    options.compiler = md.marked.defaults
+  if (!options.marked && !options.showdown) {
+    options.compiler = 'marked'
+    options.marked = md.marked.defaults
+    options.showdown = md.showdown.defaults
   }
 
   chrome.storage.sync.set(options)
@@ -124,7 +128,7 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
             'var theme = "' + res.theme + '"',
             'var raw = ' + res.raw,
             'var content = ' + JSON.stringify(res.content),
-            'var compiler = "' + res.compiler.name + '"'
+            'var compiler = "' + res.compiler + '"'
           ].join(';'), runAt: 'document_start'})
 
         chrome.tabs.insertCSS(id, {file: 'css/content.css', runAt: 'document_start'})
@@ -147,19 +151,19 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     md[req.compiler].compile(req.markdown, sendResponse)
   }
   else if (req.message === 'settings') {
-    chrome.storage.sync.get(['compiler', 'content', 'theme', 'raw'], sendResponse)
+    chrome.storage.sync.get((res) => {
+      sendResponse({
+        compiler: res.compiler, options: res[res.compiler],
+        content: res.content, theme: res.theme, raw: res.raw
+      })
+    })
   }
   else if (req.message === 'compiler.name') {
-    chrome.storage.sync.set({compiler: md[req.compiler.name].defaults}, sendResponse)
-    sendMessage({message: 'reload'})
-  }
-  else if (req.message === 'compiler.options') {
     chrome.storage.sync.set({compiler: req.compiler}, sendResponse)
     sendMessage({message: 'reload'})
   }
-  else if (req.message === 'compiler.flavor') {
-    req.compiler.options = md.showdown.flavor(req.compiler.flavor)
-    chrome.storage.sync.set({compiler: req.compiler}, sendResponse)
+  else if (req.message === 'compiler.options') {
+    chrome.storage.sync.set({[req.compiler]: req.options}, sendResponse)
     sendMessage({message: 'reload'})
   }
   else if (req.message === 'content') {
@@ -168,9 +172,12 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   }
   else if (req.message === 'defaults') {
     chrome.storage.sync.set({
-      compiler: md.marked.defaults,
+      theme: 'github',
+      compiler: 'marked',
+      marked: md.marked.defaults,
+      showdown: md.showdown.defaults,
       content: {toc: false, scroll: true},
-      theme: 'github', raw: false
+      raw: false
     }, sendResponse)
     sendMessage({message: 'reload'})
   }

background/marked.js

@@ -3,21 +3,18 @@ var md = {}
 
 md.marked = {
   defaults: {
-    name: 'marked',
-    options: {
-      gfm: true,
-      tables: true,
-      breaks: false,
-      pedantic: false,
-      sanitize: false,
-      smartLists: false,
-      langPrefix: 'language-', // prism
-      smartypants: false
-    }
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: false,
+    smartLists: false,
+    langPrefix: 'language-', // prism
+    smartypants: false
   },
   compile: (markdown, sendResponse) => {
-    chrome.storage.sync.get('compiler', (res) => {
-      marked.setOptions(res.compiler.options)
+    chrome.storage.sync.get('marked', (res) => {
+      marked.setOptions(res.marked)
       marked(markdown, (err, html) => {
         if (err) throw err
         sendResponse({message: 'html', html})

background/showdown.js

@@ -1,10 +1,6 @@
 
 md.showdown = {
-  defaults: {
-    name: 'showdown',
-    options: null, // see below
-    flavor: 'github'
-  },
+  defaults: null, // see below,
   flavor: (name) => {
     var options = showdown.getDefaultOptions()
     var flavor = showdown.getFlavorOptions(name)
@@ -15,12 +11,12 @@ md.showdown = {
     return result
   },
   compile: (markdown, sendResponse) => {
-    chrome.storage.sync.get('compiler', (res) => {
-      var converter = new showdown.Converter(res.compiler.options)
+    chrome.storage.sync.get('showdown', (res) => {
+      var converter = new showdown.Converter(res.showdown)
       var html = converter.makeHtml(markdown)
       sendResponse({message: 'html', html})
     })
   }
 }
 
-md.showdown.defaults.options = md.showdown.flavor('github')
+md.showdown.defaults = md.showdown.flavor('github')

content/popup.js

@@ -1,9 +1,10 @@
 
 var state = {
-  compiler: {},
+  compiler: '',
+  options: {},
   content: {},
-  themes: [],
   theme: '',
+  themes: [],
   raw: false,
   tab: ''
 }
@@ -16,7 +17,7 @@ var events = {
 
   compiler: {
     name: (e) => {
-      state.compiler.name = ui.compilers[e.target.selectedIndex]
+      state.compiler = ui.compilers[e.target.selectedIndex]
       chrome.runtime.sendMessage({
         message: 'compiler.name',
         compiler: state.compiler
@@ -25,19 +26,11 @@ var events = {
       })
     },
     options: (e) => {
-      state.compiler.options[e.target.name] = !state.compiler.options[e.target.name]
+      state.options[e.target.name] = !state.options[e.target.name]
       chrome.runtime.sendMessage({
         message: 'compiler.options',
-        compiler: state.compiler
-      })
-    },
-    flavor: (e) => {
-      state.compiler.flavor = ui.flavors[e.target.selectedIndex]
-      chrome.runtime.sendMessage({
-        message: 'compiler.flavor',
-        compiler: state.compiler
-      }, () => {
-        chrome.runtime.sendMessage({message: 'settings'}, init)
+        compiler: state.compiler,
+        options: state.options
       })
     }
   },
@@ -132,6 +125,7 @@ var ui = {
 
 function init (res) {
   state.compiler = res.compiler
+  state.options = res.options
   state.content = res.content
   state.theme = res.theme
 
@@ -150,8 +144,8 @@ function oncreate (vnode) {
   componentHandler.upgradeElements(vnode.dom)
 }
 var onupdate = (tab, key) => (vnode) => {
-  var value = tab === 'compiler' ? state[tab].options[key]
-    : tab === 'content' ? state[tab][key]
+  var value = tab === 'compiler' ? state.options[key]
+    : tab === 'content' ? state.content[key]
     : null
 
   if (vnode.dom.classList.contains('is-checked') !== value) {
@@ -189,19 +183,19 @@ m.mount(document.querySelector('body'), {
         // compiler
         m('.mdl-tabs__panel #tab-compiler', {class: state.tab === 'compiler' ? 'is-active' : null},
           m('select.mdl-shadow--2dp', {onchange: events.compiler.name}, ui.compilers.map((name) =>
-            m('option', {selected: state.compiler.name === name}, name)
+            m('option', {selected: state.compiler === name}, name)
           )),
-          m('.scroll', {class: state.compiler.name},
-            m('.mdl-grid', Object.keys(state.compiler.options || [])
-              .filter((key) => typeof state.compiler.options[key] === 'boolean')
+          m('.scroll', {class: state.compiler},
+            m('.mdl-grid', Object.keys(state.options || [])
+              .filter((key) => typeof state.options[key] === 'boolean')
               .map((key) =>
               m('.mdl-cell',
                 m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
                   {oncreate, onupdate: onupdate('compiler', key),
-                  title: ui.description.compiler[state.compiler.name][key]},
+                  title: ui.description.compiler[state.compiler][key]},
                   m('input[type="checkbox"].mdl-switch__input', {
                     name: key,
-                    checked: state.compiler.options[key],
+                    checked: state.options[key],
                     onchange: events.compiler.options
                   }),
                   m('span.mdl-switch__label', key)