/
dompos.js
349 lines (319 loc) · 12.6 KB
/
dompos.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
import {contains} from "../dom"
// : (ProseMirror, DOMNode) → number
// Get the path for a given a DOM node in a document.
export function posBeforeFromDOM(pm, node) {
let pos = 0, add = 0
for (let cur = node; cur != pm.content; cur = cur.parentNode) {
let attr = cur.getAttribute("pm-offset")
if (attr) { pos += +attr + add; add = 1 }
}
return pos
}
// : (ProseMirror, DOMNode, number) → number
export function posFromDOM(pm, dom, domOffset, loose) {
if (!loose && pm.operation && pm.doc != pm.operation.doc)
throw new RangeError("Fetching a position from an outdated DOM structure")
if (domOffset == null) {
domOffset = Array.prototype.indexOf.call(dom.parentNode.childNodes, dom)
dom = dom.parentNode
}
// Move up to the wrapping container, counting local offset along
// the way.
let innerOffset = 0, tag
for (;;) {
let adjust = 0
if (dom.nodeType == 3) {
innerOffset += domOffset
// IE has a habit of splitting text nodes for no apparent reason
if (loose) for (let before = dom.previousSibling; before && before.nodeType == 3; before = before.previousSibling)
innerOffset += before.nodeValue.length
} else if (tag = dom.getAttribute("pm-offset") && !childContainer(dom)) {
if (!loose) {
let size = +dom.getAttribute("pm-size")
if (domOffset == dom.childNodes.length) innerOffset = size
else innerOffset = Math.min(innerOffset, size)
} else {
for (let i = 0; i < domOffset; i++) {
let child = dom.childNodes[i]
if (child.nodeType == 3) innerOffset += child.nodeValue.length
}
}
return posBeforeFromDOM(pm, dom) + innerOffset
} else if (dom.hasAttribute("pm-container")) {
break
} else if (tag = dom.getAttribute("pm-inner-offset")) {
innerOffset += +tag
adjust = -1
} else if (domOffset && domOffset == dom.childNodes.length) {
adjust = 1
}
let parent = dom.parentNode
domOffset = adjust < 0 ? 0 : Array.prototype.indexOf.call(parent.childNodes, dom) + adjust
dom = parent
}
let start = dom == pm.content ? 0 : posBeforeFromDOM(pm, dom) + 1, before = 0
for (let child = dom.childNodes[domOffset - 1]; child; child = child.previousSibling) {
if (child.nodeType == 1 && (tag = child.getAttribute("pm-offset"))) {
before += +tag + +child.getAttribute("pm-size")
break
} else if (loose && child.nodeType == 3) {
before += child.nodeValue.length
}
}
return start + before + innerOffset
}
// : (DOMNode) → ?DOMNode
export function childContainer(dom) {
return dom.hasAttribute("pm-container") ? dom : dom.querySelector("[pm-container]")
}
// : (ProseMirror, number) → {node: DOMNode, offset: number}
// Find the DOM node and offset into that node that the given document
// position refers to.
export function DOMFromPos(pm, pos, loose) {
if (!loose && pm.operation && pm.doc != pm.operation.doc)
throw new RangeError("Resolving a position in an outdated DOM structure")
let container = pm.content, offset = pos
for (;;) {
for (let child = container.firstChild, i = 0;; child = child.nextSibling, i++) {
if (!child) {
if (offset && !loose) throw new RangeError("Failed to find node at " + pos)
return {node: container, offset: i}
}
let size = child.nodeType == 1 && child.getAttribute("pm-size")
if (size) {
if (!offset) return {node: container, offset: i}
size = +size
if (offset < size) {
container = childContainer(child)
if (!container) {
return leafAt(child, offset)
} else {
offset--
break
}
} else {
offset -= size
}
}
}
}
}
// : (ProseMirror, number) → DOMNode
export function DOMAfterPos(pm, pos) {
let {node, offset} = DOMFromPos(pm, pos)
if (node.nodeType != 1 || offset == node.childNodes.length)
throw new RangeError("No node after pos " + pos)
return node.childNodes[offset]
}
// : (DOMNode, number) → {node: DOMNode, offset: number}
function leafAt(node, offset) {
for (;;) {
let child = node.firstChild
if (!child) return {node, offset}
if (child.nodeType != 1) return {node: child, offset}
if (child.hasAttribute("pm-inner-offset")) {
let nodeOffset = 0
for (;;) {
let nextSib = child.nextSibling, nextOffset
if (!nextSib || (nextOffset = +nextSib.getAttribute("pm-inner-offset")) >= offset) break
child = nextSib
nodeOffset = nextOffset
}
offset -= nodeOffset
}
node = child
}
}
function windowRect() {
return {left: 0, right: window.innerWidth,
top: 0, bottom: window.innerHeight}
}
export function scrollIntoView(pm, pos) {
if (!pos) pos = pm.sel.range.head || pm.sel.range.from
let coords = coordsAtPos(pm, pos)
for (let parent = pm.content;; parent = parent.parentNode) {
let {scrollThreshold, scrollMargin} = pm.options
let atBody = parent == document.body
let rect = atBody ? windowRect() : parent.getBoundingClientRect()
let moveX = 0, moveY = 0
if (coords.top < rect.top + scrollThreshold)
moveY = -(rect.top - coords.top + scrollMargin)
else if (coords.bottom > rect.bottom - scrollThreshold)
moveY = coords.bottom - rect.bottom + scrollMargin
if (coords.left < rect.left + scrollThreshold)
moveX = -(rect.left - coords.left + scrollMargin)
else if (coords.right > rect.right - scrollThreshold)
moveX = coords.right - rect.right + scrollMargin
if (moveX || moveY) {
if (atBody) {
window.scrollBy(moveX, moveY)
} else {
if (moveY) parent.scrollTop += moveY
if (moveX) parent.scrollLeft += moveX
}
}
if (atBody) break
}
}
function findOffsetInNode(node, coords) {
let closest, dyClosest = 2e8, coordsClosest, offset = 0
for (let child = node.firstChild; child; child = child.nextSibling) {
let rects
if (child.nodeType == 1) rects = child.getClientRects()
else if (child.nodeType == 3) rects = textRange(child).getClientRects()
else continue
for (let i = 0; i < rects.length; i++) {
let rect = rects[i]
if (rect.left <= coords.left && rect.right >= coords.left) {
let dy = rect.top > coords.top ? rect.top - coords.top
: rect.bottom < coords.top ? coords.top - rect.bottom : 0
if (dy < dyClosest) { // FIXME does not group by row
closest = child
dyClosest = dy
coordsClosest = dy ? {left: coords.left, top: rect.top} : coords
if (child.nodeType == 1 && !child.firstChild)
offset = i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)
continue
}
}
if (!closest &&
(coords.top >= rect.bottom || coords.top >= rect.top && coords.left >= rect.right))
offset = i + 1
}
}
if (!closest) return {node, offset}
if (closest.nodeType == 3) return findOffsetInText(closest, coordsClosest)
if (closest.firstChild) return findOffsetInNode(closest, coordsClosest)
return {node, offset}
}
function findOffsetInText(node, coords) {
let len = node.nodeValue.length
let range = document.createRange()
for (let i = 0; i < len; i++) {
range.setEnd(node, i + 1)
range.setStart(node, i)
let rect = range.getBoundingClientRect()
if (rect.top == rect.bottom) continue
if (rect.left - 1 <= coords.left && rect.right + 1 >= coords.left &&
rect.top - 1 <= coords.top && rect.bottom + 1 >= coords.top)
return {node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)}
}
return {node, offset: 0}
}
// Given an x,y position on the editor, get the position in the document.
export function posAtCoords(pm, coords) {
let elt = document.elementFromPoint(coords.left, coords.top + 1)
if (!contains(pm.content, elt)) return null
if (!elt.firstChild) elt = elt.parentNode
let {node, offset} = findOffsetInNode(elt, coords)
return posFromDOM(pm, node, offset)
}
function textRange(node, from, to) {
let range = document.createRange()
range.setEnd(node, to == null ? node.nodeValue.length : to)
range.setStart(node, from || 0)
return range
}
function singleRect(object, bias) {
let rects = object.getClientRects()
return !rects.length ? object.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
}
// : (ProseMirror, number) → ClientRect
// Given a position in the document model, get a bounding box of the
// character at that position, relative to the window.
export function coordsAtPos(pm, pos) {
let {node, offset} = DOMFromPos(pm, pos)
let side, rect
if (node.nodeType == 3) {
if (offset < node.nodeValue.length) {
rect = singleRect(textRange(node, offset, offset + 1), -1)
side = "left"
}
if ((!rect || rect.left == rect.right) && offset) {
rect = singleRect(textRange(node, offset - 1, offset), 1)
side = "right"
}
} else if (node.firstChild) {
if (offset < node.childNodes.length) {
let child = node.childNodes[offset]
rect = singleRect(child.nodeType == 3 ? textRange(child) : child, -1)
side = "left"
}
if ((!rect || rect.top == rect.bottom) && offset) {
let child = node.childNodes[offset - 1]
rect = singleRect(child.nodeType == 3 ? textRange(child) : child, 1)
side = "right"
}
} else {
rect = node.getBoundingClientRect()
side = "left"
}
let x = rect[side]
return {top: rect.top, bottom: rect.bottom, left: x, right: x}
}
// ;; #path=NodeType #kind=class #noAnchor
// You can add several properties to [node types](#NodeType) to
// influence the way the editor interacts with them.
// :: (node: Node, pos: number, dom: DOMNode, coords: {left: number, top: number}) → ?number
// #path=NodeType.prototype.countCoordsAsChild
// Specifies that, if this node is clicked, a child node might
// actually be meant. This is used to, for example, make clicking a
// list marker (which, in the DOM, is part of the list node) select
// the list item it belongs to. Should return null if the given
// coordinates don't refer to a child node, or the position
// before the child otherwise.
export function selectableNodeAbove(pm, dom, coords, liberal) {
for (; dom && dom != pm.content; dom = dom.parentNode) {
if (dom.hasAttribute("pm-offset")) {
let pos = posBeforeFromDOM(pm, dom), node = pm.doc.nodeAt(pos)
if (node.type.countCoordsAsChild) {
let result = node.type.countCoordsAsChild(node, pos, dom, coords)
if (result != null) return result
}
// Leaf nodes are implicitly clickable
if ((liberal || node.type.isLeaf) && node.type.selectable)
return pos
if (!liberal) return null
}
}
}
// :: (pm: ProseMirror, event: MouseEvent, pos: number, node: Node) → bool
// #path=NodeType.prototype.handleClick
// If a node is directly clicked (that is, the click didn't land in a
// DOM node belonging to a child node), and its type has a
// `handleClick` method, that method is given a chance to handle the
// click. The method is called, and should return `false` if it did
// _not_ handle the click.
//
// The `event` passed is the event for `"mousedown"`, but calling
// `preventDefault` on it has no effect, since this method is only
// called after a corresponding `"mouseup"` has occurred and
// ProseMirror has determined that this is not a drag or multi-click
// event.
// :: (pm: ProseMirror, event: MouseEvent, pos: number, node: Node) → bool
// #path=NodeType.prototype.handleDoubleClick
// This works like [`handleClick`](#NodeType.handleClick), but is
// called for double clicks instead.
// :: (pm: ProseMirror, event: MouseEvent, pos: number, node: Node) → bool
// #path=NodeType.prototype.handleContextMenu
//
// When the [context
// menu](https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu)
// is activated in the editable context, nodes that the clicked
// position falls inside of get a chance to react to it. Node types
// may define a `handleContextMenu` method, which will be called when
// present, first on inner nodes and then up the document tree, until
// one of the methods returns something other than `false`.
//
// The handlers can inspect `event.target` to figure out whether they
// were directly clicked, and may call `event.preventDefault()` to
// prevent the native context menu.
export function handleNodeClick(pm, type, event, target, direct) {
for (let dom = target; dom && dom != pm.content; dom = dom.parentNode) {
if (dom.hasAttribute("pm-offset")) {
let pos = posBeforeFromDOM(pm, dom), node = pm.doc.nodeAt(pos)
let handled = node.type[type] && node.type[type](pm, event, pos, node) !== false
if (direct || handled) return handled
}
}
}