Merge pull request #144 from yorkxin/tab-group-indent-style

Add an option for tab groups indentation

src/background.js

@@ -54,6 +54,7 @@ async function refreshMarkdownInstance() {
   }
   markdownInstance.alwaysEscapeLinkBracket = settings.alwaysEscapeLinkBrackets;
   markdownInstance.unorderedListChar = unorderedListChar;
+  markdownInstance.nestedListIndentation = settings.styleOfTabGroupIndentation;
 }
 
 async function flashBadge(type) {

src/lib/markdown.js

@@ -1,12 +1,25 @@
+const INDENT_STYLE_SPACES = 'spaces';
+const INDENT_STYLE_TAB = 'tab';
+
 /* eslint-disable no-underscore-dangle */
 export default class Markdown {
   static DefaultTitle() {
     return '(No Title)';
   }
 
-  constructor({ alwaysEscapeLinkBracket = false, unorderedListChar = '-' } = {}) {
+  /**
+   * @param alwaysEscapeLinkBracket {Boolean}
+   * @param unorderedListChar {'-'|'*'|'+'}
+   * @param indentation {'spaces'|'tab'}
+   */
+  constructor({
+    alwaysEscapeLinkBracket = false,
+    unorderedListChar = '-',
+    indentation = INDENT_STYLE_SPACES,
+  } = {}) {
     this._alwaysEscapeLinkBracket = alwaysEscapeLinkBracket;
     this._unorderedListChar = unorderedListChar;
+    this._indentation = indentation;
   }
 
   /**
@@ -145,19 +158,32 @@ export default class Markdown {
    *
    * @param items {string[]|string[][]}
    * @param prefix {string}
-   * @param indent {number}
+   * @param level {number}
    * @return {string}
    */
-  nestedList(items, prefix, indent = 0) {
-    let spaces = '';
-    for (let i = 0; i < indent; i += 1) {
-      spaces += ' ';
+  nestedList(items, prefix, level = 0) {
+    let renderedIndents = '';
+    let indent = '';
+    if (this._indentation === INDENT_STYLE_SPACES) {
+      // Two spaces, happens to work because we only support unordered list.
+      // It will break if we are going to support ordered list, in which the spaces to use
+      // depend on the length of prefix characters in the parent level.
+      indent = '  ';
+    } else if (this._indentation === INDENT_STYLE_TAB) {
+      indent = '\t';
+    } else {
+      throw new TypeError(`Invalid indent style ${this._indentation}`);
+    }
+
+    for (let i = 0; i < level; i += 1) {
+      renderedIndents += indent;
     }
+
     return items.map((item) => {
       if (item instanceof Array) {
-        return this.nestedList(item, prefix, indent + 2);
+        return this.nestedList(item, prefix, level + 1);
       }
-      return `${spaces}${prefix} ${item}`;
+      return `${renderedIndents}${prefix} ${item}`;
     }).join('\n');
   }
 
@@ -176,4 +202,15 @@ export default class Markdown {
   set unorderedListChar(value) {
     this._unorderedListChar = value;
   }
+
+  get nestedListIndentation() {
+    return this._indentation;
+  }
+
+  set nestedListIndentation(value) {
+    this._indentation = value;
+  }
 }
+
+Markdown.INDENT_STYLE_SPACES = INDENT_STYLE_SPACES;
+Markdown.INDENT_STYLE_TABS = INDENT_STYLE_TAB;

src/lib/settings.js

@@ -1,5 +1,6 @@
 const SKLinkTextAlwaysEscapeBrackets = 'linkTextAlwaysEscapeBrackets';
 const SKStyleOfUnorderedList = 'styleOfUnorderedList ';
+const SKStyleTabGroupIndentation = 'style.tabgroup.indentation ';
 
 /**
  * Singleton Settings object in the sync storage
@@ -16,6 +17,13 @@ export default {
     this.publishUpdated();
   },
 
+  async setStyleTabGroupIndentation(value) {
+    await this.syncStorage.set({
+      [SKStyleTabGroupIndentation]: value,
+    });
+    this.publishUpdated();
+  },
+
   async setStyleOfUnrderedList(value) {
     await this.syncStorage.set({
       [SKStyleOfUnorderedList]: value,
@@ -37,11 +45,13 @@ export default {
     const all = await this.syncStorage.get({
       [SKLinkTextAlwaysEscapeBrackets]: false,
       [SKStyleOfUnorderedList]: 'dash',
+      [SKStyleTabGroupIndentation]: 'spaces',
     });
 
     return {
       alwaysEscapeLinkBrackets: all[SKLinkTextAlwaysEscapeBrackets],
       styleOfUnorderedList: all[SKStyleOfUnorderedList],
+      styleOfTabGroupIndentation: all[SKStyleTabGroupIndentation],
     };
   },
 

src/ui/options.html

@@ -29,6 +29,28 @@ <h2 class="is-size-4">Style</h2>
       </label>
     </div>
   </form>
+  <form id='form-style-of-tab-group-indentation' class="field">
+    <label class="label">Tab Group Indentation</label>
+    <div class="control">
+      <label class="radio">
+        <input type="radio" name="indentation" value="spaces" />
+        Spaces
+      </label>
+    </div>
+    <div class="control">
+      <label class="radio">
+        <input type="radio" name="indentation" value="tab" />
+        Tab
+      </label>
+    </div>
+    <p class="help">
+      CommonMark uses spaces to indent nested lists, which are used when exporting tabs along with tab groups.
+      The number of spaces required depends on the leading characters of the parent item.
+      If your Markdown processor prefers <kbd>tab</kbd> (<code>\t</code>) characters for indentation,
+      choose <strong>Tab</strong> so that Copy as Markdown outputs tabs for indentation.
+      Please note that this option does not affect indentations in the output of Copy Selection as Markdown.
+    </p>
+  </form>
   <hr/>
   <h2 class="is-size-4">Advanced</h2>
   <form id="form-link-text-always-escape-brackets" class="field">    

src/ui/options.js

@@ -6,12 +6,21 @@ function loadSettings() {
       .checked = settings.alwaysEscapeLinkBrackets;
     document.forms['form-style-of-unordered-list'].elements.character
       .value = settings.styleOfUnorderedList;
+    document.forms['form-style-of-tab-group-indentation'].elements.indentation
+      .value = settings.styleOfTabGroupIndentation;
   }).catch((error) => {
     console.error('error getting settings', error);
   });
 }
 
+function hideUnsupportedFeatures() {
+  if (typeof chrome.tabGroups === 'undefined') {
+    document.forms['form-style-of-tab-group-indentation'].style.display = 'none';
+  }
+}
+
 document.addEventListener('DOMContentLoaded', loadSettings);
+document.addEventListener('DOMContentLoaded', hideUnsupportedFeatures);
 
 document.forms['form-link-text-always-escape-brackets'].addEventListener('change', (event) => {
   Settings.setLinkTextAlwaysEscapeBrackets(event.target.checked)
@@ -22,6 +31,15 @@ document.forms['form-link-text-always-escape-brackets'].addEventListener('change
     });
 });
 
+document.forms['form-style-of-tab-group-indentation'].addEventListener('change', (event) => {
+  Settings.setStyleTabGroupIndentation(event.target.value)
+    .then(() => {
+      console.info('settings saved');
+    }, (error) => {
+      console.error('failed to save settings:', error);
+    });
+});
+
 document.forms['form-style-of-unordered-list'].addEventListener('change', (event) => {
   Settings.setStyleOfUnrderedList(event.target.value)
     .then(() => {

test/markdown.test.js

@@ -17,6 +17,18 @@ describe('Markdown', () => {
       const markdown = new Markdown({ unorderedListChar: '*' });
       assert.equal(markdown.list(['a', 'b', 'c']), '* a\n* b\n* c');
     });
+
+    describe('nested list', () => {
+      it('works', () => {
+        const markdown = new Markdown();
+        assert.equal(markdown.list(['a', 'b', ['c', 'd'], 'e', ['f']]), '- a\n- b\n  - c\n  - d\n- e\n  - f');
+      });
+
+      it('can set indentation style', () => {
+        const markdown = new Markdown({ indentation: Markdown.INDENT_STYLE_TABS });
+        assert.equal(markdown.list(['a', 'b', ['c', 'd'], 'e', ['f']]), '- a\n- b\n\t- c\n\t- d\n- e\n\t- f');
+      });
+    });
   });
 
   describe('taskList()', () => {