celsowm/oasis-editor

Contribute to celsowm/oasis-editor development by creating an account on GitHub.

Summary

Oasis Editor is a TypeScript document editor that renders pages, text, tables, and other content to Canvas rather than relying on a contenteditable region. It ships as a single npm package with vanilla, React, and Vue adapters, a headless runtime, and a plugin system for adding commands, toolbar buttons, and menubar items.

What it is useful for

It fits applications that need a true paged document surface—page breaks, headers and footers, columns, footnotes, nested tables, and floating objects—where contenteditable is not enough. It also covers DOCX import and export, PDF export, and OOXML round-tripping that preserves parts of the package Oasis does not edit semantically. Engineers build product UIs on top of it through a command-oriented client, then extend behavior with plugins that register commands, keymaps, toolbar items, menubar items, floating actions, side panels, UI primitives, and lifecycle hooks. A headless Editor.create() runtime is available when the full UI shell is unnecessary.

How engineers can use it

Install with npm install oasis-editor and import the stylesheet once at the entry point. Mount the editor with createOasisEditor(root, { ui: { shell: "document" } }), then await client.ready before issuing commands such as client.commands.execute("bold"), reading state with client.getState(), or exporting with client.export.docx(). For React, use <OasisEditor ui={{ shell: "document" }} onClient={...} />; the README notes the adapter is mount-only, so new configuration requires remounting the component. The Vue adapter follows the same contract.

A plugin is a plain object implementing OasisPlugin. The README shows a TimestampPlugin that registers a command, a toolbar button, a menubar entry under "Insert/Timestamp", and a Ctrl+Alt+T keymap. The toolbar registry supports register, insertBefore, insertAfter, replace, remove, and move; ribbon groups resize automatically and can be tuned through ribbonGroupResize.

Local development uses npm install, npm run dev for the Vite demo, npm run build:lib for the package, and npm test plus npx tsc --noEmit for type checking. The README states Oasis is under active development and that the public client, command, toolbar, menubar, and plugin surfaces are being stabilized, recommending documented APIs over internal src/ files.