diff --git a/package-lock.json b/package-lock.json index 9bf1d0d6ea..17eac6fdf9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 338dd54966..4252305879 100644 --- a/package.json +++ b/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", diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte index 91b532d0fb..92cac174c2 100644 --- a/src/lib/components/common/RichTextInput.svelte +++ b/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({ diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte index c53112eab1..0833b6a19a 100644 --- a/src/lib/components/notes/NoteEditor.svelte +++ b/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, You + + {#if editor} +
+
+ {$i18n.t('{{count}} words', { + count: editor.storage.characterCount.words() + })} +
+
+ {$i18n.t('{{count}} characters', { + count: editor.storage.characterCount.characters() + })} +
+
+ {/if} @@ -923,6 +939,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,