diff --git a/index.html b/index.html index f041da8c..305f804a 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@
-
+
+
diff --git a/src-web/components/Dialog.tsx b/src-web/components/Dialog.tsx index 9271e2bd..9afe465e 100644 --- a/src-web/components/Dialog.tsx +++ b/src-web/components/Dialog.tsx @@ -29,24 +29,26 @@ export function Dialog({ ('#radix-portal')}> - - - - - - - {title} - - {description && {description}} -
{children}
- + +
+ + + + + + {title} + + {description && {description}} +
{children}
+ +
diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css index dda5fa27..a77f201f 100644 --- a/src-web/components/Editor/Editor.css +++ b/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; } diff --git a/src-web/components/Editor/Editor.tsx b/src-web/components/Editor/Editor.tsx index 1cea2e51..8e25415b 100644 --- a/src-web/components/Editor/Editor.tsx +++ b/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, '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(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('.dialog-content') ?? undefined; + return [ ...baseExtensions, + tooltips({ parent }), keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap), ...(singleLine ? [singleLineExt()] : []), ...(!singleLine ? [multiLineExtensions] : []), diff --git a/src-web/components/Editor/extensions.ts b/src-web/components/Editor/extensions.ts index 85dc6418..c098c57a 100644 --- a/src-web/components/Editor/extensions.ts +++ b/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'; diff --git a/src-web/components/HeaderEditor.tsx b/src-web/components/HeaderEditor.tsx index f3f332da..a31b7049 100644 --- a/src-web/components/HeaderEditor.tsx +++ b/src-web/components/HeaderEditor.tsx @@ -8,8 +8,9 @@ import { HStack, VStack } from './Stacks'; export function HeaderEditor() { const [headers, setHeaders] = useState([]); const [newHeader, setNewHeader] = useState({ name: '', value: '' }); - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); + const handleSubmit = (e?: FormEvent) => { + console.log('SUBMIT'); + e?.preventDefault(); setHeaders([...headers, newHeader]); setNewHeader({ name: '', value: '' }); }; @@ -31,9 +32,10 @@ export function HeaderEditor() { header={header} onChange={(h) => handleChangeHeader(h, i)} onDelete={() => handleDelete(i)} + onSubmit={handleSubmit} /> ))} - + ); @@ -43,10 +45,12 @@ function FormRow({ header, addSubmit, onChange, + onSubmit, onDelete, }: { header: HttpHeader; addSubmit?: boolean; + onSubmit?: () => void; onChange: (header: HttpHeader) => void; onDelete?: () => void; }) { @@ -55,9 +59,12 @@ function FormRow({ { @@ -67,6 +74,9 @@ function FormRow({ - +