enh: note word/char counter

package-lock.json

@@ -20,6 +20,7 @@
 				"@sveltejs/svelte-virtual-list": "^3.0.1",
 				"@tiptap/core": "^2.11.9",
 				"@tiptap/extension-bubble-menu": "^2.25.0",
+				"@tiptap/extension-character-count": "^2.25.0",
 				"@tiptap/extension-code-block-lowlight": "^2.11.9",
 				"@tiptap/extension-floating-menu": "^2.25.0",
 				"@tiptap/extension-highlight": "^2.10.0",
@@ -2986,6 +2987,20 @@
 				"@tiptap/core": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-character-count": {
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-2.25.0.tgz",
+			"integrity": "sha512-F+4DxJFptbX3oioqNwS38zOTi6gH9CumV/ISeOIvr4ao7Iija3tNonGDsHhxD05njjbYNIp1OKsxtnzbWukgMA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
 		"node_modules/@tiptap/extension-code": {
 			"version": "2.10.0",
 			"resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.10.0.tgz",

package.json

@@ -64,6 +64,7 @@
 		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@tiptap/core": "^2.11.9",
 		"@tiptap/extension-bubble-menu": "^2.25.0",
+		"@tiptap/extension-character-count": "^2.25.0",
 		"@tiptap/extension-code-block-lowlight": "^2.11.9",
 		"@tiptap/extension-floating-menu": "^2.25.0",
 		"@tiptap/extension-highlight": "^2.10.0",

src/lib/components/common/RichTextInput.svelte

@@ -70,6 +70,8 @@
 	import TaskItem from '@tiptap/extension-task-item';
 	import TaskList from '@tiptap/extension-task-list';
 
+	import CharacterCount from '@tiptap/extension-character-count';
+
 	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 	import Placeholder from '@tiptap/extension-placeholder';
 	import StarterKit from '@tiptap/starter-kit';
@@ -92,6 +94,8 @@
 	// create a lowlight instance with all languages loaded
 	const lowlight = createLowlight(all);
 
+	export let editor = null;
+
 	export let className = 'input-prose';
 	export let placeholder = 'Type here...';
 
@@ -116,7 +120,6 @@
 	let floatingMenuElement = null;
 	let bubbleMenuElement = null;
 	let element;
-	let editor;
 
 	const options = {
 		throwOnError: false
@@ -496,6 +499,7 @@
 				TaskItem.configure({
 					nested: true
 				}),
+				CharacterCount,
 				...(autocomplete
 					? [
 							AIAutocompletion.configure({

src/lib/components/notes/NoteEditor.svelte

@@ -82,6 +82,7 @@
 
 	export let id: null | string = null;
 
+	let editor = null;
 	let note = null;
 
 	const newNote = {
@@ -872,6 +873,21 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 
 								<span> You </span>
 							</button>
+
+							{#if editor}
+								<div class="flex items-center gap-1 px-1">
+									<div>
+										{$i18n.t('{{count}} words', {
+											count: editor.storage.characterCount.words()
+										})}
+									</div>
+									<div>
+										{$i18n.t('{{count}} characters', {
+											count: editor.storage.characterCount.characters()
+										})}
+									</div>
+								</div>
+							{/if}
 						</div>
 					</div>
 
@@ -923,6 +939,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 
 						<RichTextInput
 							bind:this={inputElement}
+							bind:editor
 							className="input-prose-sm px-0.5"
 							bind:value={note.data.content.json}
 							html={note.data?.content?.html}