mirror of
https://github.com/n8n-io/n8n.git
synced 2024-08-17 00:50:42 +03:00
fix(editor): Enable expression preview in SQL node when looking at executions (#9733)
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
parent
df2bc84d2b
commit
d9747d5e9b
@ -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)',
|
||||
|
@ -97,7 +97,6 @@ onMounted(() => {
|
||||
extensions: [
|
||||
EditorState.readOnly.of(true),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.editable.of(false),
|
||||
EditorView.domEventHandlers({ scroll: forceParse }),
|
||||
...props.extensions,
|
||||
],
|
||||
|
@ -53,7 +53,7 @@ const extensions = computed(() => [
|
||||
),
|
||||
n8nLang(),
|
||||
n8nAutocompletion(),
|
||||
inputTheme({ rows: props.rows }),
|
||||
inputTheme({ isReadOnly: props.isReadOnly, rows: props.rows }),
|
||||
history(),
|
||||
expressionInputHandler(),
|
||||
EditorView.lineWrapping,
|
||||
|
@ -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%',
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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)),
|
||||
]),
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user