@cyberskill/cyber-editor 3.9.0 → 4.0.0

package/README.md

@@ -1,5 +1,127 @@
-## Instructions
+# @cyberskill/cyber-editor
 
-<a href="https://github.com/cyberskill-world/.github/wiki">
-    Read here
-</a>
+A powerful, rich text editor based on Tiptap, designed for the CyberSkill ecosystem. It provides a seamless editing experience with advanced features like image resizing, video embedding, accordion components, and HTML block rendering.
+
+## 📦 Installation
+
+Install the package via your preferred package manager:
+
+```bash
+pnpm add @cyberskill/cyber-editor
+# or
+npm install @cyberskill/cyber-editor
+# or
+yarn add @cyberskill/cyber-editor
+```
+
+## 🚀 Usage
+
+The library exports two main components to distinguish between editing (Admin) and viewing (Client) modes.
+
+### 1. Import Styles
+
+First, import the necessary CSS in your root file (e.g., `_app.tsx`, `layout.tsx`, or `main.tsx`):
+
+```tsx
+import '@cyberskill/cyber-editor/index.css';
+```
+
+### 2. Admin / Edit Mode (`CyberEditor`)
+
+Use `CyberEditor` when you want to provide a full editing interface with a toolbar.
+
+```tsx
+import { CyberEditor } from '@cyberskill/cyber-editor';
+import { useState } from 'react';
+
+function AdminPage() {
+    const [content, setContent] = useState('<p>Hello World</p>');
+
+    return (
+        <CyberEditor
+            content={content}
+            onChange={(newContent) => setContent(newContent)}
+            className="my-editor"
+        />
+    );
+}
+```
+
+### 3. Client / View Mode (`CyberViewer`)
+
+Use `CyberViewer` when you just want to display the content. It is read-only and lightweight without the toolbar.
+
+```tsx
+import { CyberViewer } from '@cyberskill/cyber-editor';
+
+function PostPage({ content }) {
+    return (
+        <div className="article-content">
+            <CyberViewer content={content} />
+        </div>
+    );
+}
+```
+
+## 🛠 Development & Contribution
+
+### Project Structure
+
+- `src/modules/*`: Contains individual editor extensions (Image, Video, Table, etc.).
+- `src/shared/*`: Shared utilities, providers, and styles.
+- `src/playground/*`: A built-in playground for testing during development.
+- `src/index.ts`: The main entry point for the library.
+
+### Common Commands
+
+- **Start Playground**: Run the local dev server to test changes.
+    ```bash
+    pnpm dev
+    ```
+- **Build Library**: Build the package for distribution.
+    ```bash
+    pnpm build
+    ```
+
+### 🔄 Versioning & Publishing
+
+When the development team adds new components or fixes bugs, follow this workflow to update the package:
+
+1.  **Develop & Test**:
+    - Make changes in `src/modules` or `src/shared`.
+    - Test using the playground (`pnpm dev`).
+
+2.  **Commit Changes**:
+    - Use conventional commits (e.g., `feat: add new chart component` or `fix: image resize bug`).
+
+3.  **Update Version**:
+    - **Patch** (Bug fixes): `0.0.x`
+        ```bash
+        npm version patch
+        ```
+    - **Minor** (New features, non-breaking): `0.x.0`
+        ```bash
+        npm version minor
+        ```
+    - **Major** (Breaking changes): `x.0.0`
+        ```bash
+        npm version major
+        ```
+    *This command automatically updates `package.json` and creates a git tag.*
+
+4.  **Publish**:
+    - Push the tag to the repository.
+    - Publish to the registry (if handled manually, or let CI/CD handle it).
+    ```bash
+    pnpm publish
+    ```
+
+## 🧩 Adding New Components
+
+To add a new feature (e.g., a Chart extension):
+
+1.  Create a new folder in `src/modules/chart`.
+2.  Implement the Tiptap node/extension.
+3.  Create a React Component for the NodeView (if it has UI).
+4.  Export the extension in `src/shared/utils/extensions.ts`.
+5.  Test in `src/playground/App.tsx`.

package/dist/CyberEditor.d.ts

@@ -0,0 +1,2 @@
+import type { I_CyberEditorProviderProps } from './shared/typescript';
+export declare function CyberEditor(props: I_CyberEditorProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/CyberViewer.d.ts

@@ -0,0 +1,2 @@
+import type { I_CyberEditorProviderProps } from './shared/typescript';
+export declare function CyberViewer(props: I_CyberEditorProviderProps): import("react/jsx-runtime").JSX.Element;