Issue summary
When a user manually drags the Mercury sidebar wider (or narrower) than the configured defaultWidth, then clicks any Layout Paragraphs component
on the canvas to edit it, the sidebar snaps back to its default width and the user's chosen width is lost. Repeats on every subsequent component click.
Steps to reproduce
- Install Mercury Editor 3.0.0-alpha15 on Drupal 11.
- Create or edit a page that uses Mercury Editor with at least one Layout Paragraphs component.
- Drag the sidebar's resize button to a width clearly different from
defaultWidth(e.g. wider). - Click any LP component in the canvas to open its edit dialog.
Expected: the sidebar remains at the width the user dragged it to.
Actual: the sidebar snaps back to defaultWidth (the canvas widens to fill the gap).
Cause
Two code paths overwrite --me-dialog-dock-right-width on every dialog open:
_onDockindialog.element.jsruns unconditionally insideshow()/showModal()for any docked dialog
(dialog.element.js:170-179). It callssetProperty(--me-dialog-dock-${direction}-width, this.width). Because each component-edit click
instantiates a fresh<mercury-dialog>element,this.widthis always the element's default value — never reflecting the user's
drag.applyOptionsindialog.drupal.jsruns frominit()just beforeshow(). Its
if (dialogWidth) {...}block (
dialog.drupal.js:200-205) unconditionally writesgetCSSLength(dialogWidth)to the same CSS var.
The existing guard for defaultWidth (dialog.drupal.js:189-198, if (!getPropertyValue(...))) shows the project's
preferred preservation pattern. This issue extends the same intent to dialogWidth and _onDock.
Note: this is adjacent to but distinct from #3489991 (entity-browser modal resizes
the tray). The fix in #3489991 prevents defaultWidth from re-applying, but the dialogWidth and _onDock paths were
untouched.
Proposed fix
Track the user's manually-resized width in a dedicated localStorage key (mercury-dialog-dock-user-width) written
only from _onDragMouseMove cases E and W — i.e. only when the user actually drags. The existing
mercury-dialog-dock-width key is unsuitable because mercury:dockResize (driven by ResizeObserver) writes to it on
programmatic mounts too. Both _onDock and applyOptions then prefer the user-set value over the element default /
dialogWidth.
A > 10 floor matches the existing 10px collapsed-threshold convention.
Patch attached. Touches:
build/js/dialog.element.js: write user-width in resize-drag, prefer user-width in_onDock.build/js/dialog.drupal.js: prefer user-width inapplyOptions.source/js/dialog.drupal.js: same as build, so a future rollup rebuild keeps the fix.
build/js/dialog.element.min.js will need regenerating via the project's build pipeline.
A Cypress test demonstrating the regression is included in a follow-up comment.
Affected versions
3.0.0-alpha15 confirmed; cause is structural in 3.x and almost certainly affects all 3.0 alphas. Not present in 2.x as the _onDock path is
different.
| Comment | File | Size | Author |
|---|---|---|---|
| upstream-mercury_editor-preserve-user-resized-dock-width.patch | 5.73 KB | versantus.nik |
Issue fork mercury_editor-3586892
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
versantus.nik commentedCypress test demonstrating the regression is included in the attached patch at
tests/cypress/cypress/integration/dock-width-preserved.cy.js.The test:
mercury-dialog-dock-user-widthkey tolocalStorageand setting--me-dialog-dock-right-widthon<html>.<mercury-dialog>mounts and_onDock+applyOptionshave run.Without the patch, step 4 fails because
_onDockoverwrites the var withthis.width(the fresh element default). With the patch, itpreserves the user's drag-set value.
The step-2 shortcut (writing localStorage directly) sidesteps the noise of driving a mousedown/mousemove/mouseup sequence on the resize button inside the
shadow DOM. A more thorough test could exercise the full drag gesture too — happy to add one if you'd prefer.
Spec selectors (
Textas the picker option,.lpb-btn--add,[data-uuid]) match the patterns already used intest.cy.js; adjust to whatever fixture your CI uses if needed.