The Editor holds the document, the selection and the undo history, paints the layout @rebodocs/core computes, and takes keys, clicks and touches. The pieces of interface around it are separate functions, so you take the ones you want, or none. For React, use @rebodocs/react, which is built on this package.

Install

npm install @rebodocs/editor

Usage

import { Editor, createToolbar, createStatusBar, createBubble, createResponsive } from '@rebodocs/editor';

const editor = new Editor(document.querySelector('#pages')!); // the element needs a height
createToolbar(document.querySelector('#toolbar')!, editor);
createStatusBar(document.querySelector('#status')!, editor);
createBubble(editor);
createResponsive(document.body, editor);

editor.loadDocx(bytes);
editor.onChange(() => console.log(editor.pageCount));

const docx = editor.exportDocx();
const pdf = await editor.exportPdf('Contract');

Pieces

| Function | What it adds | | --- | --- | | createToolbar | Formatting, insert and review, in two rows, tabs or one row. What does not fit folds into a tray. | | createSidebar | The document menu: open, save, export, page setup, letterhead, language, appearance. A screen or a card. | | createPanel | The side panel: outline, variables, comments, tracked changes, versions. | | createStatusBar | Pages, words, the language of the text, the view, the zoom, who else is on the document. | | createRuler | Margins, indents and tab stops, by mouse or keyboard. | | createBubble | The bar beside the selection, with spelling suggestions and, on a phone, copy and paste. | | createFindBar | Find and replace (⌘F, ⌘H). | | createFocusMode | The pages alone, full screen. | | createResponsive | Narrow windows and on-screen keyboards. | | createSpellChecker | Spell checking with Hunspell dictionaries you give, read in a worker: editor.spellChecker = createSpellChecker({ dictionaries: { es: { aff, dic } } }). | | createVersionView | Two versions compared, over the document. |

A document to read

A document only to read, with its first page as a thumbnail, is @rebodocs/viewer: these pages read only, with a bar to zoom and print.

Theming

Colours are CSS variables: the canvas, the selection and the caret (--dx-canvas, --dx-selection, …), the ruler (--dx-ruler-*) and the interface (--dx-ui-*). A dark theme comes with it:

editor.theme = 'dark';                               // or 'auto', to follow the system
applyTheme(document.querySelector('#app')!, 'dark'); // the element around the pieces

The base rules sit in a CSS layer, so utility classes such as Tailwind's win over them. See styling.

Languages and fonts

import fr from './texts/fr.json'; // npm run locale -- fr texts/fr.json, in the repository
addLocale('fr', fr);
setLocale('fr');

await addFonts([
  { family: 'Raleway', src: '/fonts/Raleway-Regular.ttf' },
  { family: 'Raleway', src: '/fonts/Raleway-Bold.ttf', bold: true },
]);

The interface ships in English and Spanish; Simplified and Traditional Chinese come apart, for the applications that want them:

import zhHans from '@rebodocs/editor/locales/zh-Hans';
import zhHant from '@rebodocs/editor/locales/zh-Hant';
addLocale('zh-Hans', zhHans); // zh, zh-CN, zh-SG
addLocale('zh-Hant', zhHant); // zh-TW, zh-HK, zh-Hant

A browser in Chinese then shows Chinese by itself, until the application sets a language with setLocale.

Fonts you add are listed in the toolbar, embedded in PDFs, and carried in the DOCX when their licence allows (editor.embedFonts = 'subset' keeps only the characters used).

How it works

• No contenteditable. A hidden textarea follows the caret; what is typed there goes into the model, and on-screen keyboards compose as usual.
• Painting is placing. Each piece of text is an absolutely positioned span where the layout put it; the browser never wraps a line. Only the pages near the view are drawn.
• Zoom is a transform, so zooming never re-breaks lines.
• Accessible. A screen reader hears what the caret moves over and where it is; every piece works from the keyboard (F6, Alt+F10), and high contrast is kept.

Compatibility

Modern browsers. Spell checking runs in a Web Worker made from a Blob, so a Content Security Policy must allow worker-src blob:.

Status

0.13: ready to try in production; the API may change before 1.0. See the changelog and the known limits.

License

MIT. Bundled third-party code is listed in THIRD_PARTY_NOTICES.md.