enh: note word/char counter

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}