From a6c30e09bbcdbd7382121aa83d34a7e81459d233 Mon Sep 17 00:00:00 2001
From: Dennis <dennissmink@gmail.com>
Date: Wed, 12 Jun 2024 15:53:50 +0200
Subject: [PATCH 1/9] =?UTF-8?q?Migrate=20from=20vue-countable=20&=20align?=
 =?UTF-8?q?=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  14 -
 package.json                                  |   1 -
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 372 +++++++++++-------
 3 files changed, 221 insertions(+), 166 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 37eb3452fa..f9b0ea0429 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,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",
@@ -4460,11 +4459,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/countable": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/countable/-/countable-3.0.1.tgz",
-      "integrity": "sha512-dz/sdi+RFpHJKMen5RAB9EKpCKd/q5WMfxG3SbdbQ3Pak4+SEPmDhVWZF0GTTHwjqjR+7DmiZHzZiFJ4qeAzmg=="
-    },
     "node_modules/crelt": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
@@ -9892,14 +9886,6 @@
         "vue": "^2.0.0"
       }
     },
-    "node_modules/vue-countable": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/vue-countable/-/vue-countable-1.0.9.tgz",
-      "integrity": "sha512-kQ/ElhotJ8K3ThY/z9vyRtNlYC5QYur8aOy1sMinKctzRAkuEQtRKJL/BkyG8U3dKJjjVz8alAICqIls0KmnzQ==",
-      "dependencies": {
-        "countable": "^3.0.1"
-      }
-    },
     "node_modules/vue-draggable-nested-tree": {
       "version": "2.3.0-beta.1",
       "resolved": "https://registry.npmjs.org/vue-draggable-nested-tree/-/vue-draggable-nested-tree-2.3.0-beta.1.tgz",
diff --git a/package.json b/package.json
index 4ced4a7271..6cc01ed460 100644
--- a/package.json
+++ b/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",
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index b9ea498ab0..8ff7da3c6f 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -1,120 +1,133 @@
 <template>
-<portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
-<element-container @resized="refresh">
-    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
-
-        <uploader
-            ref="uploader"
-            :enabled="assetsEnabled"
-            :container="container"
-            :path="folder"
-            @updated="uploadsUpdated"
-            @upload-complete="uploadComplete"
-        >
-            <div slot-scope="{ dragging }">
-                <div class="markdown-toolbar">
-                    <div class="markdown-modes">
-                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
-                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
-                    </div>
-                    <div class="markdown-buttons" v-if="! isReadOnly">
-                        <button
-                            v-for="button in buttons"
-                            v-tooltip="button.text"
-                            :aria-label="button.text"
-                            @click="button.command(editor)"
-                        >
-                            <svg-icon :name="button.svg" class="w-4 h-4" />
-                        </button>
-                        <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                            <svg-icon name="dark-mode" class="w-4 h-4" />
-                        </button>
-                        <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')" :aria-label="__('Toggle Fullscreen Mode')">
-                            <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode" />
-                            <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode" />
-                        </button>
-                    </div>
-                </div>
-
-                <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-12 w-12 mb-4" />
-                    {{ __('Drop File to Upload') }}
-                </div>
-
-                <uploads
-                    v-if="uploads.length"
-                    :uploads="uploads"
-                    class="-mt-px"
-                />
-
-                <div :class="`mode-wrap mode-${mode}`" @click="focus">
-                    <div class="markdown-writer"
-                        ref="writer"
-                        v-show="mode == 'write'"
-                        @dragover="draggingFile = true"
-                        @dragleave="draggingFile = false"
-                        @drop="draggingFile = false"
-                        @keydown="shortcut">
-
-                        <div class="editor" ref="codemirror"></div>
-
-                        <div class="helpers">
-                            <div class="flex w-full">
-                                <div class="markdown-cheatsheet-helper">
-                                    <button class="text-link flex items-center" @click="showCheatsheet = true" :aria-label="__('Show Markdown Cheatsheet')">
-                                        <svg-icon name="markdown-icon" class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2" />
-                                        <span>{{ __('Markdown Cheatsheet') }}</span>
-                                    </button>
-                                </div>
+    <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
+        <element-container @resized="refresh">
+            <div class="markdown-fieldtype-wrapper @container/markdown"
+                 :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+                <uploader
+                    ref="uploader"
+                    :enabled="assetsEnabled"
+                    :container="container"
+                    :path="folder"
+                    @updated="uploadsUpdated"
+                    @upload-complete="uploadComplete"
+                >
+                    <div slot-scope="{ dragging }">
+                        <div class="markdown-toolbar">
+                            <div class="markdown-modes">
+                                <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
+                                        v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
+                                <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
+                                        v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
                             </div>
-                            <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" /> {{ __('Words') }}</div>
-                                <div class="whitespace-nowrap"><span v-text="count.characters" /> {{ __('Characters') }}</div>
+                            <div class="markdown-buttons" v-if="! isReadOnly">
+                                <button
+                                    v-for="button in buttons"
+                                    v-tooltip="button.text"
+                                    :aria-label="button.text"
+                                    @click="button.command(editor)"
+                                >
+                                    <svg-icon :name="button.svg" class="w-4 h-4"/>
+                                </button>
+                                <button @click="toggleDarkMode"
+                                        v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
+                                        :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
+                                    <svg-icon name="dark-mode" class="w-4 h-4"/>
+                                </button>
+                                <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
+                                        :aria-label="__('Toggle Fullscreen Mode')">
+                                    <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
+                                    <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
+                                </button>
                             </div>
                         </div>
 
-                        <div class="drag-notification" v-if="assetsEnabled && draggingFile">
-                            <svg-icon name="upload" class="h-12 w-12 mb-4" />
+                        <div class="drag-notification" v-show="dragging">
+                            <svg-icon name="upload" class="h-12 w-12 mb-4"/>
                             {{ __('Drop File to Upload') }}
                         </div>
-                    </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
-                </div>
-            </div>
-        </uploader>
-
-        <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector" @closed="closeAssetSelector">
-            <selector
-                  :container="container"
-                  :folder="folder"
-                  :selected="selectedAssets"
-                  :restrict-container-navigation="restrictAssetNavigation"
-                  :restrict-folder-navigation="restrictAssetNavigation"
-                  @selected="assetsSelected"
-                  @closed="closeAssetSelector"
-            />
-        </stack>
-
-        <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
-            <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
-                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
-                <div class="max-w-md mx-auto my-8 prose">
-                    <h2 v-text="__('Markdown Cheatsheet')"></h2>
-                    <div v-html="__('markdown.cheatsheet')"></div>
-                </div>
-            </div>
-        </stack>
+                        <uploads
+                            v-if="uploads.length"
+                            :uploads="uploads"
+                            class="-mt-px"
+                        />
+
+                        <div :class="`mode-wrap mode-${mode}`" @click="focus">
+                            <div class="markdown-writer"
+                                 ref="writer"
+                                 v-show="mode == 'write'"
+                                 @dragover="draggingFile = true"
+                                 @dragleave="draggingFile = false"
+                                 @drop="draggingFile = false"
+                                 @keydown="shortcut">
+
+                                <div class="editor" ref="codemirror"></div>
+
+                                <div class="helpers">
+                                    <div class="flex w-full">
+                                        <div class="markdown-cheatsheet-helper">
+                                            <button class="text-link flex items-center" @click="showCheatsheet = true"
+                                                    :aria-label="__('Show Markdown Cheatsheet')">
+                                                <svg-icon name="markdown-icon"
+                                                          class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
+                                                <span>{{ __('Markdown Cheatsheet') }}</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
+                                        <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
+                                            {{ __('Words') }}
+                                        </div>
+                                        <div class="whitespace-nowrap"><span v-text="count.characters"/>
+                                            {{ __('Characters') }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="drag-notification" v-if="assetsEnabled && draggingFile">
+                                    <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                                    {{ __('Drop File to Upload') }}
+                                </div>
+                            </div>
 
-        <vue-countable :text="data" :elementId="'myId'" @change="change"></vue-countable>
+                            <div v-show="mode == 'preview'" v-html="markdownPreviewText"
+                                 class="markdown-preview prose-sm @md/markdown:prose-base"></div>
+                        </div>
+                    </div>
+                </uploader>
+
+                <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
+                       @closed="closeAssetSelector">
+                    <selector
+                        :container="container"
+                        :folder="folder"
+                        :selected="selectedAssets"
+                        :restrict-container-navigation="restrictAssetNavigation"
+                        :restrict-folder-navigation="restrictAssetNavigation"
+                        @selected="assetsSelected"
+                        @closed="closeAssetSelector"
+                    />
+                </stack>
+
+                <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+                    <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
+                        <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
+                                @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
+                        </button>
+                        <div class="max-w-md mx-auto my-8 prose">
+                            <h2 v-text="__('Markdown Cheatsheet')"></h2>
+                            <div v-html="__('markdown.cheatsheet')"></div>
+                        </div>
+                    </div>
+                </stack>
 
-    </div>
-</element-container>
-</portal>
+            </div>
+        </element-container>
+    </portal>
 </template>
 
 <script>
-import { marked } from 'marked';
+import {marked} from 'marked';
 import PlainTextRenderer from 'marked-plaintext';
 
 import CodeMirror from 'codemirror/lib/codemirror';
@@ -132,12 +145,10 @@ import 'codemirror/mode/php/php';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/addon/edit/continuelist';
 
-import { availableButtons } from './buttons';
+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'
 
@@ -149,10 +160,9 @@ export default {
         Selector,
         Uploader,
         Uploads,
-        VueCountable
     },
 
-    data: function() {
+    data: function () {
         return {
             data: this.value || '',
             buttons: [],
@@ -167,7 +177,10 @@ export default {
             darkMode: false,
             codemirror: null,
             uploads: [],
-            count: {},
+            count: {
+                characters: 0,
+                words: 0,
+            },
             escBinding: null,
             markdownPreviewText: null
         };
@@ -177,6 +190,7 @@ export default {
 
         data(data) {
             this.updateDebounced(data);
+            this.updateCount(data);
         },
 
         fullScreenMode: {
@@ -201,6 +215,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', () => {
@@ -232,10 +250,10 @@ export default {
         },
 
         toggleDarkMode() {
-            this.darkMode = ! this.darkMode;
+            this.darkMode = !this.darkMode;
         },
 
-        getText: function(selection) {
+        getText: function (selection) {
             var i = _.indexOf(this.selections, selection);
 
             return this.codemirror.getSelections()[i];
@@ -306,7 +324,7 @@ export default {
             var text = this.getText(selection);
             var blockLength = delimiter.length;
 
-            return text.substring(blockLength, text.length-blockLength);
+            return text.substring(blockLength, text.length - blockLength);
         },
 
         toggleLine(type) {
@@ -327,7 +345,7 @@ export default {
                 let text = this.codemirror.getLine(i);
                 text = this.isInside(type) ? text.replace(patterns[type], "$1") : map[type] + text;
 
-                this.codemirror.replaceRange(text, { line: i, ch: 0 }, { line: i, ch: Infinity });
+                this.codemirror.replaceRange(text, {line: i, ch: 0}, {line: i, ch: Infinity});
             }
 
             this.codemirror.focus();
@@ -338,7 +356,7 @@ export default {
             position = position || this.codemirror.getCursor("start");
             let state = this.codemirror.getTokenAt(position);
 
-            if(!state.type) return {};
+            if (!state.type) return {};
 
             let types = state.type.split(" ");
 
@@ -350,7 +368,7 @@ export default {
 
                 if (data === "strong") {
                     ret.bold = true;
-                } else if(data === "variable-2") {
+                } else if (data === "variable-2") {
                     text = this.codemirror.getLine(position.line);
                     if (/^\s*\d+\.\s/.test(text)) {
                         ret["ordered-list"] = true;
@@ -388,7 +406,7 @@ export default {
             let doc = this.codemirror.getDoc();
             let cursor = doc.getCursor();
             let line = doc.getLine(cursor.line);
-            let pos = { line: cursor.line };
+            let pos = {line: cursor.line};
             let table = "|     |     |\n| --- | --- |\n|     |     |";
 
             if (line.length === 0) {
@@ -402,7 +420,7 @@ export default {
             }
         },
 
-        insertImage: function(url, alt) {
+        insertImage: function (url, alt) {
             var cm = this.codemirror.doc
 
             var selection = '';
@@ -415,14 +433,14 @@ export default {
             var url = url || '';
 
             // Replace the string
-            var str = '![' + selection + ']('+ url +')';
+            var str = '![' + selection + '](' + url + ')';
 
             cm.replaceSelection(str, 'start');
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
+            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
 
             this.codemirror.focus();
         },
@@ -433,12 +451,12 @@ export default {
          * @param  String url  URL of the image
          * @param  String alt  Alt text
          */
-        appendImage: function(url, alt) {
+        appendImage: function (url, alt) {
             alt = alt || '';
-            this.data += '\n\n!['+alt+']('+url+')';
+            this.data += '\n\n![' + alt + '](' + url + ')';
         },
 
-        insertLink: function(url, text) {
+        insertLink: function (url, text) {
             var cm = this.codemirror.doc
 
             var selection = '';
@@ -448,42 +466,42 @@ export default {
                 selection = text;
             }
 
-            if (! url) {
+            if (!url) {
                 url = prompt(__('Enter URL'), 'https://');
-                if (! url) {
+                if (!url) {
                     return;
                 }
             }
 
             // Replace the string
-            var str = '[' + selection + ']('+ url +')';
+            var str = '[' + selection + '](' + url + ')';
             cm.replaceSelection(str, 'start');
 
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
+            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
 
             this.codemirror.focus();
         },
 
-        appendLink: function(url, text) {
+        appendLink: function (url, text) {
             text = text || '';
-            this.data += '\n\n['+text+']('+url+')';
+            this.data += '\n\n[' + text + '](' + url + ')';
         },
 
         /**
          * Open the asset selector
          */
-        addAsset: function() {
+        addAsset: function () {
             this.showAssetSelector = true;
         },
 
         /**
          * Execute a keyboard shortcut, when applicable
          */
-        shortcut: function(e) {
+        shortcut: function (e) {
             var key = e.keyCode;
             var mod = e.metaKey === true || e.ctrlKey === true;
 
@@ -543,14 +561,14 @@ export default {
             // We don't want to maintain the asset selections
             this.selectedAssets = [];
 
-            this.$axios.post(cp_url('assets-fieldtype'), { assets }).then(response => {
+            this.$axios.post(cp_url('assets-fieldtype'), {assets}).then(response => {
                 _(response.data).each((asset) => {
                     var alt = asset.values.alt || '';
-                    var url = encodeURI('statamic://'+asset.reference);
+                    var url = encodeURI('statamic://' + asset.reference);
                     if (asset.isImage) {
-                        this[method+'Image'](url, alt);
+                        this[method + 'Image'](url, alt);
                     } else {
-                        this[method+'Link'](url, alt);
+                        this[method + 'Link'](url, alt);
                     }
                 });
             });
@@ -582,12 +600,10 @@ export default {
             this.codemirror.focus();
         },
 
-        change(event) {
-            this.count = event;
-        },
-
         trackHeightUpdates() {
-            const update = () => { window.dispatchEvent(new Event('resize')) };
+            const update = () => {
+                window.dispatchEvent(new Event('resize'))
+            };
             const throttled = _.throttle(update, 100);
 
             this.$root.$on('livepreview.opened', throttled);
@@ -603,7 +619,7 @@ export default {
 
         updateMarkdownPreview() {
             this.$axios
-                .post(this.meta.previewUrl, { value: this.data, config: this.config })
+                .post(this.meta.previewUrl, {value: this.data, config: this.config})
                 .then(response => this.markdownPreviewText = response.data)
                 .catch(e => this.$toast.error(e.response ? e.response.data.message : __('Something went wrong')));
         },
@@ -643,7 +659,7 @@ export default {
             });
 
             // Update CodeMirror if we change the value independent of CodeMirror
-            this.$watch('value', function(val) {
+            this.$watch('value', function (val) {
                 if (val !== self.codemirror.doc.getValue()) {
                     self.codemirror.doc.setValue(val);
                 }
@@ -653,14 +669,14 @@ export default {
         },
 
         refresh() {
-            this.$nextTick(function() {
+            this.$nextTick(function () {
                 this.codemirror.refresh();
             })
         },
 
         initToolbarButtons() {
             let buttons = this.config.buttons.map(button => {
-                return _.findWhere(availableButtons(), { name: button.toLowerCase() }) || button;
+                return _.findWhere(availableButtons(), {name: button.toLowerCase()}) || button;
             });
 
             // Remove buttons that don't pass conditions.
@@ -670,16 +686,70 @@ export default {
             });
 
             this.buttons = buttons;
-        }
+        },
+
+        updateCount(data) {
+            let trimmed = data.trim();
+
+            this.count.characters = this.decode(trimmed.replace(/\s/g, '')).length;
+            this.count.words = trimmed.split(/\s+/).filter(word => word.length > 0).length;
+        },
+
+        /**
+         * `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.
+         */
+        decode(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
+        }
     },
 
     computed: {
-        assetsEnabled: function() {
+        assetsEnabled: function () {
             return Boolean(this.config && this.config.container);
         },
 
-        container: function() {
+        container: function () {
             return this.config.container;
         },
 
@@ -687,7 +757,7 @@ export default {
             return this;
         },
 
-        folder: function() {
+        folder: function () {
             return this.config.folder || '/';
         },
 
@@ -696,11 +766,11 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return marked(this.data || '', { renderer: new PlainTextRenderer })
+            return marked(this.data || '', {renderer: new PlainTextRenderer})
                 .replace(/<\/?[^>]+(>|$)/g, "");
-        }
+        },
     }
 
 };

From 0fab65002b8a507831c2b06a101e1bbf26eb55df Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:35:20 -0400
Subject: [PATCH 2/9] nitpick

---
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 302 +++++++++---------
 1 file changed, 150 insertions(+), 152 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 8ff7da3c6f..9ed29a696f 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -1,133 +1,133 @@
 <template>
-    <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
-        <element-container @resized="refresh">
-            <div class="markdown-fieldtype-wrapper @container/markdown"
-                 :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
-                <uploader
-                    ref="uploader"
-                    :enabled="assetsEnabled"
-                    :container="container"
-                    :path="folder"
-                    @updated="uploadsUpdated"
-                    @upload-complete="uploadComplete"
-                >
-                    <div slot-scope="{ dragging }">
-                        <div class="markdown-toolbar">
-                            <div class="markdown-modes">
-                                <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
-                                        v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
-                                <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
-                                        v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
-                            </div>
-                            <div class="markdown-buttons" v-if="! isReadOnly">
-                                <button
-                                    v-for="button in buttons"
-                                    v-tooltip="button.text"
-                                    :aria-label="button.text"
-                                    @click="button.command(editor)"
-                                >
-                                    <svg-icon :name="button.svg" class="w-4 h-4"/>
-                                </button>
-                                <button @click="toggleDarkMode"
-                                        v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
-                                        :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                                    <svg-icon name="dark-mode" class="w-4 h-4"/>
-                                </button>
-                                <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
-                                        :aria-label="__('Toggle Fullscreen Mode')">
-                                    <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
-                                    <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
-                                </button>
-                            </div>
+<portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
+    <element-container @resized="refresh">
+        <div class="markdown-fieldtype-wrapper @container/markdown"
+             :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+            <uploader
+                ref="uploader"
+                :enabled="assetsEnabled"
+                :container="container"
+                :path="folder"
+                @updated="uploadsUpdated"
+                @upload-complete="uploadComplete"
+            >
+                <div slot-scope="{ dragging }">
+                    <div class="markdown-toolbar">
+                        <div class="markdown-modes">
+                            <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
+                                    v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
+                            <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
+                                    v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
                         </div>
-
-                        <div class="drag-notification" v-show="dragging">
-                            <svg-icon name="upload" class="h-12 w-12 mb-4"/>
-                            {{ __('Drop File to Upload') }}
+                        <div class="markdown-buttons" v-if="! isReadOnly">
+                            <button
+                                v-for="button in buttons"
+                                v-tooltip="button.text"
+                                :aria-label="button.text"
+                                @click="button.command(editor)"
+                            >
+                                <svg-icon :name="button.svg" class="w-4 h-4"/>
+                            </button>
+                            <button @click="toggleDarkMode"
+                                    v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
+                                    :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
+                                <svg-icon name="dark-mode" class="w-4 h-4"/>
+                            </button>
+                            <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
+                                    :aria-label="__('Toggle Fullscreen Mode')">
+                                <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
+                                <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
+                            </button>
                         </div>
+                    </div>
 
-                        <uploads
-                            v-if="uploads.length"
-                            :uploads="uploads"
-                            class="-mt-px"
-                        />
-
-                        <div :class="`mode-wrap mode-${mode}`" @click="focus">
-                            <div class="markdown-writer"
-                                 ref="writer"
-                                 v-show="mode == 'write'"
-                                 @dragover="draggingFile = true"
-                                 @dragleave="draggingFile = false"
-                                 @drop="draggingFile = false"
-                                 @keydown="shortcut">
-
-                                <div class="editor" ref="codemirror"></div>
-
-                                <div class="helpers">
-                                    <div class="flex w-full">
-                                        <div class="markdown-cheatsheet-helper">
-                                            <button class="text-link flex items-center" @click="showCheatsheet = true"
-                                                    :aria-label="__('Show Markdown Cheatsheet')">
-                                                <svg-icon name="markdown-icon"
-                                                          class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
-                                                <span>{{ __('Markdown Cheatsheet') }}</span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                        <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
-                                            {{ __('Words') }}
-                                        </div>
-                                        <div class="whitespace-nowrap"><span v-text="count.characters"/>
-                                            {{ __('Characters') }}
-                                        </div>
+                    <div class="drag-notification" v-show="dragging">
+                        <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                        {{ __('Drop File to Upload') }}
+                    </div>
+
+                    <uploads
+                        v-if="uploads.length"
+                        :uploads="uploads"
+                        class="-mt-px"
+                    />
+
+                    <div :class="`mode-wrap mode-${mode}`" @click="focus">
+                        <div class="markdown-writer"
+                             ref="writer"
+                             v-show="mode == 'write'"
+                             @dragover="draggingFile = true"
+                             @dragleave="draggingFile = false"
+                             @drop="draggingFile = false"
+                             @keydown="shortcut">
+
+                            <div class="editor" ref="codemirror"></div>
+
+                            <div class="helpers">
+                                <div class="flex w-full">
+                                    <div class="markdown-cheatsheet-helper">
+                                        <button class="text-link flex items-center" @click="showCheatsheet = true"
+                                                :aria-label="__('Show Markdown Cheatsheet')">
+                                            <svg-icon name="markdown-icon"
+                                                      class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
+                                            <span>{{ __('Markdown Cheatsheet') }}</span>
+                                        </button>
                                     </div>
                                 </div>
-
-                                <div class="drag-notification" v-if="assetsEnabled && draggingFile">
-                                    <svg-icon name="upload" class="h-12 w-12 mb-4"/>
-                                    {{ __('Drop File to Upload') }}
+                                <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
+                                    <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
+                                        {{ __('Words') }}
+                                    </div>
+                                    <div class="whitespace-nowrap"><span v-text="count.characters"/>
+                                        {{ __('Characters') }}
+                                    </div>
                                 </div>
                             </div>
 
-                            <div v-show="mode == 'preview'" v-html="markdownPreviewText"
-                                 class="markdown-preview prose-sm @md/markdown:prose-base"></div>
+                            <div class="drag-notification" v-if="assetsEnabled && draggingFile">
+                                <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                                {{ __('Drop File to Upload') }}
+                            </div>
                         </div>
+
+                        <div v-show="mode == 'preview'" v-html="markdownPreviewText"
+                             class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                     </div>
-                </uploader>
-
-                <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
-                       @closed="closeAssetSelector">
-                    <selector
-                        :container="container"
-                        :folder="folder"
-                        :selected="selectedAssets"
-                        :restrict-container-navigation="restrictAssetNavigation"
-                        :restrict-folder-navigation="restrictAssetNavigation"
-                        @selected="assetsSelected"
-                        @closed="closeAssetSelector"
-                    />
-                </stack>
-
-                <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
-                    <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
-                        <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
-                                @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
-                        </button>
-                        <div class="max-w-md mx-auto my-8 prose">
-                            <h2 v-text="__('Markdown Cheatsheet')"></h2>
-                            <div v-html="__('markdown.cheatsheet')"></div>
-                        </div>
+                </div>
+            </uploader>
+
+            <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
+                   @closed="closeAssetSelector">
+                <selector
+                    :container="container"
+                    :folder="folder"
+                    :selected="selectedAssets"
+                    :restrict-container-navigation="restrictAssetNavigation"
+                    :restrict-folder-navigation="restrictAssetNavigation"
+                    @selected="assetsSelected"
+                    @closed="closeAssetSelector"
+                />
+            </stack>
+
+            <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+                <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
+                    <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
+                            @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
+                    </button>
+                    <div class="max-w-md mx-auto my-8 prose">
+                        <h2 v-text="__('Markdown Cheatsheet')"></h2>
+                        <div v-html="__('markdown.cheatsheet')"></div>
                     </div>
-                </stack>
+                </div>
+            </stack>
 
-            </div>
-        </element-container>
-    </portal>
+        </div>
+    </element-container>
+</portal>
 </template>
 
 <script>
-import {marked} from 'marked';
+import { marked } from 'marked';
 import PlainTextRenderer from 'marked-plaintext';
 
 import CodeMirror from 'codemirror/lib/codemirror';
@@ -145,7 +145,7 @@ import 'codemirror/mode/php/php';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/addon/edit/continuelist';
 
-import {availableButtons} from './buttons';
+import { availableButtons } from './buttons';
 import Selector from '../../assets/Selector.vue';
 import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
@@ -162,7 +162,7 @@ export default {
         Uploads,
     },
 
-    data: function () {
+    data: function() {
         return {
             data: this.value || '',
             buttons: [],
@@ -250,10 +250,10 @@ export default {
         },
 
         toggleDarkMode() {
-            this.darkMode = !this.darkMode;
+            this.darkMode = ! this.darkMode;
         },
 
-        getText: function (selection) {
+        getText: function(selection) {
             var i = _.indexOf(this.selections, selection);
 
             return this.codemirror.getSelections()[i];
@@ -324,7 +324,7 @@ export default {
             var text = this.getText(selection);
             var blockLength = delimiter.length;
 
-            return text.substring(blockLength, text.length - blockLength);
+            return text.substring(blockLength, text.length-blockLength);
         },
 
         toggleLine(type) {
@@ -345,7 +345,7 @@ export default {
                 let text = this.codemirror.getLine(i);
                 text = this.isInside(type) ? text.replace(patterns[type], "$1") : map[type] + text;
 
-                this.codemirror.replaceRange(text, {line: i, ch: 0}, {line: i, ch: Infinity});
+                this.codemirror.replaceRange(text, { line: i, ch: 0 }, { line: i, ch: Infinity });
             }
 
             this.codemirror.focus();
@@ -356,7 +356,7 @@ export default {
             position = position || this.codemirror.getCursor("start");
             let state = this.codemirror.getTokenAt(position);
 
-            if (!state.type) return {};
+            if(!state.type) return {};
 
             let types = state.type.split(" ");
 
@@ -368,7 +368,7 @@ export default {
 
                 if (data === "strong") {
                     ret.bold = true;
-                } else if (data === "variable-2") {
+                } else if(data === "variable-2") {
                     text = this.codemirror.getLine(position.line);
                     if (/^\s*\d+\.\s/.test(text)) {
                         ret["ordered-list"] = true;
@@ -406,7 +406,7 @@ export default {
             let doc = this.codemirror.getDoc();
             let cursor = doc.getCursor();
             let line = doc.getLine(cursor.line);
-            let pos = {line: cursor.line};
+            let pos = { line: cursor.line };
             let table = "|     |     |\n| --- | --- |\n|     |     |";
 
             if (line.length === 0) {
@@ -420,7 +420,7 @@ export default {
             }
         },
 
-        insertImage: function (url, alt) {
+        insertImage: function(url, alt) {
             var cm = this.codemirror.doc
 
             var selection = '';
@@ -433,14 +433,14 @@ export default {
             var url = url || '';
 
             // Replace the string
-            var str = '![' + selection + '](' + url + ')';
+            var str = '![' + selection + ']('+ url +')';
 
             cm.replaceSelection(str, 'start');
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
+            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
 
             this.codemirror.focus();
         },
@@ -456,7 +456,7 @@ export default {
             this.data += '\n\n![' + alt + '](' + url + ')';
         },
 
-        insertLink: function (url, text) {
+        insertLink: function(url, text) {
             var cm = this.codemirror.doc
 
             var selection = '';
@@ -466,42 +466,42 @@ export default {
                 selection = text;
             }
 
-            if (!url) {
+            if (! rl) {
                 url = prompt(__('Enter URL'), 'https://');
-                if (!url) {
+                if (! url) {
                     return;
                 }
             }
 
             // Replace the string
-            var str = '[' + selection + '](' + url + ')';
+            var str = '[' + selection + ']('+ url +')';
             cm.replaceSelection(str, 'start');
 
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
+            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
 
             this.codemirror.focus();
         },
 
-        appendLink: function (url, text) {
+        appendLink: function(url, text) {
             text = text || '';
-            this.data += '\n\n[' + text + '](' + url + ')';
+            this.data += '\n\n['+text+']('+url+')';
         },
 
         /**
          * Open the asset selector
          */
-        addAsset: function () {
+        addAsset: function() {
             this.showAssetSelector = true;
         },
 
         /**
          * Execute a keyboard shortcut, when applicable
          */
-        shortcut: function (e) {
+        shortcut: function(e) {
             var key = e.keyCode;
             var mod = e.metaKey === true || e.ctrlKey === true;
 
@@ -561,14 +561,14 @@ export default {
             // We don't want to maintain the asset selections
             this.selectedAssets = [];
 
-            this.$axios.post(cp_url('assets-fieldtype'), {assets}).then(response => {
+            this.$axios.post(cp_url('assets-fieldtype'), { assets }).then(response => {
                 _(response.data).each((asset) => {
                     var alt = asset.values.alt || '';
-                    var url = encodeURI('statamic://' + asset.reference);
+                    var url = encodeURI('statamic://'+asset.reference);
                     if (asset.isImage) {
-                        this[method + 'Image'](url, alt);
+                        this[method+'Image'](url, alt);
                     } else {
-                        this[method + 'Link'](url, alt);
+                        this[method+'Link'](url, alt);
                     }
                 });
             });
@@ -601,9 +601,7 @@ export default {
         },
 
         trackHeightUpdates() {
-            const update = () => {
-                window.dispatchEvent(new Event('resize'))
-            };
+            const update = () => { window.dispatchEvent(new Event('resize')) };
             const throttled = _.throttle(update, 100);
 
             this.$root.$on('livepreview.opened', throttled);
@@ -619,7 +617,7 @@ export default {
 
         updateMarkdownPreview() {
             this.$axios
-                .post(this.meta.previewUrl, {value: this.data, config: this.config})
+                .post(this.meta.previewUrl, { value: this.data, config: this.config })
                 .then(response => this.markdownPreviewText = response.data)
                 .catch(e => this.$toast.error(e.response ? e.response.data.message : __('Something went wrong')));
         },
@@ -659,7 +657,7 @@ export default {
             });
 
             // Update CodeMirror if we change the value independent of CodeMirror
-            this.$watch('value', function (val) {
+            this.$watch('value', function(val) {
                 if (val !== self.codemirror.doc.getValue()) {
                     self.codemirror.doc.setValue(val);
                 }
@@ -669,14 +667,14 @@ export default {
         },
 
         refresh() {
-            this.$nextTick(function () {
+            this.$nextTick(function() {
                 this.codemirror.refresh();
             })
         },
 
         initToolbarButtons() {
             let buttons = this.config.buttons.map(button => {
-                return _.findWhere(availableButtons(), {name: button.toLowerCase()}) || button;
+                return _.findWhere(availableButtons(), { name: button.toLowerCase() }) || button;
             });
 
             // Remove buttons that don't pass conditions.
@@ -745,11 +743,11 @@ export default {
     },
 
     computed: {
-        assetsEnabled: function () {
+        assetsEnabled: function() {
             return Boolean(this.config && this.config.container);
         },
 
-        container: function () {
+        container: function() {
             return this.config.container;
         },
 
@@ -757,7 +755,7 @@ export default {
             return this;
         },
 
-        folder: function () {
+        folder: function() {
             return this.config.folder || '/';
         },
 
@@ -766,11 +764,11 @@ export default {
         },
 
         replicatorPreview() {
-            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
-            return marked(this.data || '', {renderer: new PlainTextRenderer})
+            return marked(this.data || '', { renderer: new PlainTextRenderer })
                 .replace(/<\/?[^>]+(>|$)/g, "");
-        },
+        }
     }
 
 };

From 0258758594e1b0e4c79aef335e65cc33e9ea5a89 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:36:47 -0400
Subject: [PATCH 3/9] nitpick

---
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 222 +++++++++---------
 1 file changed, 111 insertions(+), 111 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 9ed29a696f..8e6ca96341 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -1,128 +1,128 @@
 <template>
 <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
-    <element-container @resized="refresh">
-        <div class="markdown-fieldtype-wrapper @container/markdown"
-             :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
-            <uploader
-                ref="uploader"
-                :enabled="assetsEnabled"
-                :container="container"
-                :path="folder"
-                @updated="uploadsUpdated"
-                @upload-complete="uploadComplete"
-            >
-                <div slot-scope="{ dragging }">
-                    <div class="markdown-toolbar">
-                        <div class="markdown-modes">
-                            <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
-                                    v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
-                            <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
-                                    v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
-                        </div>
-                        <div class="markdown-buttons" v-if="! isReadOnly">
-                            <button
-                                v-for="button in buttons"
-                                v-tooltip="button.text"
-                                :aria-label="button.text"
-                                @click="button.command(editor)"
-                            >
-                                <svg-icon :name="button.svg" class="w-4 h-4"/>
-                            </button>
-                            <button @click="toggleDarkMode"
-                                    v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
-                                    :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                                <svg-icon name="dark-mode" class="w-4 h-4"/>
-                            </button>
-                            <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
-                                    :aria-label="__('Toggle Fullscreen Mode')">
-                                <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
-                                <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
-                            </button>
-                        </div>
+<element-container @resized="refresh">
+    <div class="markdown-fieldtype-wrapper @container/markdown"
+         :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+        <uploader
+            ref="uploader"
+            :enabled="assetsEnabled"
+            :container="container"
+            :path="folder"
+            @updated="uploadsUpdated"
+            @upload-complete="uploadComplete"
+        >
+            <div slot-scope="{ dragging }">
+                <div class="markdown-toolbar">
+                    <div class="markdown-modes">
+                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
+                                v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
+                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
+                                v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
                     </div>
-
-                    <div class="drag-notification" v-show="dragging">
-                        <svg-icon name="upload" class="h-12 w-12 mb-4"/>
-                        {{ __('Drop File to Upload') }}
+                    <div class="markdown-buttons" v-if="! isReadOnly">
+                        <button
+                            v-for="button in buttons"
+                            v-tooltip="button.text"
+                            :aria-label="button.text"
+                            @click="button.command(editor)"
+                        >
+                            <svg-icon :name="button.svg" class="w-4 h-4"/>
+                        </button>
+                        <button @click="toggleDarkMode"
+                                v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
+                                :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
+                            <svg-icon name="dark-mode" class="w-4 h-4"/>
+                        </button>
+                        <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
+                                :aria-label="__('Toggle Fullscreen Mode')">
+                            <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
+                            <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
+                        </button>
                     </div>
+                </div>
 
-                    <uploads
-                        v-if="uploads.length"
-                        :uploads="uploads"
-                        class="-mt-px"
-                    />
-
-                    <div :class="`mode-wrap mode-${mode}`" @click="focus">
-                        <div class="markdown-writer"
-                             ref="writer"
-                             v-show="mode == 'write'"
-                             @dragover="draggingFile = true"
-                             @dragleave="draggingFile = false"
-                             @drop="draggingFile = false"
-                             @keydown="shortcut">
-
-                            <div class="editor" ref="codemirror"></div>
-
-                            <div class="helpers">
-                                <div class="flex w-full">
-                                    <div class="markdown-cheatsheet-helper">
-                                        <button class="text-link flex items-center" @click="showCheatsheet = true"
-                                                :aria-label="__('Show Markdown Cheatsheet')">
-                                            <svg-icon name="markdown-icon"
-                                                      class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
-                                            <span>{{ __('Markdown Cheatsheet') }}</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                    <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
-                                        {{ __('Words') }}
-                                    </div>
-                                    <div class="whitespace-nowrap"><span v-text="count.characters"/>
-                                        {{ __('Characters') }}
-                                    </div>
+                <div class="drag-notification" v-show="dragging">
+                    <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                    {{ __('Drop File to Upload') }}
+                </div>
+
+                <uploads
+                    v-if="uploads.length"
+                    :uploads="uploads"
+                    class="-mt-px"
+                />
+
+                <div :class="`mode-wrap mode-${mode}`" @click="focus">
+                    <div class="markdown-writer"
+                         ref="writer"
+                         v-show="mode == 'write'"
+                         @dragover="draggingFile = true"
+                         @dragleave="draggingFile = false"
+                         @drop="draggingFile = false"
+                         @keydown="shortcut">
+
+                        <div class="editor" ref="codemirror"></div>
+
+                        <div class="helpers">
+                            <div class="flex w-full">
+                                <div class="markdown-cheatsheet-helper">
+                                    <button class="text-link flex items-center" @click="showCheatsheet = true"
+                                            :aria-label="__('Show Markdown Cheatsheet')">
+                                        <svg-icon name="markdown-icon"
+                                                  class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
+                                        <span>{{ __('Markdown Cheatsheet') }}</span>
+                                    </button>
                                 </div>
                             </div>
-
-                            <div class="drag-notification" v-if="assetsEnabled && draggingFile">
-                                <svg-icon name="upload" class="h-12 w-12 mb-4"/>
-                                {{ __('Drop File to Upload') }}
+                            <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
+                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
+                                    {{ __('Words') }}
+                                </div>
+                                <div class="whitespace-nowrap"><span v-text="count.characters"/>
+                                    {{ __('Characters') }}
+                                </div>
                             </div>
                         </div>
 
-                        <div v-show="mode == 'preview'" v-html="markdownPreviewText"
-                             class="markdown-preview prose-sm @md/markdown:prose-base"></div>
+                        <div class="drag-notification" v-if="assetsEnabled && draggingFile">
+                            <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                            {{ __('Drop File to Upload') }}
+                        </div>
                     </div>
+
+                    <div v-show="mode == 'preview'" v-html="markdownPreviewText"
+                         class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                 </div>
-            </uploader>
-
-            <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
-                   @closed="closeAssetSelector">
-                <selector
-                    :container="container"
-                    :folder="folder"
-                    :selected="selectedAssets"
-                    :restrict-container-navigation="restrictAssetNavigation"
-                    :restrict-folder-navigation="restrictAssetNavigation"
-                    @selected="assetsSelected"
-                    @closed="closeAssetSelector"
-                />
-            </stack>
-
-            <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
-                <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
-                    <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
-                            @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
-                    </button>
-                    <div class="max-w-md mx-auto my-8 prose">
-                        <h2 v-text="__('Markdown Cheatsheet')"></h2>
-                        <div v-html="__('markdown.cheatsheet')"></div>
-                    </div>
+            </div>
+        </uploader>
+
+        <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
+               @closed="closeAssetSelector">
+            <selector
+                :container="container"
+                :folder="folder"
+                :selected="selectedAssets"
+                :restrict-container-navigation="restrictAssetNavigation"
+                :restrict-folder-navigation="restrictAssetNavigation"
+                @selected="assetsSelected"
+                @closed="closeAssetSelector"
+            />
+        </stack>
+
+        <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+            <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
+                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
+                        @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
+                </button>
+                <div class="max-w-md mx-auto my-8 prose">
+                    <h2 v-text="__('Markdown Cheatsheet')"></h2>
+                    <div v-html="__('markdown.cheatsheet')"></div>
                 </div>
-            </stack>
+            </div>
+        </stack>
 
-        </div>
-    </element-container>
+    </div>
+</element-container>
 </portal>
 </template>
 

From d8b44280cacb425684ac41c06ac7872f3d7d4c13 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:40:06 -0400
Subject: [PATCH 4/9] nitpick

---
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 78 ++++++++-----------
 1 file changed, 31 insertions(+), 47 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 8e6ca96341..31eaf783db 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -1,8 +1,7 @@
 <template>
 <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
 <element-container @resized="refresh">
-    <div class="markdown-fieldtype-wrapper @container/markdown"
-         :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
         <uploader
             ref="uploader"
             :enabled="assetsEnabled"
@@ -14,10 +13,8 @@
             <div slot-scope="{ dragging }">
                 <div class="markdown-toolbar">
                     <div class="markdown-modes">
-                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }"
-                                v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
-                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }"
-                                v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
+                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
+                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
                     </div>
                     <div class="markdown-buttons" v-if="! isReadOnly">
                         <button
@@ -26,23 +23,20 @@
                             :aria-label="button.text"
                             @click="button.command(editor)"
                         >
-                            <svg-icon :name="button.svg" class="w-4 h-4"/>
+                            <svg-icon :name="button.svg" class="w-4 h-4" />
                         </button>
-                        <button @click="toggleDarkMode"
-                                v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
-                                :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                            <svg-icon name="dark-mode" class="w-4 h-4"/>
+                        <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
+                            <svg-icon name="dark-mode" class="w-4 h-4" />
                         </button>
-                        <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')"
-                                :aria-label="__('Toggle Fullscreen Mode')">
-                            <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode"/>
-                            <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode"/>
+                        <button @click="toggleFullScreen" v-tooltip="__('Toggle Fullscreen')" :aria-label="__('Toggle Fullscreen Mode')">
+                            <svg-icon name="expand-bold" class="w-4 h-4" v-show="!fullScreenMode" />
+                            <svg-icon name="arrows-shrink" class="w-4 h-4" v-show="fullScreenMode" />
                         </button>
                     </div>
                 </div>
 
                 <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                    <svg-icon name="upload" class="h-12 w-12 mb-4" />
                     {{ __('Drop File to Upload') }}
                 </div>
 
@@ -54,66 +48,56 @@
 
                 <div :class="`mode-wrap mode-${mode}`" @click="focus">
                     <div class="markdown-writer"
-                         ref="writer"
-                         v-show="mode == 'write'"
-                         @dragover="draggingFile = true"
-                         @dragleave="draggingFile = false"
-                         @drop="draggingFile = false"
-                         @keydown="shortcut">
+                        ref="writer"
+                        v-show="mode == 'write'"
+                        @dragover="draggingFile = true"
+                        @dragleave="draggingFile = false"
+                        @drop="draggingFile = false"
+                        @keydown="shortcut">
 
                         <div class="editor" ref="codemirror"></div>
 
                         <div class="helpers">
                             <div class="flex w-full">
                                 <div class="markdown-cheatsheet-helper">
-                                    <button class="text-link flex items-center" @click="showCheatsheet = true"
-                                            :aria-label="__('Show Markdown Cheatsheet')">
-                                        <svg-icon name="markdown-icon"
-                                                  class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2"/>
+                                    <button class="text-link flex items-center" @click="showCheatsheet = true" :aria-label="__('Show Markdown Cheatsheet')">
+                                        <svg-icon name="markdown-icon" class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2" />
                                         <span>{{ __('Markdown Cheatsheet') }}</span>
                                     </button>
                                 </div>
                             </div>
                             <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words"/>
-                                    {{ __('Words') }}
-                                </div>
-                                <div class="whitespace-nowrap"><span v-text="count.characters"/>
-                                    {{ __('Characters') }}
-                                </div>
+                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" />{{ __('Words') }}</div>
+                                <div class="whitespace-nowrap"><span v-text="count.characters" />{{ __('Characters') }}</div>
                             </div>
                         </div>
 
                         <div class="drag-notification" v-if="assetsEnabled && draggingFile">
-                            <svg-icon name="upload" class="h-12 w-12 mb-4"/>
+                            <svg-icon name="upload" class="h-12 w-12 mb-4" />
                             {{ __('Drop File to Upload') }}
                         </div>
                     </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText"
-                         class="markdown-preview prose-sm @md/markdown:prose-base"></div>
+                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                 </div>
             </div>
         </uploader>
 
-        <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector"
-               @closed="closeAssetSelector">
+        <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector" @closed="closeAssetSelector">
             <selector
-                :container="container"
-                :folder="folder"
-                :selected="selectedAssets"
-                :restrict-container-navigation="restrictAssetNavigation"
-                :restrict-folder-navigation="restrictAssetNavigation"
-                @selected="assetsSelected"
-                @closed="closeAssetSelector"
+                  :container="container"
+                  :folder="folder"
+                  :selected="selectedAssets"
+                  :restrict-container-navigation="restrictAssetNavigation"
+                  :restrict-folder-navigation="restrictAssetNavigation"
+                  @selected="assetsSelected"
+                  @closed="closeAssetSelector"
             />
         </stack>
 
         <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
             <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
-                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8"
-                        @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;
-                </button>
+                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
                 <div class="max-w-md mx-auto my-8 prose">
                     <h2 v-text="__('Markdown Cheatsheet')"></h2>
                     <div v-html="__('markdown.cheatsheet')"></div>

From dc4a56913fedc85cd397a6a3c0c4b61d12173c16 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:41:16 -0400
Subject: [PATCH 5/9] nitpick

---
 .../components/fieldtypes/markdown/MarkdownFieldtype.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 31eaf783db..fb7950a4c4 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -2,6 +2,7 @@
 <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
 <element-container @resized="refresh">
     <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+
         <uploader
             ref="uploader"
             :enabled="assetsEnabled"
@@ -13,8 +14,8 @@
             <div slot-scope="{ dragging }">
                 <div class="markdown-toolbar">
                     <div class="markdown-modes">
-                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'"/>
-                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'"/>
+                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
+                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
                     </div>
                     <div class="markdown-buttons" v-if="! isReadOnly">
                         <button
@@ -67,8 +68,8 @@
                                 </div>
                             </div>
                             <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" />{{ __('Words') }}</div>
-                                <div class="whitespace-nowrap"><span v-text="count.characters" />{{ __('Characters') }}</div>
+                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" /> {{ __('Words') }}</div>
+                                <div class="whitespace-nowrap"><span v-text="count.characters" /> {{ __('Characters') }}</div>
                             </div>
                         </div>
 

From aeef16bc4675c370bae9426165b05b97a5b42610 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:42:40 -0400
Subject: [PATCH 6/9] nitpick

---
 .../fieldtypes/markdown/MarkdownFieldtype.vue          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index fb7950a4c4..ca7c57ebde 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -425,7 +425,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
+            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
 
             this.codemirror.focus();
         },
@@ -436,9 +436,9 @@ export default {
          * @param  String url  URL of the image
          * @param  String alt  Alt text
          */
-        appendImage: function (url, alt) {
+        appendImage: function(url, alt) {
             alt = alt || '';
-            this.data += '\n\n![' + alt + '](' + url + ')';
+            this.data += '\n\n!['+alt+']('+url+')';
         },
 
         insertLink: function(url, text) {
@@ -451,7 +451,7 @@ export default {
                 selection = text;
             }
 
-            if (! rl) {
+            if (! url) {
                 url = prompt(__('Enter URL'), 'https://');
                 if (! url) {
                     return;
@@ -466,7 +466,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
+            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
 
             this.codemirror.focus();
         },

From e400b3f83dc22e7eda3c1a7eab6ce9cc91a3d33c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:43:24 -0400
Subject: [PATCH 7/9] nitpick

---
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index ca7c57ebde..94fa0072f8 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -425,7 +425,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
+            cm.setSelection({line:line, ch:start}, {line:line, ch:end});
 
             this.codemirror.focus();
         },
@@ -466,7 +466,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({line: line, ch: start}, {line: line, ch: end});
+            cm.setSelection({line:line, ch:start}, {line:line, ch:end});
 
             this.codemirror.focus();
         },

From 53f053a75ae6948d48809e9b400064751f587fa8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 17 Jun 2024 09:43:55 -0400
Subject: [PATCH 8/9] nitpick

---
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 94fa0072f8..096aec9ab3 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -425,7 +425,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({line:line, ch:start}, {line:line, ch:end});
+            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
 
             this.codemirror.focus();
         },
@@ -466,7 +466,7 @@ export default {
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({line:line, ch:start}, {line:line, ch:end});
+            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
 
             this.codemirror.focus();
         },

From 2dc7afa52cb369736db8b36d6b5ba8fd3c372c5d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 19 Jun 2024 16:17:32 -0400
Subject: [PATCH 9/9] nitpick

---
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 90 +++++++++----------
 1 file changed, 41 insertions(+), 49 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 096aec9ab3..adf9f4ab75 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -137,6 +137,46 @@ import Uploads from '../../assets/Uploads.vue';
 // 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],
@@ -674,56 +714,8 @@ export default {
         updateCount(data) {
             let trimmed = data.trim();
 
-            this.count.characters = this.decode(trimmed.replace(/\s/g, '')).length;
+            this.count.characters = ucs2decode(trimmed.replace(/\s/g, '')).length;
             this.count.words = trimmed.split(/\s+/).filter(word => word.length > 0).length;
-        },
-
-        /**
-         * `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.
-         */
-        decode(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
         }
     },