mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages 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': { '.cm-content': {
fontFamily: BASE_STYLING.fontFamily, fontFamily: BASE_STYLING.fontFamily,
caretColor: 'var(--color-code-caret)', caretColor: isReadOnly ? 'transparent' : 'var(--color-code-caret)',
}, },
'.cm-cursor, .cm-dropCursor': { '.cm-cursor, .cm-dropCursor': {
borderLeftColor: 'var(--color-code-caret)', borderLeftColor: 'var(--color-code-caret)',

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

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

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

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

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

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

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

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

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

@ -54,7 +54,6 @@ const extensions = computed(() => {
lineNumbers(), lineNumbers(),
EditorView.lineWrapping, EditorView.lineWrapping,
EditorState.readOnly.of(props.isReadOnly), EditorState.readOnly.of(props.isReadOnly),
EditorView.editable.of(!props.isReadOnly),
codeNodeEditorTheme({ codeNodeEditorTheme({
isReadOnly: props.isReadOnly, isReadOnly: props.isReadOnly,
maxHeight: props.fillParent ? '100%' : '40vh', 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(() => { await waitFor(() => {
const editor = container.querySelector('.cm-content') as HTMLDivElement; const editor = container.querySelector('.cm-content') as HTMLDivElement;
expect(editor).toBeInTheDocument(); expect(editor).toBeInTheDocument();
expect(editor.getAttribute('contenteditable')).toEqual('false');
expect(editor.getAttribute('aria-readonly')).toEqual('true'); 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), doc: toValue(editorValue),
extensions: [ extensions: [
customExtensions.value.of(toValue(extensions)), customExtensions.value.of(toValue(extensions)),
readOnlyExtensions.value.of([ readOnlyExtensions.value.of([EditorState.readOnly.of(toValue(isReadOnly))]),
EditorState.readOnly.of(toValue(isReadOnly)),
EditorView.editable.of(!toValue(isReadOnly)),
]),
telemetryExtensions.value.of([]), telemetryExtensions.value.of([]),
EditorView.updateListener.of(onEditorUpdate), EditorView.updateListener.of(onEditorUpdate),
EditorView.focusChangeEffect.of((_, newHasFocus) => { EditorView.focusChangeEffect.of((_, newHasFocus) => {
@ -229,7 +226,6 @@ export const useExpressionEditor = ({
editor.value.dispatch({ editor.value.dispatch({
effects: readOnlyExtensions.value.reconfigure([ effects: readOnlyExtensions.value.reconfigure([
EditorState.readOnly.of(toValue(isReadOnly)), EditorState.readOnly.of(toValue(isReadOnly)),
EditorView.editable.of(!toValue(isReadOnly)),
]), ]),
}); });
} }