Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Editor: Show word count when text is selected in Editor #13530
This is an initial attempt at addressing #13488 and adding a word count when text is selected within the editor. Rather than adding an additional word count, which would get confusing, this replaces the existing word count for the entire post with the word count of the current selection when text is highlighted.
You'll notice I moved
This code currently only works in the Visual editor as it doesn't appear as though we load everything in the HTML editor.
Another option would be to mimic the same styling as
I prefer the latter approach.
(CircleCI is still failing. Since I modified
Design wise is
I'd add just:
Awesome work. These kind of details are very useful :)
Updated! Here's how it will look now:
I have mixed feelings on this. It does feel odd to see "1 word selected." On the flip side, it feels weird to me to show the selected text count only at 2+ since 2 is a kind of arbitrary. The count is only really useful when it's difficult to manually count the words which might be 3, 4, 5, etc. I think it's a cleaner approach to just set a basic rule of "If text is selected, we show the count" instead of trying to determine a guideline of when the selected text would be useful.
Added tests for the default behavior as well as the new selected text. They can be run using:
@mtias - if you have a moment this week, mind giving this another look?
CircleCI was failing due to this previous issue I believe. I've rebased.
Instead of replacing the existing word count with the selected text, this adds the selected text count in front of the word count when there is text selected in the editor.
This updates the styling of the selected text indicator to match the 'Saved' text similarly placed at the bottom of the Editor.
This updates the logic used on keyup in the editor to grab the selected text. We need to fire the getSelectedText function on any key up. This ensures that the correct word count is shown when the words are highlighted with a keyboard combination and also clears out the word count if necessary on key up. This shouldn't be an issue because we check whether or not state should be updated in getSelectedText.
This commit adds tests for the EditorWordCount component to test both the default and selected text behavior.
We're now importing TinyMce into the post editor component so we can use the getContent() function. As a result, the tests for the post editor were failing. This mocks the tinymce component in the editor so the tests pass.
@pento thanks for the review! I addressed the minor items mentioned above. For the