codecrush-core
v0.0.6
Published
An javascript/typescript editor for web
Downloads
5
Readme
Codecrush Core
An javascript/typescript editor for web
Installation
Choose your favorite package manager
pnpm install codecrush-core
npm install codecrush-core
yarn add codecrush-core
Getting started
import { initEditor } from "codecrush-core";
import "codecrush-core/dist/index.css"; // styles from the core package
const app = document.getElementById("app");
if (app) {
initEditor({
height: 400,
id: "js-editor",
parent: app,
theme: "material-darker",
}).then(() => {
console.log("editor loaded");
});
}
Themes
List of all themes included
export type EditorThemes =
| "dracula-soft"
| "material-darker"
| "material-default"
| "material-ocean"
| "material-palenight"
| "nord"
| "one-dark-pro"
| "poimandres"
| "rose-pine-moon"
| "rose-pine"
| "slack-dark";
Extending the editor
You can create custom components for the editor. The following example we create a component to register in the activity bar which key is pressed.
In this case we'll be using onReady
and onKeyPressed
events provided by the editor.
import { initEditor, Component, ActivityBarComponent } from "codecrush-core";
import "codecrush-core/dist/index.css"; // styles from the core package
class Example extends Component {
onReady() {
const activityBar =
this.editor.getComponent<ActivityBarComponent>("activity-bar"); // get the activity bar
activityBar.registerActivity("key-pressed", "Keyboard: ", false); // register a new entry with id and text
}
onKeyPressed(key: string) {
const activityBar =
this.editor.getComponent<ActivityBarComponent>("activity-bar");
activityBar.updateActivity("key-pressed", "Keyboard: " + key); //update the activity when the key is pressed
}
}
const app = document.getElementById("app");
if (app) {
initEditor({
height: 400,
id: "js-editor",
parent: app,
theme: "material-darker",
components: [Example],
}).then(() => {
console.log("editor loaded");
});
}