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
# 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
// 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:
[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 {
