@tiptap/core 2.7.4 → 2.9.0

package/src/NodePos.ts

@@ -135,8 +135,9 @@ export class NodePos {
 
     this.node.content.forEach((node, offset) => {
       const isBlock = node.isBlock && !node.isTextblock
+      const isNonTextAtom = node.isAtom && !node.isText
 
-      const targetPos = this.pos + offset + 1
+      const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1)
       const $pos = this.resolvedPos.doc.resolve(targetPos)
 
       if (!isBlock && $pos.depth <= this.depth) {
@@ -235,9 +236,13 @@ export class NodePos {
   }
 
   setAttribute(attributes: { [key: string]: any }) {
-    const oldSelection = this.editor.state.selection
+    const { tr } = this.editor.state
 
-    this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
-      .run()
+    tr.setNodeMarkup(this.from, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(tr)
   }
 }

package/src/commands/insertContentAt.ts

@@ -63,7 +63,7 @@ const isFragment = (nodeOrFragment: ProseMirrorNode | Fragment): nodeOrFragment
 export const insertContentAt: RawCommands['insertContentAt'] = (position, value, options) => ({ tr, dispatch, editor }) => {
   if (dispatch) {
     options = {
-      parseOptions: {},
+      parseOptions: editor.options.parseOptions,
       updateSelection: true,
       applyInputRules: false,
       applyPasteRules: false,
@@ -85,7 +85,9 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
         editor,
         error: e as Error,
         disableCollaboration: () => {
-          console.error('[tiptap error]: Unable to disable collaboration at this point in time')
+          if (editor.storage.collaboration) {
+            editor.storage.collaboration.isDisabled = true
+          }
         },
       })
       return false

package/src/extensions/drop.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Drop = Extension.create({
+  name: 'drop',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapDrop'),
+
+        props: {
+          handleDrop: (_, e, slice, moved) => {
+            this.editor.emit('drop', {
+              editor: this.editor,
+              event: e,
+              slice,
+              moved,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/extensions/index.ts

@@ -1,6 +1,8 @@
 export { ClipboardTextSerializer } from './clipboardTextSerializer.js'
 export { Commands } from './commands.js'
+export { Drop } from './drop.js'
 export { Editable } from './editable.js'
 export { FocusEvents } from './focusEvents.js'
 export { Keymap } from './keymap.js'
+export { Paste } from './paste.js'
 export { Tabindex } from './tabindex.js'

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/getMarkRange.ts

@@ -29,17 +29,20 @@ export function getMarkRange(
   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
   }
 
+  // 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) {

package/src/index.ts

@@ -11,8 +11,6 @@ export * from './NodePos.js'
 export * from './NodeView.js'
 export * from './PasteRule.js'
 export * from './pasteRules/index.js'
-export * from './plugins/DropPlugin.js'
-export * from './plugins/PastePlugin.js'
 export * from './Tracker.js'
 export * from './types.js'
 export * from './utilities/index.js'

package/src/types.ts

@@ -1,13 +1,14 @@
 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,
+  DecorationAttrs,
   EditorProps,
   EditorView,
   NodeView,
@@ -63,6 +64,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;
@@ -110,7 +113,9 @@ export interface EditorOptions {
           | 'commands'
           | 'focusEvents'
           | 'keymap'
-          | 'tabindex',
+          | 'tabindex'
+          | 'drop'
+          | 'paste',
           false
         >
       >;
@@ -220,8 +225,27 @@ 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 interface NodeViewProps extends NodeViewRendererProps {
@@ -242,14 +266,40 @@ export interface NodeViewRendererOptions {
 
 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: () => number; // TODO getPos was incorrectly typed before, change to `Parameters<NodeViewConstructor>[2];` in the next major version
+  /**
+   * 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;
+  /**
+   * 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>;
 }
 

package/dist/packages/core/src/plugins/DropPlugin.d.ts

@@ -1,3 +0,0 @@
-import { Slice } from '@tiptap/pm/model';
-import { Plugin } from '@tiptap/pm/state';
-export declare const DropPlugin: (onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void) => Plugin<any>;

package/dist/packages/core/src/plugins/PastePlugin.d.ts

@@ -1,3 +0,0 @@
-import { Slice } from '@tiptap/pm/model';
-import { Plugin } from '@tiptap/pm/state';
-export declare const PastePlugin: (onPaste: (e: ClipboardEvent, slice: Slice) => void) => Plugin<any>;

package/src/plugins/DropPlugin.ts

@@ -1,14 +0,0 @@
-import { Slice } from '@tiptap/pm/model'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-export const DropPlugin = (onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void) => {
-  return new Plugin({
-    key: new PluginKey('tiptapDrop'),
-
-    props: {
-      handleDrop: (_, e, slice, moved) => {
-        onDrop(e, slice, moved)
-      },
-    },
-  })
-}

package/src/plugins/PastePlugin.ts

@@ -1,14 +0,0 @@
-import { Slice } from '@tiptap/pm/model'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-export const PastePlugin = (onPaste: (e: ClipboardEvent, slice: Slice) => void) => {
-  return new Plugin({
-    key: new PluginKey('tiptapPaste'),
-
-    props: {
-      handlePaste: (_view, e, slice) => {
-        onPaste(e, slice)
-      },
-    },
-  })
-}