Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josuerhea/codecrush
Web code editor for Javascript
https://github.com/josuerhea/codecrush
Last synced: about 2 months ago
JSON representation
Web code editor for Javascript
- Host: GitHub
- URL: https://github.com/josuerhea/codecrush
- Owner: JosueRhea
- Created: 2023-01-05T14:48:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-07T21:03:11.000Z (almost 2 years ago)
- Last Synced: 2024-11-23T10:09:48.633Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://codecrush-iota.vercel.app
- Size: 613 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeCrush
A fully customizable editor for web!
Table of Contents
=================
* [Core package](#core-package)
* [React package](#codecrush-react)
# Core package
If you want to use the editor for your vanilla js without any framework.
## Installation
Choose your favorite package manager
```cmd
pnpm install codecrush-core
```
```cmd
npm install codecrush-core
```
```cmd
yarn add codecrush-core
```
## Getting started
```ts
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
```ts
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.
```ts
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("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("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");
});
}
```
# Codecrush React
A wrapper for the core package for react.
## Installation
Choose your favorite package manager
```cmd
pnpm install codecrush-core codecrush-react
```
```cmd
npm install codecrush-core codecrush-react
```
```cmd
yarn add codecrush-core codecrush-react
```
## Getting started
```tsx
import { Editor } from "codecrush-react";
import "codecrush-core/dist/index.css"; // styles from the core package
function App() {
return (
);
}
export default App;
```
## Themes
List of all themes included
```ts
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.
```tsx
import { Editor } from "codecrush-react";
import "codecrush-core/dist/index.css"; // styles from the core package
import { Component, ActivityBarComponent } from "codecrush-core";
class Example extends Component {
onReady() {
const activityBar =
this.editor.getComponent("activity-bar"); // get the activity bar
activityBar.registerActivity("key-pressed", "Keyboard: "); // register a new entry with id and text
}
onKeyPressed(key: string) {
const activityBar =
this.editor.getComponent ("activity-bar");
activityBar.updateActivity("key-pressed", "Keyboard: " + key); //update the activity when the key is pressed
}
}
function App() {
return (
);
}
export default App;
```