Feature: Show word count in RichText

cypress/e2e/MenuBar.spec.js

@@ -0,0 +1,64 @@
+import { initUserAndFiles, randHash } from '../utils/index.js'
+
+const randUser = randHash()
+const fileName = 'test.md'
+
+describe('Test the rich text editor menu bar', function() {
+	before(() => initUserAndFiles(randUser, fileName))
+
+	beforeEach(function() {
+		cy.login(randUser, 'password', {
+			onBeforeLoad(win) {
+				cy.stub(win, 'open')
+					.as('winOpen')
+
+			},
+		})
+
+		cy.openFile(fileName)
+	})
+
+	describe('word count', function() {
+		/**
+		 *
+		 */
+		function getWordCount() {
+			return cy.get('.popover .open').get('[data-text-action-entry="word-count"]')
+		}
+
+		beforeEach(cy.clearContent)
+		it('empty file', () => {
+			cy.getFile(fileName)
+				.then($el => {
+					cy.getActionEntry('remain')
+						.click()
+					getWordCount()
+						.should('include.text', '0 words')
+				})
+		})
+
+		it('single word', () => {
+			cy.getFile(fileName)
+				.then($el => {
+					cy.getContent()
+						.type('  Hello  ')
+					cy.getActionEntry('remain')
+						.click()
+					getWordCount()
+						.should('include.text', '1 word')
+				})
+		})
+
+		it('multiple words', () => {
+			cy.getFile(fileName)
+				.then($el => {
+					cy.getContent()
+						.type('Hello \nworld')
+					cy.getActionEntry('remain')
+						.click()
+					getWordCount()
+						.should('include.text', '2 word')
+				})
+		})
+	})
+})

package.json

@@ -48,6 +48,7 @@
 		"@tiptap/extension-blockquote": "^2.0.0-beta.29",
 		"@tiptap/extension-bold": "^2.0.0-beta.28",
 		"@tiptap/extension-bullet-list": "^2.0.0-beta.29",
+		"@tiptap/extension-character-count": "^2.0.0-beta.30",
 		"@tiptap/extension-code": "^2.0.0-beta.28",
 		"@tiptap/extension-code-block": "^2.0.0-beta.41",
 		"@tiptap/extension-code-block-lowlight": "^2.0.0-beta.72",

src/components/Menu/ActionList.vue

@@ -24,9 +24,11 @@
 	<Actions v-tooltip="tooltip"
 		class="entry-list-action entry-action"
 		v-bind="state"
+		:force-menu="true"
 		:title="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
-		:data-text-action-active="activeKey">
+		:data-text-action-active="activeKey"
+		@update:open="(o) => $emit('update:open', o)">
 		<template #icon>
 			<component :is="icon" :key="iconKey" />
 		</template>
@@ -35,6 +37,7 @@
 			is-item
 			:action-entry="child"
 			@trigged="onTrigger" />
+		<slot name="lastAction" />
 	</Actions>
 </template>
 

src/components/Menu/MenuBar.vue

@@ -37,6 +37,15 @@
 				v-bind="{ actionEntry }"
 				:key="`text-action--${actionEntry.key}`"
 				@call:help="showHelp" />
+			<ActionList key="text-action--remain"
+				:action-entry="hiddenEntries"
+				@update:open="refreshWordCount"
+				@call:help="showHelp">
+				<template #lastAction>
+					<ActionCaption :title="wordCountString"
+						data-text-action-entry="word-count" />
+				</template>
+			</ActionList>
 		</div>
 		<div class="text-menubar__slot">
 			<slot />
@@ -45,12 +54,16 @@
 </template>
 
 <script>
+import ActionCaption from '@nextcloud/vue/dist/Components/ActionCaption'
+
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { translatePlural as n } from '@nextcloud/l10n'
 import debounce from 'debounce'
 
 import HelpModal from '../HelpModal.vue'
 import actionsFullEntries from './entries.js'
 import ActionEntry from './ActionEntry.js'
+import ActionList from './ActionList.vue'
 import { DotsHorizontal } from '../icons.js'
 import {
 	useEditorMixin,
@@ -60,7 +73,7 @@ import {
 
 export default {
 	name: 'MenuBar',
-	components: { ActionEntry, HelpModal },
+	components: { ActionEntry, ActionList, ActionCaption, HelpModal },
 	mixins: [
 		useEditorMixin,
 		useIsRichEditorMixin,
@@ -79,6 +92,7 @@ export default {
 			isReady: false,
 			isVisible: this.$editor.isFocused,
 			windowWidth: 0,
+			wordCount: 0,
 		}
 	},
 	computed: {
@@ -102,40 +116,27 @@ export default {
 			return slots - 1
 		},
 		visibleEntries() {
-			const { hiddenEntries, remainAction } = this
 			const list = [...actionsFullEntries].filter(({ priority }) => {
 				// if entry do not have priority, we assume it aways will be visible
 				return priority === undefined || priority <= this.iconsLimit
 			})
 
-			if (hiddenEntries.length === 0) {
-				return list
-			}
-
-			if (hiddenEntries.length === 1) {
-				// put only one entry
-				list.push(hiddenEntries[0])
-			} else {
-				// add all hidden entries as list of actions
-				list.push(remainAction)
-			}
-
 			return list
 		},
 		hiddenEntries() {
-			return [...actionsFullEntries].filter(({ priority }) => {
-				// reverse logic from visibleEntries
-				return priority !== undefined && priority > this.iconsLimit
-			})
-		},
-		remainAction() {
 			return {
 				key: 'remain',
 				label: this.t('text', 'Remaining Actions'),
 				icon: DotsHorizontal,
-				children: this.hiddenEntries,
+				children: [...actionsFullEntries].filter(({ priority }) => {
+					// reverse logic from visibleEntries
+					return priority !== undefined && priority > this.iconsLimit
+				}),
 			}
 		},
+		wordCountString() {
+			return n('text', '%n word', '%n words', this.wordCount)
+		},
 	},
 	mounted() {
 		window.addEventListener('resize', this.getWindowWidth)
@@ -205,6 +206,13 @@ export default {
 		hideHelp() {
 			this.displayHelp = false
 		},
+
+		refreshWordCount(open) {
+			// characterCount is not reactive so we need this workaround
+			if (open) {
+				this.wordCount = this.$editor.storage.characterCount.words()
+			}
+		},
 	},
 }
 </script>