diff --git a/packages/compass-editor/src/codemirror/ace-compat-autocompleter.ts b/packages/compass-editor/src/codemirror/ace-compat-autocompleter.ts index 8b71caa1bbe..9ed86376ed5 100644 --- a/packages/compass-editor/src/codemirror/ace-compat-autocompleter.ts +++ b/packages/compass-editor/src/codemirror/ace-compat-autocompleter.ts @@ -21,6 +21,7 @@ export function mapMongoDBCompletionToCodemirrorCompletion( ? completion.value : wrapField(completion.value, escape === 'always'), detail: completion.meta?.startsWith('field') ? 'field' : completion.meta, + type: completion.meta?.startsWith('field') ? 'field' : 'method', info() { if (!completion.description) { return null; diff --git a/packages/compass-editor/src/codemirror/query-autocompleter-with-history.ts b/packages/compass-editor/src/codemirror/query-autocompleter-with-history.ts index 77a7d899579..49a0bda23ed 100644 --- a/packages/compass-editor/src/codemirror/query-autocompleter-with-history.ts +++ b/packages/compass-editor/src/codemirror/query-autocompleter-with-history.ts @@ -3,11 +3,11 @@ import { createQueryHistoryAutocompleter, } from './query-history-autocompleter'; import { createQueryAutocompleter } from './query-autocompleter'; -import type { - CompletionSource, - CompletionContext, - CompletionSection, - Completion, +import { + type CompletionSource, + type CompletionContext, + type CompletionSection, + type Completion, } from '@codemirror/autocomplete'; import type { CompletionOptions } from '../autocompleter'; import { css } from '@mongodb-js/compass-components'; diff --git a/packages/compass-editor/src/codemirror/query-history-autocompleter.ts b/packages/compass-editor/src/codemirror/query-history-autocompleter.ts index 691539b2b1f..fc42264993f 100644 --- a/packages/compass-editor/src/codemirror/query-history-autocompleter.ts +++ b/packages/compass-editor/src/codemirror/query-history-autocompleter.ts @@ -36,7 +36,7 @@ export const createQueryHistoryAutocompleter = ( const options = savedQueries.map((query) => ({ label: createQuery(query), - type: 'text', + type: 'query-history', detail: formatDate(query.lastExecuted.getTime()), info: () => createInfo(query, theme).dom, apply: () => { diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx index 20f9127189b..88bf441c32a 100644 --- a/packages/compass-editor/src/editor.tsx +++ b/packages/compass-editor/src/editor.tsx @@ -334,14 +334,70 @@ function getStylesForTheme(theme: CodemirrorThemeType) { backgroundColor: editorPalette[theme].autocompleteSelectedBackgroundColor, }, - '& .cm-completionIcon': { - display: 'none', + '& .cm-completionIcon-query-history': { + marginRight: `${spacing[200]}px`, + '&:after': { + content: '""', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '16px', + height: '16px', + backgroundImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 4.75C7.25 4.33579 7.58579 4 8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.90966L10.4939 9.43556C10.8056 9.70832 10.8372 10.1821 10.5644 10.4939C10.2917 10.8056 9.81786 10.8372 9.50613 10.5644L7.51059 8.81833C7.5014 8.8104 7.4924 8.80226 7.48361 8.79391C7.41388 8.7278 7.35953 8.65117 7.32087 8.56867C7.27541 8.47195 7.25 8.36394 7.25 8.25V4.75Z' fill='${encodeURIComponent( + editorPalette[theme].autocompleteColor + )}'/%3E%3C/svg%3E")`, + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + }, + }, + '& .cm-completionIcon-field': { + marginRight: `${spacing[50]}px`, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '16px', + height: '16px', + '&:after': { + content: '""', + display: 'block', + width: '13px', + height: '11px', + backgroundImage: `url("data:image/svg+xml,%3Csvg width='13' height='11' viewBox='0 0 13 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.06383L4.96 5.78723M1 4.06383L7.18333 1.19342C7.44783 1.07064 7.75273 1.06942 8.0182 1.19009L12 3M1 4.06383V7.29287C1 7.66257 1.20398 8.00212 1.53039 8.17574L4.96 10M4.96 5.78723L12 3M4.96 5.78723V10M12 3V6.45563C12 6.86203 11.7541 7.22801 11.3778 7.38153L4.96 10' stroke='${encodeURIComponent( + editorPalette[theme].autocompleteColor + )}' stroke-width='1.3'/%3E%3C/svg%3E")`, + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + }, + }, + '& .cm-completionIcon-method': { + marginRight: `${spacing[50]}px`, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '16px', + height: '16px', + '&:after': { + content: '""', + display: 'block', + width: '13px', + height: '13px', + backgroundImage: `url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_914_100226)'%3E%3Cpath d='M1.5 4.13357L6.45 7.11111M1.5 4.13357L5.92043 1.33524C6.2443 1.13022 6.65686 1.12836 6.98256 1.33046L11.5 4.13357M1.5 4.13357V8.26879C1.5 8.60888 1.67284 8.92565 1.95883 9.1097L6.45 12M6.45 7.11111L11.5 4.13357M6.45 7.11111V12M11.5 4.13357V8.26289C11.5 8.6062 11.3239 8.92551 11.0335 9.10868L6.45 12' stroke='${encodeURIComponent( + editorPalette[theme].autocompleteColor + )}' stroke-width='1.3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_914_100226'%3E%3Crect width='13' height='13' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")`, + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + }, }, '& .cm-completionLabel': { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', + lineHeight: '110%', + verticalAlign: 'middle', }, '& .cm-completionDetail': { color: rgba(editorPalette[theme].autocompleteColor, 0.5),