Tiptap Utility Functions

Common errors

• TypeError: editor.state is undefined

  cause Attempting to pass a modern Tiptap v2/v3 `editor` instance or its internal state to a `tiptap-utils` function, which expects the structure of Tiptap v1.x.
  fix Ensure you are using `tiptap-utils` with a Tiptap v1.x editor. If using Tiptap v2/v3, use the built-in `editor.state` property and the `editor.isActive()` method directly on the editor instance instead of `tiptap-utils` functions.

• Error: Cannot find module 'tiptap-utils' or SyntaxError: Named export 'markIsActive' not found.

  cause Incorrect import statement (e.g., using `require` in an ESM project, or bundling issues) or attempting to access a non-existent export.
  fix Verify that `tiptap-utils` is installed correctly (`npm install tiptap-utils`). For ESM projects, use `import { markIsActive } from 'tiptap-utils';`. Ensure your bundler is configured to handle older CommonJS or UMD packages if necessary, though it's recommended to avoid this package entirely for modern projects.

Warnings

• breaking The `tiptap-utils` package (v1.x) is designed for the original Tiptap v1.x editor. It is generally not compatible with `@tiptap/core` v2 or v3 due to fundamental changes in the editor's architecture, state management, and API surface. Attempting to use `tiptap-utils` with modern Tiptap will likely lead to runtime errors or incorrect behavior.
  Fix: For `@tiptap/core` v2/v3, use the built-in utility functions and methods provided by the `Editor` instance or the `@tiptap/core` package itself (e.g., `editor.isActive()`, `editor.getAttributes()`, `editor.chain().focus()`). Consult the official Tiptap v2/v3 documentation for current best practices.
• deprecated This package has not received updates in approximately five years. Many of its functionalities have been superseded or integrated directly into the core `@tiptap/core` package and its extensions. Continuing to use `tiptap-utils` in new projects is strongly discouraged.
  Fix: Migrate to the equivalent functionalities offered by `@tiptap/core` (v2/v3) or relevant `@tiptap/*` extensions. This might require refactoring parts of your editor logic.
• gotcha The package metadata provided in the prompt (recent releases) pertains to the *modern* `@tiptap` monorepo (v3.x) and not to the `tiptap-utils` package (v1.x) itself. Do not confuse `tiptap-utils`'s versioning and release history with the active development of `@tiptap/core`.
  Fix: Always verify the specific package you are intending to use. If targeting `@tiptap/core` v2/v3, rely solely on the official documentation and packages prefixed with `@tiptap/`.

Install

• npm install tiptap-utils npm
• yarn add tiptap-utils yarn
• pnpm add tiptap-utils pnpm

Imports

• getMarkAttrs
  wrong:

  const { getMarkAttrs } = require('tiptap-utils')

  correct:

  import { getMarkAttrs } from 'tiptap-utils'

  While CommonJS `require` might work in some older Node environments, `tiptap-utils` is primarily designed for browser usage and ES module imports are standard. Note that modern Tiptap (@tiptap/core v2/v3) handles mark attributes differently, often directly on the editor state.
• markIsActive
  wrong:

  import markIsActive from 'tiptap-utils'

  correct:

  import { markIsActive } from 'tiptap-utils'

  This package uses named exports for its utility functions. Attempting a default import will result in `undefined`. Modern Tiptap offers equivalent functionality via `editor.isActive()` methods.
• nodeIsActive
  wrong:

  require('tiptap-utils').nodeIsActive

  correct:

  import { nodeIsActive } from 'tiptap-utils'

  For `tiptap-utils` (v1.x), prefer explicit named imports. Modern Tiptap (@tiptap/core v2/v3) provides `editor.isActive('nodeName')` for checking node activity.

Quickstart

Demonstrates importing and using `markIsActive` and `nodeIsActive` with an older Tiptap v1.x Editor instance to check the active state of marks and nodes.

import { Editor } from 'tiptap';
import { markIsActive, nodeIsActive } from 'tiptap-utils';
import { Bold, Paragraph, Document } from 'tiptap-extensions'; // Example extensions for older Tiptap

// This example is for older Tiptap v1.x, which `tiptap-utils` was designed for.
// It is NOT compatible with @tiptap/core v2/v3.
const editor = new Editor({
  extensions: [
    new Document(),
    new Paragraph(),
    new Bold(),
  ],
  content: '<p>This is <strong>bold</strong> text.</p>',
  onUpdate: ({ editor }) => {
    const state = editor.state;
    console.log('Is bold mark active?', markIsActive(state, 'bold'));
    console.log('Is paragraph node active?', nodeIsActive(state, 'paragraph'));
  },
});

// To simulate usage in a non-interactive environment or test:
setTimeout(() => {
  const state = editor.state;
  console.log('Is bold mark active after timeout?', markIsActive(state, 'bold'));
  console.log('Is paragraph node active after timeout?', nodeIsActive(state, 'paragraph'));
  editor.destroy();
}, 1000);