Fix autocomplete inside dialog

src-web/components/Editor/Editor.css

@@ -126,26 +126,26 @@
 
 /* <-- */
 
-.cm-editor .cm-tooltip {
-    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70;
+.cm-tooltip.cm-tooltip {
+    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50;
 }
 
-.cm-editor .cm-tooltip * {
+.cm-tooltip.cm-tooltip * {
     @apply transition-none;
 }
 
-.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
+.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul {
     @apply p-1 max-h-[40vh];
 }
 
-.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li {
     @apply cursor-default py-1 px-2 rounded-sm text-gray-500;
 }
 
-.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
+.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
     @apply bg-gray-50 text-gray-800;
 }
 
-.cm-editor .cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
+.cm-tooltip.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
     @apply text-sm;
 }

src-web/components/Editor/Editor.tsx

@@ -1,6 +1,6 @@
 import { defaultKeymap } from '@codemirror/commands';
-import { Compartment, EditorState, Prec } from '@codemirror/state';
-import { keymap, placeholder as placeholderExt } from '@codemirror/view';
+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 { HTMLAttributes } from 'react';
@@ -13,6 +13,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   contentType: string;
   valueKey?: string;
   placeholder?: string;
+  tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
   onSubmit?: () => void;
@@ -35,8 +36,16 @@ export default function Editor({
   const ref = useRef<HTMLDivElement>(null);
   const extensions = useMemo(
     () =>
-      getExtensions({ placeholder, onSubmit, singleLine, onChange, contentType, useTemplating }),
-    [contentType],
+      getExtensions({
+        container: ref.current,
+        placeholder,
+        onSubmit,
+        singleLine,
+        onChange,
+        contentType,
+        useTemplating,
+      }),
+    [contentType, ref.current],
   );
 
   const newState = (langHolder: Compartment) => {
@@ -95,6 +104,7 @@ export default function Editor({
 }
 
 function getExtensions({
+  container,
   singleLine,
   placeholder,
   onChange,
@@ -104,10 +114,15 @@ function getExtensions({
 }: Pick<
   Props,
   'singleLine' | 'onChange' | 'onSubmit' | '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;
+
   return [
     ...baseExtensions,
+    tooltips({ parent }),
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
     ...(singleLine ? [singleLineExt()] : []),
     ...(!singleLine ? [multiLineExtensions] : []),

src-web/components/Editor/extensions.ts

@@ -31,6 +31,7 @@ import {
   keymap,
   lineNumbers,
   rectangularSelection,
+  tooltips,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { twig } from './twig/extension';