From 17464df4945064c0e5469b3bdf3e2a0b8924af0e Mon Sep 17 00:00:00 2001 From: Alexey Okhrimenko Date: Mon, 7 Jul 2025 12:27:28 +0300 Subject: [PATCH 1/2] fix: ensure wysiwyg editor clickable area --- src/bundle/WysiwygEditorView.scss | 2 ++ tests/visual-tests/ClickableArea.visual.test.tsx | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 tests/visual-tests/ClickableArea.visual.test.tsx diff --git a/src/bundle/WysiwygEditorView.scss b/src/bundle/WysiwygEditorView.scss index e3eab6d66..658233fb6 100644 --- a/src/bundle/WysiwygEditorView.scss +++ b/src/bundle/WysiwygEditorView.scss @@ -11,6 +11,8 @@ &__editor { overflow-y: auto; flex-grow: 1; + // Ensure empty editor has clickable area + min-height: 36px; padding: var(--g-md-editor-padding); diff --git a/tests/visual-tests/ClickableArea.visual.test.tsx b/tests/visual-tests/ClickableArea.visual.test.tsx new file mode 100644 index 000000000..3d10b2dc4 --- /dev/null +++ b/tests/visual-tests/ClickableArea.visual.test.tsx @@ -0,0 +1,16 @@ +import {test, expect} from 'playwright/core'; +import {PresetsStories} from './Presets.helpers'; + +const getHeights = async (page) => { + const container = page.locator('.g-md-wysiwyg-editor__editor'); + const editor = container.locator('.ProseMirror'); + const containerBox = await container.boundingBox(); + const editorBox = await editor.boundingBox(); + return {containerHeight: containerBox?.height, editorHeight: editorBox?.height}; +}; + +test('zero preset clickable area', async ({mount, page}) => { + await mount(); + const {containerHeight, editorHeight} = await getHeights(page); + expect(containerHeight).toBeCloseTo(editorHeight!, 1); +}); From d33f382ad32af9906b57ff90fd93ebc6619ac008 Mon Sep 17 00:00:00 2001 From: obenjiro Date: Tue, 8 Jul 2025 18:04:46 +0300 Subject: [PATCH 2/2] Fix styling changes --- src/bundle/WysiwygEditorView.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/bundle/WysiwygEditorView.scss b/src/bundle/WysiwygEditorView.scss index 658233fb6..7dd3a3d70 100644 --- a/src/bundle/WysiwygEditorView.scss +++ b/src/bundle/WysiwygEditorView.scss @@ -13,7 +13,6 @@ flex-grow: 1; // Ensure empty editor has clickable area min-height: 36px; - padding: var(--g-md-editor-padding); .g-root_theme_dark & .pm-iframe-container {