From e6ec506226a3b14334a9c8a5aacadccd588be05c Mon Sep 17 00:00:00 2001 From: pengx17 Date: Fri, 7 Jun 2024 04:39:19 +0000 Subject: [PATCH] fix: insert link action in quick search callback (#7165) --- .../src/modules/cmdk/views/data-hooks.tsx | 103 ++++++++++++------ .../src/modules/cmdk/views/filter-commands.ts | 18 ++- .../src/modules/cmdk/views/highlight.css.ts | 8 +- .../core/src/modules/cmdk/views/highlight.tsx | 30 ++--- .../core/src/modules/cmdk/views/main.tsx | 4 +- .../src/modules/cmdk/views/not-found.css.ts | 5 +- .../core/src/modules/cmdk/views/not-found.tsx | 4 +- .../core/src/modules/cmdk/views/types.ts | 2 + packages/frontend/i18n/src/resources/en.json | 7 +- packages/frontend/i18n/src/resources/fr.json | 2 +- packages/frontend/i18n/src/resources/ko.json | 4 +- packages/frontend/i18n/src/resources/ru.json | 4 +- 12 files changed, 126 insertions(+), 65 deletions(-) diff --git a/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx b/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx index 466f060cf..b617b46d8 100644 --- a/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx +++ b/packages/frontend/core/src/modules/cmdk/views/data-hooks.tsx @@ -16,9 +16,11 @@ import { CollectionService } from '@affine/core/modules/collection'; import { WorkspaceSubPath } from '@affine/core/shared'; import { mixpanel } from '@affine/core/utils'; import type { Collection } from '@affine/env/filter'; +import { Trans } from '@affine/i18n'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { EdgelessIcon, + LinkIcon, PageIcon, TodayIcon, ViewLayersIcon, @@ -36,6 +38,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { usePageHelper } from '../../../components/blocksuite/block-suite-page-list/utils'; import { useNavigateHelper } from '../../../hooks/use-navigate-helper'; import { filterSortAndGroupCommands } from './filter-commands'; +import * as hlStyles from './highlight.css'; import type { CMDKCommand, CommandContext } from './types'; export const cmdkValueAtom = atom(''); @@ -254,9 +257,17 @@ export const usePageCommands = () => { results.push({ id: 'affine:pages:create-page', - label: t['com.affine.cmdk.affine.create-new-page-as']({ - keyWord: query, - }), + label: ( + , + }} + /> + ), alwaysShow: true, category: 'affine:creation', run: async () => { @@ -273,9 +284,17 @@ export const usePageCommands = () => { results.push({ id: 'affine:pages:create-edgeless', - label: t['com.affine.cmdk.affine.create-new-edgeless-as']({ - keyWord: query, - }), + label: ( + , + }} + /> + ), alwaysShow: true, category: 'affine:creation', run: async () => { @@ -309,7 +328,6 @@ export const useSearchCallbackCommands = () => { const pageHelper = usePageHelper(workspace.docCollection); const pageMetaHelper = useDocMetaHelper(workspace.docCollection); const query = useLiveData(quickSearch.query$); - const t = useAFFiNEI18N(); const onSelectPage = useCallback( (searchResult: SearchCallbackResult) => { @@ -332,35 +350,52 @@ export const useSearchCallbackCommands = () => { results.every(command => command.originalValue !== query) && query.trim() ) { - results.push({ - id: 'affine:pages:create-page', - label: t['com.affine.cmdk.affine.create-new-doc-and-insert']({ - keyWord: query, - }), - alwaysShow: true, - category: 'affine:creation', - run: async () => { - const page = pageHelper.createPage('page', false); - page.load(); - pageMetaHelper.setDocTitle(page.id, query); - mixpanel.track('DocCreated', { - control: 'cmdk', - type: 'doc', - }); - onSelectPage({ docId: page.id }); - }, - icon: , - }); + if (query.startsWith('http://') || query.startsWith('https://')) { + results.push({ + id: 'affine:pages:create-page', + label: , + alwaysShow: true, + category: 'affine:creation', + run: async () => { + onSelectPage({ + query, + action: 'insert', + }); + }, + icon: , + }); + } else { + results.push({ + id: 'affine:pages:create-page', + label: ( + , + }} + /> + ), + alwaysShow: true, + category: 'affine:creation', + run: async () => { + const page = pageHelper.createPage('page', false); + page.load(); + pageMetaHelper.setDocTitle(page.id, query); + mixpanel.track('DocCreated', { + control: 'cmdk', + type: 'doc', + }); + onSelectPage({ docId: page.id }); + }, + icon: , + }); + } } return results; - }, [ - searchedDocsCommands, - query, - t, - pageHelper, - pageMetaHelper, - onSelectPage, - ]); + }, [searchedDocsCommands, query, pageHelper, pageMetaHelper, onSelectPage]); }; export const collectionToCommand = ( diff --git a/packages/frontend/core/src/modules/cmdk/views/filter-commands.ts b/packages/frontend/core/src/modules/cmdk/views/filter-commands.ts index 9bb20138e..e575ba921 100644 --- a/packages/frontend/core/src/modules/cmdk/views/filter-commands.ts +++ b/packages/frontend/core/src/modules/cmdk/views/filter-commands.ts @@ -74,12 +74,22 @@ export const getCommandScore = (command: CMDKCommand, search: string) => { if (search.trim() === '') { return 1; } + + const label = command.label; + const title = - (typeof command?.label === 'string' - ? command.label - : command?.label.title) || ''; + label && typeof label === 'object' && 'title' in label + ? label.title + : typeof label === 'string' + ? label + : ''; + const subTitle = - (typeof command?.label === 'string' ? '' : command?.label.subTitle) || ''; + label && typeof label === 'object' && 'title' in label + ? label.subTitle ?? '' + : typeof label === 'string' + ? label + : ''; const catWeight = getCategoryWeight(command.category); diff --git a/packages/frontend/core/src/modules/cmdk/views/highlight.css.ts b/packages/frontend/core/src/modules/cmdk/views/highlight.css.ts index 743bc0347..5d084367c 100644 --- a/packages/frontend/core/src/modules/cmdk/views/highlight.css.ts +++ b/packages/frontend/core/src/modules/cmdk/views/highlight.css.ts @@ -10,16 +10,22 @@ export const highlightText = style({ textOverflow: 'ellipsis', }); export const highlightKeyword = style({ + display: 'inline-block', + verticalAlign: 'bottom', color: cssVar('primaryColor'), whiteSpace: 'pre', - overflow: 'visible', + overflow: 'hidden', + textOverflow: 'ellipsis', flexShrink: 0, + maxWidth: '360px', }); export const labelTitle = style({ fontSize: cssVar('fontBase'), lineHeight: '24px', fontWeight: 400, textAlign: 'justify', + overflow: 'hidden', + textOverflow: 'ellipsis', }); export const labelContent = style({ fontSize: cssVar('fontXs'), diff --git a/packages/frontend/core/src/modules/cmdk/views/highlight.tsx b/packages/frontend/core/src/modules/cmdk/views/highlight.tsx index ab9cda848..4387f4406 100644 --- a/packages/frontend/core/src/modules/cmdk/views/highlight.tsx +++ b/packages/frontend/core/src/modules/cmdk/views/highlight.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react'; +import { memo, type ReactNode } from 'react'; import * as styles from './highlight.css'; import { useHighlight } from './use-highlight'; @@ -14,7 +14,7 @@ type HighlightProps = { }; type HighlightLabelProps = { - label: SearchResultLabel; + label: SearchResultLabel | ReactNode; highlight: string; }; @@ -44,16 +44,20 @@ export const HighlightLabel = memo(function HighlightLabel({ label, highlight, }: HighlightLabelProps) { - return ( -
-
- -
- {label.subTitle ? ( -
- + if (label && typeof label === 'object' && 'title' in label) { + return ( +
+
+
- ) : null} -
- ); + {label.subTitle ? ( +
+ +
+ ) : null} +
+ ); + } + + return
{label}
; }); diff --git a/packages/frontend/core/src/modules/cmdk/views/main.tsx b/packages/frontend/core/src/modules/cmdk/views/main.tsx index 0f8449f99..37d2cf43e 100644 --- a/packages/frontend/core/src/modules/cmdk/views/main.tsx +++ b/packages/frontend/core/src/modules/cmdk/views/main.tsx @@ -174,6 +174,8 @@ export const CMDKContainer = ({ const [opening, setOpening] = useState(open); const { syncing, progress } = useDocEngineStatus(); const showLoading = useDebouncedValue(syncing, 500); + const quickSearch = useService(QuickSearchService).quickSearch; + const mode = useLiveData(quickSearch.mode$); const inputRef = useRef(null); @@ -235,7 +237,7 @@ export const CMDKContainer = ({ {children} - + {mode === 'commands' ? : null} ); }; diff --git a/packages/frontend/core/src/modules/cmdk/views/not-found.css.ts b/packages/frontend/core/src/modules/cmdk/views/not-found.css.ts index c0ec9380d..07f48c12c 100644 --- a/packages/frontend/core/src/modules/cmdk/views/not-found.css.ts +++ b/packages/frontend/core/src/modules/cmdk/views/not-found.css.ts @@ -25,7 +25,10 @@ export const notFoundTitle = style({ color: cssVar('textSecondaryColor'), fontWeight: '600', lineHeight: '20px', - textAlign: 'justify', + whiteSpace: 'nowrap', + wordBreak: 'break-word', + textOverflow: 'ellipsis', + overflow: 'hidden', padding: '8px', }); export const notFoundText = style({ diff --git a/packages/frontend/core/src/modules/cmdk/views/not-found.tsx b/packages/frontend/core/src/modules/cmdk/views/not-found.tsx index 8169e0fda..c65ea16a3 100644 --- a/packages/frontend/core/src/modules/cmdk/views/not-found.tsx +++ b/packages/frontend/core/src/modules/cmdk/views/not-found.tsx @@ -9,10 +9,8 @@ import * as styles from './not-found.css'; export const NotFoundGroup = () => { const quickSearch = useService(QuickSearchService).quickSearch; const query = useLiveData(quickSearch.query$); - const mode = useLiveData(quickSearch.mode$); // hack: we know that the filtered count is 3 when there is no result (create page & edgeless & append to journal, for mode === 'cmdk') - const renderNoResult = - useCommandState(state => state.filtered.count === 3) && mode === 'commands'; + const renderNoResult = useCommandState(state => state.filtered.count === 3); const t = useAFFiNEI18N(); diff --git a/packages/frontend/core/src/modules/cmdk/views/types.ts b/packages/frontend/core/src/modules/cmdk/views/types.ts index dbf6af500..789f65766 100644 --- a/packages/frontend/core/src/modules/cmdk/views/types.ts +++ b/packages/frontend/core/src/modules/cmdk/views/types.ts @@ -1,5 +1,6 @@ import type { CommandCategory } from '@affine/core/commands'; import type { DocMode } from '@toeverything/infra'; +import type { ReactNode } from 'react'; export interface CommandContext { docMode: DocMode | undefined; @@ -11,6 +12,7 @@ export interface CommandContext { export interface CMDKCommand { id: string; label: + | ReactNode | string | { title: string; diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index f85306295..5c24a3ae8 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -553,9 +553,10 @@ "com.affine.cmdk.affine.color-mode.to": "Change Colour Mode to", "com.affine.cmdk.affine.color-scheme.to": "Change Colour Scheme to", "com.affine.cmdk.affine.contact-us": "Contact Us", - "com.affine.cmdk.affine.create-new-edgeless-as": "New \"{{keyWord}}\" Edgeless", - "com.affine.cmdk.affine.create-new-page-as": "New \"{{keyWord}}\" Page", - "com.affine.cmdk.affine.create-new-doc-and-insert": "Create \"{{keyWord}}\" Doc and insert", + "com.affine.cmdk.affine.create-new-edgeless-as": "New \"<1>{{keyWord}}\" Edgeless", + "com.affine.cmdk.affine.create-new-page-as": "New \"<1>{{keyWord}}\" Page", + "com.affine.cmdk.affine.create-new-doc-and-insert": "Create \"<1>{{keyWord}}\" Doc and insert", + "com.affine.cmdk.affine.insert-link": "Insert this link to the current doc", "com.affine.cmdk.affine.display-language.to": "Change Display Language to", "com.affine.cmdk.affine.editor.add-to-favourites": "Add to Favourites", "com.affine.cmdk.affine.editor.edgeless.presentation-start": "Start Presentation", diff --git a/packages/frontend/i18n/src/resources/fr.json b/packages/frontend/i18n/src/resources/fr.json index cb37e746b..884099aed 100644 --- a/packages/frontend/i18n/src/resources/fr.json +++ b/packages/frontend/i18n/src/resources/fr.json @@ -547,7 +547,7 @@ "com.affine.cmdk.affine.color-scheme.to": "Changer le thème de couleur pour", "com.affine.cmdk.affine.contact-us": "Nous contacter", "com.affine.cmdk.affine.create-new-edgeless-as": "Créer une nouvelle page sans bord sous :", - "com.affine.cmdk.affine.create-new-page-as": "Nouveau document \"{{keyWord}}\" ", + "com.affine.cmdk.affine.create-new-page-as": "Nouveau document \"<1>{{keyWord}}\" ", "com.affine.cmdk.affine.display-language.to": "Changer la langue d'affichage pour", "com.affine.cmdk.affine.editor.add-to-favourites": "Ajouter aux Favoris", "com.affine.cmdk.affine.editor.edgeless.presentation-start": "Commencer la Présentation", diff --git a/packages/frontend/i18n/src/resources/ko.json b/packages/frontend/i18n/src/resources/ko.json index 3ffe21046..b1988fc64 100644 --- a/packages/frontend/i18n/src/resources/ko.json +++ b/packages/frontend/i18n/src/resources/ko.json @@ -518,8 +518,8 @@ "com.affine.cmdk.affine.color-mode.to": "색상 모드를 다음과 같이 변경", "com.affine.cmdk.affine.color-scheme.to": "색 구성표를 다음과 같이 변경", "com.affine.cmdk.affine.contact-us": "Contact Us", - "com.affine.cmdk.affine.create-new-edgeless-as": "새 \"{{keyWord}}\" Edgeless", - "com.affine.cmdk.affine.create-new-page-as": "새 \"{{keyWord}}\" 페이지", + "com.affine.cmdk.affine.create-new-edgeless-as": "새 \"<1>{{keyWord}}\" Edgeless", + "com.affine.cmdk.affine.create-new-page-as": "새 \"<1>{{keyWord}}\" 페이지", "com.affine.cmdk.affine.display-language.to": "표시 언어를 다음과 같이 변경", "com.affine.cmdk.affine.editor.add-to-favourites": "즐겨찾기에 추가", "com.affine.cmdk.affine.editor.edgeless.presentation-start": "프리젠테이션 시작", diff --git a/packages/frontend/i18n/src/resources/ru.json b/packages/frontend/i18n/src/resources/ru.json index f535ac8fe..15e352d80 100644 --- a/packages/frontend/i18n/src/resources/ru.json +++ b/packages/frontend/i18n/src/resources/ru.json @@ -549,8 +549,8 @@ "com.affine.cmdk.affine.color-mode.to": "Изменить тему на", "com.affine.cmdk.affine.color-scheme.to": "Изменить цветовую схему на", "com.affine.cmdk.affine.contact-us": "Связаться с нами", - "com.affine.cmdk.affine.create-new-edgeless-as": "Новый Холст \"{{keyWord}}\"\n", - "com.affine.cmdk.affine.create-new-page-as": "Новый документ \"{{keyWord}}\"", + "com.affine.cmdk.affine.create-new-edgeless-as": "Новый Холст \"<1>{{keyWord}}\"\n", + "com.affine.cmdk.affine.create-new-page-as": "Новый документ \"<1>{{keyWord}}\"", "com.affine.cmdk.affine.display-language.to": "Изменить язык интерфейса на", "com.affine.cmdk.affine.editor.add-to-favourites": "Добавить в Избранное", "com.affine.cmdk.affine.editor.edgeless.presentation-start": "Начать презентацию",