@tiptap/core 2.2.0-rc.7 → 2.2.0

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

@@ -4,6 +4,7 @@ import { EditorView } from '@tiptap/pm/view';
 import { EventEmitter } from './EventEmitter.js';
 import { ExtensionManager } from './ExtensionManager.js';
 import * as extensions from './extensions/index.js';
+import { NodePos } from './NodePos.js';
 import { CanCommands, ChainedCommands, EditorEvents, EditorOptions, JSONContent, SingleCommands, TextSerializer } from './types.js';
 export { extensions };
 export interface HTMLElement {
@@ -148,4 +149,12 @@ export declare class Editor extends EventEmitter<EditorEvents> {
      * Check if the editor is already destroyed.
      */
     get isDestroyed(): boolean;
+    $node(selector: string, attributes?: {
+        [key: string]: any;
+    }): NodePos | null;
+    $nodes(selector: string, attributes?: {
+        [key: string]: any;
+    }): NodePos[] | null;
+    $pos(pos: number): NodePos;
+    get $doc(): NodePos;
 }

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

@@ -0,0 +1,40 @@
+import { Fragment, Node, ResolvedPos } from '@tiptap/pm/model';
+import { Editor } from './Editor.js';
+import { Content, Range } from './types.js';
+export declare class NodePos {
+    private resolvedPos;
+    private editor;
+    constructor(pos: ResolvedPos, editor: Editor);
+    get node(): Node;
+    get element(): HTMLElement;
+    get depth(): number;
+    get pos(): number;
+    get content(): Fragment;
+    set content(content: Content);
+    get attributes(): {
+        [key: string]: any;
+    };
+    get textContent(): string;
+    get size(): number;
+    get from(): number;
+    get range(): Range;
+    get to(): number;
+    get parent(): NodePos | null;
+    get before(): NodePos | null;
+    get after(): NodePos | null;
+    get children(): NodePos[];
+    get firstChild(): NodePos | null;
+    get lastChild(): NodePos | null;
+    closest(selector: string, attributes?: {
+        [key: string]: any;
+    }): NodePos | null;
+    querySelector(selector: string, attributes?: {
+        [key: string]: any;
+    }): NodePos | null;
+    querySelectorAll(selector: string, attributes?: {
+        [key: string]: any;
+    }, firstItemOnly?: boolean): NodePos[];
+    setAttribute(attributes: {
+        [key: string]: any;
+    }): void;
+}

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

@@ -8,7 +8,7 @@ export declare type PasteRuleMatch = {
     match?: RegExpMatchArray;
     data?: Record<string, any>;
 };
-export declare type PasteRuleFinder = RegExp | ((text: string) => PasteRuleMatch[] | null | undefined);
+export declare type PasteRuleFinder = RegExp | ((text: string, event?: ClipboardEvent) => PasteRuleMatch[] | null | undefined);
 export declare class PasteRule {
     find: PasteRuleFinder;
     handler: (props: {

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

@@ -19,6 +19,8 @@ export * from './insertContentAt.js';
 export * from './join.js';
 export * from './joinItemBackward.js';
 export * from './joinItemForward.js';
+export * from './joinTextblockBackward.js';
+export * from './joinTextblockForward.js';
 export * from './keyboardShortcut.js';
 export * from './lift.js';
 export * from './liftEmptyBlock.js';

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

@@ -0,0 +1,12 @@
+import { RawCommands } from '../types.js';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        joinTextblockBackward: {
+            /**
+             * A more limited form of joinBackward that only tries to join the current textblock to the one before it, if the cursor is at the start of a textblock.
+             */
+            joinTextblockBackward: () => ReturnType;
+        };
+    }
+}
+export declare const joinTextblockBackward: RawCommands['joinTextblockBackward'];

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

@@ -0,0 +1,12 @@
+import { RawCommands } from '../types.js';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        joinTextblockForward: {
+            /**
+             * A more limited form of joinForward that only tries to join the current textblock to the one after it, if the cursor is at the end of a textblock.
+             */
+            joinTextblockForward: () => ReturnType;
+        };
+    }
+}
+export declare const joinTextblockForward: RawCommands['joinTextblockForward'];

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

@@ -7,6 +7,7 @@ export * from './InputRule.js';
 export * from './inputRules/index.js';
 export * from './Mark.js';
 export * from './Node.js';
+export * from './NodePos.js';
 export * from './NodeView.js';
 export * from './PasteRule.js';
 export * from './pasteRules/index.js';

package/package.json

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

package/src/Editor.ts

@@ -1,4 +1,6 @@
-import { MarkType, NodeType, Schema } from '@tiptap/pm/model'
+import {
+  MarkType, NodeType, Schema,
+} from '@tiptap/pm/model'
 import {
   EditorState, Plugin, PluginKey, Transaction,
 } from '@tiptap/pm/state'
@@ -16,6 +18,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 { NodePos } from './NodePos.js'
 import { style } from './style.js'
 import {
   CanCommands,
@@ -486,4 +489,22 @@ export class Editor extends EventEmitter<EditorEvents> {
     // @ts-ignore
     return !this.view?.docView
   }
+
+  public $node(selector: string, attributes?: { [key: string]: any }): NodePos | null {
+    return this.$doc?.querySelector(selector, attributes) || null
+  }
+
+  public $nodes(selector: string, attributes?: { [key: string]: any }): NodePos[] | null {
+    return this.$doc?.querySelectorAll(selector, attributes) || null
+  }
+
+  public $pos(pos: number) {
+    const $pos = this.state.doc.resolve(pos)
+
+    return new NodePos($pos, this)
+  }
+
+  get $doc() {
+    return this.$pos(0)
+  }
 }

package/src/Extension.ts

@@ -297,7 +297,7 @@ export class Extension<Options = any, Storage = any> {
 
   config: ExtensionConfig = {
     name: this.name,
-    defaultOptions: undefined,
+    defaultOptions: {},
   }
 
   constructor(config: Partial<ExtensionConfig<Options, Storage>> = {}) {
@@ -308,7 +308,7 @@ export class Extension<Options = any, Storage = any> {
 
     this.name = this.config.name
 
-    if (config.defaultOptions) {
+    if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
       console.warn(
         `[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`,
       )

package/src/Mark.ts

@@ -429,7 +429,7 @@ export class Mark<Options = any, Storage = any> {
 
   config: MarkConfig = {
     name: this.name,
-    defaultOptions: undefined,
+    defaultOptions: {},
   }
 
   constructor(config: Partial<MarkConfig<Options, Storage>> = {}) {
@@ -440,7 +440,7 @@ export class Mark<Options = any, Storage = any> {
 
     this.name = this.config.name
 
-    if (config.defaultOptions) {
+    if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
       console.warn(
         `[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`,
       )

package/src/Node.ts

@@ -538,7 +538,7 @@ export class Node<Options = any, Storage = any> {
 
   config: NodeConfig = {
     name: this.name,
-    defaultOptions: undefined,
+    defaultOptions: {},
   }
 
   constructor(config: Partial<NodeConfig<Options, Storage>> = {}) {
@@ -549,7 +549,7 @@ export class Node<Options = any, Storage = any> {
 
     this.name = this.config.name
 
-    if (config.defaultOptions) {
+    if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
       console.warn(
         `[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`,
       )

package/src/NodePos.ts

@@ -0,0 +1,201 @@
+import {
+  Fragment, Node, ResolvedPos,
+} from '@tiptap/pm/model'
+
+import { Editor } from './Editor.js'
+import { Content, Range } from './types.js'
+
+export class NodePos {
+  private resolvedPos: ResolvedPos
+
+  private editor: Editor
+
+  constructor(pos: ResolvedPos, editor: Editor) {
+    this.resolvedPos = pos
+    this.editor = editor
+  }
+
+  get node(): Node {
+    return this.resolvedPos.node()
+  }
+
+  get element(): HTMLElement {
+    return this.editor.view.domAtPos(this.pos).node as HTMLElement
+  }
+
+  get depth(): number {
+    return this.resolvedPos.depth
+  }
+
+  get pos(): number {
+    return this.resolvedPos.pos
+  }
+
+  get content(): Fragment {
+    return this.node.content
+  }
+
+  set content(content: Content) {
+    this.editor.commands.insertContentAt({ from: this.from, to: this.to }, content)
+  }
+
+  get attributes() : { [key: string]: any } {
+    return this.node.attrs
+  }
+
+  get textContent(): string {
+    return this.node.textContent
+  }
+
+  get size(): number {
+    return this.node.nodeSize
+  }
+
+  get from(): number {
+    return this.resolvedPos.start(this.resolvedPos.depth)
+  }
+
+  get range(): Range {
+    return {
+      from: this.from,
+      to: this.to,
+    }
+  }
+
+  get to(): number {
+    return this.resolvedPos.end(this.resolvedPos.depth) + (this.node.isText ? 0 : 1)
+  }
+
+  get parent(): NodePos | null {
+    if (this.depth === 0) {
+      return null
+    }
+
+    const parentPos = this.resolvedPos.start(this.resolvedPos.depth - 1)
+    const $pos = this.resolvedPos.doc.resolve(parentPos)
+
+    return new NodePos($pos, this.editor)
+  }
+
+  get before(): NodePos | null {
+    let $pos = this.resolvedPos.doc.resolve(this.from - 2)
+
+    if ($pos.depth !== this.depth) {
+      $pos = this.resolvedPos.doc.resolve(this.from - 3)
+    }
+
+    return new NodePos($pos, this.editor)
+  }
+
+  get after(): NodePos | null {
+    let $pos = this.resolvedPos.doc.resolve(this.to + 2)
+
+    if ($pos.depth !== this.depth) {
+      $pos = this.resolvedPos.doc.resolve(this.to + 3)
+    }
+
+    return new NodePos($pos, this.editor)
+  }
+
+  get children(): NodePos[] {
+    const children: NodePos[] = []
+
+    this.node.content.forEach((node, offset) => {
+      const targetPos = this.pos + offset + 1
+      const $pos = this.resolvedPos.doc.resolve(targetPos)
+
+      if ($pos.depth === this.depth) {
+        return
+      }
+
+      children.push(new NodePos($pos, this.editor))
+    })
+
+    return children
+  }
+
+  get firstChild(): NodePos | null {
+    return this.children[0] || null
+  }
+
+  get lastChild(): NodePos | null {
+    const children = this.children
+
+    return children[children.length - 1] || null
+  }
+
+  closest(selector: string, attributes: { [key: string]: any } = {}): NodePos | null {
+    let node: NodePos | null = null
+    let currentNode = this.parent
+
+    while (currentNode && !node) {
+      if (currentNode.node.type.name === selector) {
+        if (Object.keys(attributes).length > 0) {
+          const nodeAttributes = currentNode.node.attrs
+          const attrKeys = Object.keys(attributes)
+
+          for (let index = 0; index < attrKeys.length; index += 1) {
+            const key = attrKeys[index]
+
+            if (nodeAttributes[key] !== attributes[key]) {
+              break
+            }
+          }
+        } else {
+          node = currentNode
+        }
+      }
+
+      currentNode = currentNode.parent
+    }
+
+    return node
+  }
+
+  querySelector(selector: string, attributes: { [key: string]: any } = {}): NodePos | null {
+    return this.querySelectorAll(selector, attributes, true)[0] || null
+  }
+
+  querySelectorAll(selector: string, attributes: { [key: string]: any } = {}, firstItemOnly = false): NodePos[] {
+    let nodes: NodePos[] = []
+
+    // iterate through children recursively finding all nodes which match the selector with the node name
+    if (!this.children || this.children.length === 0) {
+      return nodes
+    }
+
+    this.children.forEach(node => {
+      if (node.node.type.name === selector) {
+        if (Object.keys(attributes).length > 0) {
+          const nodeAttributes = node.node.attrs
+          const attrKeys = Object.keys(attributes)
+
+          for (let index = 0; index < attrKeys.length; index += 1) {
+            const key = attrKeys[index]
+
+            if (nodeAttributes[key] !== attributes[key]) {
+              return
+            }
+          }
+        }
+
+        nodes.push(node)
+
+        if (firstItemOnly) {
+          return
+        }
+      }
+
+      nodes = nodes.concat(node.querySelectorAll(selector))
+    })
+
+    return nodes
+  }
+
+  setAttribute(attributes: { [key: string]: any }) {
+    const oldSelection = this.editor.state.selection
+
+    this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
+      .run()
+  }
+}

package/src/PasteRule.ts

@@ -21,7 +21,7 @@ export type PasteRuleMatch = {
   data?: Record<string, any>
 }
 
-export type PasteRuleFinder = RegExp | ((text: string) => PasteRuleMatch[] | null | undefined)
+export type PasteRuleFinder = RegExp | ((text: string, event?: ClipboardEvent) => PasteRuleMatch[] | null | undefined)
 
 export class PasteRule {
   find: PasteRuleFinder
@@ -58,12 +58,13 @@ export class PasteRule {
 const pasteRuleMatcherHandler = (
   text: string,
   find: PasteRuleFinder,
+  event?: ClipboardEvent,
 ): ExtendedRegExpMatchArray[] => {
   if (isRegExp(find)) {
     return [...text.matchAll(find)]
   }
 
-  const matches = find(text)
+  const matches = find(text, event)
 
   if (!matches) {
     return []
@@ -119,7 +120,7 @@ function run(config: {
     const resolvedTo = Math.min(to, pos + node.content.size)
     const textToMatch = node.textBetween(resolvedFrom - pos, resolvedTo - pos, undefined, '\ufffc')
 
-    const matches = pasteRuleMatcherHandler(textToMatch, rule.find)
+    const matches = pasteRuleMatcherHandler(textToMatch, rule.find, pasteEvent)
 
     matches.forEach(match => {
       if (match.index === undefined) {

package/src/commands/index.ts

@@ -19,6 +19,8 @@ export * from './insertContentAt.js'
 export * from './join.js'
 export * from './joinItemBackward.js'
 export * from './joinItemForward.js'
+export * from './joinTextblockBackward.js'
+export * from './joinTextblockForward.js'
 export * from './keyboardShortcut.js'
 export * from './lift.js'
 export * from './liftEmptyBlock.js'

package/src/commands/joinTextblockBackward.ts

@@ -0,0 +1,18 @@
+import { joinTextblockBackward as originalCommand } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types.js'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    joinTextblockBackward: {
+      /**
+       * A more limited form of joinBackward that only tries to join the current textblock to the one before it, if the cursor is at the start of a textblock.
+       */
+      joinTextblockBackward: () => ReturnType
+    }
+  }
+}
+
+export const joinTextblockBackward: RawCommands['joinTextblockBackward'] = () => ({ state, dispatch }) => {
+  return originalCommand(state, dispatch)
+}

package/src/commands/joinTextblockForward.ts

@@ -0,0 +1,18 @@
+import { joinTextblockForward as originalCommand } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types.js'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    joinTextblockForward: {
+      /**
+       * A more limited form of joinForward that only tries to join the current textblock to the one after it, if the cursor is at the end of a textblock.
+       */
+      joinTextblockForward: () => ReturnType
+    }
+  }
+}
+
+export const joinTextblockForward: RawCommands['joinTextblockForward'] = () => ({ state, dispatch }) => {
+  return originalCommand(state, dispatch)
+}

package/src/helpers/createChainableState.ts

@@ -13,7 +13,6 @@ export function createChainableState(config: {
     ...state,
     apply: state.apply.bind(state),
     applyTransaction: state.applyTransaction.bind(state),
-    filterTransaction: state.filterTransaction,
     plugins: state.plugins,
     schema: state.schema,
     reconfigure: state.reconfigure.bind(state),

package/src/helpers/getMarksBetween.ts

@@ -26,6 +26,10 @@ export function getMarksBetween(from: number, to: number, doc: ProseMirrorNode):
       })
   } else {
     doc.nodesBetween(from, to, (node, pos) => {
+      if (!node || node?.nodeSize === undefined) {
+        return
+      }
+
       marks.push(
         ...node.marks.map(mark => ({
           from: pos,

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './InputRule.js'
 export * from './inputRules/index.js'
 export * from './Mark.js'
 export * from './Node.js'
+export * from './NodePos.js'
 export * from './NodeView.js'
 export * from './PasteRule.js'
 export * from './pasteRules/index.js'

package/src/utilities/elementFromString.ts

@@ -1,6 +1,24 @@
+const removeWhitespaces = (node: HTMLElement) => {
+  const children = node.childNodes
+
+  for (let i = children.length - 1; i >= 0; i -= 1) {
+    const child = children[i]
+
+    if (child.nodeType === 3 && child.nodeValue && /^(\n\s\s|\n)$/.test(child.nodeValue)) {
+      node.removeChild(child)
+    } else if (child.nodeType === 1) {
+      removeWhitespaces(child as HTMLElement)
+    }
+  }
+
+  return node
+}
+
 export function elementFromString(value: string): HTMLElement {
   // add a wrapper to preserve leading and trailing whitespace
   const wrappedValue = `<body>${value}</body>`
 
-  return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
+  const html = new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
+
+  return removeWhitespaces(html)
 }