You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					226 lines
				
				8.0 KiB
			
		
		
			
		
	
	
					226 lines
				
				8.0 KiB
			| 
											3 years ago
										 | import { keydownHandler } from 'prosemirror-keymap'; | ||
|  | import { Selection, NodeSelection, TextSelection, Plugin } from 'prosemirror-state'; | ||
|  | import { Slice, Fragment } from 'prosemirror-model'; | ||
|  | import { DecorationSet, Decoration } from 'prosemirror-view'; | ||
|  | 
 | ||
|  | // ::- Gap cursor selections are represented using this class. Its
 | ||
|  | // `$anchor` and `$head` properties both point at the cursor position.
 | ||
|  | var GapCursor = /*@__PURE__*/(function (Selection) { | ||
|  |   function GapCursor($pos) { | ||
|  |     Selection.call(this, $pos, $pos); | ||
|  |   } | ||
|  | 
 | ||
|  |   if ( Selection ) GapCursor.__proto__ = Selection; | ||
|  |   GapCursor.prototype = Object.create( Selection && Selection.prototype ); | ||
|  |   GapCursor.prototype.constructor = GapCursor; | ||
|  | 
 | ||
|  |   GapCursor.prototype.map = function map (doc, mapping) { | ||
|  |     var $pos = doc.resolve(mapping.map(this.head)); | ||
|  |     return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos) | ||
|  |   }; | ||
|  | 
 | ||
|  |   GapCursor.prototype.content = function content () { return Slice.empty }; | ||
|  | 
 | ||
|  |   GapCursor.prototype.eq = function eq (other) { | ||
|  |     return other instanceof GapCursor && other.head == this.head | ||
|  |   }; | ||
|  | 
 | ||
|  |   GapCursor.prototype.toJSON = function toJSON () { | ||
|  |     return {type: "gapcursor", pos: this.head} | ||
|  |   }; | ||
|  | 
 | ||
|  |   GapCursor.fromJSON = function fromJSON (doc, json) { | ||
|  |     if (typeof json.pos != "number") { throw new RangeError("Invalid input for GapCursor.fromJSON") } | ||
|  |     return new GapCursor(doc.resolve(json.pos)) | ||
|  |   }; | ||
|  | 
 | ||
|  |   GapCursor.prototype.getBookmark = function getBookmark () { return new GapBookmark(this.anchor) }; | ||
|  | 
 | ||
|  |   GapCursor.valid = function valid ($pos) { | ||
|  |     var parent = $pos.parent; | ||
|  |     if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos)) { return false } | ||
|  |     var override = parent.type.spec.allowGapCursor; | ||
|  |     if (override != null) { return override } | ||
|  |     var deflt = parent.contentMatchAt($pos.index()).defaultType; | ||
|  |     return deflt && deflt.isTextblock | ||
|  |   }; | ||
|  | 
 | ||
|  |   GapCursor.findFrom = function findFrom ($pos, dir, mustMove) { | ||
|  |     search: for (;;) { | ||
|  |       if (!mustMove && GapCursor.valid($pos)) { return $pos } | ||
|  |       var pos = $pos.pos, next = null; | ||
|  |       // Scan up from this position
 | ||
|  |       for (var d = $pos.depth;; d--) { | ||
|  |         var parent = $pos.node(d); | ||
|  |         if (dir > 0 ? $pos.indexAfter(d) < parent.childCount : $pos.index(d) > 0) { | ||
|  |           next = parent.child(dir > 0 ? $pos.indexAfter(d) : $pos.index(d) - 1); | ||
|  |           break | ||
|  |         } else if (d == 0) { | ||
|  |           return null | ||
|  |         } | ||
|  |         pos += dir; | ||
|  |         var $cur = $pos.doc.resolve(pos); | ||
|  |         if (GapCursor.valid($cur)) { return $cur } | ||
|  |       } | ||
|  | 
 | ||
|  |       // And then down into the next node
 | ||
|  |       for (;;) { | ||
|  |         var inside = dir > 0 ? next.firstChild : next.lastChild; | ||
|  |         if (!inside) { | ||
|  |           if (next.isAtom && !next.isText && !NodeSelection.isSelectable(next)) { | ||
|  |             $pos = $pos.doc.resolve(pos + next.nodeSize * dir); | ||
|  |             mustMove = false; | ||
|  |             continue search | ||
|  |           } | ||
|  |           break | ||
|  |         } | ||
|  |         next = inside; | ||
|  |         pos += dir; | ||
|  |         var $cur$1 = $pos.doc.resolve(pos); | ||
|  |         if (GapCursor.valid($cur$1)) { return $cur$1 } | ||
|  |       } | ||
|  | 
 | ||
|  |       return null | ||
|  |     } | ||
|  |   }; | ||
|  | 
 | ||
|  |   return GapCursor; | ||
|  | }(Selection)); | ||
|  | 
 | ||
|  | GapCursor.prototype.visible = false; | ||
|  | 
 | ||
|  | Selection.jsonID("gapcursor", GapCursor); | ||
|  | 
 | ||
|  | var GapBookmark = function GapBookmark(pos) { | ||
|  |   this.pos = pos; | ||
|  | }; | ||
|  | GapBookmark.prototype.map = function map (mapping) { | ||
|  |   return new GapBookmark(mapping.map(this.pos)) | ||
|  | }; | ||
|  | GapBookmark.prototype.resolve = function resolve (doc) { | ||
|  |   var $pos = doc.resolve(this.pos); | ||
|  |   return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos) | ||
|  | }; | ||
|  | 
 | ||
|  | function closedBefore($pos) { | ||
|  |   for (var d = $pos.depth; d >= 0; d--) { | ||
|  |     var index = $pos.index(d), parent = $pos.node(d); | ||
|  |     // At the start of this parent, look at next one
 | ||
|  |     if (index == 0) { | ||
|  |       if (parent.type.spec.isolating) { return true } | ||
|  |       continue | ||
|  |     } | ||
|  |     // See if the node before (or its first ancestor) is closed
 | ||
|  |     for (var before = parent.child(index - 1);; before = before.lastChild) { | ||
|  |       if ((before.childCount == 0 && !before.inlineContent) || before.isAtom || before.type.spec.isolating) { return true } | ||
|  |       if (before.inlineContent) { return false } | ||
|  |     } | ||
|  |   } | ||
|  |   // Hit start of document
 | ||
|  |   return true | ||
|  | } | ||
|  | 
 | ||
|  | function closedAfter($pos) { | ||
|  |   for (var d = $pos.depth; d >= 0; d--) { | ||
|  |     var index = $pos.indexAfter(d), parent = $pos.node(d); | ||
|  |     if (index == parent.childCount) { | ||
|  |       if (parent.type.spec.isolating) { return true } | ||
|  |       continue | ||
|  |     } | ||
|  |     for (var after = parent.child(index);; after = after.firstChild) { | ||
|  |       if ((after.childCount == 0 && !after.inlineContent) || after.isAtom || after.type.spec.isolating) { return true } | ||
|  |       if (after.inlineContent) { return false } | ||
|  |     } | ||
|  |   } | ||
|  |   return true | ||
|  | } | ||
|  | 
 | ||
|  | // :: () → Plugin
 | ||
|  | // Create a gap cursor plugin. When enabled, this will capture clicks
 | ||
|  | // near and arrow-key-motion past places that don't have a normally
 | ||
|  | // selectable position nearby, and create a gap cursor selection for
 | ||
|  | // them. The cursor is drawn as an element with class
 | ||
|  | // `ProseMirror-gapcursor`. You can either include
 | ||
|  | // `style/gapcursor.css` from the package's directory or add your own
 | ||
|  | // styles to make it visible.
 | ||
|  | var gapCursor = function() { | ||
|  |   return new Plugin({ | ||
|  |     props: { | ||
|  |       decorations: drawGapCursor, | ||
|  | 
 | ||
|  |       createSelectionBetween: function createSelectionBetween(_view, $anchor, $head) { | ||
|  |         if ($anchor.pos == $head.pos && GapCursor.valid($head)) { return new GapCursor($head) } | ||
|  |       }, | ||
|  | 
 | ||
|  |       handleClick: handleClick, | ||
|  |       handleKeyDown: handleKeyDown, | ||
|  |       handleDOMEvents: {beforeinput: beforeinput} | ||
|  |     } | ||
|  |   }) | ||
|  | }; | ||
|  | 
 | ||
|  | var handleKeyDown = keydownHandler({ | ||
|  |   "ArrowLeft": arrow("horiz", -1), | ||
|  |   "ArrowRight": arrow("horiz", 1), | ||
|  |   "ArrowUp": arrow("vert", -1), | ||
|  |   "ArrowDown": arrow("vert", 1) | ||
|  | }); | ||
|  | 
 | ||
|  | function arrow(axis, dir) { | ||
|  |   var dirStr = axis == "vert" ? (dir > 0 ? "down" : "up") : (dir > 0 ? "right" : "left"); | ||
|  |   return function(state, dispatch, view) { | ||
|  |     var sel = state.selection; | ||
|  |     var $start = dir > 0 ? sel.$to : sel.$from, mustMove = sel.empty; | ||
|  |     if (sel instanceof TextSelection) { | ||
|  |       if (!view.endOfTextblock(dirStr) || $start.depth == 0) { return false } | ||
|  |       mustMove = false; | ||
|  |       $start = state.doc.resolve(dir > 0 ? $start.after() : $start.before()); | ||
|  |     } | ||
|  |     var $found = GapCursor.findFrom($start, dir, mustMove); | ||
|  |     if (!$found) { return false } | ||
|  |     if (dispatch) { dispatch(state.tr.setSelection(new GapCursor($found))); } | ||
|  |     return true | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | function handleClick(view, pos, event) { | ||
|  |   if (!view.editable) { return false } | ||
|  |   var $pos = view.state.doc.resolve(pos); | ||
|  |   if (!GapCursor.valid($pos)) { return false } | ||
|  |   var ref = view.posAtCoords({left: event.clientX, top: event.clientY}); | ||
|  |   var inside = ref.inside; | ||
|  |   if (inside > -1 && NodeSelection.isSelectable(view.state.doc.nodeAt(inside))) { return false } | ||
|  |   view.dispatch(view.state.tr.setSelection(new GapCursor($pos))); | ||
|  |   return true | ||
|  | } | ||
|  | 
 | ||
|  | // This is a hack that, when a composition starts while a gap cursor
 | ||
|  | // is active, quickly creates an inline context for the composition to
 | ||
|  | // happen in, to avoid it being aborted by the DOM selection being
 | ||
|  | // moved into a valid position.
 | ||
|  | function beforeinput(view, event) { | ||
|  |   if (event.inputType != "insertCompositionText" || !(view.state.selection instanceof GapCursor)) { return false } | ||
|  | 
 | ||
|  |   var ref = view.state.selection; | ||
|  |   var $from = ref.$from; | ||
|  |   var insert = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text); | ||
|  |   if (!insert) { return false } | ||
|  | 
 | ||
|  |   var frag = Fragment.empty; | ||
|  |   for (var i = insert.length - 1; i >= 0; i--) { frag = Fragment.from(insert[i].createAndFill(null, frag)); } | ||
|  |   var tr = view.state.tr.replace($from.pos, $from.pos, new Slice(frag, 0, 0)); | ||
|  |   tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1))); | ||
|  |   view.dispatch(tr); | ||
|  |   return false | ||
|  | } | ||
|  | 
 | ||
|  | function drawGapCursor(state) { | ||
|  |   if (!(state.selection instanceof GapCursor)) { return null } | ||
|  |   var node = document.createElement("div"); | ||
|  |   node.className = "ProseMirror-gapcursor"; | ||
|  |   return DecorationSet.create(state.doc, [Decoration.widget(state.selection.head, node, {key: "gapcursor"})]) | ||
|  | } | ||
|  | 
 | ||
|  | export { GapCursor, gapCursor }; | ||
|  | //# sourceMappingURL=index.es.js.map
 |