Collaboration

Charts and diagrams are Nodes like any other, so Tiptap Collaboration shares them without extra setup. One rule has to hold for that: every client that opens the shared document registers Diagrams.
Pro ExtensionAlphaPilot program

Where to register Diagrams

Register Diagrams everywhere the shared document is opened:

  • in every editor
  • in a read-only viewer
  • in an agent
  • on the collaboration server

Make sure every client uses @tiptap/y-tiptap 3.0.10 or later, so a client you missed cannot delete anything.

A client without Diagrams

A client whose Schema has no chart or flowDiagram Node cannot build those Nodes. The same holds for a client with chart: false or flowDiagram: false: it cannot build the charts or the diagrams.

What happens then depends on the version of @tiptap/y-tiptap that client uses:

@tiptap/y-tiptapThe shared documentThat client
3.0.10 or laterStays as it is. Everybody else keeps their charts and diagramsShows an empty document, cannot be edited, sends nothing
3.0.9 or earlierLoses its charts and diagrams. The deletion reaches every other clientIts binding deletes them while the document is loaded

enableContentCheck does not prevent the deletion: the Node is dropped before a Transaction exists that the check could look at.

A client that shows nothing

A client that does not draw registers Diagrams without any Renderer or Diagram Renderer.

  • It needs no DOM and no chart library.
  • It keeps every chart and diagram as it is.
import { getSchema } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Diagrams } from '@tiptap-pro/extension-diagrams'

const extensions = [StarterKit, Diagrams.configure({ renderers: [] })]
const schema = getSchema(extensions)

In an editor, such a chart or diagram says that it can't be drawn here, or shows what unavailable returns. Its data stays untouched.

Turning away a client without Diagrams

If clients you do not control can connect, let the server refuse those that do not declare Diagrams. With Hocuspocus, for example, the client adds a parameter to its connection, and the server checks it before the document is loaded:

// client
const provider = new HocuspocusProvider({
  url: 'wss://collaboration.example.com?schema=diagram-1',
  name: 'document-id',
})

// server
const server = new Hocuspocus({
  async onConnect({ requestParameters }) {
    if (requestParameters.get('schema') !== 'diagram-1') {
      throw new Error('This document needs the Diagrams extension.')
    }
  },
})

Mixed versions

  • A client keeps the attributes of a chart it does not know only until it changes that chart. Then they are gone.
  • Update every client to the same version of @tiptap-pro/extension-diagrams before you use a feature that a newer version added.