Code editor content is not saved inside a Static Page repeater syntax field #552

Description:

• OctoberCMS Build: 4.4.10
• RainLab Pages Plugin Version: 3.1
• PHP Version: 8.3

Description:

Code entered into a codeeditor field inside a Static Page layout’s repeater syntax field is not saved. After saving and reloading the page, the editor shows the previous value, or remains empty if the field was initially empty.

This was reproduced with a custom “Code” content element in a Page Builder repeater. Its field configuration is:

code:
    name: Code
    fields:
        editor:
            type: codeeditor
            language: html
            size: huge

The Ace editor contains the updated code, but its underlying textarea still contains the previous value. The Static Pages editor collects the syntax-field forms using new FormData(el) before the AJAX request starts. Ace normally synchronizes its textarea on oc.beforeRequest, so that synchronization happens too late for the collected payload.

There is also a selector detail: after initialization, the editor has:

data-control="codeeditor input-hotkey"

Consequently, [data-control="codeeditor"] does not match the initialized editor. The selector must match the control name as a token: [data-control~="codeeditor"].

Steps To Reproduce:

1. Create a Static Page layout with a repeater syntax field containing the codeeditor field shown above.

2. Open a page using that layout and select or add a Code element.

3. Enter:

   <div class="container">
       This is demo.
   </div>

4. Click Save.

5. Reload the backend page and reopen the Code element.

6. Observe that the entered code was not retained.

Expected: The current code is saved and restored when the page is reopened.

Actual: The previous textarea value is saved instead.

Example Fix:

In plugins/rainlab/pages/vuecomponents/staticpageeditor/assets/js/staticpageeditor.js, synchronize initialized code editors before constructing FormData:

getSyntaxFormData: function(el) {
    $(el).find('[data-control~="codeeditor"]').each(function() {
        const control = $(this).data('oc.codeEditor');

        if (control && control.editor) {
            control.$textarea.val(control.getContent());
        }
    });

    return new FormData(el);
},

In both collectSyntaxFieldData() and collectSyntaxFormPostback(), replace:

const formData = new FormData(el);

with:

const formData = this.getSyntaxFormData(el);

Updating both collectors ensures that the settings payload and the raw syntax-field postback contain the current code, including an empty string when the code is cleared.

This change was verified in the affected backend: the example code was saved to the Static Page file and remained visible after reloading.