
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
ace-custom-element
Advanced tools
Custom element wrapper for the ace editor (https://ace.c9.io/)
This is a custom element wrapper for the Ace code editor.
The primary reason for this package over other similar packages is to make it easier to use with by including a single script resource so that it can be accessed using services like unpkg.com.
Using a CDN like unpkg.com:
<!-- pin to a specific version if required -->
<script type="module" src="https://unpkg.com/ace-custom-element@latest/dist/index.min.js"></script>
<ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>
Try it out on JSFiddle.
Using a local file:
npm install ace-custom-element
<script type="module" src="./node_modules/ace-custom-element/dist/index.min.js"></script>
<ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>
Property | Attribute | Type | Default value | Description |
---|---|---|---|---|
editor | - | Ace.Editor | - | A reference to the ace editor. |
value | value | string | "" | Editor text value. |
mode | mode | string | ace/mode/javascript | Editor mode. |
theme | theme | string | ace/theme/eclipse | Editor theme. |
tabSize | tab-size | number | 2 | Editor tab size. |
readonly | readonly | boolean | false | Places editor in readonly mode. |
softTabs | soft-tabs | boolean | false | Sets editor to use soft tabs. |
wrap | wrap | boolean | false | Sets editor to wrap text. |
wrap | wrap | boolean | false | Sets editor to wrap text. |
valueUpdateMode | value-update-mode | "start" , "end" , or "select" | "select" | Specifies the selection behavior after the value has been updated. |
hideGutter | hide-gutter | boolean | false | Hides the editor gutter. |
hideGutterLineHighlight | hide-gutter-line-highlight | boolean | false | Hides gutter highlight for the current line. |
hidePrintMargin | hide-print-margin | boolean | false | Hides the print margin (vertical ruler). |
basePath | base-path | string | ace/ folder relative to module import path. | Specifies the location to load additional ACE resources. |
Event | Description |
---|---|
change | Triggered when the editor's value changes (will trigger for each keystroke). |
ready | Triggered after the ace editor has been initialized. |
blur | Triggered when the editor loses focus. |
FAQs
Custom element wrapper for the ace editor (https://ace.c9.io/)
The npm package ace-custom-element receives a total of 528 weekly downloads. As such, ace-custom-element popularity was classified as not popular.
We found that ace-custom-element demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.