refactor(editor): Replace monaco-editor/prismjs with CodeMirror (#5983)

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Milorad FIlipović <milorad@n8n.io>
Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
2023-04-25 14:57:21 +00:00
committed by GitHub
parent 88724bb056
commit ca4e0df90b
25 changed files with 240 additions and 691 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div :class="$style.container">
<div :class="['run-data', $style.container]">
<n8n-callout
v-if="canPinData && hasPinData && !editMode.enabled && !isProductionExecutionPreview"
theme="secondary"
@@ -190,11 +190,10 @@
<div v-else-if="editMode.enabled" :class="$style.editMode">
<div :class="[$style.editModeBody, 'ignore-key-press']">
<code-editor
<code-node-editor
:value="editMode.value"
:options="{ scrollBeyondLastLine: false }"
type="json"
@input="ndvStore.setOutputPanelEditModeValue($event)"
language="json"
@valueChanged="ndvStore.setOutputPanelEditModeValue($event)"
/>
</div>
<div :class="$style.editModeFooter">
@@ -228,7 +227,7 @@
</div>
<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
<slot name="recovered-artifical-output-data"></slot>
<slot name="recovered-artificial-output-data"></slot>
</div>
<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
@@ -501,7 +500,7 @@ import { externalHooks } from '@/mixins/externalHooks';
import { genericHelpers } from '@/mixins/genericHelpers';
import { nodeHelpers } from '@/mixins/nodeHelpers';
import { pinData } from '@/mixins/pinData';
import { CodeEditor } from '@/components/forms';
import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
import { dataPinningEventBus } from '@/event-bus';
import { clearJsonKey, executionDataToJson, stringSizeInBytes } from '@/utils';
import { isEmpty } from '@/utils';
@@ -525,7 +524,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
BinaryDataDisplay,
NodeErrorView,
WarningTooltip,
CodeEditor,
CodeNodeEditor,
RunDataTable,
RunDataJson,
RunDataSchema,
@@ -1571,28 +1570,30 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
}
.editMode {
height: calc(100% - var(--spacing-s));
height: 100%;
max-height: calc(100% - var(--spacing-3xl));
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
justify-content: stretch;
padding-left: var(--spacing-s);
padding-right: var(--spacing-s);
}
.editModeBody {
flex: 1 1 auto;
max-height: 100%;
width: 100%;
height: 100%;
overflow: hidden;
overflow: auto;
}
.editModeFooter {
flex: 0 1 auto;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-s);
padding-bottom: var(--spacing-s);
}
.editModeFooterInfotip {
@@ -1617,3 +1618,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
border-bottom-left-radius: 0;
}
</style>
<style lang="scss" scoped>
.run-data {
.code-node-editor {
height: 100%;
}
}
</style>