PreTeXt Plus Editor

An in-browser editor for PreTeXt documents with visual and code editing modes.

Installation

npm install @pretextbook/web-editor

Usage

Basic Setup

import React, { useState } from 'react';
import { Editors } from '@pretextbook/web-editor';
import '@pretextbook/web-editor/dist/web-editor.css';

function App() {
  const [content, setContent] = useState('');
  const [title, setTitle] = useState('My Document');

  return (
    <Editors
      content={content}
      onContentChange={setContent}
      title={title}
      onTitleChange={setTitle}
      onSaveButton={() => console.log('Save clicked')}
      saveButtonLabel="Save"
      onCancelButton={() => console.log('Cancel clicked')}
      cancelButtonLabel="Cancel"
    />
  );
}

export default App;

Styling

Important: This package uses Tailwind CSS internally, but all styles are pre-compiled and bundled in the CSS file. You don't need to install or configure Tailwind CSS in your project.

Simply import the CSS file:

import '@pretextbook/web-editor/dist/web-editor.css';

Or in your CSS file:

@import '@pretextbook/web-editor/dist/web-editor.css';

All button styles, layout, and MenuBar styling will work automatically without any additional setup.

@import '@pretextbook/web-editor/dist/web-editor.css';

Props

The Editors component accepts the following props:

interface editorProps {
  content: string;                          // The current PreTeXt content
  onContentChange: (value: string | undefined) => void;  // Called when content changes
  title?: string;                           // Document title
  onTitleChange?: (value: string) => void;  // Called when title changes
  onSaveButton?: () => void;                // Save button callback
  saveButtonLabel?: string;                 // Custom save button text
  onCancelButton?: () => void;              // Cancel button callback
  cancelButtonLabel?: string;               // Custom cancel button text
}

Features

• Visual Editor: Intuitive WYSIWYG editor for PreTeXt documents using Tiptap
• Code Editor: Monaco-powered code editor with syntax highlighting
• Full Preview: Full-page preview of your document
• Synchronized Editing: Changes in one editor instantly reflect in the other
• Split View: View code and visual editor side-by-side
• Math Support: KaTeX support for rendering mathematical expressions
• Keyboard Shortcuts: Intuitive keyboard navigation and commands

Peer Dependencies

This package requires:

• react >= 16.8.0
• react-dom >= 16.8.0

These must be installed separately in your project.

Browser Support

This package requires a modern browser with ES2020 support.

Development

For development setup:

npm install
npm run dev

To build the library:

npm run build

To build the demo application:

npm run build:demo

Publishing

See PUBLISHING.md for instructions on publishing to npm.

License

MIT