Read-only editor

src-web/components/Editor/Editor.css

@@ -1,6 +1,5 @@
 .cm-wrapper {
     @apply h-full;
-}
 
     .cm-editor {
         @apply w-full block text-base;
@@ -13,6 +12,10 @@
             outline: none !important;
         }
 
+        .cm-selectionBackground {
+            @apply bg-gray-300;
+        }
+
         .cm-line {
             @apply text-gray-900 pl-1 pr-1.5;
         }
@@ -29,8 +32,7 @@
             }
         }
 
-    &.cm-focused .cm-gutters,
-    .cm-gutters:hover {
+        &.cm-focused .cm-gutters {
             @apply text-opacity-60;
         }
 
@@ -45,8 +47,7 @@
         }
     }
 
-
-.cm-singleline {
+    &.cm-singleline {
         .cm-editor {
             @apply h-full w-full;
         }
@@ -62,7 +63,7 @@
         }
     }
 
-.cm-multiline {
+    &.cm-multiline {
         &.cm-full-height {
             @apply relative;
 
@@ -80,6 +81,7 @@
             @apply font-mono text-[0.75rem];
         }
     }
+}
 
 .cm-editor .cm-gutterElement {
     transition: color var(--transition-duration);
@@ -115,20 +117,13 @@
     @apply bg-transparent;
 }
 
-.cm-editor.cm-focused .cm-activeLineGutter {
+.cm-wrapper:not(.cm-readonly) .cm-editor {
+    &.cm-focused .cm-activeLineGutter {
         @apply text-gray-800;
     }
-
-.cm-editor .cm-cursor {
+    .cm-cursor {
         @apply border-l-2 border-gray-800;
     }
-
-.cm-editor .cm-selectionBackground {
-    @apply bg-gray-200/70;
-}
-
-.cm-editor.cm-focused .cm-selectionBackground {
-    @apply bg-gray-200;
 }
 
 .cm-singleline .cm-editor {

src-web/components/Editor/Editor.tsx

@@ -10,6 +10,7 @@ import { baseExtensions, getLanguageExtension, multiLineExtensions } from './ext
 import { singleLineExt } from './singleLine';
 
 export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  readOnly?: boolean;
   heightMode?: 'auto' | 'full';
   contentType?: string;
   autoFocus?: boolean;
@@ -23,6 +24,7 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
 }
 
 export default function Editor({
+  readOnly,
   heightMode,
   contentType,
   autoFocus,
@@ -41,6 +43,7 @@ export default function Editor({
     () =>
       getExtensions({
         container: ref.current,
+        readOnly,
         placeholder,
         singleLine,
         onChange,
@@ -116,6 +119,7 @@ export default function Editor({
         'cm-wrapper text-base bg-background',
         heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
         singleLine ? 'cm-singleline' : 'cm-multiline',
+        readOnly && 'cm-readonly',
       )}
       {...props}
     />
@@ -124,6 +128,7 @@ export default function Editor({
 
 function getExtensions({
   container,
+  readOnly,
   singleLine,
   placeholder,
   onChange,
@@ -131,7 +136,7 @@ function getExtensions({
   useTemplating,
 }: Pick<
   EditorProps,
-  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder'
+  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
 > & { container: HTMLDivElement | null }) {
   const ext = getLanguageExtension({ contentType, useTemplating });
 
@@ -148,6 +153,7 @@ function getExtensions({
     ...(singleLine ? [singleLineExt()] : []),
     ...(!singleLine ? [multiLineExtensions] : []),
     ...(ext ? [ext] : []),
+    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
     ...(placeholder ? [placeholderExt(placeholder)] : []),
 
     ...(singleLine

src-web/components/Editor/extensions.ts

@@ -34,6 +34,7 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { debouncedAutocompletionDisplay } from './autocomplete';
+import { readOnlyTransactionFilter } from './readOnlyTransactionFilter';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
 

src-web/components/ResponsePane.tsx

@@ -130,6 +130,7 @@ export function ResponsePane({ requestId, className }: Props) {
               </div>
             ) : response?.body ? (
               <Editor
+                readOnly
                 className="bg-gray-50 dark:!bg-gray-100"
                 valueKey={`${contentType}:${response.updatedAt}`}
                 defaultValue={response?.body}

src-web/lib/theme/theme.ts

@@ -146,7 +146,6 @@ export function generateColorVariant(
     lightnessMod > 0
       ? hsl[2] + (100 * whitePoint - hsl[2]) * lightnessMod
       : hsl[2] + hsl[2] * (1 - blackPoint) * lightnessMod;
-  console.log('NEWL', color, newL);
   return `hsl(${hsl[0]},${hsl[1]}%,${newL.toFixed(1)}%)`;
 }