feat(core): introduce new mounting system for SSR

[nperez0111]

Changes Overview

This introduces a new behavior for the editor. The ability to be safely run on the server-side (without rendering).

prosemirror-view encapsulates all view related code, and cannot safely be SSR'd, but, the majority of the editor instance itself is in plain JS that does not require DOM APIs (unless your content is specified in HTML).

But, we have so many convenient methods available for manipulating content, that it is a shame that they could not be used on the server side too. With this update, the editor can be rendered on the server-side and will use a stub for prosemirror-view methods. If accessing certain functions on the view, you will encounter runtime errors, so it is important for you to test to see if the methods you call actually work.

This is a step towards being able to server-side render content, but, it is not completely supported yet. This does not mean that you can render an editor instance on the server and expect it to just output any HTML.

Implementation Approach

If you pass element: null to your editor options:

• the editor view will not be initialized
• the editor will not emit it's create event
• the focus will not move to it's first position

UNTIL, the mount function is called on the instance, which will mount the editor view to a DOM element. This obviously will not be allowed on the server which has no document object.

Therefore, this will work on the server:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: null,
  content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
  extensions: [StarterKit],
})

editor
  .chain()
  .selectAll()
  .setContent({ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'XYZ' }] }] })
  .run()

console.log(editor.state.doc.toJSON())
// { type: 'doc', content: [ { type: 'paragraph', content: [ { type: 'text', text: 'XYZ' } ] } ] }

Any of these things will not work on the server, and result in a runtime error:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  // document will not be defined in a server environment
  element: document.createElement('div'),
  content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
  extensions: [StarterKit],
})

editor
  .chain()
  // focus is a command which depends on the editor-view, so it will not work in a server environment
  .focus()
  .run()

console.log(editor.getHTML())
// getHTML relies on the editor-view, so it will not work in a server environment

Testing Done

Verification Steps

Additional Notes

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

[changeset-bot]

🦋 Changeset detected

Latest commit: 944b02a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 56 packages

Name	Type
@tiptap/core	Major
@tiptap/extension-blockquote	Major
@tiptap/extension-bold	Major
@tiptap/extension-bubble-menu	Major
@tiptap/extension-bullet-list	Major
@tiptap/extension-character-count	Major
@tiptap/extension-code-block-lowlight	Major
@tiptap/extension-code-block	Major
@tiptap/extension-code	Major
@tiptap/extension-collaboration-cursor	Major
@tiptap/extension-collaboration	Major
@tiptap/extension-color	Major
@tiptap/extension-document	Major
@tiptap/extension-dropcursor	Major
@tiptap/extension-floating-menu	Major
@tiptap/extension-focus	Major
@tiptap/extension-font-family	Major
@tiptap/extension-gapcursor	Major
@tiptap/extension-hard-break	Major
@tiptap/extension-heading	Major
@tiptap/extension-highlight	Major
@tiptap/extension-history	Major
@tiptap/extension-horizontal-rule	Major
@tiptap/extension-image	Major
@tiptap/extension-italic	Major
@tiptap/extension-link	Major
@tiptap/extension-list-item	Major
@tiptap/extension-list-keymap	Major
@tiptap/extension-mention	Major
@tiptap/extension-ordered-list	Major
@tiptap/extension-paragraph	Major
@tiptap/extension-placeholder	Major
@tiptap/extension-strike	Major
@tiptap/extension-subscript	Major
@tiptap/extension-superscript	Major
@tiptap/extension-table-cell	Major
@tiptap/extension-table-header	Major
@tiptap/extension-table-row	Major
@tiptap/extension-table	Major
@tiptap/extension-task-item	Major
@tiptap/extension-task-list	Major
@tiptap/extension-text-align	Major
@tiptap/extension-text-style	Major
@tiptap/extension-text	Major
@tiptap/extension-typography	Major
@tiptap/extension-underline	Major
@tiptap/extension-youtube	Major
@tiptap/extensions	Major
@tiptap/html	Major
@tiptap/pm	Major
@tiptap/react	Major
@tiptap/starter-kit	Major
@tiptap/static-renderer	Major
@tiptap/suggestion	Major
@tiptap/vue-2	Major
@tiptap/vue-3	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	944b02a
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/67938ca099e2d60008fff767
😎 Deploy Preview	https://deploy-preview-6050--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@6050

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@6050

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@6050

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@6050

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@6050

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@6050

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@6050

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@6050

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@6050

@tiptap/extension-collaboration-cursor

npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@6050

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@6050

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@6050

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@6050

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@6050

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@6050

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@6050

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@6050

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@6050

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@6050

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@6050

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@6050

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@6050

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@6050

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@6050

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@6050

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@6050

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@6050

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@6050

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@6050

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@6050

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@6050

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@6050

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@6050

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@6050

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@6050

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@6050

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@6050

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@6050

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@6050

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@6050

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@6050

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@6050

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@6050

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@6050

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@6050

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@6050

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@6050

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@6050

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@6050

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@6050

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@6050

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@6050

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@6050

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@6050

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@6050

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@6050

commit: 944b02a