@atlaskit/editor-core 188.5.0 → 188.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/labs/next/presets/default.js +2 -2
  3. package/dist/cjs/labs/next/presets/universal.js +1 -6
  4. package/dist/cjs/plugins/expand/index.js +0 -2
  5. package/dist/cjs/plugins/expand/nodeviews/index.js +37 -13
  6. package/dist/cjs/plugins/index.js +0 -7
  7. package/dist/cjs/ui/Addon/click-area-helper.js +9 -11
  8. package/dist/cjs/ui/ContentStyles/index.js +13 -13
  9. package/dist/cjs/utils/selection.js +12 -14
  10. package/dist/cjs/version-wrapper.js +1 -1
  11. package/dist/es2019/labs/next/presets/default.js +1 -1
  12. package/dist/es2019/labs/next/presets/universal.js +1 -6
  13. package/dist/es2019/plugins/expand/index.js +0 -2
  14. package/dist/es2019/plugins/expand/nodeviews/index.js +37 -13
  15. package/dist/es2019/plugins/index.js +0 -1
  16. package/dist/es2019/ui/Addon/click-area-helper.js +4 -6
  17. package/dist/es2019/ui/ContentStyles/index.js +1 -1
  18. package/dist/es2019/utils/selection.js +2 -17
  19. package/dist/es2019/version-wrapper.js +1 -1
  20. package/dist/esm/labs/next/presets/default.js +1 -1
  21. package/dist/esm/labs/next/presets/universal.js +1 -6
  22. package/dist/esm/plugins/expand/index.js +0 -2
  23. package/dist/esm/plugins/expand/nodeviews/index.js +37 -13
  24. package/dist/esm/plugins/index.js +0 -1
  25. package/dist/esm/ui/Addon/click-area-helper.js +4 -6
  26. package/dist/esm/ui/ContentStyles/index.js +1 -1
  27. package/dist/esm/utils/selection.js +2 -13
  28. package/dist/esm/version-wrapper.js +1 -1
  29. package/dist/types/labs/next/presets/default.d.ts +22 -8
  30. package/dist/types/plugins/expand/index.d.ts +1 -1
  31. package/dist/types/plugins/expand/nodeviews/index.d.ts +3 -2
  32. package/dist/types/plugins/index.d.ts +0 -1
  33. package/dist/types/utils/selection.d.ts +1 -4
  34. package/package.json +4 -3
  35. package/dist/cjs/plugins/selection/actions.js +0 -11
  36. package/dist/cjs/plugins/selection/commands.js +0 -257
  37. package/dist/cjs/plugins/selection/gap-cursor/actions.js +0 -272
  38. package/dist/cjs/plugins/selection/gap-cursor/direction.js +0 -23
  39. package/dist/cjs/plugins/selection/gap-cursor/selection.js +0 -30
  40. package/dist/cjs/plugins/selection/gap-cursor/styles.js +0 -17
  41. package/dist/cjs/plugins/selection/gap-cursor/utils/is-ignored.js +0 -12
  42. package/dist/cjs/plugins/selection/gap-cursor/utils/is-valid-target-node.js +0 -12
  43. package/dist/cjs/plugins/selection/gap-cursor/utils/place-gap-cursor.js +0 -103
  44. package/dist/cjs/plugins/selection/gap-cursor/utils.js +0 -137
  45. package/dist/cjs/plugins/selection/gap-cursor-selection.js +0 -37
  46. package/dist/cjs/plugins/selection/index.js +0 -65
  47. package/dist/cjs/plugins/selection/plugin-factory.js +0 -49
  48. package/dist/cjs/plugins/selection/pm-plugins/events/create-selection-between.js +0 -92
  49. package/dist/cjs/plugins/selection/pm-plugins/events/keydown.js +0 -115
  50. package/dist/cjs/plugins/selection/pm-plugins/gap-cursor-keymap.js +0 -46
  51. package/dist/cjs/plugins/selection/pm-plugins/gap-cursor-main.js +0 -160
  52. package/dist/cjs/plugins/selection/pm-plugins/gap-cursor-plugin-key.js +0 -8
  53. package/dist/cjs/plugins/selection/pm-plugins/keymap.js +0 -16
  54. package/dist/cjs/plugins/selection/pm-plugins/selection-main.js +0 -104
  55. package/dist/cjs/plugins/selection/reducer.js +0 -26
  56. package/dist/cjs/plugins/selection/types.js +0 -20
  57. package/dist/cjs/plugins/selection/utils.js +0 -280
  58. package/dist/cjs/selection-api/api.js +0 -27
  59. package/dist/es2019/plugins/selection/actions.js +0 -5
  60. package/dist/es2019/plugins/selection/commands.js +0 -250
  61. package/dist/es2019/plugins/selection/gap-cursor/actions.js +0 -270
  62. package/dist/es2019/plugins/selection/gap-cursor/direction.js +0 -15
  63. package/dist/es2019/plugins/selection/gap-cursor/selection.js +0 -1
  64. package/dist/es2019/plugins/selection/gap-cursor/styles.js +0 -145
  65. package/dist/es2019/plugins/selection/gap-cursor/utils/is-ignored.js +0 -1
  66. package/dist/es2019/plugins/selection/gap-cursor/utils/is-valid-target-node.js +0 -1
  67. package/dist/es2019/plugins/selection/gap-cursor/utils/place-gap-cursor.js +0 -94
  68. package/dist/es2019/plugins/selection/gap-cursor/utils.js +0 -124
  69. package/dist/es2019/plugins/selection/gap-cursor-selection.js +0 -2
  70. package/dist/es2019/plugins/selection/index.js +0 -51
  71. package/dist/es2019/plugins/selection/plugin-factory.js +0 -43
  72. package/dist/es2019/plugins/selection/pm-plugins/events/create-selection-between.js +0 -89
  73. package/dist/es2019/plugins/selection/pm-plugins/events/keydown.js +0 -112
  74. package/dist/es2019/plugins/selection/pm-plugins/gap-cursor-keymap.js +0 -40
  75. package/dist/es2019/plugins/selection/pm-plugins/gap-cursor-main.js +0 -158
  76. package/dist/es2019/plugins/selection/pm-plugins/gap-cursor-plugin-key.js +0 -2
  77. package/dist/es2019/plugins/selection/pm-plugins/keymap.js +0 -10
  78. package/dist/es2019/plugins/selection/pm-plugins/selection-main.js +0 -97
  79. package/dist/es2019/plugins/selection/reducer.js +0 -18
  80. package/dist/es2019/plugins/selection/types.js +0 -9
  81. package/dist/es2019/plugins/selection/utils.js +0 -233
  82. package/dist/es2019/selection-api/api.js +0 -20
  83. package/dist/esm/plugins/selection/actions.js +0 -5
  84. package/dist/esm/plugins/selection/commands.js +0 -251
  85. package/dist/esm/plugins/selection/gap-cursor/actions.js +0 -266
  86. package/dist/esm/plugins/selection/gap-cursor/direction.js +0 -15
  87. package/dist/esm/plugins/selection/gap-cursor/selection.js +0 -1
  88. package/dist/esm/plugins/selection/gap-cursor/styles.js +0 -10
  89. package/dist/esm/plugins/selection/gap-cursor/utils/is-ignored.js +0 -1
  90. package/dist/esm/plugins/selection/gap-cursor/utils/is-valid-target-node.js +0 -1
  91. package/dist/esm/plugins/selection/gap-cursor/utils/place-gap-cursor.js +0 -97
  92. package/dist/esm/plugins/selection/gap-cursor/utils.js +0 -128
  93. package/dist/esm/plugins/selection/gap-cursor-selection.js +0 -2
  94. package/dist/esm/plugins/selection/index.js +0 -58
  95. package/dist/esm/plugins/selection/plugin-factory.js +0 -43
  96. package/dist/esm/plugins/selection/pm-plugins/events/create-selection-between.js +0 -86
  97. package/dist/esm/plugins/selection/pm-plugins/events/keydown.js +0 -110
  98. package/dist/esm/plugins/selection/pm-plugins/gap-cursor-keymap.js +0 -40
  99. package/dist/esm/plugins/selection/pm-plugins/gap-cursor-main.js +0 -154
  100. package/dist/esm/plugins/selection/pm-plugins/gap-cursor-plugin-key.js +0 -2
  101. package/dist/esm/plugins/selection/pm-plugins/keymap.js +0 -10
  102. package/dist/esm/plugins/selection/pm-plugins/selection-main.js +0 -98
  103. package/dist/esm/plugins/selection/reducer.js +0 -19
  104. package/dist/esm/plugins/selection/types.js +0 -9
  105. package/dist/esm/plugins/selection/utils.js +0 -241
  106. package/dist/esm/selection-api/api.js +0 -21
  107. package/dist/types/plugins/selection/actions.d.ts +0 -17
  108. package/dist/types/plugins/selection/commands.d.ts +0 -10
  109. package/dist/types/plugins/selection/gap-cursor/actions.d.ts +0 -25
  110. package/dist/types/plugins/selection/gap-cursor/direction.d.ts +0 -10
  111. package/dist/types/plugins/selection/gap-cursor/selection.d.ts +0 -1
  112. package/dist/types/plugins/selection/gap-cursor/styles.d.ts +0 -2
  113. package/dist/types/plugins/selection/gap-cursor/utils/is-ignored.d.ts +0 -1
  114. package/dist/types/plugins/selection/gap-cursor/utils/is-valid-target-node.d.ts +0 -1
  115. package/dist/types/plugins/selection/gap-cursor/utils/place-gap-cursor.d.ts +0 -2
  116. package/dist/types/plugins/selection/gap-cursor/utils.d.ts +0 -8
  117. package/dist/types/plugins/selection/gap-cursor-selection.d.ts +0 -2
  118. package/dist/types/plugins/selection/index.d.ts +0 -13
  119. package/dist/types/plugins/selection/plugin-factory.d.ts +0 -2
  120. package/dist/types/plugins/selection/pm-plugins/events/create-selection-between.d.ts +0 -4
  121. package/dist/types/plugins/selection/pm-plugins/events/keydown.d.ts +0 -2
  122. package/dist/types/plugins/selection/pm-plugins/gap-cursor-keymap.d.ts +0 -2
  123. package/dist/types/plugins/selection/pm-plugins/gap-cursor-main.d.ts +0 -6
  124. package/dist/types/plugins/selection/pm-plugins/gap-cursor-plugin-key.d.ts +0 -2
  125. package/dist/types/plugins/selection/pm-plugins/keymap.d.ts +0 -3
  126. package/dist/types/plugins/selection/pm-plugins/selection-main.d.ts +0 -7
  127. package/dist/types/plugins/selection/reducer.d.ts +0 -3
  128. package/dist/types/plugins/selection/types.d.ts +0 -12
  129. package/dist/types/plugins/selection/utils.d.ts +0 -58
  130. package/dist/types/selection-api/api.d.ts +0 -11
@@ -1,270 +0,0 @@
1
- import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
2
- import { findDomRefAtPos, findPositionOfNodeBefore, removeNodeBefore } from '@atlaskit/editor-prosemirror/utils';
3
- import { Direction, isBackward, isForward } from './direction';
4
- import { GapCursorSelection, Side } from './selection';
5
- import { isTextBlockNearPos } from './utils';
6
- import { isValidTargetNode } from './utils/is-valid-target-node';
7
- import { atTheBeginningOfDoc, atTheEndOfDoc } from '@atlaskit/editor-common/selection';
8
- import { gapCursorPluginKey } from '../pm-plugins/gap-cursor-plugin-key';
9
- import { ZERO_WIDTH_SPACE, isMediaNode, isNodeBeforeMediaNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
10
- export const shouldSkipGapCursor = (direction, state, $pos) => {
11
- var _$pos$nodeBefore;
12
- const {
13
- doc,
14
- schema
15
- } = state;
16
- switch (direction) {
17
- case Direction.UP:
18
- if (atTheBeginningOfDoc(state)) {
19
- return false;
20
- }
21
- return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1) || isNodeBeforeMediaNode($pos, state);
22
- case Direction.DOWN:
23
- return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after') || ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.type.name) === 'text' && !$pos.nodeAfter // end of a paragraph
24
- ;
25
-
26
- default:
27
- return false;
28
- }
29
- };
30
-
31
- // These cases should be handled using the handleMediaGapCursor function
32
- function shouldHandleMediaGapCursor(dir, state) {
33
- var _selection$$from$node;
34
- const {
35
- selection
36
- } = state;
37
- const upArrowFromGapCursorIntoMedia = selection instanceof GapCursorSelection && dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore);
38
- const downArrowFromGapCursorIntoMediaGroup = selection instanceof GapCursorSelection && dir === Direction.DOWN && ((_selection$$from$node = selection.$from.nodeAfter) === null || _selection$$from$node === void 0 ? void 0 : _selection$$from$node.type.name) === 'mediaGroup';
39
- return upArrowFromGapCursorIntoMedia || downArrowFromGapCursorIntoMediaGroup;
40
- }
41
-
42
- // Handle media gap cursor for up/down arrow into media nodes
43
- // Should check this case by using shouldHandleMediaGapCursor first
44
- function handleMediaGapCursor(dir, state) {
45
- const {
46
- selection,
47
- tr
48
- } = state;
49
- let $pos = isBackward(dir) ? selection.$from : selection.$to;
50
- if (dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore)) {
51
- var _tr$doc$nodeAt;
52
- const nodeBeforePos = findPositionOfNodeBefore(tr.selection);
53
- if (nodeBeforePos && selection.side === 'right' && ((_tr$doc$nodeAt = tr.doc.nodeAt(nodeBeforePos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) === 'mediaSingle') {
54
- tr.setSelection(new NodeSelection(tr.doc.resolve(nodeBeforePos))).scrollIntoView();
55
- } else if (nodeBeforePos || nodeBeforePos === 0) {
56
- tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeBeforePos), Side.LEFT)).scrollIntoView();
57
- }
58
- }
59
- if (dir === Direction.DOWN && selection.$from.nodeAfter) {
60
- const nodeAfterPos = selection.side === 'right' ? $pos.pos : $pos.pos + selection.$from.nodeAfter.nodeSize;
61
- if (nodeAfterPos) {
62
- tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeAfterPos), Side.LEFT)).scrollIntoView();
63
- }
64
- }
65
- return tr;
66
- }
67
- export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
68
- const {
69
- doc,
70
- selection,
71
- tr
72
- } = state;
73
- let $pos = isBackward(dir) ? selection.$from : selection.$to;
74
- let mustMove = selection.empty;
75
-
76
- // start from text selection
77
- if (selection instanceof TextSelection) {
78
- // if cursor is in the middle of a text node, do nothing
79
- if (!endOfTextblock || !endOfTextblock(dir.toString())) {
80
- return false;
81
- }
82
-
83
- // UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
84
- if (shouldSkipGapCursor(dir, state, $pos)) {
85
- return false;
86
- }
87
-
88
- // otherwise resolve previous/next position
89
- $pos = doc.resolve(isBackward(dir) ? $pos.before() : $pos.after());
90
- mustMove = false;
91
- }
92
- if (selection instanceof NodeSelection) {
93
- if (selection.node.isInline) {
94
- return false;
95
- }
96
- if (dir === Direction.UP && !atTheBeginningOfDoc(state) && !isNodeBeforeMediaNode($pos, state) || dir === Direction.DOWN) {
97
- // We dont add gap cursor on node selections going up and down
98
- // Except we do if we're going up for a block node which is the
99
- // first node in the document OR the node before is a media node
100
- return false;
101
- }
102
- }
103
-
104
- // Handle media gap cursor for up/down arrow into media nodes
105
- if (shouldHandleMediaGapCursor(dir, state)) {
106
- const updatedTr = handleMediaGapCursor(dir, state);
107
- if (dispatch) {
108
- dispatch(updatedTr);
109
- }
110
- return true;
111
- }
112
-
113
- // when jumping between block nodes at the same depth, we need to reverse cursor without changing ProseMirror position
114
- if (selection instanceof GapCursorSelection &&
115
- // next node allow gap cursor position
116
- isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && (
117
- // gap cursor changes block node
118
- isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
119
- // reverse cursor position
120
- if (dispatch) {
121
- dispatch(tr.setSelection(new GapCursorSelection($pos, selection.side === Side.RIGHT ? Side.LEFT : Side.RIGHT)).scrollIntoView());
122
- }
123
- return true;
124
- }
125
- if (view) {
126
- const domAtPos = view.domAtPos.bind(view);
127
- const target = findDomRefAtPos($pos.pos, domAtPos);
128
- if (target && target.textContent === ZERO_WIDTH_SPACE) {
129
- return false;
130
- }
131
- }
132
- const nextSelection = GapCursorSelection.findFrom($pos, isBackward(dir) ? -1 : 1, mustMove);
133
- if (!nextSelection) {
134
- return false;
135
- }
136
- if (!isValidTargetNode(isForward(dir) ? nextSelection.$from.nodeBefore : nextSelection.$from.nodeAfter)) {
137
- // reverse cursor position
138
- if (dispatch) {
139
- dispatch(tr.setSelection(new GapCursorSelection(nextSelection.$from, isForward(dir) ? Side.LEFT : Side.RIGHT)).scrollIntoView());
140
- }
141
- return true;
142
- }
143
- if (dispatch) {
144
- dispatch(tr.setSelection(nextSelection).scrollIntoView());
145
- }
146
- return true;
147
- };
148
- export const deleteNode = dir => (state, dispatch) => {
149
- if (state.selection instanceof GapCursorSelection) {
150
- const {
151
- $from,
152
- $anchor
153
- } = state.selection;
154
- let {
155
- tr
156
- } = state;
157
- if (isBackward(dir)) {
158
- if (state.selection.side === 'left') {
159
- tr.setSelection(new GapCursorSelection($anchor, Side.RIGHT));
160
- if (dispatch) {
161
- dispatch(tr);
162
- }
163
- return true;
164
- }
165
- tr = removeNodeBefore(state.tr);
166
- } else if ($from.nodeAfter) {
167
- tr = tr.delete($from.pos, $from.pos + $from.nodeAfter.nodeSize);
168
- }
169
- if (dispatch) {
170
- dispatch(tr.setSelection(Selection.near(tr.doc.resolve(tr.mapping.map(state.selection.$from.pos)))).scrollIntoView());
171
- }
172
- return true;
173
- }
174
- return false;
175
- };
176
- export const setGapCursorAtPos = (position, side = Side.LEFT) => (state, dispatch) => {
177
- // @see ED-6231
178
- if (position > state.doc.content.size) {
179
- return false;
180
- }
181
- const $pos = state.doc.resolve(position);
182
- if (GapCursorSelection.valid($pos)) {
183
- if (dispatch) {
184
- dispatch(state.tr.setSelection(new GapCursorSelection($pos, side)));
185
- }
186
- return true;
187
- }
188
- return false;
189
- };
190
-
191
- // This function captures clicks outside of the ProseMirror contentEditable area
192
- // see also description of "handleClick" in gap-cursor pm-plugin
193
- const captureCursorCoords = (event, editorRef, posAtCoords, tr) => {
194
- const rect = editorRef.getBoundingClientRect();
195
-
196
- // capture clicks before the first block element
197
- if (event.clientY < rect.top) {
198
- return {
199
- position: 0,
200
- side: Side.LEFT
201
- };
202
- }
203
- if (rect.left > 0) {
204
- // calculate start position of a node that is vertically at the same level
205
- const coords = posAtCoords({
206
- left: rect.left,
207
- top: event.clientY
208
- });
209
- if (coords && coords.inside > -1) {
210
- const $from = tr.doc.resolve(coords.inside);
211
- const start = $from.before(1);
212
- const side = event.clientX < rect.left ? Side.LEFT : Side.RIGHT;
213
- let position;
214
- if (side === Side.LEFT) {
215
- position = start;
216
- } else {
217
- const node = tr.doc.nodeAt(start);
218
- if (node) {
219
- position = start + node.nodeSize;
220
- }
221
- }
222
- return {
223
- position,
224
- side
225
- };
226
- }
227
- }
228
- return null;
229
- };
230
- export const setSelectionTopLevelBlocks = (tr, event, editorRef, posAtCoords, editorFocused) => {
231
- const cursorCoords = captureCursorCoords(event, editorRef, posAtCoords, tr);
232
- if (!cursorCoords) {
233
- return;
234
- }
235
- const $pos = cursorCoords.position !== undefined ? tr.doc.resolve(cursorCoords.position) : null;
236
- if ($pos === null) {
237
- return;
238
- }
239
- const isGapCursorAllowed = cursorCoords.side === Side.LEFT ? isValidTargetNode($pos.nodeAfter) : isValidTargetNode($pos.nodeBefore);
240
- if (isGapCursorAllowed && GapCursorSelection.valid($pos)) {
241
- // this forces PM to re-render the decoration node if we change the side of the gap cursor, it doesn't do it by default
242
- if (tr.selection instanceof GapCursorSelection) {
243
- tr.setSelection(Selection.near($pos));
244
- } else {
245
- tr.setSelection(new GapCursorSelection($pos, cursorCoords.side));
246
- }
247
- }
248
- // try to set text selection if the editor isnt focused
249
- // if the editor is focused, we are most likely dragging a selection outside.
250
- else if (editorFocused === false) {
251
- const selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
252
- if (selectionTemp) {
253
- tr.setSelection(selectionTemp);
254
- }
255
- }
256
- };
257
- export const setCursorForTopLevelBlocks = (event, editorRef, posAtCoords, editorFocused) => (state, dispatch) => {
258
- const {
259
- tr
260
- } = state;
261
- setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused);
262
- if (tr.selectionSet && dispatch) {
263
- dispatch(tr);
264
- return true;
265
- }
266
- return false;
267
- };
268
- export const hasGapCursorPlugin = state => {
269
- return Boolean(gapCursorPluginKey.get(state));
270
- };
@@ -1,15 +0,0 @@
1
- export let Direction = /*#__PURE__*/function (Direction) {
2
- Direction["UP"] = "up";
3
- Direction["RIGHT"] = "right";
4
- Direction["DOWN"] = "down";
5
- Direction["LEFT"] = "left";
6
- Direction["BACKWARD"] = "backward";
7
- Direction["FORWARD"] = "forward";
8
- return Direction;
9
- }({});
10
- export function isBackward(dir) {
11
- return [Direction.UP, Direction.LEFT, Direction.BACKWARD].indexOf(dir) !== -1;
12
- }
13
- export function isForward(dir) {
14
- return [Direction.RIGHT, Direction.DOWN, Direction.FORWARD].indexOf(dir) !== -1;
15
- }
@@ -1 +0,0 @@
1
- export { GapCursorSelection, JSON_ID, Side, GapBookmark } from '@atlaskit/editor-common/selection';
@@ -1,145 +0,0 @@
1
- import { css, keyframes } from '@emotion/react';
2
- const gapCursorBlink = keyframes`
3
- from, to {
4
- opacity: 0;
5
- }
6
- 50% {
7
- opacity: 1;
8
- }
9
- `;
10
- export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
11
- const gapCursor = '.ProseMirror-gapcursor';
12
- const prosemirrorwidget = '.ProseMirror-widget';
13
- const wrapLeft = '[layout="wrap-left"]';
14
- const wrapRight = '[layout="wrap-right"]';
15
- export const gapCursorStyles = css`
16
- /* =============== GAP CURSOR ================== */
17
- .ProseMirror {
18
- &.${hideCaretModifier} {
19
- caret-color: transparent;
20
- }
21
-
22
- ${gapCursor} {
23
- display: none;
24
- pointer-events: none;
25
- position: relative;
26
-
27
- & span {
28
- caret-color: transparent;
29
- position: absolute;
30
- height: 100%;
31
- width: 100%;
32
- display: block;
33
- }
34
-
35
- & span::after {
36
- animation: 1s ${gapCursorBlink} step-end infinite;
37
- border-left: 1px solid;
38
- content: '';
39
- display: block;
40
- position: absolute;
41
- top: 0;
42
- height: 100%;
43
- }
44
- &.-left span::after {
45
- left: -3px;
46
- }
47
- &.-right span::after {
48
- right: -3px;
49
- }
50
- & span[layout='full-width'],
51
- & span[layout='wide'],
52
- & span[layout='fixed-width'] {
53
- margin-left: 50%;
54
- transform: translateX(-50%);
55
- }
56
- &${wrapRight} {
57
- float: right;
58
- }
59
-
60
- /* fix vertical alignment of gap cursor */
61
- &:first-of-type + ul,
62
- &:first-of-type + span + ul,
63
- &:first-of-type + ol,
64
- &:first-of-type + span + ol,
65
- &:first-of-type + pre,
66
- &:first-of-type + span + pre,
67
- &:first-of-type + blockquote,
68
- &:first-of-type + span + blockquote {
69
- margin-top: 0;
70
- }
71
- }
72
- &.ProseMirror-focused ${gapCursor} {
73
- display: block;
74
- border-color: transparent;
75
- }
76
- }
77
-
78
- /* This hack below is for two images aligned side by side */
79
- ${gapCursor}${wrapLeft} + span + ${wrapLeft},
80
- ${gapCursor}${wrapRight} + span + ${wrapRight},
81
- ${gapCursor} + ${wrapLeft} + ${wrapRight},
82
- ${gapCursor} + ${wrapLeft} + span + ${wrapRight},
83
- ${gapCursor} + ${wrapRight} + ${wrapLeft},
84
- ${gapCursor} + ${wrapRight} + span + ${wrapLeft},
85
- ${wrapLeft} + ${gapCursor} + ${wrapRight},
86
- ${wrapLeft} + ${gapCursor} + span ${wrapRight},
87
- ${wrapRight} + ${gapCursor} + ${wrapLeft},
88
- ${wrapRight} + ${gapCursor} + span + ${wrapLeft},
89
- ${wrapLeft} + ${gapCursor} {
90
- clear: none;
91
- }
92
-
93
- ${wrapLeft} + ${gapCursor} + ${wrapRight} > div,
94
- ${wrapLeft} + ${gapCursor} + span + ${wrapRight} > div,
95
- ${wrapRight} + ${gapCursor} + ${wrapLeft} > div,
96
- ${wrapRight} + ${gapCursor} + span + ${wrapLeft} > div,
97
- ${gapCursor} + ${wrapRight} + ${wrapLeft} > div,
98
- ${gapCursor} + ${wrapRight} + span + ${wrapLeft} > div,
99
- ${gapCursor} + ${wrapLeft} + ${wrapRight} > div,
100
- ${gapCursor} + ${wrapLeft} + span + ${wrapRight} > div {
101
- margin-right: 0;
102
- margin-left: 0;
103
- margin-bottom: 0;
104
- }
105
-
106
- ${wrapLeft} + ${gapCursor},
107
- ${wrapRight} + ${gapCursor} {
108
- float: left;
109
- }
110
-
111
- ${gapCursor} + ${wrapLeft} + span + ${wrapRight}::after,
112
- ${gapCursor} + ${wrapRight} + span + ${wrapLeft}::after,
113
- ${wrapLeft} + ${gapCursor} + ${wrapRight}::after,
114
- ${wrapLeft} + ${gapCursor} + span + ${wrapRight}::after,
115
- ${wrapRight} + ${gapCursor} + ${wrapLeft}::after,
116
- ${wrapRight} + ${gapCursor} + span + ${wrapLeft}::after {
117
- visibility: hidden;
118
- display: block;
119
- font-size: 0;
120
- content: ' ';
121
- clear: both;
122
- height: 0;
123
- }
124
-
125
- ${wrapLeft} + ${gapCursor} + ${wrapRight} + *,
126
- ${wrapLeft} + ${gapCursor} + ${wrapRight} + span + *,
127
- ${wrapRight} + ${gapCursor} + ${wrapLeft} + *,
128
- ${wrapRight} + ${gapCursor} + ${wrapLeft} + span + *,
129
- ${wrapLeft} + ${gapCursor} + span + ${wrapRight} + *,
130
- ${wrapRight} + ${gapCursor} + span + ${wrapLeft} + *,
131
- ${gapCursor} + ${wrapLeft} + span + ${wrapRight} + *,
132
- ${gapCursor} + ${wrapRight} + span + ${wrapLeft} + *,
133
- ${wrapLeft} + ${gapCursor} + ${wrapRight} + * > *,
134
- ${wrapLeft} + ${gapCursor} + ${wrapRight} + span + * > *,
135
- ${wrapRight} + ${gapCursor} + ${wrapLeft} + * > *,
136
- ${wrapRight} + ${gapCursor} + ${wrapLeft} + span + * > *,
137
- ${wrapLeft} + ${gapCursor} + span + ${wrapRight} + * > *,
138
- ${wrapRight} + ${gapCursor} + span + ${wrapLeft} + * > *,
139
- ${gapCursor} + ${wrapLeft} + span + ${wrapRight} + * > *,
140
- ${gapCursor} + ${wrapRight} + span + ${wrapLeft} + * > *,
141
- ${prosemirrorwidget} + ${gapCursor} + *,
142
- ${prosemirrorwidget} + ${gapCursor} + span + * {
143
- margin-top: 0;
144
- }
145
- `;
@@ -1 +0,0 @@
1
- export { isIgnored } from '@atlaskit/editor-common/selection';
@@ -1 +0,0 @@
1
- export { isValidTargetNode } from '@atlaskit/editor-common/selection';
@@ -1,94 +0,0 @@
1
- import { getLayoutModeFromTargetNode, isLeftCursor, getComputedStyleForLayoutMode } from '../utils';
2
- import { Side } from '@atlaskit/editor-common/selection';
3
-
4
- /**
5
- * We have a couple of nodes that require us to compute style
6
- * on different elements, ideally all nodes should be able to
7
- * compute the appropriate styles based on their wrapper.
8
- */
9
- const nestedCases = {
10
- 'tableView-content-wrap': 'table',
11
- 'mediaSingleView-content-wrap': '.rich-media-item',
12
- 'bodiedExtensionView-content-wrap': '.extension-container',
13
- 'embedCardView-content-wrap': '.rich-media-item',
14
- 'datasourceView-content-wrap': '.datasourceView-content-inner-wrap'
15
- };
16
- const computeNestedStyle = dom => {
17
- const foundKey = Object.keys(nestedCases).find(className => dom.classList.contains(className));
18
- const nestedSelector = foundKey && nestedCases[foundKey];
19
- if (nestedSelector) {
20
- const nestedElement = dom.querySelector(nestedSelector);
21
- if (nestedElement) {
22
- return window.getComputedStyle(nestedElement);
23
- }
24
- }
25
- };
26
- const measureHeight = style => {
27
- return measureValue(style, ['height', 'padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width']);
28
- };
29
- const measureWidth = style => {
30
- return measureValue(style, ['width', 'padding-left', 'padding-right', 'border-left-width', 'border-right-width']);
31
- };
32
- const measureValue = (style, measureValues) => {
33
- const [base, ...contentBoxValues] = measureValues;
34
- const measures = [style.getPropertyValue(base)];
35
- const boxSizing = style.getPropertyValue('box-sizing');
36
- if (boxSizing === 'content-box') {
37
- contentBoxValues.forEach(value => {
38
- measures.push(style.getPropertyValue(value));
39
- });
40
- }
41
- let result = 0;
42
- for (let i = 0; i < measures.length; i++) {
43
- result += parseFloat(measures[i]);
44
- }
45
- return result;
46
- };
47
- const mutateElementStyle = (element, style, side) => {
48
- element.style.transform = style.getPropertyValue('transform');
49
- if (isLeftCursor(side)) {
50
- element.style.width = style.getPropertyValue('width');
51
- element.style.marginLeft = style.getPropertyValue('margin-left');
52
- } else {
53
- const marginRight = parseFloat(style.getPropertyValue('margin-right'));
54
- if (marginRight > 0) {
55
- element.style.marginLeft = `-${Math.abs(marginRight)}px`;
56
- } else {
57
- element.style.paddingRight = `${Math.abs(marginRight)}px`;
58
- }
59
- }
60
- };
61
- export const toDOM = (view, getPos) => {
62
- const selection = view.state.selection;
63
- const {
64
- $from,
65
- side
66
- } = selection;
67
- const isRightCursor = side === Side.RIGHT;
68
- const node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
69
- const nodeStart = getPos();
70
- // @ts-ignore - [unblock prosemirror bump] nodeStart can be undefined
71
- const dom = view.nodeDOM(nodeStart);
72
- const element = document.createElement('span');
73
- element.className = `ProseMirror-gapcursor ${isRightCursor ? '-right' : '-left'}`;
74
- element.appendChild(document.createElement('span'));
75
- if (dom instanceof HTMLElement && element.firstChild) {
76
- const style = computeNestedStyle(dom) || window.getComputedStyle(dom);
77
- const gapCursor = element.firstChild;
78
- gapCursor.style.height = `${measureHeight(style)}px`;
79
- const layoutMode = node && getLayoutModeFromTargetNode(node);
80
-
81
- // TODO remove this table specific piece. need to figure out margin collapsing logic
82
- if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
83
- gapCursor.style.marginTop = style.getPropertyValue('margin-top');
84
- }
85
- if (layoutMode) {
86
- gapCursor.setAttribute('layout', layoutMode);
87
- const breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
88
- gapCursor.style.width = `${measureWidth(breakoutModeStyle)}px`;
89
- } else {
90
- mutateElementStyle(gapCursor, style, selection.side);
91
- }
92
- }
93
- return element;
94
- };
@@ -1,124 +0,0 @@
1
- import { TableSharedCssClassName, UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles';
2
- import { Side } from './selection';
3
- import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
4
- export const isLeftCursor = side => side === Side.LEFT;
5
- export function getMediaNearPos(doc, $pos, schema, dir = -1) {
6
- let $currentPos = $pos;
7
- let currentNode = null;
8
- const {
9
- mediaSingle,
10
- media,
11
- mediaGroup
12
- } = schema.nodes;
13
- do {
14
- $currentPos = doc.resolve(dir === -1 ? $currentPos.before() : $currentPos.after());
15
- if (!$currentPos) {
16
- return null;
17
- }
18
- currentNode = (dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter) || $currentPos.parent;
19
- if (!currentNode || currentNode.type === schema.nodes.doc) {
20
- return null;
21
- }
22
- if (currentNode.type === mediaSingle || currentNode.type === media || currentNode.type === mediaGroup) {
23
- return currentNode;
24
- }
25
- } while ($currentPos.depth > 0);
26
- return null;
27
- }
28
- export const isTextBlockNearPos = (doc, schema, $pos, dir) => {
29
- let $currentPos = $pos;
30
- let currentNode = dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter;
31
-
32
- // If next node is a text or a text block bail out early.
33
- if (currentNode && (currentNode.isTextblock || currentNode.isText)) {
34
- return true;
35
- }
36
- while ($currentPos.depth > 0) {
37
- $currentPos = doc.resolve(dir === -1 ? $currentPos.before() : $currentPos.after());
38
- if (!$currentPos) {
39
- return false;
40
- }
41
- currentNode = (dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter) || $currentPos.parent;
42
- if (!currentNode || currentNode.type === schema.nodes.doc) {
43
- return false;
44
- }
45
- if (currentNode.isTextblock) {
46
- return true;
47
- }
48
- }
49
- let childNode = currentNode;
50
- while (childNode && childNode.firstChild) {
51
- childNode = childNode.firstChild;
52
- if (childNode && (childNode.isTextblock || childNode.isText)) {
53
- return true;
54
- }
55
- }
56
- return false;
57
- };
58
- export function getLayoutModeFromTargetNode(node) {
59
- let layout;
60
- if (node.attrs.layout) {
61
- layout = node.attrs.layout;
62
- }
63
- if (node.marks && node.marks.length) {
64
- layout = (node.marks.find(mark => mark.type.name === 'breakout') || {
65
- attrs: {
66
- mode: ''
67
- }
68
- }).attrs.mode;
69
- }
70
- if (node.type.name === 'table' && node.attrs.width) {
71
- layout = 'fixed-width';
72
- }
73
- if (['wide', 'full-width', 'fixed-width'].indexOf(layout) === -1) {
74
- return '';
75
- }
76
- return layout;
77
- }
78
- export const isIgnoredClick = elem => {
79
- if (elem.nodeName === 'BUTTON' || elem.closest('button')) {
80
- return true;
81
- }
82
-
83
- // check if we're clicking an image caption placeholder
84
- if (elem.closest(`[data-id="${CAPTION_PLACEHOLDER_ID}"]`)) {
85
- return true;
86
- }
87
-
88
- // check if target node has a parent table node
89
- let tableWrap;
90
- let node = elem;
91
- while (node) {
92
- if (node.className && (node.getAttribute('class') || '').indexOf(TableSharedCssClassName.TABLE_CONTAINER) > -1) {
93
- tableWrap = node;
94
- break;
95
- }
96
- node = node.parentNode;
97
- }
98
- if (tableWrap) {
99
- const rowControls = tableWrap.querySelector(`.${TableSharedCssClassName.TABLE_ROW_CONTROLS_WRAPPER}`);
100
- const isColumnControlsDecoration = elem && elem.classList && elem.classList.contains(TableSharedCssClassName.TABLE_COLUMN_CONTROLS_DECORATIONS);
101
- return rowControls && rowControls.contains(elem) || isColumnControlsDecoration;
102
- }
103
-
104
- // Check if unsupported node selection
105
- // (without this, selection requires double clicking in FF due to posAtCoords differences)
106
- if (elem.closest(`.${UnsupportedSharedCssClassName.BLOCK_CONTAINER}`)) {
107
- return true;
108
- }
109
- return false;
110
- };
111
-
112
- /*
113
- Calculates custom style for breakout mode
114
- Mainly to handle table width to include the numbered column width as well
115
- */
116
- export const getComputedStyleForLayoutMode = (dom, node, style) => {
117
- if (node && node.type.name === 'table') {
118
- const tableContainer = dom.querySelector('.pm-table-container');
119
- if (tableContainer) {
120
- return window.getComputedStyle(tableContainer);
121
- }
122
- }
123
- return style;
124
- };
@@ -1,2 +0,0 @@
1
- export { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
2
- export { setCursorForTopLevelBlocks, setSelectionTopLevelBlocks, hasGapCursorPlugin } from './gap-cursor/actions';