fix(293): [color] tag doesn't work in React (#294)

* fix: react color preset

* chore: changeset great-beds-shop.md

* fix: tests

* chore: text fixes

.changeset/great-beds-shop.md

@@ -0,0 +1,24 @@
+---
+"@bbob/parser": patch
+"@bbob/types": patch
+"@bbob/cli": patch
+"@bbob/core": patch
+"@bbob/html": 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 `React` preset `@bbob/preset-react` supports `color` tag
+
+```js
+import preset from '@bbob/preset-react'
+import { render } from '@bbob/react'
+
+const html = render('[color=#ff0000]This text should be red[/color]', preset());
+```

packages/bbob-preset-react/package.json

@@ -8,6 +8,7 @@
     "react"
   ],
   "dependencies": {
+    "@bbob/plugin-helper": "*",
     "@bbob/preset-html5": "*",
     "@bbob/types": "*"
   },
@@ -15,6 +16,7 @@
     "react": "> 15.0"
   },
   "devDependencies": {
+    "@bbob/core": "*",
     "react": "18.x",
     "react-dom": "18.x",
     "@types/react": "18.x"

packages/bbob-preset-react/src/index.ts

@@ -1,4 +1,5 @@
 import presetHTML5 from '@bbob/preset-html5';
+import { getUniqAttr } from "@bbob/plugin-helper";
 
 import type { PresetTagsDefinition } from '@bbob/types';
 
@@ -30,6 +31,11 @@ const presetReact = presetHTML5.extend<PresetTagsDefinition>((tags) => ({
     ...tags.s(...args),
     ...tagAttr({ textDecoration: 'line-through' }),
   }),
+
+  color: (...args) => ({
+    ...tags.color(...args),
+    ...tagAttr({ color: String(getUniqAttr(args[0].attrs)) }),
+  })
 }));
 
 export default presetReact;

packages/bbob-preset-react/test/index.test.ts

@@ -1,7 +1,51 @@
+import bbob from '@bbob/core';
 import preset from '../src'
 
+const instance = bbob(preset())
+
+const createTag = (content: string[], style: Record<string, string>) => {
+  return {
+    "attrs": { "style": style },
+    "content": content,
+    "tag": "span",
+    "end": undefined,
+    "start": undefined,
+  }
+}
+
 describe('@bbob/preset-react', () => {
   test('is a function', () => {
     expect(preset).toBeInstanceOf(Function)
   })
+
+  test('is parses [b] tag correctly', () => {
+    const res = instance.process('[b]bold[/b]')
+    const tags = [...res.tree]
+
+    expect(tags).toEqual([createTag(["bold"], { fontWeight: 'bold' })]);
+  });
+  test('is parses [i] tag correctly', () => {
+    const res = instance.process('[i]italic[/i]')
+    const tags = [...res.tree]
+
+    expect(tags).toEqual([createTag(["italic"], { fontStyle: 'italic' })]);
+  });
+  test('is parses [u] tag correctly', () => {
+    const res = instance.process('[u]underline[/u]')
+    const tags = [...res.tree]
+
+    expect(tags).toEqual([createTag(["underline"], { textDecoration: 'underline' })]);
+  });
+  test('is parses [s] tag correctly', () => {
+    const res = instance.process('[s]strike[/s]')
+    const tags = [...res.tree]
+
+    expect(tags).toEqual([createTag(["strike"], { textDecoration: 'line-through' })]);
+  });
+  test('is parses [color] tag correctly', () => {
+    const res = instance.process('[color=#ff0000]This text should be red[/color]')
+    const tags = [...res.tree]
+
+    expect(tags).toEqual([createTag(["This", " ", "text", " ", "should", " ", "be", " ", "red"], { color: '#ff0000' })]);
+  });
 });

pnpm-lock.yaml

@@ -418,6 +418,9 @@ importers:
 
   packages/bbob-preset-react:
     dependencies:
+      '@bbob/plugin-helper':
+        specifier: '*'
+        version: link:../bbob-plugin-helper
       '@bbob/preset-html5':
         specifier: '*'
         version: link:../bbob-preset-html5
@@ -425,6 +428,9 @@ importers:
         specifier: '*'
         version: link:../bbob-types
     devDependencies:
+      '@bbob/core':
+        specifier: '*'
+        version: link:../bbob-core
       '@types/react':
         specifier: 18.x
         version: 18.3.20