fix(character-count): use the NcActionTexts name prop

The default slot somehow is not reactive.

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/components/Menu/CharacterCount.vue

@@ -4,18 +4,15 @@
 -->
 
 <template>
-	<NcActionText data-text-action-entry="character-count">
+	<NcActionText data-text-action-entry="character-count" :name="countString">
 		<template #icon>
 			<AlphabeticalVariant />
 		</template>
-		<template #default>
-			{{ countString }}
-		</template>
 	</NcActionText>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { translatePlural as n } from '@nextcloud/l10n'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
 import { AlphabeticalVariant } from '../icons.js'
@@ -32,37 +29,29 @@ export default defineComponent({
 	},
 	setup() {
 		const { editor } = useEditor()
-		return { editor }
-	},
-	data: () => ({
-		wordCount: 0,
-		charCount: 0,
-	}),
-	computed: {
-		countString() {
-			return `${n('text', '%n word', '%n words', this.wordCount)}, ${n('text', '%n char', '%n chars', this.charCount)}`
-		},
+		const countString = ref('')
+		const refresh = () => {
+			if (!editor.value) {
+				return
+			}
+			const { storage, state } = editor.value
+			// characterCount is not reactive so we need this workaround
+			// We also need to provide the doc as storage is a singleton in tiptap v2.
+			// See ueberdosis/tiptap#6060
+			const wordCount = storage.characterCount.words({ node: state.doc })
+			const charCount = storage.characterCount.characters({ node: state.doc })
+			const words = n('text', '%n word', '%n words', wordCount)
+			const chars = n('text', '%n char', '%n chars', charCount)
+			countString.value = [words, chars].join(', ')
+			console.debug({ wordCount, charCount, countString: countString.value })
+		}
+		return { countString, editor, refresh }
 	},
 	watch: {
 		visible: 'refresh',
 	},
 	created() {
 		this.refresh()
 	},
-	methods: {
-		refresh() {
-			if (!this.editor) {
-				this.wordCount = 0
-				this.charCount = 0
-				return
-			}
-			const { storage, state } = this.editor
-			// characterCount is not reactive so we need this workaround
-			// We also need to provide the doc as storage is a singleton in tiptap v2.
-			// See ueberdosis/tiptap#6060
-			this.wordCount = storage.characterCount.words(state.doc)
-			this.charCount = storage.characterCount.characters(state.doc)
-		},
-	},
 })
 </script>