feat: control container option by kevinchappell · Pull Request #428 · Draggable/formeo

kevinchappell · 2026-01-30T20:38:17Z

activates the existing controls.container option. Controls will now be appended to the element defined in this option.

Copilot

Pull request overview

Activates the existing controls.container option so editor controls can be mounted into a user-specified DOM element/selector.

Changes:

Add controls.container to default editor options.
Introduce dom.resolveContainer() utility (with unit tests) to resolve selector strings to DOM elements.
Update editor/controls initialization to resolve and use the configured controls container during render.

Reviewed changes

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

Show a summary per file

File	Description
src/lib/js/editor.js	Uses resolved containers and attempts to mount controls into `controls.container` during render.
src/lib/js/config.js	Adds default `controls.container: null` configuration.
src/lib/js/components/controls/index.js	Resolves `controls.container` via `dom.resolveContainer()` when applying options.
src/lib/js/common/dom.js	Adds `resolveContainer()` helper for selector/element resolution.
src/lib/js/common/dom.test.js	Adds unit test coverage for `resolveContainer()`.

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

Copilot · 2026-01-30T20:45:42Z

    const controlsContainer = this.controls.container || this.editor
-    controlsContainer.appendChild(this.controls.dom)
+    if (controlsContainer) {
+      dom.empty(controlsContainer)
+      controlsContainer.appendChild(this.controls.dom)
+    }


dom.empty(controlsContainer) will clear the editor root when controls.container is not set (default null), because controlsContainer falls back to this.editor. That removes the stage DOM nodes you just created in elemConfig.content, so the rendered editor will only contain the controls. Instead of emptying unconditionally, only clear/replace when an external controls.container is configured (or remove/replace an existing .formeo-controls node) and leave this.editor content intact.

Copilot · 2026-01-30T20:45:43Z

+      controlsContainer.appendChild(this.controls.dom)
+    }

    if (this.editorContainer) {
      dom.empty(this.editorContainer)


If controls.container resolves to the same element as editorContainer, controls are appended and then immediately removed when dom.empty(this.editorContainer) runs (and similarly if the controls container is inside editorContainer, it gets removed by the empty call). Consider handling the “shared container” case by clearing once and appending both controls + editor in the intended order, or documenting/enforcing that these containers must be distinct/dedicated.

Copilot · 2026-01-30T20:45:43Z

  }
+
+  resolveContainer(container) {
+    return typeof container === 'string' ? document.querySelector(container) : container


resolveContainer currently returns any non-string value as-is and doesn’t guard document.querySelector against invalid selector strings (which throw). This can lead to hard-to-debug runtime errors later (e.g., calling DOM APIs on a non-element) or immediate initialization failures for malformed selectors. Consider validating with isDOMElement and returning null (or throwing a clear error) for unsupported types, and wrapping querySelector in a try/catch to return null for invalid selectors.

Suggested change

return typeof container === 'string' ? document.querySelector(container) : container

if (typeof container === 'string') {

try {

return document.querySelector(container)

} catch (e) {

// Invalid selector string

return null

}

}

if (this.isDOMElement(container)) {

return container

}

return null

Copilot · 2026-01-30T20:45:43Z

    const controlsContainer = this.controls.container || this.editor
-    controlsContainer.appendChild(this.controls.dom)
+    if (controlsContainer) {
+      dom.empty(controlsContainer)
+      controlsContainer.appendChild(this.controls.dom)
+    }


This change introduces/activates controls.container behavior, but there doesn’t appear to be any Playwright coverage asserting that controls render into a custom container (and continue to render correctly on re-render). Adding an e2e test that configures controls.container (and optionally the interaction with editorContainer) would help prevent regressions here.

kevinchappell · 2026-05-16T06:52:03Z

@copilot apply changes based on the comments in this thread

Copilot · 2026-05-16T06:59:49Z

@copilot apply changes based on the comments in this thread

Implemented in 8d88a8d (on top of 9050e02). I addressed the review thread items: fixed editor render behavior so default rendering no longer clears stage content, handled shared/nested controls.container + editorContainer cases safely, hardened dom.resolveContainer (invalid selector/type-safe), and added Playwright coverage for custom/shared controls container rendering and rerender behavior. Screenshot: /tmp/controls-container-ui.png.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

cdnjs.cloudflare.com
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-edgeupdater --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl -test --no-warnibash (dns block)
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-edgeupdater --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl -test --no-warninode (dns block)
- Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-edgeupdater --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

kevinchappell · 2026-05-16T17:49:33Z

🎉 This PR is included in version 5.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Copilot AI review requested due to automatic review settings January 30, 2026 20:38

Copilot started reviewing on behalf of kevinchappell January 30, 2026 20:38 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

Copilot started work on behalf of kevinchappell May 16, 2026 06:52 View session

kevinchappell force-pushed the feat/controls-container branch from 114b8ca to 4bce39e Compare May 16, 2026 06:52

kevinchappell added 2 commits May 15, 2026 23:56

feat: use controls container option

d9fba08

chore: add test for resolveContainer

157f3b1

kevinchappell force-pushed the feat/controls-container branch from 4bce39e to 157f3b1 Compare May 16, 2026 06:57

Copilot finished work on behalf of kevinchappell May 16, 2026 07:00

fix: circular empty when controlContainer is editor

26b4466

kevinchappell force-pushed the feat/controls-container branch from 8d88a8d to 26b4466 Compare May 16, 2026 07:11

kevinchappell added 2 commits May 16, 2026 00:53

fix: playwright using up github action minutes

e5e83f9

chore: disable playwright running in pr worfklow

f52013a

kevinchappell merged commit 7314e52 into main May 16, 2026
2 of 3 checks passed

kevinchappell deleted the feat/controls-container branch May 16, 2026 17:48

kevinchappell added the released label May 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: control container option#428

feat: control container option#428
kevinchappell merged 5 commits into
mainfrom
feat/controls-container

kevinchappell commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

kevinchappell commented May 16, 2026

Uh oh!

Copilot AI commented May 16, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

kevinchappell commented May 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-    return typeof container === 'string' ? document.querySelector(container) : container
+    if (typeof container === 'string') {
+      try {
+        return document.querySelector(container)
+      } catch (e) {
+        // Invalid selector string
+        return null
+      }
+    }
+    if (this.isDOMElement(container)) {
+      return container
+    }
+    return null

Conversation

kevinchappell commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

kevinchappell commented May 16, 2026

Uh oh!

Copilot AI commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

kevinchappell commented May 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 16, 2026 •

edited

Loading