feat: support spoiler tag, resolves #301

packages/bbob-preset-html5/README.md

@@ -1 +1,16 @@
 Preset to render BBCode to HTML tags
+
+## Spoiler Tag
+
+The `[spoiler]` tag renders text hidden behind a black box. The text is invisible by default using inline styles (`background-color: #000; color: transparent`), so it works out of the box without any additional CSS.
+
+To enable reveal-on-hover, add this CSS rule:
+
+```css
+.bb-spoiler:hover {
+  color: inherit;
+  background-color: inherit;
+}
+```
+
+**Why a class?** CSS `:hover` pseudo-selectors cannot be expressed via inline styles (which is the only styling BBob produces), so the tag uses a `bb-spoiler` class to allow hover styling on your own.

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

@@ -129,6 +129,8 @@ export const defaultTags = (function createTags() {
     },
     color: (node) =>
         toNode("span", toStyle(`color: ${getUniqAttr(node.attrs)};`), node.content),
+    spoiler: (node) =>
+        toNode("span", { class: "bb-spoiler", ...toStyle("background-color: #000; color: transparent;") }, node.content),
     size: (node) =>
         toNode("span", toStyle(`font-size: ${toEm(getUniqAttr(node.attrs))};`), node.content),
   }

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

@@ -140,6 +140,11 @@ describe('@bbob/preset-html5', () => {
     expect(parse(input)).toBe(result);
   });
 
+  test('[spoiler]hidden text[/spoiler]', () => {
+    const input = '[spoiler]hidden text[/spoiler]';
+    const result = '<span class="bb-spoiler" style="background-color: #000; color: transparent;">hidden text</span>';
+  });
+
   test('[size=20]test 20[/size]', () => {
     const input = '[size=20]test 20[/size]';
     const result = '<span style="font-size: 2em;">test 20</span>';
@@ -155,7 +160,6 @@ describe('@bbob/preset-html5', () => {
   test(`[table][/table]`, () => {
     const input = `[table][tr][td]table 1[/td][td]table 2[/td][/tr][tr][td]table 3[/td][td]table 4[/td][/tr][/table]`;
     const result = `<table><tr><td>table 1</td><td>table 2</td></tr><tr><td>table 3</td><td>table 4</td></tr></table>`;
-
     expect(parse(input)).toBe(result);
   });
 });

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

@@ -37,6 +37,11 @@ const presetReact = presetHTML5.extend<PresetTagsDefinition>((tags) => ({
     ...tagAttr({ color: String(getUniqAttr(args[0].attrs)) }),
   }),
 
+  spoiler: (...args) => ({
+    ...tags.spoiler(...args),
+    ...tagAttr({ backgroundColor: '#000', color: 'transparent' }),
+  }),
+
   size: (...args) => ({
     ...tags.size(...args),
     ...tagAttr({ fontSize: String(getUniqAttr(args[0].attrs)) }),

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

@@ -31,6 +31,11 @@ export const createTags = (tags: PresetTagsDefinition<string>) => {
       ...tagAttr({ textDecoration: 'line-through' }),
     }),
 
+    spoiler: (...args) => ({
+      ...tags.spoiler?.(...args),
+      ...tagAttr({ backgroundColor: '#000', color: 'transparent' }),
+    }),
+
     size: (...args) => ({
       ...tags.size?.(...args),
       ...tagAttr({ fontSize: String(getUniqAttr(args[0].attrs)) }),