update samples

This commit is contained in:
Henning Dieterichs 2025-09-05 20:24:00 +02:00
parent a4d7907bd4
commit b19105b7e7
No known key found for this signature in database
GPG key ID: 771381EFFDB9EC06
24 changed files with 294 additions and 3505 deletions

View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
/>
</head>
<body>
<h2>Monaco Editor Sync Loading Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script>
var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
</script>
</body>
</html>

2
samples/legacy/README.md Normal file
View file

@ -0,0 +1,2 @@
These AMD samples are not supported anymore and will be removed in future releases.
Please use the ESM version of the editor!

View file

@ -7,9 +7,9 @@
<h2>Monaco Diff Editor Sample</h2> <h2>Monaco Diff Editor Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container')); var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));

View file

@ -9,9 +9,9 @@
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js --> <!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {

View file

@ -15,7 +15,7 @@
</head> </head>
<body> <body>
<div id="container" style="width: 100%; height: 100%"></div> <div id="container" style="width: 100%; height: 100%"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });

View file

@ -7,9 +7,9 @@
<h2>Monaco Editor Localization Sample</h2> <h2>Monaco Editor Localization Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require.config({ require.config({
'vs/nls': { 'vs/nls': {

View file

@ -7,9 +7,9 @@
<h2>Monarch Tokenizer Sample</h2> <h2>Monarch Tokenizer Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
monaco.languages.register({ monaco.languages.register({

View file

@ -13,7 +13,7 @@
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {

View file

@ -7,7 +7,7 @@
/* We must define the font face outside the shadowroot */ /* We must define the font face outside the shadowroot */
@font-face { @font-face {
font-family: 'codicon'; font-family: 'codicon';
src: url('../node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf') src: url('../../node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf')
format('truetype'); format('truetype');
} }
</style> </style>
@ -17,10 +17,10 @@
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js --> <!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ require.config({
paths: { vs: '../node_modules/monaco-editor/min/vs' }, paths: { vs: '../../node_modules/monaco-editor/min/vs' },
'vs/css': { disabled: true } 'vs/css': { disabled: true }
}); });
@ -36,7 +36,7 @@
const innerStyle = document.createElement('style'); const innerStyle = document.createElement('style');
innerStyle.innerText = innerStyle.innerText =
'@import "../node_modules/monaco-editor/min/vs/editor/editor.main.css";'; '@import "../../node_modules/monaco-editor/min/vs/editor/editor.main.css";';
shadowRoot.appendChild(innerStyle); shadowRoot.appendChild(innerStyle);
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {

View file

@ -8,9 +8,9 @@
<div id="container1" style="width: 400px; height: 200px; border: 1px solid grey"></div> <div id="container1" style="width: 400px; height: 200px; border: 1px solid grey"></div>
<div id="container2" style="width: 400px; height: 200px; border: 1px solid grey"></div> <div id="container2" style="width: 400px; height: 200px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } }); require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
var model = monaco.editor.createModel( var model = monaco.editor.createModel(

View file

@ -9,13 +9,13 @@
<h2>Monaco Editor with Trusted Types Sample</h2> <h2>Monaco Editor with Trusted Types Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
// Allow monaco-editor to load scripts from its own paths only // Allow monaco-editor to load scripts from its own paths only
var scriptLoadingPolicy = { var scriptLoadingPolicy = {
createScriptURL: function allowOnlyMonacoPaths(url) { createScriptURL: function allowOnlyMonacoPaths(url) {
if ( if (
url.indexOf('../node_modules/monaco-editor/min/vs/') === 0 && url.indexOf('../../node_modules/monaco-editor/min/vs/') === 0 &&
url.lastIndexOf('..') == 0 url.lastIndexOf('..') == 0
) { ) {
return url; return url;
@ -27,7 +27,7 @@
scriptLoadingPolicy = trustedTypes.createPolicy('monaco-editor', scriptLoadingPolicy); scriptLoadingPolicy = trustedTypes.createPolicy('monaco-editor', scriptLoadingPolicy);
} }
require.config({ require.config({
paths: { vs: '../node_modules/monaco-editor/min/vs' }, paths: { vs: '../../node_modules/monaco-editor/min/vs' },
trustedTypesPolicy: scriptLoadingPolicy trustedTypesPolicy: scriptLoadingPolicy
}); });

3727
samples/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -15,15 +15,15 @@
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"glob": "^7.2.0", "glob": "^7.2.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"monaco-editor": "^0.53.0-dev-20250905",
"monaco-editor-webpack-plugin": "^7.0.1", "monaco-editor-webpack-plugin": "^7.0.1",
"monaco-editor": "^0.32.1",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.1", "terser-webpack-plugin": "^5.3.1",
"ts-loader": "^9.2.6", "ts-loader": "^9.2.6",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"webpack": "^5.101.3",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.9.2",
"webpack-dev-server": "^5.2.1", "webpack-dev-server": "^5.2.1",
"webpack": "^5.76.0",
"yaserver": "^0.4.0" "yaserver": "^0.4.0"
}, },
"overrides": { "overrides": {