@cyberskill/cyber-editor

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:

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

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.

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.

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.

  pnpm dev

• Build Library: Build the package for distribution.

  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

     npm version patch

   • Minor (New features, non-breaking): 0.x.0

     npm version minor

   • Major (Breaking changes): x.0.0

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

   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.