feat: Search highlighting for Collectives

src/components/Page.vue

@@ -100,6 +100,7 @@
 		</h1>
 		<LandingPageWidgets v-if="isLandingPage" />
 		<TextEditor :key="`text-editor-${currentPage.id}`" ref="texteditor" />
+		<SearchDialog />
 	</div>
 </template>
 
@@ -114,6 +115,7 @@ import LandingPageWidgets from './Page/LandingPageWidgets.vue'
 import PageActionMenu from './Page/PageActionMenu.vue'
 import PageTemplateIcon from './Icon/PageTemplateIcon.vue'
 import TextEditor from './Page/TextEditor.vue'
+import SearchDialog from './SearchDialog.vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import pageMixin from '../mixins/pageMixin.js'
 import { showError } from '@nextcloud/dialogs'
@@ -133,6 +135,7 @@ export default {
 		PageActionMenu,
 		PageTemplateIcon,
 		TextEditor,
+		SearchDialog,
 	},
 
 	mixins: [

src/components/PageList.vue

@@ -285,6 +285,7 @@ export default {
 		},
 		filterString() {
 			this.getContentFilteredPagesDebounced()
+			this.setSearchQuery(this.filterString)
 		},
 	},
 
@@ -293,6 +294,7 @@ export default {
 			'setPageOrder',
 			'show',
 			'toggleTemplates',
+			'setSearchQuery',
 		]),
 
 		...mapActions({

src/components/SearchDialog.vue

@@ -0,0 +1,170 @@
+<template>
+	<div v-if="totalMatches !== null" class="search-dialog__container">
+		<div class="search-dialog__buttons">
+			<NcButton alignment="center-reverse"
+				type="tertiary"
+				:aria-label="t('collectives', 'Clear search')"
+				@click="clearSearch">
+				<template #icon>
+					<Close :size="20" />
+				</template>
+				{{ t('collectives', 'Clear search') }}
+			</NcButton>
+
+			<NcButton alignment="center-reverse"
+				:aria-label="t('collectives', 'Find previous match')"
+				@click="previous">
+				<template #icon>
+					<ArrowUp :size="20" />
+				</template>
+				{{ t('collectives', 'Find previous') }}
+			</NcButton>
+
+			<NcButton alignment="center-reverse"
+				:aria-label="t('collectives', 'Find next match')"
+				@click="next">
+				<template #icon>
+					<ArrowDown :size="20" />
+				</template>
+				{{ t('collectives', 'Find next') }}
+			</NcButton>
+		</div>
+
+		<div class="search-dialog__info">
+			<span v-if="matchAll">
+				{{ t('collectives', 'Found {matches} matches for "{query}"', {
+					matches: totalMatches,
+					query: searchQuery,
+				}) }}
+			</span>
+
+			<span v-else>
+				{{ t('collectives', 'Match {index} of {matches} for "{query}"', {
+					index: matchIndex + 1,
+					matches: totalMatches,
+					query: searchQuery,
+				}) }}
+			</span>
+		</div>
+
+		<div class="search-dialog__highlight-all">
+			<NcCheckboxRadioSwitch :checked.sync="isHighlightAllChecked">
+				{{ t('collectives', 'Highlight all matches') }}
+			</NcCheckboxRadioSwitch>
+		</div>
+	</div>
+</template>
+
+<script>
+import { subscribe } from '@nextcloud/event-bus'
+import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
+import { mapGetters, mapMutations } from 'vuex'
+import ArrowDown from 'vue-material-design-icons/ArrowDown.vue'
+import ArrowUp from 'vue-material-design-icons/ArrowUp.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+
+export default {
+	name: 'SearchDialog',
+
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		ArrowDown,
+		ArrowUp,
+		Close,
+	},
+
+	data() {
+		return {
+			totalMatches: null,
+			matchIndex: 0,
+		}
+	},
+
+	computed: {
+		...mapGetters([
+			'searchQuery',
+			'matchAll',
+		]),
+
+		isHighlightAllChecked: {
+			get() {
+				return this.matchAll
+			},
+			set() {
+				this.toggleMatchAll()
+			},
+		},
+	},
+
+	created() {
+		subscribe('text:editor:search-results', ({ results, index }) => {
+			this.totalMatches = results
+			this.matchIndex = index
+		})
+	},
+
+	methods: {
+		t,
+		...mapMutations([
+			'setSearchQuery',
+			'toggleMatchAll',
+			'nextSearch',
+			'previousSearch',
+		]),
+
+		previous() {
+			this.previousSearch()
+			this.scrollIntoView()
+		},
+
+		next() {
+			this.nextSearch()
+			this.scrollIntoView()
+		},
+
+		clearSearch() {
+			this.setSearchQuery('')
+		},
+
+		scrollIntoView() {
+			document.querySelector('[data-text-el="search-decoration"]')?.scrollIntoView({ block: 'center' })
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+$button-gap: calc(var(--default-grid-baseline) * 3);
+
+.search-dialog__container {
+	width: 100%;
+	display: flex;
+	position: sticky;
+	align-items: center;
+	bottom: 0;
+	background-color: var(--color-main-background);
+}
+
+.search-dialog__info {
+	margin: 0 calc(var(--default-grid-baseline) * 6);
+	font-weight: bold;
+}
+
+.search-dialog__buttons {
+	display: flex;
+	align-items: center;
+	column-gap: $button-gap;
+}
+
+.search-dialog__highlight-all {
+	margin-left: auto;
+	margin-right: $button-gap;
+	margin-top: $button-gap;
+	margin-bottom: $button-gap;
+	display: flex;
+	align-items: center;
+	column-gap: $button-gap;
+}
+</style>

src/mixins/editorMixin.js

@@ -3,6 +3,7 @@ import { mapGetters, mapMutations } from 'vuex'
 import linkHandlerMixin from '../mixins/linkHandlerMixin.js'
 import PageInfoBar from '../components/Page/PageInfoBar.vue'
 import { editorApiReaderFileId } from '../constants.js'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	mixins: [
@@ -29,6 +30,7 @@ export default {
 			'pageFilePath',
 			'shareTokenParam',
 			'showing',
+			'searchQuery',
 		]),
 
 		pageContent() {
@@ -100,6 +102,10 @@ export default {
 						const element = document.querySelector(`[href="${document.location.hash}"]`)
 						element?.click()
 					}
+
+					if (this.searchQuery && this.searchQuery !== '') {
+						emit('text:editor:search', { query: this.searchQuery })
+					}
 				},
 			})
 

src/store/search.js

@@ -0,0 +1,36 @@
+import { emit } from '@nextcloud/event-bus'
+
+export default {
+	state: {
+		query: '',
+		matchAll: true,
+	},
+
+	getters: {
+		searchQuery(state) {
+			return state.query
+		},
+		matchAll(state) {
+			return state.matchAll
+		},
+	},
+
+	mutations: {
+		setSearchQuery(state, query) {
+			state.query = query
+			emit('text:editor:search', { query: state.query, matchAll: state.matchAll })
+		},
+		toggleMatchAll(state) {
+			state.matchAll = !state.matchAll
+			emit('text:editor:search', { query: state.query, matchAll: state.matchAll })
+		},
+		nextSearch(state) {
+			state.matchAll = false
+			emit('text:editor:search-next', {})
+		},
+		previousSearch(state) {
+			state.matchAll = false
+			emit('text:editor:search-previous', {})
+		},
+	},
+}

src/store/store.js

@@ -7,6 +7,7 @@ import pages from './pages.js'
 import sessions from './sessions.js'
 import settings from './settings.js'
 import versions from './versions.js'
+import search from './search.js'
 import { editorApiReaderFileId, pageModes } from '../constants.js'
 
 Vue.use(Vuex)
@@ -20,6 +21,7 @@ export default new Store({
 		sessions,
 		settings,
 		versions,
+		search,
 	},
 
 	state: {