feat: add some improvements to CharacterCount extension (#2256), fix #1049, fix #1550, fix #1839, fix #2245

* fix a bug when exceeding the character limit

* find a better way to limit the doc size

* check paste events

* add storage method

* refactoring

* use textBetween instead of textContent

* return early if no limit is set

* add words method to storage

* show word count in charactercount demo

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>

demos/src/Examples/Community/React/index.jsx

@@ -34,14 +34,14 @@ export default () => {
   })
 
   const percentage = editor
-    ? Math.round((100 / limit) * editor.getCharacterCount())
+    ? Math.round((100 / limit) * editor.storage.characterCount.characters())
     : 0
 
   return (
     <div>
       <EditorContent editor={editor} />
       {editor
-        && <div className={`character-count ${editor.getCharacterCount() === limit ? 'character-count--warning' : ''}`}>
+        && <div className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}>
           <svg
             height="20"
             width="20"
@@ -73,7 +73,7 @@ export default () => {
           </svg>
 
           <div className="character-count__text">
-            {editor.getCharacterCount()}/{limit} characters
+            {editor.storage.characterCount.characters()}/{limit} characters
           </div>
         </div>
       }

demos/src/Examples/Community/Vue/index.vue

@@ -2,7 +2,7 @@
   <div>
     <editor-content :editor="editor" />
 
-    <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.getCharacterCount() === limit}">
+    <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
       <svg
         height="20"
         width="20"
@@ -34,7 +34,7 @@
       </svg>
 
       <div class="character-count__text">
-        {{ editor.getCharacterCount() }}/{{ limit }} characters
+        {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
       </div>
     </div>
   </div>
@@ -87,7 +87,7 @@ export default {
 
   computed: {
     percentage() {
-      return Math.round((100 / this.limit) * this.editor.getCharacterCount())
+      return Math.round((100 / this.limit) * this.editor.storage.characterCount.characters())
     },
   },
 

demos/src/Extensions/CharacterCount/React/index.jsx

@@ -34,7 +34,9 @@ export default () => {
       <EditorContent editor={editor} />
 
       <div className="character-count">
-        {editor.getCharacterCount()}/{limit} characters
+        {editor.storage.characterCount.characters()}/{limit} characters
+        <br />
+        {editor.storage.characterCount.words()} words
       </div>
     </div>
   )

demos/src/Extensions/CharacterCount/Vue/index.vue

@@ -3,7 +3,9 @@
     <editor-content :editor="editor" />
 
     <div class="character-count" v-if="editor">
-      {{ editor.getCharacterCount() }}/{{ limit }} characters
+      {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
+      <br>
+      {{ editor.storage.characterCount.words() }} words
     </div>
   </div>
 </template>