# Using AI to create Hide content bbcode wrapper

**URL:** https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078
**Category:** Development
**Created:** [August 11, 2024, 1:33am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078 "2024-08-11T01:33:25Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 11, 2024, 1:33am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/1 "2024-08-11T01:33:25Z")

</div>

> **[‎Gemini - direct access to Google AI](https://gemini.google.com/share/abc8a268856b)**
>
> Created with Gemini

Using generic bbcode wrapper create theme component that hides content if not in group string variable

Show drafts

Creating a Generic BBCode Wrapper and Theme Component  
Understanding the Requirements  
Based on your request, we’ll create:

A generic BBCode wrapper that can accept custom attributes.  
A theme component that hides content based on a group string variable passed to the BBCode wrapper.  
Implementing the BBCode Wrapper  
We’ll create a BBCode wrapper that can accept arbitrary attributes. These attributes will be passed to the theme component for evaluation.

Ruby

```plaintext
# config/initializers/bbcode.rb
Discourse::Plugins::BBCode.add_parser(:hide_if_not_in_group) do |tag, content|
  attributes = tag.attributes || {}
  "<div class='hide-if-not-in-group' data-group-names='#{attributes[:groups]}'>#{content}</div>"
end

```

Use code with caution.

Creating the Theme Component  
The theme component will check if the current user belongs to any of the groups specified in the data-group-names attribute. If not, it will hide the content.

JavaScript

```plaintext
// app/assets/javascripts/discourse/components/hide-if-not-in-group.js
import Component from 'discourse/components/component';

export default Component.extend({
  tagName: 'div',
  classNames: ['hide-if-not-in-group'],

  didInsertElement() {
    const currentUserId = Discourse.currentUser.id;
    const groupNames = this.element.dataset.groupNames.split(',');

    // Function to check if user is in any of the specified groups
    const userIsInAnyGroup = (userId, groupNames) => {
      // Replace this with your logic to check user group membership
      // For example, using Discourse's API or custom logic
      return groupNames.some(groupName => {
        // Check if user is in the group named `groupName`
        // Return true if the user is in the group, otherwise false
      });
    };

    if (!userIsInAnyGroup(currentUserId, groupNames)) {
      this.element.style.display = 'none';
    }
  }
});

```

Use code with caution.

Using the BBCode  
You can use the BBCode like this:

```plaintext
[hide_if_not_in_group groups="staff,moderators"]
This content is hidden for users who are not staff or moderators.
[/hide_if_not_in_group]

```

Important Considerations  
Group membership check: Replace the placeholder logic for checking user group membership with your actual implementation. You might need to use Discourse’s API or custom logic to determine group membership.  
Performance: For large numbers of users or groups, optimizing the group membership check might be necessary.  
Security: Ensure proper validation and sanitization of group names to prevent security vulnerabilities.  
Flexibility: Consider allowing additional attributes for the BBCode to control other behaviors (e.g., showing a message instead of hiding content).  
By following these steps, you’ll have a flexible BBCode wrapper and theme component that can hide content based on group membership.

* * *

Using Gemini. I was able to get these above code snippets. However having trouble to get them to work.

If someone can guide me where to place in a custom component with the sections to input and code fix it necessary.

First error that popped up when I put the JavaScript into common was an error on “import” la ne expecting a {

> **Error Pic**
>
> ![A screenshot of a computer screen displaying a code editor with a HTML file open, showing HTML and JavaScript code with an error message highlighted. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/2/8/b/28b04044347be373c1076dfb4c0cc85d4ea4965c.png)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [August 11, 2024, 1:41am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/2 "2024-08-11T01:41:53Z")

</div>

That’s very cool!

The caveat, which you likely know, is that the text is available several ways since it’s just hidden with css. One is this post route:

`/posts/123/raw`

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 11, 2024, 1:43am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/3 "2024-08-11T01:43:48Z")

</div>

Indeed. There was a custom component someone created using a more complex way of removing content. But it seems to be broken.

Iirc it removes the content from th cooked element?

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 11, 2024, 1:48am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/4 "2024-08-11T01:48:44Z")

</div>

Here is the topic where a fellow created a component but when I tried it it wasn’t working and tried a pm to DeV. But might have moved on.

> [@Display different content within a topic based on user's groups membership?](https://meta.discourse.org/t/display-different-content-within-a-topic-based-on-users-groups-membership/227075/6):
>
> Finally got around to knocking this together as, [https://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay](https://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay) Super simple, just removes the targeted DIV from the DOM based on is the current user in a group name “foobar” or not in the group via “!foobar”. That lets me have a simple toggle display of content like the below image. Of course, if the component is disabled, then all of the content shows (since sans component the DOM doesn’t get trimmed down.) But this is good enough for w…

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [August 11, 2024, 10:02am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/5 "2024-08-11T10:02:00Z")

</div>

Sorry. I just read they you can’t get it to work.

The thing to do is use the discourse\_theme to generate a new empty theme. Then look for anther theme component that has a “extends component” section… Oh. I don’t think it’ll work. You’ll need your code to target and modify what’s already in the dom. Actually, I’m not entirely sure that’s right, as I’m still pretty bad at such.

I think you can do it with just css if you use that component that adds the group membership to the css.

But the raw markdown is available in the route that i showed in my last post. I don’t see how even a plugin can make it safe such that it will be impossible for people to see the hidden text. Something like user notes might solve your problem, or if you really need it to target posts, you could use user notes as a model to make post notes that would add a post custom field that only staff could see.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 11, 2024, 10:09am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/6 "2024-08-11T10:09:40Z")

</div>

Yeah, you can’t solve this properly without changing the API, so that means it would require a plugin, not a theme component.

If you aren’t using whispers on your site for moderation, perhaps you could use those which are out of the box?

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 11, 2024, 11:20am UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/7 "2024-08-11T11:20:03Z")

</div>

The application for this would not be security centric.

This would be more for light applications. In an earlier topic a person was looking for. Something like this for table top RPG. So for example the dungeon Master might need to access a player’s character sheet. The character sheet would be visible to the Player and game masters.

The umbrella component that the one fellow made looks good. However it seems broken when I tried it out. But of course I believe even that one could be fairly easy to compromise. If not mistaken like disabling Java. Or even a clever person who knows about site safe-mode. Can [safe mode](https://meta.discourse.org/t/53504?silent=true) be restricted to Staff/Admin?

Any component as it is client side mods are if course not meant for security needs. Even a tampermonkey script can be used by members similar or same as theme/theme components

Extend this idea further and you could In theory obscure content based on Badges etc..

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 11, 2024, 3:36pm UTC](https://meta.discourse.org/t/using-ai-to-create-hide-content-bbcode-wrapper/321078/8 "2024-08-11T15:36:21Z")

</div>

> [@Heliosurge](#):
>
> Can [safe mode](https://meta.discourse.org/t/53504?silent=true) be restricted to Staff/Admin?

yes. disabling this will make it so only staff can use safe-mode.

![image](https://global.discourse-cdn.com/meta/original/4X/6/8/9/6892e60ebe7c1abda62d620c72389bbb05b64193.png)
