Rewrites website
Henning Dieterichs
2 years ago
parent
5eff543347
commit
10577a0641
@ -1,14 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
COMMITTER_USER_NAME="$(git log --format='%an' -1)"
|
||||
COMMITTER_EMAIL="$(git log --format='%ae' -1)"
|
||||
|
||||
cd ../monaco-editor-website
|
||||
git init
|
||||
git config user.name "${COMMITTER_USER_NAME}"
|
||||
git config user.email "${COMMITTER_EMAIL}"
|
||||
git remote add origin "https://x-access-token:${GITHUB_TOKEN}@github.com/microsoft/monaco-editor.git"
|
||||
git checkout -b gh-pages
|
||||
git add .
|
||||
git commit -m "Publish website"
|
||||
git push origin gh-pages --force
|
||||
@ -0,0 +1,53 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as glob from 'glob';
|
||||
import * as path from 'path';
|
||||
import { REPO_ROOT } from './utils';
|
||||
|
||||
checkEveryMonacoLanguageHasASample();
|
||||
|
||||
function checkEveryMonacoLanguageHasASample() {
|
||||
let languages = glob
|
||||
.sync('src/basic-languages/*/*.contribution.ts', { cwd: REPO_ROOT })
|
||||
.map((f) => path.dirname(f))
|
||||
.map((f) => f.substring('src/basic-languages/'.length));
|
||||
languages.push('css');
|
||||
languages.push('html');
|
||||
languages.push('json');
|
||||
languages.push('typescript');
|
||||
|
||||
// some languages have a different id than their folder
|
||||
languages = languages.map((l) => {
|
||||
switch (l) {
|
||||
case 'coffee':
|
||||
return 'coffeescript';
|
||||
case 'protobuf':
|
||||
return 'proto';
|
||||
case 'solidity':
|
||||
return 'sol';
|
||||
case 'sophia':
|
||||
return 'aes';
|
||||
default:
|
||||
return l;
|
||||
}
|
||||
});
|
||||
|
||||
let fail = false;
|
||||
for (const language of languages) {
|
||||
const expectedSamplePath = path.join(
|
||||
REPO_ROOT,
|
||||
`website-v2/src/website/data/home-samples/sample.${language}.txt`
|
||||
);
|
||||
if (!fs.existsSync(expectedSamplePath)) {
|
||||
console.error(`Missing sample for ${language} at ${expectedSamplePath}`);
|
||||
fail = true;
|
||||
}
|
||||
}
|
||||
if (fail) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
@ -1,163 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import glob = require('glob');
|
||||
import path = require('path');
|
||||
import fs = require('fs');
|
||||
import cp = require('child_process');
|
||||
import CleanCSS from 'clean-css';
|
||||
import { REPO_ROOT, readFiles, writeFiles } from './utils';
|
||||
import { removeDir } from './fs';
|
||||
|
||||
const MONACO_EDITOR_VERSION: string = (() => {
|
||||
const output = cp.execSync(`npm show monaco-editor version`).toString();
|
||||
const version = output.split(/\r\n|\r|\n/g)[0];
|
||||
if (!/\d+\.\d+\.\d+/.test(version)) {
|
||||
console.log('unrecognized package.json version: ' + version);
|
||||
process.exit(1);
|
||||
}
|
||||
return version;
|
||||
})();
|
||||
|
||||
removeDir(`../monaco-editor-website`);
|
||||
checkSamples();
|
||||
generateWebsite();
|
||||
|
||||
/**
|
||||
* Check that there are samples for all available languages
|
||||
*/
|
||||
function checkSamples() {
|
||||
let languages = glob
|
||||
.sync('src/basic-languages/*/*.contribution.ts', { cwd: REPO_ROOT })
|
||||
.map((f) => path.dirname(f))
|
||||
.map((f) => f.substring('src/basic-languages/'.length));
|
||||
languages.push('css');
|
||||
languages.push('html');
|
||||
languages.push('json');
|
||||
languages.push('typescript');
|
||||
|
||||
// some languages have a different id than their folder
|
||||
languages = languages.map((l) => {
|
||||
switch (l) {
|
||||
case 'coffee':
|
||||
return 'coffeescript';
|
||||
case 'protobuf':
|
||||
return 'proto';
|
||||
case 'solidity':
|
||||
return 'sol';
|
||||
case 'sophia':
|
||||
return 'aes';
|
||||
default:
|
||||
return l;
|
||||
}
|
||||
});
|
||||
|
||||
let fail = false;
|
||||
for (const language of languages) {
|
||||
const expectedSamplePath = path.join(REPO_ROOT, `website/index/samples/sample.${language}.txt`);
|
||||
if (!fs.existsSync(expectedSamplePath)) {
|
||||
console.error(`Missing sample for ${language} at ${expectedSamplePath}`);
|
||||
fail = true;
|
||||
}
|
||||
}
|
||||
if (fail) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
function replaceWithRelativeResource(
|
||||
dataPath: string,
|
||||
contents: string,
|
||||
regex: RegExp,
|
||||
callback: (match: string, fileContents: Buffer) => string
|
||||
): string {
|
||||
return contents.replace(regex, function (_, m0) {
|
||||
const filePath = path.join(REPO_ROOT, 'website', path.dirname(dataPath), m0);
|
||||
return callback(m0, fs.readFileSync(filePath));
|
||||
});
|
||||
}
|
||||
|
||||
function generateWebsite() {
|
||||
const files = readFiles('website/**/*', {
|
||||
base: 'website',
|
||||
ignore: ['website/typedoc/**/*'],
|
||||
dot: true
|
||||
});
|
||||
|
||||
for (const file of files) {
|
||||
if (!file.contents || !/\.(html)$/.test(file.path) || /new-samples/.test(file.path)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let contents = file.contents.toString();
|
||||
contents = contents.replace(/\.\.\/release\/dev/g, 'node_modules/monaco-editor/min');
|
||||
// contents = contents.replace(/\.\.\/\.\.\/release\/dev/g, '../monaco-editor/release/dev');
|
||||
contents = contents.replace(/{{version}}/g, MONACO_EDITOR_VERSION);
|
||||
contents = contents.replace(/{{year}}/g, String(new Date().getFullYear()));
|
||||
|
||||
// Preload xhr contents
|
||||
contents = replaceWithRelativeResource(
|
||||
file.path,
|
||||
contents,
|
||||
/<pre data-preload="([^"]+)".*/g,
|
||||
function (m0, fileContents) {
|
||||
return (
|
||||
'<pre data-preload="' +
|
||||
m0 +
|
||||
'" style="display:none">' +
|
||||
fileContents
|
||||
.toString('utf8')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>') +
|
||||
'</pre>'
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Inline fork.png
|
||||
contents = replaceWithRelativeResource(
|
||||
file.path,
|
||||
contents,
|
||||
/src="(\.\/fork.png)"/g,
|
||||
function (m0, fileContents) {
|
||||
return 'src="data:image/png;base64,' + fileContents.toString('base64') + '"';
|
||||
}
|
||||
);
|
||||
|
||||
// let allCSS = '';
|
||||
contents = replaceWithRelativeResource(
|
||||
file.path,
|
||||
contents,
|
||||
/<link data-inline="yes-please" href="([^"]+)".*/g,
|
||||
function (m0, fileContents) {
|
||||
const minifiedCSS = (new CleanCSS() as any).minify(fileContents.toString('utf8')).styles;
|
||||
return `<style>${minifiedCSS}</style>`;
|
||||
}
|
||||
);
|
||||
|
||||
// Inline javascript
|
||||
contents = replaceWithRelativeResource(
|
||||
file.path,
|
||||
contents,
|
||||
/<script data-inline="yes-please" src="([^"]+)".*/g,
|
||||
function (m0, fileContents) {
|
||||
return '<script>' + fileContents.toString('utf8') + '</script>';
|
||||
}
|
||||
);
|
||||
|
||||
file.contents = Buffer.from(contents.split(/\r\n|\r|\n/).join('\n'));
|
||||
}
|
||||
|
||||
writeFiles(files, `../monaco-editor-website`);
|
||||
|
||||
// temporarily create package.json so that npm install doesn't bark
|
||||
fs.writeFileSync(path.join(REPO_ROOT, '../monaco-editor-website/package.json'), '{}');
|
||||
fs.writeFileSync(path.join(REPO_ROOT, '../monaco-editor-website/.nojekyll'), '');
|
||||
cp.execSync('npm install monaco-editor', {
|
||||
cwd: path.join(REPO_ROOT, '../monaco-editor-website')
|
||||
});
|
||||
fs.unlinkSync(path.join(REPO_ROOT, '../monaco-editor-website/package.json'));
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,2 +1,51 @@
|
||||
node_modules/monaco-editor/dev
|
||||
node_modules/monaco-editor/esm
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
jspm_packages
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
dist
|
||||
api
|
||||
|
||||
dist/
|
||||
|
||||
.npmrc
|
||||
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.js
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"useTabs": true
|
||||
}
|
||||
@ -1,302 +0,0 @@
|
||||
body {
|
||||
padding: 54px 0 40px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body.home {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea,
|
||||
.navbar-search .search-query {
|
||||
font: 400 14px/1.4em 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/***** Bootstrap Cosmo Overrides *****/
|
||||
h1,
|
||||
h2 {
|
||||
font-family: 'Segoe UI Light', 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.alert-heading,
|
||||
.alert h1,
|
||||
.alert h2,
|
||||
.alert h3,
|
||||
.alert h4,
|
||||
.alert h5,
|
||||
.alert h6 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-inner {
|
||||
background-color: #68217a;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.navbar-inverse.home .navbar-inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar {
|
||||
background: transparent;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar:hover,
|
||||
.navbar-inverse .btn-navbar:focus,
|
||||
.navbar-inverse .btn-navbar:active,
|
||||
.navbar-inverse .btn-navbar.active,
|
||||
.navbar-inverse .btn-navbar.disabled,
|
||||
.navbar-inverse .btn-navbar[disabled] {
|
||||
background: #442359;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0072c6;
|
||||
}
|
||||
|
||||
.home .hero-unit {
|
||||
margin-top: -54px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: #0072c6;
|
||||
}
|
||||
|
||||
/***** General *****/
|
||||
|
||||
body > section > .container {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
background-color: #0072c6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.masthead .hero-unit {
|
||||
padding: 30px 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.navbar.home {
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
text-shadow: none;
|
||||
padding-top: 18px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a {
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > li > a.nav-item:focus,
|
||||
.navbar-inverse .nav > li > a.nav-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav .active > a.nav-item,
|
||||
.navbar-inverse .nav .active > a.nav-item:hover,
|
||||
.navbar-inverse .nav .active > a.nav-item:focus {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.24);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
/*background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDBsLTExIDEyLTcuMzMzLTUuNjY2LTIuNjY3IDEuNjgydjEzLjk4NGwyLjY2NyAxLjY2NiA3LjMzMy01LjY2NiAxMSAxMSA3LTN2LTIyLjMzM2wtNy0zLjY2N3ptLTE4IDE5di05bDQgNS00IDR6bTExLTRsNy02djEybC03LTZ6Ii8+PC9zdmc+") left center no-repeat;*/
|
||||
/*padding: 16px 12px 0 34px;*/
|
||||
padding: 16px 12px 0 0px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar .logo a {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.flgroup:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
/* Media Queries */
|
||||
@media (min-width: 1200px) {
|
||||
h1,
|
||||
h2 {
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
#gh-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.navbar .nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
h1 {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 979px) {
|
||||
body {
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom,
|
||||
.navbar-static-top {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
width: 724px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar .container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar .logo a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
@ -1,229 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Monaco Editor</title>
|
||||
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./all.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./index/index.css" rel="stylesheet" />
|
||||
|
||||
<link
|
||||
data-name="vs/editor/editor.main"
|
||||
rel="stylesheet"
|
||||
href="../release/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre data-preload="index/samples/sample.typescript.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.lhs.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.rhs.txt"></pre>
|
||||
<a id="gh-link" href="https://github.com/microsoft/monaco-editor"
|
||||
><img width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
|
||||
/></a>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-navbar"
|
||||
data-toggle="collapse"
|
||||
data-target=".nav-collapse"
|
||||
>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</a></li>
|
||||
<li><a class="nav-item" href="api/index.html">API Doc</a></li>
|
||||
<li><a class="nav-item" href="playground.html">Playground</a></li>
|
||||
<li><a class="nav-item" href="monarch.html">Monarch</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="nav-item"
|
||||
target="_blank"
|
||||
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
|
||||
>Download {{version}}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="try">
|
||||
<div class="container">
|
||||
<h3>About</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br />
|
||||
<p>
|
||||
The Monaco Editor is the code editor that powers
|
||||
<a href="https://github.com/microsoft/vscode">VS Code</a>. A good page describing the
|
||||
code editor's features is
|
||||
<a href="https://code.visualstudio.com/docs/editor/editingevolved">here</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and
|
||||
Opera.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The Monaco editor is
|
||||
<span style="font-weight: bold; color: #ff5722">not</span>
|
||||
supported in mobile browsers or mobile web frameworks.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Find more information at the
|
||||
<a href="https://github.com/microsoft/monaco-editor">Monaco Editor repo</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h3>Download v{{version}}</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br />
|
||||
<p>The latest released version is <strong>{{version}}</strong>.</p>
|
||||
<p>
|
||||
Download with this direct
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
|
||||
>download link</a
|
||||
>
|
||||
or
|
||||
<a href="https://www.npmjs.com/package/monaco-editor">from npm</a>:
|
||||
</p>
|
||||
<pre style="color: black">npm install monaco-editor@{{version}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h3>Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<h4
|
||||
title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining"
|
||||
>
|
||||
Rich IntelliSense, Validation
|
||||
</h4>
|
||||
<p>TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML</p>
|
||||
<br />
|
||||
<h4 title="Syntax colorization">Basic Syntax Colorization</h4>
|
||||
<p>
|
||||
XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch,
|
||||
Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Colorizers are implemented using
|
||||
<a href="monarch.html" target="_blank">Monarch</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<label class="control-label">Language</label>
|
||||
<select class="language-picker"></select>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<label class="control-label">Theme</label>
|
||||
<select class="theme-picker">
|
||||
<option>Visual Studio</option>
|
||||
<option>Visual Studio Dark</option>
|
||||
<option>High Contrast Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading editor" style="display: none">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h3>Diff Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<h4 title="As you type diffing for all supported languages">
|
||||
Side by side live comparison
|
||||
</h4>
|
||||
<p>Supports all languages out of the box</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="checkbox">
|
||||
<label class="control-label">
|
||||
<input id="inline-diff-checkbox" type="checkbox" value="" />
|
||||
Inline diff
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading diff-editor" style="display: none">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diff-editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="container">
|
||||
<hr />
|
||||
<p class="text-center">
|
||||
<a href="https://microsoft.com" title="Microsoft">
|
||||
<img
|
||||
src="https://opensource.microsoft.com/assets/images/Microsoft_logo.svg"
|
||||
alt="Microsoft"
|
||||
style="max-height: 23px; margin-bottom: 12px"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
|
||||
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
|
||||
integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script>
|
||||
var require = { paths: { vs: '../release/dev/vs' } };
|
||||
</script>
|
||||
<script src="../release/dev/vs/loader.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.js"></script>
|
||||
<script data-inline="yes-please" src="./index/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,258 +0,0 @@
|
||||
.try .drops {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.try .drops li {
|
||||
float: left;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-indent: 0;
|
||||
font-size: 26px;
|
||||
line-height: normal;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.try .drops li a:hover,
|
||||
.try .drops li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.try .drops li h4 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.try .drops li.active h4,
|
||||
.try .drops li.active:hover h4 {
|
||||
color: #0072c6;
|
||||
}
|
||||
|
||||
.try .drops li:hover h4 {
|
||||
color: rgba(0, 114, 198, 0.5);
|
||||
}
|
||||
|
||||
.try .editor.row {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.try .row h4 {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.try .tile {
|
||||
position: relative;
|
||||
height: 72px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.try .tile:hover {
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.try .tile .glyph {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: -6px;
|
||||
background: url('../img/cloud.png') no-repeat;
|
||||
background-size: 80px 43px;
|
||||
height: 43px;
|
||||
width: 80px;
|
||||
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s ease, bottom 0.5s ease;
|
||||
-webkit-transition: opacity 0.5s ease, bottom 0.5s ease;
|
||||
}
|
||||
|
||||
.try .tile:hover .glyph {
|
||||
opacity: 1;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.try .editor.row h4 small {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.try .editor.row .control-label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget input[type='text'] {
|
||||
margin-bottom: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .monaco-checkbox .label {
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .close {
|
||||
float: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor,
|
||||
.try .editor .editor-frame #diff-editor {
|
||||
height: 400px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress {
|
||||
width: 50%;
|
||||
margin: 15% auto 0;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress .bar {
|
||||
width: 100%;
|
||||
background-color: #4bb1cf;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor .alert,
|
||||
.try .editor .editor-frame #diff-editor .alert {
|
||||
margin: 18% auto 0;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
}
|
||||
|
||||
.try .editor #editor .monaco-editor .row,
|
||||
.try .editor #diff-editor .monaco-editor .row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.try .editor .vs.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #646465;
|
||||
}
|
||||
|
||||
.try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.try .editor .row {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.try .container {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.try .editor > .span9 .row .span4 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.try .editor h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.try .editor > .span3 p,
|
||||
.try .editor > .span3 h4 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.try .editor > .span9 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------- BEGIN bootstrap fixes for the editor ------- */
|
||||
|
||||
.monaco-editor .container:before,
|
||||
.monaco-editor .row:before {
|
||||
content: '';
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container:after,
|
||||
.monaco-editor .row:after {
|
||||
clear: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container {
|
||||
width: auto;
|
||||
margin: inherit;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .close {
|
||||
float: none;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
text-shadow: inherit;
|
||||
opacity: inherit;
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .row {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .invisible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* ------- END bootstrap fixes for the editor ------- */
|
||||
@ -1,174 +0,0 @@
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
'use strict';
|
||||
|
||||
var editor = null,
|
||||
diffEditor = null;
|
||||
|
||||
$(document).ready(function () {
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
var MODES = (function () {
|
||||
var modesIds = monaco.languages.getLanguages().map(function (lang) {
|
||||
return lang.id;
|
||||
});
|
||||
modesIds.sort();
|
||||
|
||||
return modesIds.map(function (modeId) {
|
||||
return {
|
||||
modeId: modeId,
|
||||
sampleURL: 'index/samples/sample.' + modeId + '.txt'
|
||||
};
|
||||
});
|
||||
})();
|
||||
|
||||
var startModeIndex = 0;
|
||||
for (var i = 0; i < MODES.length; i++) {
|
||||
var o = document.createElement('option');
|
||||
o.textContent = MODES[i].modeId;
|
||||
if (MODES[i].modeId === 'typescript') {
|
||||
startModeIndex = i;
|
||||
}
|
||||
$('.language-picker').append(o);
|
||||
}
|
||||
$('.language-picker')[0].selectedIndex = startModeIndex;
|
||||
loadSample(MODES[startModeIndex]);
|
||||
$('.language-picker').change(function () {
|
||||
loadSample(MODES[this.selectedIndex]);
|
||||
});
|
||||
|
||||
$('.theme-picker').change(function () {
|
||||
changeTheme(this.selectedIndex);
|
||||
});
|
||||
|
||||
loadDiffSample();
|
||||
|
||||
$('#inline-diff-checkbox').change(function () {
|
||||
diffEditor.updateOptions({
|
||||
renderSideBySide: !$(this).is(':checked')
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (editor) {
|
||||
editor.layout();
|
||||
}
|
||||
if (diffEditor) {
|
||||
diffEditor.layout();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var preloaded = {};
|
||||
(function () {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function (el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url, cb) {
|
||||
if (preloaded[url]) {
|
||||
return cb(null, preloaded[url]);
|
||||
}
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
dataType: 'text',
|
||||
error: function () {
|
||||
cb(this, null);
|
||||
}
|
||||
}).done(function (data) {
|
||||
cb(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSample(mode) {
|
||||
$('.loading.editor').show();
|
||||
xhr(mode.sampleURL, function (err, data) {
|
||||
if (err) {
|
||||
if (editor) {
|
||||
if (editor.getModel()) {
|
||||
editor.getModel().dispose();
|
||||
}
|
||||
editor.dispose();
|
||||
editor = null;
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 200 });
|
||||
$('#editor').empty();
|
||||
$('#editor').append(
|
||||
'<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editor) {
|
||||
$('#editor').empty();
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
model: null
|
||||
});
|
||||
}
|
||||
|
||||
var oldModel = editor.getModel();
|
||||
var newModel = monaco.editor.createModel(data, mode.modeId);
|
||||
editor.setModel(newModel);
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 300 });
|
||||
});
|
||||
}
|
||||
|
||||
function loadDiffSample() {
|
||||
var onError = function () {
|
||||
$('.loading.diff-editor').fadeOut({ duration: 200 });
|
||||
$('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
|
||||
};
|
||||
|
||||
$('.loading.diff-editor').show();
|
||||
|
||||
var lhsData = null,
|
||||
rhsData = null,
|
||||
jsMode = null;
|
||||
|
||||
xhr('index/samples/diff.lhs.txt', function (err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
lhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
xhr('index/samples/diff.rhs.txt', function (err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
rhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
|
||||
function onProgress() {
|
||||
if (lhsData && rhsData) {
|
||||
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
|
||||
enableSplitViewResizing: false
|
||||
});
|
||||
|
||||
var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript');
|
||||
var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript');
|
||||
|
||||
diffEditor.setModel({
|
||||
original: lhsModel,
|
||||
modified: rhsModel
|
||||
});
|
||||
|
||||
$('.loading.diff-editor').fadeOut({ duration: 300 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeTheme(theme) {
|
||||
var newTheme = theme === 1 ? 'vs-dark' : theme === 0 ? 'vs' : 'hc-black';
|
||||
monaco.editor.setTheme(newTheme);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "my-application",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "webpack serve --hot --mode development",
|
||||
"build-webpack": "webpack --mode production",
|
||||
"build": "yarn typedoc && yarn build-webpack",
|
||||
"dev-disk": "webpack --mode development --watch",
|
||||
"typedoc": "typedoc --options ./typedoc/typedoc.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hediet/std": "0.6.0",
|
||||
"@knuddels/mobx-logger": "^1.0.0",
|
||||
"@popperjs/core": "^2.11.5",
|
||||
"@types/base64-js": "^1.3.0",
|
||||
"@types/bootstrap": "^5.2.0",
|
||||
"@types/node": "^18.6.1",
|
||||
"base64-js": "^1.5.1",
|
||||
"bootstrap": "^5.2.0",
|
||||
"bootstrap-icons": "^1.9.1",
|
||||
"classnames": "^2.2.6",
|
||||
"html-inline-css-webpack-plugin": "^1.11.1",
|
||||
"lzma": "^2.3.2",
|
||||
"messagepack": "^1.1.12",
|
||||
"mini-css-extract-plugin": "^2.6.1",
|
||||
"mobx": "^5.15.4",
|
||||
"mobx-react": "^6.2.2",
|
||||
"monaco-editor": "^0.35.0",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^2.4.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"typedoc": "^0.23.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/classnames": "^2.3.1",
|
||||
"@types/html-webpack-plugin": "^3.2.2",
|
||||
"@types/react": "^17.0.3",
|
||||
"@types/react-dom": "^17.0.3",
|
||||
"@types/webpack": "^4.41.10",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^3.5.1",
|
||||
"file-loader": "^6.0.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"script-loader": "^0.7.2",
|
||||
"style-loader": "^1.1.3",
|
||||
"ts-loader": "^9.3.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.7.4",
|
||||
"webpack": "^5.74.0",
|
||||
"webpack-bundle-analyzer": "^4.5.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.9.3"
|
||||
}
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Monaco Editor Playground</title>
|
||||
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./all.css" rel="stylesheet" type="text/css" />
|
||||
<link data-inline="yes-please" href="./playground/spinner.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./playground/playground.css" rel="stylesheet" />
|
||||
|
||||
<link
|
||||
data-name="vs/editor/editor.main"
|
||||
rel="stylesheet"
|
||||
href="../release/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
</head>
|
||||
<body class="playground-page">
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.js"></pre>
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.css"></pre>
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.html"></pre>
|
||||
|
||||
<a id="gh-link" href="https://github.com/microsoft/monaco-editor"
|
||||
><img width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
|
||||
/></a>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-navbar"
|
||||
data-toggle="collapse"
|
||||
data-target=".nav-collapse"
|
||||
>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</a></li>
|
||||
<li><a class="nav-item" href="api/index.html">API Doc</a></li>
|
||||
<li><a class="nav-item" href="playground.html">Playground</a></li>
|
||||
<li><a class="nav-item" href="monarch.html">Monarch</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="nav-item"
|
||||
target="_blank"
|
||||
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
|
||||
>Download {{version}}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="playground"></section>
|
||||
|
||||
<footer class="container">
|
||||
<hr />
|
||||
<p class="text-center">
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
|
||||
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
|
||||
integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script>
|
||||
var require = { paths: { vs: '../release/dev/vs' } };
|
||||
</script>
|
||||
<script src="../release/dev/vs/loader.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.js"></script>
|
||||
|
||||
<script data-inline="yes-please" src="./playground/new-samples/all.js"></script>
|
||||
<script data-inline="yes-please" src="./playground/playground.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,190 +0,0 @@
|
||||
(function () {
|
||||
var PLAY_SAMPLES = [
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Hello world!',
|
||||
id: 'creating-the-editor-hello-world',
|
||||
path: 'creating-the-editor/hello-world'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Editor basic options',
|
||||
id: 'creating-the-editor-editor-basic-options',
|
||||
path: 'creating-the-editor/editor-basic-options'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Hard wrapping',
|
||||
id: 'creating-the-editor-hard-wrapping',
|
||||
path: 'creating-the-editor/hard-wrapping'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Syntax highlighting for HTML elements',
|
||||
id: 'creating-the-editor-syntax-highlighting-for-html-elements',
|
||||
path: 'creating-the-editor/syntax-highlighting-for-html-elements'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Adding a command to an editor instance',
|
||||
id: 'interacting-with-the-editor-adding-a-command-to-an-editor-instance',
|
||||
path: 'interacting-with-the-editor/adding-a-command-to-an-editor-instance'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Adding an action to an editor instance',
|
||||
id: 'interacting-with-the-editor-adding-an-action-to-an-editor-instance',
|
||||
path: 'interacting-with-the-editor/adding-an-action-to-an-editor-instance'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Revealing a position',
|
||||
id: 'interacting-with-the-editor-revealing-a-position',
|
||||
path: 'interacting-with-the-editor/revealing-a-position'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Rendering glyphs in the margin',
|
||||
id: 'interacting-with-the-editor-rendering-glyphs-in-the-margin',
|
||||
path: 'interacting-with-the-editor/rendering-glyphs-in-the-margin'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Line and Inline decorations',
|
||||
id: 'interacting-with-the-editor-line-and-inline-decorations',
|
||||
path: 'interacting-with-the-editor/line-and-inline-decorations'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Customizing the line numbers',
|
||||
id: 'interacting-with-the-editor-customizing-the-line-numbers',
|
||||
path: 'interacting-with-the-editor/customizing-the-line-numbers'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Listening to mouse events',
|
||||
id: 'interacting-with-the-editor-listening-to-mouse-events',
|
||||
path: 'interacting-with-the-editor/listening-to-mouse-events'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Listening to key events',
|
||||
id: 'interacting-with-the-editor-listening-to-key-events',
|
||||
path: 'interacting-with-the-editor/listening-to-key-events'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Exposed colors',
|
||||
id: 'customizing-the-appearence-exposed-colors',
|
||||
path: 'customizing-the-appearence/exposed-colors'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Scrollbars',
|
||||
id: 'customizing-the-appearence-scrollbars',
|
||||
path: 'customizing-the-appearence/scrollbars'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Tokens and colors',
|
||||
id: 'customizing-the-appearence-tokens-and-colors',
|
||||
path: 'customizing-the-appearence/tokens-and-colors'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Hello diff world!',
|
||||
id: 'creating-the-diffeditor-hello-diff-world',
|
||||
path: 'creating-the-diffeditor/hello-diff-world'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Multi-line example',
|
||||
id: 'creating-the-diffeditor-multi-line-example',
|
||||
path: 'creating-the-diffeditor/multi-line-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Inline Diff Example',
|
||||
id: 'creating-the-diffeditor-inline-diff-example',
|
||||
path: 'creating-the-diffeditor/inline-diff-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Navigating a Diff',
|
||||
id: 'creating-the-diffeditor-navigating-a-diff',
|
||||
path: 'creating-the-diffeditor/navigating-a-diff'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Custom languages',
|
||||
id: 'extending-language-services-custom-languages',
|
||||
path: 'extending-language-services/custom-languages'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Completion provider example',
|
||||
id: 'extending-language-services-completion-provider-example',
|
||||
path: 'extending-language-services/completion-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Codelens provider example',
|
||||
id: 'extending-language-services-codelens-provider-example',
|
||||
path: 'extending-language-services/codelens-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Color provider example',
|
||||
id: 'extending-language-services-color-provider-example',
|
||||
path: 'extending-language-services/color-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Symbols provider example',
|
||||
id: 'extending-language-services-symbols-provider-example',
|
||||
path: 'extending-language-services/symbols-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Folding provider example',
|
||||
id: 'extending-language-services-folding-provider-example',
|
||||
path: 'extending-language-services/folding-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Hover provider example',
|
||||
id: 'extending-language-services-hover-provider-example',
|
||||
path: 'extending-language-services/hover-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Model markers example',
|
||||
id: 'extending-language-services-model-markers-example',
|
||||
path: 'extending-language-services/model-markers-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Semantic tokens provider example',
|
||||
id: 'extending-language-services-semantic-tokens-provider-example',
|
||||
path: 'extending-language-services/semantic-tokens-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Configure JavaScript defaults',
|
||||
id: 'extending-language-services-configure-javascript-defaults',
|
||||
path: 'extending-language-services/configure-javascript-defaults'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Configure JSON defaults',
|
||||
id: 'extending-language-services-configure-json-defaults',
|
||||
path: 'extending-language-services/configure-json-defaults'
|
||||
}
|
||||
];
|
||||
|
||||
if (typeof exports !== 'undefined') {
|
||||
exports.PLAY_SAMPLES = PLAY_SAMPLES;
|
||||
} else {
|
||||
self.PLAY_SAMPLES = PLAY_SAMPLES;
|
||||
}
|
||||
})();
|
||||
@ -1,8 +0,0 @@
|
||||
var originalModel = monaco.editor.createModel('heLLo world!', 'text/plain');
|
||||
var modifiedModel = monaco.editor.createModel('hello orlando!', 'text/plain');
|
||||
|
||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
|
||||
diffEditor.setModel({
|
||||
original: originalModel,
|
||||
modified: modifiedModel
|
||||
});
|
||||
@ -1,20 +0,0 @@
|
||||
var originalModel = monaco.editor.createModel(
|
||||
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
|
||||
'text/plain'
|
||||
);
|
||||
var modifiedModel = monaco.editor.createModel(
|
||||
'just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.',
|
||||
'text/plain'
|
||||
);
|
||||
|
||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
|
||||
// You can optionally disable the resizing
|
||||
enableSplitViewResizing: false,
|
||||
|
||||
// Render the diff inline
|
||||
renderSideBySide: false
|
||||
});
|
||||
diffEditor.setModel({
|
||||
original: originalModel,
|
||||
modified: modifiedModel
|
||||
});
|
||||
@ -1,17 +0,0 @@
|
||||
var originalModel = monaco.editor.createModel(
|
||||
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
|
||||
'text/plain'
|
||||
);
|
||||
var modifiedModel = monaco.editor.createModel(
|
||||
'just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.',
|
||||
'text/plain'
|
||||
);
|
||||
|
||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
|
||||
// You can optionally disable the resizing
|
||||
enableSplitViewResizing: false
|
||||
});
|
||||
diffEditor.setModel({
|
||||
original: originalModel,
|
||||
modified: modifiedModel
|
||||
});
|
||||
@ -1,150 +0,0 @@
|
||||
// The editor colors can be customized through CSS or through JS
|
||||
|
||||
monaco.editor.defineTheme('myTheme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [{ background: 'EDF9FA' }],
|
||||
colors: {
|
||||
'editor.foreground': '#000000',
|
||||
'editor.background': '#EDF9FA',
|
||||
'editorCursor.foreground': '#8B0000',
|
||||
'editor.lineHighlightBackground': '#0000FF20',
|
||||
'editorLineNumber.foreground': '#008800',
|
||||
'editor.selectionBackground': '#88000030',
|
||||
'editor.inactiveSelectionBackground': '#88000015'
|
||||
}
|
||||
});
|
||||
monaco.editor.setTheme('myTheme');
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: 'My to-do list:\n* buy milk\n* buy coffee\n* write awesome code',
|
||||
language: 'text/plain',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 20
|
||||
});
|
||||
|
||||
// A list of color names:
|
||||
('foreground'); // Overall foreground color. This color is only used if not overridden by a component.
|
||||
('errorForeground'); // Overall foreground color for error messages. This color is only used if not overridden by a component.
|
||||
('descriptionForeground'); // Foreground color for description text providing additional information, for example for a label.
|
||||
('focusBorder'); // Overall border color for focused elements. This color is only used if not overridden by a component.
|
||||
('contrastBorder'); // An extra border around elements to separate them from others for greater contrast.
|
||||
('contrastActiveBorder'); // An extra border around active elements to separate them from others for greater contrast.
|
||||
('selection.background'); // The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
|
||||
('textSeparator.foreground'); // Color for text separators.
|
||||
('textLink.foreground'); // Foreground color for links in text.
|
||||
('textLink.activeForeground'); // Foreground color for active links in text.
|
||||
('textPreformat.foreground'); // Foreground color for preformatted text segments.
|
||||
('textBlockQuote.background'); // Background color for block quotes in text.
|
||||
('textBlockQuote.border'); // Border color for block quotes in text.
|
||||
('textCodeBlock.background'); // Background color for code blocks in text.
|
||||
('widget.shadow'); // Shadow color of widgets such as find/replace inside the editor.
|
||||
('input.background'); // Input box background.
|
||||
('input.foreground'); // Input box foreground.
|
||||
('input.border'); // Input box border.
|
||||
('inputOption.activeBorder'); // Border color of activated options in input fields.
|
||||
('input.placeholderForeground'); // Input box foreground color for placeholder text.
|
||||
('inputValidation.infoBackground'); // Input validation background color for information severity.
|
||||
('inputValidation.infoBorder'); // Input validation border color for information severity.
|
||||
('inputValidation.warningBackground'); // Input validation background color for information warning.
|
||||
('inputValidation.warningBorder'); // Input validation border color for warning severity.
|
||||
('inputValidation.errorBackground'); // Input validation background color for error severity.
|
||||
('inputValidation.errorBorder'); // Input validation border color for error severity.
|
||||
('dropdown.background'); // Dropdown background.
|
||||
('dropdown.foreground'); // Dropdown foreground.
|
||||
('dropdown.border'); // Dropdown border.
|
||||
('list.focusBackground'); // List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.focusForeground'); // List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.activeSelectionBackground'); // List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.activeSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.inactiveSelectionBackground'); // List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.inactiveSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
|
||||
('list.hoverBackground'); // List/Tree background when hovering over items using the mouse.
|
||||
('list.hoverForeground'); // List/Tree foreground when hovering over items using the mouse.
|
||||
('list.dropBackground'); // List/Tree drag and drop background when moving items around using the mouse.
|
||||
('list.highlightForeground'); // List/Tree foreground color of the match highlights when searching inside the list/tree.
|
||||
('pickerGroup.foreground'); // Quick picker color for grouping labels.
|
||||
('pickerGroup.border'); // Quick picker color for grouping borders.
|
||||
('button.foreground'); // Button foreground color.
|
||||
('button.background'); // Button background color.
|
||||
('button.hoverBackground'); // Button background color when hovering.
|
||||
('badge.background'); // Badge background color. Badges are small information labels, e.g. for search results count.
|
||||
('badge.foreground'); // Badge foreground color. Badges are small information labels, e.g. for search results count.
|
||||
('scrollbar.shadow'); // Scrollbar shadow to indicate that the view is scrolled.
|
||||
('scrollbarSlider.background'); // Slider background color.
|
||||
('scrollbarSlider.hoverBackground'); // Slider background color when hovering.
|
||||
('scrollbarSlider.activeBackground'); // Slider background color when active.
|
||||
('progressBar.background'); // Background color of the progress bar that can show for long running operations.
|
||||
('editor.background'); // Editor background color.
|
||||
('editor.foreground'); // Editor default foreground color.
|
||||
('editorWidget.background'); // Background color of editor widgets, such as find/replace.
|
||||
('editorWidget.border'); // Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
|
||||
('editor.selectionBackground'); // Color of the editor selection.
|
||||
('editor.selectionForeground'); // Color of the selected text for high contrast.
|
||||
('editor.inactiveSelectionBackground'); // Color of the selection in an inactive editor.
|
||||
('editor.selectionHighlightBackground'); // Color for regions with the same content as the selection.
|
||||
('editor.findMatchBackground'); // Color of the current search match.
|
||||
('editor.findMatchHighlightBackground'); // Color of the other search matches.
|
||||
('editor.findRangeHighlightBackground'); // Color the range limiting the search.
|
||||
('editor.hoverHighlightBackground'); // Highlight below the word for which a hover is shown.
|
||||
('editorHoverWidget.background'); // Background color of the editor hover.
|
||||
('editorHoverWidget.border'); // Border color of the editor hover.
|
||||
('editorLink.activeForeground'); // Color of active links.
|
||||
('diffEditor.insertedTextBackground'); // Background color for text that got inserted.
|
||||
('diffEditor.removedTextBackground'); // Background color for text that got removed.
|
||||
('diffEditor.insertedTextBorder'); // Outline color for the text that got inserted.
|
||||
('diffEditor.removedTextBorder'); // Outline color for text that got removed.
|
||||
('editorOverviewRuler.currentContentForeground'); // Current overview ruler foreground for inline merge-conflicts.
|
||||
('editorOverviewRuler.incomingContentForeground'); // Incoming overview ruler foreground for inline merge-conflicts.
|
||||
('editorOverviewRuler.commonContentForeground'); // Common ancestor overview ruler foreground for inline merge-conflicts.
|
||||
('editor.lineHighlightBackground'); // Background color for the highlight of line at the cursor position.
|
||||
('editor.lineHighlightBorder'); // Background color for the border around the line at the cursor position.
|
||||
('editor.rangeHighlightBackground'); // Background color of highlighted ranges, like by quick open and find features.
|
||||
('editorCursor.foreground'); // Color of the editor cursor.
|
||||
('editorWhitespace.foreground'); // Color of whitespace characters in the editor.
|
||||
('editorIndentGuide.background'); // Color of the editor indentation guides.
|
||||
('editorLineNumber.foreground'); // Color of editor line numbers.
|
||||
('editorLineNumber.activeForeground'); // Color of editor active line number.
|
||||
('editorRuler.foreground'); // Color of the editor rulers.
|
||||
('editorCodeLens.foreground'); // Foreground color of editor code lenses
|
||||
('editorInlayHint.foreground'); // Foreground color of editor inlay hints
|
||||
('editorInlayHint.background'); // Background color of editor inlay hints
|
||||
('editorBracketMatch.background'); // Background color behind matching brackets
|
||||
('editorBracketMatch.border'); // Color for matching brackets boxes
|
||||
('editorOverviewRuler.border'); // Color of the overview ruler border.
|
||||
('editorGutter.background'); // Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
|
||||
('editorError.foreground'); // Foreground color of error squigglies in the editor.
|
||||
('editorError.border'); // Border color of error squigglies in the editor.
|
||||
('editorWarning.foreground'); // Foreground color of warning squigglies in the editor.
|
||||
('editorWarning.border'); // Border color of warning squigglies in the editor.
|
||||
('editorMarkerNavigationError.background'); // Editor marker navigation widget error color.
|
||||
('editorMarkerNavigationWarning.background'); // Editor marker navigation widget warning color.
|
||||
('editorMarkerNavigation.background'); // Editor marker navigation widget background.
|
||||
('editorSuggestWidget.background'); // Background color of the suggest widget.
|
||||
('editorSuggestWidget.border'); // Border color of the suggest widget.
|
||||
('editorSuggestWidget.foreground'); // Foreground color of the suggest widget.
|
||||
('editorSuggestWidget.selectedBackground'); // Background color of the selected entry in the suggest widget.
|
||||
('editorSuggestWidget.highlightForeground'); // Color of the match highlights in the suggest widget.
|
||||
('editor.wordHighlightBackground'); // Background color of a symbol during read-access, like reading a variable.
|
||||
('editor.wordHighlightStrongBackground'); // Background color of a symbol during write-access, like writing to a variable.
|
||||
('peekViewTitle.background'); // Background color of the peek view title area.
|
||||
('peekViewTitleLabel.foreground'); // Color of the peek view title.
|
||||
('peekViewTitleDescription.foreground'); // Color of the peek view title info.
|
||||
('peekView.border'); // Color of the peek view borders and arrow.
|
||||
('peekViewResult.background'); // Background color of the peek view result list.
|
||||
('peekViewResult.lineForeground'); // Foreground color for line nodes in the peek view result list.
|
||||
('peekViewResult.fileForeground'); // Foreground color for file nodes in the peek view result list.
|
||||
('peekViewResult.selectionBackground'); // Background color of the selected entry in the peek view result list.
|
||||
('peekViewResult.selectionForeground'); // Foreground color of the selected entry in the peek view result list.
|
||||
('peekViewEditor.background'); // Background color of the peek view editor.
|
||||
('peekViewEditorGutter.background'); // Background color of the gutter in the peek view editor.
|
||||
('peekViewResult.matchHighlightBackground'); // Match highlight color in the peek view result list.
|
||||
('peekViewEditor.matchHighlightBackground'); // Match highlight color in the peek view editor.
|
||||
|
||||
/*
|
||||
var colors = require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties
|
||||
Object.keys(colors).forEach(function(key) {
|
||||
var val = colors[key];
|
||||
console.log( '//' + val.description + '\n' + key);
|
||||
})
|
||||
*/
|
||||
@ -1,42 +0,0 @@
|
||||
// Configures two JSON schemas, with references.
|
||||
|
||||
var jsonCode = ['{', ' "p1": "v3",', ' "p2": false', '}'].join('\n');
|
||||
var modelUri = monaco.Uri.parse('a://b/foo.json'); // a made up unique URI for our model
|
||||
var model = monaco.editor.createModel(jsonCode, 'json', modelUri);
|
||||
|
||||
// configure the JSON language support with schemas and schema associations
|
||||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||||
validate: true,
|
||||
schemas: [
|
||||
{
|
||||
uri: 'http://myserver/foo-schema.json', // id of the first schema
|
||||
fileMatch: [modelUri.toString()], // associate with our model
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
p1: {
|
||||
enum: ['v1', 'v2']
|
||||
},
|
||||
p2: {
|
||||
$ref: 'http://myserver/bar-schema.json' // reference the second schema
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
uri: 'http://myserver/bar-schema.json', // id of the second schema
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
q1: {
|
||||
enum: ['x1', 'x2']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
model: model
|
||||
});
|
||||
@ -1,117 +0,0 @@
|
||||
// Register a new language
|
||||
monaco.languages.register({ id: 'mySpecialLanguage' });
|
||||
|
||||
// Register a tokens provider for the language
|
||||
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/\[error.*/, 'custom-error'],
|
||||
[/\[notice.*/, 'custom-notice'],
|
||||
[/\[info.*/, 'custom-info'],
|
||||
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Define a new theme that contains only rules that match this language
|
||||
monaco.editor.defineTheme('myCoolTheme', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' }
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#000000'
|
||||
}
|
||||
});
|
||||
|
||||
// Register a completion item provider for the new language
|
||||
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
|
||||
provideCompletionItems: () => {
|
||||
var suggestions = [
|
||||
{
|
||||
label: 'simpleText',
|
||||
kind: monaco.languages.CompletionItemKind.Text,
|
||||
insertText: 'simpleText'
|
||||
},
|
||||
{
|
||||
label: 'testing',
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: 'testing(${1:condition})',
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||
},
|
||||
{
|
||||
label: 'ifelse',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'If-Else Statement'
|
||||
}
|
||||
];
|
||||
return { suggestions: suggestions };
|
||||
}
|
||||
});
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
theme: 'myCoolTheme',
|
||||
value: getCode(),
|
||||
language: 'mySpecialLanguage'
|
||||
});
|
||||
|
||||
function getCode() {
|
||||
return [
|
||||
'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
|
||||
'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
|
||||
'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
|
||||
'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
|
||||
"[Sun Mar 7 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
|
||||
'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
|
||||
'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
||||
'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
|
||||
'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx'
|
||||
].join('\n');
|
||||
}
|
||||
@ -1,166 +0,0 @@
|
||||
/** @type {monaco.languages.SemanticTokensLegend} */
|
||||
const legend = {
|
||||
tokenTypes: [
|
||||
'comment',
|
||||
'string',
|
||||
'keyword',
|
||||
'number',
|
||||
'regexp',
|
||||
'operator',
|
||||
'namespace',
|
||||
'type',
|
||||
'struct',
|
||||
'class',
|
||||
'interface',
|
||||
'enum',
|
||||
'typeParameter',
|
||||
'function',
|
||||
'member',
|
||||
'macro',
|
||||
'variable',
|
||||
'parameter',
|
||||
'property',
|
||||
'label'
|
||||
],
|
||||
tokenModifiers: [
|
||||
'declaration',
|
||||
'documentation',
|
||||
'readonly',
|
||||
'static',
|
||||
'abstract',
|
||||
'deprecated',
|
||||
'modification',
|
||||
'async'
|
||||
]
|
||||
};
|
||||
|
||||
/** @type {(type: string)=>number} */
|
||||
function getType(type) {
|
||||
return legend.tokenTypes.indexOf(type);
|
||||
}
|
||||
|
||||
/** @type {(modifier: string[]|string|null)=>number} */
|
||||
function getModifier(modifiers) {
|
||||
if (typeof modifiers === 'string') {
|
||||
modifiers = [modifiers];
|
||||
}
|
||||
if (Array.isArray(modifiers)) {
|
||||
let nModifiers = 0;
|
||||
for (let modifier of modifiers) {
|
||||
const nModifier = legend.tokenModifiers.indexOf(modifier);
|
||||
if (nModifier > -1) {
|
||||
nModifiers |= (1 << nModifier) >>> 0;
|
||||
}
|
||||
}
|
||||
return nModifiers;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
const tokenPattern = new RegExp('([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)', 'g');
|
||||
|
||||
monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
|
||||
getLegend: function () {
|
||||
return legend;
|
||||
},
|
||||
provideDocumentSemanticTokens: function (model, lastResultId, token) {
|
||||
const lines = model.getLinesContent();
|
||||
|
||||
/** @type {number[]} */
|
||||
const data = [];
|
||||
|
||||
let prevLine = 0;
|
||||
let prevChar = 0;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
|
||||
for (let match = null; (match = tokenPattern.exec(line)); ) {
|
||||
// translate token and modifiers to number representations
|
||||
let type = getType(match[1]);
|
||||
if (type === -1) {
|
||||
continue;
|
||||
}
|
||||
let modifier = match[2].length ? getModifier(match[2].split('.').slice(1)) : 0;
|
||||
|
||||
data.push(
|
||||
// translate line to deltaLine
|
||||
i - prevLine,
|
||||
// for the same line, translate start to deltaStart
|
||||
prevLine === i ? match.index - prevChar : match.index,
|
||||
match[0].length,
|
||||
type,
|
||||
modifier
|
||||
);
|
||||
|
||||
prevLine = i;
|
||||
prevChar = match.index;
|
||||
}
|
||||
}
|
||||
return {
|
||||
data: new Uint32Array(data),
|
||||
resultId: null
|
||||
};
|
||||
},
|
||||
releaseDocumentSemanticTokens: function (resultId) {}
|
||||
});
|
||||
|
||||
// add some missing tokens
|
||||
monaco.editor.defineTheme('myCustomTheme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
colors: {},
|
||||
rules: [
|
||||
{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
|
||||
{ token: 'keyword', foreground: 'ce63eb' },
|
||||
{ token: 'operator', foreground: '000000' },
|
||||
{ token: 'namespace', foreground: '66afce' },
|
||||
|
||||
{ token: 'type', foreground: '1db010' },
|
||||
{ token: 'struct', foreground: '0000ff' },
|
||||
{ token: 'class', foreground: '0000ff', fontStyle: 'bold' },
|
||||
{ token: 'interface', foreground: '007700', fontStyle: 'bold' },
|
||||
{ token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
|
||||
{ token: 'typeParameter', foreground: '1db010' },
|
||||
{ token: 'function', foreground: '94763a' },
|
||||
|
||||
{ token: 'member', foreground: '94763a' },
|
||||
{ token: 'macro', foreground: '615a60' },
|
||||
{ token: 'variable', foreground: '3e5bbf' },
|
||||
{ token: 'parameter', foreground: '3e5bbf' },
|
||||
{ token: 'property', foreground: '3e5bbf' },
|
||||
{ token: 'label', foreground: '615a60' },
|
||||
|
||||
{ token: 'type.static', fontStyle: 'bold' },
|
||||
{ token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
|
||||
]
|
||||
});
|
||||
|
||||
const editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: [
|
||||
'Available token types:',
|
||||
' [comment] [string] [keyword] [number] [regexp] [operator] [namespace]',
|
||||
' [type] [struct] [class] [interface] [enum] [typeParameter] [function]',
|
||||
' [member] [macro] [variable] [parameter] [property] [label]',
|
||||
'',
|
||||
'Available token modifiers:',
|
||||
' [type.declaration] [type.documentation] [type.member] [type.static]',
|
||||
' [type.abstract] [type.deprecated] [type.modification] [type.async]',
|
||||
'',
|
||||
'Some examples:',
|
||||
' [class.static.token] [type.static.abstract]',
|
||||
' [class.static.token] [type.static]',
|
||||
'',
|
||||
' [struct]',
|
||||
'',
|
||||
' [function.private]',
|
||||
'',
|
||||
'An error case:',
|
||||
' [notInLegend]'
|
||||
].join('\n'),
|
||||
language: 'plaintext',
|
||||
theme: 'myCustomTheme',
|
||||
// semantic tokens provider is disabled by default
|
||||
'semanticHighlighting.enabled': true
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
var jsCode = [
|
||||
'"use strict";',
|
||||
'function Person(age) {',
|
||||
' if (age) {',
|
||||
' this.age = age;',
|
||||
' }',
|
||||
'}',
|
||||
'Person.prototype.getAge = function () {',
|
||||
' return this.age;',
|
||||
'};'
|
||||
].join('\n');
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: jsCode,
|
||||
language: 'javascript'
|
||||
});
|
||||
|
||||
var myCondition1 = editor.createContextKey(/*key name*/ 'myCondition1', /*default value*/ false);
|
||||
var myCondition2 = editor.createContextKey(/*key name*/ 'myCondition2', /*default value*/ false);
|
||||
|
||||
editor.addCommand(
|
||||
monaco.KeyCode.Tab,
|
||||
function () {
|
||||
// services available in `ctx`
|
||||
alert('my command is executing!');
|
||||
},
|
||||
'myCondition1 && myCondition2'
|
||||
);
|
||||
|
||||
myCondition1.set(true);
|
||||
|
||||
setTimeout(function () {
|
||||
alert('now enabling also myCondition2, try pressing Tab!');
|
||||
myCondition2.set(true);
|
||||
// you can use myCondition2.reset() to go back to the default
|
||||
}, 2000);
|
||||
@ -1,25 +0,0 @@
|
||||
function lineNumbersFunc(originalLineNumber) {
|
||||
var map = ['O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
|
||||
if (originalLineNumber < map.length) {
|
||||
return map[originalLineNumber];
|
||||
}
|
||||
return originalLineNumber;
|
||||
}
|
||||
|
||||
var jsCode = [
|
||||
'"use strict";',
|
||||
'function Person(age) {',
|
||||
' if (age) {',
|
||||
' this.age = age;',
|
||||
' }',
|
||||
'}',
|
||||
'Person.prototype.getAge = function () {',
|
||||
' return this.age;',
|
||||
'};'
|
||||
].join('\n');
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: jsCode,
|
||||
language: 'javascript',
|
||||
lineNumbers: lineNumbersFunc
|
||||
});
|
||||
@ -1,33 +0,0 @@
|
||||
var jsCode = [
|
||||
'"use strict";',
|
||||
'function Person(age) {',
|
||||
' if (age) {',
|
||||
' this.age = age;',
|
||||
' }',
|
||||
'}',
|
||||
'Person.prototype.getAge = function () {',
|
||||
' return this.age;',
|
||||
'};'
|
||||
].join('\n');
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: jsCode,
|
||||
language: 'javascript'
|
||||
});
|
||||
|
||||
var decorations = editor.deltaDecorations(
|
||||
[],
|
||||
[
|
||||
{
|
||||
range: new monaco.Range(3, 1, 5, 1),
|
||||
options: {
|
||||
isWholeLine: true,
|
||||
linesDecorationsClassName: 'myLineDecoration'
|
||||
}
|
||||
},
|
||||
{
|
||||
range: new monaco.Range(7, 1, 7, 24),
|
||||
options: { inlineClassName: 'myInlineDecoration' }
|
||||
}
|
||||
]
|
||||
);
|
||||
@ -1,33 +0,0 @@
|
||||
var jsCode = [
|
||||
'"use strict";',
|
||||
'function Person(age) {',
|
||||
' if (age) {',
|
||||
' this.age = age;',
|
||||
' }',
|
||||
'}',
|
||||
'Person.prototype.getAge = function () {',
|
||||
' return this.age;',
|
||||
'};'
|
||||
].join('\n');
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: jsCode,
|
||||
language: 'javascript',
|
||||
glyphMargin: true
|
||||
});
|
||||
|
||||
var decorations = editor.deltaDecorations(
|
||||
[],
|
||||
[
|
||||
{
|
||||
range: new monaco.Range(3, 1, 3, 1),
|
||||
options: {
|
||||
isWholeLine: true,
|
||||
className: 'myContentClass',
|
||||
glyphMarginClassName: 'myGlyphMarginClass'
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
// You can now use `decorations` to change or remove the decoration
|
||||
@ -1,91 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height: 100%">
|
||||
<head>
|
||||
<link data-inline="yes-please" href="./spinner.css" rel="stylesheet" />
|
||||
|
||||
<link
|
||||
data-name="vs/editor/editor.main"
|
||||
rel="stylesheet"
|
||||
href="../../release/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var require = { paths: { vs: '../../release/dev/vs' } };
|
||||
</script>
|
||||
<script src="../../release/dev/vs/loader.js"></script>
|
||||
<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../../release/dev/vs/editor/editor.main.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var receivedCall = null;
|
||||
window.load = function (js, html, css) {
|
||||
receivedCall = {
|
||||
js: js,
|
||||
html: html,
|
||||
css: css
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var geval = eval;
|
||||
|
||||
require(['require', 'vs/editor/editor.main'], function (require) {
|
||||
'use strict';
|
||||
|
||||
var loading = document.getElementById('loading');
|
||||
loading.parentNode.removeChild(loading);
|
||||
document.body.style.height = '100%';
|
||||
|
||||
// Switch `automaticLayout` property to true by default
|
||||
//TODO: var config = require('vs/editor/common/config/config');
|
||||
//config.getActiveEditor().automaticLayout = true;
|
||||
|
||||
window.load = function (js, html, css) {
|
||||
if (css) {
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = css;
|
||||
document.body.appendChild(style);
|
||||
}
|
||||
if (html) {
|
||||
document.body.innerHTML += html;
|
||||
}
|
||||
if (js) {
|
||||
try {
|
||||
geval(js);
|
||||
} catch (err) {
|
||||
var pre = document.createElement('pre');
|
||||
pre.appendChild(document.createTextNode(err));
|
||||
document.body.insertBefore(pre, document.body.firstChild);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (receivedCall) {
|
||||
window.load(receivedCall.js, receivedCall.html, receivedCall.css);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Arial, 'HelveticaNeue-Light', sans-serif;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
select {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.playground-page .title {
|
||||
font-family: 'Segoe UI Light', 'HelveticaNeue-UltraLight', sans-serif;
|
||||
font-weight: 100;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.playground-page .tabArea {
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
.playground-page .tab {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
color: #999;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #999;
|
||||
border-bottom: 0;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.playground-page .tab.active {
|
||||
color: black;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.playground-page .action {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #999;
|
||||
border-bottom: 0;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font: inherit;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.playground-page .action.run {
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAE1JREFUOE9jKCsrY6AEU6QZZPHgNeA/0Hn7gdiBUPjg8gLIABjGaxAxBuA1iBQDYAalIXuLFAOweoUYA8gOA4pigegERrRCXOlhGBgAAGmggVf7bEk0AAAAAElFTkSuQmCC')
|
||||
no-repeat left center;
|
||||
}
|
||||
.playground-page .editor-container {
|
||||
border: 1px solid #999;
|
||||
border-top: 0;
|
||||
}
|
||||
@ -1,427 +0,0 @@
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var isMac = /Mac/i.test(navigator.userAgent);
|
||||
window.onload = function () {
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
xhr('playground/monaco.d.ts.txt').then(function (response) {
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
||||
response.responseText,
|
||||
'ts:monaco.d.ts'
|
||||
);
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
||||
[
|
||||
'declare var require: {',
|
||||
' toUrl(path: string): string;',
|
||||
' (moduleName: string): any;',
|
||||
' (dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
|
||||
' config(data: any): any;',
|
||||
' onError: Function;',
|
||||
'};'
|
||||
].join('\n'),
|
||||
'ts:require.d.ts'
|
||||
);
|
||||
});
|
||||
|
||||
var loading = document.getElementById('loading');
|
||||
loading.parentNode.removeChild(loading);
|
||||
load();
|
||||
});
|
||||
};
|
||||
|
||||
var editor = null;
|
||||
var data = {
|
||||
js: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
css: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
html: {
|
||||
model: null,
|
||||
state: null
|
||||
}
|
||||
};
|
||||
|
||||
function load() {
|
||||
function layout() {
|
||||
var GLOBAL_PADDING = 20;
|
||||
|
||||
var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
|
||||
var HEIGHT = window.innerHeight;
|
||||
|
||||
var TITLE_HEIGHT = 110;
|
||||
var FOOTER_HEIGHT = 80;
|
||||
var TABS_HEIGHT = 20;
|
||||
var INNER_PADDING = 20;
|
||||
var SWITCHER_HEIGHT = 30;
|
||||
|
||||
var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
|
||||
var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
|
||||
|
||||
playgroundContainer.style.width = WIDTH + 'px';
|
||||
playgroundContainer.style.height = HEIGHT - FOOTER_HEIGHT + 'px';
|
||||
playgroundContainer.style.position = 'relative';
|
||||
|
||||
sampleSwitcher.style.position = 'absolute';
|
||||
sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
|
||||
sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
|
||||
|
||||
typingContainer.style.position = 'absolute';
|
||||
typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
|
||||
typingContainer.style.left = GLOBAL_PADDING + 'px';
|
||||
typingContainer.style.width = HALF_WIDTH + 'px';
|
||||
typingContainer.style.height = REMAINING_HEIGHT + 'px';
|
||||
|
||||
tabArea.style.position = 'absolute';
|
||||
tabArea.style.boxSizing = 'border-box';
|
||||
tabArea.style.top = 0;
|
||||
tabArea.style.left = 0;
|
||||
tabArea.style.width = HALF_WIDTH + 'px';
|
||||
tabArea.style.height = TABS_HEIGHT + 'px';
|
||||
|
||||
editorContainer.style.position = 'absolute';
|
||||
editorContainer.style.boxSizing = 'border-box';
|
||||
editorContainer.style.top = TABS_HEIGHT + 'px';
|
||||
editorContainer.style.left = 0;
|
||||
editorContainer.style.width = HALF_WIDTH + 'px';
|
||||
editorContainer.style.height = REMAINING_HEIGHT - TABS_HEIGHT + 'px';
|
||||
|
||||
if (editor) {
|
||||
editor.layout({
|
||||
width: HALF_WIDTH - 2,
|
||||
height: REMAINING_HEIGHT - TABS_HEIGHT - 1
|
||||
});
|
||||
}
|
||||
|
||||
runContainer.style.position = 'absolute';
|
||||
runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
|
||||
runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
|
||||
runContainer.style.width = HALF_WIDTH + 'px';
|
||||
runContainer.style.height = REMAINING_HEIGHT - TABS_HEIGHT + 'px';
|
||||
|
||||
runIframeHeight = REMAINING_HEIGHT - TABS_HEIGHT;
|
||||
if (runIframe) {
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function changeTab(selectedTabNode, desiredModelId) {
|
||||
for (var i = 0; i < tabArea.childNodes.length; i++) {
|
||||
var child = tabArea.childNodes[i];
|
||||
if (/tab/.test(child.className)) {
|
||||
child.className = 'tab';
|
||||
}
|
||||
}
|
||||
selectedTabNode.className = 'tab active';
|
||||
|
||||
var currentState = editor.saveViewState();
|
||||
|
||||
var currentModel = editor.getModel();
|
||||
if (currentModel === data.js.model) {
|
||||
data.js.state = currentState;
|
||||
} else if (currentModel === data.css.model) {
|
||||
data.css.state = currentState;
|
||||
} else if (currentModel === data.html.model) {
|
||||
data.html.state = currentState;
|
||||
}
|
||||
|
||||
editor.setModel(data[desiredModelId].model);
|
||||
editor.restoreViewState(data[desiredModelId].state);
|
||||
editor.focus();
|
||||
}
|
||||
|
||||
// create the typing side
|
||||
var typingContainer = document.createElement('div');
|
||||
typingContainer.className = 'typingContainer';
|
||||
|
||||
var tabArea = (function () {
|
||||
var tabArea = document.createElement('div');
|
||||
tabArea.className = 'tabArea';
|
||||
|
||||
var jsTab = document.createElement('span');
|
||||
jsTab.className = 'tab active';
|
||||
jsTab.appendChild(document.createTextNode('JavaScript'));
|
||||
jsTab.onclick = function () {
|
||||
changeTab(jsTab, 'js');
|
||||
};
|
||||
tabArea.appendChild(jsTab);
|
||||
|
||||
var cssTab = document.createElement('span');
|
||||
cssTab.className = 'tab';
|
||||
cssTab.appendChild(document.createTextNode('CSS'));
|
||||
cssTab.onclick = function () {
|
||||
changeTab(cssTab, 'css');
|
||||
};
|
||||
tabArea.appendChild(cssTab);
|
||||
|
||||
var htmlTab = document.createElement('span');
|
||||
htmlTab.className = 'tab';
|
||||
htmlTab.appendChild(document.createTextNode('HTML'));
|
||||
htmlTab.onclick = function () {
|
||||
changeTab(htmlTab, 'html');
|
||||
};
|
||||
tabArea.appendChild(htmlTab);
|
||||
|
||||
var runLabel = 'Press ' + (isMac ? 'CMD + return' : 'CTRL + Enter') + ' to run the code.';
|
||||
var runBtn = document.createElement('button');
|
||||
runBtn.className = 'action run';
|
||||
runBtn.setAttribute('role', 'button');
|
||||
runBtn.setAttribute('aria-label', runLabel);
|
||||
runBtn.appendChild(document.createTextNode('Run'));
|
||||
runBtn.onclick = function () {
|
||||
run();
|
||||
};
|
||||
tabArea.appendChild(runBtn);
|
||||
|
||||
return tabArea;
|
||||
})();
|
||||
|
||||
var editorContainer = document.createElement('div');
|
||||
editorContainer.className = 'editor-container';
|
||||
|
||||
typingContainer.appendChild(tabArea);
|
||||
typingContainer.appendChild(editorContainer);
|
||||
|
||||
var runContainer = document.createElement('div');
|
||||
runContainer.className = 'run-container';
|
||||
|
||||
var sampleSwitcher = document.createElement('select');
|
||||
var sampleChapter;
|
||||
PLAY_SAMPLES.forEach(function (sample) {
|
||||
if (!sampleChapter || sampleChapter.label !== sample.chapter) {
|
||||
sampleChapter = document.createElement('optgroup');
|
||||
sampleChapter.label = sample.chapter;
|
||||
sampleSwitcher.appendChild(sampleChapter);
|
||||
}
|
||||
var sampleOption = document.createElement('option');
|
||||
sampleOption.value = sample.id;
|
||||
sampleOption.appendChild(document.createTextNode(sample.name));
|
||||
sampleChapter.appendChild(sampleOption);
|
||||
});
|
||||
sampleSwitcher.className = 'sample-switcher';
|
||||
|
||||
var LOADED_SAMPLES = [];
|
||||
function findLoadedSample(sampleId) {
|
||||
for (var i = 0; i < LOADED_SAMPLES.length; i++) {
|
||||
var sample = LOADED_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function findSamplePath(sampleId) {
|
||||
for (var i = 0; i < PLAY_SAMPLES.length; i++) {
|
||||
var sample = PLAY_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample.path;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function loadSample(sampleId, callback) {
|
||||
var sample = findLoadedSample(sampleId);
|
||||
if (sample) {
|
||||
return callback(null, sample);
|
||||
}
|
||||
|
||||
var samplePath = findSamplePath(sampleId);
|
||||
if (!samplePath) {
|
||||
return callback(new Error('sample not found'));
|
||||
}
|
||||
|
||||
samplePath = 'playground/new-samples/' + samplePath;
|
||||
|
||||
var js = xhr(samplePath + '/sample.js').then(function (response) {
|
||||
return response.responseText;
|
||||
});
|
||||
var css = xhr(samplePath + '/sample.css').then(function (response) {
|
||||
return response.responseText;
|
||||
});
|
||||
var html = xhr(samplePath + '/sample.html').then(function (response) {
|
||||
return response.responseText;
|
||||
});
|
||||
Promise.all([js, css, html]).then(
|
||||
function (_) {
|
||||
var js = _[0];
|
||||
var css = _[1];
|
||||
var html = _[2];
|
||||
LOADED_SAMPLES.push({
|
||||
id: sampleId,
|
||||
js: js,
|
||||
css: css,
|
||||
html: html
|
||||
});
|
||||
return callback(null, findLoadedSample(sampleId));
|
||||
},
|
||||
function (err) {
|
||||
callback(err, null);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
sampleSwitcher.onchange = function () {
|
||||
var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
|
||||
window.location.hash = sampleId;
|
||||
};
|
||||
|
||||
var playgroundContainer = document.getElementById('playground');
|
||||
|
||||
layout();
|
||||
window.onresize = layout;
|
||||
|
||||
playgroundContainer.appendChild(sampleSwitcher);
|
||||
playgroundContainer.appendChild(typingContainer);
|
||||
playgroundContainer.appendChild(runContainer);
|
||||
|
||||
data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
|
||||
data.css.model = monaco.editor.createModel('css', 'css');
|
||||
data.html.model = monaco.editor.createModel('html', 'html');
|
||||
|
||||
editor = monaco.editor.create(editorContainer, {
|
||||
model: data.js.model,
|
||||
minimap: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
|
||||
var currentToken = 0;
|
||||
function parseHash(firstTime) {
|
||||
var sampleId = window.location.hash.replace(/^#/, '');
|
||||
if (!sampleId) {
|
||||
sampleId = PLAY_SAMPLES[0].id;
|
||||
}
|
||||
|
||||
if (firstTime) {
|
||||
for (var i = 0; i < sampleSwitcher.options.length; i++) {
|
||||
var opt = sampleSwitcher.options[i];
|
||||
if (opt.value === sampleId) {
|
||||
sampleSwitcher.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var myToken = ++currentToken;
|
||||
loadSample(sampleId, function (err, sample) {
|
||||
if (err) {
|
||||
alert('Sample not found! ' + err.message);
|
||||
return;
|
||||
}
|
||||
if (myToken !== currentToken) {
|
||||
return;
|
||||
}
|
||||
data.js.model.setValue(sample.js);
|
||||
data.html.model.setValue(sample.html);
|
||||
data.css.model.setValue(sample.css);
|
||||
editor.setScrollTop(0);
|
||||
run();
|
||||
});
|
||||
}
|
||||
window.onhashchange = parseHash;
|
||||
parseHash(true);
|
||||
|
||||
function run() {
|
||||
doRun(runContainer);
|
||||
}
|
||||
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, run);
|
||||
window.addEventListener('keydown', function keyDown(ev) {
|
||||
if ((isMac && !ev.metaKey) || !ev.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (ev.shiftKey || ev.altKey || ev.keyCode !== 13) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
run();
|
||||
});
|
||||
}
|
||||
|
||||
var runIframe = null,
|
||||
runIframeHeight = 0;
|
||||
function doRun(runContainer) {
|
||||
if (runIframe) {
|
||||
// Unload old iframe
|
||||
runContainer.removeChild(runIframe);
|
||||
}
|
||||
|
||||
// Load new iframe
|
||||
runIframe = document.createElement('iframe');
|
||||
runIframe.id = 'runner';
|
||||
runIframe.src = 'playground/playground-runner.html';
|
||||
runIframe.className = 'run-iframe';
|
||||
runIframe.style.boxSizing = 'border-box';
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
runIframe.style.width = '100%';
|
||||
runIframe.style.border = '1px solid lightgrey';
|
||||
runIframe.frameborder = '0';
|
||||
runContainer.appendChild(runIframe);
|
||||
|
||||
var getLang = function (lang) {
|
||||
return data[lang].model.getValue();
|
||||
};
|
||||
|
||||
runIframe.addEventListener('load', function (e) {
|
||||
runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
|
||||
});
|
||||
}
|
||||
|
||||
var preloaded = {};
|
||||
(function () {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function (el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url) {
|
||||
if (preloaded[url]) {
|
||||
return Promise.resolve({
|
||||
responseText: preloaded[url]
|
||||
});
|
||||
}
|
||||
|
||||
var req = null;
|
||||
return new Promise(
|
||||
function (c, e) {
|
||||
req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function () {
|
||||
if (req._canceled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.readyState === 4) {
|
||||
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
|
||||
c(req);
|
||||
} else {
|
||||
e(req);
|
||||
}
|
||||
req.onreadystatechange = function () {};
|
||||
}
|
||||
};
|
||||
|
||||
req.open('GET', url, true);
|
||||
req.responseType = '';
|
||||
|
||||
req.send(null);
|
||||
},
|
||||
function () {
|
||||
req._canceled = true;
|
||||
req.abort();
|
||||
}
|
||||
);
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 222 B |
@ -1,63 +0,0 @@
|
||||
/* ---- BEGIN loading spinner ---- */
|
||||
#loading .spinner {
|
||||
margin: 100px auto;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#loading .spinner > div {
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
#loading .spinner .rect2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
#loading .spinner .rect3 {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
#loading .spinner .rect4 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
#loading .spinner .rect5 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-stretchdelay {
|
||||
0%,
|
||||
40%,
|
||||
100% {
|
||||
-webkit-transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%,
|
||||
40%,
|
||||
100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(1);
|
||||
-webkit-transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
/* ---- END loading spinner ---- */
|
||||
@ -0,0 +1,98 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
export function getLoadedMonaco(): typeof monaco {
|
||||
if (!monaco) {
|
||||
throw new Error("monaco is not loaded yet");
|
||||
}
|
||||
return monaco;
|
||||
}
|
||||
|
||||
export function getMonaco(): typeof monaco | undefined {
|
||||
return (window as any).monaco;
|
||||
}
|
||||
|
||||
export interface IMonacoSetup {
|
||||
loaderUrl: string;
|
||||
loaderConfigPaths: Record<string, string>;
|
||||
codiconUrl: string;
|
||||
monacoTypesUrl: string | undefined;
|
||||
}
|
||||
|
||||
let loadMonacoPromise: Promise<typeof monaco> | undefined;
|
||||
export async function loadMonaco(
|
||||
setup: IMonacoSetup = prodMonacoSetup
|
||||
): Promise<typeof monaco> {
|
||||
if (!loadMonacoPromise) {
|
||||
loadMonacoPromise = _loadMonaco(setup);
|
||||
}
|
||||
return loadMonacoPromise;
|
||||
}
|
||||
|
||||
async function _loadMonaco(setup: IMonacoSetup): Promise<typeof monaco> {
|
||||
const global = self as any;
|
||||
|
||||
if (!(global as any).require) {
|
||||
await loadScript(setup.loaderUrl);
|
||||
}
|
||||
|
||||
global.AMD = true;
|
||||
global.getCodiconPath = () => {
|
||||
return setup.codiconUrl;
|
||||
};
|
||||
|
||||
console.log("LOADER CONFIG: ");
|
||||
console.log(JSON.stringify(setup.loaderConfigPaths, null, "\t"));
|
||||
|
||||
/** @type {any} */
|
||||
const req = global.require as any;
|
||||
req.config({ paths: setup.loaderConfigPaths });
|
||||
|
||||
return new Promise((res) => {
|
||||
// First load editor.main. If it inlines the plugins, we don't want to try to load them from the server.
|
||||
req(["vs/editor/editor.main"], () => {
|
||||
req(
|
||||
[
|
||||
"vs/basic-languages/monaco.contribution",
|
||||
"vs/language/css/monaco.contribution",
|
||||
"vs/language/html/monaco.contribution",
|
||||
"vs/language/json/monaco.contribution",
|
||||
"vs/language/typescript/monaco.contribution",
|
||||
],
|
||||
() => {
|
||||
res(monaco);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function loadScript(path: string): Promise<void> {
|
||||
return new Promise((res) => {
|
||||
const script = document.createElement("script");
|
||||
script.onload = () => res();
|
||||
script.async = true;
|
||||
script.type = "text/javascript";
|
||||
script.src = path;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
export const prodMonacoSetup = getMonacoSetup(
|
||||
"node_modules/monaco-editor/min/vs"
|
||||
);
|
||||
|
||||
export function getMonacoSetup(corePath: string): IMonacoSetup {
|
||||
const loaderConfigPaths = {
|
||||
vs: `${corePath}`,
|
||||
};
|
||||
|
||||
return {
|
||||
loaderUrl: `${corePath}/loader.js`,
|
||||
loaderConfigPaths,
|
||||
codiconUrl: `${corePath}/base/browser/ui/codicons/codicon/codicon.ttf`,
|
||||
monacoTypesUrl: undefined,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { loadMonaco } from "../monaco-loader";
|
||||
import { IMessage, IPreviewState } from "../shared";
|
||||
import "./style.scss";
|
||||
|
||||
window.addEventListener("message", (event) => {
|
||||
const e = event.data as IMessage | { kind: undefined };
|
||||
if (e.kind === "initialize") {
|
||||
initialize(e.state);
|
||||
}
|
||||
});
|
||||
|
||||
let monacoPromise: Promise<any> | undefined = undefined;
|
||||
|
||||
async function initialize(state: IPreviewState) {
|
||||
if (monacoPromise) {
|
||||
throw new Error("already initialized");
|
||||
}
|
||||
|
||||
const loadingContainerDiv = document.createElement("div");
|
||||
loadingContainerDiv.className = "loader-container";
|
||||
const loadingDiv = document.createElement("div");
|
||||
loadingDiv.className = "loader";
|
||||
loadingContainerDiv.appendChild(loadingDiv);
|
||||
document.body.appendChild(loadingContainerDiv);
|
||||
|
||||
monacoPromise = loadMonaco(state.monacoSetup);
|
||||
await monacoPromise;
|
||||
|
||||
loadingContainerDiv.remove();
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = state.css;
|
||||
document.body.appendChild(style);
|
||||
|
||||
document.body.innerHTML += state.html;
|
||||
|
||||
try {
|
||||
eval(state.js);
|
||||
} catch (err) {
|
||||
const pre = document.createElement("pre");
|
||||
pre.appendChild(document.createTextNode(`${err}`));
|
||||
document.body.insertBefore(pre, document.body.firstChild);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 16px solid #f2f1f1;
|
||||
border-top: 16px solid #2c9ae3;
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
animation: spin 2s linear infinite;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { IMonacoSetup } from "./monaco-loader";
|
||||
|
||||
export type IMessage = {
|
||||
kind: "initialize";
|
||||
state: IPreviewState;
|
||||
};
|
||||
|
||||
export interface IPlaygroundProject {
|
||||
js: string;
|
||||
css: string;
|
||||
html: string;
|
||||
}
|
||||
|
||||
export interface IPreviewState extends IPlaygroundProject {
|
||||
monacoSetup: IMonacoSetup;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
declare module "lzma/src/lzma_worker" {
|
||||
const x: any;
|
||||
export = x;
|
||||
}
|
||||
declare module "base64-js" {
|
||||
const x: any;
|
||||
export = x;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "~bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
.btn-light {
|
||||
--bs-btn-hover-bg: undefined !important;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>
|
||||
|
After Width: | Height: | Size: 559 B |
@ -0,0 +1,75 @@
|
||||
import React = require("react");
|
||||
import { home, playground, docs, monarch } from "../pages/routes";
|
||||
import { Container, Navbar, Nav, NavDropdown } from "./bootstrap";
|
||||
|
||||
export class PageNav extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Navbar bg="dark" variant="dark" expand="lg">
|
||||
<Container fluid>
|
||||
<Navbar.Brand href="./">
|
||||
<span className="code-oss-icon d-inline-block align-top" />
|
||||
Monaco Editor
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse id="basic-navbar-nav" role="">
|
||||
<Nav className="me-auto">
|
||||
<Nav.Link active={home.isActive} href={home.href}>
|
||||
Home
|
||||
</Nav.Link>
|
||||
<Nav.Link
|
||||
active={playground.isActive}
|
||||
href={playground.href}
|
||||
>
|
||||
Playground
|
||||
</Nav.Link>
|
||||
<Nav.Link
|
||||
active={monarch.isActive}
|
||||
href={monarch.href}
|
||||
>
|
||||
Monarch
|
||||
</Nav.Link>
|
||||
<Nav.Link active={docs.isActive} href={docs.href}>
|
||||
Documentation
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
|
||||
<Nav className="ms-auto">
|
||||
<NavDropdown
|
||||
title={
|
||||
<>
|
||||
<span className="nav-icon bi-download" />
|
||||
<span className="hidden-text">
|
||||
{" "}
|
||||
Download{" "}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
className="download-dropdown"
|
||||
align="end"
|
||||
>
|
||||
{/*<NavDropdown.Item href="#action/3.1">
|
||||
Download 0.33.0
|
||||
</NavDropdown.Item>*/}
|
||||
<NavDropdown.Item
|
||||
href="https://www.npmjs.com/package/monaco-editor"
|
||||
target="_blank"
|
||||
>
|
||||
Get From NPM
|
||||
</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
|
||||
<Nav.Link
|
||||
href="https://github.com/microsoft/monaco-editor"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="nav-icon bi-github" />
|
||||
<span className="hidden-text"> GitHub </span>
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import React = require("react");
|
||||
import { PageNav } from "./Nav";
|
||||
|
||||
export function Page(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="page">
|
||||
<PageNav />
|
||||
<main className="main">{props.children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import * as React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Form } from "./bootstrap";
|
||||
import { IReference } from "../utils/ref";
|
||||
|
||||
@observer
|
||||
export class Radio<T> extends React.Component<{
|
||||
value: IReference<T>;
|
||||
current: T;
|
||||
id?: string;
|
||||
}> {
|
||||
render() {
|
||||
const { value, current } = this.props;
|
||||
return (
|
||||
<Form.Check
|
||||
checked={value.get() === current}
|
||||
onChange={() => value.set(current)}
|
||||
type="radio"
|
||||
id={this.props.id}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
import { observer } from "mobx-react";
|
||||
import React = require("react");
|
||||
import { IReference } from "../utils/ref";
|
||||
import { Form } from "./bootstrap";
|
||||
|
||||
interface Group<T> {
|
||||
groupTitle: string;
|
||||
items: (T | Group<T>)[];
|
||||
}
|
||||
|
||||
@observer
|
||||
export class Select<T> extends React.Component<{
|
||||
value: IReference<T | undefined, T>;
|
||||
values: (T | Group<T>)[];
|
||||
getLabel: (val: T) => string;
|
||||
style?: React.CSSProperties;
|
||||
}> {
|
||||
private readonly map: Map<T, string> = new Map();
|
||||
|
||||
render() {
|
||||
const { value, values } = this.props;
|
||||
this.map.clear();
|
||||
const groups = this.renderGroups(values);
|
||||
const currentValue = value.get();
|
||||
|
||||
return (
|
||||
<Form.Select
|
||||
value={currentValue && this.map.get(currentValue)}
|
||||
defaultValue={currentValue ? undefined : ""}
|
||||
onChange={(e) => {
|
||||
const newValue = e.currentTarget.value;
|
||||
const selected = [...this.map.entries()].find(
|
||||
([k, v]) => v === newValue
|
||||
);
|
||||
if (selected) {
|
||||
value.set(selected[0]);
|
||||
}
|
||||
}}
|
||||
style={this.props.style}
|
||||
size="sm"
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Select an example...
|
||||
</option>
|
||||
{groups}
|
||||
</Form.Select>
|
||||
);
|
||||
}
|
||||
|
||||
private renderGroups(groups: (T | Group<T>)[]): React.ReactNode {
|
||||
const { getLabel } = this.props;
|
||||
|
||||
return groups.map((g, idx) => {
|
||||
if (typeof g === "object" && g && "groupTitle" in g) {
|
||||
return (
|
||||
<optgroup label={g.groupTitle} key={idx}>
|
||||
{this.renderGroups(g.items)}
|
||||
</optgroup>
|
||||
);
|
||||
} else {
|
||||
let id = this.map.get(g);
|
||||
if (!id) {
|
||||
id = `${this.map.size + 1}`;
|
||||
this.map.set(g, id);
|
||||
}
|
||||
|
||||
return (
|
||||
<option key={idx} value={id}>
|
||||
{getLabel(g)}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import * as React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Form } from "./bootstrap";
|
||||
import { IReference } from "../utils/ref";
|
||||
|
||||
@observer
|
||||
export class TextBox extends React.Component<{
|
||||
value: IReference<string>;
|
||||
style?: React.CSSProperties;
|
||||
}> {
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
return (
|
||||
<Form.Control
|
||||
value={value.get()}
|
||||
onChange={(v) => value.set(v.currentTarget.value)}
|
||||
style={this.props.style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import Nav from "react-bootstrap/Nav";
|
||||
export { Nav };
|
||||
|
||||
import Navbar from "react-bootstrap/Navbar";
|
||||
export { Navbar };
|
||||
|
||||
import Form from "react-bootstrap/Form";
|
||||
export { Form };
|
||||
|
||||
import Stack from "react-bootstrap/Stack";
|
||||
export { Stack };
|
||||
|
||||
import Container from "react-bootstrap/Container";
|
||||
export { Container };
|
||||
|
||||
import NavDropdown from "react-bootstrap/NavDropdown";
|
||||
export { NavDropdown };
|
||||
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
export { Modal };
|
||||
|
||||
import Button from "react-bootstrap/Button";
|
||||
export { Button };
|
||||
|
||||
import ListGroup from "react-bootstrap/ListGroup";
|
||||
export { ListGroup };
|
||||
|
||||
import Row from "react-bootstrap/Row";
|
||||
export { Row };
|
||||
|
||||
import Col from "react-bootstrap/Col";
|
||||
export { Col };
|
||||
@ -0,0 +1,270 @@
|
||||
import * as React from "react";
|
||||
import { getLoadedMonaco } from "../../../monaco-loader";
|
||||
import { withLoadedMonaco } from "./MonacoLoader";
|
||||
|
||||
@withLoadedMonaco
|
||||
export class ControlledMonacoEditor extends React.Component<{
|
||||
value: string;
|
||||
onDidValueChange?: (newValue: string) => void;
|
||||
|
||||
language?: string;
|
||||
theme?: string;
|
||||
}> {
|
||||
private readonly model = getLoadedMonaco().editor.createModel(
|
||||
this.props.value,
|
||||
this.props.language
|
||||
);
|
||||
|
||||
private lastSubscription: monaco.IDisposable | undefined;
|
||||
|
||||
componentDidUpdate(lastProps: this["props"]) {
|
||||
const newOnDidValueChange = this.props.onDidValueChange;
|
||||
if (newOnDidValueChange !== lastProps.onDidValueChange) {
|
||||
if (this.lastSubscription) {
|
||||
this.lastSubscription.dispose();
|
||||
this.lastSubscription = undefined;
|
||||
}
|
||||
if (newOnDidValueChange) {
|
||||
this.lastSubscription = this.model.onDidChangeContent((e) => {
|
||||
newOnDidValueChange(this.model.getValue());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.value !== this.model.getValue()) {
|
||||
this.model.setValue(this.props.value);
|
||||
}
|
||||
if (this.model.getLanguageId() !== this.props.language) {
|
||||
getLoadedMonaco().editor.setModelLanguage(
|
||||
this.model,
|
||||
this.props.language || "plaintext"
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.onDidValueChange) {
|
||||
this.model.setValue(this.props.value);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MonacoEditor
|
||||
readOnly={!this.props.onDidValueChange}
|
||||
model={this.model}
|
||||
theme={this.props.theme}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@withLoadedMonaco
|
||||
export class ControlledMonacoDiffEditor extends React.Component<{
|
||||
originalValue: string;
|
||||
modifiedValue: string;
|
||||
language?: string;
|
||||
}> {
|
||||
private readonly originalModel = getLoadedMonaco().editor.createModel(
|
||||
this.props.originalValue,
|
||||
this.props.language
|
||||
);
|
||||
private readonly modifiedModel = getLoadedMonaco().editor.createModel(
|
||||
this.props.modifiedValue,
|
||||
this.props.language
|
||||
);
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.props.originalValue !== this.originalModel.getValue()) {
|
||||
this.originalModel.setValue(this.props.originalValue);
|
||||
}
|
||||
if (this.originalModel.getLanguageId() !== this.props.language) {
|
||||
getLoadedMonaco().editor.setModelLanguage(
|
||||
this.originalModel,
|
||||
this.props.language || "plaintext"
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.modifiedValue !== this.modifiedModel.getValue()) {
|
||||
this.modifiedModel.setValue(this.props.modifiedValue);
|
||||
}
|
||||
if (this.modifiedModel.getLanguageId() !== this.props.language) {
|
||||
getLoadedMonaco().editor.setModelLanguage(
|
||||
this.modifiedModel,
|
||||
this.props.language || "plaintext"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MonacoDiffEditor
|
||||
originalModel={this.originalModel}
|
||||
modifiedModel={this.modifiedModel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export type MonacoEditorHeight =
|
||||
| { /* Fills the entire space. */ kind: "fill" }
|
||||
| {
|
||||
/* Use the content as height. */ kind: "dynamic";
|
||||
maxHeight?: number;
|
||||
};
|
||||
|
||||
@withLoadedMonaco
|
||||
export class MonacoEditor extends React.Component<
|
||||
{
|
||||
model: monaco.editor.ITextModel;
|
||||
onEditorLoaded?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
|
||||
height?: MonacoEditorHeight;
|
||||
theme?: string;
|
||||
readOnly?: boolean;
|
||||
className?: string;
|
||||
},
|
||||
{ contentHeight: number | undefined }
|
||||
> {
|
||||
public editor: monaco.editor.IStandaloneCodeEditor | undefined;
|
||||
private get height() {
|
||||
if (this.state.contentHeight === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
return Math.min(200, this.state.contentHeight);
|
||||
}
|
||||
private readonly divRef = React.createRef<HTMLDivElement>();
|
||||
private readonly resizeObserver = new ResizeObserver(() => {
|
||||
if (this.editor) {
|
||||
this.editor.layout();
|
||||
}
|
||||
});
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { contentHeight: undefined };
|
||||
}
|
||||
render() {
|
||||
const heightInfo = this.props.height || { kind: "fill" };
|
||||
const height = heightInfo.kind === "fill" ? "100%" : this.height;
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height,
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
}}
|
||||
className={"monaco-editor-react " + this.props.className}
|
||||
ref={this.divRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
const div = this.divRef.current;
|
||||
if (!div) {
|
||||
throw new Error("unexpected");
|
||||
}
|
||||
this.resizeObserver.observe(div);
|
||||
this.editor = getLoadedMonaco().editor.create(div, {
|
||||
model: this.props.model,
|
||||
scrollBeyondLastLine: false,
|
||||
minimap: { enabled: false },
|
||||
automaticLayout: false,
|
||||
theme: this.props.theme,
|
||||
readOnly: this.props.readOnly,
|
||||
});
|
||||
this.editor.onDidContentSizeChange((e) => {
|
||||
this.setState({ contentHeight: e.contentHeight });
|
||||
});
|
||||
if (this.props.onEditorLoaded) {
|
||||
this.props.onEditorLoaded(this.editor);
|
||||
}
|
||||
}
|
||||
componentDidUpdate(oldProps: this["props"]) {
|
||||
if (oldProps.model !== this.props.model) {
|
||||
this.editor!.setModel(this.props.model);
|
||||
}
|
||||
if (oldProps.theme !== this.props.theme && this.props.theme) {
|
||||
getLoadedMonaco().editor.setTheme(this.props.theme);
|
||||
}
|
||||
if (oldProps.readOnly !== this.props.readOnly) {
|
||||
this.editor!.updateOptions({ readOnly: this.props.readOnly });
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (!this.editor) {
|
||||
console.error("unexpected state");
|
||||
} else {
|
||||
this.editor.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@withLoadedMonaco
|
||||
export class MonacoDiffEditor extends React.Component<
|
||||
{
|
||||
originalModel: monaco.editor.ITextModel;
|
||||
modifiedModel: monaco.editor.ITextModel;
|
||||
onEditorLoaded?: (editor: monaco.editor.IStandaloneDiffEditor) => void;
|
||||
/**
|
||||
* Initial theme to be used for rendering.
|
||||
* The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'.
|
||||
* You can create custom themes via `monaco.editor.defineTheme`.
|
||||
* To switch a theme, use `monaco.editor.setTheme`
|
||||
*/
|
||||
theme?: string;
|
||||
},
|
||||
{ contentHeight: number | undefined }
|
||||
> {
|
||||
public editor: monaco.editor.IStandaloneDiffEditor | undefined;
|
||||
|
||||
private readonly divRef = React.createRef<HTMLDivElement>();
|
||||
private readonly resizeObserver = new ResizeObserver(() => {
|
||||
if (this.editor) {
|
||||
this.editor.layout();
|
||||
}
|
||||
});
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { contentHeight: undefined };
|
||||
}
|
||||
render() {
|
||||
const height = "100%";
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height,
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
}}
|
||||
className="monaco-editor-react"
|
||||
ref={this.divRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
const div = this.divRef.current;
|
||||
if (!div) {
|
||||
throw new Error("unexpected");
|
||||
}
|
||||
this.resizeObserver.observe(div);
|
||||
this.editor = getLoadedMonaco().editor.createDiffEditor(div, {
|
||||
scrollBeyondLastLine: false,
|
||||
minimap: { enabled: false },
|
||||
automaticLayout: false,
|
||||
theme: this.props.theme,
|
||||
});
|
||||
this.editor.setModel({
|
||||
original: this.props.originalModel,
|
||||
modified: this.props.modifiedModel,
|
||||
});
|
||||
|
||||
if (this.props.onEditorLoaded) {
|
||||
this.props.onEditorLoaded(this.editor);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (!this.editor) {
|
||||
console.error("unexpected state");
|
||||
} else {
|
||||
this.editor.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import * as React from "react";
|
||||
import { getMonaco, loadMonaco } from "../../../monaco-loader";
|
||||
|
||||
/**
|
||||
* Can be used to render content only when monaco is loaded.
|
||||
*/
|
||||
export class MonacoLoader extends React.Component<
|
||||
{ children: (m: typeof monaco) => React.ReactChild },
|
||||
{ monaco: typeof monaco | undefined }
|
||||
> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { monaco: getMonaco() };
|
||||
if (!this.state.monaco) {
|
||||
loadMonaco().then((monaco) => {
|
||||
this.setState({
|
||||
monaco,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.state.monaco) {
|
||||
return null;
|
||||
}
|
||||
return this.props.children(this.state.monaco);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Decorates a component so that it only gets mounted when monaco is loaded.
|
||||
*/
|
||||
export function withLoadedMonaco<TProps>(
|
||||
Component: React.FunctionComponent<TProps> | React.ComponentClass<TProps>
|
||||
): any {
|
||||
return (props: TProps) => (
|
||||
<MonacoLoader>{() => <Component {...props} />}</MonacoLoader>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue