@lms-cms/editor

Editor component for the LMS CMS system, providing form-based content creation and editing capabilities.

Overview

This package contains the editor components that enable users to create, edit, and manage educational content in the LMS CMS. It leverages React Hook Form for efficient form handling and Zod for schema validation.

Installation

npm install @lms-cms/editor

Dependencies

• @lms-cms/core: Core LMS CMS functionality
• react-hook-form: Form state management and validation
• @hookform/resolvers: Form validation integration with Zod
• zod: Schema validation
• React (peer dependency): >=18.0.0
• React DOM (peer dependency): >=18.0.0

Features

• LMSEditor: Main editor component for content documents
• BlockToolbar: Toolbar for adding new blocks to content
• BlockCanvas: Canvas for rendering and editing blocks
• Block Selection: Interactive block selection and editing
• Read-only Mode: Support for viewing content without editing
• Real-time Updates: Live content changes and synchronization
• Equation Support: Full integration with equation block for mathematical content

Usage

LMSEditor

The main editor component for creating and editing content documents:

import { LMSEditor } from '@lms-cms/editor';
import type { ContentDoc } from '@lms-cms/core';

function ContentEditor({ doc, onChange }) {
  return (
    <LMSEditor
      doc={doc}
      onChange={onChange}
      readOnly={false}
    />
  );
}

BlockToolbar

Toolbar component for adding new blocks to the editor:

import { BlockToolbar } from '@lms-cms/editor';

function EditorWithToolbar({ doc, onChange }) {
  const addBlock = (type: string) => {
    // Logic to add a new block of the specified type
    const newBlock = createBlock(type, getDefaultData(type));
    onChange({
      ...doc,
      blocks: [...doc.blocks, newBlock]
    });
  };

  return (
    <div>
      <BlockToolbar onAddBlock={addBlock} />
      <LMSEditor doc={doc} onChange={onChange} />
    </div>
  );
}

BlockCanvas

Canvas component for rendering and editing blocks:

import { BlockCanvas } from '@lms-cms/editor';

function CustomEditor({ doc, onChange }) {
  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);

  return (
    <BlockCanvas
      doc={doc}
      onChange={onChange}
      selectedBlockId={selectedBlockId}
      onSelectBlock={setSelectedBlockId}
      readOnly={false}
    />
  );
}

Editor Components

LMSEditor

Main editor component that provides:

• Document-level editing interface
• Block management and ordering
• Real-time content updates
• Read-only mode support

Props:

• doc: ContentDoc: The content document to edit
• onChange: (doc: ContentDoc) => void: Callback for document changes
• readOnly?: boolean: Whether the editor is in read-only mode

BlockToolbar

Toolbar component for adding new blocks:

• Displays available block types
• Handles block creation
• Can be disabled when needed

Props:

• onAddBlock: (type: string) => void: Callback when a block type is selected
• disabled?: boolean: Whether the toolbar is disabled

BlockCanvas

Canvas component for rendering blocks:

• Renders all blocks in a document
• Handles block selection and editing
• Supports custom styling

Props:

• doc: ContentDoc: The content document to render
• onChange: (doc: ContentDoc) => void: Callback for document changes
• selectedBlockId?: string | null: Currently selected block ID
• onSelectBlock: (id: string | null) => void: Callback for block selection
• readOnly?: boolean: Whether the canvas is in read-only mode

Form Validation

The editor uses React Hook Form with Zod validation:

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { courseSchema } from "@lms-cms/core";

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  resolver: zodResolver(courseSchema),
});

Customization

Styling

The editor components support custom styling through CSS classes:

.lms-editor {
  /* Custom editor styles */
}

.lms-editor-field {
  /* Custom field styles */
}

.lms-editor-error {
  /* Custom error styles */
}

Field Components

Create custom field components:

import { FormField } from '@lms-cms/editor';

function CustomField({ name, label, ...props }) {
  return (
    <FormField name={name} label={label}>
      <input {...props} />
    </FormField>
  );
}

Development

# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Type checking
npm run type-check

Scripts

• npm run build: Build the package for production
• npm run dev: Build in watch mode for development
• npm run test: Run tests with Vitest
• npm run type-check: Run TypeScript type checking without emitting files

Best Practices

• Use the provided validation schemas for consistency
• Implement proper error handling and user feedback
• Leverage the auto-save functionality for better UX
• Test form validation thoroughly
• Follow accessibility guidelines for form components
• Use semantic HTML elements for proper structure

Architecture

src/
  LMSEditor.tsx     # Main editor component
  BlockToolbar.tsx  # Toolbar for adding blocks
  BlockCanvas.tsx   # Canvas for rendering blocks
  __tests__/        # Component tests
  index.ts          # Main exports