visual-editor

Box-Edit (for PreTeXt)

The visual editor for PreTeXt

@pretextbook/visual-editor

A React-based visual editor for PreTeXt documents using TipTap and ProseMirror.

Features

• TipTap Extensions: Custom TipTap extensions for PreTeXt elements (divisions, theorems, definitions, etc.)
• React Components: Reusable React components for building visual editors
• Dual Build Modes:
  • Library mode for use in other packages
  • Webview mode for VS Code extension integration

Installation

npm install @pretextbook/visual-editor

Usage as a Library

Importing Components

import { VisualEditor, MenuBar, BubbleMenu } from "@pretextbook/visual-editor";
import "@pretextbook/visual-editor/styles";

Importing TipTap Extensions

import {
  Divisions,
  Blocks,
  Inline,
  Title,
  TheoremLike,
  Definition,
  MathInline,
  MathEquation,
  KeyboardCommands,
} from "@pretextbook/visual-editor";

// Use in your TipTap editor
const editor = useEditor({
  extensions: [
    Divisions,
    Blocks,
    Inline,
    Title,
    // ... other extensions
  ],
  content: yourContent,
});

Utilities

import { json2ptx, cleanPtx, knownTags } from "@pretextbook/visual-editor";

// Convert TipTap JSON to PreTeXt XML
const ptxXml = json2ptx(editorJson);

// Clean PreTeXt source
const cleanedPtx = cleanPtx(rawPtx);

Development

Build Commands

• npm run build:lib - Build the library for use in other packages
• npm run build:webview - Build the webview for VS Code extension
• npm run build:all - Build both library and webview versions
• npm run dev - Start development server
• npm run watch - Watch mode for development

Architecture

This package exports:

• TipTap Extensions: Custom node and mark types for PreTeXt elements
• React Components: UI components for the visual editor
• Utilities: Helper functions for converting between formats

Dependencies

• React 18+
• TipTap 3.14+
• KaTeX for math rendering

License

See LICENSE file in the repository root.

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});