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,17 +19,19 @@ export class MarkdownEditor extends Component {
         const settingInputs = settingContainer.querySelectorAll('input[type="checkbox"]');
 
         this.editor = null;
-        initEditor({
-            pageId: this.pageId,
-            container: this.elem,
-            displayEl: this.display,
-            inputEl: this.input,
-            drawioUrl: this.getDrawioUrl(),
-            settingInputs: Array.from(settingInputs),
-            text: {
-                serverUploadLimit: this.serverUploadLimitText,
-                imageUploadError: this.imageUploadErrorText,
-            },
+        window.importVersioned('markdown').then(markdown => {
+            return markdown.init({
+                pageId: this.pageId,
+                container: this.elem,
+                displayEl: this.display,
+                inputEl: this.input,
+                drawioUrl: this.getDrawioUrl(),
+                settingInputs: Array.from(settingInputs),
+                text: {
+                    serverUploadLimit: this.serverUploadLimitText,
+                    imageUploadError: this.imageUploadErrorText,
+                },
+            });
         }).then(editor => {
             this.editor = editor;
             this.setupListeners();