Rabbit.js

A bare bone Text Editor library for javascript Aimed to be small, simple, efficient and easy to extend.

Live Test

Example Rabbit setup

import{Rabbit}from"./rabbit.js";// creating a Rabbit instanceconstBigFatRabbit=newRabbit();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

// Extending Rabbit.jsBigFatRabbit.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{constspan=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);constinput=document.createElement("input");input.type="color";input.addEventListener("change",(e)=>{constcolor=(e.target!asHTMLInputElement).value;if(selectedElement){if(selection){if(selection===selectedElement.innerText){if(selectedElement?.style.color===color){selectedElement!.style.color="unset";}else{selectedElement!.style.color=color;}}else{constspan=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);constinput=document.createElement("input");input.type="file";input.accept="image/*";input.click();input.addEventListener("change",(e)=>{constfile=(e.target!asany).files[0];if(file&&file.type.startsWith("image/")){constreader=newFileReader();reader.onload=(e)=>{constimg=document.createElement("img");img.src=e.target!.resultasstring;range!.insertNode(img);};reader.readAsDataURL(file);}});input.click();},});BigFatRabbit.installTool("Link",{text: "Inset link",tooling({ selectedElement, selection, range }){console.log(selection,selectedElement);consturl=prompt("Enter URL:");if(url){constlink=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){constalignedContainer=document.createElement("div");alignedContainer.style.textAlign="center";alignedContainer.appendChild(range!.extractContents());range!.insertNode(alignedContainer);}},});BigFatRabbit.installAction("paste",(e: any)=>{e.preventDefault();constclipboardData=e.clipboardData||(windowasunknownas{clipboardData: object}).clipboardData;constpastedText=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 syntheticallyBigFatRabbit.installAction("synthetic-grass",()=>{console.log("grass");});// tool appears as a button on the toolbarBigFatRabbit.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