Use white-space instead; fix scrolling; don't close autocomplete tooltips on click

This commit is contained in:
Aria
2025-08-26 14:14:00 -05:00
parent 877bc95a58
commit a5886bb9d4
2 changed files with 17 additions and 12 deletions
+8 -6
View File
@@ -56,11 +56,13 @@ const buildExamples = (examples) =>
export const Autocomplete = ({ doc, label }) =>
h`
<div class="autocomplete-info-tooltip">
<h3 class="autocomplete-info-function-name">${label || getDocLabel(doc)}</h3>
${doc.description ? `<div class="autocomplete-info-function-description">${doc.description}</div>` : ''}
${buildParamsList(doc.params)}
${buildExamples(doc.examples)}
<div class="autocomplete-info-container">
<div class="autocomplete-info-tooltip">
<h3 class="autocomplete-info-function-name">${label || getDocLabel(doc)}</h3>
${doc.description ? `<div class="autocomplete-info-function-description">${doc.description}</div>` : ''}
${buildParamsList(doc.params)}
${buildExamples(doc.examples)}
</div>
</div>
`[0];
@@ -98,4 +100,4 @@ export const strudelAutocomplete = (context) => {
};
export const isAutoCompletionEnabled = (enabled) =>
enabled ? [autocompletion({ override: [strudelAutocomplete] })] : [];
enabled ? [autocompletion({ override: [strudelAutocomplete], closeOnBlur: false })] : [];
+9 -6
View File
@@ -79,15 +79,12 @@
max-width: 500px !important;
min-width: 300px !important;
max-height: 400px !important;
white-space: normal !important;
overflow: auto !important;
background-color: var(--lineHighlight) !important;
}
/* Main tooltip container */
.autocomplete-info-tooltip {
.autocomplete-info-container {
padding: 12px !important;
padding-bottom: 12px !important;
border-radius: 4px !important;
color: var(--foreground);
font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
@@ -96,10 +93,16 @@
max-width: 600px;
max-height: 400px;
min-width: 400px;
white-space: normal !important;
overflow-y: auto !important;
}
.autocomplete-info-function-description p {
margin-bottom: 1em;
.autocomplete-info-tooltip {
overflow-y: auto !important;
}
.autocomplete-info-function-description {
white-space: pre-wrap !important;
}
.autocomplete-info-function-name {