
---

# 📑 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 (
    <TextEditor
      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:
          '<p style="text-align:center;"><span style="font-size:16px;"><strong>This is Text editor</strong></span></p>',
      }}
    />
  );
};

export default App;
```

---

## ⚙️ Props

### `config`

| 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     |

### `textEditorJson`

| 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         |

---

<!-- ## 🛠 Development -->


---

## 🤝 Contributing

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

---

<!-- ## 📜 License -->

<!-- [MIT](./LICENSE) © 2025 PACE Team -->

---


