starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-21 16:21:25 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix autocomplete inside dialog

Browse Source
This commit is contained in:
Gregory Schier
2023-03-03 17:03:20 -08:00
parent 1382d7c523
commit abc3745be1
7 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -9,7 +9,8 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="radix-portal"></div> <div id="cm-portal" class="cm-portal" style="pointer-events: auto"></div>
<div id="radix-portal" class="cm-portal"></div>
<script type="module" src="/src-web/main.tsx"></script> <script type="module" src="/src-web/main.tsx"></script>
</body> </body>
</html> </html>

38
src-web/components/Dialog.tsx
View File

@@ -29,24 +29,26 @@ export function Dialog({
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}> <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}> <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" /> <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
<D.Content <D.Content className={classnames(className, 'dialog-content', 'fixed inset-0')}>
className={classnames( <div
className, className={classnames(
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50', className,
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto', 'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
wide && 'w-[80vw] max-w-[50rem]', 'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
)} wide && 'w-[80vw] max-w-[50rem]',
> )}
<D.Close asChild className="ml-auto absolute right-1 top-1"> >
<IconButton aria-label="Close" icon="x" size="sm" /> <D.Close asChild className="ml-auto absolute right-1 top-1">
</D.Close> <IconButton aria-label="Close" icon="x" size="sm" />
<VStack space={3}> </D.Close>
<HStack items="center" className="pb-3"> <VStack space={3}>
<D.Title className="text-xl font-semibold">{title}</D.Title> <HStack items="center" className="pb-3">
</HStack> <D.Title className="text-xl font-semibold">{title}</D.Title>
{description && <D.Description>{description}</D.Description>} </HStack>
<div>{children}</div> {description && <D.Description>{description}</D.Description>}
</VStack> <div>{children}</div>
</VStack>
</div>
</D.Content> </D.Content>
</motion.div> </motion.div>
</D.Portal> </D.Portal>

14
src-web/components/Editor/Editor.css
View File

@@ -126,26 +126,26 @@
/* <-- */ /* <-- */
.cm-editor .cm-tooltip { .cm-tooltip.cm-tooltip {
@apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70; @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; @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]; @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; @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; @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; @apply text-sm;
} }

25
src-web/components/Editor/Editor.tsx
View File

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

1
src-web/components/Editor/extensions.ts
View File

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

16
src-web/components/HeaderEditor.tsx
View File

@@ -8,8 +8,9 @@ import { HStack, VStack } from './Stacks';
export function HeaderEditor() { export function HeaderEditor() {
const [headers, setHeaders] = useState<HttpHeader[]>([]); const [headers, setHeaders] = useState<HttpHeader[]>([]);
const [newHeader, setNewHeader] = useState<HttpHeader>({ name: '', value: '' }); const [newHeader, setNewHeader] = useState<HttpHeader>({ name: '', value: '' });
const handleSubmit = (e: FormEvent) => { const handleSubmit = (e?: FormEvent) => {
e.preventDefault(); console.log('SUBMIT');
e?.preventDefault();
setHeaders([...headers, newHeader]); setHeaders([...headers, newHeader]);
setNewHeader({ name: '', value: '' }); setNewHeader({ name: '', value: '' });
}; };
@@ -31,9 +32,10 @@ export function HeaderEditor() {
header={header} header={header}
onChange={(h) => handleChangeHeader(h, i)} onChange={(h) => handleChangeHeader(h, i)}
onDelete={() => handleDelete(i)} onDelete={() => handleDelete(i)}
onSubmit={handleSubmit}
/> />
))} ))}
<FormRow addSubmit onChange={setNewHeader} header={newHeader} /> <FormRow addSubmit onChange={setNewHeader} header={newHeader} onSubmit={handleSubmit} />
</VStack> </VStack>
</form> </form>
); );
@@ -43,10 +45,12 @@ function FormRow({
header, header,
addSubmit, addSubmit,
onChange, onChange,
onSubmit,
onDelete, onDelete,
}: { }: {
header: HttpHeader; header: HttpHeader;
addSubmit?: boolean; addSubmit?: boolean;
onSubmit?: () => void;
onChange: (header: HttpHeader) => void; onChange: (header: HttpHeader) => void;
onDelete?: () => void; onDelete?: () => void;
}) { }) {
@@ -55,9 +59,12 @@ function FormRow({
<HStack space={2}> <HStack space={2}>
<Input <Input
autoFocus autoFocus
useEditor
useTemplating
name="name" name="name"
label="Name" label="Name"
placeholder="name" placeholder="name"
onSubmit={onSubmit}
value={header.name} value={header.name}
hideLabel hideLabel
onChange={(name) => { onChange={(name) => {
@@ -67,6 +74,9 @@ function FormRow({
<Input <Input
name="value" name="value"
label="Value" label="Value"
useEditor
useTemplating
onSubmit={onSubmit}
placeholder="value" placeholder="value"
value={header.value} value={header.value}
hideLabel hideLabel

2
src-web/components/Sidebar.tsx
View File

@@ -29,7 +29,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
{...props} {...props}
> >
<HStack as={WindowDragRegion} items="center" className="pr-1" justify="end"> <HStack as={WindowDragRegion} items="center" className="pr-1" justify="end">
<Dialog wide open={open} onOpenChange={setOpen} title="This is the title"> <Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
<HeaderEditor /> <HeaderEditor />
<Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}> <Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
Save Save