diff --git a/test/dev-setup.js b/test/dev-setup.js index 37256763..14923ba8 100644 --- a/test/dev-setup.js +++ b/test/dev-setup.js @@ -8,6 +8,11 @@ port = ':' + port; } DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/')); + + var bases = document.getElementsByTagName('base'); + if (bases.length > 0) { + DIRNAME = DIRNAME + '/' + bases[0].getAttribute('href'); + } } diff --git a/test/index.html b/test/index.html index 3308e1fa..d78eb4f3 100644 --- a/test/index.html +++ b/test/index.html @@ -7,11 +7,11 @@ -

Monaco Editor (running from multiple sources)

- Jump to: [SMOKETEST]  |  +[PLAYGROUND] + |  [fixed element]  |  [scrollable body] diff --git a/test/playground.generated/creating-the-diffeditor-hello-diff-world.html b/test/playground.generated/creating-the-diffeditor-hello-diff-world.html new file mode 100644 index 00000000..e40845d8 --- /dev/null +++ b/test/playground.generated/creating-the-diffeditor-hello-diff-world.html @@ -0,0 +1,53 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-diffeditor-inline-diff-example.html b/test/playground.generated/creating-the-diffeditor-inline-diff-example.html new file mode 100644 index 00000000..655644cf --- /dev/null +++ b/test/playground.generated/creating-the-diffeditor-inline-diff-example.html @@ -0,0 +1,59 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-diffeditor-multi-line-example.html b/test/playground.generated/creating-the-diffeditor-multi-line-example.html new file mode 100644 index 00000000..6a85f538 --- /dev/null +++ b/test/playground.generated/creating-the-diffeditor-multi-line-example.html @@ -0,0 +1,56 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html b/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html new file mode 100644 index 00000000..78d6332e --- /dev/null +++ b/test/playground.generated/creating-the-diffeditor-navigating-a-diff.html @@ -0,0 +1,64 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-editor-editor-basic-options.html b/test/playground.generated/creating-the-editor-editor-basic-options.html new file mode 100644 index 00000000..610c72fa --- /dev/null +++ b/test/playground.generated/creating-the-editor-editor-basic-options.html @@ -0,0 +1,64 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-editor-hard-wrapping.html b/test/playground.generated/creating-the-editor-hard-wrapping.html new file mode 100644 index 00000000..6e138ace --- /dev/null +++ b/test/playground.generated/creating-the-editor-hard-wrapping.html @@ -0,0 +1,62 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-editor-hello-world.html b/test/playground.generated/creating-the-editor-hello-world.html new file mode 100644 index 00000000..5cbcec9f --- /dev/null +++ b/test/playground.generated/creating-the-editor-hello-world.html @@ -0,0 +1,54 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html b/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html new file mode 100644 index 00000000..d0091ede --- /dev/null +++ b/test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html @@ -0,0 +1,84 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+  margin: 0;
+  padding: 3em 6em;
+  font-family: tahoma, arial, sans-serif;
+  color: #000;
+}
+
+#navigation a {
+  font-weight: bold;
+  text-decoration: none !important;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.7em;
+}
+
+h1:before, h2:before {
+  content: "some contents";
+}
+
+code {
+  font-family: courier, monospace;
+  font-size: 80%;
+  color: #418A8A;
+}
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/customizing-the-appearence-exposed-css-classes.html b/test/playground.generated/customizing-the-appearence-exposed-css-classes.html new file mode 100644 index 00000000..795b5acb --- /dev/null +++ b/test/playground.generated/customizing-the-appearence-exposed-css-classes.html @@ -0,0 +1,84 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/customizing-the-appearence-scrollbars.html b/test/playground.generated/customizing-the-appearence-scrollbars.html new file mode 100644 index 00000000..03386631 --- /dev/null +++ b/test/playground.generated/customizing-the-appearence-scrollbars.html @@ -0,0 +1,85 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/customizing-the-appearence-tokens-and-colors.html b/test/playground.generated/customizing-the-appearence-tokens-and-colors.html new file mode 100644 index 00000000..05aa974a --- /dev/null +++ b/test/playground.generated/customizing-the-appearence-tokens-and-colors.html @@ -0,0 +1,63 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/extending-language-services-completion-provider-example.html b/test/playground.generated/extending-language-services-completion-provider-example.html new file mode 100644 index 00000000..70f05df0 --- /dev/null +++ b/test/playground.generated/extending-language-services-completion-provider-example.html @@ -0,0 +1,85 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/extending-language-services-configure-javascript-defaults.html b/test/playground.generated/extending-language-services-configure-javascript-defaults.html new file mode 100644 index 00000000..31ec61ff --- /dev/null +++ b/test/playground.generated/extending-language-services-configure-javascript-defaults.html @@ -0,0 +1,85 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/extending-language-services-configure-json-defaults.html b/test/playground.generated/extending-language-services-configure-json-defaults.html new file mode 100644 index 00000000..6a46dbda --- /dev/null +++ b/test/playground.generated/extending-language-services-configure-json-defaults.html @@ -0,0 +1,84 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/extending-language-services-custom-languages.html b/test/playground.generated/extending-language-services-custom-languages.html new file mode 100644 index 00000000..428d1291 --- /dev/null +++ b/test/playground.generated/extending-language-services-custom-languages.html @@ -0,0 +1,159 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/extending-language-services-hover-provider-example.html b/test/playground.generated/extending-language-services-hover-provider-example.html new file mode 100644 index 00000000..02a2c2e1 --- /dev/null +++ b/test/playground.generated/extending-language-services-hover-provider-example.html @@ -0,0 +1,95 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/index.html b/test/playground.generated/index.html new file mode 100644 index 00000000..2fe1bce9 --- /dev/null +++ b/test/playground.generated/index.html @@ -0,0 +1,34 @@ + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples

+Creating the editor > Hello world!
+Creating the editor > Editor basic options
+Creating the editor > Hard wrapping
+Creating the editor > Syntax highlighting for HTML elements
+Interacting with the editor > Adding a command to an editor instance
+Interacting with the editor > Adding an action to an editor instance
+Interacting with the editor > Revealing a position
+Interacting with the editor > Rendering glyphs in the margin
+Interacting with the editor > Line and Inline decorations
+Interacting with the editor > Customizing the line numbers
+Interacting with the editor > Listening to mouse events
+Interacting with the editor > Listening to key events
+Customizing the appearence > Exposed CSS classes
+Customizing the appearence > Scrollbars
+Customizing the appearence > Tokens and colors
+Creating the DiffEditor > Hello diff world!
+Creating the DiffEditor > Multi-line example
+Creating the DiffEditor > Inline Diff Example
+Creating the DiffEditor > Navigating a Diff
+Extending Language Services > Custom languages
+Extending Language Services > Completion provider example
+Extending Language Services > Hover provider example
+Extending Language Services > Configure JavaScript defaults
+Extending Language Services > Configure JSON defaults + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html b/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html new file mode 100644 index 00000000..a09a7b4b --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html @@ -0,0 +1,77 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html b/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html new file mode 100644 index 00000000..a7344362 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html @@ -0,0 +1,119 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html b/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html new file mode 100644 index 00000000..86c385c5 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html @@ -0,0 +1,71 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html b/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html new file mode 100644 index 00000000..ae4175ee --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html @@ -0,0 +1,78 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html b/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html new file mode 100644 index 00000000..7e4f2a09 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-listening-to-key-events.html @@ -0,0 +1,56 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html b/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html new file mode 100644 index 00000000..035b5e95 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html @@ -0,0 +1,166 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
Last 3 events:
+
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html b/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html new file mode 100644 index 00000000..e64972a9 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html @@ -0,0 +1,81 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/playground.generated/interacting-with-the-editor-revealing-a-position.html b/test/playground.generated/interacting-with-the-editor-revealing-a-position.html new file mode 100644 index 00000000..1464e5c1 --- /dev/null +++ b/test/playground.generated/interacting-with-the-editor-revealing-a-position.html @@ -0,0 +1,85 @@ + + + + + + + + + + +[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples + +
+ +
+
+ + +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/website/monarch.html b/website/monarch.html index 58058fd0..f44f9a63 100644 --- a/website/monarch.html +++ b/website/monarch.html @@ -4304,7 +4304,6 @@ return { } }); - \ No newline at end of file diff --git a/website/playground.html b/website/playground.html index a2ea4ec3..c727bdf8 100644 --- a/website/playground.html +++ b/website/playground.html @@ -74,7 +74,7 @@ } }); - + \ No newline at end of file diff --git a/website/playground/new-samples/all.js b/website/playground/new-samples/all.js new file mode 100644 index 00000000..336632cb --- /dev/null +++ b/website/playground/new-samples/all.js @@ -0,0 +1,156 @@ +(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 CSS classes", + id: "customizing-the-appearence-exposed-css-classes", + path: "customizing-the-appearence/exposed-css-classes" + }, + { + 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: "Hover provider example", + id: "extending-language-services-hover-provider-example", + path: "extending-language-services/hover-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; +} + +})(); diff --git a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.css b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js new file mode 100644 index 00000000..d4505ec0 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js @@ -0,0 +1,8 @@ +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 +}); diff --git a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.css b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js new file mode 100644 index 00000000..8d106f20 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js @@ -0,0 +1,14 @@ +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 +}); diff --git a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.css b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js new file mode 100644 index 00000000..fff21e84 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js @@ -0,0 +1,11 @@ +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 +}); diff --git a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.css b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js new file mode 100644 index 00000000..15e46342 --- /dev/null +++ b/website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js @@ -0,0 +1,19 @@ +// The diff editor offers a navigator to jump between changes. Once the diff is computed the next() and previous() method allow navigation. By default setting the selection in the editor manually resets the navigation state. +var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain"); +var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain"); + + +var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container")); +diffEditor.setModel({ + original: originalModel, + modified: modifiedModel +}); + +var navi = monaco.editor.createDiffNavigator(diffEditor, { + followsCaret: true, // resets the navigator state when the user selects something in the editor + ignoreCharChanges: true // jump from line to line +}); + +window.setInterval(function() { + navi.next(); +}, 2000); diff --git a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.css b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js new file mode 100644 index 00000000..615f2208 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js @@ -0,0 +1,19 @@ +// Through the options literal, the behaviour of the editor can be easily customized. +// Here are a few examples of config options that can be passed to the editor. +// You can also call editor.updateOptions at any time to change the options. + +var editor = monaco.editor.create(document.getElementById("container"), { + value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line", + language: "javascript", + + lineNumbers: false, + roundedSelection: false, + scrollBeyondLastLine: false, + readOnly: false, + theme: "vs-dark", +}); +setTimeout(function() { + editor.updateOptions({ + lineNumbers: true + }); +}, 2000); diff --git a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.css b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js new file mode 100644 index 00000000..f92df878 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js @@ -0,0 +1,17 @@ +var jsCode = "// jqeuery excerpt:\n// 1 2 3 4\n//34567890123456789012345678901234567890\n\/*!\r\n * Sizzle CSS Selector Engine v2.3.0\r\n * https:\/\/sizzlejs.com\/\r\n *\r\n * Copyright jQuery Foundation and other contributors\r\n * Released under the MIT license\r\n * http:\/\/jquery.org\/license\r\n *\r\n * Date: 2016-01-04\r\n *\/\r\n(function( window ) {\r\n\r\nvar i,\r\n\tsupport,\r\n\tExpr,\r\n\tgetText,\r\n\tisXML,\r\n\ttokenize,\r\n\tcompile,\r\n\tselect,\r\n\toutermostContext,\r\n\tsortInput,\r\n\thasDuplicate,\r\n\r\n\t\/\/ Local document vars\r\n\tsetDocument,\r\n\tdocument,\r\n\tdocElem,\r\n\tdocumentIsHTML,\r\n\trbuggyQSA,\r\n\trbuggyMatches,\r\n\tmatches,\r\n\tcontains,\r\n\r\n\t\/\/ Instance-specific data\r\n\texpando = \"sizzle\" + 1 * new Date(),\r\n\tpreferredDoc = window.document,\r\n\tdirruns = 0,\r\n\tdone = 0,\r\n\tclassCache = createCache(),\r\n\ttokenCache = createCache(),\r\n\tcompilerCache = createCache(),\r\n\tsortOrder = function( a, b ) {\r\n\t\tif ( a === b ) {\r\n\t\t\thasDuplicate = true;\r\n\t\t}\r\n\t\treturn 0;\r\n\t},\r\n\r\n\t\/\/ Instance methods\r\n\thasOwn = ({}).hasOwnProperty,\r\n\tarr = [],\r\n\tpop = arr.pop,\r\n\tpush_native = arr.push,\r\n\tpush = arr.push,\r\n\tslice = arr.slice,\r\n\t\/\/ Use a stripped-down indexOf as it\'s faster than native\r\n\t\/\/ https:\/\/jsperf.com\/thor-indexof-vs-for\/5\r\n\tindexOf = function( list, elem ) {\r\n\t\tvar i = 0,\r\n\t\t\tlen = list.length;\r\n\t\tfor ( ; i < len; i++ ) {\r\n\t\t\tif ( list[i] === elem ) {\r\n\t\t\t\treturn i;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn -1;\r\n\t},\r\n\r\n\tbooleans = \"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped\",\r\n\r\n\t\/\/ Regular expressions\r\n\r\n\t\/\/ http:\/\/www.w3.org\/TR\/css3-selectors\/#whitespace\r\n\twhitespace = \"[\\\\x20\\\\t\\\\r\\\\n\\\\f]\",\r\n\r\n\t\/\/ http:\/\/www.w3.org\/TR\/CSS21\/syndata.html#value-def-identifier\r\n\tidentifier = \"(?:\\\\\\\\.|[\\\\w-]|[^\\0-\\\\xa0])+\",\r\n\r\n\t\/\/ Attribute selectors: http:\/\/www.w3.org\/TR\/selectors\/#attribute-selectors\r\n\tattributes = \"\\\\[\" + whitespace + \"*(\" + identifier + \")(?:\" + whitespace +\r\n\t\t\/\/ Operator (capture 2)\r\n\t\t\"*([*^$|!~]?=)\" + whitespace +\r\n\t\t\/\/ \"Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]\"\r\n\t\t\"*(?:\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\\"((?:\\\\\\\\.|[^\\\\\\\\\\\"])*)\\\"|(\" + identifier + \"))|)\" + whitespace +\r\n\t\t\"*\\\\]\",\r\n\r\n\tpseudos = \":(\" + identifier + \")(?:\\\\((\" +\r\n\t\t\/\/ To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:\r\n\t\t\/\/ 1. quoted (capture 3; capture 4 or capture 5)\r\n\t\t\"(\'((?:\\\\\\\\.|[^\\\\\\\\\'])*)\'|\\\"((?:\\\\\\\\.|[^\\\\\\\\\\\"])*)\\\")|\" +\r\n\t\t\/\/ 2. simple (capture 6)\r\n\t\t\"((?:\\\\\\\\.|[^\\\\\\\\()[\\\\]]|\" + attributes + \")*)|\" +\r\n\t\t\/\/ 3. anything else (capture 2)\r\n\t\t\".*\" +\r\n\t\t\")\\\\)|)\",\r\n\r\n\t\/\/ Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter\r\n\trwhitespace = new RegExp( whitespace + \"+\", \"g\" ),\r\n\trtrim = new RegExp( \"^\" + whitespace + \"+|((?:^|[^\\\\\\\\])(?:\\\\\\\\.)*)\" + whitespace + \"+$\", \"g\" ),\r\n\r\n\trcomma = new RegExp( \"^\" + whitespace + \"*,\" + whitespace + \"*\" ),\r\n\trcombinators = new RegExp( \"^\" + whitespace + \"*([>+~]|\" + whitespace + \")\" + whitespace + \"*\" ),\r\n\r\n\trattributeQuotes = new RegExp( \"=\" + whitespace + \"*([^\\\\]\'\\\"]*?)\" + whitespace + \"*\\\\]\", \"g\" ),\r\n\r\n\trpseudo = new RegExp( pseudos ),\r\n\tridentifier = new RegExp( \"^\" + identifier + \"$\" ),\r\n\r\n\tmatchExpr = {\r\n\t\t\"ID\": new RegExp( \"^#(\" + identifier + \")\" ),\r\n\t\t\"CLASS\": new RegExp( \"^\\\\.(\" + identifier + \")\" ),\r\n\t\t\"TAG\": new RegExp( \"^(\" + identifier + \"|[*])\" ),\r\n\t\t\"ATTR\": new RegExp( \"^\" + attributes ),\r\n\t\t\"PSEUDO\": new RegExp( \"^\" + pseudos ),\r\n\t\t\"CHILD\": new RegExp( \"^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\\\(\" + whitespace +\r\n\t\t\t\"*(even|odd|(([+-]|)(\\\\d*)n|)\" + whitespace + \"*(?:([+-]|)\" + whitespace +\r\n\t\t\t\"*(\\\\d+)|))\" + whitespace + \"*\\\\)|)\", \"i\" ),\r\n\t\t\"bool\": new RegExp( \"^(?:\" + booleans + \")$\", \"i\" ),\r\n\t\t\/\/ For use in libraries implementing .is()\r\n\t\t\/\/ We use this for POS matching in `select`\r\n\t\t\"needsContext\": new RegExp( \"^\" + whitespace + \"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\\\(\" +\r\n\t\t\twhitespace + \"*((?:-\\\\d)?\\\\d*)\" + whitespace + \"*\\\\)|)(?=[^-]|$)\", \"i\" )\r\n\t},\r\n\r\n\trinputs = \/^(?:input|select|textarea|button)$\/i,\r\n\trheader = \/^h\\d$\/i,\r\n\r\n\trnative = \/^[^{]+\\{\\s*\\[native \\w\/,\r\n\r\n\t\/\/ Easily-parseable\/retrievable ID or TAG or CLASS selectors\r\n\trquickExpr = \/^(?:#([\\w-]+)|(\\w+)|\\.([\\w-]+))$\/,\r\n\r\n\trsibling = \/[+~]\/,\r\n\r\n\t\/\/ CSS escapes\r\n\t\/\/ http:\/\/www.w3.org\/TR\/CSS21\/syndata.html#escaped-characters\r\n\trunescape = new RegExp( \"\\\\\\\\([\\\\da-f]{1,6}\" + whitespace + \"?|(\" + whitespace + \")|.)\", \"ig\" ),\r\n\tfunescape = function( _, escaped, escapedWhitespace ) {\r\n\t\tvar high = \"0x\" + escaped - 0x10000;\r\n\t\t\/\/ NaN means non-codepoint\r\n\t\t\/\/ Support: Firefox<24\r\n\t\t\/\/ Workaround erroneous numeric interpretation of +\"0x\"\r\n\t\treturn high !== high || escapedWhitespace ?\r\n\t\t\tescaped :\r\n\t\t\thigh < 0 ?\r\n\t\t\t\t\/\/ BMP codepoint\r\n\t\t\t\tString.fromCharCode( high + 0x10000 ) :\r\n\t\t\t\t\/\/ Supplemental Plane codepoint (surrogate pair)\r\n\t\t\t\tString.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );\r\n\t},\r\n\r\n\t\/\/ CSS string\/identifier serialization\r\n\t\/\/ https:\/\/drafts.csswg.org\/cssom\/#common-serializing-idioms\r\n\trcssescape = \/([\\0-\\x1f\\x7f]|^-?\\d)|^-$|[^\\x80-\\uFFFF\\w-]\/g,\r\n\tfcssescape = function( ch, asCodePoint ) {\r\n\t\tif ( asCodePoint ) {\r\n\r\n\t\t\t\/\/ U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER\r\n\t\t\tif ( ch === \"\\0\" ) {\r\n\t\t\t\treturn \"\\uFFFD\";\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Control characters and (dependent upon position) numbers get escaped as code points\r\n\t\t\treturn ch.slice( 0, -1 ) + \"\\\\\" + ch.charCodeAt( ch.length - 1 ).toString( 16 ) + \" \";\r\n\t\t}\r\n\r\n\t\t\/\/ Other potentially-special ASCII characters get backslash-escaped\r\n\t\treturn \"\\\\\" + ch;\r\n\t},\r\n\r\n\t\/\/ Used for iframes\r\n\t\/\/ See setDocument()\r\n\t\/\/ Removing the function wrapper causes a \"Permission Denied\"\r\n\t\/\/ error in IE\r\n\tunloadHandler = function() {\r\n\t\tsetDocument();\r\n\t},\r\n\r\n\tdisabledAncestor = addCombinator(\r\n\t\tfunction( elem ) {\r\n\t\t\treturn elem.disabled === true;\r\n\t\t},\r\n\t\t{ dir: \"parentNode\", next: \"legend\" }\r\n\t);})"; + +var editor = monaco.editor.create(document.getElementById("container"), { + value: jsCode, + language: "javascript", + + // If `wrappingColumn` is -1, then no wrapping occurs and + // long lines are rendered on one line. However, this might + // mean that not all code is rendered (... may be used). + // If `wrappingColumn` is 0, then viewport width wrapping is set + // If `wrappingColumn` is > 0, then the lines will wrap at its value + // Defaults to 300 + wrappingColumn: 40, + + // try "same", "indent" or "none" + wrappingIndent: "indent" +}); diff --git a/website/playground/new-samples/creating-the-editor/hello-world/sample.css b/website/playground/new-samples/creating-the-editor/hello-world/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/creating-the-editor/hello-world/sample.html b/website/playground/new-samples/creating-the-editor/hello-world/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/hello-world/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/creating-the-editor/hello-world/sample.js b/website/playground/new-samples/creating-the-editor/hello-world/sample.js new file mode 100644 index 00000000..6e48feb7 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/hello-world/sample.js @@ -0,0 +1,9 @@ +// The Monaco Editor can be easily created, given an +// empty container and an options literal. +// Two members of the literal are "value" and "language". +// The editor takes the full size of its container. + +monaco.editor.create(document.getElementById("container"), { + value: "function hello() {\n\talert('Hello world!');\n}", + language: "javascript" +}); diff --git a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css @@ -0,0 +1 @@ + diff --git a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html new file mode 100644 index 00000000..93bf0850 --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html @@ -0,0 +1,35 @@ +
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+  margin: 0;
+  padding: 3em 6em;
+  font-family: tahoma, arial, sans-serif;
+  color: #000;
+}
+
+#navigation a {
+  font-weight: bold;
+  text-decoration: none !important;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.7em;
+}
+
+h1:before, h2:before {
+  content: "some contents";
+}
+
+code {
+  font-family: courier, monospace;
+  font-size: 80%;
+  color: #418A8A;
+}
+
diff --git a/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js new file mode 100644 index 00000000..ab0d247e --- /dev/null +++ b/website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js @@ -0,0 +1,4 @@ +// The colorizeElement-function will read the data-lang-attribute +// from the element to select the correct language mode. In this +// sample it is text/css. +monaco.editor.colorizeElement(document.getElementById('code')); diff --git a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css new file mode 100644 index 00000000..960a97b0 --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css @@ -0,0 +1,32 @@ +.monaco-editor, .monaco-editor-background { + background: #EDF9FA; +} + +/* Cursor */ +.monaco-editor .cursor { + background: darkred !important; +} + +/* Current line */ +.monaco-editor .current-line { + background: rgba(0, 0, 255, 0.1); +} + +/* Line Numbers */ +.monaco-editor .line-numbers { + background-color: #EDF9FA; + color: green; +} + +/* Line Decorations */ +.monaco-editor .lines-decorations { + background-color: #EDF9FA; +} + +/* Selection */ +.monaco-editor .view-overlays.focused .selected-text { + background: rgba(128, 0, 0, 0.2) !important; +} +.monaco-editor .view-overlays .selected-text { + background: rgba(128, 0, 0, 0.1) !important; +} diff --git a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js new file mode 100644 index 00000000..fe66f639 --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js @@ -0,0 +1,7 @@ +// The editor exposes a set of CSS classes that can be overwritten. +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 +}); diff --git a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css new file mode 100644 index 00000000..356cacdd --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css @@ -0,0 +1,10 @@ +/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */ +.monaco-editor .monaco-scrollable-element .scrollbar.horizontal, +.monaco-editor .decorationsOverviewRuler, +.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background { + background: rgba(230, 230, 230, 255); +} +/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */ +.monaco-editor .monaco-scrollable-element .scrollbar.vertical { + background: rgba(0, 0, 0, 0); +} diff --git a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js new file mode 100644 index 00000000..0d1843ec --- /dev/null +++ b/website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js @@ -0,0 +1,30 @@ +// Remember to check out the CSS too! +var htmlCode = "\n\n \n \n