Editor API

These pages cover what a mounted DocxEditor exposes to the application around it: the commands and queries your own controls call, and the plugins and presets it takes. Core API covers import and export without an editor.

Hide the built-in controls

mode.toolbar turns the toolbar off, and contextMenus leaves the right button to the browser:

<DocxEditor
  document={file}
  mode={{
    kind: "edit",
    author: { id: user.id, name: user.name },
    toolbar: false,
  }}
  contextMenus={false}
/>

A comment editor has no toolbar, and its right-click menu offers Copy and Add comment only.

Commands and queries

Commands follow the ProseMirror command contract: called with an EditorState alone, a command reports whether it applies; called with a dispatch function, it performs the edit.

import type {
  Command,
  EditorState,
  EditorView,
} from "@portone/docx-editor";
import { isBoldActive, toggleBold, undo } from "@portone/docx-editor/commands";

function Toolbar({ view, state }: { view: EditorView; state: EditorState }) {
  const run = (command: Command) => {
    command(state, (transaction) => view.dispatch(transaction), view);
    view.focus();
  };

  return (
    <div>
      <button
        type="button"
        aria-pressed={isBoldActive(state)}
        onClick={() => run(toggleBold)}
      >
        Bold
      </button>
      <button type="button" disabled={!undo(state)} onClick={() => run(undo)}>
        Undo
      </button>
    </div>
  );
}

onReady hands over the editor view, and onChange fires on every state change, selection moves included.

Name prefixes say what a function returns: is*Active a boolean toggle, active* the current value or "mixed", can* whether the action applies, isIn* containment, selection* and document* a reading of the selection or the whole document, editing* the protection level, and DEFAULT_X the built-in default of the prop or field x.

Every command already accounts for locked content, the editor's mode, and preserved markers, so it reports that it does not apply wherever the edit would be refused. Wrap a command from elsewhere in canRunCommand(command, state) to hold it to the same rules.

Export controls

canExport reports whether the document can be written back. documentExportProblems lists every reason it could not, each with the DocxExportError code, a reason naming the content it is about, and the pos a panel can select. Checking before export lists the reasons and the codes.

documentFidelity lists what the main body holds that the editor cannot model: markup kept but invisible, and the placeholders standing in for content it could not open for editing. Each note carries a pos a panel can select. Core API describes the fields and coverage.

Guides