@tiptap/core 3.0.0 → 3.0.2-beta.0

package/src/helpers/rewriteUnknownContent.ts

@@ -0,0 +1,149 @@
+import type { Schema } from '@tiptap/pm/model'
+
+import type { JSONContent } from '../types.js'
+
+type RewriteUnknownContentOptions = {
+  /**
+   * If true, unknown nodes will be treated as paragraphs
+   * @default true
+   */
+  fallbackToParagraph?: boolean
+}
+
+type RewrittenContent = {
+  /**
+   * The original JSON content that was rewritten
+   */
+  original: JSONContent
+  /**
+   * The name of the node or mark that was unsupported
+   */
+  unsupported: string
+}[]
+
+/**
+ * The actual implementation of the rewriteUnknownContent function
+ */
+function rewriteUnknownContentInner({
+  json,
+  validMarks,
+  validNodes,
+  options,
+  rewrittenContent = [],
+}: {
+  json: JSONContent
+  validMarks: Set<string>
+  validNodes: Set<string>
+  options?: RewriteUnknownContentOptions
+  rewrittenContent?: RewrittenContent
+}): {
+  /**
+   * The cleaned JSON content
+   */
+  json: JSONContent | null
+  /**
+   * The array of nodes and marks that were rewritten
+   */
+  rewrittenContent: RewrittenContent
+} {
+  if (json.marks && Array.isArray(json.marks)) {
+    json.marks = json.marks.filter(mark => {
+      const name = typeof mark === 'string' ? mark : mark.type
+
+      if (validMarks.has(name)) {
+        return true
+      }
+
+      rewrittenContent.push({
+        original: JSON.parse(JSON.stringify(mark)),
+        unsupported: name,
+      })
+      // Just ignore any unknown marks
+      return false
+    })
+  }
+
+  if (json.content && Array.isArray(json.content)) {
+    json.content = json.content
+      .map(
+        value =>
+          rewriteUnknownContentInner({
+            json: value,
+            validMarks,
+            validNodes,
+            options,
+            rewrittenContent,
+          }).json,
+      )
+      .filter(a => a !== null && a !== undefined)
+  }
+
+  if (json.type && !validNodes.has(json.type)) {
+    rewrittenContent.push({
+      original: JSON.parse(JSON.stringify(json)),
+      unsupported: json.type,
+    })
+
+    if (json.content && Array.isArray(json.content) && options?.fallbackToParagraph !== false) {
+      // Just treat it like a paragraph and hope for the best
+      json.type = 'paragraph'
+
+      return {
+        json,
+        rewrittenContent,
+      }
+    }
+
+    // or just omit it entirely
+    return {
+      json: null,
+      rewrittenContent,
+    }
+  }
+
+  return { json, rewrittenContent }
+}
+
+/**
+ * Rewrite unknown nodes and marks within JSON content
+ * Allowing for user within the editor
+ */
+export function rewriteUnknownContent(
+  /**
+   * The JSON content to clean of unknown nodes and marks
+   */
+  json: JSONContent,
+  /**
+   * The schema to use for validation
+   */
+  schema: Schema,
+  /**
+   * Options for the cleaning process
+   */
+  options?: RewriteUnknownContentOptions,
+): {
+  /**
+   * The cleaned JSON content
+   */
+  json: JSONContent | null
+  /**
+   * The array of nodes and marks that were rewritten
+   */
+  rewrittenContent: {
+    /**
+     * The original JSON content that was rewritten
+     */
+    original: JSONContent
+    /**
+     * The name of the node or mark that was unsupported
+     */
+    unsupported: string
+  }[]
+} {
+  return rewriteUnknownContentInner({
+    json,
+    validNodes: new Set(Object.keys(schema.nodes)),
+    validMarks: new Set(Object.keys(schema.marks)),
+    options,
+  })
+}

package/src/helpers/selectionToInsertionEnd.ts

@@ -1,4 +1,5 @@
-import { Selection, Transaction } from '@tiptap/pm/state'
+import type { Transaction } from '@tiptap/pm/state'
+import { Selection } from '@tiptap/pm/state'
 import { ReplaceAroundStep, ReplaceStep } from '@tiptap/pm/transform'
 
 // source: https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.js#L466

package/src/helpers/sortExtensions.ts

@@ -0,0 +1,26 @@
+import type { AnyConfig, Extensions } from '../types.js'
+import { getExtensionField } from './getExtensionField.js'
+
+/**
+ * Sort extensions by priority.
+ * @param extensions An array of Tiptap extensions
+ * @returns A sorted array of Tiptap extensions by priority
+ */
+export function sortExtensions(extensions: Extensions): Extensions {
+  const defaultPriority = 100
+
+  return extensions.sort((a, b) => {
+    const priorityA = getExtensionField<AnyConfig['priority']>(a, 'priority') || defaultPriority
+    const priorityB = getExtensionField<AnyConfig['priority']>(b, 'priority') || defaultPriority
+
+    if (priorityA > priorityB) {
+      return -1
+    }
+
+    if (priorityA < priorityB) {
+      return 1
+    }
+
+    return 0
+  })
+}

package/src/helpers/splitExtensions.ts

@@ -1,7 +1,7 @@
-import { Extension } from '../Extension.js'
-import { Mark } from '../Mark.js'
-import { Node } from '../Node.js'
-import { Extensions } from '../types.js'
+import type { Extension } from '../Extension.js'
+import type { Mark } from '../Mark.js'
+import type { Node } from '../Node.js'
+import type { Extensions } from '../types.js'
 
 export function splitExtensions(extensions: Extensions) {
   const baseExtensions = extensions.filter(extension => extension.type === 'extension') as Extension[]

package/src/index.ts

@@ -5,7 +5,9 @@ export * as extensions from './extensions/index.js'
 export * from './helpers/index.js'
 export * from './InputRule.js'
 export * from './inputRules/index.js'
+export { createElement, Fragment, createElement as h } from './jsx-runtime.js'
 export * from './Mark.js'
+export * from './MarkView.js'
 export * from './Node.js'
 export * from './NodePos.js'
 export * from './NodeView.js'
@@ -19,10 +21,4 @@ export * from './utilities/index.js'
 export interface Commands<ReturnType = any> {}
 
 // eslint-disable-next-line
-export interface ExtensionConfig<Options = any, Storage = any> {}
-
-// eslint-disable-next-line
-export interface NodeConfig<Options = any, Storage = any> {}
-
-// eslint-disable-next-line
-export interface MarkConfig<Options = any, Storage = any> {}
+export interface Storage {}

package/src/inputRules/markInputRule.ts

@@ -1,23 +1,20 @@
-import { MarkType } from '@tiptap/pm/model'
+import type { MarkType } from '@tiptap/pm/model'
 
 import { getMarksBetween } from '../helpers/getMarksBetween.js'
-import { InputRule, InputRuleFinder } from '../InputRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { InputRuleFinder } from '../InputRule.js'
+import { InputRule } from '../InputRule.js'
+import type { ExtendedRegExpMatchArray } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 
 /**
  * Build an input rule that adds a mark when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function markInputRule(config: {
   find: InputRuleFinder
   type: MarkType
-  getAttributes?:
-    | Record<string, any>
-    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-    | false
-    | null
+  getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null
 }) {
   return new InputRule({
     find: config.find,

package/src/inputRules/nodeInputRule.ts

@@ -1,13 +1,14 @@
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 
-import { InputRule, InputRuleFinder } from '../InputRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { InputRuleFinder } from '../InputRule.js'
+import { InputRule } from '../InputRule.js'
+import type { ExtendedRegExpMatchArray } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 
 /**
  * Build an input rule that adds a node when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function nodeInputRule(config: {
   /**
@@ -24,11 +25,7 @@ export function nodeInputRule(config: {
    * A function that returns the attributes for the node
    * can also be an object of attributes
    */
-  getAttributes?:
-    | Record<string, any>
-    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-    | false
-    | null
+  getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null
 }) {
   return new InputRule({
     find: config.find,
@@ -60,10 +57,7 @@ export function nodeInputRule(config: {
       } else if (match[0]) {
         const insertionStart = config.type.isInline ? start : start - 1
 
-        tr.insert(insertionStart, config.type.create(attributes)).delete(
-          tr.mapping.map(start),
-          tr.mapping.map(end),
-        )
+        tr.insert(insertionStart, config.type.create(attributes)).delete(tr.mapping.map(start), tr.mapping.map(end))
       }
 
       tr.scrollIntoView()

package/src/inputRules/textInputRule.ts

@@ -1,14 +1,12 @@
-import { InputRule, InputRuleFinder } from '../InputRule.js'
+import type { InputRuleFinder } from '../InputRule.js'
+import { InputRule } from '../InputRule.js'
 
 /**
  * Build an input rule that replaces text when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
-export function textInputRule(config: {
-  find: InputRuleFinder,
-  replace: string,
-}) {
+export function textInputRule(config: { find: InputRuleFinder; replace: string }) {
   return new InputRule({
     find: config.find,
     handler: ({ state, range, match }) => {

package/src/inputRules/textblockTypeInputRule.ts

@@ -1,7 +1,8 @@
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 
-import { InputRule, InputRuleFinder } from '../InputRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { InputRuleFinder } from '../InputRule.js'
+import { InputRule } from '../InputRule.js'
+import type { ExtendedRegExpMatchArray } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 
 /**
@@ -9,16 +10,12 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
  * matched text is typed into it. When using a regular expresion you’ll
  * probably want the regexp to start with `^`, so that the pattern can
  * only occur at the start of a textblock.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function textblockTypeInputRule(config: {
   find: InputRuleFinder
   type: NodeType
-  getAttributes?:
-    | Record<string, any>
-    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-    | false
-    | null
+  getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null
 }) {
   return new InputRule({
     find: config.find,
@@ -30,9 +27,7 @@ export function textblockTypeInputRule(config: {
         return null
       }
 
-      state.tr
-        .delete(range.from, range.to)
-        .setBlockType(range.from, range.from, config.type, attributes)
+      state.tr.delete(range.from, range.to).setBlockType(range.from, range.from, config.type, attributes)
     },
   })
 }

package/src/inputRules/wrappingInputRule.ts

@@ -1,9 +1,10 @@
-import { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model'
+import type { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model'
 import { canJoin, findWrapping } from '@tiptap/pm/transform'
 
-import { Editor } from '../Editor.js'
-import { InputRule, InputRuleFinder } from '../InputRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { Editor } from '../Editor.js'
+import type { InputRuleFinder } from '../InputRule.js'
+import { InputRule } from '../InputRule.js'
+import type { ExtendedRegExpMatchArray } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 
 /**
@@ -19,27 +20,20 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
  * two nodes. You can pass a join predicate, which takes a regular
  * expression match and the node before the wrapped node, and can
  * return a boolean to indicate whether a join should happen.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function wrappingInputRule(config: {
-  find: InputRuleFinder,
-  type: NodeType,
-  keepMarks?: boolean,
-  keepAttributes?: boolean,
+  find: InputRuleFinder
+  type: NodeType
+  keepMarks?: boolean
+  keepAttributes?: boolean
   editor?: Editor
-  getAttributes?:
-  | Record<string, any>
-  | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-  | false
-  | null
-  ,
-  joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean,
+  getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null
+  joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean
 }) {
   return new InputRule({
     find: config.find,
-    handler: ({
-      state, range, match, chain,
-    }) => {
+    handler: ({ state, range, match, chain }) => {
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
       const tr = state.tr.delete(range.from, range.to)
       const $start = tr.doc.resolve(range.from)
@@ -65,7 +59,8 @@ export function wrappingInputRule(config: {
       }
       if (config.keepAttributes) {
         /** If the nodeType is `bulletList` or `orderedList` set the `nodeType` as `listItem` */
-        const nodeType = config.type.name === 'bulletList' || config.type.name === 'orderedList' ? 'listItem' : 'taskList'
+        const nodeType =
+          config.type.name === 'bulletList' || config.type.name === 'orderedList' ? 'listItem' : 'taskList'
 
         chain().updateAttributes(nodeType, attributes).run()
       }
@@ -73,10 +68,10 @@ export function wrappingInputRule(config: {
       const before = tr.doc.resolve(range.from - 1).nodeBefore
 
       if (
-        before
-        && before.type === config.type
-        && canJoin(tr.doc, range.from - 1)
-        && (!config.joinPredicate || config.joinPredicate(match, before))
+        before &&
+        before.type === config.type &&
+        canJoin(tr.doc, range.from - 1) &&
+        (!config.joinPredicate || config.joinPredicate(match, before))
       ) {
         tr.join(range.from - 1)
       }

package/src/jsx-runtime.ts

@@ -0,0 +1,64 @@
+export type Attributes = Record<string, any>
+
+export type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray
+/**
+ * Better describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+export type DOMOutputSpecArray =
+  | [string]
+  | [string, Attributes]
+  | [string, 0]
+  | [string, Attributes, 0]
+  | [string, Attributes, DOMOutputSpecArray | 0]
+  | [string, DOMOutputSpecArray]
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // @ts-ignore - conflict with React typings
+    type Element = [string, ...any[]]
+    // @ts-ignore - conflict with React typings
+    interface IntrinsicElements {
+      // @ts-ignore - conflict with React typings
+      [key: string]: any
+    }
+  }
+}
+
+export type JSXRenderer = (
+  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),
+  props?: Attributes,
+  ...children: JSXRenderer[]
+) => DOMOutputSpecArray | DOMOutputSpecElement
+
+export function Fragment(props: { children: JSXRenderer[] }) {
+  return props.children
+}
+
+export const h: JSXRenderer = (tag, attributes) => {
+  // Treat the slot tag as the Prosemirror hole to render content into
+  if (tag === 'slot') {
+    return 0
+  }
+
+  // If the tag is a function, call it with the props
+  if (tag instanceof Function) {
+    return tag(attributes)
+  }
+
+  const { children, ...rest } = attributes ?? {}
+
+  if (tag === 'svg') {
+    throw new Error('SVG elements are not supported in the JSX syntax, use the array syntax instead')
+  }
+
+  // Otherwise, return the tag, attributes, and children
+  return [tag, rest, children]
+}
+
+// See
+// https://esbuild.github.io/api/#jsx-import-source
+// https://www.typescriptlang.org/tsconfig/#jsxImportSource
+
+export { h as createElement, h as jsx, h as jsxDEV, h as jsxs }

package/src/pasteRules/markPasteRule.ts

@@ -1,14 +1,15 @@
-import { MarkType } from '@tiptap/pm/model'
+import type { MarkType } from '@tiptap/pm/model'
 
 import { getMarksBetween } from '../helpers/getMarksBetween.js'
-import { PasteRule, PasteRuleFinder } from '../PasteRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { PasteRuleFinder } from '../PasteRule.js'
+import { PasteRule } from '../PasteRule.js'
+import type { ExtendedRegExpMatchArray } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 
 /**
  * Build an paste rule that adds a mark when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export function markPasteRule(config: {
   find: PasteRuleFinder
@@ -21,9 +22,7 @@ export function markPasteRule(config: {
 }) {
   return new PasteRule({
     find: config.find,
-    handler: ({
-      state, range, match, pasteEvent,
-    }) => {
+    handler: ({ state, range, match, pasteEvent }) => {
       const attributes = callOrReturn(config.getAttributes, undefined, match, pasteEvent)
 
       if (attributes === false || attributes === null) {

package/src/pasteRules/nodePasteRule.ts

@@ -1,13 +1,14 @@
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 
-import { PasteRule, PasteRuleFinder } from '../PasteRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import type { PasteRuleFinder } from '../PasteRule.js'
+import { PasteRule } from '../PasteRule.js'
+import type { ExtendedRegExpMatchArray, JSONContent } from '../types.js'
 import { callOrReturn } from '../utilities/index.js'
 
 /**
  * Build an paste rule that adds a node when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export function nodePasteRule(config: {
   find: PasteRuleFinder
@@ -17,23 +18,26 @@ export function nodePasteRule(config: {
     | ((match: ExtendedRegExpMatchArray, event: ClipboardEvent) => Record<string, any>)
     | false
     | null
+  getContent?: JSONContent[] | ((attrs: Record<string, any>) => JSONContent[]) | false | null
 }) {
   return new PasteRule({
     find: config.find,
-    handler({
-      match, chain, range, pasteEvent,
-    }) {
+    handler({ match, chain, range, pasteEvent }) {
       const attributes = callOrReturn(config.getAttributes, undefined, match, pasteEvent)
+      const content = callOrReturn(config.getContent, undefined, attributes)
 
       if (attributes === false || attributes === null) {
         return null
       }
 
+      const node = { type: config.type.name, attrs: attributes } as JSONContent
+
+      if (content) {
+        node.content = content
+      }
+
       if (match.input) {
-        chain().deleteRange(range).insertContentAt(range.from, {
-          type: config.type.name,
-          attrs: attributes,
-        })
+        chain().deleteRange(range).insertContentAt(range.from, node)
       }
     },
   })

package/src/pasteRules/textPasteRule.ts

@@ -1,14 +1,12 @@
-import { PasteRule, PasteRuleFinder } from '../PasteRule.js'
+import type { PasteRuleFinder } from '../PasteRule.js'
+import { PasteRule } from '../PasteRule.js'
 
 /**
  * Build an paste rule that replaces text when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
-export function textPasteRule(config: {
-  find: PasteRuleFinder,
-  replace: string,
-}) {
+export function textPasteRule(config: { find: PasteRuleFinder; replace: string }) {
   return new PasteRule({
     find: config.find,
     handler: ({ state, range, match }) => {

package/src/style.ts

@@ -27,8 +27,8 @@ img.ProseMirror-separator {
   display: inline !important;
   border: none !important;
   margin: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
+  width: 0 !important;
+  height: 0 !important;
 }
 
 .ProseMirror-gapcursor {
@@ -68,8 +68,4 @@ img.ProseMirror-separator {
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
-}
-
-.tippy-box[data-animation=fade][data-state=hidden] {
-  opacity: 0
 }`