Headless rich block-based WYSIWYG editor
npm install @typeblox/coreHeadless block-based WYSIWYG Editor
``bash`
npm install @typeblox/core
`
import { Typeblox } from "@typeblox/core";
const TypeBoxEditor = new Typeblox();
const content = "
This is a sample text
";const onChange = () => {
// your code for updating content
}
TypeBoxEditor.init({
HTMLString: content,
onUpdate: onChange,
extensions: [ // You can define your own modules
{
name: "newExtension",
onClick: () => {
(window as any).typebloxEditor?.blox().getCurrentBlock()?.toggleStyle('text-align', 'left');
},
isActive: () => (window as any).typebloxEditor?.style().getStyle().textAlign === "left",
iconElement: (
),
},
],
blocks: { // Apply some default styling to blocks
headline1: {
defaults: {
styles: "color: red;"
}
},
customBlock: { // Define custom block
tag: "div",
visibleName: "My block",
blockName: "customBlock",
description: "This is a sample block description",
placeholder: "Write your content",
iconElement: (
),
}
}
});
console.log(TypeBoxEditor.blox().getBlox()); // To see instances of blocks
// Examples of operations
TypeBoxEditor.blox().getCurrentBlock()?.toggleBold(); //toggles the bold style on the selection text
TypeBoxEditor.blox().getCurrentBlock()?.toggleItalic(); //toggles the bold style on the selection
TypeBoxEditor.blox().getCurrentBlock()?.toggleType("headline1"); //change the type of the block to h1
TypeBoxEditor.format().clearFormat(); //clears the text style
``
- Lightweight utility library
- Easy integration into any project
- Provides core Typeblox functionalities
This package is licensed under Apache License 2.0 + Commons Clause. See the License file.