Files Word documents

Word documents

Rebodocs is an optional peer: with @rebodocs/core and @rebodocs/viewer installed, a .docx is read by its engine and shown in Rebodocs' viewer. Without it, the drive shows a .docx as any other file.

Start

Give it Rebodocs

import { FileDrive } from '@rebofiles/react';
import { pictureOfDocx, previewDocx, textOfDocx, thumbDocx, viewDocx } from '@rebofiles/react/rebodocs'; // needs @rebodocs/core and @rebodocs/viewer

<FileDrive
  base="/api/files"
  previewDocument={previewDocx}   // the details: its first paragraphs
  viewDocument={viewDocx}         // the viewer: its pages, with Rebodocs' zoom
  thumbDocument={thumbDocx}       // the grid, until a picture of it is made
  pictureDocument={pictureOfDocx} // that picture, of its first page, made at upload
  textDocument={textOfDocx}       // what is written in it, to find it by
  onOpenDocument={(file, url) => router.push(`/documents/${file.id}`)}
/>

Editor

Open it, and save it back

“Open in Rebodocs” calls onOpenDocument with an address to read the file from; saving it back is an upload of a new version.

import { DocsEditor } from '@rebodocs/react';
import { useActions } from '@rebofiles/react';

const { upload } = useActions();
<DocsEditor docx={bytes} onSave={(docx) => upload(new File([docx], file.name), { file: file.id })} />

The playground does it, in apps/playground/src/Editor.tsx: ⌘S saves, and the drive shows the document as its next version.

New

Create a document

import { newDocx } from '@rebofiles/react/rebodocs';

// "New document" in the Upload menu: an empty .docx,
// named by the person, in the folder they are in, and opened with onOpenDocument.
<FileDrive base="/api/files" newDocument={newDocx} viewDocument={viewDocx} onOpenDocument={open} />

newDocument is what makes an empty one: newDocx of Rebodocs, or a template of yours. Without onOpenDocument, the new document opens in the viewer.

PDF

As a PDF

The viewer of a Word document has PDF beside Print: made in the page by Rebodocs, from the pages shown, and downloaded (pdf() of what viewDocx gives). The editor makes one too, with editor.exportPdf().

Collab

Several people at once

With Rebodocs’ collaboration server, each document of the drive is a room: whoever opens it writes with the others at once, each with a caret of their own, and who may only read it watches.

import { createCollabServer } from '@rebodocs/collab/server';

// A room for each document of the drive, named by its id: opened from the file,
// kept as a new version of it once everybody has left (apps/documents/server/collab.ts).
const collab = createCollabServer({ storage: roomsOverTheDrive });
app.use('/collab', collab.handle);

<DocsEditor collab={{ url: location.origin, room: file.id, ticket }} onSave={saveAsVersion} />

The demo of documents (npm run documents, apps/documents) does it whole: the rooms over the drive, a ticket signed for each person from what they may do with the file, and a version kept when everybody leaves.

History

Compare two versions

What changed in a Word document between a version and the one now, over its pages: struck through in red what was taken out, underlined in green what was put in, one change after another.

import { compareDocx } from '@rebofiles/react/rebodocs';

// "Compare" on each version of a Word document but the current, in its history.
<FileDrive base="/api/files" viewDocument={viewDocx} compareDocument={compareDocx} />

MCP

For an assistant

With Rebodocs installed beside @rebofiles/mcp, Claude reads and edits the drive’s Word documents with Rebodocs’ own tools, each change saved as a version: AI assistants.