feat: support lightdown syntax in option descriptions

closes #5

Author: fent

README.md

@@ -65,7 +65,7 @@ Options can all have the following properties,
 
 * `string` - `type` - What type of option this is, more info below. Defaults to "checkbox".
 * `string` - `name` - Required. What to save the key as. Also used as class name to add to field containers, in case you'd like to style it further.
-* `string` - `desc`
+* `string` - `desc` - Description of option, supports syntax from [lightdown](https://github.com/WebReflection/lightdown), a markdown-like language.
 * `string` - `preview` - A preview image. Represents the extension of the image, example "png". If this is used, the image must be placed in a `previews` folder where `options.html` is, and named the name as this option's key, which is its name prepended by tab name if any.
 * `Object` - `default` - Default value.
 * `boolean` - `disabled` - The field can be disabled.
@@ -143,7 +143,7 @@ Similar to checkbox with `options`, but without the checkbox. Not just for aesth
 ![list](images/complex_list.png)
 
 * `Array.<Object>` - `fields` - Required. List of fields for this list.
-  * `string` - `type` - Only basic field types listed above and custom fields supported.
+  * `string` - `type` - Only basic fields, layout types, and custom fields supported.
   * `string` - `name` - Required for non-layout types.
   * `boolean` - `required` - Set to true if you require this particular field to be a truthy value for this row to be saved.
   * `Object` - `bindTo` - Will only display this field if another field with name matching `bindTo.field` has the value `bindTo.value`, which can be be a string or an array of strings.

package-lock.json

@@ -32,6 +32,7 @@
     "css-loader": "^1.0.0",
     "dragula": "^3.7.2",
     "file-loader": "^2.0.0",
+    "lightdown": "^0.5.3",
     "style-loader": "^0.23.0",
     "url-loader": "^1.1.1",
     "webpack": "^4.20.2",

package.json

@@ -5,12 +5,19 @@ import * as dom from './dom.js';
 import dragula from 'dragula';
 require('dragula/dist/dragula.css');
 
+import lightdown from 'lightdown';
+
 chrome.options = {};
 chrome.options.base = {};
 chrome.options.fields = {};
 
 const addH3 = (option) => h('h3', option.desc);
 const addHtml = (option) => h('', { innerHTML: option.html });
+const parseDesc = (desc) => ({
+  innerHTML: lightdown(
+    desc.replace(/[<>]/g, m => ({'<': '&lt;', '>': '&gt;'}[m]))
+  )
+});
 
 chrome.options.addOption = (key, value, save, option) => {
   if (value === undefined && option.default != null) {
@@ -133,7 +140,7 @@ chrome.options.base.checkbox = (value, save, option, key) => {
     });
   }
 
-  $label.append(h('span', option.desc));
+  $label.append(h('span', parseDesc(option.desc)));
   return $container;
 };
 
@@ -173,13 +180,13 @@ chrome.options.base.checkboxNField = (value, save, option, type) => {
   }, option));
 
   if (option.desc) {
-    $container.append(h('label', option.desc));
+    $container.append(h('label', parseDesc(option.desc)));
   }
   return $container;
 };
 
 chrome.options.base.object = (value, save, option, key) => {
-  const $container = h('.object', h('label', option.desc));
+  const $container = h('.object', h('label', parseDesc(option.desc)));
   $container.append(addOptions(value, save, option, key));
   return $container;
 };
@@ -204,9 +211,7 @@ const addOptions = (value, save, option, key) => {
 };
 
 chrome.options.addLabelNField = (value, save, option) => {
-  const $label = h('label');
-  $label.innerHTML = option.desc || '';
-  const $container = h('.suboption', $label);
+  const $container = h('.suboption', h('label', parseDesc(option.desc)));
   const $field = chrome.options.addField(value, save, option);
   $container.append(h('.field-container', $field));
   $container.classList.add(option.singleline ? 'singleline' : 'multiline');
@@ -218,7 +223,8 @@ chrome.options.base.list = (list, save, options, key) => {
   let $wrapper, shown = true;
 
   if (options.desc) {
-    const $label = $container.appendChild(h('label', options.desc));
+    const $label =
+      $container.appendChild(h('label', parseDesc(options.desc)));
     if (options.collapsible) {
       shown = false;
       const $triangle = h('span.triangle', {
@@ -251,7 +257,7 @@ chrome.options.base.list = (list, save, options, key) => {
     let prevfield;
     options.fields.forEach((field) => {
       if (!field.bindTo || !prevfield.bindTo) {
-        const $container = heads[field.name] = h('div', field.desc);
+        const $container = heads[field.name] = h('div', parseDesc(field.desc));
         $thead.append(h('th', $container));
       } else {
         heads[field.name] = heads[prevfield.name];