diff --git a/package-lock.json b/package-lock.json
index c457a01b4b74b8..b4954b651a9292 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"hasInstallScript": true,
"license": "GPL-2.0-or-later",
"dependencies": {
+ "@codemirror/lang-css": "6.2.1",
"@wordpress/a11y": "file:packages/a11y",
"@wordpress/annotations": "file:packages/annotations",
"@wordpress/api-fetch": "file:packages/api-fetch",
@@ -79,6 +80,7 @@
"@wordpress/warning": "file:packages/warning",
"@wordpress/widgets": "file:packages/widgets",
"@wordpress/wordcount": "file:packages/wordcount",
+ "codemirror": "6.0.1",
"wicg-inert": "3.1.2"
},
"devDependencies": {
@@ -2886,6 +2888,94 @@
"react": "*"
}
},
+ "node_modules/@codemirror/autocomplete": {
+ "version": "6.10.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.10.1.tgz",
+ "integrity": "sha512-wKfeYuf4Dsz0r/jvhIoN9k9KrFAhK8x+YZ0E9HfbgJ0ZJ+AmoNbmjSDv6HQ/tBSjgb3H00wn1XrdmhRkOQxsew==",
+ "dependencies": {
+ "@codemirror/language": "^6.0.0",
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.17.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.3.0",
+ "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.0.tgz",
+ "integrity": "sha512-tFfcxRIlOWiQDFhjBSWJ10MxcvbCIsRr6V64SgrcaY0MwNk32cUOcCuNlWo8VjV4qRQCgNgUAnIeo0svkk4R5Q==",
+ "dependencies": {
+ "@codemirror/language": "^6.0.0",
+ "@codemirror/state": "^6.2.0",
+ "@codemirror/view": "^6.0.0",
+ "@lezer/common": "^1.1.0"
+ }
+ },
+ "node_modules/@codemirror/lang-css": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+ "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+ "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/language": {
+ "version": "6.9.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.1.tgz",
+ "integrity": "sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA==",
+ "dependencies": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "@lezer/common": "^1.1.0",
+ "@lezer/highlight": "^1.0.0",
+ "@lezer/lr": "^1.0.0",
+ "style-mod": "^4.0.0"
+ }
+ },
+ "node_modules/@codemirror/lint": {
+ "version": "6.4.2",
+ "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
+ "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==",
+ "dependencies": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "crelt": "^1.0.5"
+ }
+ },
+ "node_modules/@codemirror/search": {
+ "version": "6.5.4",
+ "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.4.tgz",
+ "integrity": "sha512-YoTrvjv9e8EbPs58opjZKyJ3ewFrVSUzQ/4WXlULQLSDDr1nGPJ67mMXFNNVYwdFhybzhrzrtqgHmtpJwIF+8g==",
+ "dependencies": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "crelt": "^1.0.5"
+ }
+ },
+ "node_modules/@codemirror/state": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.0.tgz",
+ "integrity": "sha512-5fIS19U46PEqczbBL6gBAtju9MFDT9TjIC/q2MYblHCEKiU8jhV3cRFhvQu5tQvbtxc5KLWxSnzMNh3ZqeaXVg=="
+ },
+ "node_modules/@codemirror/view": {
+ "version": "6.21.3",
+ "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.3.tgz",
+ "integrity": "sha512-8l1aSQ6MygzL4Nx7GVYhucSXvW4jQd0F6Zm3v9Dg+6nZEfwzJVqi4C2zHfDljID+73gsQrWp9TgHc81xU15O4A==",
+ "dependencies": {
+ "@codemirror/state": "^6.1.4",
+ "style-mod": "^4.1.0",
+ "w3c-keyname": "^2.2.4"
+ }
+ },
"node_modules/@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -4745,6 +4835,36 @@
"node": ">=10"
}
},
+ "node_modules/@lezer/common": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
+ "integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw=="
+ },
+ "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/lr": {
+ "version": "1.3.13",
+ "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz",
+ "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==",
+ "dependencies": {
+ "@lezer/common": "^1.0.0"
+ }
+ },
"node_modules/@mdx-js/react": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@@ -25649,6 +25769,20 @@
"node": ">=0.10.0"
}
},
+ "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/collapse-white-space": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz",
@@ -27117,6 +27251,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-env": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-3.2.4.tgz",
@@ -51612,6 +51751,11 @@
"webpack": "^5.0.0"
}
},
+ "node_modules/style-mod": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+ "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
+ },
"node_modules/style-search": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -54001,6 +54145,11 @@
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
"dev": true
},
+ "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/w3c-xmlserializer": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -55978,6 +56127,7 @@
"license": "GPL-2.0-or-later",
"dependencies": {
"@babel/runtime": "^7.16.0",
+ "@codemirror/lang-css": "6.2.1",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@react-spring/web": "^9.4.5",
@@ -56012,6 +56162,7 @@
"@wordpress/wordcount": "file:../wordcount",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
+ "codemirror": "6.0.1",
"colord": "^2.7.0",
"deepmerge": "^4.3.0",
"diff": "^4.0.2",
@@ -59972,6 +60123,88 @@
"mathjs": "^10.1.1"
}
},
+ "@codemirror/autocomplete": {
+ "version": "6.10.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.10.1.tgz",
+ "integrity": "sha512-wKfeYuf4Dsz0r/jvhIoN9k9KrFAhK8x+YZ0E9HfbgJ0ZJ+AmoNbmjSDv6HQ/tBSjgb3H00wn1XrdmhRkOQxsew==",
+ "requires": {
+ "@codemirror/language": "^6.0.0",
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.17.0",
+ "@lezer/common": "^1.0.0"
+ }
+ },
+ "@codemirror/commands": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.0.tgz",
+ "integrity": "sha512-tFfcxRIlOWiQDFhjBSWJ10MxcvbCIsRr6V64SgrcaY0MwNk32cUOcCuNlWo8VjV4qRQCgNgUAnIeo0svkk4R5Q==",
+ "requires": {
+ "@codemirror/language": "^6.0.0",
+ "@codemirror/state": "^6.2.0",
+ "@codemirror/view": "^6.0.0",
+ "@lezer/common": "^1.1.0"
+ }
+ },
+ "@codemirror/lang-css": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+ "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+ "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/language": {
+ "version": "6.9.1",
+ "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.1.tgz",
+ "integrity": "sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA==",
+ "requires": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "@lezer/common": "^1.1.0",
+ "@lezer/highlight": "^1.0.0",
+ "@lezer/lr": "^1.0.0",
+ "style-mod": "^4.0.0"
+ }
+ },
+ "@codemirror/lint": {
+ "version": "6.4.2",
+ "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
+ "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==",
+ "requires": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "crelt": "^1.0.5"
+ }
+ },
+ "@codemirror/search": {
+ "version": "6.5.4",
+ "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.4.tgz",
+ "integrity": "sha512-YoTrvjv9e8EbPs58opjZKyJ3ewFrVSUzQ/4WXlULQLSDDr1nGPJ67mMXFNNVYwdFhybzhrzrtqgHmtpJwIF+8g==",
+ "requires": {
+ "@codemirror/state": "^6.0.0",
+ "@codemirror/view": "^6.0.0",
+ "crelt": "^1.0.5"
+ }
+ },
+ "@codemirror/state": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.0.tgz",
+ "integrity": "sha512-5fIS19U46PEqczbBL6gBAtju9MFDT9TjIC/q2MYblHCEKiU8jhV3cRFhvQu5tQvbtxc5KLWxSnzMNh3ZqeaXVg=="
+ },
+ "@codemirror/view": {
+ "version": "6.21.3",
+ "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.3.tgz",
+ "integrity": "sha512-8l1aSQ6MygzL4Nx7GVYhucSXvW4jQd0F6Zm3v9Dg+6nZEfwzJVqi4C2zHfDljID+73gsQrWp9TgHc81xU15O4A==",
+ "requires": {
+ "@codemirror/state": "^6.1.4",
+ "style-mod": "^4.1.0",
+ "w3c-keyname": "^2.2.4"
+ }
+ },
"@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -61297,6 +61530,36 @@
}
}
},
+ "@lezer/common": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
+ "integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw=="
+ },
+ "@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/lr": {
+ "version": "1.3.13",
+ "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz",
+ "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==",
+ "requires": {
+ "@lezer/common": "^1.0.0"
+ }
+ },
"@mdx-js/react": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@@ -69387,6 +69650,7 @@
"version": "file:packages/block-editor",
"requires": {
"@babel/runtime": "^7.16.0",
+ "@codemirror/lang-css": "6.2.1",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@react-spring/web": "^9.4.5",
@@ -69421,6 +69685,7 @@
"@wordpress/wordcount": "file:../wordcount",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
+ "codemirror": "6.0.1",
"colord": "^2.7.0",
"deepmerge": "^4.3.0",
"diff": "^4.0.2",
@@ -79821,6 +80086,20 @@
"integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
"dev": true
},
+ "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"
+ }
+ },
"collapse-white-space": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz",
@@ -80980,6 +81259,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-env": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-3.2.4.tgz",
@@ -99685,6 +99969,11 @@
"integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
"dev": true
},
+ "style-mod": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+ "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
+ },
"style-search": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -101472,6 +101761,11 @@
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
"dev": true
},
+ "w3c-keyname": {
+ "version": "2.2.8",
+ "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+ "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+ },
"w3c-xmlserializer": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/package.json b/package.json
index cf6ce78f22e7f1..285dda06dc21ce 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"IS_GUTENBERG_PLUGIN": true
},
"dependencies": {
+ "@codemirror/lang-css": "6.2.1",
"@wordpress/a11y": "file:packages/a11y",
"@wordpress/annotations": "file:packages/annotations",
"@wordpress/api-fetch": "file:packages/api-fetch",
@@ -91,6 +92,7 @@
"@wordpress/warning": "file:packages/warning",
"@wordpress/widgets": "file:packages/widgets",
"@wordpress/wordcount": "file:packages/wordcount",
+ "codemirror": "6.0.1",
"wicg-inert": "3.1.2"
},
"devDependencies": {
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 7d6c89efc82a21..d76d29393cb369 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -31,6 +31,7 @@
"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
],
"dependencies": {
+ "@codemirror/lang-css": "6.2.1",
"@babel/runtime": "^7.16.0",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
@@ -66,6 +67,7 @@
"@wordpress/wordcount": "file:../wordcount",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
+ "codemirror": "6.0.1",
"colord": "^2.7.0",
"deepmerge": "^4.3.0",
"diff": "^4.0.2",
diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js
index 4460de03513180..752db0b87ecddd 100644
--- a/packages/block-editor/src/components/global-styles/advanced-panel.js
+++ b/packages/block-editor/src/components/global-styles/advanced-panel.js
@@ -1,19 +1,12 @@
/**
* WordPress dependencies
*/
-import {
- TextareaControl,
- Tooltip,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
+import { Suspense, lazy } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { default as transformStyles } from '../../utils/transform-styles';
+const CSSEditor = lazy( () => import( './css-editor' ) );
export default function AdvancedPanel( {
value,
@@ -21,62 +14,11 @@ export default function AdvancedPanel( {
inheritedValue = value,
} ) {
// Custom CSS
- const [ cssError, setCSSError ] = useState( null );
const customCSS = inheritedValue?.css;
- function handleOnChange( newValue ) {
- onChange( {
- ...value,
- css: newValue,
- } );
- if ( cssError ) {
- const [ transformed ] = transformStyles(
- [ { css: value } ],
- '.editor-styles-wrapper'
- );
- if ( transformed ) {
- setCSSError( null );
- }
- }
- }
- function handleOnBlur( event ) {
- if ( ! event?.target?.value ) {
- setCSSError( null );
- return;
- }
-
- const [ transformed ] = transformStyles(
- [ { css: event.target.value } ],
- '.editor-styles-wrapper'
- );
-
- setCSSError(
- transformed === null
- ? __( 'There is an error with your CSS structure.' )
- : null
- );
- }
return (
-
- handleOnChange( newValue ) }
- onBlur={ handleOnBlur }
- className="block-editor-global-styles-advanced-panel__custom-css-input"
- spellCheck={ false }
- />
- { cssError && (
-
-
-
-
-
- ) }
-
+
+
+
);
}
diff --git a/packages/block-editor/src/components/global-styles/css-editor.js b/packages/block-editor/src/components/global-styles/css-editor.js
new file mode 100644
index 00000000000000..cdf077d3c442d3
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/css-editor.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { EditorView, basicSetup } from 'codemirror';
+import { css } from '@codemirror/lang-css';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useEffect, useId } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';
+import { Icon, info } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { default as transformStyles } from '../../utils/transform-styles';
+
+export default function CSSEditor( { value, onChange } ) {
+ const editorRef = useRef();
+
+ // Custom CSS
+ const [ cssError, setCSSError ] = useState( null );
+
+ useEffect( () => {
+ if ( editorRef.current ) {
+ new EditorView( {
+ doc: value,
+ extensions: [
+ basicSetup,
+ css(),
+ EditorView.updateListener.of( ( editor ) => {
+ if ( editor.docChanged ) {
+ handleOnChange( editor.state.doc.toString() );
+ }
+ } ),
+ ],
+ parent: editorRef.current,
+ } );
+ }
+ // We only want to run this once, so we can ignore the dependency array.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [] );
+
+ function handleOnChange( newValue ) {
+ onChange( {
+ ...value,
+ css: newValue,
+ } );
+ if ( cssError ) {
+ const [ transformed ] = transformStyles(
+ [ { css: value } ],
+ '.editor-styles-wrapper'
+ );
+ if ( transformed ) {
+ setCSSError( null );
+ }
+ }
+ }
+ function handleOnBlur( event ) {
+ if ( ! event?.target?.value ) {
+ setCSSError( null );
+ return;
+ }
+
+ const [ transformed ] = transformStyles(
+ [ { css: event.target.value } ],
+ '.editor-styles-wrapper'
+ );
+
+ setCSSError(
+ transformed === null
+ ? __( 'There is an error with your CSS structure.' )
+ : null
+ );
+ }
+ const cssEditorId = useId();
+ return (
+
+
+ { cssError && (
+
+
+
+
+
+ ) }
+
+ );
+}