@tiptap/core 2.5.0-beta.0 → 2.5.0-beta.1

package/dist/packages/core/src/Editor.d.ts

@@ -6,8 +6,10 @@ import { ExtensionManager } from './ExtensionManager.js';
 import { NodePos } from './NodePos.js';
 import { CanCommands, ChainedCommands, EditorEvents, EditorOptions, JSONContent, SingleCommands, TextSerializer } from './types.js';
 export * as extensions from './extensions/index.js';
-export interface HTMLElement {
-    editor?: Editor;
+declare global {
+    interface HTMLElement {
+        editor?: Editor;
+    }
 }
 export declare class Editor extends EventEmitter<EditorEvents> {
     private commandManager;

package/dist/packages/core/src/commands/insertContentAt.d.ts

@@ -28,8 +28,18 @@ declare module '@tiptap/core' {
                  * Whether to update the selection after inserting the content.
                  */
                 updateSelection?: boolean;
+                /**
+                 * Whether to apply input rules after inserting the content.
+                 */
                 applyInputRules?: boolean;
+                /**
+                 * Whether to apply paste rules after inserting the content.
+                 */
                 applyPasteRules?: boolean;
+                /**
+                 * Whether to throw an error if the content is invalid.
+                 */
+                errorOnInvalidContent?: boolean;
             }) => ReturnType;
         };
     }

package/dist/packages/core/src/commands/setContent.d.ts

@@ -24,7 +24,16 @@ declare module '@tiptap/core' {
              * Options for parsing the content.
              * @default {}
              */
-            parseOptions?: ParseOptions) => ReturnType;
+            parseOptions?: ParseOptions, 
+            /**
+             * Options for `setContent`.
+             */
+            options?: {
+                /**
+                 * Whether to throw an error if the content is invalid.
+                 */
+                errorOnInvalidContent?: boolean;
+            }) => ReturnType;
         };
     }
 }

package/dist/packages/core/src/helpers/createDocument.d.ts

@@ -7,4 +7,6 @@ import { Content } from '../types.js';
  * @param parseOptions Options for the parser
  * @returns The created Prosemirror document node
  */
-export declare function createDocument(content: Content, schema: Schema, parseOptions?: ParseOptions): ProseMirrorNode;
+export declare function createDocument(content: Content, schema: Schema, parseOptions?: ParseOptions, options?: {
+    errorOnInvalidContent?: boolean;
+}): ProseMirrorNode;

package/dist/packages/core/src/helpers/createNodeFromContent.d.ts

@@ -3,6 +3,7 @@ import { Content } from '../types.js';
 export declare type CreateNodeFromContentOptions = {
     slice?: boolean;
     parseOptions?: ParseOptions;
+    errorOnInvalidContent?: boolean;
 };
 /**
  * Takes a JSON or HTML content and creates a Prosemirror node or fragment from it.

package/dist/packages/core/src/types.d.ts

@@ -23,6 +23,15 @@ export interface EditorEvents {
     create: {
         editor: Editor;
     };
+    contentError: {
+        editor: Editor;
+        error: Error;
+        /**
+         * If called, will re-initialize the editor with the collaboration extension removed.
+         * This will prevent syncing back deletions of content not present in the current schema.
+         */
+        disableCollaboration: () => void;
+    };
     update: {
         editor: Editor;
         transaction: Transaction;
@@ -66,8 +75,20 @@ export interface EditorOptions {
     enableInputRules: EnableRules;
     enablePasteRules: EnableRules;
     enableCoreExtensions: boolean;
+    /**
+     * If `true`, the editor will check the content for errors on initialization.
+     * Emitting the `contentError` event if the content is invalid.
+     * Which can be used to show a warning or error message to the user.
+     * @default false
+     */
+    enableContentCheck: boolean;
     onBeforeCreate: (props: EditorEvents['beforeCreate']) => void;
     onCreate: (props: EditorEvents['create']) => void;
+    /**
+     * Called when the editor encounters an error while parsing the content.
+     * Only enabled if `enableContentCheck` is `true`.
+     */
+    onContentError: (props: EditorEvents['contentError']) => void;
     onUpdate: (props: EditorEvents['update']) => void;
     onSelectionUpdate: (props: EditorEvents['selectionUpdate']) => void;
     onTransaction: (props: EditorEvents['transaction']) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.5.0-beta.0",
+  "version": "2.5.0-beta.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^2.5.0-beta.0"
+    "@tiptap/pm": "^2.5.0-beta.1"
   },
   "peerDependencies": {
     "@tiptap/pm": "^2.0.0"

package/src/Editor.ts

@@ -1,5 +1,8 @@
 import {
-  MarkType, NodeType, Schema,
+  MarkType,
+  Node as ProseMirrorNode,
+  NodeType,
+  Schema,
 } from '@tiptap/pm/model'
 import {
   EditorState, Plugin, PluginKey, Transaction,
@@ -36,8 +39,10 @@ import { isFunction } from './utilities/isFunction.js'
 
 export * as extensions from './extensions/index.js'
 
-export interface HTMLElement {
-  editor?: Editor
+declare global {
+  interface HTMLElement {
+    editor?: Editor;
+  }
 }
 
 export class Editor extends EventEmitter<EditorEvents> {
@@ -69,6 +74,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     enableInputRules: true,
     enablePasteRules: true,
     enableCoreExtensions: true,
+    enableContentCheck: false,
     onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
@@ -77,6 +83,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     onFocus: () => null,
     onBlur: () => null,
     onDestroy: () => null,
+    onContentError: ({ error }) => { throw error },
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -87,6 +94,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.createSchema()
     this.on('beforeCreate', this.options.onBeforeCreate)
     this.emit('beforeCreate', { editor: this })
+    this.on('contentError', this.options.onContentError)
     this.createView()
     this.injectCSS()
     this.on('create', this.options.onCreate)
@@ -276,7 +284,40 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Creates a ProseMirror view.
    */
   private createView(): void {
-    const doc = createDocument(this.options.content, this.schema, this.options.parseOptions)
+    let doc: ProseMirrorNode
+
+    try {
+      doc = createDocument(
+        this.options.content,
+        this.schema,
+        this.options.parseOptions,
+        { errorOnInvalidContent: this.options.enableContentCheck },
+      )
+    } catch (e) {
+      if (!(e instanceof Error) || !['[tiptap error]: Invalid JSON content', '[tiptap error]: Invalid HTML content'].includes(e.message)) {
+        // Not the content error we were expecting
+        throw e
+      }
+      this.emit('contentError', {
+        editor: this,
+        error: e as Error,
+        disableCollaboration: () => {
+          // To avoid syncing back invalid content, reinitialize the extensions without the collaboration extension
+          this.options.extensions = this.options.extensions.filter(extension => extension.name !== 'collaboration')
+
+          // Restart the initialization process by recreating the extension manager with the new set of extensions
+          this.createExtensionManager()
+        },
+      })
+
+      // Content is invalid, but attempt to create it anyway, stripping out the invalid parts
+      doc = createDocument(
+        this.options.content,
+        this.schema,
+        this.options.parseOptions,
+        { errorOnInvalidContent: false },
+      )
+    }
     const selection = resolveFocusPosition(doc, this.options.autofocus)
 
     this.view = new EditorView(this.options.element, {

package/src/commands/insertContentAt.ts

@@ -35,8 +35,21 @@ declare module '@tiptap/core' {
            * Whether to update the selection after inserting the content.
            */
           updateSelection?: boolean
+
+          /**
+           * Whether to apply input rules after inserting the content.
+           */
           applyInputRules?: boolean
+
+          /**
+           * Whether to apply paste rules after inserting the content.
+           */
           applyPasteRules?: boolean
+
+          /**
+           * Whether to throw an error if the content is invalid.
+           */
+          errorOnInvalidContent?: boolean
         },
       ) => ReturnType
     }
@@ -57,12 +70,19 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       ...options,
     }
 
-    const content = createNodeFromContent(value, editor.schema, {
-      parseOptions: {
-        preserveWhitespace: 'full',
-        ...options.parseOptions,
-      },
-    })
+    let content: Fragment | ProseMirrorNode
+
+    try {
+      content = createNodeFromContent(value, editor.schema, {
+        parseOptions: {
+          preserveWhitespace: 'full',
+          ...options.parseOptions,
+        },
+        errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+      })
+    } catch (e) {
+      return false
+    }
 
     // don’t dispatch an empty fragment because this can lead to strange errors
     if (content.toString() === '<>') {

package/src/commands/setContent.ts

@@ -1,4 +1,4 @@
-import { ParseOptions } from '@tiptap/pm/model'
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
 
 import { createDocument } from '../helpers/createDocument.js'
 import { Content, RawCommands } from '../types.js'
@@ -30,14 +30,32 @@ declare module '@tiptap/core' {
          * @default {}
          */
         parseOptions?: ParseOptions,
+        /**
+         * Options for `setContent`.
+         */
+        options?: {
+          /**
+           * Whether to throw an error if the content is invalid.
+           */
+           errorOnInvalidContent?: boolean
+        },
       ) => ReturnType
     }
   }
 }
 
-export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({ tr, editor, dispatch }) => {
+export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}, options = {}) => ({ tr, editor, dispatch }) => {
   const { doc } = tr
-  const document = createDocument(content, editor.schema, parseOptions)
+
+  let document: Fragment | ProseMirrorNode
+
+  try {
+    document = createDocument(content, editor.schema, parseOptions, {
+      errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+    })
+  } catch (e) {
+    return false
+  }
 
   if (dispatch) {
     tr.replaceWith(0, doc.content.size, document).setMeta('preventUpdate', !emitUpdate)

package/src/helpers/createDocument.ts

@@ -14,6 +14,11 @@ export function createDocument(
   content: Content,
   schema: Schema,
   parseOptions: ParseOptions = {},
+  options: { errorOnInvalidContent?: boolean } = {},
 ): ProseMirrorNode {
-  return createNodeFromContent(content, schema, { slice: false, parseOptions }) as ProseMirrorNode
+  return createNodeFromContent(content, schema, {
+    slice: false,
+    parseOptions,
+    errorOnInvalidContent: options.errorOnInvalidContent,
+  }) as ProseMirrorNode
 }

package/src/helpers/createNodeFromContent.ts

@@ -12,6 +12,7 @@ import { elementFromString } from '../utilities/elementFromString.js'
 export type CreateNodeFromContentOptions = {
   slice?: boolean
   parseOptions?: ParseOptions
+  errorOnInvalidContent?: boolean
 }
 
 /**
@@ -46,6 +47,10 @@ export function createNodeFromContent(
 
       return schema.nodeFromJSON(content)
     } catch (error) {
+      if (options.errorOnInvalidContent) {
+        throw new Error('[tiptap error]: Invalid JSON content', { cause: error as Error })
+      }
+
       console.warn('[tiptap warn]: Invalid content.', 'Passed value:', content, 'Error:', error)
 
       return createNodeFromContent('', schema, options)
@@ -53,11 +58,46 @@ export function createNodeFromContent(
   }
 
   if (isTextContent) {
-    const parser = DOMParser.fromSchema(schema)
+    let schemaToUse = schema
+    let hasInvalidContent = false
+
+    // Only ever check for invalid content if we're supposed to throw an error
+    if (options.errorOnInvalidContent) {
+      schemaToUse = new Schema({
+        topNode: schema.spec.topNode,
+        marks: schema.spec.marks,
+        // Prosemirror's schemas are executed such that: the last to execute, matches last
+        // This means that we can add a catch-all node at the end of the schema to catch any content that we don't know how to handle
+        nodes: schema.spec.nodes.append({
+          __tiptap__private__unknown__catch__all__node: {
+            content: 'inline*',
+            group: 'block',
+            parseDOM: [
+              {
+                tag: '*',
+                getAttrs: () => {
+                  // If this is ever called, we know that the content has something that we don't know how to handle in the schema
+                  hasInvalidContent = true
+                  return null
+                },
+              },
+            ],
+          },
+        }),
+      })
+    }
 
-    return options.slice
+    const parser = DOMParser.fromSchema(schemaToUse)
+
+    const response = options.slice
       ? parser.parseSlice(elementFromString(content), options.parseOptions).content
       : parser.parse(elementFromString(content), options.parseOptions)
+
+    if (options.errorOnInvalidContent && hasInvalidContent) {
+      throw new Error('[tiptap error]: Invalid HTML content')
+    }
+
+    return response
   }
 
   return createNodeFromContent('', schema, options)

package/src/types.ts

@@ -39,6 +39,15 @@ export type MaybeThisParameterType<T> = Exclude<T, Primitive> extends (...args:
 export interface EditorEvents {
   beforeCreate: { editor: Editor }
   create: { editor: Editor }
+  contentError: {
+    editor: Editor,
+    error: Error,
+    /**
+     * If called, will re-initialize the editor with the collaboration extension removed.
+     * This will prevent syncing back deletions of content not present in the current schema.
+     */
+    disableCollaboration: () => void
+  }
   update: { editor: Editor; transaction: Transaction }
   selectionUpdate: { editor: Editor; transaction: Transaction }
   transaction: { editor: Editor; transaction: Transaction }
@@ -67,8 +76,20 @@ export interface EditorOptions {
   enableInputRules: EnableRules
   enablePasteRules: EnableRules
   enableCoreExtensions: boolean
+  /**
+   * If `true`, the editor will check the content for errors on initialization.
+   * Emitting the `contentError` event if the content is invalid.
+   * Which can be used to show a warning or error message to the user.
+   * @default false
+   */
+  enableContentCheck: boolean
   onBeforeCreate: (props: EditorEvents['beforeCreate']) => void
   onCreate: (props: EditorEvents['create']) => void
+  /**
+   * Called when the editor encounters an error while parsing the content.
+   * Only enabled if `enableContentCheck` is `true`.
+   */
+  onContentError: (props: EditorEvents['contentError']) => void
   onUpdate: (props: EditorEvents['update']) => void
   onSelectionUpdate: (props: EditorEvents['selectionUpdate']) => void
   onTransaction: (props: EditorEvents['transaction']) => void