mirror of
https://github.com/microsoft/monaco-editor.git
synced 2024-11-25 16:35:44 +08:00
Rewrites website
This commit is contained in:
Henning Dieterichs
parent
5eff543347
commit
10577a0641
14
.github/workflows/publish-website.sh
vendored
14
.github/workflows/publish-website.sh
vendored
@ -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
|
||||
39
.github/workflows/website.yml
vendored
39
.github/workflows/website.yml
vendored
@ -2,8 +2,8 @@ name: Publish Website
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
tags:
|
||||
- 'v*'
|
||||
# enable users to manually trigger with workflow_dispatch
|
||||
workflow_dispatch: {}
|
||||
|
||||
@ -12,9 +12,9 @@ jobs:
|
||||
name: Publish Website
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@dc323e67f16fb5f7663d20ff7941f27f5809e9b6 # pin@v2
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
- uses: actions/setup-node@1f8c6b94b26d0feae1e387ca63ccbdc44d27b561 # pin@v2
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@ -23,17 +23,30 @@ jobs:
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-cacheNodeModules-${{ hashFiles('**/package-lock.json') }}
|
||||
restore-keys: ${{ runner.os }}-cacheNodeModules-
|
||||
key: ${{ runner.os }}-cacheNodeModules2-${{ hashFiles('**/package-lock.json') }}
|
||||
restore-keys: ${{ runner.os }}-cacheNodeModules2-
|
||||
|
||||
- name: Install node modules (1)
|
||||
- name: execute `npm ci` (1)
|
||||
if: ${{ steps.cacheNodeModules.outputs.cache-hit != 'true' }}
|
||||
run: npm ci
|
||||
|
||||
- name: Build website
|
||||
run: npm run build-website
|
||||
- name: Build
|
||||
run: npm run release
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
run: ./.github/workflows/publish-website.sh
|
||||
- name: Install website node modules
|
||||
working-directory: website
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Install most recent version of monaco-editor
|
||||
working-directory: website
|
||||
run: yarn add monaco-editor
|
||||
|
||||
- name: Build website
|
||||
working-directory: website
|
||||
run: yarn run build
|
||||
|
||||
- name: Upload website to github pages
|
||||
uses: peaceiris/actions-gh-pages@bd8c6b06eba6b3d25d72b7a1767993c0aeee42e7 # pin@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./website/dist
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,3 +6,4 @@
|
||||
/test/smoke/vite/dist/**
|
||||
/test/smoke/parcel/dist/**
|
||||
/test/smoke/parcel/.cache/**
|
||||
**/dist/
|
||||
|
||||
7
.vscode/launch.json
vendored
7
.vscode/launch.json
vendored
@ -4,6 +4,13 @@
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch Chrome",
|
||||
"request": "launch",
|
||||
"type": "chrome",
|
||||
"url": "http://localhost:8081",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "pwa-node",
|
||||
"request": "launch",
|
||||
|
||||
53
build/check-samples.ts
Normal file
53
build/check-samples.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -324,7 +324,7 @@ function releaseDTS() {
|
||||
writeFiles([monacodts, editorapidts], `release`);
|
||||
|
||||
fs.writeFileSync('website/playground/monaco.d.ts.txt', contents);
|
||||
fs.writeFileSync('website/typedoc/monaco.d.ts', contents);
|
||||
// fs.writeFileSync('website/typedoc/monaco.d.ts', contents);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
163
build/website.ts
163
build/website.ts
@ -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'));
|
||||
}
|
||||
3914
package-lock.json
generated
3914
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -8,7 +8,6 @@
|
||||
"author": "Microsoft Corporation",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build-website": "ts-node ./build/website && npm run typedoc",
|
||||
"import-typescript": "ts-node ./build/importTypescript",
|
||||
"playwright-install": "node ./node_modules/playwright/install.js",
|
||||
"playwright-install-deps": "playwright install-deps",
|
||||
@ -24,11 +23,11 @@
|
||||
"package-for-smoketest-vite": "ts-node ./test/smoke/package-vite",
|
||||
"smoketest": "node ./test/smoke/runner.js",
|
||||
"smoketest-debug": "node ./test/smoke/runner.js --debug-tests",
|
||||
"test": "mocha test/unit/all.js",
|
||||
"test": "mocha test/unit/all.js && ts-node ./build/check-samples",
|
||||
"deps-all-remove": "ts-node ./build/npm/removeAll",
|
||||
"deps-all-install": "ts-node ./build/npm/installAll",
|
||||
"typedoc": "cd website/typedoc && \"../../node_modules/.bin/typedoc\" --options ./typedoc.json",
|
||||
"watch": "tsc -w -p ./src"
|
||||
"watch": "tsc -w -p ./src",
|
||||
"update-actions": "pin-github-action ./.github/workflows/website.yml"
|
||||
},
|
||||
"typings": "./esm/vs/editor/editor.api.d.ts",
|
||||
"module": "./esm/vs/editor/editor.main.js",
|
||||
@ -59,8 +58,8 @@
|
||||
"style-loader": "^3.3.1",
|
||||
"terser": "^5.14.2",
|
||||
"ts-node": "^10.6.0",
|
||||
"typedoc": "^0.22.11",
|
||||
"typescript": "4.5.5",
|
||||
"typedoc": "^0.23.10",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.1.8",
|
||||
"vscode-css-languageservice": "5.4.1",
|
||||
"vscode-html-languageservice": "4.2.4",
|
||||
@ -74,5 +73,10 @@
|
||||
"alias": {
|
||||
"process": false,
|
||||
"buffer": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/shelljs": "^0.8.11",
|
||||
"pin-github-action": "^1.8.0",
|
||||
"shelljs": "^0.8.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"moduleResolution": "node",
|
||||
"outDir": "../out/amd",
|
||||
"strict": true,
|
||||
"target": "es5"
|
||||
"target": "es5",
|
||||
"sourceMap": true
|
||||
}
|
||||
}
|
||||
|
||||
53
website/.gitignore
vendored
53
website/.gitignore
vendored
@ -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
|
||||
|
||||
6
website/.prettierrc.json
Normal file
6
website/.prettierrc.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"useTabs": true
|
||||
}
|
||||
302
website/all.css
302
website/all.css
@ -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;
|
||||
}
|
||||
}
|
||||
BIN
website/fork.png
BIN
website/fork.png
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);
|
||||
}
|
||||
6806
website/lib/bootstrap-cosmo.css
vendored
6806
website/lib/bootstrap-cosmo.css
vendored
File diff suppressed because it is too large
Load Diff
9
website/lib/bootstrap-responsive.min.css
vendored
9
website/lib/bootstrap-responsive.min.css
vendored
File diff suppressed because one or more lines are too long
6
website/lib/bootstrap.min.js
vendored
6
website/lib/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
5
website/lib/jquery-1.9.1.min.js
vendored
5
website/lib/jquery-1.9.1.min.js
vendored
File diff suppressed because one or more lines are too long
58
website/package.json
Normal file
58
website/package.json
Normal file
@ -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 ---- */
|
||||
98
website/src/monaco-loader.ts
Normal file
98
website/src/monaco-loader.ts
Normal file
@ -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,
|
||||
};
|
||||
}
|
||||
49
website/src/runner/index.ts
Normal file
49
website/src/runner/index.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
35
website/src/runner/style.scss
Normal file
35
website/src/runner/style.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
21
website/src/shared.ts
Normal file
21
website/src/shared.ts
Normal file
@ -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;
|
||||
}
|
||||
13
website/src/types.d.ts
vendored
Normal file
13
website/src/types.d.ts
vendored
Normal file
@ -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;
|
||||
}
|
||||
6
website/src/website/bootstrap.scss
vendored
Normal file
6
website/src/website/bootstrap.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "~bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
.btn-light {
|
||||
--bs-btn-hover-bg: undefined !important;
|
||||
}
|
||||
1
website/src/website/code-oss.svg
Normal file
1
website/src/website/code-oss.svg
Normal file
@ -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 |
75
website/src/website/components/Nav.tsx
Normal file
75
website/src/website/components/Nav.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
11
website/src/website/components/Page.tsx
Normal file
11
website/src/website/components/Page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
23
website/src/website/components/Radio.tsx
Normal file
23
website/src/website/components/Radio.tsx
Normal file
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
75
website/src/website/components/Select.tsx
Normal file
75
website/src/website/components/Select.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
21
website/src/website/components/TextBox.tsx
Normal file
21
website/src/website/components/TextBox.tsx
Normal file
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
32
website/src/website/components/bootstrap.tsx
Normal file
32
website/src/website/components/bootstrap.tsx
Normal file
@ -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 };
|
||||
270
website/src/website/components/monaco/MonacoEditor.tsx
Normal file
270
website/src/website/components/monaco/MonacoEditor.tsx
Normal file
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
38
website/src/website/components/monaco/MonacoLoader.tsx
Normal file
38
website/src/website/components/monaco/MonacoLoader.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -1,16 +1,15 @@
|
||||
|
||||
/*
|
||||
© Microsoft. All rights reserved.
|
||||
|
||||
This library is supported for use in Windows Tailored Apps only.
|
||||
|
||||
Build: 6.2.8100.0
|
||||
Version: 0.5
|
||||
Build: 6.2.8100.0
|
||||
Version: 0.5
|
||||
*/
|
||||
|
||||
// Here are some inserted lines
|
||||
// with some extra comments
|
||||
|
||||
|
||||
(function (global, undefined) {
|
||||
"use strict";
|
||||
var definedVariable = {};
|
||||
@ -32,7 +31,7 @@
|
||||
properties = properties || {};
|
||||
properties[key] = member;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
target[key] = member;
|
||||
}
|
||||
@ -76,7 +75,7 @@
|
||||
for (var i = 0, len = namespaceFragments.length; i < len; i++) {
|
||||
var namespaceName = namespaceFragments[i];
|
||||
if (!currentNamespace[namespaceName]) {
|
||||
Object.defineProperty(currentNamespace, namespaceName,
|
||||
Object.defineProperty(currentNamespace, namespaceName,
|
||||
{ value: {}, writable: false, enumerable: true, configurable: true }
|
||||
);
|
||||
}
|
||||
@ -210,4 +209,4 @@
|
||||
|
||||
})(WinJS);
|
||||
|
||||
})(this);
|
||||
})(this);
|
||||
@ -1,11 +1,10 @@
|
||||
|
||||
/*
|
||||
© Microsoft. All rights reserved.
|
||||
|
||||
This library is supported for use in Windows Tailored Apps only.
|
||||
|
||||
Build: 6.2.8100.0
|
||||
Version: 0.5
|
||||
Build: 6.2.8100.0
|
||||
Version: 0.5
|
||||
*/
|
||||
|
||||
(function (global, undefined) {
|
||||
@ -29,7 +28,7 @@
|
||||
properties = properties || {};
|
||||
properties[key] = member;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// These next lines will be deleted
|
||||
if (!enumerable) {
|
||||
@ -79,7 +78,7 @@
|
||||
for (var i = 0, len = namespaceFragments.length; i < len; i++) {
|
||||
var namespaceName = namespaceFragments[i];
|
||||
if (!currentNamespace[namespaceName]) {
|
||||
Object.defineProperty(currentNamespace, namespaceName,
|
||||
Object.defineProperty(currentNamespace, namespaceName,
|
||||
{ value: {}, writable: false, enumerable: true, configurable: true }
|
||||
);
|
||||
}
|
||||
@ -213,4 +212,4 @@
|
||||
|
||||
})(WinJS);
|
||||
|
||||
})(this);
|
||||
})(this);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user