https://github.com/codedynasty-dev/rabbit
🐰 An extensible Text Editor library for javascript.
https://github.com/codedynasty-dev/rabbit
rich-text-editor text-editor
Last synced: 3 months ago
JSON representation
🐰 An extensible Text Editor library for javascript.
- Host: GitHub
- URL: https://github.com/codedynasty-dev/rabbit
- Owner: CodeDynasty-dev
- License: mit
- Created: 2023-08-23T19:30:10.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-10T11:35:27.000Z (10 months ago)
- Last Synced: 2025-03-01T05:24:44.230Z (3 months ago)
- Topics: rich-text-editor, text-editor
- Language: TypeScript
- Homepage: https://uiedbook.github.io/Rabbit/
- Size: 5.97 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rabbit.js
A bare bone Text Editor library for javascript
Aimed to be small, simple, efficient and easy to extend.
Live Example
Example Rabbit setup
```js
import { Rabbit } from "./rabbit.js";
// creating a Rabbit instance
const BigFatRabbit = new Rabbit();
BigFatRabbit.installOn("pub"); // #pub div install point
```
Now you will get a working text editor, which comes with default actions and tools.
## Features of Rabbit
Rabbit big has ears, two big tooths, huh no sorry. i mean
- Strong Type system (typescript)
- Simple abstraction interface for
- actions (event system)
- tools (user input system)
which makes rabbit very easy to extend
- and other part of rabbits ...
next
Example ways of extending Rabbit
in Rabbit we can install tools and actions
more docs will be added later
```js
// Extending Rabbit.js
BigFatRabbit.installTool("Bold", {
text: "Bold Button",
tooling({ selectedElement, selection, range }) {
console.log(selection, selectedElement);
if (selectedElement) {
if (selection) {
if (selection === selectedElement.innerText) {
if (selectedElement?.style.fontWeight === "bold") {
selectedElement!.style.fontWeight = "unset";
} else {
selectedElement!.style.fontWeight = "bold";
}
} else {
const span = document.createElement("span");
span.innerText = selection;
span.style.fontWeight = "bold";
range!.deleteContents();
range!.insertNode(span);
}
}
}
},
});
BigFatRabbit.installTool("Color", {
text: "Color Button",
tooling({ selectedElement, selection, range }) {
console.log(selection, selectedElement);
const input = document.createElement("input");
input.type = "color";
input.addEventListener("change", (e) => {
const color = (e.target! as HTMLInputElement).value;
if (selectedElement) {
if (selection) {
if (selection === selectedElement.innerText) {
if (selectedElement?.style.color === color) {
selectedElement!.style.color = "unset";
} else {
selectedElement!.style.color = color;
}
} else {
const span = document.createElement("span");
span.innerText = selection;
span.style.color = color;
range!.deleteContents();
range!.insertNode(span);
}
}
}
});
input.click();
},
});
BigFatRabbit.installTool("Image", {
text: "Inset image",
tooling({ selectedElement, selection, range }) {
console.log(selection, selectedElement);
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.click();
input.addEventListener("change", (e) => {
const file = (e.target! as any).files[0];
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = (e) => {
const img = document.createElement("img");
img.src = e.target!.result as string;
range!.insertNode(img);
};
reader.readAsDataURL(file);
}
});
input.click();
},
});
BigFatRabbit.installTool("Link", {
text: "Inset link",
tooling({ selectedElement, selection, range }) {
console.log(selection, selectedElement);
const url = prompt("Enter URL:");
if (url) {
const link = document.createElement("a");
link.href = url;
link.textContent = selection;
range!.deleteContents();
range!.insertNode(link);
}
},
});
BigFatRabbit.installTool("Alignment", {
text: "center Alignment",
tooling({ selectedElement, selection, range }) {
console.log(selection, selectedElement);
if (selection) {
const alignedContainer = document.createElement("div");
alignedContainer.style.textAlign = "center";
alignedContainer.appendChild(range!.extractContents());
range!.insertNode(alignedContainer);
}
},
});
BigFatRabbit.installAction("paste", (e: any) => {
e.preventDefault();
const clipboardData =
e.clipboardData ||
(window as unknown as { clipboardData: object }).clipboardData;
const pastedText = clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, pastedText);
});
BigFatRabbit.installOn("pub");
// synthetic actions
// actions are attach to their editor,the document object model or fired synthetically
BigFatRabbit.installAction("synthetic-grass", () => {
console.log("grass");
});
// tool appears as a button on the toolbar
BigFatRabbit.installTool("custom", {
text: "grass",
tooling() {
BigFatRabbit.fireSyntheticAction("synthetic-grass");
},
});
```
ACTION TYPES includes
- "input"
- "paste"
- "copy"
- "contextmenu"
- "document-event name"
- "custom synthetic actions"
# Rabbit is MIT