{"id":18763,"library":"roosterjs-content-model-api","title":"roosterjs-content-model-api","description":"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.","status":"active","version":"9.51.0","language":"javascript","source_language":"en","source_url":"https://github.com/Microsoft/roosterjs","tags":["javascript","typescript"],"install":[{"cmd":"npm install roosterjs-content-model-api","lang":"bash","label":"npm"},{"cmd":"yarn add roosterjs-content-model-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add roosterjs-content-model-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the Editor class and plugin infrastructure that uses these APIs","package":"roosterjs-content-model-core","optional":false},{"reason":"Defines the public types and interfaces used by the APIs","package":"roosterjs-content-model-types","optional":false}],"imports":[{"note":"ESM-only; no CommonJS support. Types included.","wrong":"const toggleBold = require('roosterjs-content-model-api').toggleBold","symbol":"toggleBold","correct":"import { toggleBold } from 'roosterjs-content-model-api'"},{"note":"Not exported from facade roosterjs; must import from this specific package.","wrong":"import { setFontSize } from 'roosterjs'","symbol":"setFontSize","correct":"import { setFontSize } from 'roosterjs-content-model-api'"},{"note":"Requires an IEditor instance from roosterjs-content-model-core.","wrong":"","symbol":"insertTable","correct":"import { insertTable } from 'roosterjs-content-model-api'"}],"quickstart":{"code":"import { createEditor } from 'roosterjs-content-model-core';\nimport { toggleBold, toggleItalic, setFontSize, insertTable } from 'roosterjs-content-model-api';\n\nconst editor = createEditor(document.getElementById('editor') as HTMLDivElement, {\n  plugins: [],\n  defaultSegmentFormat: {\n    fontSize: '11pt',\n    fontFamily: 'Calibri',\n  },\n});\n\n// Make the selected text bold\ntoggleBold(editor);\n\n// Make the selected text italic\ntoggleItalic(editor);\n\n// Set font size to 18pt on the selected text\nsetFontSize(editor, '18pt');\n\n// Insert a 3x4 table at the current cursor position\ninsertTable(editor, { column: 3, row: 4 });\n\n// Clean up when done\neditor.dispose();","lang":"typescript","description":"Creates an editor instance and demonstrates basic formatting APIs: toggleBold, toggleItalic, setFontSize, insertTable."},"warnings":[{"fix":"Upgrade to roosterjs-content-model-api and use the new functions (e.g., toggleBold instead of toggleBold on Editor).","message":"roosterjs-content-model-api v9+ is incompatible with roosterjs-editor-api from v8.x. All API signatures changed.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"If you need to know the current state, use the editor's isBold() or track formatting via plugins.","message":"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.","severity":"gotcha","affected_versions":">=9.0.0"},{"fix":"Pass fontSize as a string with unit (e.g., '14px', '1.2em', '12pt').","message":"The old `setFontSize` signature with a number is deprecated; use a string like '12pt' or '1.5em'.","severity":"deprecated","affected_versions":">=9.40.0"},{"fix":"Ensure there is a selection/cursor position before calling insertTable.","message":"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.","severity":"gotcha","affected_versions":">=9.0.0"},{"fix":"Use a bundler that supports ESM and tree-shaking.","message":"The package is ESM-only and not bundled for browser use; must be used with a bundler (webpack, rollup, etc.)","severity":"gotcha","affected_versions":">=9.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install roosterjs-content-model-api --save","cause":"Package not installed or missing in tsconfig.json paths.","error":"Cannot find module 'roosterjs-content-model-api' or its corresponding type declarations."},{"fix":"import { toggleBold } from 'roosterjs-content-model-api';","cause":"Importing from wrong package (e.g., 'roosterjs' instead of 'roosterjs-content-model-api') or incorrect import syntax.","error":"TypeError: toggleBold is not a function"},{"fix":"import { setFontSize } from 'roosterjs-content-model-api';","cause":"Importing from 'roosterjs' facade which re-exports only a subset.","error":"Property 'setFontSize' does not exist on type 'typeof import(...)'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}