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.
		
		
		
		
		
			
		
			
				
					
					
						
							237 lines
						
					
					
						
							8.4 KiB
						
					
					
				
			
		
		
	
	
							237 lines
						
					
					
						
							8.4 KiB
						
					
					
				| 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.
 | |
| */
 | |
| class GapCursor extends Selection {
 | |
|     /**
 | |
|     Create a gap cursor.
 | |
|     */
 | |
|     constructor($pos) {
 | |
|         super($pos, $pos);
 | |
|     }
 | |
|     map(doc, mapping) {
 | |
|         let $pos = doc.resolve(mapping.map(this.head));
 | |
|         return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
 | |
|     }
 | |
|     content() { return Slice.empty; }
 | |
|     eq(other) {
 | |
|         return other instanceof GapCursor && other.head == this.head;
 | |
|     }
 | |
|     toJSON() {
 | |
|         return { type: "gapcursor", pos: this.head };
 | |
|     }
 | |
|     /**
 | |
|     @internal
 | |
|     */
 | |
|     static fromJSON(doc, json) {
 | |
|         if (typeof json.pos != "number")
 | |
|             throw new RangeError("Invalid input for GapCursor.fromJSON");
 | |
|         return new GapCursor(doc.resolve(json.pos));
 | |
|     }
 | |
|     /**
 | |
|     @internal
 | |
|     */
 | |
|     getBookmark() { return new GapBookmark(this.anchor); }
 | |
|     /**
 | |
|     @internal
 | |
|     */
 | |
|     static valid($pos) {
 | |
|         let parent = $pos.parent;
 | |
|         if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos))
 | |
|             return false;
 | |
|         let override = parent.type.spec.allowGapCursor;
 | |
|         if (override != null)
 | |
|             return override;
 | |
|         let deflt = parent.contentMatchAt($pos.index()).defaultType;
 | |
|         return deflt && deflt.isTextblock;
 | |
|     }
 | |
|     /**
 | |
|     @internal
 | |
|     */
 | |
|     static findGapCursorFrom($pos, dir, mustMove = false) {
 | |
|         search: for (;;) {
 | |
|             if (!mustMove && GapCursor.valid($pos))
 | |
|                 return $pos;
 | |
|             let pos = $pos.pos, next = null;
 | |
|             // Scan up from this position
 | |
|             for (let d = $pos.depth;; d--) {
 | |
|                 let 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;
 | |
|                 let $cur = $pos.doc.resolve(pos);
 | |
|                 if (GapCursor.valid($cur))
 | |
|                     return $cur;
 | |
|             }
 | |
|             // And then down into the next node
 | |
|             for (;;) {
 | |
|                 let 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;
 | |
|                 let $cur = $pos.doc.resolve(pos);
 | |
|                 if (GapCursor.valid($cur))
 | |
|                     return $cur;
 | |
|             }
 | |
|             return null;
 | |
|         }
 | |
|     }
 | |
| }
 | |
| GapCursor.prototype.visible = false;
 | |
| GapCursor.findFrom = GapCursor.findGapCursorFrom;
 | |
| Selection.jsonID("gapcursor", GapCursor);
 | |
| class GapBookmark {
 | |
|     constructor(pos) {
 | |
|         this.pos = pos;
 | |
|     }
 | |
|     map(mapping) {
 | |
|         return new GapBookmark(mapping.map(this.pos));
 | |
|     }
 | |
|     resolve(doc) {
 | |
|         let $pos = doc.resolve(this.pos);
 | |
|         return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
 | |
|     }
 | |
| }
 | |
| function closedBefore($pos) {
 | |
|     for (let d = $pos.depth; d >= 0; d--) {
 | |
|         let 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 (let 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 (let d = $pos.depth; d >= 0; d--) {
 | |
|         let index = $pos.indexAfter(d), parent = $pos.node(d);
 | |
|         if (index == parent.childCount) {
 | |
|             if (parent.type.spec.isolating)
 | |
|                 return true;
 | |
|             continue;
 | |
|         }
 | |
|         for (let 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;
 | |
| }
 | |
| 
 | |
| /**
 | |
| 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.
 | |
| */
 | |
| function gapCursor() {
 | |
|     return new Plugin({
 | |
|         props: {
 | |
|             decorations: drawGapCursor,
 | |
|             createSelectionBetween(_view, $anchor, $head) {
 | |
|                 return $anchor.pos == $head.pos && GapCursor.valid($head) ? new GapCursor($head) : null;
 | |
|             },
 | |
|             handleClick,
 | |
|             handleKeyDown,
 | |
|             handleDOMEvents: { beforeinput: beforeinput }
 | |
|         }
 | |
|     });
 | |
| }
 | |
| const handleKeyDown = keydownHandler({
 | |
|     "ArrowLeft": arrow("horiz", -1),
 | |
|     "ArrowRight": arrow("horiz", 1),
 | |
|     "ArrowUp": arrow("vert", -1),
 | |
|     "ArrowDown": arrow("vert", 1)
 | |
| });
 | |
| function arrow(axis, dir) {
 | |
|     const dirStr = axis == "vert" ? (dir > 0 ? "down" : "up") : (dir > 0 ? "right" : "left");
 | |
|     return function (state, dispatch, view) {
 | |
|         let sel = state.selection;
 | |
|         let $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());
 | |
|         }
 | |
|         let $found = GapCursor.findGapCursorFrom($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 || !view.editable)
 | |
|         return false;
 | |
|     let $pos = view.state.doc.resolve(pos);
 | |
|     if (!GapCursor.valid($pos))
 | |
|         return false;
 | |
|     let clickPos = view.posAtCoords({ left: event.clientX, top: event.clientY });
 | |
|     if (clickPos && clickPos.inside > -1 && NodeSelection.isSelectable(view.state.doc.nodeAt(clickPos.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;
 | |
|     let { $from } = view.state.selection;
 | |
|     let insert = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text);
 | |
|     if (!insert)
 | |
|         return false;
 | |
|     let frag = Fragment.empty;
 | |
|     for (let i = insert.length - 1; i >= 0; i--)
 | |
|         frag = Fragment.from(insert[i].createAndFill(null, frag));
 | |
|     let 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;
 | |
|     let node = document.createElement("div");
 | |
|     node.className = "ProseMirror-gapcursor";
 | |
|     return DecorationSet.create(state.doc, [Decoration.widget(state.selection.head, node, { key: "gapcursor" })]);
 | |
| }
 | |
| 
 | |
| export { GapCursor, gapCursor };
 |