add proper HTML editor

diff --git a/package-lock.json b/package-lock.json
index 7bb082eeb408d65f7de1524c8b1dc964c3137a39..b92c8c28a08c5579e795b9cae8ad2f00cc662036 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,11 +5,14 @@
     "packages": {
         "": {
             "dependencies": {
+                "@codemirror/lang-html": "^6.4.5",
                 "@fortawesome/fontawesome-free": "^6.0.0",
                 "@fortawesome/fontawesome-svg-core": "^1.3.0",
                 "@fortawesome/free-brands-svg-icons": "^6.0.0",
                 "@fortawesome/free-solid-svg-icons": "^6.0.0",
                 "@fortawesome/react-fontawesome": "^0.1.17",
+                "@uiw/codemirror-theme-github": "^4.21.9",
+                "@uiw/react-codemirror": "^4.21.9",
                 "apng-js": "^1.1.1",
                 "crc-32": "^1.2.2",
                 "file-saver": "^2.0.5",
@@ -1684,11 +1687,11 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.17.2",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
-            "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
             "dependencies": {
-                "regenerator-runtime": "^0.13.4"
+                "regenerator-runtime": "^0.13.11"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -1742,6 +1745,135 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@codemirror/autocomplete": {
+            "version": "6.9.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.9.0.tgz",
+            "integrity": "sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.6.0",
+                "@lezer/common": "^1.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/commands": {
+            "version": "6.2.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
+            "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.2.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-css": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.0.tgz",
+            "integrity": "sha512-oyIdJM29AyRPM3+PPq1I2oIk8NpUfEN3kAM05XWDDs6o3gSneIKaVJifT2P+fqONLou2uIgXynFyMUDQvo/szA==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.2",
+                "@lezer/css": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/lang-html": {
+            "version": "6.4.5",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.5.tgz",
+            "integrity": "sha512-dUCSxkIw2G+chaUfw3Gfu5kkN83vJQN8gfQDp9iEHsIZluMJA0YJveT12zg/28BJx+uPsbQ6VimKCgx3oJrZxA==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/lang-css": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.0.0",
+                "@codemirror/language": "^6.4.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.2.2",
+                "@lezer/common": "^1.0.0",
+                "@lezer/css": "^1.1.0",
+                "@lezer/html": "^1.3.0"
+            }
+        },
+        "node_modules/@codemirror/lang-javascript": {
+            "version": "6.1.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz",
+            "integrity": "sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.6.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/javascript": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/language": {
+            "version": "6.8.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.8.0.tgz",
+            "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0",
+                "style-mod": "^4.0.0"
+            }
+        },
+        "node_modules/@codemirror/lint": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.0.tgz",
+            "integrity": "sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/search": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.0.tgz",
+            "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/state": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
+            "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+        },
+        "node_modules/@codemirror/theme-one-dark": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+            "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/highlight": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/view": {
+            "version": "6.16.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.16.0.tgz",
+            "integrity": "sha512-1Z2HkvkC3KR/oEZVuW9Ivmp8TWLzGEd8T8TA04TTwPvqogfkHBdYSlflytDOqmkUxM2d1ywTg7X2dU5mC+SXvg==",
+            "dependencies": {
+                "@codemirror/state": "^6.1.4",
+                "style-mod": "^4.0.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
         "node_modules/@discoveryjs/json-ext": {
             "version": "0.5.6",
             "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -1906,6 +2038,55 @@
                 "@jridgewell/sourcemap-codec": "^1.4.10"
             }
         },
+        "node_modules/@lezer/common": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.3.tgz",
+            "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
+        },
+        "node_modules/@lezer/css": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.3.tgz",
+            "integrity": "sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==",
+            "dependencies": {
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/highlight": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+            "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+            "dependencies": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/html": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.6.tgz",
+            "integrity": "sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==",
+            "dependencies": {
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/javascript": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.5.tgz",
+            "integrity": "sha512-FmBUHz8K1V22DgjTd6SrIG9owbzOYZ1t3rY6vGEmw+e2RVBd7sqjM8uXEVRFmfxKFn1Mx2ABJehHjrN3G2ZpmA==",
+            "dependencies": {
+                "@lezer/highlight": "^1.1.3",
+                "@lezer/lr": "^1.3.0"
+            }
+        },
+        "node_modules/@lezer/lr": {
+            "version": "1.3.9",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.9.tgz",
+            "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==",
+            "dependencies": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2410,6 +2591,74 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@uiw/codemirror-extensions-basic-setup": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.9.tgz",
+            "integrity": "sha512-TQT6aF8brxZpFnk/K4fm/K/9k9eF3PMav/KKjHlYrGUT8BTNk/qL+ximLtIzvTUhmBFchjM1lrqSJdvpVom7/w==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/autocomplete": ">=6.0.0",
+                "@codemirror/commands": ">=6.0.0",
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/lint": ">=6.0.0",
+                "@codemirror/search": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/codemirror-theme-github": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.21.9.tgz",
+            "integrity": "sha512-iTcnQHO6gCUp/8s6IzHBQ+oUq9H3zIMmlyhI3HBUpZNl++2gZrJIQCES8aQj6TSzQFqh4UBNal31lVl75j/Wkw==",
+            "dependencies": {
+                "@uiw/codemirror-themes": "4.21.9"
+            }
+        },
+        "node_modules/@uiw/codemirror-themes": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.9.tgz",
+            "integrity": "sha512-ndfka95Ax4LXQSPVtCXJC3Qu2ruhlWUB7PAj+qTeMZobYJdXRxDEm4jMl+/d5fN1ok3jivShQdNgIwvEIFf4lg==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/react-codemirror": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.9.tgz",
+            "integrity": "sha512-aeLegPz2iCvqJjhzXp2WUMqpMZDqxsTnF3rX9kGRlfY6vQLsrjoctj0cQ29uxEtFYJChOVjtCOtnQUlyIuNAHQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.18.6",
+                "@codemirror/commands": "^6.1.0",
+                "@codemirror/state": "^6.1.1",
+                "@codemirror/theme-one-dark": "^6.0.0",
+                "@uiw/codemirror-extensions-basic-setup": "4.21.9",
+                "codemirror": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@babel/runtime": ">=7.11.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/theme-one-dark": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0",
+                "codemirror": ">=6.0.0",
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
@@ -3649,6 +3898,20 @@
                 "node": ">=6"
             }
         },
+        "node_modules/codemirror": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+            "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
         "node_modules/collect.js": {
             "version": "4.31.3",
             "resolved": "https://registry.npmjs.org/collect.js/-/collect.js-4.31.3.tgz",
@@ -3970,6 +4233,11 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "node_modules/crelt": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+            "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -9813,9 +10081,9 @@
             }
         },
         "node_modules/regenerator-runtime": {
-            "version": "0.13.9",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
         },
         "node_modules/regenerator-transform": {
             "version": "0.14.5",
@@ -10766,6 +11034,11 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/style-mod": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
+            "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+        },
         "node_modules/stylehacks": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -11413,6 +11686,11 @@
                 "loader-utils": "^1.0.2"
             }
         },
+        "node_modules/w3c-keyname": {
+            "version": "2.2.8",
+            "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+            "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+        },
         "node_modules/warning": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -13252,11 +13530,11 @@
             }
         },
         "@babel/runtime": {
-            "version": "7.17.2",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
-            "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
             "requires": {
-                "regenerator-runtime": "^0.13.4"
+                "regenerator-runtime": "^0.13.11"
             }
         },
         "@babel/template": {
@@ -13298,6 +13576,129 @@
                 "to-fast-properties": "^2.0.0"
             }
         },
+        "@codemirror/autocomplete": {
+            "version": "6.9.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.9.0.tgz",
+            "integrity": "sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==",
+            "requires": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.6.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "@codemirror/commands": {
+            "version": "6.2.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
+            "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+            "requires": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.2.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "@codemirror/lang-css": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.0.tgz",
+            "integrity": "sha512-oyIdJM29AyRPM3+PPq1I2oIk8NpUfEN3kAM05XWDDs6o3gSneIKaVJifT2P+fqONLou2uIgXynFyMUDQvo/szA==",
+            "requires": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@lezer/common": "^1.0.2",
+                "@lezer/css": "^1.0.0"
+            }
+        },
+        "@codemirror/lang-html": {
+            "version": "6.4.5",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.5.tgz",
+            "integrity": "sha512-dUCSxkIw2G+chaUfw3Gfu5kkN83vJQN8gfQDp9iEHsIZluMJA0YJveT12zg/28BJx+uPsbQ6VimKCgx3oJrZxA==",
+            "requires": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/lang-css": "^6.0.0",
+                "@codemirror/lang-javascript": "^6.0.0",
+                "@codemirror/language": "^6.4.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.2.2",
+                "@lezer/common": "^1.0.0",
+                "@lezer/css": "^1.1.0",
+                "@lezer/html": "^1.3.0"
+            }
+        },
+        "@codemirror/lang-javascript": {
+            "version": "6.1.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz",
+            "integrity": "sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==",
+            "requires": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/language": "^6.6.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/javascript": "^1.0.0"
+            }
+        },
+        "@codemirror/language": {
+            "version": "6.8.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.8.0.tgz",
+            "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
+            "requires": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0",
+                "style-mod": "^4.0.0"
+            }
+        },
+        "@codemirror/lint": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.0.tgz",
+            "integrity": "sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==",
+            "requires": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "@codemirror/search": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.0.tgz",
+            "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
+            "requires": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "@codemirror/state": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
+            "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+        },
+        "@codemirror/theme-one-dark": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+            "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+            "requires": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/highlight": "^1.0.0"
+            }
+        },
+        "@codemirror/view": {
+            "version": "6.16.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.16.0.tgz",
+            "integrity": "sha512-1Z2HkvkC3KR/oEZVuW9Ivmp8TWLzGEd8T8TA04TTwPvqogfkHBdYSlflytDOqmkUxM2d1ywTg7X2dU5mC+SXvg==",
+            "requires": {
+                "@codemirror/state": "^6.1.4",
+                "style-mod": "^4.0.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
         "@discoveryjs/json-ext": {
             "version": "0.5.6",
             "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -13419,6 +13820,55 @@
                 "@jridgewell/sourcemap-codec": "^1.4.10"
             }
         },
+        "@lezer/common": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.3.tgz",
+            "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
+        },
+        "@lezer/css": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.3.tgz",
+            "integrity": "sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==",
+            "requires": {
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "@lezer/highlight": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+            "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+            "requires": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "@lezer/html": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.6.tgz",
+            "integrity": "sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==",
+            "requires": {
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            }
+        },
+        "@lezer/javascript": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.5.tgz",
+            "integrity": "sha512-FmBUHz8K1V22DgjTd6SrIG9owbzOYZ1t3rY6vGEmw+e2RVBd7sqjM8uXEVRFmfxKFn1Mx2ABJehHjrN3G2ZpmA==",
+            "requires": {
+                "@lezer/highlight": "^1.1.3",
+                "@lezer/lr": "^1.3.0"
+            }
+        },
+        "@lezer/lr": {
+            "version": "1.3.9",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.9.tgz",
+            "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==",
+            "requires": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -13893,6 +14343,51 @@
                 "@types/node": "*"
             }
         },
+        "@uiw/codemirror-extensions-basic-setup": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.9.tgz",
+            "integrity": "sha512-TQT6aF8brxZpFnk/K4fm/K/9k9eF3PMav/KKjHlYrGUT8BTNk/qL+ximLtIzvTUhmBFchjM1lrqSJdvpVom7/w==",
+            "requires": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
+        "@uiw/codemirror-theme-github": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.21.9.tgz",
+            "integrity": "sha512-iTcnQHO6gCUp/8s6IzHBQ+oUq9H3zIMmlyhI3HBUpZNl++2gZrJIQCES8aQj6TSzQFqh4UBNal31lVl75j/Wkw==",
+            "requires": {
+                "@uiw/codemirror-themes": "4.21.9"
+            }
+        },
+        "@uiw/codemirror-themes": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.9.tgz",
+            "integrity": "sha512-ndfka95Ax4LXQSPVtCXJC3Qu2ruhlWUB7PAj+qTeMZobYJdXRxDEm4jMl+/d5fN1ok3jivShQdNgIwvEIFf4lg==",
+            "requires": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
+        "@uiw/react-codemirror": {
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.9.tgz",
+            "integrity": "sha512-aeLegPz2iCvqJjhzXp2WUMqpMZDqxsTnF3rX9kGRlfY6vQLsrjoctj0cQ29uxEtFYJChOVjtCOtnQUlyIuNAHQ==",
+            "requires": {
+                "@babel/runtime": "^7.18.6",
+                "@codemirror/commands": "^6.1.0",
+                "@codemirror/state": "^6.1.1",
+                "@codemirror/theme-one-dark": "^6.0.0",
+                "@uiw/codemirror-extensions-basic-setup": "4.21.9",
+                "codemirror": "^6.0.0"
+            }
+        },
         "@vue/reactivity": {
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
@@ -14898,6 +15393,20 @@
                 "shallow-clone": "^3.0.0"
             }
         },
+        "codemirror": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+            "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+            "requires": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
         "collect.js": {
             "version": "4.31.3",
             "resolved": "https://registry.npmjs.org/collect.js/-/collect.js-4.31.3.tgz",
@@ -15169,6 +15678,11 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "crelt": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+            "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+        },
         "cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -19533,9 +20047,9 @@
             }
         },
         "regenerator-runtime": {
-            "version": "0.13.9",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
         },
         "regenerator-transform": {
             "version": "0.14.5",
@@ -20270,6 +20784,11 @@
                 }
             }
         },
+        "style-mod": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
+            "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+        },
         "stylehacks": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -20766,6 +21285,11 @@
                 "loader-utils": "^1.0.2"
             }
         },
+        "w3c-keyname": {
+            "version": "2.2.8",
+            "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+            "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+        },
         "warning": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

diff --git a/package.json b/package.json
index ed394ecb29fcda11e4aaede19ee2247c011badb5..d035282cf4508d639d11af5b593127ba6f96c8f8 100644 (file)
--- a/package.json
+++ b/package.json
@@ -71,11 +71,14 @@
         "tailwindcss": "^3.0.18"
     },
     "dependencies": {
+        "@codemirror/lang-html": "^6.4.5",
         "@fortawesome/fontawesome-free": "^6.0.0",
         "@fortawesome/fontawesome-svg-core": "^1.3.0",
         "@fortawesome/free-brands-svg-icons": "^6.0.0",
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
         "@fortawesome/react-fontawesome": "^0.1.17",
+        "@uiw/codemirror-theme-github": "^4.21.9",
+        "@uiw/react-codemirror": "^4.21.9",
         "apng-js": "^1.1.1",
         "crc-32": "^1.2.2",
         "file-saver": "^2.0.5",

diff --git a/resources/js/components/common/HTMLInput.js b/resources/js/components/common/HTMLInput.js
new file mode 100644 (file)
index 0000000..8a54842
--- /dev/null
+++ b/resources/js/components/common/HTMLInput.js
@@ -0,0 +1,31 @@
+import { html } from '@codemirror/lang-html';
+import { EditorView } from '@codemirror/view';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+
+const HTMLInput = ({
+       name,
+       onChange,
+       value,
+}) => {
+       const handleChange = React.useCallback((value) => {
+               return onChange({ target: { name, value } });
+       }, [name, onChange]);
+
+       return <CodeMirror
+               extensions={[html(), EditorView.lineWrapping]}
+               onChange={handleChange}
+               theme={githubDark}
+               value={value}
+       />;
+};
+
+HTMLInput.propTypes = {
+       name: PropTypes.string,
+       onChange: PropTypes.func,
+       value: PropTypes.string,
+};
+
+export default HTMLInput;

diff --git a/resources/js/components/techniques/Form.js b/resources/js/components/techniques/Form.js
index 9bbb5112511a4d1e0fef78cb22c000bc6954052a..b6dd3d547707d447babe7aa222861ac7205cccf7 100644 (file)
--- a/resources/js/components/techniques/Form.js
+++ b/resources/js/components/techniques/Form.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import HTMLInput from '../common/HTMLInput';
 import { getTranslation } from '../../helpers/Technique';
 import yup from '../../schema/yup';
 
@@ -48,7 +49,7 @@ const ContentForm = ({
                        <Form.Group controlId="content.description">
                                <Form.Label>{t('content.description')}</Form.Label>
                                <Form.Control
-                                       as="textarea"
+                                       as={HTMLInput}
                                        isInvalid={!!(touched.description && errors.description)}
                                        name="description"
                                        onBlur={handleBlur}