github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-31 08:46:58 +02:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity Graph

fix(editor): Prevent expression editor result panel from overflowing in HTML and Markdown render modes (#30470)

Browse Source 
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Alexander Gekov 2026-05-18 10:39:09 +03:00 committed by GitHub
parent 89477fc60c
commit 709ebbd23d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.test.ts
View File

@ -1,7 +1,7 @@
import { createComponentRenderer } from '@/__tests__/render';
import ExpressionEditModal from './ExpressionEditModal.vue';
import { createTestingPinia } from '@pinia/testing';
import { waitFor, within } from '@testing-library/vue';
import { fireEvent, waitFor, within } from '@testing-library/vue';
import { setActivePinia, type Pinia } from 'pinia';
import { defaultSettings } from '@/__tests__/defaults';
import { useSettingsStore } from '@/app/stores/settings.store';
@ -179,5 +179,36 @@ describe('ExpressionEditModal', () => {
expect(getByTestId('radio-button-markdown')).toBeInTheDocument();
});
});
it('only applies the CodeMirror editor class in text mode', async () => {
const { getByTestId } = renderModal({
pinia,
props: {
parameter: createTestNodeProperties({ name: 'foo', type: 'string' }),
path: '',
modelValue: 'test',
dialogVisible: true,
},
});
await waitFor(() => {
expect(getByTestId('expression-modal-output')).toHaveClass('editor');
});
await fireEvent.click(getByTestId('radio-button-html'));
await waitFor(() => {
expect(getByTestId('expression-modal-output')).not.toHaveClass('editor');
});
await fireEvent.click(getByTestId('radio-button-markdown'));
await waitFor(() => {
expect(getByTestId('expression-modal-output')).not.toHaveClass('editor');
});
await fireEvent.click(getByTestId('radio-button-text'));
await waitFor(() => {
expect(getByTestId('expression-modal-output')).toHaveClass('editor');
});
});
});
});

6
packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.vue
View File

@ -255,7 +255,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
<ExpressionOutput
ref="expressionResultRef"
:class="$style.editor"
:class="outputRenderMode === 'text' ? $style.editor : undefined"
:segments="segments"
:extensions="theme"
:render="outputRenderMode"
@ -323,12 +323,14 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
display: flex;
flex: 1 1 0;
min-height: 0;
min-width: 0;
}
.io {
display: flex;
flex: 1 1 0;
gap: var(--spacing--sm);
min-width: 0;
}
.input,
@ -337,6 +339,8 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
flex-direction: column;
gap: var(--spacing--2xs);
flex: 1 1 0;
min-width: 0;
min-height: 0;
}
.output {

1
packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataMarkdown.vue
View File

@ -27,6 +27,7 @@ export default defineComponent({
width: 100%;
height: 100%;
overflow: auto;
overflow-wrap: anywhere;
padding: var(--spacing--sm) var(--spacing--md);
border: var(--border);
border-radius: var(--radius);