npm package: @sc-360-v2/macros-editor
Description: `@sc-360-v2/macros-editor` is an advanced library designed for creating macros in text editors and code editors. It integrates with popular tools like Froala Editor and Monaco Editor, enabling you to build feature-rich and interactive text editing experie
Latest version: 0.1.90

# @sc-360-v2/macros-editor

## ✨ Overview

`@sc-360-v2/macros-editor` is an advanced library designed for creating macros in text editors and code editors. It integrates with popular tools like Froala Editor and Monaco Editor, enabling you to build feature-rich and interactive text editing experiences. This package simplifies the process of embedding macro functionality and code-editing capabilities while maintaining a small footprint.

## 🔧 Installation

Follow these steps to install and configure the library in your project:

### Install the library

Run the following command to add the library to your project:

```bash
npm install @sc-360-v2/macros-editor
```

### Install Required Dependencies

To use Code Editor with your project, you must install the required dependencies. Specifically monaco-editor (the Monaco Editor core) need to be installed separately:

```bash
npm install monaco-editor
```

## 🚀 Usage

Here’s a basic example of how to use the `@sc-360-v2/macros-editor` library in your project.

### 1. Using the Text Editor

```tsx
import React from "react";
import TextEditor from "@sc-360-v2/macros-editor/text-editor";
import "@sc-360-v2/macros-editor/text-editor.scss"; //add styles dependencies

const App = () => {
  const handleContentChange = (content: string) => {
    console.log("Updated content:", content);
  };
  const handleContentBlur = (content: string) => {
    console.log("Updated content:", content);
  };

  return (
    <div>
      <h1>Text Editor with Macros</h1>
      <TextEditor
        content="<h1>Text Editor with Macros</h1>"
        onContentChange={handleContentChange}
        oncontentBlur={handleContentBlur}
      />
    </div>
  );
};

export default App;
```

### 2. Using the Code Editor

```tsx
import React from "react";
import CodeEditor from "@sc-360-v2/macros-editor/code-editor";

const App = () => {
  const handleCodeChange = (code: string) => {
    console.log("Updated code:", code);
  };

  return (
    <div>
      <h1>Code Editor with Macros</h1>
      <CodeEditor onContentChange={handleCodeChange} />
    </div>
  );
};

export default App;
```

## 📂 File Structure

Your project will look like this after installation:

```
my-project/
├── src/
│   ├── components/
│   └── App.tsx
├── node_modules/
├── package.json
├── tsconfig.json
└── README.md
```

## 📦 Library Build Process

The build process is optimized to reduce the final bundle size. Gzipped assets are created, and unnecessary files are excluded.

1. Run the build command:

   ```bash
   npm run build
   ```

2. The output will be available in the `dist/` folder. You can publish this to npm or use it directly in your project.

## 🌟 Features

- 📄 **Text Editor** with rich macro support
- 💻 **Code Editor** powered by Monaco Editor
- ✨ **Customizable macros** for dynamic content
- 🚀 Built with React and TypeScript for type safety
- 📚 Easy integration into any project

## 🛡️ License

This library is licensed under the [MIT License](https://opensource.org/licenses/MIT).