### Basic Tiptap Editor Setup (React)

Source: https://tiptap.dev/docs/collaboration/getting-started/install

Sets up a minimal Tiptap Editor in React with document, paragraph, and text extensions. This is a starting point before adding collaboration features.

```jsx
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

export default () => {
  const editor = useEditor({
    extensions: [Document, Paragraph, Text],
    content: `
      <p>
        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  return <EditorContent editor={editor} />
}
```

--------------------------------

### Install Basic Tiptap Editor

Source: https://tiptap.dev/docs/collaboration/getting-started/install

Installs the basic Tiptap Editor with necessary extensions for React. Use this command when Tiptap Editor is not yet installed.

```bash
npm install @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/react
```

--------------------------------

### Install Pro Extension with Environment Variable

Source: https://tiptap.dev/docs/guides/pro-extensions

Install a Tiptap Pro extension after configuring authentication. This example shows how to pass the authentication token using an environment variable during the npm install command.

```bash
TIPTAP_PRO_TOKEN=actual-auth-token npm install --save @tiptap-pro/extension-comments

```

--------------------------------

### Install Dependencies

Source: https://tiptap.dev/docs/resources/contributing

Install all necessary project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Basic Snapshot Provider Setup

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Initialize the Tiptap editor with the Snapshot extension configured with a collaboration provider. This is the fundamental setup for enabling version history.

```javascript
const provider = new TiptapCollabProvider({
  // ...
})

const editor = new Editor({
  // ...
  extensions: [
    // ...
    Snapshot.configure({
      provider,
    }),
  ],
})
```

--------------------------------

### Start Development Environment

Source: https://tiptap.dev/docs/resources/contributing

Launch the local development server for Tiptap.

```bash
pnpm run start
```

--------------------------------

### Initialize New Project with Simple Editor

Source: https://tiptap.dev/docs/ui-components/templates/simple-editor

Start a new project and initialize it with the Simple Editor template using the Tiptap CLI.

```bash
npx @tiptap/cli@latest init simple-editor
```

--------------------------------

### Install Tiptap Pro Extension

Source: https://tiptap.dev/docs/guides/pro-extensions

Install any Tiptap Pro extension after global authentication has been configured. This command installs the comments extension using npm.

```bash
npm install --save @tiptap-pro/extension-comments

```

--------------------------------

### Install Snapshot Extension

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Install the necessary packages for the Snapshot extension and the Hocuspocus transformer. Ensure Y.js is installed for collaboration features.

```bash
npm install @tiptap-pro/extension-snapshot @hocuspocus/transformer
```

--------------------------------

### Minimal Editor Setup

Source: https://tiptap.dev/docs/editor/getting-started/configure

This is the most basic Tiptap editor setup, requiring only the essential Document, Paragraph, and Text extensions.

```javascript
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [Document, Paragraph, Text],
})
```

--------------------------------

### Add Simple Editor to Existing Project

Source: https://tiptap.dev/docs/ui-components/templates/simple-editor

Install the Simple Editor template into an existing project using the Tiptap CLI.

```bash
npx @tiptap/cli@latest add simple-editor
```

--------------------------------

### Install Pages Pro Package and Dependencies

Source: https://tiptap.dev/docs/pages/getting-started/overview

Install the necessary Pro packages for Tiptap Pages, including ConvertKit and PagesTableKit, using npm.

```bash
npm install @tiptap-pro/extension-convert-kit \
            @tiptap-pro/extension-pages-tablekit \
            @tiptap-pro/extension-pages
```

--------------------------------

### Install Tiptap Collaboration Provider

Source: https://tiptap.dev/docs/collaboration/getting-started/install

Installs the Tiptap Pro provider package for connecting to a document server. This is required for enabling collaborative functionality.

```bash
npm install @tiptap-pro/provider
```

--------------------------------

### Revert, Backup, and Continue

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Reverts to a specific version, creating a backup of unversioned changes and then setting the reverted version as the new starting point.

```javascript
editor.commands.revertToVersion(4, 'Revert to version', 'Unversioned changes before revert')
```

--------------------------------

### Permission with Combined Prefix and Suffix Constraints

Source: https://tiptap.dev/docs/authentication

This example illustrates a permission that requires the resource name to both start with 'team1_' and end with '_published'. This is achieved by combining 'prefix' and 'suffix' within a single constraint object.

```json
{ "prefix": "team1_", "suffix": "_published" }
```

--------------------------------

### Install Collaboration Extensions and Yjs

Source: https://tiptap.dev/docs/collaboration/getting-started/install

Installs the Tiptap Editor Collaboration extension, Yjs, and related packages. Run this command to add collaboration capabilities to your project.

```bash
npm install @tiptap/extension-collaboration @tiptap/y-tiptap yjs y-protocols
```

--------------------------------

### Automatic Version Metadata Example

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Illustrates the structure of the automatically included '__tiptap' metadata in a version, providing details on trigger, changes, and contributor.

```json
{
  "__tiptap": {
    "trigger": "websocket",
    "changesBy": ["#user1"],
    "triggeredBy": "user1"
  },
  "wordCount": 81624434
}
```

--------------------------------

### Full Access Token Example

Source: https://tiptap.dev/docs/authentication

This example demonstrates a JWT payload granting full access to AI, Convert, and Documents services. Note that 'Documents:Write' implies 'Documents:Read' and 'Documents:Comment', so only one Documents action is required.

```json
{
  "iss": "env_abc123",
  "aud": ["AI", "Convert", "Documents"],
  "iat": 1722344565,
  "exp": 1722344865,
  "permissions": [
    { "action": "AI:Generation", "resource": "*" },
    { "action": "AI:Toolkit", "resource": "*" },
    { "action": "Documents:Write", "resource": "*" },
    { "action": "Convert:Import:Docx", "resource": "*" },
    { "action": "Convert:Export:Docx", "resource": "*" },
    { "action": "Convert:Import:Markdown", "resource": "*" },
    { "action": "Convert:Export:Markdown", "resource": "*" },
    { "action": "Convert:Export:Doc", "resource": "*" },
    { "action": "Convert:Export:Odt", "resource": "*" },
    { "action": "Convert:Export:Epub", "resource": "*" },
    { "action": "Convert:Export:Pdf", "resource": "*" },
    { "action": "Convert:Fonts", "resource": "*" }
  ]
}
```

--------------------------------

### Basic Tiptap Editor Setup

Source: https://tiptap.dev/docs/examples/basics/default-text-editor

This React component sets up a Tiptap editor with the TextStyleKit and StarterKit extensions. It includes a default content with various text styles, lists, a code block, and a blockquote. Use this as a foundation for a customizable text editor.

```jsx
import './styles.scss'

import { TextStyleKit } from '@tiptap/extension-text-style'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

import { MenuBar } from './MenuBar.jsx'

const extensions = [TextStyleKit, StarterKit]

export default () => {
  const editor = useEditor({
    extensions,
    content: `
<h2>
  Hi there,
</h2>
<p>
  this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists:
</p>
<ul>
  <li>
    That's a bullet list with one …
  </li>
  <li>
    … or two list items.
  </li>
</ul>
<p>
  Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
</p>
<pre><code class="language-css">body {
  display: none;
}</code></pre>
<p>
  I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too.
</p>
<blockquote>
  Wow, that's amazing. Good work, boy! 👏
  <br />
  — Mom
</blockquote>
`,
  })

  return (
    <>
      <MenuBar editor={editor} />
      <EditorContent editor={editor} />
    </>
  )
}

```

--------------------------------

### Install Tiptap Agent Skill

Source: https://tiptap.dev/docs/resources/agent-skill

Install the Tiptap Agent skill using the skills CLI. This command adds the necessary components for your AI agent to interact with Tiptap.

```bash
npx skills add ueberdosis/tiptap
```

--------------------------------

### Tiptap Editor Setup with Collaboration (React)

Source: https://tiptap.dev/docs/collaboration/getting-started/install

Integrates Yjs and the Tiptap Collaboration extension into a React editor setup. This configures the editor to use a Y.Doc for shared editing.

```jsx
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'

const doc = new Y.Doc() // Initialize Y.Doc for shared editing

export default () => {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Collaboration.configure({
        document: doc, // Configure Y.Doc for collaboration
      }),
    ],
    content: `
      <p>
        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  return <EditorContent editor={editor} />
}
```

--------------------------------

### Initialize Tiptap Editor with Collaboration

Source: https://tiptap.dev/docs/collaboration/getting-started/install

This snippet shows the basic setup for a Tiptap editor with collaboration enabled, including necessary imports and Yjs document configuration. It sets initial content directly during editor initialization.

```javascript
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'

// Importing the provider and useEffect
import { useEffect } from 'react'
import { TiptapCollabProvider } from '@tiptap-pro/provider'

const doc = new Y.Doc()

export default () => {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Collaboration.configure({
        document: doc,
      }),
    ],
    content: persistedContent
  })

  // Connect to your Collaboration server
  useEffect(() => {
    const provider = new TiptapCollabProvider({
      name: 'document.name', // Unique document identifier for syncing. This is your document name.
      appId: '7j9y6m10', // Your document server ID from the Cloud dashboard, or use `baseURL` for on-premises
      token: 'notoken', // Your JWT
      document: doc,
    })
  }, [])

  return <EditorContent editor={editor} />
}
```

--------------------------------

### React App Setup for Collaborative Editing

Source: https://tiptap.dev/docs/examples/advanced/collaborative-editing

Initializes two Tiptap editors connected to the same WebSocket room using Y.js for synchronization. Each editor has its own Y.Doc instance and TiptapCollabProvider.

```jsx
import './styles.scss'

import { TiptapCollabProvider } from '@hocuspocus/provider'
import * as Y from 'yjs'

import Editor from './Editor.jsx'

const appId = '7j9y6m10'
const room = `room.26530-ok`

// ydoc and provider for Editor A
const ydocA = new Y.Doc()
const providerA = new TiptapCollabProvider({
  appId,
  name: room,
  document: ydocA,
})

// ydoc and provider for Editor B
const ydocB = new Y.Doc()
const providerB = new TiptapCollabProvider({
  appId,
  name: room,
  document: ydocB,
})

const App = () => {
  return (
    <div className="col-group">
      <Editor provider={providerA} ydoc={ydocA} room={room} />
      <Editor provider={providerB} ydoc={ydocB} room={room} />
    </div>
  )
}

export default App

```

--------------------------------

### Permission with OR Logic for Multiple Prefixes

Source: https://tiptap.dev/docs/authentication

This configuration uses an array of constraint objects to implement OR logic. It grants access to resources that start with either 'team1_' or 'team2_'.

```json
[
  { "prefix": "team1_" },
  { "prefix": "team2_" }
]
```

--------------------------------

### Using StarterKit

Source: https://tiptap.dev/docs/editor/getting-started/configure

Integrate the StarterKit, a bundle of common Tiptap extensions, into your editor.

```javascript
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [StarterKit],
})
```

--------------------------------

### Initialize Tiptap Project with CLI

Source: https://tiptap.dev/docs/ui-components/templates/simple-editor

Use this command to initialize a new project with the Tiptap CLI.

```bash
npx @tiptap/cli init
```

--------------------------------

### Create New Tiptap Extension

Source: https://tiptap.dev/docs/resources/contributing

Initialize a new Tiptap extension using the provided CLI tool.

```bash
pnpm init tiptap-extension
```

--------------------------------

### Configure Project-Specific Authentication (.npmrc)

Source: https://tiptap.dev/docs/guides/pro-extensions

Set up authentication for Tiptap Pro extensions by adding the registry and token to your project's .npmrc file. It's recommended to use an environment variable for the token.

```bash
@tiptap-pro:registry=https://registry.tiptap.dev/
//registry.tiptap.dev/:_authToken=${TIPTAP_PRO_TOKEN}

```

--------------------------------

### AI Command for Tone Adjustment

Source: https://tiptap.dev/docs/content-ai/capabilities/generation/overview

Illustrates how to use the `aiAdjustTone` command to change the tone of the text. This example sets the tone to 'excited'.

```javascript
onClick={() => editor.chain().focus().aiAdjustTone('excited', { stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Use&nbsp;<i>excited</i>&nbsp;tone of voice
```

--------------------------------

### Configuring StarterKit Extensions

Source: https://tiptap.dev/docs/editor/getting-started/configure

Configure specific extensions within the StarterKit, such as limiting heading levels to 1, 2, and 3.

```javascript
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      heading: {
        levels: [1, 2, 3],
      },
    }),
  ],
})
```

--------------------------------

### Get Cached Versions via Provider

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Retrieves the locally cached list of versions from the collaboration provider without making a server request.

```javascript
const versions = provider.getVersions()
```

--------------------------------

### AI Command for Translation

Source: https://tiptap.dev/docs/content-ai/capabilities/generation/overview

Demonstrates the `aiTranslate` command for translating text into different languages. Examples include translating to Swedish ('sv') and German ('de').

```javascript
onClick={() => editor.chain().focus().aiTranslate('sv', { stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Translate to&nbsp;<i>Swedish</i>
          </button>
          <button
            type="button"
            onClick={() => editor.chain().focus().aiTranslate('de', { stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Translate to&nbsp;<i>German</i>
```

--------------------------------

### Clone the Tiptap Repository

Source: https://tiptap.dev/docs/resources/contributing

Copy the official Tiptap repository to your local machine to begin development.

```bash
git clone git@github.com:ueberdosis/tiptap.git
```

--------------------------------

### Watch for Version Changes via Provider

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Subscribes to updates in the version list using callbacks and provides methods to start and stop watching for these changes.

```javascript
const onVersionsChange = (versions) => {
  console.log('Versions updated:', versions)
}

// Start watching
provider.watchVersions(onVersionsChange)

// Stop watching
provider.unwatchVersions(onVersionsChange)
```

--------------------------------

### Initialize Tiptap Editor with Collaboration and Proper Initial Content Handling

Source: https://tiptap.dev/docs/collaboration/getting-started/install

This snippet demonstrates how to initialize a Tiptap editor for collaboration while ensuring initial content is set only once using `editor.setContent()` within an `onSynced` callback. This prevents content duplication on editor syncs.

```javascript
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

import * as Y from 'yjs'
import Collaboration from '@tiptap/extension-collaboration'
import { useEffect } from 'react'

import { TiptapCollabProvider } from '@tiptap-pro/provider'

const doc = new Y.Doc()

export default () => {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Collaboration.configure({
        document: doc,
      }),
    ],
    // Remove the automatic content addition on editor initialization.
  })

  useEffect(() => {
    const provider = new TiptapCollabProvider({
      name: 'document.name', // Unique document identifier for syncing. This is your document name.
      appId: '7j9y6m10', // Your document server ID from the Cloud dashboard, or use `baseURL` for on-premises
      token: 'notoken', // Your JWT
      document: doc,

      // The onSynced callback ensures initial content is set only once using editor.setContent(), preventing repetitive content loading on editor syncs.
      onSynced() {
        if (!doc.getMap('config').get('initialContentLoaded') && editor) {
          doc.getMap('config').set('initialContentLoaded', true)

          editor.commands.setContent(`
          <p>This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.</p>
          <p>The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.</p>
          `)
        }
      },
    })
  }, [])

  return <EditorContent editor={editor} />
}
```

--------------------------------

### Get Preview Content from Payload

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Transforms the payload received from the Collaboration provider into Tiptap JSON content. Specify the field to parse; defaults to 'default'.

```javascript
const myContent = getPreviewContentFromVersionPayload(payload, 'default')
```

--------------------------------

### Configure Global Authentication (npm/Yarn Classic)

Source: https://tiptap.dev/docs/guides/pro-extensions

Set up global authentication for Tiptap Pro extensions using npm or Yarn Classic. This configures the registry and authentication token at the user level, which is useful for CI/CD environments.

```bash
npm config set "@tiptap-pro:registry" https://registry.tiptap.dev/
npm config set "//registry.tiptap.dev/:_authToken" actual-auth-token

```

--------------------------------

### JWT Permissions Structure

Source: https://tiptap.dev/docs/authentication

Define specific actions and resources a JWT token is authorized to access. This example shows a permission with an action, resource, and an optional constraint.

```json
{
  "permissions": [
    {
      "action": "Documents:Read",
      "resource": "*",
      "constraints": { "prefix": "team1_" }
    }
  ]
}
```

--------------------------------

### Customize Extension HTML Markup

Source: https://tiptap.dev/docs/editor/getting-started/style-editor

Create a custom extension by extending an existing one to change its rendered HTML tag, for example, changing `<strong>` to `<b>`.

```javascript
import Bold from '@tiptap/extension-bold'

const CustomBold = Bold.extend({
  renderHTML({ HTMLAttributes }) {
    // Original:
    // return ['strong', HTMLAttributes, 0]
    return ['b', HTMLAttributes, 0]
  },
})

new Editor({
  extensions: [
    // …
    CustomBold,
  ],
})
```

--------------------------------

### Create Version with Metadata via Provider

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Creates a new version using the collaboration provider, allowing for a name and custom metadata.

```javascript
provider.createVersion('My version', false, {
  author: 'Jane Doe',
  tags: ['draft'],
})
```

--------------------------------

### Run All Tests

Source: https://tiptap.dev/docs/resources/contributing

Execute all automated tests for the Tiptap project.

```bash
pnpm run test
```

--------------------------------

### Create a Version with Custom Metadata

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Creates a new version with a name and arbitrary metadata, useful for storing context like author or tags.

```javascript
editor.commands.saveVersion('Release v1.0', false, {
  author: 'Jane Doe',
  tags: ['release', 'stable'],
})
```

--------------------------------

### Sign JWT with Python (ES256)

Source: https://tiptap.dev/docs/authentication

Create a JWT using the PyJWT library in Python. This example shows how to encode a payload with issuer, audience, expiration, and permissions using an ES256 algorithm.

```python
import jwt, time

with open("private_key.pem", "rb") as f:
    private_key = f.read()

payload = {
    "iss": "your-environment-hash-id",
    "aud": ["AI", "Documents"],
    "iat": int(time.time()),
    "exp": int(time.time()) + 1800,
    "permissions": [
        {"action": "Documents:Read", "resource": "*"}
    ]
}

token = jwt.encode(payload, private_key, algorithm="ES256")
```

--------------------------------

### Basic AI Command Usage

Source: https://tiptap.dev/docs/content-ai/capabilities/generation/overview

Demonstrates how to trigger common AI commands such as shorten, extend, summarize, and simplify. These commands can be directly integrated into button click handlers.

```javascript
onClick={() => editor.chain().focus().aiShorten({ stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Shorten
          </button>
          <button
            type="button"
            onClick={() => editor.chain().focus().aiExtend({ stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Extend
          </button>
          <button
            type="button"
            onClick={() => editor.chain().focus().aiSummarize({ stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Summarize
          </button>
          <button
            type="button"
            onClick={() => editor.chain().focus().aiSimplify({ stream: streamMode }).run()}
            disabled={isDisabled}
          >
            Simplify
          </button>
```

--------------------------------

### Document Read Permission with Prefix Constraint

Source: https://tiptap.dev/docs/authentication

This JSON snippet shows a permission configuration for reading documents. It uses a wildcard resource ('*') combined with a 'prefix' constraint to allow access only to documents whose names start with 'team1_'.

```json
{
  "action": "Documents:Read",
  "resource": "*",
  "constraints": { "prefix": "team1_" }
}
```

--------------------------------

### List All Versions

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Requests the full list of versions from the server. The returned array contains objects with version number, date, and optional name and metadata.

```javascript
const versions = await provider.listVersions()
```

--------------------------------

### List Versions via Provider

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Fetches the complete list of document versions from the server using the collaboration provider.

```javascript
const versions = await provider.listVersions()
// versions: Array<{ version: number, date: number, name?: string, meta?: Record<string, unknown> }>
```

--------------------------------

### Configure Global Authentication (pnpm)

Source: https://tiptap.dev/docs/guides/pro-extensions

Set up global authentication for Tiptap Pro extensions using pnpm. This configures the registry and authentication token at the user level, suitable for CI/CD environments.

```bash
pnpm config set --global "@tiptap-pro:registry" https://registry.tiptap.dev/
pnpm config set "//registry.tiptap.dev/:_authToken" actual-auth-token

```

--------------------------------

### Configure Tiptap Editor with Pages Extension

Source: https://tiptap.dev/docs/pages/getting-started/overview

Initialize a Tiptap editor with the ConvertKit, TableKit, and Pages extensions. Configure Pages with a specific page format, header, and footer.

```javascript
import { Editor } from '@tiptap/core'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'
import { Pages } from '@tiptap-pro/extension-pages'

const editor = new Editor({
  extensions: [
    ConvertKit.configure({ table: false }),
    TableKit,
    Pages.configure({
      pageFormat: 'A4',
      header: 'My document',
      footer: 'Page {page} of {total}',
    }),
  ],
})
```

--------------------------------

### Initialize Tiptap Editor with Tailwind CSS

Source: https://tiptap.dev/docs/editor/getting-started/style-editor

This snippet shows how to load Tailwind CSS with the typography plugin and initialize a Tiptap editor. The editor's content is styled using Tailwind's prose classes.

```html
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<div class="element"></div>

<script type="module">
  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'

  const editor = new Editor({
    element: document.querySelector('.element'),
    extensions: [StarterKit],
    editorProps: {
      attributes: {
        class: 'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
      },
    },
    content: "\n    <h2>\n      Hi there,\n    </h2>\n    <p>\n      this is a basic <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:\n    </p>\n    <ul>\n      <li>\n        That’s a bullet list with one …\n      </li>\n      <li>\n        … or two list items.\n      </li>\n    </ul>\n    <p>\n      Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:\n    </p>\n<pre><code class=\"language-css\">body {\n  display: none;\n}</code></pre>\n    <p>\n      I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.\n    </p>\n    <blockquote>\n      Wow, that’s amazing. Good work, boy! 👏\n      <br />\n      — Mom\n    </blockquote>\n  ",
  })
</script>
```

--------------------------------

### Create a New Version

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Creates a new version of the document with an optional name and metadata.

```javascript
provider.createVersion('My custom version', false, { author: 'Jane Doe' })
```

--------------------------------

### Initialize Tiptap Editor with Pages Extension

Source: https://tiptap.dev/docs/pages/getting-started/overview

This snippet shows how to initialize a Tiptap editor with the Pages extension, configuring page format, header, footer, and background. It also includes integration with ConvertKit, TableKit, and ExportDocx extensions.

```jsx
import './styles.scss'

import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { ExportDocx } from '@tiptap-pro/extension-export-docx'
import { Pages } from '@tiptap-pro/extension-pages'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'
import { useEffect, useState } from 'react'

import { content } from '../basic-content.js'
import { styleOverrides } from '../docx-style-overrides.js'

function PagesDemo() {
  const [ready, setReady] = useState(false)
  const [headerFooterEditor, setHeaderFooterEditor] = useState(null)
  const [headerFooterActiveEditorType, setHeaderFooterActiveEditorType] = useState(null)
  const [differentFirstPage, setDifferentFirstPage] = useState(false)
  const [differentOddEven, setDifferentOddEven] = useState(false)

  const editor = useEditor({
    content,
    extensions: [
      ConvertKit.configure({
        image: { inline: true },
        textStyleKit: { textStyle: { mergeNestedSpanStyles: true } },
        table: false,
      }),
      TableKit,
      Pages.configure({
        pageFormat: 'A4',
        header: '<strong>Tiptap</strong> –Pages extension showcase',
        footer: 'Powered by Tiptap and made with ❤️',
        pageGapBackground: '#f7f7f7',
      }),
      ExportDocx.configure({
        onCompleteExport: result => {
          const blob = new Blob([result], {
            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          const url = URL.createObjectURL(blob)
          const a = document.createElement('a')

          a.href = url
          a.download = 'export.docx'
          a.click()
          URL.revokeObjectURL(url)
        },
        styleOverrides,
      }),
    ],
    onCreate: () => {
      setReady(true)
    },
  })

  useEffect(() => {
    editor.on('update', () => {
      const { activeEditor, activeEditorType } = editor.storage.pages
      setHeaderFooterEditor(activeEditor)
      setHeaderFooterActiveEditorType(activeEditorType)
    })

    return () => {
      editor.off('update')
    }
  }, [editor])

  const { 
    isBoldActive,
    isHeading1Active,
    isHeading2Active,
    isHeading3Active,
    isItalicActive,
    isStrikeActive,
    isUnderlineActive,
  } = useEditorState({
    editor,
    selector: ({ editor: currentEditor }) => {
      return {
        isHeading1Active: currentEditor.isActive('heading', { level: 1 }),
        isHeading2Active: currentEditor.isActive('heading', { level: 2 }),
        isHeading3Active: currentEditor.isActive('heading', { level: 3 }),
        isBoldActive: currentEditor.isActive('bold'),
        isItalicActive: currentEditor.isActive('italic'),
        isUnderlineActive: currentEditor.isActive('underline'),
        isStrikeActive: currentEditor.isActive('strike'),
      }
    },
  })

  const { 
    isBoldActive: isHeaderFooterBoldActive,
    isHeading1Active: isHeaderFooterHeading1Active,
    isHeading2Active: isHeaderFooterHeading2Active,
    isHeading3Active: isHeaderFooterHeading3Active,
    isItalicActive: isHeaderFooterItalicActive,
    isStrikeActive: isHeaderFooterStrikeActive,
    isUnderlineActive: isHeaderFooterUnderlineActive,
  } = useEditorState({
    editor: headerFooterEditor,
    selector: ({ editor: currentEditor }) => {
      if (!currentEditor) {
        return {
          isHeading1Active: false,
          isHeading2Active: false,
          isHeading3Active: false,
          isBoldActive: false,
          isItalicActive: false,
          isUnderlineActive: false,
          isStrikeActive: false,
        }
      }

      return {
        isHeading1Active: currentEditor.isActive('heading', { level: 1 }),
        isHeading2Active: currentEditor.isActive('heading', { level: 2 }),
        isHeading3Active: currentEditor.isActive('heading', { level: 3 }),
        isBoldActive: currentEditor.isActive('bold'),
        isItalicActive: currentEditor.isActive('italic'),
        isUnderlineActive: currentEditor.isActive('underline'),
        isStrikeActive: currentEditor.isActive('strike'),
      }
    },
  })

  const activeEditorCommand = headerFooterActiveEditorType ? headerFooterEditor : editor
  const anyHeading1Active = headerFooterActiveEditorType ? isHeaderFooterHeading1Active : isHeading1Active
  const anyHeading2Active = headerFooterActiveEditorType ? isHeaderFooterHeading2Active : isHeading2Active
  const anyHeading3Active = headerFooterActiveEditorType ? isHeaderFooterHeading3Active : isHeading3Active
  const anyBoldActive = headerFooterActiveEditorType ? isHeaderFooterBoldActive : isBoldActive

```

--------------------------------

### Basic Editor Configuration

Source: https://tiptap.dev/docs/editor/getting-started/configure

This snippet shows the fundamental configuration for a Tiptap editor, including binding to an element, registering basic extensions, setting initial content, and enabling autofocus.

```javascript
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  // bind Tiptap to the `.element`
  element: document.querySelector('.element'),
  // register extensions
  extensions: [Document, Paragraph, Text],
  // set the initial content
  content: '<p>Example Text</p>',
  // place the cursor in the editor after initialization
  autofocus: true,
  // make the text editable (default is true)
  editable: true,
  // prevent loading the default ProseMirror CSS that comes with Tiptap
  // should be kept as `true` for most cases as it includes styles
  // important for Tiptap to work correctly
  injectCSS: false,
})
```

--------------------------------

### Content and Export Controls

Source: https://tiptap.dev/docs/pages/getting-started/overview

Buttons to set basic demo content and export the document to DOCX format. Ensure the editor instance is available and commands are chained correctly.

```javascript
          <button
            type="button"
            onClick={() => {
              editor.commands.setContent(content)
              editor.commands.focus(0, { scrollIntoView: false })
            }}
          >
            Basic demo content
          </button>
          <button
            type="button"
            onClick={() => {
              editor.chain().exportDocx().run()
              editor.commands.focus(0, { scrollIntoView: false })
            }}
          >
            Export DOCX
          </button>
        </div>
```

--------------------------------

### Configure Global Authentication (Yarn Modern)

Source: https://tiptap.dev/docs/guides/pro-extensions

Configure global authentication for Tiptap Pro extensions using Yarn Modern. This sets the npm scopes, registry server, and authentication token at the user level.

```bash
yarn config set --home npmScopes.@tiptap-pro.npmRegistryServer "https://registry.tiptap.dev/"
yarn config set --home npmScopes.@tiptap-pro.npmAlwaysAuth "true"
yarn config set --home npmScopes.@tiptap-pro.npmAuthToken "actual-auth-token"

```

--------------------------------

### Handle Version Created Event

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Listens for 'version.created' stateless messages from the provider. This message includes information about newly created versions, such as metadata, name, and date.

```javascript
provider.on('stateless', (data) => {
  const payload = JSON.parse(data.payload)

  if (payload.event === 'version.created') {
    const latestVersion = payload.version
    const name = payload.name // optional version name
    const date = payload.date // creation timestamp
    const meta = payload.meta // optional metadata object
  }
})
```

--------------------------------

### Manually Create a New Version

Source: https://tiptap.dev/docs/collaboration/documents/snapshot

Creates a new version of the document with an optional name.

```javascript
editor.commands.saveVersion('My new custom version')
```