Extract form-builder-api.js out of form-builder.js

[ViolanteCodes]

• Extracts form-builder-api.js out of form-builder.js.
• Wires it to builderstore()
• Fixed bug: undo not working when adding fields in multi-step mode
• Fixed bug: preview not updating on multi-step reorder

[Copilot]

Pull request overview

This PR refactors the JavaScript form builder by extracting API-related methods (load/save/preview/templates) into a dedicated module and wiring them into the existing BuilderStore-backed state. It also fixes two multi-step-specific regressions (undo snapshot when adding fields to a step, and preview refresh when reordering fields within a step) and adds Vitest coverage for the new/changed behaviors.

Changes:

• Extracts preview/load/save/template methods from form-builder.js into form-builder-api.js and mixes them into FormBuilder.prototype.
• Fixes multi-step undo by pushing an undo snapshot before adding a field to a step.
• Fixes multi-step reorder preview updates and adds JS unit tests for step reorder, step drop/undo, and API methods.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tests_js/form-builder/updateFieldOrderInStep.test.js	Adds coverage ensuring step reorder rewrites step field order from DOM order and refreshes preview.
tests_js/form-builder/handleFieldDroppedToStep.test.js	Adds coverage ensuring multi-step palette drop pushes undo and updates fields/step membership.
tests_js/form-builder-api/apiMethods.test.js	Adds coverage for extracted API methods (preview debounce, preview rendering/error states, load/save, templates).
django_forms_workflows/static/django_forms_workflows/js/form-builder.js	Mixes in apiMethods, proxies fieldIdCounter to the store, and fixes undo/preview update in multi-step flows.
django_forms_workflows/static/django_forms_workflows/js/form-builder-api.js	New extracted API module implementing preview/load/save/template behaviors.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (2)

django_forms_workflows/static/django_forms_workflows/js/form-builder-api.js:326

• template.id is inserted unescaped into a data-template-id attribute. If it contains quotes or other special characters, it can break out of the attribute context and inject HTML. Escape/cast it before interpolation.

                                <div class="card template-card h-100" style="cursor: pointer;" data-template-id="${template.id}">

django_forms_workflows/static/django_forms_workflows/js/form-builder-api.js:332

• template.usage_count is interpolated into HTML without escaping. Even if it is expected to be numeric, escaping/casting avoids HTML injection if the API ever returns unexpected data.

                                                <i class="bi bi-people"></i> Used ${template.usage_count} times

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

django_forms_workflows/static/django_forms_workflows/js/form-builder-api.js:317

• Grouping templates by category_display uses a plain object ({}) with an untrusted key. A value like "__proto__" can prototype-pollute grouped and cause hard-to-debug behavior. Use Object.create(null) (or a Map) and normalize the key to a string before indexing.

                const grouped = {};
                data.templates.forEach(template => {
                    if (!grouped[template.category_display]) {
                        grouped[template.category_display] = [];
                    }

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

django_forms_workflows/static/django_forms_workflows/js/form-builder-api.js:93

• error.message is interpolated directly into innerHTML here. If the server (or an upstream error) includes user-controlled text in the message, this can become an XSS vector; escape it before rendering.

                        <strong>Preview unavailable</strong><br>
                        ${this.fields.length} field(s) configured<br>
                        <small class="text-muted">${error.message}</small>