[5.x] Migrate from vue-countable

package.json

@@ -79,7 +79,6 @@
     "validator": "^13.7.0",
     "vue": "^2.7.14",
     "vue-clickaway": "~2.2.2",
-    "vue-countable": "^1.0.9",
     "vue-draggable-nested-tree": "^2.3.0-beta.1",
     "vue-js-modal": "^2.0.1",
     "vue-select": "^3.10.1",

resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue

@@ -106,8 +106,6 @@
             </div>
         </stack>
 
-        <vue-countable :text="data" :elementId="'myId'" @change="change"></vue-countable>
-
     </div>
 </element-container>
 </portal>
@@ -136,11 +134,49 @@ import { availableButtons } from './buttons';
 import Selector from '../../assets/Selector.vue';
 import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
-import VueCountable from 'vue-countable'
-
 // Keymaps
 import 'codemirror/keymap/sublime'
 
+/**
+ * `ucs2decode` function from the punycode.js library.
+ *
+ * Creates an array containing the decimal code points of each Unicode
+ * character in the string. While JavaScript uses UCS-2 internally, this
+ * function will convert a pair of surrogate halves (each of which UCS-2
+ * exposes as separate characters) into a single code point, matching
+ * UTF-16.
+ *
+ * @see     <http://goo.gl/8M09r>
+ * @see     <http://goo.gl/u4UUC>
+ *
+ * @param   {String}  string   The Unicode input string (UCS-2).
+ *
+ * @return  {Array}   The new array of code points.
+ */
+function ucs2decode(string) {
+    const output = [];
+    let counter = 0;
+    const length = string.length;
+    while (counter < length) {
+        const value = string.charCodeAt(counter++);
+        if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
+            // It's a high surrogate, and there is a next character.
+            const extra = string.charCodeAt(counter++);
+            if ((extra & 0xFC00) == 0xDC00) { // Low surrogate.
+                output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
+            } else {
+                // It's an unmatched surrogate; only append this code unit, in case the
+                // next code unit is the high surrogate of a surrogate pair.
+                output.push(value);
+                counter--;
+            }
+        } else {
+            output.push(value);
+        }
+    }
+    return output;
+}
+
 export default {
 
     mixins: [Fieldtype],
@@ -149,7 +185,6 @@ export default {
         Selector,
         Uploader,
         Uploads,
-        VueCountable
     },
 
     data: function() {
@@ -167,7 +202,10 @@ export default {
             darkMode: false,
             codemirror: null,
             uploads: [],
-            count: {},
+            count: {
+                characters: 0,
+                words: 0,
+            },
             escBinding: null,
             markdownPreviewText: null
         };
@@ -177,6 +215,7 @@ export default {
 
         data(data) {
             this.updateDebounced(data);
+            this.updateCount(data);
         },
 
         fullScreenMode: {
@@ -201,6 +240,10 @@ export default {
     mounted() {
         this.initToolbarButtons();
 
+        if (this.data) {
+            this.updateCount(this.data);
+        }
+
         let el = document.querySelector(`label[for="${this.fieldId}"]`);
         if (el) {
             el.addEventListener('click', () => {
@@ -582,10 +625,6 @@ export default {
             this.codemirror.focus();
         },
 
-        change(event) {
-            this.count = event;
-        },
-
         trackHeightUpdates() {
             const update = () => { window.dispatchEvent(new Event('resize')) };
             const throttled = _.throttle(update, 100);
@@ -670,8 +709,14 @@ export default {
             });
 
             this.buttons = buttons;
-        }
+        },
+
+        updateCount(data) {
+            let trimmed = data.trim();
 
+            this.count.characters = ucs2decode(trimmed.replace(/\s/g, '')).length;
+            this.count.words = trimmed.split(/\s+/).filter(word => word.length > 0).length;
+        }
     },
 
     computed: {