📝 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.