📝 Shahnevis React

Shahnevis React is a React-based code editor powered by shahnevis-core. It features syntax highlighting, minimap, multi-cursor support, and a plugin system, making it easy to integrate into any project.

🚀 Features

✅ Syntax highlighting with multiple languages
✅ Minimap rendering for better navigation
✅ Code folding and indentation guides
✅ Multi-cursor and selection support
✅ Undo/Redo stack management
✅ Cursor and scroll position tracking
✅ Plugin system for extensibility

📦 Installation

Install Shahnevis React via npm:

npm install shahnevis-react

or using yarn:

yarn add shahnevis-react

Since this package depends on shahnevis-core, ensure it's installed as well:

npm install shahnevis-core

🛠️ Usage

Use the <Editor /> component inside your React app:

import Editor from "shahnevis-react";

const MyCodeEditor = ({ activeTab, handleCodeChange, handleFoldedBlocksChange, handleCursorPositionChange, handleScrollPositionChange }) => {
  return (
    <Editor
      id={activeTab.id}
      code={activeTab.code}
      onCodeChange={handleCodeChange}
      foldedBlocks={activeTab.foldedBlocks}
      onFoldedBlocksChange={handleFoldedBlocksChange}
      cursorPosition={activeTab.cursorPosition}
      scrollPosition={activeTab.scrollPosition}
      stack={activeTab.stack}
      onCursorPositionChange={handleCursorPositionChange}
      onScrollPositionChange={handleScrollPositionChange}
      pluginURLs={[
        new URL("./plugins/pluginLivePreview.js", import.meta.url).href
      ]}
    />
  );
};

export default MyCodeEditor;

🔹 Props

| Prop Name | Type | Description | |-------------------------|----------|-------------| | id | string | Unique identifier for the editor instance | | code | string | The initial code content | | onCodeChange | func | Callback when the code is updated | | foldedBlocks | array | List of folded code blocks | | onFoldedBlocksChange | func | Callback when folded blocks change | | cursorPosition | object | Stores the cursor position | | scrollPosition | object | Tracks the scroll position | | stack | object | Undo/Redo stack management | | onCursorPositionChange | func | Callback when the cursor moves | | onScrollPositionChange | func | Callback when the user scrolls | | pluginURLs | array | List of plugin URLs to load |

🔌 Plugin System

Shahnevis React fully supports plugins from shahnevis-core.

📥 Registering a Plugin

To create and register a custom plugin, use this format:

const myCustomPlugin = {
  init() {
    console.log("Custom Plugin Loaded!");
  },
  onLanguageChange(language) {
    console.log(`Language changed to: ${language}`);
  },
  onInput() {
    console.log("User typed something!");
  }
};

🌍 Loading External Plugins

To load an external plugin dynamically:

import { loadExternalPlugins } from "shahnevis-core";

const pluginURLs = [
  new URL("./plugins/pluginLivePreview.js", import.meta.url).href
];

loadExternalPlugins(pluginURLs);

🎨 Customization

Shahnevis React can be customized via:

• Initial code: Pass a string as code
• Language mode: Automatically detected
• Plugins: Extend functionality via external plugins
• Undo/Redo stack: Manage editor history

📜 License

This project is licensed under the MIT License.