@tiptap/core 3.0.0-next.4 → 3.0.0-next.5

package/dist/jsx-runtime/jsx-runtime.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/jsx-runtime.ts
+var jsx_runtime_exports = {};
+__export(jsx_runtime_exports, {
+  Fragment: () => Fragment,
+  createElement: () => h,
+  h: () => h,
+  jsx: () => h,
+  jsxDEV: () => h,
+  jsxs: () => h
+});
+module.exports = __toCommonJS(jsx_runtime_exports);
+function Fragment(props) {
+  return props.children;
+}
+var h = (tag, attributes) => {
+  if (tag === "slot") {
+    return 0;
+  }
+  if (tag instanceof Function) {
+    return tag(attributes);
+  }
+  const { children, ...rest } = attributes != null ? attributes : {};
+  if (tag === "svg") {
+    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
+  }
+  return [tag, rest, children];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fragment,
+  createElement,
+  h,
+  jsx,
+  jsxDEV,
+  jsxs
+});
+//# sourceMappingURL=jsx-runtime.cjs.map

package/dist/jsx-runtime/jsx-runtime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/jsx-runtime.ts"],"sourcesContent":["export type Attributes = Record<string, any>\n\nexport type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray\n/**\n * Better describes the output of a `renderHTML` function in prosemirror\n * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec\n */\nexport type DOMOutputSpecArray =\n  | [string]\n  | [string, Attributes]\n  | [string, 0]\n  | [string, Attributes, 0]\n  | [string, Attributes, DOMOutputSpecArray | 0]\n  | [string, DOMOutputSpecArray]\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    // @ts-ignore - conflict with React typings\n    type Element = [string, ...any[]]\n    // @ts-ignore - conflict with React typings\n    interface IntrinsicElements {\n      // @ts-ignore - conflict with React typings\n      [key: string]: any\n    }\n  }\n}\n\nexport type JSXRenderer = (\n  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),\n  props?: Attributes,\n  ...children: JSXRenderer[]\n) => DOMOutputSpecArray | DOMOutputSpecElement\n\nexport function Fragment(props: { children: JSXRenderer[] }) {\n  return props.children\n}\n\nexport const h: JSXRenderer = (tag, attributes) => {\n  // Treat the slot tag as the Prosemirror hole to render content into\n  if (tag === 'slot') {\n    return 0\n  }\n\n  // If the tag is a function, call it with the props\n  if (tag instanceof Function) {\n    return tag(attributes)\n  }\n\n  const { children, ...rest } = attributes ?? {}\n\n  if (tag === 'svg') {\n    throw new Error('SVG elements are not supported in the JSX syntax, use the array syntax instead')\n  }\n\n  // Otherwise, return the tag, attributes, and children\n  return [tag, rest, children]\n}\n\n// See\n// https://esbuild.github.io/api/#jsx-import-source\n// https://www.typescriptlang.org/tsconfig/#jsxImportSource\n\nexport { h as createElement, h as jsx, h as jsxDEV, h as jsxs }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCO,SAAS,SAAS,OAAoC;AAC3D,SAAO,MAAM;AACf;AAEO,IAAM,IAAiB,CAAC,KAAK,eAAe;AAEjD,MAAI,QAAQ,QAAQ;AAClB,WAAO;AAAA,EACT;AAGA,MAAI,eAAe,UAAU;AAC3B,WAAO,IAAI,UAAU;AAAA,EACvB;AAEA,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI,kCAAc,CAAC;AAE7C,MAAI,QAAQ,OAAO;AACjB,UAAM,IAAI,MAAM,gFAAgF;AAAA,EAClG;AAGA,SAAO,CAAC,KAAK,MAAM,QAAQ;AAC7B;","names":[]}

package/dist/jsx-runtime/jsx-runtime.d.cts

@@ -0,0 +1,22 @@
+type Attributes = Record<string, any>;
+type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray;
+/**
+ * Better describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+type DOMOutputSpecArray = [string] | [string, Attributes] | [string, 0] | [string, Attributes, 0] | [string, Attributes, DOMOutputSpecArray | 0] | [string, DOMOutputSpecArray];
+declare global {
+    namespace JSX {
+        type Element = [string, ...any[]];
+        interface IntrinsicElements {
+            [key: string]: any;
+        }
+    }
+}
+type JSXRenderer = (tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement), props?: Attributes, ...children: JSXRenderer[]) => DOMOutputSpecArray | DOMOutputSpecElement;
+declare function Fragment(props: {
+    children: JSXRenderer[];
+}): JSXRenderer[];
+declare const h: JSXRenderer;
+
+export { type Attributes, type DOMOutputSpecArray, type DOMOutputSpecElement, Fragment, type JSXRenderer, h as createElement, h, h as jsx, h as jsxDEV, h as jsxs };

package/dist/jsx-runtime/jsx-runtime.d.ts

@@ -0,0 +1,22 @@
+type Attributes = Record<string, any>;
+type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray;
+/**
+ * Better describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+type DOMOutputSpecArray = [string] | [string, Attributes] | [string, 0] | [string, Attributes, 0] | [string, Attributes, DOMOutputSpecArray | 0] | [string, DOMOutputSpecArray];
+declare global {
+    namespace JSX {
+        type Element = [string, ...any[]];
+        interface IntrinsicElements {
+            [key: string]: any;
+        }
+    }
+}
+type JSXRenderer = (tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement), props?: Attributes, ...children: JSXRenderer[]) => DOMOutputSpecArray | DOMOutputSpecElement;
+declare function Fragment(props: {
+    children: JSXRenderer[];
+}): JSXRenderer[];
+declare const h: JSXRenderer;
+
+export { type Attributes, type DOMOutputSpecArray, type DOMOutputSpecElement, Fragment, type JSXRenderer, h as createElement, h, h as jsx, h as jsxDEV, h as jsxs };

package/dist/jsx-runtime/jsx-runtime.js

@@ -0,0 +1,26 @@
+// src/jsx-runtime.ts
+function Fragment(props) {
+  return props.children;
+}
+var h = (tag, attributes) => {
+  if (tag === "slot") {
+    return 0;
+  }
+  if (tag instanceof Function) {
+    return tag(attributes);
+  }
+  const { children, ...rest } = attributes != null ? attributes : {};
+  if (tag === "svg") {
+    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
+  }
+  return [tag, rest, children];
+};
+export {
+  Fragment,
+  h as createElement,
+  h,
+  h as jsx,
+  h as jsxDEV,
+  h as jsxs
+};
+//# sourceMappingURL=jsx-runtime.js.map

package/dist/jsx-runtime/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/jsx-runtime.ts"],"sourcesContent":["export type Attributes = Record<string, any>\n\nexport type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray\n/**\n * Better describes the output of a `renderHTML` function in prosemirror\n * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec\n */\nexport type DOMOutputSpecArray =\n  | [string]\n  | [string, Attributes]\n  | [string, 0]\n  | [string, Attributes, 0]\n  | [string, Attributes, DOMOutputSpecArray | 0]\n  | [string, DOMOutputSpecArray]\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    // @ts-ignore - conflict with React typings\n    type Element = [string, ...any[]]\n    // @ts-ignore - conflict with React typings\n    interface IntrinsicElements {\n      // @ts-ignore - conflict with React typings\n      [key: string]: any\n    }\n  }\n}\n\nexport type JSXRenderer = (\n  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),\n  props?: Attributes,\n  ...children: JSXRenderer[]\n) => DOMOutputSpecArray | DOMOutputSpecElement\n\nexport function Fragment(props: { children: JSXRenderer[] }) {\n  return props.children\n}\n\nexport const h: JSXRenderer = (tag, attributes) => {\n  // Treat the slot tag as the Prosemirror hole to render content into\n  if (tag === 'slot') {\n    return 0\n  }\n\n  // If the tag is a function, call it with the props\n  if (tag instanceof Function) {\n    return tag(attributes)\n  }\n\n  const { children, ...rest } = attributes ?? {}\n\n  if (tag === 'svg') {\n    throw new Error('SVG elements are not supported in the JSX syntax, use the array syntax instead')\n  }\n\n  // Otherwise, return the tag, attributes, and children\n  return [tag, rest, children]\n}\n\n// See\n// https://esbuild.github.io/api/#jsx-import-source\n// https://www.typescriptlang.org/tsconfig/#jsxImportSource\n\nexport { h as createElement, h as jsx, h as jsxDEV, h as jsxs }\n"],"mappings":";AAkCO,SAAS,SAAS,OAAoC;AAC3D,SAAO,MAAM;AACf;AAEO,IAAM,IAAiB,CAAC,KAAK,eAAe;AAEjD,MAAI,QAAQ,QAAQ;AAClB,WAAO;AAAA,EACT;AAGA,MAAI,eAAe,UAAU;AAC3B,WAAO,IAAI,UAAU;AAAA,EACvB;AAEA,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI,kCAAc,CAAC;AAE7C,MAAI,QAAQ,OAAO;AACjB,UAAM,IAAI,MAAM,gFAAgF;AAAA,EAClG;AAGA,SAAO,CAAC,KAAK,MAAM,QAAQ;AAC7B;","names":[]}

package/jsx-runtime/index.cjs

@@ -0,0 +1 @@
+export * from '../dist/jsx-runtime/jsx-runtime.cjs'

package/jsx-runtime/index.d.cts

@@ -0,0 +1 @@
+export * from '../src/jsx-runtime.ts'

package/jsx-runtime/index.d.ts

@@ -0,0 +1 @@
+export type * from '../src/jsx-runtime.ts'

package/jsx-runtime/index.js

@@ -0,0 +1 @@
+export * from '../dist/jsx-runtime/jsx-runtime.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.0.0-next.4",
+  "version": "3.0.0-next.5",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -24,6 +24,22 @@
       },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./jsx-runtime": {
+      "types": {
+        "import": "./jsx-runtime/index.d.ts",
+        "require": "./jsx-runtime/index.d.cts"
+      },
+      "import": "./jsx-runtime/index.js",
+      "require": "./jsx-runtime/index.cjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": {
+        "import": "./jsx-dev-runtime/index.d.ts",
+        "require": "./jsx-dev-runtime/index.d.cts"
+      },
+      "import": "./jsx-dev-runtime/index.js",
+      "require": "./jsx-dev-runtime/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -31,10 +47,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "jsx-runtime"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.0.0-next.4"
+    "@tiptap/pm": "^3.0.0-next.5"
   },
   "peerDependencies": {
     "@tiptap/pm": "^3.0.0-next.1"

package/src/Editor.ts

@@ -9,6 +9,7 @@ import { ExtensionManager } from './ExtensionManager.js'
 import {
   ClipboardTextSerializer,
   Commands,
+  Delete,
   Drop,
   Editable,
   FocusEvents,
@@ -24,6 +25,7 @@ import { getTextSerializersFromSchema } from './helpers/getTextSerializersFromSc
 import { isActive } from './helpers/isActive.js'
 import { isNodeEmpty } from './helpers/isNodeEmpty.js'
 import { resolveFocusPosition } from './helpers/resolveFocusPosition.js'
+import type { Storage } from './index.js'
 import { NodePos } from './NodePos.js'
 import { style } from './style.js'
 import {
@@ -56,16 +58,18 @@ export class Editor extends EventEmitter<EditorEvents> {
 
   public schema!: Schema
 
-  public view!: EditorView
+  private editorView: EditorView | null = null
 
   public isFocused = false
 
+  private editorState!: EditorState
+
   /**
    * The editor is considered initialized after the `create` event has been emitted.
    */
   public isInitialized = false
 
-  public extensionStorage: Record<string, any> = {}
+  public extensionStorage: Storage = {} as Storage
 
   /**
    * A unique ID for this editor instance.
@@ -73,7 +77,7 @@ export class Editor extends EventEmitter<EditorEvents> {
   public instanceId = Math.random().toString(36).slice(2, 9)
 
   public options: EditorOptions = {
-    element: document.createElement('div'),
+    element: typeof document !== 'undefined' ? document.createElement('div') : null,
     content: '',
     injectCSS: true,
     injectNonce: undefined,
@@ -100,6 +104,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     },
     onPaste: () => null,
     onDrop: () => null,
+    onDelete: () => null,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -111,8 +116,6 @@ export class Editor extends EventEmitter<EditorEvents> {
     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)
     this.on('update', this.options.onUpdate)
     this.on('selectionUpdate', this.options.onSelectionUpdate)
@@ -122,6 +125,30 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.on('destroy', this.options.onDestroy)
     this.on('drop', ({ event, slice, moved }) => this.options.onDrop(event, slice, moved))
     this.on('paste', ({ event, slice }) => this.options.onPaste(event, slice))
+    this.on('delete', this.options.onDelete)
+
+    const initialDoc = this.createDoc()
+    const selection = resolveFocusPosition(initialDoc, this.options.autofocus)
+
+    // Set editor state immediately, so that it's available independently from the view
+    this.editorState = EditorState.create({
+      doc: initialDoc,
+      schema: this.schema,
+      selection: selection || undefined,
+    })
+
+    if (this.options.element) {
+      this.mount(this.options.element)
+    }
+  }
+
+  public mount(el: NonNullable<EditorOptions['element']> & {}) {
+    if (typeof document === 'undefined') {
+      throw new Error(
+        `[tiptap error]: The editor cannot be mounted because there is no 'document' defined in this environment.`,
+      )
+    }
+    this.createView(el)
 
     window.setTimeout(() => {
       if (this.isDestroyed) {
@@ -137,7 +164,7 @@ export class Editor extends EventEmitter<EditorEvents> {
   /**
    * Returns the editor storage.
    */
-  public get storage(): Record<string, any> {
+  public get storage(): Storage {
     return this.extensionStorage
   }
 
@@ -166,7 +193,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Inject CSS styles.
    */
   private injectCSS(): void {
-    if (this.options.injectCSS && document) {
+    if (this.options.injectCSS && typeof document !== 'undefined') {
       this.css = createStyleTag(style, this.options.injectNonce)
     }
   }
@@ -182,7 +209,7 @@ export class Editor extends EventEmitter<EditorEvents> {
       ...options,
     }
 
-    if (!this.view || !this.state || this.isDestroyed) {
+    if (!this.editorView || !this.state || this.isDestroyed) {
       return
     }
 
@@ -214,11 +241,57 @@ export class Editor extends EventEmitter<EditorEvents> {
     return this.options.editable && this.view && this.view.editable
   }
 
+  /**
+   * Returns the editor state.
+   */
+  public get view(): EditorView {
+    if (this.editorView) {
+      return this.editorView
+    }
+
+    return new Proxy(
+      {
+        state: this.editorState,
+        updateState: (state: EditorState): ReturnType<EditorView['updateState']> => {
+          this.editorState = state
+        },
+        dispatch: (tr: Transaction): ReturnType<EditorView['dispatch']> => {
+          this.editorState = this.state.apply(tr)
+        },
+
+        // Stub some commonly accessed properties to prevent errors
+        composing: false,
+        dragging: null,
+        editable: true,
+      } as EditorView,
+      {
+        get: (obj, key) => {
+          // Specifically always return the most recent editorState
+          if (key === 'state') {
+            return this.editorState
+          }
+          if (key in obj) {
+            return Reflect.get(obj, key)
+          }
+
+          // We throw an error here, because we know the view is not available
+          throw new Error(
+            `[tiptap error]: The editor view is not available. Cannot access view['${key as string}']. The editor may not be mounted yet.`,
+          )
+        },
+      },
+    ) as EditorView
+  }
+
   /**
    * Returns the editor state.
    */
   public get state(): EditorState {
-    return this.view.state
+    if (this.editorView) {
+      this.editorState = this.view.state
+    }
+
+    return this.editorState
   }
 
   /**
@@ -297,6 +370,7 @@ export class Editor extends EventEmitter<EditorEvents> {
           Tabindex,
           Drop,
           Paste,
+          Delete,
         ].filter(ext => {
           if (typeof this.options.enableCoreExtensions === 'object') {
             return (
@@ -330,9 +404,9 @@ export class Editor extends EventEmitter<EditorEvents> {
   }
 
   /**
-   * Creates a ProseMirror view.
+   * Creates the initial document.
    */
-  private createView(): void {
+  private createDoc(): ProseMirrorNode {
     let doc: ProseMirrorNode
 
     try {
@@ -351,8 +425,12 @@ export class Editor extends EventEmitter<EditorEvents> {
         editor: this,
         error: e as Error,
         disableCollaboration: () => {
-          if (this.storage.collaboration) {
-            this.storage.collaboration.isDisabled = true
+          if (
+            'collaboration' in this.storage &&
+            typeof this.storage.collaboration === 'object' &&
+            this.storage.collaboration
+          ) {
+            ;(this.storage.collaboration as any).isDisabled = true
           }
           // To avoid syncing back invalid content, reinitialize the extensions without the collaboration extension
           this.options.extensions = this.options.extensions.filter(extension => extension.name !== 'collaboration')
@@ -367,9 +445,14 @@ export class Editor extends EventEmitter<EditorEvents> {
         errorOnInvalidContent: false,
       })
     }
-    const selection = resolveFocusPosition(doc, this.options.autofocus)
+    return doc
+  }
 
-    this.view = new EditorView(this.options.element, {
+  /**
+   * Creates a ProseMirror view.
+   */
+  private createView(element: NonNullable<EditorOptions['element']> & {}): void {
+    this.editorView = new EditorView(element, {
       ...this.options.editorProps,
       attributes: {
         // add `role="textbox"` to the editor element
@@ -377,10 +460,7 @@ export class Editor extends EventEmitter<EditorEvents> {
         ...this.options.editorProps?.attributes,
       },
       dispatchTransaction: this.dispatchTransaction.bind(this),
-      state: EditorState.create({
-        doc,
-        selection: selection || undefined,
-      }),
+      state: this.editorState,
     })
 
     // `editor.view` is not yet available at this time.
@@ -393,6 +473,7 @@ export class Editor extends EventEmitter<EditorEvents> {
 
     this.createNodeViews()
     this.prependClass()
+    this.injectCSS()
 
     // Let’s store the editor instance in the DOM element.
     // So we’ll have access to it for tests.
@@ -411,6 +492,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     }
 
     this.view.setProps({
+      markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews,
     })
   }
@@ -602,15 +684,15 @@ export class Editor extends EventEmitter<EditorEvents> {
   public destroy(): void {
     this.emit('destroy')
 
-    if (this.view) {
+    if (this.editorView) {
       // Cleanup our reference to prevent circular references which caused memory leaks
       // @ts-ignore
-      const dom = this.view.dom as TiptapEditorHTMLElement
+      const dom = this.editorView.dom as TiptapEditorHTMLElement
 
       if (dom && dom.editor) {
         delete dom.editor
       }
-      this.view.destroy()
+      this.editorView.destroy()
     }
 
     this.removeAllListeners()