
Research
/Security News
Weaponizing Discord for Command and Control Across npm, PyPI, and RubyGems.org
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
@covalent/code-editor
Advanced tools
<td-code-editor>
is component for code editing based on Covalent and Monaco Editor. The component can run in both Electron and Web Browsers.
This component can be installed as npm package.
npm install @covalent/code-editor
Due to an known issue in Monaco Editor version 0.20.0 https://github.com/microsoft/monaco-editor/issues/1842 regarding errors arising when quickly disposing editor instances, utilize the 0.17.1 version of monaco-editor.
We utilize the ESM build of the Monaco Editor. To include this build, you must utilize custom webpack. See https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md for more information.
Install the webpack custom builder.
npm install --save-dev @angular-builders/custom-webpack
Install the Monaco Editor webpack extension plugin.
npm install --save-dev monaco-editor-webpack-plugin
Create a webpack config file utilizing the Monaco Editor webpack plugin. Languages and features can be included/excluded to control the resulting image size.
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
// target should only be specified when including component in Electron app
target: 'electron-renderer',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader'],
},
{
test: /\.ttf$/,
use: ['file-loader'],
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'sql', 'typescript'],
features: ['contextmenu', 'clipboard', 'find'],
}),
],
};
Note: If you are including this component in an Electron application, define the electron-renderer target. See Electron example here: https://github.com/Teradata/covalent-electron/blob/main/monaco-webpack.config.js
Reference the webpack file in your angular.json build config.
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./monaco-webpack.config.js",
"mergeStrategies": {
"module.rules": "prepend"
}
},
...
Import the CovalentCodeEditorModule in your NgModule:
import { CovalentCodeEditorModule } from '@covalent/code-editor';
@NgModule({
imports: [
CovalentCodeEditorModule,
...
],
...
})
export class MyModule {}
<td-code-editor
[style.height.px]="200"
editorStyle="border:0;"
flex
theme="vs"
language="sql"
[editorOptions]="{readOnly:true, fontSize:20}"
[(ngModel)]="model"
(ngModelChange)="callBackFunc()"
>
</td-code-editor>
Run nx test angular-code-editor
to execute the unit tests.
FAQs
Teradata UI Platform Code Editor Module
The npm package @covalent/code-editor receives a total of 778 weekly downloads. As such, @covalent/code-editor popularity was classified as not popular.
We found that @covalent/code-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.