n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-08-17 00:50:42 +03:00
Code Issues Projects Releases Wiki Activity

fix(editor): Enable expression preview in SQL node when looking at executions (#9733)

Browse Source 
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
Csaba Tuncsik 2024-06-27 17:07:29 +02:00 committed by GitHub
parent df2bc84d2b
commit d9747d5e9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View File

@ -53,7 +53,7 @@ export const codeNodeEditorTheme = ({
},
'.cm-content': {
fontFamily: BASE_STYLING.fontFamily,
caretColor: 'var(--color-code-caret)',
caretColor: isReadOnly ? 'transparent' : 'var(--color-code-caret)',
},
'.cm-cursor, .cm-dropCursor': {
borderLeftColor: 'var(--color-code-caret)',

1
packages/editor-ui/src/components/InlineExpressionEditor/ExpressionOutput.vue
View File

@ -97,7 +97,6 @@ onMounted(() => {
extensions: [
EditorState.readOnly.of(true),
EditorView.lineWrapping,
EditorView.editable.of(false),
EditorView.domEventHandlers({ scroll: forceParse }),
...props.extensions,
],

2
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
View File

@ -53,7 +53,7 @@ const extensions = computed(() => [
),
n8nLang(),
n8nAutocompletion(),
inputTheme({ rows: props.rows }),
inputTheme({ isReadOnly: props.isReadOnly, rows: props.rows }),
history(),
expressionInputHandler(),
EditorView.lineWrapping,

12
packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
View File

@ -1,24 +1,24 @@
import { EditorView } from '@codemirror/view';
import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
const commonThemeProps = {
const commonThemeProps = (isReadOnly = false) => ({
'&.cm-focused': {
outline: '0 !important',
},
'.cm-content': {
fontFamily: 'var(--font-family-monospace)',
color: 'var(--input-font-color, var(--color-text-dark))',
caretColor: 'var(--color-code-caret)',
caretColor: isReadOnly ? 'transparent' : 'var(--color-code-caret)',
},
'.cm-line': {
padding: '0',
},
};
});
export const inputTheme = ({ rows } = { rows: 5 }) => {
export const inputTheme = ({ rows, isReadOnly } = { rows: 5, isReadOnly: false }) => {
const maxHeight = Math.max(rows * 22 + 8);
const theme = EditorView.theme({
...commonThemeProps,
...commonThemeProps(isReadOnly),
'&': {
maxHeight: `${maxHeight}px`,
minHeight: '30px',
@ -54,7 +54,7 @@ export const inputTheme = ({ rows } = { rows: 5 }) => {
export const outputTheme = () => {
const theme = EditorView.theme({
...commonThemeProps,
...commonThemeProps(true),
'&': {
maxHeight: '95px',
width: '100%',

1
packages/editor-ui/src/components/JsEditor/JsEditor.vue
View File

@ -61,7 +61,6 @@ const extensions = computed(() => {
lineNumbers(),
EditorView.lineWrapping,
EditorState.readOnly.of(props.isReadOnly),
EditorView.editable.of(!props.isReadOnly),
codeNodeEditorTheme({
isReadOnly: props.isReadOnly,
maxHeight: props.fillParent ? '100%' : '40vh',

1
packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
View File

@ -54,7 +54,6 @@ const extensions = computed(() => {
lineNumbers(),
EditorView.lineWrapping,
EditorState.readOnly.of(props.isReadOnly),
EditorView.editable.of(!props.isReadOnly),
codeNodeEditorTheme({
isReadOnly: props.isReadOnly,
maxHeight: props.fillParent ? '100%' : '40vh',

1
packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts
View File

@ -61,7 +61,6 @@ describe('ExpressionParameterInput', () => {
await waitFor(() => {
const editor = container.querySelector('.cm-content') as HTMLDivElement;
expect(editor).toBeInTheDocument();
expect(editor.getAttribute('contenteditable')).toEqual('false');
expect(editor.getAttribute('aria-readonly')).toEqual('true');
});
});

6
packages/editor-ui/src/composables/useExpressionEditor.ts
View File

@ -185,10 +185,7 @@ export const useExpressionEditor = ({
doc: toValue(editorValue),
extensions: [
customExtensions.value.of(toValue(extensions)),
readOnlyExtensions.value.of([
EditorState.readOnly.of(toValue(isReadOnly)),
EditorView.editable.of(!toValue(isReadOnly)),
]),
readOnlyExtensions.value.of([EditorState.readOnly.of(toValue(isReadOnly))]),
telemetryExtensions.value.of([]),
EditorView.updateListener.of(onEditorUpdate),
EditorView.focusChangeEffect.of((_, newHasFocus) => {
@ -229,7 +226,6 @@ export const useExpressionEditor = ({
editor.value.dispatch({
effects: readOnlyExtensions.value.reconfigure([
EditorState.readOnly.of(toValue(isReadOnly)),
EditorView.editable.of(!toValue(isReadOnly)),
]),
});
}