feat(editor): Add schema view to expression modal (#9976)

packages/editor-ui/src/components/ExpressionEditorModal/theme.ts

@@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 
-const commonThemeProps = {
+const commonThemeProps = (isReadOnly = false) => ({
 	'&': {
 		borderWidth: 'var(--border-width-base)',
 		borderStyle: 'var(--input-border-style, var(--border-style-base))',
@@ -9,31 +9,33 @@ const commonThemeProps = {
 		borderRadius: 'var(--input-border-radius, var(--border-radius-base))',
 		backgroundColor: 'var(--color-expression-editor-background)',
 	},
+	'.cm-cursor, .cm-dropCursor': {
+		borderLeftColor: 'var(--color-code-caret)',
+	},
 	'&.cm-focused': {
 		borderColor: 'var(--color-secondary)',
 		outline: '0 !important',
 	},
 	'.cm-content': {
 		fontFamily: 'var(--font-family-monospace)',
-		height: '220px',
 		padding: 'var(--spacing-xs)',
 		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 = () => {
-	const theme = EditorView.theme(commonThemeProps);
+export const inputTheme = (isReadOnly = false) => {
+	const theme = EditorView.theme(commonThemeProps(isReadOnly));
 
 	return [theme, highlighter.resolvableStyle];
 };
 
 export const outputTheme = () => {
 	const theme = EditorView.theme({
-		...commonThemeProps,
+		...commonThemeProps(true),
 		'.cm-valid-resolvable': {
 			padding: '0 2px',
 			borderRadius: '2px',