📑 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

npm install pace-texteditor-lib
# or
yarn pace-texteditor-lib

🚀 Usage

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 |

🤝 Contributing

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