SATE

Saad's Awesome Text Editor - a TypeScript-based utility for encoding and decoding text content into a structured format, enabling seamless content rendering within React applications.

Table of Contents

1. Introduction
2. Installation
3. Getting Started
4. Usage

Introduction

SATE is a versatile text manipulation tool designed to simplify the process of encoding and decoding text content, making it easier to render structured content in React applications. This documentation provides comprehensive information on how to utilize SATE effectively.

Installation

To begin using SATE in your project, follow these installation steps:

npm install sate-editor
# or
yarn add sate-editor

Getting Started

Once you've installed SATE, you can start incorporating it into your project. Here's a quick guide to getting started:

1. Import SATE into your JavaScript or TypeScript file:

import { SATE } from 'sate-editor/dist';

2. Create an instance of SATE:

    const sateEditor = new SATE();

3.Begin encoding and decoding text content with SATE's powerful functionality.

Usage

Prerequisites

Make sure you have Node.js and npm (Node Package Manager) installed on your system.

Step 1: Create a React Application

If you don't have a React application already set up, you can create one using Create React App or your preferred method.

npx create-react-app sate-demo
cd sate-demo

Step 2: Install SATE Editor

Navigate to your React application's directory and install the Pager project as a dependency:

npm install sate-editor
# or
yarn add sate-editor

Step 3: Create a Component

Create a new React component where you want to use the SATE Editor. For example, let's create a component called SateDemo.js:

// src/SateDemo.js

import React, { useState } from 'react';
import { SATE } from 'sate-editor/dist';

const SateDemo = () => {
  const [text, setText] = useState('');
  const [encodedData, setEncodedData] = useState([]);
  const [jsxElements, setJsxElements] = useState(null);
  const sateEditor = new SATE()

  const handleEncode = () => {
    // ENCODE THE TEXT INPUT 
    const data = sateEditor.encode(text);
    setEncodedData(data);
  };

  const handleDecode = () => {
    // DECODE THE ENCODED TEXT
    const elements = sateEditor.decode(encodedData);
    setJsxElements(elements);
  };

  return (
    <div>
      <h1>Sate Editor Demo</h1>
      <textarea
        placeholder="Enter text content here..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      ></textarea>
      <br />
      <button onClick={handleEncode}>Encode Text</button>
      <button onClick={handleDecode}>Decode Text</button>
      <div>
        <h2>Encoded Data:</h2>
        <pre>{JSON.stringify(encodedData, null, 2)}</pre>
      </div>
      <div>
        <h2>Decoded JSX:</h2>
        {jsxElements}
      </div>
    </div>
  );
};

export default SateDemo;

Step 4: Add the Component to Your App

In your src/App.js file or any other entry point, import and render the SateDemo component:

// src/App.js

import React from 'react';
import './App.css';
import SateDemo from './SateDemo';

function App() {
  return (
    <div className="App">
      <SateDemo />
    </div>
  );
}

export default App;

Step 5: Run Your React App

Start your React application:

npm start
# or
yarn start

Visit http://localhost:3000 in your web browser to see the Pager Demo in action. You can enter text, encode it, and then decode it to render structured content as JSX elements.

SATE is released under the MIT License. Please review the license for information regarding usage and distribution.

Thank you for choosing SATE for your text encoding and decoding needs. If you have any questions or encounter any issues, don't hesitate to reach out to our support team. Happy coding!