JS Build: Split markdown to own file, updated packages

Markdown-related code was growing, representing half of app.js main
bundle code while only being needed in one view/scenario.
This extracts markdown related code to its own built file.
Related to #4858

dev/build/esbuild.js

@@ -13,6 +13,7 @@ const entryPoints = {
     app: path.join(__dirname, '../../resources/js/app.js'),
     code: path.join(__dirname, '../../resources/js/code/index.mjs'),
     'legacy-modes': path.join(__dirname, '../../resources/js/code/legacy-modes.mjs'),
+    markdown: path.join(__dirname, '../../resources/js/markdown/index.mjs'),
 };
 
 // Locate our output directory

package.json

@@ -25,7 +25,6 @@
     "eslint-plugin-import": "^2.29.0",
     "livereload": "^0.9.3",
     "npm-run-all": "^4.1.5",
-    "punycode": "^2.3.1",
     "sass": "^1.69.5"
   },
   "dependencies": {
@@ -47,7 +46,7 @@
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "codemirror": "^6.0.1",
     "idb-keyval": "^6.2.1",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.1.0",
     "markdown-it-task-lists": "^2.1.1",
     "snabbdom": "^3.5.1",
     "sortablejs": "^1.15.1"

resources/js/components/markdown-editor.js

@@ -1,5 +1,4 @@
 import {Component} from './component';
-import {init as initEditor} from '../markdown/editor';
 
 export class MarkdownEditor extends Component {
 
@@ -20,7 +19,8 @@ export class MarkdownEditor extends Component {
         const settingInputs = settingContainer.querySelectorAll('input[type="checkbox"]');
 
         this.editor = null;
-        initEditor({
+        window.importVersioned('markdown').then(markdown => {
+            return markdown.init({
                 pageId: this.pageId,
                 container: this.elem,
                 displayEl: this.display,
@@ -31,6 +31,7 @@ export class MarkdownEditor extends Component {
                     serverUploadLimit: this.serverUploadLimitText,
                     imageUploadError: this.imageUploadErrorText,
                 },
+            });
         }).then(editor => {
             this.editor = editor;
             this.setupListeners();