Special Position for Autocomplete Completions

1

I will have a one-line Codemirror editor.
It’s a small entry. About 200 pixels long.

Can I make the Completions appear below my input field instead of where the cursor is?

Screenshot

2

I solved by Using css transform results in incorrect behavior · Issue #324 · codemirror/dev · GitHub

Thanks.

3

But now I need to listen for completions to open and close. Is there an event listener for this? How to implement it?

4

You can query completionStatus on state changes to find out when it opens/closes.

5

@cihad @marijn could you please tell me how did you solve this? I have this exact requirement for single-line editor. tooltips option has no affect on completion or may be I used it wrong.

6

@marijn Sorry for the trouble. I would greatly appreciate any guidance on this issue?

7

Fish:


// ...omitted
return <>
  <CodeMirror
    value={value} extensions={[
       tooltips({ parent: autoCompletionWrapper.current! }),
    ]}
    onChange={onChange} 
  />
  <div ref={autoCompletionWrapper} className={styles.autocomplete} />
</>
}

.autocomplete {
  @apply w-full mt-[3px] absolute;
}

.autocomplete :global(.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel) {
  @apply font-mono text-xs;
}

.autocomplete :global(.cm-tooltip) {
  @apply border rounded-md bg-popover text-base shadow-md;
}

.autocomplete :global(.cm-tooltip-autocomplete) ul li {
  @apply !py-1.5 !pl-2 !pr-8 rounded-sm;
}

.autocomplete :global(.cm-tooltip-autocomplete) ul li:hover {
  @apply bg-accent text-accent-foreground;
  color: revert;
}
.autocomplete :global(.cm-tooltip-autocomplete) ul li[aria-selected] {
  @apply bg-accent;
  color: revert;
}

.autocomplete :global(.cm-tooltip.cm-tooltip-autocomplete) > ul {
  @apply p-1 min-w-[revert];
}

.autocomplete :global(.cm-tooltip.cm-tooltip-autocomplete) > ul > completion-section {
  @apply border-0 p-0.5 pb-0 font-sans;
}

.autocomplete :global(.cm-tooltip.cm-tooltip-autocomplete) > ul > completion-section:first-child {
  @apply pt-0;
}

.autocomplete :global(.cm-completionMatchedText) {
  @apply no-underline font-bold;
}

.inline :global(.cm-tooltip) {
  @apply !left-0 !top-0;
  position: unset !important;
}
1 Like