diff --git a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-content.tsx b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-content.tsx index a2e1462d0..6d6f2e001 100644 --- a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-content.tsx +++ b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-content.tsx @@ -3,8 +3,8 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { CheatsheetEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension' -import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension' +import type { CheatsheetSingleEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension' +import { hasCheatsheetTopics } from '../../cheatsheet/cheatsheet-extension' import { CategoryAccordion } from './category-accordion' import { CheatsheetEntryPane } from './cheatsheet-entry-pane' import { CheatsheetSearch } from './cheatsheet-search' @@ -20,11 +20,11 @@ import { Trans } from 'react-i18next' export const CheatsheetContent: React.FC = () => { const [visibleExtensions, setVisibleExtensions] = useState([]) const [selectedExtension, setSelectedExtension] = useState() - const [selectedEntry, setSelectedEntry] = useState() + const [selectedEntry, setSelectedEntry] = useState() const changeExtension = useCallback((value: CheatsheetExtension) => { setSelectedExtension(value) - setSelectedEntry(isCheatsheetGroup(value) ? value.entries[0] : value) + setSelectedEntry(hasCheatsheetTopics(value) ? value.topics[0] : value) }, []) return ( @@ -46,7 +46,7 @@ export const CheatsheetContent: React.FC = () => { /> {selectedEntry !== undefined ? ( ) : ( diff --git a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx index c707c576e..b38282670 100644 --- a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx +++ b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx @@ -8,7 +8,7 @@ import { HtmlToReact } from '../../../common/html-to-react/html-to-react' import { RendererIframe } from '../../../common/renderer-iframe/renderer-iframe' import { ExtensionEventEmitterProvider } from '../../../markdown-renderer/hooks/use-extension-event-emitter' import { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message' -import type { CheatsheetEntry } from '../../cheatsheet/cheatsheet-extension' +import type { CheatsheetSingleEntry } from '../../cheatsheet/cheatsheet-extension' import { EditorToRendererCommunicatorContextProvider } from '../../render-context/editor-to-renderer-communicator-context-provider' import { ReadMoreLinkItem } from './read-more-link-item' import { useComponentsFromAppExtensions } from './use-components-from-app-extensions' @@ -19,7 +19,7 @@ import { Trans, useTranslation } from 'react-i18next' interface CheatsheetRendererProps { rootI18nKey?: string - extension: CheatsheetEntry + extension: CheatsheetSingleEntry } /** diff --git a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-search.tsx b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-search.tsx index b8b55c897..228ffad2c 100644 --- a/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-search.tsx +++ b/frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-search.tsx @@ -7,6 +7,7 @@ import { allAppExtensions } from '../../../../extensions/all-app-extensions' import type { SearchIndexEntry } from '../../../../hooks/common/use-document-search' import { useDocumentSearch } from '../../../../hooks/common/use-document-search' import { useOnInputChange } from '../../../../hooks/common/use-on-input-change' +import { useTranslatedText } from '../../../../hooks/common/use-translated-text' import { UiIcon } from '../../../common/icons/ui-icon' import type { CheatsheetSingleEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension' import { hasCheatsheetTopics } from '../../cheatsheet/cheatsheet-extension' @@ -47,8 +48,8 @@ export const CheatsheetSearch: React.FC = ({ setVisibleEx () => allAppExtensions.flatMap((extension) => extension.buildCheatsheetExtensions()), [] ) - const buildSearchIndexDocument = useCallback( - (entry: CheatsheetEntry, rootI18nKey: string | undefined = undefined): CheatsheetSearchIndexEntry => { + const buildSearchIndexEntry = useCallback( + (entry: CheatsheetSingleEntry, rootI18nKey: string | undefined = undefined): CheatsheetSearchIndexEntry => { const rootI18nKeyWithDot = rootI18nKey ? `${rootI18nKey}.` : '' return { id: rootI18nKey ? rootI18nKey : entry.i18nKey, @@ -59,15 +60,16 @@ export const CheatsheetSearch: React.FC = ({ setVisibleEx }, [t] ) + const placeholderText = useTranslatedText('cheatsheet.search') const cheatsheetSearchIndexEntries = useMemo( () => allCheatsheetExtensions.flatMap((entry) => { if (hasCheatsheetTopics(entry)) { return entry.topics.map((innerEntry) => buildSearchIndexEntry(innerEntry, entry.i18nKey)) } - return buildSearchIndexDocument(entry) + return buildSearchIndexEntry(entry) }), - [buildSearchIndexDocument, allCheatsheetExtensions] + [buildSearchIndexEntry, allCheatsheetExtensions] ) const searchResults = useDocumentSearch(cheatsheetSearchIndexEntries, searchOptions, searchTerm) useEffect(() => { @@ -81,21 +83,14 @@ export const CheatsheetSearch: React.FC = ({ setVisibleEx }) setVisibleExtensions(extensionResults) }, [allCheatsheetExtensions, searchResults, searchTerm, setVisibleExtensions]) - const onChange = useOnInputChange((search) => { - setSearchTerm(search) - }) + const onChange = useOnInputChange(setSearchTerm) const clearSearch = useCallback(() => { setSearchTerm('') }, [setSearchTerm]) return ( - + diff --git a/frontend/src/components/editor-page/app-bar/cheatsheet/topic-selection.tsx b/frontend/src/components/editor-page/app-bar/cheatsheet/topic-selection.tsx index cefd11c95..f54e66e3c 100644 --- a/frontend/src/components/editor-page/app-bar/cheatsheet/topic-selection.tsx +++ b/frontend/src/components/editor-page/app-bar/cheatsheet/topic-selection.tsx @@ -3,16 +3,16 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { CheatsheetEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension' -import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension' +import type { CheatsheetSingleEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension' +import { hasCheatsheetTopics } from '../../cheatsheet/cheatsheet-extension' import React, { useMemo } from 'react' import { Button, ButtonGroup, ListGroupItem } from 'react-bootstrap' import { Trans } from 'react-i18next' interface EntrySelectionProps { extension: CheatsheetExtension | undefined - selectedEntry: CheatsheetEntry | undefined - setSelectedEntry: (value: CheatsheetEntry) => void + selectedEntry: CheatsheetSingleEntry | undefined + setSelectedEntry: (value: CheatsheetSingleEntry) => void } /** @@ -25,10 +25,10 @@ interface EntrySelectionProps { */ export const TopicSelection: React.FC = ({ extension, selectedEntry, setSelectedEntry }) => { const listItems = useMemo(() => { - if (!isCheatsheetGroup(extension)) { + if (!hasCheatsheetTopics(extension)) { return null } - return extension.entries.map((entry) => ( + return extension.topics.map((entry) => (