Start of themes

src-web/components/Editor/Editor.css

@@ -12,7 +12,7 @@
 }
 
 .cm-editor {
-    @apply bg-background w-full block text-[0.85rem];
+    @apply w-full block text-[0.85rem];
 
     &.cm-focused {
         outline: none !important;
@@ -26,6 +26,18 @@
         @apply text-placeholder;
     }
 
+    .cm-gutters {
+        @apply border-0 text-gray-500 text-opacity-30;
+        .cm-gutterElement {
+            @apply cursor-default;
+        }
+    }
+
+    &.cm-focused .cm-gutters,
+    .cm-gutters:hover {
+        @apply text-opacity-60;
+    }
+
     .placeholder-widget {
         @apply text-xs text-white/90 bg-blue-400/80 py-[0.5px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
         text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
@@ -69,10 +81,6 @@
     align-items: center !important;
 }
 
-.cm-editor .cm-gutters {
-    @apply bg-background border-0 text-gray-200;
-}
-
 .cm-editor .cm-gutterElement {
     transition: color var(--transition-duration);
 }
@@ -98,10 +106,6 @@
     @apply text-gray-400 bg-gray-100/20;
 }
 
-.cm-editor.cm-focused .cm-gutters {
-    @apply text-gray-300;
-}
-
 .cm-editor .cm-foldPlaceholder {
     @apply px-2 border border-gray-200 bg-gray-100;
 }

src-web/components/Editor/Editor.tsx

@@ -1,19 +1,17 @@
 import { defaultKeymap } from '@codemirror/commands';
-import type { Extension } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
-import type { CSSProperties, HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import { singleLineExt } from './singleLine';
 
 export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  height?: 'auto' | 'full';
+  heightMode?: 'auto' | 'full';
   contentType?: string;
-  backgroundColor?: string;
   autoFocus?: boolean;
   valueKey?: string | number;
   defaultValue?: string;
@@ -25,9 +23,8 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
 }
 
 export default function Editor({
-  height,
+  heightMode,
   contentType,
-  backgroundColor,
   autoFocus,
   placeholder,
   valueKey,
@@ -53,6 +50,18 @@ export default function Editor({
     [contentType, ref.current],
   );
 
+  const syncGutterBg = () => {
+    if (ref.current === null) return;
+    if (singleLine) return;
+    const gutterEl = ref.current.querySelector<HTMLDivElement>('.cm-gutters');
+    const bgClass = className
+      ?.split(/\s+/)
+      .find((c) => c.startsWith('!bg-') || c.startsWith('bg-'));
+    if (bgClass && gutterEl) {
+      gutterEl?.classList.add(`${bgClass}`);
+    }
+  };
+
   // Create codemirror instance when ref initializes
   useEffect(() => {
     if (ref.current === null) return;
@@ -69,6 +78,7 @@ export default function Editor({
         parent: ref.current,
       });
       setCm({ view, langHolder });
+      syncGutterBg();
       if (autoFocus && view) view.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
@@ -76,6 +86,10 @@ export default function Editor({
     return () => view?.destroy();
   }, [ref.current, valueKey]);
 
+  useEffect(() => {
+    syncGutterBg();
+  }, [ref.current, className]);
+
   // Update value when valueKey changes
   // TODO: This would be more efficient but the onChange handler gets fired on update
   // useEffect(() => {
@@ -98,11 +112,10 @@ export default function Editor({
       ref={ref}
       className={classnames(
         className,
-        'cm-wrapper text-base',
-        height === 'auto' ? 'cm-auto-height' : 'cm-full-height',
+        'cm-wrapper text-base bg-background',
+        heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
         singleLine ? 'cm-singleline' : 'cm-multiline',
       )}
-      data-color-background="var(--color-gray-50)"
       {...props}
     />
   );
@@ -158,24 +171,3 @@ function getExtensions({
     }),
   ];
 }
-
-const newState = ({
-  langHolder,
-  contentType,
-  useTemplating,
-  defaultValue,
-  extensions,
-}: {
-  langHolder: Compartment;
-  contentType?: string;
-  useTemplating?: boolean;
-  defaultValue?: string;
-  extensions: Extension[];
-}) => {
-  console.log('NEW STATE', defaultValue);
-  const langExt = getLanguageExtension({ contentType, useTemplating });
-  return EditorState.create({
-    doc: `${defaultValue ?? ''}`,
-    extensions: [...extensions, langHolder.of(langExt)],
-  });
-};

src-web/components/Editor/extensions.ts

@@ -51,7 +51,7 @@ export const myHighlightStyle = HighlightStyle.define([
   { tag: [t.attributeName], color: 'hsl(var(--color-violet-600))' },
   { tag: [t.attributeValue], color: 'hsl(var(--color-orange-600))' },
   { tag: [t.string], color: 'hsl(var(--color-yellow-600))' },
-  { tag: [t.keyword, t.meta, t.operator], color: '#45e8a4' },
+  { tag: [t.keyword, t.meta, t.operator], color: 'hsl(var(--color-red-600))' },
 ]);
 
 // export const defaultHighlightStyle = HighlightStyle.define([