Try new layout and a bunch of editor fixes

src-web/components/Editor/Editor.css

@@ -5,45 +5,62 @@
 }
 
 .cm-wrapper .cm-editor {
+    @apply inset-0;
     position: absolute !important;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    font-size: 0.85em;
 }
 
 .cm-editor {
     @apply w-full block;
+
+    &.cm-focused {
+        outline: none !important;
+    }
+
+    .cm-line {
+        @apply text-gray-900 pl-1 pr-1.5;
+    }
+
+    .cm-placeholder {
+        @apply text-placeholder;
+    }
+
+    .placeholder-widget {
+        @apply text-xs text-white/90 bg-blue-400/80 py-[1px] 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);
+    }
 }
 
-.cm-singleline .cm-scroller {
-    overflow: hidden !important;;
+
+.cm-singleline {
+    .cm-editor {
+        @apply h-full w-full;
+    }
+
+    .cm-scroller {
+        font-family: inherit;
+        overflow: hidden !important;;
+    }
+
+    .cm-line {
+        @apply px-0;
+    }
 }
 
-.cm-editor .placeholder-widget {
-    @apply text-xs text-white bg-blue-400 py-[1px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-500;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
+.cm-multiline {
+    .cm-editor {
+        @apply h-full;
+    }
+
+    .cm-scroller {
+        @apply rounded;
+    }
 }
 
-.cm-multiline .cm-editor .cm-scroller {
-    @apply rounded-lg bg-gray-50;
-}
-
-.cm-editor.cm-focused {
-    outline: none !important;
-}
 
 .cm-multiline .cm-editor.cm-focused .cm-scroller {
-    box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);
-}
-
-.cm-editor .cm-line {
-    color: hsl(var(--color-gray-900));
-}
-
-.cm-multiline .cm-editor .cm-line {
-    padding-left: 1em;
-    padding-right: 1.5em;
+    /* Active border state if we want it */
+    /*box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);*/
 }
 
 .cm-singleline .cm-editor .cm-scroller {
@@ -52,7 +69,8 @@
 }
 
 .cm-editor .cm-gutters {
-    @apply bg-gray-50 border-r-0 text-gray-200;
+    /*@apply bg-gray-50 border-r-0 text-gray-200;*/
+    @apply bg-transparent border-0 text-gray-200;
 }
 
 .cm-editor .cm-gutterElement {
@@ -113,39 +131,56 @@
     @apply bg-gray-200;
 }
 
-/* --> Add padding to container. For some reason, using padding on both adds an extra
- * 1px offset so we need to use a combination of padding and margin.
- */
-.cm-editor .cm-gutters {
-    @apply pt-1;
+.cm-singleline .cm-editor {
+    .cm-content {
+        @apply h-full flex items-center;
+    }
 }
 
-.cm-editor .cm-content {
-    @apply mt-1;
+.cm-scroller {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+        @apply w-[5px] h-[5px] bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        @apply bg-gray-100 bg-opacity-30 rounded-full;
+    }
+}
+
+.cm-editor.cm-focused .cm-scroller::-webkit-scrollbar-thumb {
+    @apply bg-opacity-80;
 }
 
 /* <-- */
 
+/* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip {
-    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50;
-}
+    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50 pointer-events-auto;
 
-.cm-tooltip.cm-tooltip * {
-    @apply transition-none;
-}
+    * {
+        @apply transition-none;
+    }
 
-.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul {
-    @apply p-1 max-h-[40vh];
-}
+    &.cm-tooltip-autocomplete {
+        & > ul {
+            @apply p-1 max-h-[40vh];
+        }
 
-.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li {
-    @apply cursor-default py-1 px-2 rounded-sm text-gray-500;
-}
+        & > ul > li {
+            @apply cursor-default px-2 rounded-sm text-gray-500 h-7 flex items-center;
+        }
 
-.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
-    @apply bg-gray-50 text-gray-800;
-}
+        & > ul > li[aria-selected] {
+            @apply bg-gray-50 text-gray-800;
+        }
 
-.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
-    @apply text-sm;
+        & > ul > li:hover {
+            @apply text-gray-700;
+        }
+
+        .cm-completionIcon {
+            @apply text-sm flex items-center pb-0.5;
+        }
+    }
 }

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,5 @@
 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';
@@ -9,29 +10,30 @@ import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import { singleLineExt } from './singleLine';
 
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  contentType: string;
-  valueKey?: string;
+export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  contentType?: string;
+  autoFocus?: boolean;
+  valueKey?: string | number;
+  defaultValue?: string;
   placeholder?: string;
   tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
-  onSubmit?: () => void;
   singleLine?: boolean;
 }
 
 export default function Editor({
   contentType,
+  autoFocus,
   placeholder,
   valueKey,
   useTemplating,
   defaultValue,
   onChange,
-  onSubmit,
   className,
   singleLine,
   ...props
-}: Props) {
+}: EditorProps) {
   const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
   const extensions = useMemo(
@@ -39,7 +41,6 @@ export default function Editor({
       getExtensions({
         container: ref.current,
         placeholder,
-        onSubmit,
         singleLine,
         onChange,
         contentType,
@@ -48,25 +49,23 @@ export default function Editor({
     [contentType, ref.current],
   );
 
-  const newState = (langHolder: Compartment) => {
-    const langExt = getLanguageExtension({ contentType, useTemplating });
-    return EditorState.create({
-      doc: `${defaultValue ?? ''}`,
-      extensions: [...extensions, langHolder.of(langExt)],
-    });
-  };
-
   // Create codemirror instance when ref initializes
   useEffect(() => {
     if (ref.current === null) return;
     let view: EditorView | null = null;
     try {
       const langHolder = new Compartment();
+      const langExt = getLanguageExtension({ contentType, useTemplating });
+      const state = EditorState.create({
+        doc: `${defaultValue ?? ''}`,
+        extensions: [...extensions, langHolder.of(langExt)],
+      });
       view = new EditorView({
-        state: newState(langHolder),
+        state,
         parent: ref.current,
       });
       setCm({ view, langHolder });
+      if (autoFocus && view) view.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
@@ -108,17 +107,19 @@ function getExtensions({
   singleLine,
   placeholder,
   onChange,
-  onSubmit,
   contentType,
   useTemplating,
 }: Pick<
-  Props,
-  'singleLine' | 'onChange' | 'onSubmit' | 'contentType' | 'useTemplating' | 'placeholder'
+  EditorProps,
+  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder'
 > & { container: HTMLDivElement | null }) {
   const ext = getLanguageExtension({ contentType, useTemplating });
 
-  // TODO: This is a hack to get the tooltips to render in the correct place when inside a modal dialog
-  const parent = container?.closest<HTMLDivElement>('.dialog-content') ?? undefined;
+  // TODO: Ensure tooltips render inside the dialog if we are in one.
+  const parent =
+    container?.closest<HTMLDivElement>('[role="dialog"]') ??
+    document.querySelector<HTMLDivElement>('#cm-portal') ??
+    undefined;
 
   return [
     ...baseExtensions,
@@ -130,11 +131,15 @@ function getExtensions({
     ...(placeholder ? [placeholderExt(placeholder)] : []),
 
     // Handle onSubmit
-    ...(onSubmit
+    ...(singleLine
       ? [
           EditorView.domEventHandlers({
             keydown: (e) => {
-              if (e.key === 'Enter') onSubmit?.();
+              if (e.key === 'Enter') {
+                const el = e.currentTarget as HTMLElement;
+                const form = el.closest('form');
+                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+              }
             },
           }),
         ]
@@ -147,3 +152,24 @@ 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

@@ -31,7 +31,6 @@ import {
   keymap,
   lineNumbers,
   rectangularSelection,
-  tooltips,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { twig } from './twig/extension';
@@ -90,10 +89,10 @@ export function getLanguageExtension({
   contentType,
   useTemplating,
 }: {
-  contentType: string;
+  contentType?: string;
   useTemplating?: boolean;
 }) {
-  const justContentType = contentType.split(';')[0] ?? contentType;
+  const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   const base = syntaxExtensions[justContentType] ?? json();
   if (!useTemplating) {
     return [base];
@@ -108,7 +107,7 @@ export const baseExtensions = [
   drawSelection(),
   dropCursor(),
   bracketMatching(),
-  autocompletion({ closeOnBlur: true }),
+  autocompletion({ closeOnBlur: true, interactionDelay: 200 }),
   syntaxHighlighting(myHighlightStyle),
   EditorState.allowMultipleSelections.of(true),
 ];

src-web/components/Editor/twig/completion.ts

@@ -1,5 +1,4 @@
 import type { CompletionContext } from '@codemirror/autocomplete';
-import { match } from 'assert';
 
 const openTag = '${[ ';
 const closeTag = ' ]}';
@@ -18,7 +17,7 @@ const variables = [
 ];
 
 const MIN_MATCH_VAR = 2;
-const MIN_MATCH_NAME = 2;
+const MIN_MATCH_NAME = 4;
 
 export function completions(context: CompletionContext) {
   const toStartOfName = context.matchBefore(/\w*/);