diff --git a/.changeset/great-beds-shop.md b/.changeset/great-beds-shop.md new file mode 100644 index 0000000..3b37b5e --- /dev/null +++ b/.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()); +``` diff --git a/packages/bbob-preset-react/package.json b/packages/bbob-preset-react/package.json index 0da701b..1bbaa7b 100644 --- a/packages/bbob-preset-react/package.json +++ b/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" diff --git a/packages/bbob-preset-react/src/index.ts b/packages/bbob-preset-react/src/index.ts index c2c8e23..19dfa4a 100644 --- a/packages/bbob-preset-react/src/index.ts +++ b/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((tags) => ({ ...tags.s(...args), ...tagAttr({ textDecoration: 'line-through' }), }), + + color: (...args) => ({ + ...tags.color(...args), + ...tagAttr({ color: String(getUniqAttr(args[0].attrs)) }), + }) })); export default presetReact; diff --git a/packages/bbob-preset-react/test/index.test.ts b/packages/bbob-preset-react/test/index.test.ts index fc7f885..1c4c01e 100644 --- a/packages/bbob-preset-react/test/index.test.ts +++ b/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) => { + 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' })]); + }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2be080..4c63301 100644 --- a/pnpm-lock.yaml +++ b/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