-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a simple form with Monaco Editor. No way to communicate with th…
…e editor yet.
- Loading branch information
Showing
38 changed files
with
1,466 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
src/app/dev/DevToys.MonacoEditor/CodeEditor/CodeEditor.Wasm.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| (function() | ||
| { | ||
| //Debug.log("Create dynamic style element"); | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.id='dynamic'; | ||
| head.appendChild(style); | ||
|
|
||
| //Debug.log("Starting Monaco Load"); | ||
|
|
||
| var editor; | ||
| var model; | ||
| var contexts = {}; | ||
| window.contexts = {}; | ||
| var decorations = []; | ||
| window.decorations = []; | ||
| var modifingSelection = false; // Supress updates to selection when making edits. | ||
| window.modifyingSelection = false; | ||
|
|
||
| require.config({ paths: { 'vs': '{UNO_BOOTSTRAP_WEBAPP_BASE_PATH}{UNO_BOOTSTRAP_APP_BASE}/devtoys.monacoeditor/monaco-editor/min/vs' } }); | ||
| require( | ||
| ['vs/editor/editor.main'], | ||
| function () | ||
| { | ||
| //Debug.log("Grabbing Monaco Options"); | ||
|
|
||
| //var opt = {}; | ||
| //try | ||
| //{ | ||
| // opt = getOptions(); | ||
| //} | ||
| //catch(err) | ||
| //{ | ||
| // //Debug.log("Unable to read options - " + err); | ||
| //} | ||
|
|
||
| //Debug.log("Getting Parent Text value"); | ||
| //opt["value"] = getParentValue("Text"); | ||
|
|
||
| //Debug.log("Getting Host container"); | ||
| //Debug.log("Creating Editor"); | ||
| const editor = monaco.editor.create(element, null /* opt */); | ||
| window.editor = editor; | ||
|
|
||
| //Debug.log("Getting Editor model"); | ||
| //model = editor.getModel(); | ||
| //window.model = model; | ||
|
|
||
| //// Listen for Content Changes | ||
| ////Debug.log("Listening for changes in the editor model - " + (!model)); | ||
| //model.onDidChangeContent( | ||
| // (event) => | ||
| // { | ||
| // //Parent.setValue("Text", stringifyForMarshalling(model.getValue())); | ||
| // //console.log("buffers: " + JSON.stringify(model._buffer._pieceTree._buffers)); | ||
| // //console.log("commandMgr: " + JSON.stringify(model._commandManager)); | ||
| // //console.log("viewState:" + JSON.stringify(editor.saveViewState())); | ||
| // }); | ||
|
|
||
| //// Listen for Selection Changes | ||
| ////Debug.log("Listening for changes in the editor selection"); | ||
| //editor.onDidChangeCursorSelection( | ||
| // (event) => | ||
| // { | ||
| // if (!modifingSelection) | ||
| // { | ||
| // console.log(event.source); | ||
| // //Parent.setValue("SelectedText", stringifyForMarshalling(model.getValueInRange(event.selection))); | ||
| // // Parent.setValueWithType("SelectedRange", stringifyForMarshalling(JSON.stringify(event.selection)), "Selection"); | ||
| // } | ||
| // }); | ||
|
|
||
| //// Set theme | ||
| ////Debug.log("Getting parent theme value"); | ||
| //let theme = getParentJsonValue("RequestedTheme"); | ||
| //theme | ||
| // = { | ||
| // "0": "Default", | ||
| // "1": "Light", | ||
| // "2": "Dark" | ||
| // } | ||
| // [theme]; | ||
|
|
||
| ////Debug.log("Current theme value - " + theme); | ||
| //if (theme == "Default") | ||
| //{ | ||
| // Debug.log("Loading default theme"); | ||
| // theme = getThemeCurrentThemeName(); | ||
| //} | ||
|
|
||
| ////Debug.log("Changing theme"); | ||
| //changeTheme(theme, getThemeIsHighContrast()); | ||
|
|
||
| // Update Monaco Size when we receive a window resize event | ||
| //Debug.log("Listen for resize events on the window and resize the editor"); | ||
| window.addEventListener( | ||
| "resize", | ||
| () => | ||
| { | ||
| editor.layout(); | ||
| }); | ||
|
|
||
| // Disable WebView Scrollbar so Monaco Scrollbar can do heavy lifting | ||
| document.body.style.overflow = 'hidden'; | ||
|
|
||
| // Callback to Parent that we're loaded | ||
| //Debug.log("Loaded Monaco"); | ||
| //Parent.callAction("Loaded"); | ||
|
|
||
| //Debug.log("Ending Monaco Load"); | ||
| } | ||
| ); | ||
| })(); |
93 changes: 93 additions & 0 deletions
93
src/app/dev/DevToys.MonacoEditor/CodeEditor/CodeEditor.Windows.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | ||
| <style> | ||
| html, body { | ||
| height: 100%; | ||
| margin: 0; | ||
| } | ||
| /* Just have Monaco Fill All Available Space within control */ | ||
| #container { | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <style id="dynamic"> | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="container" onkeydown="keyDown(event)"></div> | ||
|
|
||
| <!--<script src="https://devtoys.local/ts-helpermethods/ts-helpermethods-Windows/asyncCallbackHelpers.js"></script>--> | ||
| <script src="https://devtoys.local/monaco-editor/min/vs/loader.js"></script> | ||
| <!--<script src="https://devtoys.local/ts-helpermethods/registerCodeLensProvider.js"></script> | ||
| <script src="https://devtoys.local/ts-helpermethods/registerColorProvider.js"></script> | ||
| <script src="https://devtoys.local/ts-helpermethods/registerCompletionItemProvider.js"></script> | ||
| <script src="https://devtoys.local/ts-helpermethods/otherScriptsToBeOrganized.js"></script> | ||
| <script src="https://devtoys.local/ts-helpermethods/updateSelectedContent.js"></script>--> | ||
|
|
||
| <script> | ||
| var editor; | ||
| var model; | ||
| var contexts = {}; | ||
| var decorations = []; | ||
| var modifingSelection = false; // Supress updates to selection when making edits. | ||
|
|
||
| //Debug.log("Starting Monaco Load"); | ||
| require.config({ paths: { 'vs': 'https://devtoys.local/monaco-editor/min/vs' } }); | ||
| require(['vs/editor/editor.main'], function () { | ||
| //Debug.log("Grabbing Monaco Options"); | ||
|
|
||
| //let opt = getOptions(); | ||
| //opt["value"] = Parent.getValue("Text"); | ||
|
|
||
| editor = monaco.editor.create(document.getElementById('container'), null /* opt */); | ||
| model = editor.getModel(); | ||
|
|
||
| //// Listen for Content Changes | ||
| //model.onDidChangeContent((event) => { | ||
| // Parent.setValue("Text", model.getValue()); | ||
| // //console.log("buffers: " + JSON.stringify(model._buffer._pieceTree._buffers)); | ||
| // //console.log("commandMgr: " + JSON.stringify(model._commandManager)); | ||
| // //console.log("viewState:" + JSON.stringify(editor.saveViewState())); | ||
| //}); | ||
|
|
||
| //// Listen for Selection Changes | ||
| //editor.onDidChangeCursorSelection((event) => { | ||
| // if (!modifingSelection) { | ||
| // console.log(event.source); | ||
| // Parent.setValue("SelectedText", model.getValueInRange(event.selection)); | ||
| // Parent.setValue("SelectedRange", JSON.stringify(event.selection), "Selection"); | ||
| // } | ||
| //}) | ||
|
|
||
| //// Set theme | ||
| //let theme = Parent.getJsonValue("RequestedTheme"); | ||
| //theme = { | ||
| // "0": "Default", | ||
| // "1": "Light", | ||
| // "2": "Dark" | ||
| //}[theme]; | ||
| //if (theme == "Default") { | ||
| // theme = Theme.currentThemeName.toString(); | ||
| //} | ||
| //changeTheme(theme, Theme.isHighContrast.toString()); | ||
|
|
||
| //// Update Monaco Size when we receive a window resize event | ||
| //window.addEventListener("resize", () => { | ||
| // editor.layout(); | ||
| //}); | ||
|
|
||
| // Disable WebView Scrollbar so Monaco Scrollbar can do heavy lifting | ||
| document.body.style.overflow = 'hidden'; | ||
|
|
||
| //// Callback to Parent that we're loaded | ||
| //Debug.log("Loaded Monaco"); | ||
| //Parent.callAction("Loaded"); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| using Microsoft.UI.Xaml; | ||
| using Microsoft.UI.Xaml.Controls; | ||
|
|
||
| namespace DevToys.MonacoEditor; | ||
|
|
||
| /// <summary> | ||
| /// .Net wrapper for the Monaco CodeEditor | ||
| /// https://microsoft.github.io/monaco-editor/ | ||
| /// </summary> | ||
| [TemplatePart(Name = "View", Type = typeof(ICodeEditorPresenter))] | ||
| public sealed partial class CodeEditor : Control | ||
| { | ||
| private ICodeEditorPresenter _view; | ||
|
|
||
| public CodeEditor() | ||
| { | ||
| DefaultStyleKey = typeof(CodeEditor); | ||
| } | ||
|
|
||
| protected override void OnApplyTemplate() | ||
| { | ||
| if (_view != null) | ||
| { | ||
| //_view.NavigationStarting -= WebView_NavigationStarting; | ||
| //_view.DOMContentLoaded -= WebView_DOMContentLoaded; | ||
| //_view.NavigationCompleted -= WebView_NavigationCompleted; | ||
| //_view.NewWindowRequested -= WebView_NewWindowRequested; | ||
| //Debug.WriteLine("Setting initialized - false"); | ||
| //_initialized = false; | ||
| } | ||
|
|
||
| _view = (ICodeEditorPresenter)GetTemplateChild("View"); | ||
|
|
||
| if (_view != null) | ||
| { | ||
| //_view.NavigationStarting += WebView_NavigationStarting; | ||
| //_view.DOMContentLoaded += WebView_DOMContentLoaded; | ||
| //_view.NavigationCompleted += WebView_NavigationCompleted; | ||
| //_view.NewWindowRequested += WebView_NewWindowRequested; | ||
|
|
||
| _view.LaunchAsync(); | ||
|
|
||
| base.OnApplyTemplate(); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.