dan/monaco-yaml
1
0
Fork 0
mirror of https://github.com/danbulant/monaco-yaml synced 2026-06-09 17:41:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #68 from remcohaszing/update-example

Browse source 
Update the example
This commit is contained in:
Remco Haszing 2021-08-07 13:14:33 +02:00 committed by GitHub
commit ee45815857
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/webpack/package.json
View file

@ -7,6 +7,7 @@
"build": "webpack --mode production" "build": "webpack --mode production"
}, },
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2", "html-webpack-plugin": "^5.3.2",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",

52
examples/webpack/src/index.css
View file

@ -1,4 +1,50 @@
#editor { :root {
width: 800px; --background-color: hsl(0, 0%, 96%);
height: 600px; --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);
} }

23
examples/webpack/src/index.ejs
View file

@ -5,6 +5,27 @@
<title>Monaco YAML</title> <title>Monaco YAML</title>
</head> </head>
<body> <body>
<div id="editor"></div> <nav>
<h1>Monaco YAML</h1>
<div>
<a href="https://npmjs.com/package/monaco-yaml">
<img
alt="npm icon"
class="nav-icon"
src="<%= require('@fortawesome/fontawesome-free/svgs/brands/npm.svg') %>"
/>
</a>
<a href="https://github.com/remcohaszing/monaco-yaml">
<img
alt="GitHub icon"
class="nav-icon"
src="<%= require('@fortawesome/fontawesome-free/svgs/brands/github.svg') %>"
/>
</a>
</div>
</nav>
<div class="editor-wrapper">
<div id="editor"></div>
</div>
</body> </body>
</html> </html>

4
examples/webpack/src/index.js
View file

@ -8,7 +8,7 @@ import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor'; import 'monaco-editor';
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl(moduleId, label) { getWorker(moduleId, label) {
switch (label) { switch (label) {
case 'css': case 'css':
return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url)); 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'), { editor.create(document.getElementById('editor'), {
automaticLayout: true,
value: 'p1: ', value: 'p1: ',
language: 'yaml', language: 'yaml',
theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'vs-light',
}); });

2
examples/webpack/webpack.config.js
View file

@ -15,7 +15,7 @@ module.exports = {
}, },
{ {
// Monaco editor uses .ttf icons. // Monaco editor uses .ttf icons.
test: /\.ttf$/, test: /\.(svg|ttf)$/,
type: 'asset', type: 'asset',
}, },
], ],

26
package-lock.json generated
View file

@ -7,6 +7,7 @@
"packages": { "packages": {
"": { "": {
"version": "3.0.0", "version": "3.0.0",
"dev": true,
"license": "MIT", "license": "MIT",
"workspaces": [ "workspaces": [
"examples/*" "examples/*"
@ -38,6 +39,7 @@
"name": "webpack-example", "name": "webpack-example",
"version": "1.0.0", "version": "1.0.0",
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2", "html-webpack-plugin": "^5.3.2",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",
@ -598,6 +600,16 @@
"node": "^10.12.0 || >=12.0.0" "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": { "node_modules/@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -11333,6 +11345,12 @@
"strip-json-comments": "^3.1.1" "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": { "@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -16469,6 +16487,12 @@
"strip-json-comments": "^3.1.1" "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": { "@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -24214,6 +24238,7 @@
"webpack-example": { "webpack-example": {
"version": "file:examples/webpack", "version": "file:examples/webpack",
"requires": { "requires": {
"@fortawesome/fontawesome-free": "^5.15.4",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2", "html-webpack-plugin": "^5.3.2",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",
@ -27572,6 +27597,7 @@
"webpack-example": { "webpack-example": {
"version": "file:examples/webpack", "version": "file:examples/webpack",
"requires": { "requires": {
"@fortawesome/fontawesome-free": "^5.15.4",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2", "html-webpack-plugin": "^5.3.2",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",