{"id":13466473,"url":"https://github.com/serdarciplak/BlazorMonaco","last_synced_at":"2025-03-25T21:32:32.678Z","repository":{"id":36987908,"uuid":"257392587","full_name":"serdarciplak/BlazorMonaco","owner":"serdarciplak","description":"Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.","archived":false,"fork":false,"pushed_at":"2024-12-26T21:45:48.000Z","size":147286,"stargazers_count":495,"open_issues_count":14,"forks_count":104,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-23T05:01:28.469Z","etag":null,"topics":["blazor","blazor-component","code","editor","formatter","monaco-editor"],"latest_commit_sha":null,"homepage":"https://serdarciplak.github.io/BlazorMonaco/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serdarciplak.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-20T20:11:56.000Z","updated_at":"2025-03-19T04:45:15.000Z","dependencies_parsed_at":"2025-01-04T11:41:15.349Z","dependency_job_id":null,"html_url":"https://github.com/serdarciplak/BlazorMonaco","commit_stats":{"total_commits":84,"total_committers":4,"mean_commits":21.0,"dds":"0.22619047619047616","last_synced_commit":"669948158ae66dd846835db7657405adc3985896"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serdarciplak%2FBlazorMonaco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serdarciplak%2FBlazorMonaco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serdarciplak%2FBlazorMonaco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serdarciplak%2FBlazorMonaco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serdarciplak","download_url":"https://codeload.github.com/serdarciplak/BlazorMonaco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245548526,"owners_count":20633604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-component","code","editor","formatter","monaco-editor"],"created_at":"2024-07-31T15:00:44.687Z","updated_at":"2025-03-25T21:32:27.652Z","avatar_url":"https://github.com/serdarciplak.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions","C#","C\\#"],"sub_categories":["Components","2D/3D Rendering engines"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/serdarciplak/BlazorMonaco/master/BlazorMonaco/icon.png\" width=\"150\" height=\"150\" /\u003e\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003ca href=\"https://www.nuget.org/packages/BlazorMonaco/\"\u003e\u003cimg src=\"https://buildstats.info/nuget/BlazorMonaco\" /\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003ch1 align=\"center\"\u003eBlazorMonaco\u003c/h1\u003e\r\n\r\nBlazor component for Microsoft's [Monaco Editor](https://github.com/Microsoft/monaco-editor) which powers Visual Studio Code.\r\n\r\nSome less-frequently used Monaco Editor features are currently missing, but a good amount of the basic feature set is supported. The package is updated regularly to cover more features and use cases. Any contributions, comments or suggestions are greatly welcome. Please feel free to contact me at [twitter/serdarciplak](https://twitter.com/serdarciplak) or via GitHub.\r\n\r\nCurrent version of BlazorMonaco :\r\n* Uses `Monaco Editor v0.46.0`\r\n* Supports `netstandard2.0`, `net5.0`, `net6.0`, `net7.0` and `net8.0`\r\n\r\n## Demo\r\n\r\nYou can see a working sample WebAssembly app [here](https://serdarciplak.github.io/BlazorMonaco/).\r\n\r\n## Get Started\r\n\r\n* Add the [NuGet](https://www.nuget.org/packages/BlazorMonaco/) package to your Blazor project.\r\n\r\n```\r\ndotnet add package BlazorMonaco\r\n// or\r\nInstall-Package BlazorMonaco\r\n```\r\n\r\n* Add the below script tags to your `index.html` file. Please note that these script tags must be placed before the script tag for the `blazor.webassembly.js` file.\r\n\r\n```html\r\n\u003cscript src=\"_content/BlazorMonaco/jsInterop.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n* Everything resides in three namespaces. You can add the following using directives to your root `_Imports.razor` file, or any other place you may need them.\r\n\r\n```\r\n@using BlazorMonaco\r\n@using BlazorMonaco.Editor\r\n@using BlazorMonaco.Languages\r\n```\r\n\r\n## Code Editor\r\n\r\n### Adding an editor instance\r\n\r\n* To add a new editor instance, you just need to add a `StandaloneCodeEditor` component in your razor file.\r\n\r\n```xml\r\n\u003cStandaloneCodeEditor Id=\"my-editor-instance-id\" /\u003e\r\n```\r\n\r\n### Providing custom options\r\n\r\n* To customize your editor instance's initial options, set the `ConstructionOptions` parameter of the instance, and provide a method that returns a `StandaloneEditorConstructionOptions` instance.\r\n\r\n```xml\r\n\u003cStandaloneCodeEditor Id=\"my-editor-instance-id\" ConstructionOptions=\"EditorConstructionOptions\" /\u003e\r\n```\r\n\r\n* Then, add that method to your razor file's `@code` block and return a `StandaloneEditorConstructionOptions` instance with the values you need.\r\n\r\n```csharp\r\nprivate StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)\r\n{\r\n\treturn new StandaloneEditorConstructionOptions\r\n\t{\r\n\t\tAutomaticLayout = true,\r\n\t\tLanguage = \"javascript\",\r\n\t\tValue = \"function xyz() {\\n\" +\r\n\t\t\t\t\"   console.log(\\\"Hello world!\\\");\\n\" +\r\n\t\t\t\t\"}\"\r\n\t};\r\n}\r\n```\r\n\r\n### Editor events\r\n\r\n* You can subscribe to editor events (e.g. `OnDidKeyUp` or `OnDidPaste`) using the editor's event parameters.\r\n\r\n```xml\r\n\u003cStandaloneCodeEditor Id=\"my-editor-instance-id\" OnDidChangeCursorPosition=\"EditorDidChangeCursorPosition\" /\u003e\r\n```\r\n\r\n* Then, add your event listener method to your razor file's `@code` block.\r\n\r\n```csharp\r\nprivate void EditorDidChangeCursorPosition(CursorPositionChangedEvent eventArgs)\r\n{\r\n\tConsole.WriteLine(\"EditorDidChangeCursorPosition\");\r\n}\r\n```\r\n\r\n## Diff Editor\r\n\r\n### Adding a diff editor instance\r\n\r\n* To add a new diff editor instance, you just need to add a `StandaloneDiffEditor` component in your razor file.\r\n\r\n```xml\r\n\u003cStandaloneDiffEditor Id=\"my-editor-instance-id\" /\u003e\r\n```\r\n\r\n### Access to inner editor instances and events\r\n\r\n* `StandaloneDiffEditor` class provides two properties named `OriginalEditor` and `ModifiedEditor` for accessing the inner editor instances. You can use them like any other `StandaloneCodeEditor` instances.\r\n\r\n* You can register to inner editors' events using the helper event parameters of the main `StandaloneDiffEditor` instance.\r\n\r\n```xml\r\n\u003cStandaloneDiffEditor Id=\"my-editor-instance-id\" OnKeyUpOriginal=\"OnKeyUpOriginal\" OnKeyUpModified=\"OnKeyUpModified\" /\u003e\r\n```\r\n\r\n## Notes\r\n\r\n### Css styling\r\n\r\n* There are 3 css selectors you can use to add/edit css styles for your editors.\r\n  * The main html element of all editor instances contains the `monaco-editor-container` css class.\r\n  * The `Id` value you set for your razor component is also set as the id of its html element.\r\n  * You can provide a string in the `CssClass` property of an editor instance. That value will be added to the class attribute of its html element.\r\n\r\n```xml\r\n\u003cStandaloneCodeEditor Id=\"my-editor-id\" CssClass=\"my-editor-class\" /\u003e\r\n```\r\n\r\n```css\r\n.monaco-editor-container { /* for all editor instances */\r\n\theight: 100px;\r\n}\r\n\r\n/* or */\r\n\r\n#my-editor-id { /* for a specific editor instance */\r\n\theight: 100px;\r\n}\r\n\r\n/* or */\r\n\r\n.my-editor-class { /* for a specific editor instance */\r\n\theight: 100px;\r\n}\r\n```\r\n\r\n\u003e ⚠️ `Note : ` As an html element cannot set its height disregarding where it's placed in, BlazorMonaco cannot manage editor instance heights. So, if you don't do that yourself, editor instances may have a height of `0px` and be invisible. Please don't forget to set your editor instance heights as you need.\r\n\r\n### Global Methods\r\n\r\nMonaco Editor JavaScript library defines some methods in the global scope. As C# does not allow global methods, BlazorMonaco groups those methods in two static classes named `BlazorMonaco.Editor.Global` and `BlazorMonaco.Language.Global`. If you need to use a Monaco Editor method in the global scope, check where in the JavaScript library that method is, and search for it in the corresponding Global class. They're defined as static methods.\r\n\r\nFor example, you can use the `SetTheme` method as below. \r\n\r\n```csharp\r\nawait BlazorMonaco.Editor.Global.SetTheme(jsRuntime, \"my-custom-theme\");\r\n```\r\n\r\n### Using a custom Monaco Editor setup\r\n\r\n* If you've made changes to Monaco Editor, and need to use this edited version instead of the unmodified version packed with BlazorMonaco, just change the paths to monaco editor resources in your `index.html` file.\r\n\r\n```html\r\n\u003cscript src=\"_content/BlazorMonaco/jsInterop.js\"\u003e\u003c/script\u003e\r\n\u003cscript\u003evar require = { paths: { vs: 'my-path/monaco-editor/min/vs' } };\u003c/script\u003e\r\n\u003cscript src=\"my-path/monaco-editor/min/vs/loader.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"my-path/monaco-editor/min/vs/editor/editor.main.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Documentation\r\n\r\nAs BlazorMonaco is just a bridge between JavaScript and Blazor, you can use Monaco Editor's [documentation](https://microsoft.github.io/monaco-editor/docs.html).\r\n\r\n## Migration Guide\r\n\r\nAfter a major version update (like from `v2.x.x` to `v3.x.x`), you may need to make some changes in your integration. Please see the [MIGRATE.md](./MIGRATE.md) for details.\r\n\r\n## Change Log\r\n\r\nYou can view the history and the changes in the [CHANGELOG.md](./CHANGELOG.md)\r\n\r\n## License\r\n\r\nMIT, see the [LICENSE](./LICENSE) file for detail.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserdarciplak%2FBlazorMonaco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserdarciplak%2FBlazorMonaco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserdarciplak%2FBlazorMonaco/lists"}