diff --git a/examples/webpack/package.json b/examples/webpack/package.json index 23f66bc..6cdafd3 100644 --- a/examples/webpack/package.json +++ b/examples/webpack/package.json @@ -7,6 +7,7 @@ "build": "webpack --mode production" }, "devDependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "monaco-editor": "^0.26.1", diff --git a/examples/webpack/src/index.css b/examples/webpack/src/index.css index 0afa689..fbbaa90 100644 --- a/examples/webpack/src/index.css +++ b/examples/webpack/src/index.css @@ -1,4 +1,50 @@ -#editor { - width: 800px; - height: 600px; +:root { + --background-color: hsl(0, 0%, 96%); + --primary-color: hsl(189, 100%, 63%); + --shadow-color: hsla(0, 0%, 27%, 0.239); +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: hsl(0, 0%, 23%); + --shadow-color: hsl(0, 0%, 43%); + } +} + +body { + background: var(--background-color); + display: flex; + flex-flow: column; + height: 100vh; + margin: 0; +} + +h1 { + margin: 0 1rem; +} + +nav { + align-items: center; + background-color: var(--primary-color); + box-shadow: 0px 5px 5px var(--shadow-color); + display: flex; + flex: 0 0 auto; + height: 3rem; + justify-content: space-between; +} + +.nav-icon { + height: 2rem; + margin-right: 1rem; + vertical-align: middle; +} + +.editor-wrapper { + flex: 1 1 auto; + padding: 1.5rem; +} + +#editor { + height: 100%; + box-shadow: 0 0 10px var(--shadow-color); } diff --git a/examples/webpack/src/index.ejs b/examples/webpack/src/index.ejs index 5a4a672..8b67e85 100644 --- a/examples/webpack/src/index.ejs +++ b/examples/webpack/src/index.ejs @@ -5,6 +5,27 @@ Monaco YAML -
+ +
+
+
diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js index 498d0d9..f37a163 100644 --- a/examples/webpack/src/index.js +++ b/examples/webpack/src/index.js @@ -8,7 +8,7 @@ import { setDiagnosticsOptions } from 'monaco-yaml'; import 'monaco-editor'; window.MonacoEnvironment = { - getWorkerUrl(moduleId, label) { + getWorker(moduleId, label) { switch (label) { case 'css': return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url)); @@ -70,6 +70,8 @@ setDiagnosticsOptions({ }); editor.create(document.getElementById('editor'), { + automaticLayout: true, value: 'p1: ', language: 'yaml', + theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'vs-light', }); diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js index d2c66ec..2c875db 100644 --- a/examples/webpack/webpack.config.js +++ b/examples/webpack/webpack.config.js @@ -15,7 +15,7 @@ module.exports = { }, { // Monaco editor uses .ttf icons. - test: /\.ttf$/, + test: /\.(svg|ttf)$/, type: 'asset', }, ], diff --git a/package-lock.json b/package-lock.json index 666fec8..3ccd4b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "packages": { "": { "version": "3.0.0", + "dev": true, "license": "MIT", "workspaces": [ "examples/*" @@ -38,6 +39,7 @@ "name": "webpack-example", "version": "1.0.0", "devDependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "monaco-editor": "^0.26.1", @@ -598,6 +600,16 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -11333,6 +11345,12 @@ "strip-json-comments": "^3.1.1" } }, + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "dev": true + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -16469,6 +16487,12 @@ "strip-json-comments": "^3.1.1" } }, + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "dev": true + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -24214,6 +24238,7 @@ "webpack-example": { "version": "file:examples/webpack", "requires": { + "@fortawesome/fontawesome-free": "^5.15.4", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "monaco-editor": "^0.26.1", @@ -27572,6 +27597,7 @@ "webpack-example": { "version": "file:examples/webpack", "requires": { + "@fortawesome/fontawesome-free": "^5.15.4", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "monaco-editor": "^0.26.1",