@tiptap/core 2.2.0-rc.8 → 2.2.1

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

@@ -3,10 +3,14 @@ import { Editor } from './Editor.js';
 import { Content, Range } from './types.js';
 export declare class NodePos {
     private resolvedPos;
+    private isBlock;
     private editor;
-    constructor(pos: ResolvedPos, editor: Editor);
+    private get name();
+    constructor(pos: ResolvedPos, editor: Editor, isBlock?: boolean, node?: Node | null);
+    private currentNode;
     get node(): Node;
     get element(): HTMLElement;
+    actualDepth: number | null;
     get depth(): number;
     get pos(): number;
     get content(): Fragment;

package/package.json

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

package/src/NodePos.ts

@@ -8,23 +8,35 @@ import { Content, Range } from './types.js'
 export class NodePos {
   private resolvedPos: ResolvedPos
 
+  private isBlock: boolean
+
   private editor: Editor
 
-  constructor(pos: ResolvedPos, editor: Editor) {
+  private get name(): string {
+    return this.node.type.name
+  }
+
+  constructor(pos: ResolvedPos, editor: Editor, isBlock = false, node: Node | null = null) {
+    this.isBlock = isBlock
     this.resolvedPos = pos
     this.editor = editor
+    this.currentNode = node
   }
 
+  private currentNode: Node | null = null
+
   get node(): Node {
-    return this.resolvedPos.node()
+    return this.currentNode || this.resolvedPos.node()
   }
 
   get element(): HTMLElement {
     return this.editor.view.domAtPos(this.pos).node as HTMLElement
   }
 
+  public actualDepth: number | null = null
+
   get depth(): number {
-    return this.resolvedPos.depth
+    return this.actualDepth ?? this.resolvedPos.depth
   }
 
   get pos(): number {
@@ -36,7 +48,20 @@ export class NodePos {
   }
 
   set content(content: Content) {
-    this.editor.commands.insertContentAt({ from: this.from, to: this.to }, content)
+    let from = this.from
+    let to = this.to
+
+    if (this.isBlock) {
+      if (this.content.size === 0) {
+        console.error(`You can’t set content on a block node. Tried to set content on ${this.name} at ${this.pos}`)
+        return
+      }
+
+      from = this.from + 1
+      to = this.to - 1
+    }
+
+    this.editor.commands.insertContentAt({ from, to }, content)
   }
 
   get attributes() : { [key: string]: any } {
@@ -52,6 +77,10 @@ export class NodePos {
   }
 
   get from(): number {
+    if (this.isBlock) {
+      return this.pos
+    }
+
     return this.resolvedPos.start(this.resolvedPos.depth)
   }
 
@@ -63,6 +92,10 @@ export class NodePos {
   }
 
   get to(): number {
+    if (this.isBlock) {
+      return this.pos + this.size
+    }
+
     return this.resolvedPos.end(this.resolvedPos.depth) + (this.node.isText ? 0 : 1)
   }
 
@@ -78,7 +111,7 @@ export class NodePos {
   }
 
   get before(): NodePos | null {
-    let $pos = this.resolvedPos.doc.resolve(this.from - 2)
+    let $pos = this.resolvedPos.doc.resolve(this.from - (this.isBlock ? 1 : 2))
 
     if ($pos.depth !== this.depth) {
       $pos = this.resolvedPos.doc.resolve(this.from - 3)
@@ -88,7 +121,7 @@ export class NodePos {
   }
 
   get after(): NodePos | null {
-    let $pos = this.resolvedPos.doc.resolve(this.to + 2)
+    let $pos = this.resolvedPos.doc.resolve(this.to + (this.isBlock ? 2 : 1))
 
     if ($pos.depth !== this.depth) {
       $pos = this.resolvedPos.doc.resolve(this.to + 3)
@@ -101,14 +134,22 @@ export class NodePos {
     const children: NodePos[] = []
 
     this.node.content.forEach((node, offset) => {
-      const targetPos = this.pos + offset + 1
+      const isBlock = node.isBlock && !node.isTextblock
+
+      const targetPos = this.pos + offset + (isBlock ? 0 : 1)
       const $pos = this.resolvedPos.doc.resolve(targetPos)
 
-      if ($pos.depth === this.depth) {
+      if (!isBlock && $pos.depth <= this.depth) {
         return
       }
 
-      children.push(new NodePos($pos, this.editor))
+      const childNodePos = new NodePos($pos, this.editor, isBlock, isBlock ? node : null)
+
+      if (isBlock) {
+        childNodePos.actualDepth = this.depth + 1
+      }
+
+      children.push(new NodePos($pos, this.editor, isBlock, isBlock ? node : null))
     })
 
     return children
@@ -160,14 +201,14 @@ export class 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) {
+    if (this.isBlock || !this.children || this.children.length === 0) {
       return nodes
     }
 
-    this.children.forEach(node => {
-      if (node.node.type.name === selector) {
+    this.children.forEach(childPos => {
+      if (childPos.node.type.name === selector) {
         if (Object.keys(attributes).length > 0) {
-          const nodeAttributes = node.node.attrs
+          const nodeAttributes = childPos.node.attrs
           const attrKeys = Object.keys(attributes)
 
           for (let index = 0; index < attrKeys.length; index += 1) {
@@ -179,14 +220,14 @@ export class NodePos {
           }
         }
 
-        nodes.push(node)
+        nodes.push(childPos)
 
         if (firstItemOnly) {
           return
         }
       }
 
-      nodes = nodes.concat(node.querySelectorAll(selector))
+      nodes = nodes.concat(childPos.querySelectorAll(selector))
     })
 
     return nodes

package/src/helpers/getMarksBetween.ts

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

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)
 }