As a novice in cloud development, I am using Forge to develop a Confluence macro. I want to render the HTML input from the user on the page, but currently, the page is displaying the HTML directly. Can someone please help me with how to achieve my requirement? My code is provided below:
import ForgeUI, {
render,
Macro,
MacroConfig,
Text,
useConfig,
TextArea
} from "@forge/ui";
const defaultConfig = {
htmlContent: "<p>Please enter your html</p>",
};
const App = () => {
// Retrieve the configuration
const config = useConfig() || defaultConfig;
// Use the configuration values
return <Text>{config.htmlContent}</Text>;
};
export const run = render(
<Macro app={<App />} />
);
// Function that defines the configuration UI
const Config = () => {
return (
<MacroConfig>
<TextArea name="htmlContent" label="HTML" defaultValue={defaultConfig.htmlContent} />
</MacroConfig>
);
};
export const config = render(<Config />);
It looks like you’re building a Forge UI Kit app, which has specific options for displaying elements as listed at UI Kit Components
In your example, you’ve used the “Text” element which will only allow you to display text as defined in the forge docs.
Further, the “TextArea” element expects a string as it’s default value, and saves the user input as a string, which means that even using valid markup as defined for the Text element would need to be parsed by your app itself before it could be displayed.