How to change FIELD_NAME from gadget example to be wiki field and to allow render html in View

Forge Forge UI Kit and Custom UI
1

Hi :slight_smile:

How to change field named ‘FIELD_NAME’ from gadget example to be wiki field and to allow render html in gadget’s View

Kind regards and thanks in advance

Below is a code of this gadget it always displays only text

import React, {useEffect, useState} from "react";
import ForgeReconciler, {
  Text,
  useProductContext,
  Textfield,
  TextArea,
  Form,
  Button,
  FormSection,
  FormFooter,
  Label,
  RequiredAsterisk,
  useForm,
} from "@forge/react";
import { invoke, view } from "@forge/bridge";
const FIELD_NAME = "field-name";

export const Edit = () => {
  const { handleSubmit, register, getFieldId } = useForm();

  const configureGadget = (data) => {
	view.submit(data);
  };

  return (
    <Form onSubmit={handleSubmit(configureGadget)}>
      <FormSection>
        <Label labelFor={getFieldId(FIELD_NAME)}>
		  Rich Text
          <RequiredAsterisk />
        </Label>
        <TextArea minimumRows="10" {...register(FIELD_NAME, { required: true })} />
      </FormSection>
      <FormFooter>
        <Button appearance="primary" type="submit">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
};

const View = () => {
  const [data, setData] = useState(null);
  const context = useProductContext();
  console.log(context);
  
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);

  if (!context) {
    return "Loading...";
  }
  const {
    extension: { gadgetConfiguration },
  } = context;
  
  
  return (
    <>
	
	{console.log(gadgetConfiguration['rich-text']='<a href="https://www.onet.pl.">Onet</a>')}
	  {gadgetConfiguration['rich-text']}

      <Text>{gadgetConfiguration['rich-text']}</Text>
<Text>{gadgetConfiguration[FIELD_NAME]}</Text>
	  <Text>{data ? data : 'Loading...'}</Text>
    </>
  );
};

const App = () => {
  const context = useProductContext();
  if (!context) {
    return "Loading...";
  }

  return context.extension.entryPoint === "edit" ? <Edit /> : <View />;
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);