@sc-360-v2/macros-editor NPM

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

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:

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

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

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.

Run the build command:
```
npm run build
```
The output will be available in the dist/ folder. You can publish this to npm or use it directly in your project.