How to use configs for Confluence macros in forge?

[Marcel Horn]

I am new to developing with Atlassian Forge and I am trying to create a Confluence Macro with the template "custom-config-makro". I am doing this with custom UI.

Here is my problem.
I have a file called Config.jsx in which I have specified the frontend for my config window.
It only consists of a label, a textfield and a button. I want to submit the text in the textfield when clicking the button so the macro can work with this string.
I am using view.Submit for this (see code below).
All console.log parts are being executed, but the view.submit part fails and throws and error.

What do I have to change to get this to work? And is there maybe some material to study this with that I maybe have not yet found within the forge documentation.

import React, { useState, useEffect } from 'react';

import { view } from '@forge/bridge';

export default function Config() {

  const [headerText, setHeaderText] = useState('');

  useEffect(() => {

    view.getContext().then((ctx) => {

      const existing = ctx.extension?.config?.headerText;

      if (existing) {

        setHeaderText(existing);

      }

    }).catch(err => console.error("Fehler beim Laden des Contexts:", err));

  }, []);

  const onSave = async () => {

    const textValue = headerText.trim();

    if (!textValue) {

      alert('Bitte Text eingeben!')

      return;

    }

    const configData = {

      headerText: textValue

    };

    console.log('Eingegebener Text:', configData);

    try {

      await view.submit(configData);

      console.log('Submit erfolgreich');

    } catch (error) {

      console.error('Fehler beim Speichern:', error);

    }

    console.log('after submit');

  };

  return (

    <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px' }}>

      <h3>Konfiguration</h3>

      <input

        type="text"

        placeholder="Header Text eingeben..."

        value={headerText}

        onChange={(e) => setHeaderText(e.target.value)}

        style={{

          width: '100%',

          padding: '8px',

          boxSizing: 'border-box'

        }}

      />

      <button

        onClick={onSave}

        style={{ width: 'fit-content', padding: '5px 15px', cursor: 'pointer' }}

      >

        Speichern

      </button>

    </div>

  );

}

[marc -Collabello--Phase Locked-]

I think your view.submit should look like:

const payload = {config: configData};
view.submit(payload);

i.e. there should be a config element in the payload.