Skip to content

Add vanilla JS package (@eigenpal/docx-editor-js) #89

@jedrazb

Description

@jedrazb

Summary

Add a framework-agnostic vanilla JS package that exposes the editor as a simple class consumers can mount into any DOM element — no React, Vue, or other framework required.

Motivation

The core package (@eigenpal/docx-core) is already fully framework-agnostic: managers, layout pipeline, ProseMirror extensions, and DOCX parsing all work without any framework. The React and Vue packages are orchestration wrappers. A vanilla JS package would:

  • Enable usage in non-React/Vue environments (Svelte, Angular, plain HTML, web components, etc.)
  • Provide the smallest possible bundle (no framework overhead)
  • Serve as the foundation that framework wrappers could optionally build on top of

Proposed API

import { DocxEditor } from '@eigenpal/docx-editor-vanilla';

const editor = new DocxEditor(document.getElementById('editor'), {
  zoom: 1,
  // options...
});

await editor.load(docxBlob);

// Imperative API
editor.focus();
editor.undo();
editor.redo();
const blob = await editor.save();
editor.destroy();

// Events
editor.on('selectionChange', (state) => { ... });
editor.on('contentChange', () => { ... });

Scope

In scope

  • Orchestration class that wires existing core managers, layout pipeline, and ProseMirror
  • Hidden ProseMirror mount + visible pages rendering via LayoutPainter
  • Click/selection handling via layout-bridge
  • Transaction listener → repaint loop
  • Imperative API: load(), save(), focus(), destroy(), undo(), redo()
  • Event emitter for selection/content changes
  • Headless toolbar API (expose commands, let consumers build their own UI)

Out of scope (for now)

  • Built-in toolbar UI (consumers use the commands API)
  • Dialogs (find/replace, insert image, etc.)
  • These can be added later as optional add-ons

Implementation Notes

The vanilla package replaces what React does in ~3 files:

React Component Vanilla Equivalent
DocxEditor.tsx (state wiring) Orchestration class, wire managers
PagedEditor.tsx (render loop, mouse handlers) Transaction listener → repaint loop
HiddenProseMirror.tsx (PM mount) new EditorView(hiddenDiv, {...})

Estimated ~500-800 lines of new code, primarily wiring existing @eigenpal/docx-core APIs together. No new rendering or parsing logic needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions