feat(preset-html5): color tag #189, case insensitive tags #190 (#191)

* fix(preset-html5): add color tag #189

* fix(parser): case insensitive tags bug #190

.changeset/silly-frogs-live.md

@@ -0,0 +1,23 @@
+---
+"@bbob/cli": patch
+"@bbob/core": patch
+"@bbob/html": patch
+"@bbob/parser": patch
+"@bbob/plugin-helper": patch
+"@bbob/preset": patch
+"@bbob/preset-html5": patch
+"@bbob/preset-react": patch
+"@bbob/preset-vue": patch
+"@bbob/react": patch
+"@bbob/vue2": patch
+"@bbob/vue3": patch
+---
+
+Now HTML5 Preset supports `color` tag
+
+```
+[color="red"]Red Text[/color]
+```
+
+Also fixes bug with case insensitive tags in `onlyAllowTags`
+Now you can pas `h1` and `H1` and they will be treated as same tags

packages/bbob-parser/src/parse.js

@@ -20,6 +20,9 @@ const parse = (input, opts = {}) => {
   const options = opts;
   const openTag = options.openTag || OPEN_BRAKET;
   const closeTag = options.closeTag || CLOSE_BRAKET;
+  const onlyAllowTags = (options.onlyAllowTags || [])
+    .filter(Boolean)
+    .map((tag) => tag.toLowerCase());
 
   let tokenizer = null;
 
@@ -83,8 +86,8 @@ const parse = (input, opts = {}) => {
    * @return {boolean}
    */
   const isAllowedTag = (value) => {
-    if (options.onlyAllowTags && options.onlyAllowTags.length) {
-      return options.onlyAllowTags.indexOf(value) >= 0;
+    if (onlyAllowTags.length) {
+      return onlyAllowTags.indexOf(value.toLowerCase()) >= 0;
     }
 
     return true;

packages/bbob-parser/test/parse.test.js

@@ -141,6 +141,28 @@ describe('Parser', () => {
 
       expectOutput(ast, output);
     });
+
+    test('parse only allowed tags case insensitive', () => {
+      const ast = parse('[h1 name=value]Foo [Bar] [/h1]', {
+        onlyAllowTags: ['H1']
+      });
+      const output = [
+        {
+          tag: 'h1',
+          attrs: {
+            name: 'value',
+          },
+          content: [
+            'Foo',
+            ' ',
+            '[Bar]',
+            ' '
+          ],
+        },
+      ];
+
+      expectOutput(ast, output);
+    });
   })
 
   describe('contextFreeTags', () => {

packages/bbob-preset-html5/src/defaultTags.js

@@ -87,4 +87,5 @@ export default {
 
     return toNode(type ? 'ol' : 'ul', type ? { type } : {}, asListItems(node.content));
   },
+  color: (node) => toNode('span', toStyle(`color: ${getUniqAttr(node.attrs)};`), node.content),
 };

packages/bbob-preset-html5/test/index.test.js

@@ -77,6 +77,13 @@ describe('@bbob/preset-html5', () => {
     expect(parse(input)).toBe(result);
   });
 
+  test('[color="red"]Red Text[/color]', () => {
+    const input = '[color="red"]Red Text[/color]';
+    const result = '<span style="color: red;">Red Text</span>';
+
+    expect(parse(input)).toBe(result);
+  });
+
   test(`[list][*]Entry 1[/list]`, () => {
     const input = `[list][*]Entry 1[*]Entry 2[/list]`;
     const result = '<ul><li>Entry 1</li><li>Entry 2</li></ul>';