Branch: refs/heads/master Home: https://github.com/xwiki/xwiki-platform Commit: e417d162678ba697f6b8c8905ee61a856788dd1a https://github.com/xwiki/xwiki-platform/commit/e417d162678ba697f6b8c8905ee61... Author: Nicoleta Ciaușu <[email protected]> Date: 2026-10-06 (Tue, 06 Oct 2026) Changed paths: M pnpm-lock.yaml M pnpm-workspace.yaml M xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/pom.xml M xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/it/org/xwiki/blocknote/test/ui/AllIT.java A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/it/org/xwiki/blocknote/test/ui/ScreenshotComparator.java A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/it/org/xwiki/blocknote/test/ui/ScreenshotComparatorParameterResolver.java A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/it/org/xwiki/blocknote/test/ui/SideMenuIT.java A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/picture.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnCaptionedImage/chrome/captionedImage.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnCaptionedImage/firefox/captionedImage.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnImage/chrome/image.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnImage/firefox/image.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnImageBeforeText/chrome/imageBeforeText.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnImageBeforeText/firefox/imageBeforeText.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnInfoBox/chrome/infoBox.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnInfoBox/firefox/infoBox.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/chrome/heading1.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/chrome/heading2.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/chrome/heading3.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/firefox/heading1.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/firefox/heading2.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnLargeHeadings/firefox/heading3.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/chrome/bulletItem.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/chrome/divider.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/chrome/paragraph.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/chrome/quote.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/chrome/wrappingParagraph.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/firefox/bulletItem.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/firefox/divider.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/firefox/paragraph.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/firefox/quote.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnOtherBlockTypes/firefox/wrappingParagraph.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/chrome/heading4.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/chrome/heading5.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/chrome/heading6.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/firefox/heading4.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/firefox/heading5.png A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-docker/src/test/resources/screenshots/SideMenuIT/sideMenuIsAlignedOnSmallHeadings/firefox/heading6.png M xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-pageobjects/src/main/java/org/xwiki/blocknote/test/po/BlockNoteRichTextArea.java A xwiki-platform-core/xwiki-platform-blocknote/xwiki-platform-blocknote-test/xwiki-platform-blocknote-test-pageobjects/src/main/java/org/xwiki/blocknote/test/po/SideMenu.java M xwiki-platform-core/xwiki-platform-edit/xwiki-platform-edit-test/xwiki-platform-edit-test-pageobjects/src/main/java/org/xwiki/edit/test/po/InplaceEditablePage.java M xwiki-platform-core/xwiki-platform-node/src/main/node/editors/blocknote-react/package.json M xwiki-platform-core/xwiki-platform-node/src/main/node/editors/blocknote-react/src/components/BlockNoteViewWrapper.tsx A xwiki-platform-core/xwiki-platform-node/src/main/node/editors/blocknote-react/src/components/SideMenu/centerOnFirstLine.ts M xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ViewPage.java Log Message: ----------- XWIKI-24239: The block handle is badly aligned vertically [version 2] (#6485) * Position the side menu by measuring the block's first line at render time instead of relying on BlockNote's fixed, per-block-type pixel offsets, which only match BlockNote's own styling and not the skin's. * Measuring the rendered line rather than deriving it from CSS variables keeps the handle aligned across skins, themes and font sizes without replicating anything about how blocks are styled, and without changing the spacing of the content itself. * Add a functional test asserting the handle is centered on the first line for headings 1-6, paragraphs, wrapping paragraphs, list items, quotes and dividers. * Add functional tests for asserting the handle position using screenshot comparison: hover a heading 1, a heading 2, a heading 3, a quote and an image, then compare a screenshot of the content area with a reference screenshot committed in the test resources. * Take the screenshot on the whole content area because the side menu is displayed on the left of the rich text area, flush against the left edge of the content area, and would thus be cropped otherwise. * Hide the blinking caret and wait for both the image to be loaded and the side menu to stop moving, so that the screenshots are stable: two consecutive runs are pixel identical, which is why no difference at all is tolerated. * Checked that the test fails on all five blocks when the fix is reverted. * Extract the generic screenshot comparison logic into ScreenshotComparator, meant to be moved to the Docker-based test framework, and keep only the BlockNote specific parts in the page object. * Take the screenshots using Selenium's element screenshot instead of cropping a screenshot of the viewport with injected JavaScript. * Split the test in two (headings, and the other block types), each on its own page, so that each page fits in the browser window: taking the screenshot of an element scrolls the page when it can be scrolled, and BlockNote hides the side menu when the page is scrolled. * Keep one set of reference screenshots per browser, since Chrome and Firefox render the text slightly differently, and add the Chrome ones * Fail on the first screenshot mismatch, rather than collecting the mismatches and reporting them at the end * Align the side menu on a leading image, such as the one of a captioned image, rather than on the text that follows it * Check the side menu alignment on blocks whose first line isn't text * Inject the screenshot comparator with a parameter resolver, rather than building it in each test * Name the reference screenshots after the class declaring the test and the test method, so that they are still found when the test runs from a suite, where the test class is the nested one * Shrink the test image to 170x170 and split the headings test in two, so that no test page is taller than the viewport on either browser. Firefox fits in 828px and Chrome in 795px, and the pages used to overflow by up to 54px, which is what made the screenshots depend on the scroll position Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> To unsubscribe from these emails, change your notification settings at https://github.com/xwiki/xwiki-platform/settings/notifications