Closed Stevertus closed 2 years ago
With 2 beta. This seems to be the same issue :( no errors just not rendering
I see you are using [(ngModel)]
For that to work make sure in your app.module.ts you import the FormsModule:
import { FormsModule } from '@angular/forms';
...
@NgModule({
...
imports: [
FormsModule,
...
I tried with this and your snippit of:
<td-code-editor (keydown)="test($event)" [style.display]="(selectedTab || selectedTab.content != '\t\r') ? 'block' : 'none' " [theme]="editorOptions.theme" automaticLayout [language]="editorOptions.language" [(ngModel)]="selectedTab.content" id="editWindow" #editWindow></td-code-editor>
And it worked fine in both the browser and using Covalent-Electron. If by doing this it still doesn't work then can you post a stackblitz of your full code example?
Is this issue solved, I'm not getting any error but the editor is still not loading. Using Angular v6 with Electron and trying to implement this editor.
Issue is still present, can't get the editor work based on this boilerpalte: https://github.com/maximegris/angular-electron When I run the app as angular only the editor shows, but it doesn't show in electron.
Yes I upgraded to angular 6 and the newest Beta of covalent-code-editor, but the issue is still there. Didn't find a solution yet
Issue is still present, can't get the editor work based on this boilerpalte: https://github.com/maximegris/angular-electron When I run the app as angular only the editor shows, but it doesn't show in electron.
Same issue. I tried with same electron code.
@szuni @Stevertus @nagug mohitsharma23 Are you also seeing the error when trying with Covalent Electron: https://github.com/Teradata/covalent-electron
Perhaps there is a difference between how Angular-Electron and Covalent-Electron load?
@szuni @Stevertus @nagug mohitsharma23 Are you also seeing the error when trying with Covalent Electron: https://github.com/Teradata/covalent-electron
Perhaps there is a difference between how Angular-Electron and Covalent-Electron load?
Build process is definitely different, because Angular-Electron is built with webpack not gulp. To tell the truth our big application builds much faster with webpack than Covalent-Electron. Could you please help to get code editor work with Angular-Electron?
I could make it work with a dirty solution. First I realized I forgot to copy the file protocol interceptior into electron main.js.
protocol.interceptFileProtocol('file', function(req, callback) { var url = req.url.substr(7); const filePath = path.normalize(__dirname + '/../../dist' + url); callback( filePath ); },function (error) { if (error) { console.error('Failed to register protocol'); } });
Problem is with this solution that there is no dist folder (and any of the assets) generated for development build, application runs somehow from node_modules only. But if I build is frist and then run in dev mode I can use the built assets.
Next problem is with TdCodeEditorComponent. Is uses this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
In my app electron.remote.app.getAppPath() = "P:\ProdDev.Cne-Edit\config-tool\node_modules\electron\dist\resources\default_app.asar"
This is for the electron core, not the renderer. I tried to changed it to __dirname
with devtool, but somehow that path got confused.
With a fixed path it showed up in my electron app.
Any ideas?
@szuni i am also trying to use the same boiler plate as you. for the test home.component.html looks like this
<div class="container">
<h1 class="title">
<td-code-editor style="height: 200px" theme="vs-light" flex language="javascript"></td-code-editor>
</h1>
</div>
what i see as error is in the line
this._appPath = electron.remote.app.getAppPath().split('\').join('/');
is "electron is not defined"!!!
Any advice on how you passed that?
passed that stage by adding electron loader to scripts in angular.json.
Now no errors and no editor :)
select <webview>
tag in elements tab and enter $0.openDevtools() in console. Now you will see a new devtool window and the errors of embedded code editor.
That was super helpful. Now both my loader.js and editor.main.css are not found. place it has been looking for the both are
file:///assets/monaco/vs/loader.js
file:///assets/monaco/vs/editor/editor.main.css
Now let me see, hot get that loaded..
These is getting round and round. looks like the dirpath logic inside webview is getting messed up, when using electron-angular. bit crazy :(
I discovered a path override logic used for unit tests. I used it in extended component and got it work:
export class MonacoEditorComponent extends TdCodeEditorComponent { constructor(zone: NgZone) { super(zone); let appPath = electron.remote.app.getAppPath(); if (appPath.endsWith('default_app.asar')) { appPath = appPath.substring(0, appPath.indexOf('node_modules') - 1); } super.setEditorNodeModuleDirOverride(appPath.split('\\').join('/') + '/dist'); } }
@szuni good to hear progress made. I am still in the same stage.
following are my changes in the code compared to base boiler plate
in angular.json
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png",
"src/favicon.icns",
"src/favicon.256x256.png",
"src/favicon.512x512.png",
"src/electron-load.js",
{
"glob": "**/*",
"input": "node_modules/@covalent/code-editor/assets/monaco",
"output": "/assets/monaco"
}
in main.js createwindow function looks like
function createWindow() {
var electronScreen = electron_1.screen;
var size = electronScreen.getPrimaryDisplay().workAreaSize;
protocol.interceptFileProtocol('file', function(req, callback) {
var url = req.url.substr(7);
const filePath = path.normalize(__dirname + '/../../dist' + url);
callback( filePath );
},function (error) {
if (error) {
console.error('Failed to register protocol');
}
});
//Create the browser window.
win = new electron_1.BrowserWindow({
x: 0,
y: 0,
width: size.width,
height: size.height,
webPreferences: {
webSecurity: false
}
});
index.html looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularElectron</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="electron-load.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
home component looks like
import { Component, NgZone } from '@angular/core';
import { TdCodeEditorComponent } from '@covalent/code-editor'
var electron = require('electron');
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
//export class HomeComponent implements OnInit {
export class HomeComponent extends TdCodeEditorComponent {
constructor(zone: NgZone) {
super(zone);
let appPath = electron.remote.app.getAppPath();
if (appPath.endsWith('default_app.asar')) {
appPath = appPath.substring(0, appPath.indexOf('node_modules') - 1);
}
super.setEditorNodeModuleDirOverride(appPath.split('\\').join('/') + '/dist');
}
}
home.compoenent.html looks like
<div class="container">
<h1 class="title">
{{ 'PAGES.HOME.TITLE' | translate }}
</h1>
<td-code-editor style="height: 300px" theme="vs-light" flex language="javascript"></td-code-editor>
</div>
currently the errors I get
in main console
zone-mix.js:3292 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at HomeComponent.push../node_modules/@covalent/code-editor/esm5/covalent-code-editor.js.TdCodeEditorComponent.ngOnInit (covalent-code-editor.js:464)
at checkAndUpdateDirectiveInline (core.js:9243)
at checkAndUpdateNodeInline (core.js:10507)
at checkAndUpdateNode (core.js:10469)
at debugCheckAndUpdateNode (core.js:11102)
at debugCheckDirectivesFn (core.js:11062)
at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
at checkAndUpdateView (core.js:10451)
at callViewAction (core.js:10692)
in webview console
Failed to load resource: net::ERR_FILE_NOT_FOUND editor.main.css
Failed to load resource: net::ERR_FILE_NOT_FOUND loader.js
require.config is not a function
path it is looking for editor.main.css and loader.js looks like
file:///assets/monaco/vs/editor/editor.main.css
file:///assets/monaco/vs/loader.js
really appreciate any inputs.
@nagug try to delete protocol.interceptFileProtocol(...) part from main.js
@szuni Thanks for the input. unfortunately there was no effect.
after some digging, i found that it seems the path for editor.min.css and loader.js is alway wrong. It was never loading full path, but only relative path, causing things to break.
I did some "hardcoding" to covalent-code-editor.js and I was able to make things work.
@jeremysmartt looks like _editorNodeModuleDirOverride
not initialised could have some issues on electron. Hence I made some changes like
this._isElectronApp = (( /** @type {?} */(window))['process']) ? true : false;
if (this._isElectronApp) {
this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
this._editorNodeModuleDirOverride = this._appPath;
}
Now the challenge was the file paths were missing dist
hence I had to change the editorHTML to reflect path with dist included. This is not the right approach. Any suggestions on better approach.
Following are the changes, that made things work for me with angular-electron boiler plate.
in angular.json
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png",
"src/favicon.icns",
"src/favicon.256x256.png",
"src/favicon.512x512.png",
"src/electron-load.js",
{
"glob": "**/*",
"input": "node_modules/@covalent/code-editor/assets/monaco",
"output": "/assets/monaco"
}
main.ts will look like
function createWindow() {
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;
// Create the browser window.
win = new BrowserWindow({
x: 0,
y: 0,
width: size.width,
height: size.height,
webPreferences: {
webSecurity: false
}
});
index.html will look like
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularElectron</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="electron-load.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
electron-load.js is the same file as in electron-covalent example. Just that my file only has the following code.
var fs = require('fs');
var electron = require('electron');
var path = require('path');
var url = require('url');
home.component is a empty class
home.component.html is like
<div class="container">
<h1 class="title">
{{ 'PAGES.HOME.TITLE' | translate }}
</h1>
<td-code-editor style="height: 300px" theme="vs-light" flex language="javascript"></td-code-editor>
</div>
unfortunately the changes are in covalent-code-editor.js (I made the changes in ESM5 files, which is what I was using)
look for the following code
if (this._isElectronApp) {
this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
}
and replace with
if (this._isElectronApp) {
this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
this._editorNodeModuleDirOverride = this._appPath;
}
this ensures that _editorNodeModuleDirOverride is not empty.
Now need to compensate for delivering from "dist" folder.
Look for the editorHTML
in TdCodeEditorComponent.prototype.ngOnInit
function. and make the changes for path of the following (Search and change)
/assets/monaco/vs/editor/editor.main.css
/assets/monaco/vs/loader.js
to
/dist/assets/monaco/vs/editor/editor.main.css
/dist/assets/monaco/vs/loader.js
and change the following code also in editorHTML
baseUrl: '" + this._appPath + "/assets/monaco'
to
baseUrl: '" + this._appPath + "/dist/assets/monaco'
This is not fully tested for all APIs..so play around with paths.
@nagug Thanks that actually worked! Not the best way to fix it, but it is a way. Nevertheless, I hope this gets somehow fixed in the future
@nagug tried your solution it doesn't work... maybe i didn't configure it properly... hope it will be resolved soon!
@stradivario what errors are you getting?
@nagug sorry yesterday i was a sleep a bit and i didn't say it more correctly.
I don't have any error just my Editor is not showing. I try to change the paths but i think you say it correct "is not suitable for all API-s".
In browser it works perfectly fine.
Regards, K.T.
As @szuni posted.
select
This should give clear view of the error.
@nagug as @szuni said
select <webview> tag in elements tab and enter $0.openDevtools() in console. Now you will see a new devtool window and the errors of embedded code editor.
I am selecting the element when i enter inside console it says
VM797:1 Uncaught TypeError: $0.openDevtools is not a function
at <anonymous>:1:4
(anonymous) @ VM797:1
$0.openDevtools()vv
VM803:1 Uncaught SyntaxError: Unexpected identifier
$0.openDevtools()
VM805:1 Uncaught TypeError: $0.openDevtools is not a function
at <anonymous>:1:4
I don't understand what should i do ?
Any update guys ?
Up ? @nagug @jeremysmartt @mohitsharma23 @szuni
I manage to select current code editor inside console it says:
Uncaught TypeError: require.config is not a function
at data:text/html;base64,PCFET0NUWVBFIGh0bWw+CiAgICAgICAgICAgIDxodG1sIHN0eWxlPSJoZWlnaHQ6MTAwJSI+CiAgICAgICAgICAgIDxoZWFkPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIiAvPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7Y2hhcnNldD11dGYtOCIgPgogICAgICAgICAgICAgICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBkYXRhLW5hbWU9InZzL2VkaXRvci9lZGl0b3IubWFpbiIKICAgICAgICAgICAgICAgICAgICBocmVmPSJmaWxlOi8vL2Fzc2V0cy9tb25hY28vdnMvZWRpdG9yL2VkaXRvci5tYWluLmNzcyI+CiAgICAgICAgICAgIDwvaGVhZD4KICAgICAgICAgICAgPGJvZHkgc3R5bGU9ImhlaWdodDoxMDAlO3dpZHRoOiAxMDAlO21hcmdpbjogMDtwYWRkaW5nOiAwO292ZXJmbG93OiBoaWRkZW47Ij4KICAgICAgICAgICAgPGRpdiBpZD0iZWRpdG9ySW5uZXJDb250YWluZXIwIiBzdHlsZT0id2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtib3JkZXI6MDsiPjwvZGl2PgogICAgICAgICAgICA8c2NyaXB0PgogICAgICAgICAgICAgICAgLy8gR2V0IHRoZSBpcGNSZW5kZXJlciBvZiBlbGVjdHJvbiBmb3IgY29tbXVuaWNhdGlvbgogICAgICAgICAgICAgICAgY29uc3Qge2lwY1JlbmRlcmVyfSA9IHJlcXVpcmUoJ2VsZWN0cm9uJyk7CiAgICAgICAgICAgIDwvc2NyaXB0PgogICAgICAgICAgICA8c2NyaXB0IHNyYz0iZmlsZTovLy9hc3NldHMvbW9uYWNvL3ZzL2xvYWRlci5qcyI+PC9zY3JpcHQ+CiAgICAgICAgICAgIDxzY3JpcHQ+CiAgICAgICAgICAgICAgICB2YXIgZWRpdG9yOwogICAgICAgICAgICAgICAgdmFyIHRoZW1lID0gJ3ZzLWRhcmsnOwogICAgICAgICAgICAgICAgdmFyIHZhbHVlID0gJyc7CgogICAgICAgICAgICAgICAgcmVxdWlyZS5jb25maWcoewogICAgICAgICAgICAgICAgICAgIGJhc2VVcmw6ICcvdG1wLy5tb3VudF9hbmd1bGFhSHFRNWkvcmVzb3VyY2VzL2FwcC5hc2FyL2Fzc2V0cy9tb25hY28nCiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgIHNlbGYubW9kdWxlID0gdW5kZWZpbmVkOwogICAgICAgICAgICAgICAgc2VsZi5wcm9jZXNzLmJyb3dzZXIgPSB0cnVlOwoKICAgICAgICAgICAgICAgIHJlcXVpcmUoWyd2cy9lZGl0b3IvZWRpdG9yLm1haW4nXSwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yID0gbW9uYWNvLmVkaXRvci5jcmVhdGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpLCBPYmplY3QuYXNzaWduKHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IHZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogJ3R5cGVzY3JpcHQnLAogICAgICAgICAgICAgICAgICAgICAgICB0aGVtZTogJ3ZzLWRhcmsnLAogICAgICAgICAgICAgICAgICAgIH0sIHsicmVhZE9ubHkiOmZhbHNlLCJmb250U2l6ZSI6MTR9KSk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmdldE1vZGVsKCkub25EaWRDaGFuZ2VDb250ZW50KCAoZSk9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29udGVudENoYW5nZSIsIGVkaXRvci5nZXRWYWx1ZSgpKTsKICAgICAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IuYWRkQWN0aW9uKHsKICAgICAgICAgICAgICAgICAgICAgIC8vIEFuIHVuaXF1ZSBpZGVudGlmaWVyIG9mIHRoZSBjb250cmlidXRlZCBhY3Rpb24uCiAgICAgICAgICAgICAgICAgICAgICBpZDogJ2Z1bGxTY3JlZW4nLAogICAgICAgICAgICAgICAgICAgICAgLy8gQSBsYWJlbCBvZiB0aGUgYWN0aW9uIHRoYXQgd2lsbCBiZSBwcmVzZW50ZWQgdG8gdGhlIHVzZXIuCiAgICAgICAgICAgICAgICAgICAgICBsYWJlbDogJ0Z1bGwgU2NyZWVuJywKICAgICAgICAgICAgICAgICAgICAgIC8vIEFuIG9wdGlvbmFsIGFycmF5IG9mIGtleWJpbmRpbmdzIGZvciB0aGUgYWN0aW9uLgogICAgICAgICAgICAgICAgICAgICAgY29udGV4dE1lbnVHcm91cElkOiAnbmF2aWdhdGlvbicsCiAgICAgICAgICAgICAgICAgICAgICBrZXliaW5kaW5nczogW3VuZGVmaW5lZF0sCiAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0TWVudU9yZGVyOiAxLjUsCiAgICAgICAgICAgICAgICAgICAgICAvLyBNZXRob2QgdGhhdCB3aWxsIGJlIGV4ZWN1dGVkIHdoZW4gdGhlIGFjdGlvbiBpcyB0cmlnZ2VyZWQuCiAgICAgICAgICAgICAgICAgICAgICAvLyBAcGFyYW0gZWRpdG9yIFRoZSBlZGl0b3IgaW5zdGFuY2UgaXMgcGFzc2VkIGluIGFzIGEgY29udmluaWVuY2UKICAgICAgICAgICAgICAgICAgICAgIHJ1bjogZnVuY3Rpb24oZWQpIHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFyIGVkaXRvckRpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdlZGl0b3JJbm5lckNvbnRhaW5lcjAnKTsKICAgICAgICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LndlYmtpdFJlcXVlc3RGdWxsc2NyZWVuKCk7CiAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmFkZEFjdGlvbih7CiAgICAgICAgICAgICAgICAgICAgICAvLyBBbiB1bmlxdWUgaWRlbnRpZmllciBvZiB0aGUgY29udHJpYnV0ZWQgYWN0aW9uLgogICAgICAgICAgICAgICAgICAgICAgaWQ6ICdleGl0ZnVsbFNjcmVlbicsCiAgICAgICAgICAgICAgICAgICAgICAvLyBBIGxhYmVsIG9mIHRoZSBhY3Rpb24gdGhhdCB3aWxsIGJlIHByZXNlbnRlZCB0byB0aGUgdXNlci4KICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiAnRXhpdCBGdWxsIFNjcmVlbicsCiAgICAgICAgICAgICAgICAgICAgICAvLyBBbiBvcHRpb25hbCBhcnJheSBvZiBrZXliaW5kaW5ncyBmb3IgdGhlIGFjdGlvbi4KICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHRNZW51R3JvdXBJZDogJ25hdmlnYXRpb24nLAogICAgICAgICAgICAgICAgICAgICAga2V5YmluZGluZ3M6IFs5XSwKICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHRNZW51T3JkZXI6IDEuNSwKICAgICAgICAgICAgICAgICAgICAgIC8vIE1ldGhvZCB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgd2hlbiB0aGUgYWN0aW9uIGlzIHRyaWdnZXJlZC4KICAgICAgICAgICAgICAgICAgICAgIC8vIEBwYXJhbSBlZGl0b3IgVGhlIGVkaXRvciBpbnN0YW5jZSBpcyBwYXNzZWQgaW4gYXMgYSBjb252aW5pZW5jZQogICAgICAgICAgICAgICAgICAgICAgcnVuOiBmdW5jdGlvbihlZCkgewogICAgICAgICAgICAgICAgICAgICAgICB2YXIgZWRpdG9yRGl2ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpOwogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC53ZWJraXRFeGl0RnVsbHNjcmVlbigpOwogICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9ySW5pdGlhbGl6ZWQiLCB0aGlzLl9lZGl0b3IpOwogICAgICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAgICAgLy8gcmV0dXJuIGJhY2sgdGhlIHZhbHVlIGluIHRoZSBlZGl0b3IgdG8gdGhlIG1haW52aWV3CiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZ2V0RWRpdG9yQ29udGVudCcsIGZ1bmN0aW9uKCl7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgiZWRpdG9yQ29udGVudCIsIGVkaXRvci5nZXRWYWx1ZSgpKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgdmFsdWUgb2YgdGhlIGVkaXRvciBmcm9tIHdoYXQgd2FzIHNlbnQgZnJvbSB0aGUgbWFpbnZpZXcKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzZXRFZGl0b3JDb250ZW50JywgZnVuY3Rpb24oZXZlbnQsIGRhdGEpewogICAgICAgICAgICAgICAgICAgIHZhbHVlID0gZGF0YTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3Iuc2V0VmFsdWUoZGF0YSk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBzZXQgdGhlIHN0eWxlIG9mIHRoZSBlZGl0b3IgY29udGFpbmVyIGRpdgogICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIub24oJ3NldEVkaXRvclN0eWxlJywgZnVuY3Rpb24oZXZlbnQsIGRhdGEpewogICAgICAgICAgICAgICAgICAgIHZhciBlZGl0b3JEaXYgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LnN0eWxlID0gZGF0YS5zdHlsZTsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogY3VycmVudFZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogZGF0YS5sYW5ndWFnZSwKICAgICAgICAgICAgICAgICAgICAgICAgdGhlbWU6IGRhdGEudGhlbWUsCiAgICAgICAgICAgICAgICAgICAgfSwgeyJyZWFkT25seSI6ZmFsc2UsImZvbnRTaXplIjoxNH0pKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgb3B0aW9ucyBvZiB0aGUgZWRpdG9yIGZyb20gd2hhdCB3YXMgc2VudCBmcm9tIHRoZSBtYWludmlldwogICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIub24oJ3NldEVkaXRvck9wdGlvbnMnLCBmdW5jdGlvbihldmVudCwgZGF0YSl7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLnVwZGF0ZU9wdGlvbnMoZGF0YSk7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgib25FZGl0b3JDb25maWd1cmF0aW9uQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgbGFuZ3VhZ2Ugb2YgdGhlIGVkaXRvciBmcm9tIHdoYXQgd2FzIHNlbnQgZnJvbSB0aGUgbWFpbnZpZXcKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzZXRMYW5ndWFnZScsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogY3VycmVudFZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogZGF0YSwKICAgICAgICAgICAgICAgICAgICAgICAgdGhlbWU6IHRoZW1lLAogICAgICAgICAgICAgICAgICAgIH0sIHsicmVhZE9ubHkiOmZhbHNlLCJmb250U2l6ZSI6MTR9KSk7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgib25FZGl0b3JDb25maWd1cmF0aW9uQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5zZW5kVG9Ib3N0KCJvbkVkaXRvckxhbmd1YWdlQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHJlZ2lzdGVyIGEgbmV3IGxhbmd1YWdlIHdpdGggZWRpdG9yCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbigncmVnaXN0ZXJMYW5ndWFnZScsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKCiAgICAgICAgICAgICAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmNvbXBsZXRpb25JdGVtUHJvdmlkZXIubGVuZ3RoOyBpKyspIHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFyIHByb3ZpZGVyID0gZGF0YS5jb21wbGV0aW9uSXRlbVByb3ZpZGVyW2ldOwogICAgICAgICAgICAgICAgICAgICAgICBwcm92aWRlci5raW5kID0gZXZhbChwcm92aWRlci5raW5kKTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLm1vbmFyY2hUb2tlbnNQcm92aWRlci5sZW5ndGg7IGkrKykgewogICAgICAgICAgICAgICAgICAgICAgICB2YXIgbW9uYXJjaFRva2VucyA9IGRhdGEubW9uYXJjaFRva2Vuc1Byb3ZpZGVyW2ldOwogICAgICAgICAgICAgICAgICAgICAgICBtb25hcmNoVG9rZW5zWzBdID0gZXZhbChtb25hcmNoVG9rZW5zWzBdKTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgbW9uYWNvLmxhbmd1YWdlcy5yZWdpc3Rlcih7IGlkOiBkYXRhLmlkIH0pOwoKICAgICAgICAgICAgICAgICAgICBtb25hY28ubGFuZ3VhZ2VzLnNldE1vbmFyY2hUb2tlbnNQcm92aWRlcihkYXRhLmlkLCB7CiAgICAgICAgICAgICAgICAgICAgICAgIHRva2VuaXplcjogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgcm9vdDogZGF0YS5tb25hcmNoVG9rZW5zUHJvdmlkZXIKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgICAgICAvLyBEZWZpbmUgYSBuZXcgdGhlbWUgdGhhdCBjb25zdGFpbnMgb25seSBydWxlcyB0aGF0IG1hdGNoIHRoaXMgbGFuZ3VhZ2UKICAgICAgICAgICAgICAgICAgICBtb25hY28uZWRpdG9yLmRlZmluZVRoZW1lKGRhdGEuY3VzdG9tVGhlbWUuaWQsIGRhdGEuY3VzdG9tVGhlbWUudGhlbWUpOwogICAgICAgICAgICAgICAgICAgIHRoZW1lID0gZGF0YS5jdXN0b21UaGVtZS5pZDsKCiAgICAgICAgICAgICAgICAgICAgbW9uYWNvLmxhbmd1YWdlcy5yZWdpc3RlckNvbXBsZXRpb25JdGVtUHJvdmlkZXIoZGF0YS5pZCwgewogICAgICAgICAgICAgICAgICAgICAgICBwcm92aWRlQ29tcGxldGlvbkl0ZW1zOiAoKSA9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gZGF0YS5jb21wbGV0aW9uSXRlbVByb3ZpZGVyCiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAgICAgdmFyIGNzcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInN0eWxlIik7CiAgICAgICAgICAgICAgICAgICAgY3NzLnR5cGUgPSAidGV4dC9jc3MiOwogICAgICAgICAgICAgICAgICAgIGNzcy5pbm5lckhUTUwgPSBkYXRhLm1vbmFyY2hUb2tlbnNQcm92aWRlckNTUzsKICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKGNzcyk7CgogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29uZmlndXJhdGlvbkNoYW5nZWQiLCAnJyk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBJbnN0cnVjdCB0aGUgZWRpdG9yIHRvIHJlbWVhc3VyZSBpdHMgY29udGFpbmVyCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignbGF5b3V0JywgZnVuY3Rpb24oKXsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IubGF5b3V0KCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBJbnN0cnVjdCB0aGUgZWRpdG9yIGdvIHRvIGZ1bGwgc2NyZWVuIG1vZGUKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzaG93RnVsbFNjcmVlbkVkaXRvcicsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICAgICAgICB2YXIgZWRpdG9yRGl2ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpOwogICAgICAgICAgICAgICAgICBlZGl0b3JEaXYud2Via2l0UmVxdWVzdEZ1bGxzY3JlZW4oKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIEluc3RydWN0IHRoZSBlZGl0b3IgZXhpdCBmdWxsIHNjcmVlbiBtb2RlCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZXhpdEZ1bGxTY3JlZW5FZGl0b3InLCBmdW5jdGlvbigpIHsKICAgICAgICAgICAgICAgICAgdmFyIGVkaXRvckRpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdlZGl0b3JJbm5lckNvbnRhaW5lcjAnKTsKICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LndlYmtpdEV4aXRGdWxsc2NyZWVuKCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZGlzcG9zZScsIGZ1bmN0aW9uKCl7CiAgICAgICAgICAgICAgICAgIGVkaXRvci5kaXNwb3NlKCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBuZWVkIHRvIG1hbnVhbGx5IHJlc2l6ZSB0aGUgZWRpdG9yIGFueSB0aW1lIHRoZSB3aW5kb3cgc2l6ZQogICAgICAgICAgICAgICAgLy8gY2hhbmdlcy4gU2VlOiBodHRwczovL2dpdGh1Yi5jb20vTWljcm9zb2Z0L21vbmFjby1lZGl0b3IvaXNzdWVzLzI4CiAgICAgICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigicmVzaXplIiwgZnVuY3Rpb24gcmVzaXplRWRpdG9yKCkgewogICAgICAgICAgICAgICAgICAgIGVkaXRvci5sYXlvdXQoKTsKICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICA8L3NjcmlwdD4KICAgICAgICAgICAgPC9ib2R5PgogICAgICAgICAgICA8L2h0bWw+:21:25
Here on 21 line
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" data-name="vs/editor/editor.main"
href="file:///assets/monaco/vs/editor/editor.main.css">
</head>
<body style="height:100%;width: 100%;margin: 0;padding: 0;overflow: hidden;">
<div id="editorInnerContainer0" style="width:100%;height:100%;border:0;"></div>
<script>
// Get the ipcRenderer of electron for communication
const {ipcRenderer} = require('electron');
</script>
<script src="file:///assets/monaco/vs/loader.js"></script>
<script>
var editor;
var theme = 'vs-dark';
var value = '';
require.config({
baseUrl: '/tmp/.mount_angulaaHqQ5i/resources/app.asar/assets/monaco'
});
self.module = undefined;
self.process.browser = true;
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
value: value,
language: 'typescript',
theme: 'vs-dark',
}, {"readOnly":false,"fontSize":14}));
editor.getModel().onDidChangeContent( (e)=> {
ipcRenderer.sendToHost("onEditorContentChange", editor.getValue());
});
editor.addAction({
// An unique identifier of the contributed action.
id: 'fullScreen',
// A label of the action that will be presented to the user.
label: 'Full Screen',
// An optional array of keybindings for the action.
contextMenuGroupId: 'navigation',
keybindings: [undefined],
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function(ed) {
var editorDiv = document.getElementById('editorInnerContainer0');
editorDiv.webkitRequestFullscreen();
}
});
editor.addAction({
// An unique identifier of the contributed action.
id: 'exitfullScreen',
// A label of the action that will be presented to the user.
label: 'Exit Full Screen',
// An optional array of keybindings for the action.
contextMenuGroupId: 'navigation',
keybindings: [9],
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function(ed) {
var editorDiv = document.getElementById('editorInnerContainer0');
document.webkitExitFullscreen();
}
});
ipcRenderer.sendToHost("onEditorInitialized", this._editor);
});
// return back the value in the editor to the mainview
ipcRenderer.on('getEditorContent', function(){
ipcRenderer.sendToHost("editorContent", editor.getValue());
});
// set the value of the editor from what was sent from the mainview
ipcRenderer.on('setEditorContent', function(event, data){
value = data;
editor.setValue(data);
});
// set the style of the editor container div
ipcRenderer.on('setEditorStyle', function(event, data){
var editorDiv = document.getElementById('editorInnerContainer0');
editorDiv.style = data.style;
var currentValue = editor.getValue();
editor.dispose();
editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
value: currentValue,
language: data.language,
theme: data.theme,
}, {"readOnly":false,"fontSize":14}));
});
// set the options of the editor from what was sent from the mainview
ipcRenderer.on('setEditorOptions', function(event, data){
editor.updateOptions(data);
ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
});
// set the language of the editor from what was sent from the mainview
ipcRenderer.on('setLanguage', function(event, data){
var currentValue = editor.getValue();
editor.dispose();
editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
value: currentValue,
language: data,
theme: theme,
}, {"readOnly":false,"fontSize":14}));
ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
ipcRenderer.sendToHost("onEditorLanguageChanged", '');
});
// register a new language with editor
ipcRenderer.on('registerLanguage', function(event, data){
var currentValue = editor.getValue();
editor.dispose();
for (var i = 0; i < data.completionItemProvider.length; i++) {
var provider = data.completionItemProvider[i];
provider.kind = eval(provider.kind);
}
for (var i = 0; i < data.monarchTokensProvider.length; i++) {
var monarchTokens = data.monarchTokensProvider[i];
monarchTokens[0] = eval(monarchTokens[0]);
}
monaco.languages.register({ id: data.id });
monaco.languages.setMonarchTokensProvider(data.id, {
tokenizer: {
root: data.monarchTokensProvider
}
});
// Define a new theme that constains only rules that match this language
monaco.editor.defineTheme(data.customTheme.id, data.customTheme.theme);
theme = data.customTheme.id;
monaco.languages.registerCompletionItemProvider(data.id, {
provideCompletionItems: () => {
return data.completionItemProvider
}
});
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = data.monarchTokensProviderCSS;
document.body.appendChild(css);
ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
});
// Instruct the editor to remeasure its container
ipcRenderer.on('layout', function(){
editor.layout();
});
// Instruct the editor go to full screen mode
ipcRenderer.on('showFullScreenEditor', function() {
var editorDiv = document.getElementById('editorInnerContainer0');
editorDiv.webkitRequestFullscreen();
});
// Instruct the editor exit full screen mode
ipcRenderer.on('exitFullScreenEditor', function() {
var editorDiv = document.getElementById('editorInnerContainer0');
editorDiv.webkitExitFullscreen();
});
ipcRenderer.on('dispose', function(){
editor.dispose();
});
// need to manually resize the editor any time the window size
// changes. See: https://github.com/Microsoft/monaco-editor/issues/28
window.addEventListener("resize", function resizeEditor() {
editor.layout();
});
</script>
</body>
</html>
covalent will not be supported with electron in future versions
I had the same error as here: https://github.com/Teradata/covalent-code-editor/issues/22 I followed the instructions and the error is gone, however the editor is still not displayed.
But the webview with the base64 string is loaded. In the browser it works perfectly.
I don´t know what I am doing wrong here(I also specify a custom language on the component)
in my source html: