feat: add coordsAtPos and posToClientRect helper methods

packages/core/src/helpers/coordsAtPos.ts

@@ -0,0 +1,72 @@
+import { EditorView } from 'prosemirror-view'
+
+type DOMRectSide = 'bottom' | 'left' | 'right' | 'top';
+
+function textRange(node: Node, from?: number, to?: number) {
+  const range = document.createRange()
+  range.setEnd(node, typeof to === 'number' ? to : (node.nodeValue || '').length)
+  range.setStart(node, Math.max(from || 0, 0))
+
+  return range
+}
+
+function singleRect(object: Range | Element, bias: number) {
+  const rects = object.getClientRects()
+  return !rects.length
+    ? object.getBoundingClientRect()
+    : rects[bias < 0 ? 0 : rects.length - 1]
+}
+
+export default function coordsAtPos(view: EditorView, pos: number, end = false) {
+  const { node, offset } = view.domAtPos(pos) // view.docView.domFromPos(pos);
+  let side: DOMRectSide | null = null
+  let rect: DOMRect | null = null
+  if (node.nodeType === 3) {
+    const nodeValue = node.nodeValue || ''
+    if (end && offset < nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1)
+      side = 'right'
+    } else if (offset < nodeValue.length) {
+      rect = singleRect(textRange(node, offset, offset + 1), -1)
+      side = 'left'
+    }
+  } else if (node.firstChild) {
+    if (offset < node.childNodes.length) {
+      const child = node.childNodes[offset]
+      rect = singleRect(
+        child.nodeType === 3 ? textRange(child) : (child as Element),
+        -1,
+      )
+      side = 'left'
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1]
+      rect = singleRect(
+        child.nodeType === 3 ? textRange(child) : (child as Element),
+        1,
+      )
+      side = 'right'
+    }
+  } else {
+    const element = node as Element
+    rect = element.getBoundingClientRect()
+    side = 'left'
+  }
+
+  if (rect && side) {
+    const x = rect[side]
+
+    return {
+      top: rect.top,
+      bottom: rect.bottom,
+      left: x,
+      right: x,
+    }
+  }
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  }
+}

packages/core/src/helpers/posToClientRect.ts

@@ -0,0 +1,22 @@
+import { EditorView } from 'prosemirror-view'
+import coordsAtPos from './coordsAtPos'
+
+export default function posToClientRect(view: EditorView, from: number, to: number): ClientRect {
+  const start = coordsAtPos(view, from)
+  const end = coordsAtPos(view, to, true)
+  const top = Math.min(start.top, end.top)
+  const bottom = Math.max(start.bottom, end.bottom)
+  const left = Math.min(start.left, end.left)
+  const right = Math.max(start.right, end.right)
+  const width = right - left
+  const height = bottom - top
+
+  return {
+    width,
+    height,
+    top,
+    bottom,
+    left,
+    right,
+  }
+}

packages/core/src/index.ts

@@ -12,6 +12,7 @@ export { default as markPasteRule } from './pasteRules/markPasteRule'
 export { default as callOrReturn } from './utilities/callOrReturn'
 export { default as mergeAttributes } from './utilities/mergeAttributes'
 
+export { default as coordsAtPos } from './helpers/coordsAtPos'
 export { default as getExtensionField } from './helpers/getExtensionField'
 export { default as findChildren } from './helpers/findChildren'
 export { default as findParentNode } from './helpers/findParentNode'
@@ -26,6 +27,7 @@ export { default as isNodeActive } from './helpers/isNodeActive'
 export { default as isNodeEmpty } from './helpers/isNodeEmpty'
 export { default as isNodeSelection } from './helpers/isNodeSelection'
 export { default as isTextSelection } from './helpers/isTextSelection'
+export { default as posToClientRect } from './helpers/posToClientRect'
 
 export interface Commands {}