Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
ngx-ace-wrapper
Advanced tools
This is an Angular wrapper library for the Ace. To use this library you should get familiar with the Ace documentation as well since this documentation only explains details specific to this wrapper.
Example application | StackBlitz example | Ace documentation
npm install
npm run build
npm install
npm run start
npm install ngx-ace-wrapper --save
Providing the global configuration is optional and when used you should only provide the configuration in your root module.
import { AceModule } from 'ngx-ace-wrapper';
import { ACE_CONFIG } from 'ngx-ace-wrapper';
import { AceConfigInterface } from 'ngx-ace-wrapper';
const DEFAULT_ACE_CONFIG: AceConfigInterface = {
};
@NgModule({
...
imports: [
...
AceModule
],
providers: [
{
provide: ACE_CONFIG,
useValue: DEFAULT_ACE_CONFIG
}
]
})
This library provides two ways to create a Ace element, component for simple use cases and directive for more custom use cases.
COMPONENT USAGE
Simply replace the element that would ordinarily be passed to Ace
with the ace component.
You also need to import brace and the used mode(s) and theme(s):
import 'brace';
import 'brace/mode/text';
import 'brace/theme/github';
<ace [config]="config" [mode]="'text'" [theme]="'github'" [(value)]="value"></ace>
[config] // Custom config to override the global defaults.
[mode] // Mode for the editor (import mode manually!).
[theme] // Theme for the editor (import theme manually!).
[value] // Input value of the ace editor content (text).
[disabled] // Disables all functionality (focus & editing).
[useAceClass] // Use ace class (use provided default styles).
(valueChange) // Event handler for the input value change event.
DIRECTIVE USAGE
You need to always import brace and the used mode(s) and theme(s):
import 'brace';
import 'brace/mode/text';
import 'brace/theme/github';
Ace directive can be used in correctly structured div element with optional custom configuration:
<div class="ace" [ace]="config">text</div>
[ace] // Custom config to override the global defaults.
[disabled] // Disables all functionality (focus & editing).
mode // Mode for the editor (import mode manually!).
theme // Theme for the editor (import theme manually!).
wrap // Sets text wrapping to be enabled or disabled.
tabSize // Size in spaces of the soft tabs (Default: 4).
showPrintMargin // Sets showing of the print margin (Default: false).
printMarginColumn // Sets the column where the print margin should be.
For more detailed documentation with all the supported config options see the Ace documentation.
ace() // Returns the Ace instance reference for full API access.
clear() // Clears the editor document and resets text selection.
getValue() // Returns the current text value of the editor document.
setValue(value, cursorPos?) // Text value for the editor document. Cursor position:
// 0 = select all, -1 = document start, 1 = document end.
Above functions can be accessed through the directive reference (available as directiveRef in the component).
FAQs
Angular wrapper library for Ace
The npm package ngx-ace-wrapper receives a total of 6,817 weekly downloads. As such, ngx-ace-wrapper popularity was classified as popular.
We found that ngx-ace-wrapper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.