@tiptap/core 3.0.0-next.1 → 3.0.0-next.2

package/src/extensions/paste.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Paste = Extension.create({
+  name: 'paste',
+
+  addProseMirrorPlugins() {
+
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapPaste'),
+
+        props: {
+          handlePaste: (_view, e, slice) => {
+            this.editor.emit('paste', {
+              editor: this.editor,
+              event: e,
+              slice,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/helpers/createDocument.ts

@@ -1,4 +1,6 @@
-import { Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
+import {
+  Fragment, Node as ProseMirrorNode, ParseOptions, Schema,
+} from '@tiptap/pm/model'
 
 import { Content } from '../types.js'
 import { createNodeFromContent } from './createNodeFromContent.js'
@@ -11,7 +13,7 @@ import { createNodeFromContent } from './createNodeFromContent.js'
  * @returns The created Prosemirror document node
  */
 export function createDocument(
-  content: Content,
+  content: Content | ProseMirrorNode | Fragment,
   schema: Schema,
   parseOptions: ParseOptions = {},
   options: { errorOnInvalidContent?: boolean } = {},

package/src/helpers/createNodeFromContent.ts

@@ -23,10 +23,13 @@ export type CreateNodeFromContentOptions = {
  * @returns The created Prosemirror node or fragment
  */
 export function createNodeFromContent(
-  content: Content,
+  content: Content | ProseMirrorNode | Fragment,
   schema: Schema,
   options?: CreateNodeFromContentOptions,
 ): ProseMirrorNode | Fragment {
+  if (content instanceof ProseMirrorNode || content instanceof Fragment) {
+    return content
+  }
   options = {
     slice: true,
     parseOptions: {},
@@ -45,7 +48,13 @@ export function createNodeFromContent(
         return Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)))
       }
 
-      return schema.nodeFromJSON(content)
+      const node = schema.nodeFromJSON(content)
+
+      if (options.errorOnInvalidContent) {
+        node.check()
+      }
+
+      return node
     } catch (error) {
       if (options.errorOnInvalidContent) {
         throw new Error('[tiptap error]: Invalid JSON content', { cause: error as Error })

package/src/helpers/getMarkRange.ts

@@ -9,7 +9,14 @@ function findMarkInSet(
   attributes: Record<string, any> = {},
 ): ProseMirrorMark | undefined {
   return marks.find(item => {
-    return item.type === type && objectIncludes(item.attrs, attributes)
+    return (
+      item.type === type
+      && objectIncludes(
+        // Only check equality for the attributes that are provided
+        Object.fromEntries(Object.keys(attributes).map(k => [k, item.attrs[k]])),
+        attributes,
+      )
+    )
   })
 }
 
@@ -21,25 +28,44 @@ function isMarkInSet(
   return !!findMarkInSet(marks, type, attributes)
 }
 
+/**
+ * Get the range of a mark at a resolved position.
+ */
 export function getMarkRange(
+  /**
+   * The position to get the mark range for.
+   */
   $pos: ResolvedPos,
+  /**
+   * The mark type to get the range for.
+   */
   type: MarkType,
-  attributes: Record<string, any> = {},
+  /**
+   * The attributes to match against.
+   * If not provided, only the first mark at the position will be matched.
+   */
+  attributes?: Record<string, any>,
 ): Range | void {
   if (!$pos || !type) {
     return
   }
-
   let start = $pos.parent.childAfter($pos.parentOffset)
 
-  if ($pos.parentOffset === start.offset && start.offset !== 0) {
+  // If the cursor is at the start of a text node that does not have the mark, look backward
+  if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
     start = $pos.parent.childBefore($pos.parentOffset)
   }
 
-  if (!start.node) {
+  // If there is no text node with the mark even backward, return undefined
+  if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
     return
   }
 
+  // Default to only matching against the first mark's attributes
+  attributes = attributes || start.node.marks[0]?.attrs
+
+  // We now know that the cursor is either at the start, middle or end of a text node with the specified mark
+  // so we can look it up on the targeted mark
   const mark = findMarkInSet([...start.node.marks], type, attributes)
 
   if (!mark) {
@@ -51,9 +77,10 @@ export function getMarkRange(
   let endIndex = startIndex + 1
   let endPos = startPos + start.node.nodeSize
 
-  findMarkInSet([...start.node.marks], type, attributes)
-
-  while (startIndex > 0 && mark.isInSet($pos.parent.child(startIndex - 1).marks)) {
+  while (
+    startIndex > 0
+    && isMarkInSet([...$pos.parent.child(startIndex - 1).marks], type, attributes)
+  ) {
     startIndex -= 1
     startPos -= $pos.parent.child(startIndex).nodeSize
   }

package/src/helpers/getRenderedAttributes.ts

@@ -8,6 +8,9 @@ export function getRenderedAttributes(
   extensionAttributes: ExtensionAttribute[],
 ): Record<string, any> {
   return extensionAttributes
+    .filter(
+      attribute => attribute.type === nodeOrMark.type.name,
+    )
     .filter(item => item.attribute.rendered)
     .map(item => {
       if (!item.attribute.renderHTML) {

package/src/helpers/getSchemaByResolvedExtensions.ts

@@ -78,6 +78,7 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
         ),
         code: callOrReturn(getExtensionField<NodeConfig['code']>(extension, 'code', context)),
         whitespace: callOrReturn(getExtensionField<NodeConfig['whitespace']>(extension, 'whitespace', context)),
+        linebreakReplacement: callOrReturn(getExtensionField<NodeConfig['linebreakReplacement']>(extension, 'linebreakReplacement', context)),
         defining: callOrReturn(
           getExtensionField<NodeConfig['defining']>(extension, 'defining', context),
         ),
@@ -147,7 +148,7 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
 
         return {
           ...fields,
-          ...(extendMarkSchema ? extendMarkSchema(extension) : {}),
+          ...(extendMarkSchema ? extendMarkSchema(extension as any) : {}),
         }
       }, {})
 

package/src/inputRules/markInputRule.ts

@@ -8,7 +8,7 @@ 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

package/src/inputRules/nodeInputRule.ts

@@ -7,7 +7,7 @@ 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: {
   /**

package/src/inputRules/textInputRule.ts

@@ -3,7 +3,7 @@ import { InputRule, InputRuleFinder } 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,

package/src/inputRules/textblockTypeInputRule.ts

@@ -9,7 +9,7 @@ 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

package/src/inputRules/wrappingInputRule.ts

@@ -19,7 +19,7 @@ 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,

package/src/pasteRules/markPasteRule.ts

@@ -8,7 +8,7 @@ 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

package/src/pasteRules/nodePasteRule.ts

@@ -7,7 +7,7 @@ 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

package/src/pasteRules/textPasteRule.ts

@@ -3,7 +3,7 @@ import { PasteRule, PasteRuleFinder } 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,

package/src/types.ts

@@ -1,12 +1,19 @@
 import {
   Mark as ProseMirrorMark,
   Node as ProseMirrorNode,
-  NodeType,
   ParseOptions,
+  Slice,
 } from '@tiptap/pm/model'
 import { EditorState, Transaction } from '@tiptap/pm/state'
+import { Mappable } from '@tiptap/pm/transform'
 import {
-  Decoration, EditorProps, EditorView, NodeView,
+  Decoration,
+  DecorationAttrs,
+  EditorProps,
+  EditorView,
+  NodeView,
+  NodeViewConstructor,
+  ViewMutationRecord,
 } from '@tiptap/pm/view'
 
 import { Editor } from './Editor.js'
@@ -58,6 +65,8 @@ export interface EditorEvents {
   focus: { editor: Editor; event: FocusEvent; transaction: Transaction };
   blur: { editor: Editor; event: FocusEvent; transaction: Transaction };
   destroy: void;
+  paste: { editor: Editor; event: ClipboardEvent; slice: Slice };
+  drop: { editor: Editor; event: DragEvent; slice: Slice; moved: boolean };
 }
 
 export type EnableRules = (AnyExtension | string)[] | boolean;
@@ -79,7 +88,38 @@ export interface EditorOptions {
   };
   enableInputRules: EnableRules;
   enablePasteRules: EnableRules;
-  enableCoreExtensions: boolean;
+  /**
+   * Determines whether core extensions are enabled.
+   *
+   * If set to `false`, all core extensions will be disabled.
+   * To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`.
+   * Extensions not listed in the object will remain enabled.
+   *
+   * @example
+   * // Disable all core extensions
+   * enabledCoreExtensions: false
+   *
+   * @example
+   * // Disable only the keymap core extension
+   * enabledCoreExtensions: { keymap: false }
+   *
+   * @default true
+   */
+  enableCoreExtensions?:
+    | boolean
+    | Partial<
+        Record<
+          | 'editable'
+          | 'clipboardTextSerializer'
+          | 'commands'
+          | 'focusEvents'
+          | 'keymap'
+          | 'tabindex'
+          | 'drop'
+          | 'paste',
+          false
+        >
+      >;
   /**
    * If `true`, the editor will check the content for errors on initialization.
    * Emitting the `contentError` event if the content is invalid.
@@ -100,6 +140,8 @@ export interface EditorOptions {
   onFocus: (props: EditorEvents['focus']) => void;
   onBlur: (props: EditorEvents['blur']) => void;
   onDestroy: (props: EditorEvents['destroy']) => void;
+  onPaste: (e: ClipboardEvent, slice: Slice) => void;
+  onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void;
 }
 
 export type HTMLContent = string;
@@ -184,39 +226,85 @@ export type ValuesOf<T> = T[keyof T];
 
 export type KeysWithTypeOf<T, Type> = { [P in keyof T]: T[P] extends Type ? P : never }[keyof T];
 
+export type DOMNode = InstanceType<typeof window.Node>
+
+/**
+ * prosemirror-view does not export the `type` property of `Decoration`.
+ * So, this defines the `DecorationType` interface to include the `type` property.
+ */
+export interface DecorationType {
+  spec: any
+  map(mapping: Mappable, span: Decoration, offset: number, oldOffset: number): Decoration | null
+  valid(node: Node, span: Decoration): boolean
+  eq(other: DecorationType): boolean
+  destroy(dom: DOMNode): void
+  readonly attrs: DecorationAttrs
+}
+
+/**
+ * prosemirror-view does not export the `type` property of `Decoration`.
+ * This adds the `type` property to the `Decoration` type.
+ */
 export type DecorationWithType = Decoration & {
-  type: NodeType;
+  type: DecorationType;
 };
 
-export type NodeViewProps = {
-  editor: Editor;
-  node: ProseMirrorNode;
-  decorations: DecorationWithType[];
+export interface NodeViewProps extends NodeViewRendererProps {
+  // TODO this type is not technically correct, but it's the best we can do for now since prosemirror doesn't expose the type of decorations
+  decorations: readonly DecorationWithType[];
   selected: boolean;
-  extension: Node;
-  getPos: () => number;
   updateAttributes: (attributes: Record<string, any>) => void;
   deleteNode: () => void;
-};
+}
 
 export interface NodeViewRendererOptions {
   stopEvent: ((props: { event: Event }) => boolean) | null;
   ignoreMutation:
-    | ((props: { mutation: MutationRecord | { type: 'selection'; target: Element } }) => boolean)
+    | ((props: { mutation: ViewMutationRecord }) => boolean)
     | null;
   contentDOMElementTag: string;
 }
 
-export type NodeViewRendererProps = {
+export interface NodeViewRendererProps {
+  // pass-through from prosemirror
+  /**
+   * The node that is being rendered.
+   */
+  node: Parameters<NodeViewConstructor>[0];
+  /**
+   * The editor's view.
+   */
+  view: Parameters<NodeViewConstructor>[1];
+  /**
+   * A function that can be called to get the node's current position in the document.
+   */
+  getPos: Parameters<NodeViewConstructor>[2];
+  /**
+   * is an array of node or inline decorations that are active around the node.
+   * They are automatically drawn in the normal way, and you will usually just want to ignore this, but they can also be used as a way to provide context information to the node view without adding it to the document itself.
+   */
+  decorations: Parameters<NodeViewConstructor>[3];
+  /**
+   * holds the decorations for the node's content. You can safely ignore this if your view has no content or a contentDOM property, since the editor will draw the decorations on the content.
+   * But if you, for example, want to create a nested editor with the content, it may make sense to provide it with the inner decorations.
+   */
+  innerDecorations: Parameters<NodeViewConstructor>[4];
+  // tiptap-specific
+  /**
+   * The editor instance.
+   */
   editor: Editor;
-  node: ProseMirrorNode;
-  getPos: (() => number) | boolean;
-  HTMLAttributes: Record<string, any>;
-  decorations: Decoration[];
+  /**
+   * The extension that is responsible for the node.
+   */
   extension: Node;
-};
+  /**
+   * The HTML attributes that should be added to the node's DOM element.
+   */
+  HTMLAttributes: Record<string, any>;
+}
 
-export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView | {};
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 

package/src/utilities/mergeAttributes.ts

@@ -23,7 +23,24 @@ export function mergeAttributes(...objects: Record<string, any>[]): Record<strin
 
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ')
         } else if (key === 'style') {
-          mergedAttributes[key] = [mergedAttributes[key], value].join('; ')
+          const newStyles: string[] = value ? value.split(';').map((style: string) => style.trim()).filter(Boolean) : []
+          const existingStyles: string[] = mergedAttributes[key] ? mergedAttributes[key].split(';').map((style: string) => style.trim()).filter(Boolean) : []
+
+          const styleMap = new Map<string, string>()
+
+          existingStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          newStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join('; ')
         } else {
           mergedAttributes[key] = value
         }