Mini editor : edit in Express - #730
Merged
Merged
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
nateyolles
marked this pull request as ready for review
August 31, 2026 17:00
nateyolles
requested review from
echen-adobe,
maxn-adobe,
meganthecoder and
nateyolles
as code owners
August 31, 2026 17:00
nateyolles
approved these changes
Aug 31, 2026
nateyolles
left a comment
nateyolles
left a comment
Contributor
There was a problem hiding this comment.
Again, I'm going to approve in order to meet the timelines, however, please go back and resolve the linting issues.
echen-adobe
approved these changes
Aug 31, 2026
meganthecoder
approved these changes
Aug 31, 2026
meganthecoder
left a comment
meganthecoder
left a comment
Contributor
There was a problem hiding this comment.
I'm approving because the PMs have requested this to go to stage asap, but I question the location of the files. Things in the utils and widgets folders should be shared functionality or things not loaded from a block. This functionality appears to be all loaded from the block, so it should all be located in the blocks/mini-editor/ folder.
Fix indentation in buildTopActions and use getEditor() accessor instead of referencing the outer editor const before it is defined. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
hadobe
added a commit
that referenced
this pull request
Aug 31, 2026
* Add quote maker * Fix UI and Fonts * Add cross button on toast * Rename quote maker to mini editor * Move mini editor to a widget * Move backgounds and fonts loader in separate utilities * Apply first font for small app frames * Add test cases * Remove static files backup * Use css variables * add Express mini-editor actions UI, functinality to follow * add Express mini-editor actions UI, functinality to follow * add html to canvas download utils for using in mini-editor * Integrate download utils with mini-editor and improve performance using worker * fix lint and tests * Add mini editor modal * Use spectrum icons * Character truncation and fixed width variable height handling * UI fixes * Fix the arc * Implement hover and focus states * custom share dialog for mini editor * Build copy support on arc * Remove outer cards for when they are clipped * Mini Editor download Action (#691) * add Express mini-editor actions UI, functinality to follow * add html to canvas download utils for using in mini-editor * Integrate download utils with mini-editor and improve performance using worker * fix lint and tests * Add tab indexes * Add screen reader notes * Fix style * Fix copy quote screen reader and change color to white * Update font kit id and use rendition preview instead of thumbnail * Add color mode logic * Apply latest fonts * The mobile modal for mini editor widget opens in bottom sheet * Use S2 sp-tooltip for mini-editor action button tooltips The edit/share/download action buttons only had native title tooltips. Per design feedback, they should use the same S2 tooltip component (with its caret) already used on the Colour experience. Guards the registry against a duplicate custom-element registration race between this loader's icons-workflow.js bundle and the tooltip's own overlay/icon bundle. * Match action-buttons wrapper sizing to Figma tablet/mobile spec The edit/share/download bar reused the desktop button/bar sizing at every breakpoint. Per Figma node 54:7883, tablet/mobile uses a lighter, smaller wrapper (51% white background, 6px radius/gap, 2px padding) and smaller buttons (24px, 15px icons) than the desktop spec in Figma 1099-5050. * Add hover state to font style selector buttons .me-font had no :hover rule at all, so the pill buttons in the font row gave no visual feedback until clicked. Reuses the same hover background already applied to the sibling .me-control trigger for consistency, since Figma's Font Selector component only defines Default/Focus/Selected. * Fix font style pill truncating the longest font name "Geometric" (the longest font label) was clipping to "Geomet…" at every breakpoint because .me-pill capped at 110px/max-width while the text needed ~115px. The pill now floors its own min-width to fit the longest label and no longer shrinks; the adjacent "Font style" label absorbs any remaining space pressure instead (truncating gracefully, and dropping to "Font" on mobile per Figma node 54:7888, matching the existing " colour" suffix pattern on the background control). * Hide carousel action bar during slide transitions The edit/share/download bar stayed visible (and static) while the arc carousel's cards slid past underneath it. It now hides the moment a navigation starts and reappears once the 1s slide transition settles, per design feedback. * Add backdrop dim and dismiss-on-select to mobile bottom sheet The font/colour bottom sheet had no scrim at all behind it, and stayed open after a user picked a font or colour. Per Figma node 137:4778's "Bottom sheet expectation" note, it now dims the page (#000000 20%) while open and dismisses as soon as a selection is made — the tablet/desktop inline row is unaffected and stays open after a pick. * Match deco card shadow, radius, and background-fill to Figma spec The decorative "Quote Hero Card" previews used a flat 2-layer shadow at every state and a hardcoded 17px radius, neither matching the Figma component (4-layer default shadow, single emphasized-default token on hover, 16px/corner-radius-200). Also fixes the background image painting inside the card's padding-box instead of its border-box, which left a visible ring of plain card background around the edge on some templates. * Fix hardcoded hover colour and stuck hover on deco card actions "Use this quote"/"Copy" buttons used a hardcoded #dcdcdc hover background instead of the gray200 token, and copy applied a one-off green success colour the S2 component doesn't define. Mouse clicks also left the clicked button focused, keeping the actions row visible via :focus-within after the pointer moved away — now only keyboard activation keeps focus, so a mouse click releases it and lets the row hide normally. * Fix hero content gap to match Figma's non-uniform spacing The header's flex gap spaced logo/heading/subcopy/CTA uniformly at 16px, but Figma node 137:4532 specifies a tighter 6px (spacing-80) gap between the heading and subcopy specifically, with 16px (spacing-300) elsewhere. Replaced the single flex gap with per-element margins so each gap can differ. * Match mobile carousel-to-controls gap to tablet (16px) Mobile overrode the carousel/controls gap down to 8px (spacing-100) while tablet used 16px (spacing-300) — per feedback both should use the wider 16px gap to accommodate the arc carousel. * Draw deco card stroke as an outline instead of a border The card's stroke used border, which shares the box with the background image and can visually eat into it at the edge. Switched to an outline (with a matching negative offset) so the stroke sits on top of the image's full edge-to-edge fill as a pure addition instead of competing with it for space. * Replace hand-rolled "Click to copy quote" tip with S2 sp-tooltip Both the desktop widget's quote and the arc carousel's centre card used a hand-rolled .me-tip/.me-tip-box span, styled and positioned by hand. Both now use the same S2 sp-tooltip already wired up for the edit/share/download action buttons. For the arc carousel, a capture-phase listener suppresses the tooltip whenever a card isn't currently playing the centre role, since prev/next still receive hover/focus but navigate instead of copying. * Fix main CTA hover, make card cta s2 button, fetch background contarct infor from tags * Add mouse drag-to-scroll to font/colour option rows .me-row--fonts/.me-row--colour already scrolled via touch/trackpad (overflow-x: auto) but had no mouse-drag gesture on desktop. A real drag (movement past a 5px threshold) now scrolls the row and swallows the browser's trailing click so it doesn't also select whichever option the pointer lands on; a plain press-and-release with no movement still reaches that option's own click handler normally. setPointerCapture is only acquired once a drag actually starts, not on every pointerdown — capturing immediately retargets that pointer's own click to the panel per the Pointer Events spec, which was silently breaking every option's click handler even for an ordinary stationary click. * panel dragging * Increase max width for quote * Fix text animation * Show action buttons themed * Fix sp theme for mini editor modal * Fix carousal * Let sparse swatch sets expand across the available width * Fix collapsible row design * Fix the arc carousal mini max width * Fix header spacing * Fix mobile carousal * Cleanup, lint and test fixes * Add analytics * Fix accessibility * deco cards page load animation * Fonts should load in suggested order * Fix css of collapsible row * Make the center card fill width on mobile * Fix theme font color * Fix opposite direction scrolling of carousal * Update colour to color * Stack the font and nackground cta to accomodate in less space * Fix background color on download * Mini editor : edit in Express (#730) * add support to edit in express * CCEX-289053 Fix eslint errors in mini-editor.js Fix indentation in buildTopActions and use getEditor() accessor instead of referencing the outer editor const before it is defined. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Haris Bijli <all46558@adobe.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Vineet Sharma <vvineett@gmail.com> Co-authored-by: Vineet Sharma <vvineett@users.noreply.github.com> Co-authored-by: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Co-authored-by: Haris Bijli <all46558@adobe.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Added support to launch Express web app to edit the mini editor cards further.
Jira Ticket
Resolves: MWPW-NUMBER
Test URLs
Verification Steps
Potential Regressions
Additional Notes
(If applicable) Add context, related PRs, or known issues here.