feat: add word count

[SalahAdDin]

User description

It adds a word/character count to the editor.

---

PR Type

Enhancement, Documentation

---

Description

• Added a WordCountPlugin to display word/character counts.

• Implemented useCharacterLimit hook for character limit enforcement.

• Introduced CircleProgress component for visual progress representation.

• Updated documentation with installation and usage instructions.

---

Changes walkthrough 📝

	Relevant files
Enhancement	6 files useCharacterLimit.ts Introduced `useCharacterLimit` hook for character limit enforcement. +277/-0  index.css Added styles for `CircleProgress` component.                          +38/-0    index.css Added styles for `WordCountPlugin`.                                            +9/-0      index.tsx Created `CircleProgress` component for visual progress.    +46/-0    Editor.tsx Integrated `WordCountPlugin` and character limit in editor. +13/-4    index.tsx Added `WordCountPlugin` for word/character count display. +122/-0
Documentation	1 files README.md Updated installation and usage documentation.                        +35/-13

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance Concern The word count calculation uses a regex pattern that runs on every editor update. For large documents, this could cause performance issues. Consider debouncing the update or optimizing the word counting logic. const words = text.match(/\b\w+\b/g)?.length || 0; const chars = text.length; Hardcoded Limit The CHARACTER_LIMIT is hardcoded to 1500 characters. This should be configurable through props or settings to allow flexibility for different use cases. const CHARACTER_LIMIT = 1500; Error Handling The invariant check on line 47 will throw an error if OverflowNode is not registered, but there's no clear documentation or handling to guide users on how to register this node. invariant(false, 'useCharacterLimit: OverflowNode not registered on editor'); }

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	✅ Improve word counting accuracy Suggestion Impact: The commit implemented exactly the suggested change, replacing the regex-based word counting with a more inclusive approach using split and filter code diff: - const words = text.match(/\b\w+\b/g)?.length || 0; + const words = text.trim().split(/\s+/).filter(Boolean).length; The word counting regex /\b\w+\b/g only matches words containing alphanumeric characters and underscores, which may not accurately count words with hyphens, apostrophes, or in non-Latin scripts. Consider using a more inclusive regex pattern for better multilingual word counting. admin/src/lexical/plugins/WordCountPlugin/index.tsx [70-81] const updateCounts = () => { editor.getEditorState().read(() => { const root = $getRoot(); const text = root.getTextContent(); - const words = text.match(/\b\w+\b/g)?.length || 0; + // More inclusive word counting that handles hyphenated words and more languages + const words = text.trim().split(/\s+/).filter(Boolean).length; const chars = text.length; setWordCount(words); setCharCount(chars); }); }; [Suggestion has been applied] Suggestion importance[1-10]: 8 __ Why: The suggestion significantly improves the word counting functionality by replacing the limited regex pattern with a more inclusive approach that can handle hyphenated words and better support multilingual text. This is an important enhancement for an editor that might be used with various languages and writing styles.	Medium
Possible issue	✅ Fix update listener callback Suggestion Impact: The commit implemented exactly what was suggested - it changed the direct passing of updateCounts function to registerUpdateListener and instead wrapped it in a callback function that calls updateCounts() code diff: - const removeListener = editor.registerUpdateListener(updateCounts); + const removeListener = editor.registerUpdateListener(() => { + updateCounts(); + }); The current implementation passes the entire updateCounts function to registerUpdateListener without any parameters. The registerUpdateListener expects a callback that receives an update payload, but the current implementation ignores this parameter. This could lead to unexpected behavior when the editor updates. admin/src/lexical/plugins/WordCountPlugin/index.tsx [85] -const removeListener = editor.registerUpdateListener(updateCounts); +const removeListener = editor.registerUpdateListener(() => { + updateCounts(); +}); [Suggestion has been applied] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the updateCounts function is passed directly to registerUpdateListener without handling the update payload parameter. The improved implementation properly wraps the function call in a callback, which is the correct pattern for event listeners in React.	Medium
Update

[SalahAdDin]

I though @qodo would complain about this function:

strapi-plugin-lexical/admin/src/lexical/plugins/WordCountPlugin/index.tsx

Line 49 in 20013f6

const characterLimitProps = useMemo(

[axe312ger]

@SalahAdDin thank you, this looks great. very complicated as usual with lexical plugins, but looks good so far. Like the other, no time to test it directly, but will do so for our next release.

Can you please resolve the merge conflicts? Then i happily merge this!

[SalahAdDin]

Issues solved and translation literals updated.

[colonder]

@SalahAdDin any progress on this?

[SalahAdDin]

@SalahAdDin any progress on this?

This plugin is not being maintained anymore.