roosterjs-content-model-api

9.51.0 verified Sat Apr 25 auth: no javascript

Format API package for the roosterjs rich-text editor (v9.51.0, stable). Provides content model-level formatting operations like toggleBold, toggleItalic, setFontSize, insertTable, and changeHeading. Part of the roosterjs 9.x ecosystem, which reworked the editor around a middle-layer Content Model for consistent behavior. Active development with frequent releases (~monthly). Differentiator: framework-independent, operates on its own content model rather than directly on DOM, enabling undo/redo and structured editing. Requires roosterjs-content-model-core and roosterjs-content-model-types as peer dependencies.

Common errors

error Cannot find module 'roosterjs-content-model-api' or its corresponding type declarations. ↓

cause Package not installed or missing in tsconfig.json paths.

fix

npm install roosterjs-content-model-api --save

error TypeError: toggleBold is not a function ↓

cause Importing from wrong package (e.g., 'roosterjs' instead of 'roosterjs-content-model-api') or incorrect import syntax.

fix

import { toggleBold } from 'roosterjs-content-model-api';

error Property 'setFontSize' does not exist on type 'typeof import(...)' ↓

cause Importing from 'roosterjs' facade which re-exports only a subset.

fix

import { setFontSize } from 'roosterjs-content-model-api';

Warnings

breaking roosterjs-content-model-api v9+ is incompatible with roosterjs-editor-api from v8.x. All API signatures changed. ↓

fix Upgrade to roosterjs-content-model-api and use the new functions (e.g., toggleBold instead of toggleBold on Editor).

gotcha Functions like toggleBold do not return a value; they mutate the editor's content model directly. Do not expect a boolean or the editor state. ↓

fix If you need to know the current state, use the editor's isBold() or track formatting via plugins.

deprecated The old `setFontSize` signature with a number is deprecated; use a string like '12pt' or '1.5em'. ↓

fix Pass fontSize as a string with unit (e.g., '14px', '1.2em', '12pt').

gotcha insertTable expects an options object with column and row as numbers, but the table is inserted at the cursor. If no selection, insertion may fail silently. ↓

fix Ensure there is a selection/cursor position before calling insertTable.

gotcha The package is ESM-only and not bundled for browser use; must be used with a bundler (webpack, rollup, etc.) ↓

fix Use a bundler that supports ESM and tree-shaking.

Install

npm install roosterjs-content-model-api

yarn add roosterjs-content-model-api

pnpm add roosterjs-content-model-api

Imports

toggleBold

wrong

const toggleBold = require('roosterjs-content-model-api').toggleBold

correct

import { toggleBold } from 'roosterjs-content-model-api'

ESM-only; no CommonJS support. Types included.

setFontSize

wrong

import { setFontSize } from 'roosterjs'

correct

import { setFontSize } from 'roosterjs-content-model-api'

Not exported from facade roosterjs; must import from this specific package.

insertTable
```
import { insertTable } from 'roosterjs-content-model-api'
```
Requires an IEditor instance from roosterjs-content-model-core.

Quickstart

Creates an editor instance and demonstrates basic formatting APIs: toggleBold, toggleItalic, setFontSize, insertTable.

import { createEditor } from 'roosterjs-content-model-core';
import { toggleBold, toggleItalic, setFontSize, insertTable } from 'roosterjs-content-model-api';

const editor = createEditor(document.getElementById('editor') as HTMLDivElement, {
  plugins: [],
  defaultSegmentFormat: {
    fontSize: '11pt',
    fontFamily: 'Calibri',
  },
});

// Make the selected text bold
toggleBold(editor);

// Make the selected text italic
toggleItalic(editor);

// Set font size to 18pt on the selected text
setFontSize(editor, '18pt');

// Insert a 3x4 table at the current cursor position
insertTable(editor, { column: 3, row: 4 });

// Clean up when done
editor.dispose();