index.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. import { keydownHandler } from 'prosemirror-keymap';
  2. import { Selection, NodeSelection, TextSelection, Plugin } from 'prosemirror-state';
  3. import { Slice, Fragment } from 'prosemirror-model';
  4. import { DecorationSet, Decoration } from 'prosemirror-view';
  5. /**
  6. Gap cursor selections are represented using this class. Its
  7. `$anchor` and `$head` properties both point at the cursor position.
  8. */
  9. class GapCursor extends Selection {
  10. /**
  11. Create a gap cursor.
  12. */
  13. constructor($pos) {
  14. super($pos, $pos);
  15. }
  16. map(doc, mapping) {
  17. let $pos = doc.resolve(mapping.map(this.head));
  18. return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
  19. }
  20. content() { return Slice.empty; }
  21. eq(other) {
  22. return other instanceof GapCursor && other.head == this.head;
  23. }
  24. toJSON() {
  25. return { type: "gapcursor", pos: this.head };
  26. }
  27. /**
  28. @internal
  29. */
  30. static fromJSON(doc, json) {
  31. if (typeof json.pos != "number")
  32. throw new RangeError("Invalid input for GapCursor.fromJSON");
  33. return new GapCursor(doc.resolve(json.pos));
  34. }
  35. /**
  36. @internal
  37. */
  38. getBookmark() { return new GapBookmark(this.anchor); }
  39. /**
  40. @internal
  41. */
  42. static valid($pos) {
  43. let parent = $pos.parent;
  44. if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos))
  45. return false;
  46. let override = parent.type.spec.allowGapCursor;
  47. if (override != null)
  48. return override;
  49. let deflt = parent.contentMatchAt($pos.index()).defaultType;
  50. return deflt && deflt.isTextblock;
  51. }
  52. /**
  53. @internal
  54. */
  55. static findGapCursorFrom($pos, dir, mustMove = false) {
  56. search: for (;;) {
  57. if (!mustMove && GapCursor.valid($pos))
  58. return $pos;
  59. let pos = $pos.pos, next = null;
  60. // Scan up from this position
  61. for (let d = $pos.depth;; d--) {
  62. let parent = $pos.node(d);
  63. if (dir > 0 ? $pos.indexAfter(d) < parent.childCount : $pos.index(d) > 0) {
  64. next = parent.child(dir > 0 ? $pos.indexAfter(d) : $pos.index(d) - 1);
  65. break;
  66. }
  67. else if (d == 0) {
  68. return null;
  69. }
  70. pos += dir;
  71. let $cur = $pos.doc.resolve(pos);
  72. if (GapCursor.valid($cur))
  73. return $cur;
  74. }
  75. // And then down into the next node
  76. for (;;) {
  77. let inside = dir > 0 ? next.firstChild : next.lastChild;
  78. if (!inside) {
  79. if (next.isAtom && !next.isText && !NodeSelection.isSelectable(next)) {
  80. $pos = $pos.doc.resolve(pos + next.nodeSize * dir);
  81. mustMove = false;
  82. continue search;
  83. }
  84. break;
  85. }
  86. next = inside;
  87. pos += dir;
  88. let $cur = $pos.doc.resolve(pos);
  89. if (GapCursor.valid($cur))
  90. return $cur;
  91. }
  92. return null;
  93. }
  94. }
  95. }
  96. GapCursor.prototype.visible = false;
  97. GapCursor.findFrom = GapCursor.findGapCursorFrom;
  98. Selection.jsonID("gapcursor", GapCursor);
  99. class GapBookmark {
  100. constructor(pos) {
  101. this.pos = pos;
  102. }
  103. map(mapping) {
  104. return new GapBookmark(mapping.map(this.pos));
  105. }
  106. resolve(doc) {
  107. let $pos = doc.resolve(this.pos);
  108. return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
  109. }
  110. }
  111. function closedBefore($pos) {
  112. for (let d = $pos.depth; d >= 0; d--) {
  113. let index = $pos.index(d), parent = $pos.node(d);
  114. // At the start of this parent, look at next one
  115. if (index == 0) {
  116. if (parent.type.spec.isolating)
  117. return true;
  118. continue;
  119. }
  120. // See if the node before (or its first ancestor) is closed
  121. for (let before = parent.child(index - 1);; before = before.lastChild) {
  122. if ((before.childCount == 0 && !before.inlineContent) || before.isAtom || before.type.spec.isolating)
  123. return true;
  124. if (before.inlineContent)
  125. return false;
  126. }
  127. }
  128. // Hit start of document
  129. return true;
  130. }
  131. function closedAfter($pos) {
  132. for (let d = $pos.depth; d >= 0; d--) {
  133. let index = $pos.indexAfter(d), parent = $pos.node(d);
  134. if (index == parent.childCount) {
  135. if (parent.type.spec.isolating)
  136. return true;
  137. continue;
  138. }
  139. for (let after = parent.child(index);; after = after.firstChild) {
  140. if ((after.childCount == 0 && !after.inlineContent) || after.isAtom || after.type.spec.isolating)
  141. return true;
  142. if (after.inlineContent)
  143. return false;
  144. }
  145. }
  146. return true;
  147. }
  148. /**
  149. Create a gap cursor plugin. When enabled, this will capture clicks
  150. near and arrow-key-motion past places that don't have a normally
  151. selectable position nearby, and create a gap cursor selection for
  152. them. The cursor is drawn as an element with class
  153. `ProseMirror-gapcursor`. You can either include
  154. `style/gapcursor.css` from the package's directory or add your own
  155. styles to make it visible.
  156. */
  157. function gapCursor() {
  158. return new Plugin({
  159. props: {
  160. decorations: drawGapCursor,
  161. createSelectionBetween(_view, $anchor, $head) {
  162. return $anchor.pos == $head.pos && GapCursor.valid($head) ? new GapCursor($head) : null;
  163. },
  164. handleClick,
  165. handleKeyDown,
  166. handleDOMEvents: { beforeinput: beforeinput }
  167. }
  168. });
  169. }
  170. const handleKeyDown = keydownHandler({
  171. "ArrowLeft": arrow("horiz", -1),
  172. "ArrowRight": arrow("horiz", 1),
  173. "ArrowUp": arrow("vert", -1),
  174. "ArrowDown": arrow("vert", 1)
  175. });
  176. function arrow(axis, dir) {
  177. const dirStr = axis == "vert" ? (dir > 0 ? "down" : "up") : (dir > 0 ? "right" : "left");
  178. return function (state, dispatch, view) {
  179. let sel = state.selection;
  180. let $start = dir > 0 ? sel.$to : sel.$from, mustMove = sel.empty;
  181. if (sel instanceof TextSelection) {
  182. if (!view.endOfTextblock(dirStr) || $start.depth == 0)
  183. return false;
  184. mustMove = false;
  185. $start = state.doc.resolve(dir > 0 ? $start.after() : $start.before());
  186. }
  187. let $found = GapCursor.findGapCursorFrom($start, dir, mustMove);
  188. if (!$found)
  189. return false;
  190. if (dispatch)
  191. dispatch(state.tr.setSelection(new GapCursor($found)));
  192. return true;
  193. };
  194. }
  195. function handleClick(view, pos, event) {
  196. if (!view || !view.editable)
  197. return false;
  198. let $pos = view.state.doc.resolve(pos);
  199. if (!GapCursor.valid($pos))
  200. return false;
  201. let clickPos = view.posAtCoords({ left: event.clientX, top: event.clientY });
  202. if (clickPos && clickPos.inside > -1 && NodeSelection.isSelectable(view.state.doc.nodeAt(clickPos.inside)))
  203. return false;
  204. view.dispatch(view.state.tr.setSelection(new GapCursor($pos)));
  205. return true;
  206. }
  207. // This is a hack that, when a composition starts while a gap cursor
  208. // is active, quickly creates an inline context for the composition to
  209. // happen in, to avoid it being aborted by the DOM selection being
  210. // moved into a valid position.
  211. function beforeinput(view, event) {
  212. if (event.inputType != "insertCompositionText" || !(view.state.selection instanceof GapCursor))
  213. return false;
  214. let { $from } = view.state.selection;
  215. let insert = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text);
  216. if (!insert)
  217. return false;
  218. let frag = Fragment.empty;
  219. for (let i = insert.length - 1; i >= 0; i--)
  220. frag = Fragment.from(insert[i].createAndFill(null, frag));
  221. let tr = view.state.tr.replace($from.pos, $from.pos, new Slice(frag, 0, 0));
  222. tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
  223. view.dispatch(tr);
  224. return false;
  225. }
  226. function drawGapCursor(state) {
  227. if (!(state.selection instanceof GapCursor))
  228. return null;
  229. let node = document.createElement("div");
  230. node.className = "ProseMirror-gapcursor";
  231. return DecorationSet.create(state.doc, [Decoration.widget(state.selection.head, node, { key: "gapcursor" })]);
  232. }
  233. export { GapCursor, gapCursor };