How to Render User Inputted HTML in Confluence Macro Using Forge for Cloud Development

Confluence Development Confluence Cloud
1

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 />);
3

Hi @jingao ,

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.

If you’d like to be able to render the HTML elements, I was able to have more success using Custom UI - this post [@atlaskit/comment] Unable to render HTML content helped point me in the right direction. That said, this will make using the ‘config’ option for the macro more complicated as per How to use Macro Configuration with Custom UI apps in Forge

Hope that helps!
Mel

5

Hi @mpaisley ,
Thank you for your help. I will try according to your advice.

6

Hi,@mpaisley
According to your suggestion, I have implemented my feature. Thank you very much.

1 Like
7

Great to hear @jingao

1 Like