---

📑 Text Editor Library

A customizable Text Editor component built with React + TypeScript + Vite, designed to support text formatting, linking to sheets, and shape-based styling.

✨ Features

* 🎨 Rich Text Formatting – Bold, Italic, Underline, Highlight
* 🔗 Link to Sheet – Attach and navigate to sheet items with click handlers
* 🖼 Customizable Styling – Borders, background, paddings, and more
* ⭕ Shape Support – Define dimensions and shapes (circle, rectangle, etc.)
* ⚡ React + TypeScript – Fully typed props for a smooth developer experience

---

📦 Installation

``bash
npm install pace-texteditor-lib

or

yarn pace-texteditor-lib
`

---

🚀 Usage

`tsx
import React from "react";
import { TextEditor } from "your-text-editor-lib";

const App = () => {
const dummy = (item: any) => {
console.log("Clicked sheet item:", item);
};

return (
Text="Hello World"
onChange={onChange}
config={{
linkToSheet: {
linkToSheet: true,
sheetItems: [
{ label: "Prev", key: "1234" },
{ label: "Next", key: "2345" },
],
onClick: dummy,
},
textFormatting: {
bold: true,
italic: false,
highlight: true,
underline: true,
},
}}
textEditorJson={{
style: {
borderColor: "#0070c0",
borderWidth: "5px",
borderStyle: "Solid",
backgroundColor: "#97baff",
horizontalPadding: 0,
verticalPadding: 0,
},
selectedShapeType: {
height: 100,
width: 100,
name: "circle",
},
rawText:
'

This is Text editor

',
}}
/>
);
};

export default App;
`

---

⚙️ Props

$3

| Key | Type | Description |
| ---------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------- |
| linkToSheet | { linkToSheet: boolean; sheetItems: {label: string; key: string;}[]; onClick: (item:any)=>void } | Configure sheet linking with callback |
| textFormatting | { bold: boolean; italic: boolean; underline: boolean; highlight: boolean } | Enable/disable formatting options |

$3

| Key | Type | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- |
| style | { borderColor?: string; borderWidth?: string; borderStyle?: string; backgroundColor?: string; horizontalPadding?: number; verticalPadding?: number } | Customize editor style |
| selectedShapeType | { height: number; width: number; name: string } | Define shape type and dimensions |
| rawText | string (HTML)` | Preloaded editor content |

---




---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open a PR or raise an issue.

---





---