@atlaskit/editor-plugin-find-replace 2.9.0 → 2.10.1

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 (18) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/pm-plugins/commands.js +2 -2
  3. package/dist/cjs/pm-plugins/plugin-factory.js +2 -1
  4. package/dist/cjs/pm-plugins/utils/index.js +45 -39
  5. package/dist/cjs/ui/styles.js +42 -12
  6. package/dist/es2019/pm-plugins/commands.js +2 -2
  7. package/dist/es2019/pm-plugins/plugin-factory.js +2 -1
  8. package/dist/es2019/pm-plugins/utils/index.js +43 -38
  9. package/dist/es2019/ui/styles.js +92 -8
  10. package/dist/esm/pm-plugins/commands.js +2 -2
  11. package/dist/esm/pm-plugins/plugin-factory.js +2 -1
  12. package/dist/esm/pm-plugins/utils/index.js +44 -38
  13. package/dist/esm/ui/styles.js +41 -9
  14. package/dist/types/pm-plugins/utils/index.d.ts +1 -1
  15. package/dist/types/ui/styles.d.ts +2 -0
  16. package/dist/types-ts4.5/pm-plugins/utils/index.d.ts +1 -1
  17. package/dist/types-ts4.5/ui/styles.d.ts +2 -0
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-find-replace
2
2
 
3
+ ## 2.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#177994](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177994)
8
+ [`f19d2fadee3a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f19d2fadee3a8) -
9
+ [ux] [ED-28377] convert borders to boxShadows to prevent a layout shift while Finding with the
10
+ platform_editor_find_and_replace_improvements experiment
11
+
12
+ ## 2.10.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#175370](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175370)
17
+ [`fb5f9531ef9d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb5f9531ef9d8) -
18
+ [ux] [ED-27956] this PR is adding support for Find with expand titles and updating the search
19
+ match styles behind the experiment `platform_editor_find_and_replace_improvements`
20
+
3
21
  ## 2.9.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/pm-plugins/commands.js CHANGED
@@ -278,10 +278,10 @@ var updateSelectedHighlight = function updateSelectedHighlight(state, nextSelect
278
278
  decorationSet = (0, _utils.removeDecorationsFromSet)(decorationSet, decorationsToRemove, state.doc);
279
279
  }
280
280
  if (currentSelectedMatch) {
281
- decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(currentSelectedMatch.start, currentSelectedMatch.end, false, (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? currentSelectedMatch.nodeType : undefined)]);
281
+ decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(currentSelectedMatch)]);
282
282
  }
283
283
  if (nextSelectedMatch) {
284
- decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(nextSelectedMatch.start, nextSelectedMatch.end, true, (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? nextSelectedMatch.nodeType : undefined)]);
284
+ decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(nextSelectedMatch, true)]);
285
285
  }
286
286
  return decorationSet;
287
287
  };
package/dist/cjs/pm-plugins/plugin-factory.js CHANGED
@@ -49,7 +49,8 @@ var handleDocChanged = function handleDocChanged(tr, pluginState) {
49
49
  return {
50
50
  start: tr.mapping.map(match.start),
51
51
  end: tr.mapping.map(match.end),
52
- canReplace: match.canReplace
52
+ canReplace: match.canReplace,
53
+ nodeType: match.nodeType
53
54
  };
54
55
  });
55
56
  var matchesToAdd = [];
package/dist/cjs/pm-plugins/utils/index.js CHANGED
@@ -10,7 +10,7 @@ exports.findSearchIndex = findSearchIndex;
10
10
  exports.getSelectedText = getSelectedText;
11
11
  exports.removeMatchesFromSet = exports.removeDecorationsFromSet = exports.prevIndex = exports.nextIndex = exports.isMatchAffectedByStep = exports.getSelectionForMatch = void 0;
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
- var _classnames3 = _interopRequireDefault(require("classnames"));
13
+ var _classnames4 = _interopRequireDefault(require("classnames"));
14
14
  var _utils = require("@atlaskit/editor-common/utils");
15
15
  var _state = require("@atlaskit/editor-prosemirror/state");
16
16
  var _view = require("@atlaskit/editor-prosemirror/view");
@@ -31,35 +31,52 @@ var createDecorations = exports.createDecorations = function createDecorations(s
31
31
  return matches.map(function (_ref, i) {
32
32
  var start = _ref.start,
33
33
  end = _ref.end,
34
+ canReplace = _ref.canReplace,
34
35
  nodeType = _ref.nodeType;
35
- return createDecoration(start, end, i === selectedIndex, nodeType);
36
+ return createDecoration({
37
+ start: start,
38
+ end: end,
39
+ canReplace: canReplace,
40
+ nodeType: nodeType
41
+ }, i === selectedIndex);
36
42
  });
37
43
  };
38
44
  var isElement = function isElement(nodeType) {
39
- return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
45
+ return ['blockCard', 'embedCard', 'inlineCard', 'status', 'mention', 'date'].includes(nodeType || '');
40
46
  };
41
- var createDecoration = exports.createDecoration = function createDecoration(start, end, isSelected, nodeType) {
47
+ var isExpandTitle = function isExpandTitle(match) {
48
+ return ['expand', 'nestedExpand'].includes(match.nodeType || '') && !match.canReplace;
49
+ };
50
+ var createDecoration = exports.createDecoration = function createDecoration(match, isSelected) {
51
+ var start = match.start,
52
+ end = match.end,
53
+ nodeType = match.nodeType;
42
54
  if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
43
55
  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
44
56
  colorMode = _getGlobalTheme.colorMode;
45
57
  if (isElement(nodeType)) {
46
- var className = (0, _classnames3.default)(_styles.blockSearchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedBlockSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
58
+ var className = (0, _classnames4.default)(_styles.blockSearchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedBlockSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
47
59
  return _view.Decoration.node(start, end, {
48
60
  class: className
49
61
  });
62
+ } else if (isExpandTitle(match)) {
63
+ var _className = (0, _classnames4.default)(_styles.searchMatchExpandTitleClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
64
+ return _view.Decoration.node(start, end, {
65
+ class: _className
66
+ });
50
67
  } else {
51
- var _className = (0, _classnames3.default)(_styles.searchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
68
+ var _className2 = (0, _classnames4.default)(_styles.searchMatchTextClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
52
69
  return _view.Decoration.inline(start, end, {
53
- class: _className
70
+ class: _className2
54
71
  });
55
72
  }
56
73
  } else {
57
- var _className2 = _styles.searchMatchClass;
74
+ var _className3 = _styles.searchMatchClass;
58
75
  if (isSelected) {
59
- _className2 += " ".concat(_styles.selectedSearchMatchClass);
76
+ _className3 += " ".concat(_styles.selectedSearchMatchClass);
60
77
  }
61
78
  return _view.Decoration.inline(start, end, {
62
- class: _className2
79
+ class: _className3
63
80
  });
64
81
  }
65
82
  };
@@ -99,45 +116,23 @@ function findMatches(_ref2) {
99
116
  index = text.indexOf(searchText, end);
100
117
  }
101
118
  };
102
- var collectStatusMatch = function collectStatusMatch(textGrouping, nodeSize) {
119
+ var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
103
120
  if (!textGrouping) {
104
121
  return;
105
122
  }
106
123
  var pos = textGrouping.pos;
107
124
  var text = textGrouping.text;
108
- if (shouldMatchCase) {
125
+ if (node.type.name === 'status' && shouldMatchCase) {
109
126
  text = text.toUpperCase();
110
- } else {
127
+ } else if (!shouldMatchCase) {
111
128
  text = text.toLowerCase();
112
129
  searchText = searchText.toLowerCase();
113
130
  }
114
131
  var index = text.indexOf(searchText);
115
132
  if (index !== -1) {
116
- var start = pos;
117
133
  matches.push({
118
- start: start,
119
- end: start + nodeSize,
120
- canReplace: false,
121
- nodeType: 'status'
122
- });
123
- }
124
- };
125
- var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
126
- if (!textGrouping) {
127
- return;
128
- }
129
- var text = textGrouping.text;
130
- var pos = textGrouping.pos;
131
- if (!shouldMatchCase) {
132
- searchText = searchText.toLowerCase();
133
- text = text.toLowerCase();
134
- }
135
- var index = text.indexOf(searchText);
136
- if (index !== -1) {
137
- var start = pos;
138
- matches.push({
139
- start: start,
140
- end: start + node.nodeSize,
134
+ start: pos,
135
+ end: pos + node.nodeSize,
141
136
  canReplace: false,
142
137
  nodeType: node.type.name
143
138
  });
@@ -187,10 +182,10 @@ function findMatches(_ref2) {
187
182
  if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
188
183
  switch (node.type.name) {
189
184
  case 'status':
190
- collectStatusMatch({
185
+ collectNodeMatch({
191
186
  text: node.attrs.text,
192
187
  pos: pos
193
- }, node.nodeSize);
188
+ }, node);
194
189
  break;
195
190
  case 'date':
196
191
  collectNodeMatch({
@@ -198,6 +193,13 @@ function findMatches(_ref2) {
198
193
  pos: pos
199
194
  }, node);
200
195
  break;
196
+ case 'expand':
197
+ case 'nestedExpand':
198
+ collectNodeMatch({
199
+ text: node.attrs.title,
200
+ pos: pos
201
+ }, node);
202
+ break;
201
203
  case 'mention':
202
204
  var text;
203
205
  if (node.attrs.text) {
@@ -274,6 +276,10 @@ var prevIndex = exports.prevIndex = function prevIndex(currentIndex, total) {
274
276
  var getSelectionForMatch = exports.getSelectionForMatch = function getSelectionForMatch(selection, doc, index, matches) {
275
277
  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
276
278
  if (matches[index]) {
279
+ if (isExpandTitle(matches[index])) {
280
+ // create a text selection at the first position inside the expand body
281
+ return _state.TextSelection.create(doc, matches[index].start + offset - 2);
282
+ }
277
283
  return _state.TextSelection.create(doc, matches[index].start + offset);
278
284
  }
279
285
  return selection;
package/dist/cjs/ui/styles.js CHANGED
@@ -4,22 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.selectedSearchMatchClass = exports.selectedBlockSearchMatchClass = exports.searchMatchClass = exports.findReplaceStylesNew = exports.findReplaceStyles = exports.darkModeSearchMatchClass = exports.blockSearchMatchClass = void 0;
7
+ exports.selectedSearchMatchClass = exports.selectedBlockSearchMatchClass = exports.searchMatchTextClass = exports.searchMatchExpandTitleClass = exports.searchMatchClass = exports.findReplaceStylesNew = exports.findReplaceStyles = exports.darkModeSearchMatchClass = exports.blockSearchMatchClass = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _colors = require("@atlaskit/theme/colors");
11
+ var _styles = require("@atlaskit/editor-common/styles");
12
+ var _css2;
11
13
  /* eslint-disable @atlaskit/editor/no-re-export */
12
14
  // Entry file in package.json
13
-
14
15
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
15
16
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
16
17
  /* eslint-disable */
17
-
18
18
  var searchMatchClass = exports.searchMatchClass = 'search-match';
19
+ var searchMatchTextClass = exports.searchMatchTextClass = 'search-match-text';
19
20
  var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
20
21
  var blockSearchMatchClass = exports.blockSearchMatchClass = 'search-match-block';
21
22
  var selectedBlockSearchMatchClass = exports.selectedBlockSearchMatchClass = 'search-match-block-selected';
22
23
  var darkModeSearchMatchClass = exports.darkModeSearchMatchClass = 'search-match-dark';
24
+ var searchMatchExpandTitleClass = exports.searchMatchExpandTitleClass = 'search-match-expand-title';
23
25
  var inlineCardSelector = '.loader-wrapper>a';
24
26
  var statusSelector = '.lozenge-wrapper';
25
27
  var mentionSelector = '.editor-mention-primitive';
@@ -31,12 +33,22 @@ var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)((0, _defineP
31
33
  }), ".".concat(selectedSearchMatchClass), {
32
34
  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
33
35
  }));
34
- var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(searchMatchClass), {
35
- borderRadius: '3px',
36
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
37
- boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
38
- }), ".".concat(selectedSearchMatchClass), {
39
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
36
+ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css2, ".".concat(searchMatchTextClass), {
37
+ borderRadius: "var(--ds-space-050, 4px)",
38
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
39
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t"),
40
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
41
+ color: "var(--ds-text, #172B4D)"
42
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass), {
43
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t"),
44
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
45
+ }), ".".concat(searchMatchTextClass, ".").concat(darkModeSearchMatchClass), {
46
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t"),
47
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
48
+ color: "var(--ds-text-inverse, #FFFFFF)"
49
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
50
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t"),
51
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
40
52
  }), ".".concat(blockSearchMatchClass), (0, _defineProperty2.default)({
41
53
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
42
54
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
@@ -59,7 +71,7 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _d
59
71
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
60
72
  }
61
73
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
62
- // TODO: will clean up !important later
74
+ // TODO: ED-28376 - clean up !important later
63
75
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
64
76
  })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
65
77
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -67,7 +79,7 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _d
67
79
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
68
80
  }
69
81
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
70
- // TODO: will clean up !important later
82
+ // TODO: ED-28376 - clean up !important later
71
83
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
72
84
  })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), (0, _defineProperty2.default)({
73
85
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -85,7 +97,7 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _d
85
97
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
86
98
  boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
87
99
  borderRadius: '3px'
88
- })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
100
+ })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css2, ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
89
101
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
90
102
  '.loader-wrapper>div::after': {
91
103
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
@@ -99,4 +111,22 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _d
99
111
  }
100
112
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
101
113
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
114
+ })), ".".concat(searchMatchExpandTitleClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), (0, _defineProperty2.default)({
115
+ borderRadius: "var(--ds-space-050, 4px)",
116
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
117
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t"),
118
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)"
119
+ }, ".".concat(_styles.expandClassNames.titleInput), {
120
+ color: "var(--ds-text, #172B4D)"
121
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), {
122
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t"),
123
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
124
+ }), ".".concat(searchMatchExpandTitleClass, ".").concat(darkModeSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), (0, _defineProperty2.default)({
125
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t"),
126
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
127
+ }, ".".concat(_styles.expandClassNames.titleInput), {
128
+ color: "var(--ds-text-inverse, #FFFFFF)"
129
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), {
130
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t"),
131
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
102
132
  })));
package/dist/es2019/pm-plugins/commands.js CHANGED
@@ -264,10 +264,10 @@ const updateSelectedHighlight = (state, nextSelectedIndex) => {
264
264
  decorationSet = removeDecorationsFromSet(decorationSet, decorationsToRemove, state.doc);
265
265
  }
266
266
  if (currentSelectedMatch) {
267
- decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch.start, currentSelectedMatch.end, false, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? currentSelectedMatch.nodeType : undefined)]);
267
+ decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch)]);
268
268
  }
269
269
  if (nextSelectedMatch) {
270
- decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? nextSelectedMatch.nodeType : undefined)]);
270
+ decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch, true)]);
271
271
  }
272
272
  return decorationSet;
273
273
  };
package/dist/es2019/pm-plugins/plugin-factory.js CHANGED
@@ -40,7 +40,8 @@ const handleDocChanged = (tr, pluginState) => {
40
40
  const mappedMatches = matches.map(match => ({
41
41
  start: tr.mapping.map(match.start),
42
42
  end: tr.mapping.map(match.end),
43
- canReplace: match.canReplace
43
+ canReplace: match.canReplace,
44
+ nodeType: match.nodeType
44
45
  }));
45
46
  let matchesToAdd = [];
46
47
  let matchesToDelete = [];
package/dist/es2019/pm-plugins/utils/index.js CHANGED
@@ -6,7 +6,7 @@ import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
6
6
  import { isPromise, MentionNameStatus } from '@atlaskit/mention/types';
7
7
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
8
  import { getGlobalTheme } from '@atlaskit/tokens';
9
- import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
9
+ import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass, searchMatchExpandTitleClass, searchMatchTextClass } from '../../ui/styles';
10
10
  export function getSelectedText(selection) {
11
11
  let text = '';
12
12
  const selectedContent = selection.content().content;
@@ -18,10 +18,22 @@ export function getSelectedText(selection) {
18
18
  export const createDecorations = (selectedIndex, matches) => matches.map(({
19
19
  start,
20
20
  end,
21
+ canReplace,
21
22
  nodeType
22
- }, i) => createDecoration(start, end, i === selectedIndex, nodeType));
23
- const isElement = nodeType => nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
24
- export const createDecoration = (start, end, isSelected, nodeType) => {
23
+ }, i) => createDecoration({
24
+ start,
25
+ end,
26
+ canReplace,
27
+ nodeType
28
+ }, i === selectedIndex));
29
+ const isElement = nodeType => ['blockCard', 'embedCard', 'inlineCard', 'status', 'mention', 'date'].includes(nodeType || '');
30
+ const isExpandTitle = match => ['expand', 'nestedExpand'].includes(match.nodeType || '') && !match.canReplace;
31
+ export const createDecoration = (match, isSelected) => {
32
+ const {
33
+ start,
34
+ end,
35
+ nodeType
36
+ } = match;
25
37
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
26
38
  const {
27
39
  colorMode
@@ -34,8 +46,16 @@ export const createDecoration = (start, end, isSelected, nodeType) => {
34
46
  return Decoration.node(start, end, {
35
47
  class: className
36
48
  });
49
+ } else if (isExpandTitle(match)) {
50
+ const className = classnames(searchMatchExpandTitleClass, {
51
+ [selectedSearchMatchClass]: isSelected,
52
+ [darkModeSearchMatchClass]: colorMode === 'dark'
53
+ });
54
+ return Decoration.node(start, end, {
55
+ class: className
56
+ });
37
57
  } else {
38
- const className = classnames(searchMatchClass, {
58
+ const className = classnames(searchMatchTextClass, {
39
59
  [selectedSearchMatchClass]: isSelected,
40
60
  [darkModeSearchMatchClass]: colorMode === 'dark'
41
61
  });
@@ -93,7 +113,7 @@ export function findMatches({
93
113
  index = text.indexOf(searchText, end);
94
114
  }
95
115
  };
96
- const collectStatusMatch = (textGrouping, nodeSize) => {
116
+ const collectNodeMatch = (textGrouping, node) => {
97
117
  if (!textGrouping) {
98
118
  return;
99
119
  }
@@ -103,43 +123,17 @@ export function findMatches({
103
123
  let {
104
124
  text
105
125
  } = textGrouping;
106
- if (shouldMatchCase) {
126
+ if (node.type.name === 'status' && shouldMatchCase) {
107
127
  text = text.toUpperCase();
108
- } else {
128
+ } else if (!shouldMatchCase) {
109
129
  text = text.toLowerCase();
110
130
  searchText = searchText.toLowerCase();
111
131
  }
112
132
  const index = text.indexOf(searchText);
113
133
  if (index !== -1) {
114
- const start = pos;
115
- matches.push({
116
- start,
117
- end: start + nodeSize,
118
- canReplace: false,
119
- nodeType: 'status'
120
- });
121
- }
122
- };
123
- const collectNodeMatch = (textGrouping, node) => {
124
- if (!textGrouping) {
125
- return;
126
- }
127
- let {
128
- text
129
- } = textGrouping;
130
- const {
131
- pos
132
- } = textGrouping;
133
- if (!shouldMatchCase) {
134
- searchText = searchText.toLowerCase();
135
- text = text.toLowerCase();
136
- }
137
- const index = text.indexOf(searchText);
138
- if (index !== -1) {
139
- const start = pos;
140
134
  matches.push({
141
- start,
142
- end: start + node.nodeSize,
135
+ start: pos,
136
+ end: pos + node.nodeSize,
143
137
  canReplace: false,
144
138
  nodeType: node.type.name
145
139
  });
@@ -187,10 +181,10 @@ export function findMatches({
187
181
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
188
182
  switch (node.type.name) {
189
183
  case 'status':
190
- collectStatusMatch({
184
+ collectNodeMatch({
191
185
  text: node.attrs.text,
192
186
  pos
193
- }, node.nodeSize);
187
+ }, node);
194
188
  break;
195
189
  case 'date':
196
190
  collectNodeMatch({
@@ -198,6 +192,13 @@ export function findMatches({
198
192
  pos
199
193
  }, node);
200
194
  break;
195
+ case 'expand':
196
+ case 'nestedExpand':
197
+ collectNodeMatch({
198
+ text: node.attrs.title,
199
+ pos
200
+ }, node);
201
+ break;
201
202
  case 'mention':
202
203
  let text;
203
204
  if (node.attrs.text) {
@@ -264,6 +265,10 @@ export const nextIndex = (currentIndex, total) => (currentIndex + 1) % total;
264
265
  export const prevIndex = (currentIndex, total) => (currentIndex - 1 + total) % total;
265
266
  export const getSelectionForMatch = (selection, doc, index, matches, offset = 0) => {
266
267
  if (matches[index]) {
268
+ if (isExpandTitle(matches[index])) {
269
+ // create a text selection at the first position inside the expand body
270
+ return TextSelection.create(doc, matches[index].start + offset - 2);
271
+ }
267
272
  return TextSelection.create(doc, matches[index].start + offset);
268
273
  }
269
274
  return selection;
package/dist/es2019/ui/styles.js CHANGED
@@ -7,11 +7,14 @@
7
7
 
8
8
  import { css } from '@emotion/react';
9
9
  import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
10
+ import { expandClassNames } from '@atlaskit/editor-common/styles';
10
11
  export const searchMatchClass = 'search-match';
12
+ export const searchMatchTextClass = 'search-match-text';
11
13
  export const selectedSearchMatchClass = 'selected-search-match';
12
14
  export const blockSearchMatchClass = 'search-match-block';
13
15
  export const selectedBlockSearchMatchClass = 'search-match-block-selected';
14
16
  export const darkModeSearchMatchClass = 'search-match-dark';
17
+ export const searchMatchExpandTitleClass = 'search-match-expand-title';
15
18
  const inlineCardSelector = '.loader-wrapper>a';
16
19
  const statusSelector = '.lozenge-wrapper';
17
20
  const mentionSelector = '.editor-mention-primitive';
@@ -28,13 +31,46 @@ export const findReplaceStyles = css({
28
31
  });
29
32
  export const findReplaceStylesNew = css({
30
33
  /** Text match styles */
31
- [`.${searchMatchClass}`]: {
32
- borderRadius: '3px',
33
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
34
- boxShadow: `${"var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))"}, inset 0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
34
+
35
+ /** Light mode */
36
+
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
38
+ [`.${searchMatchTextClass}`]: {
39
+ borderRadius: "var(--ds-space-050, 4px)",
40
+ padding: `${"var(--ds-space-050, 4px)"} 0`,
41
+ boxShadow: `
42
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
43
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
44
+ `,
45
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
46
+ color: "var(--ds-text, #172B4D)"
35
47
  },
36
- [`.${selectedSearchMatchClass}`]: {
37
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
+ [`.${searchMatchTextClass}.${selectedSearchMatchClass}`]: {
50
+ boxShadow: `
51
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
52
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
53
+ `,
54
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
55
+ },
56
+ /** Dark mode */
57
+
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
59
+ [`.${searchMatchTextClass}.${darkModeSearchMatchClass}`]: {
60
+ boxShadow: `
61
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
62
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
63
+ `,
64
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
65
+ color: "var(--ds-text-inverse, #FFFFFF)"
66
+ },
67
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
68
+ [`.${searchMatchTextClass}.${selectedSearchMatchClass}.${darkModeSearchMatchClass}`]: {
69
+ boxShadow: `
70
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
71
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
72
+ `,
73
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
38
74
  },
39
75
  /** Block match styles */
40
76
 
@@ -78,7 +114,7 @@ export const findReplaceStylesNew = css({
78
114
  `
79
115
  },
80
116
  [`${inlineCardSelector}, ${statusSelector}`]: {
81
- // TODO: will clean up !important later
117
+ // TODO: ED-28376 - clean up !important later
82
118
  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"} !important`
83
119
  }
84
120
  },
@@ -92,7 +128,7 @@ export const findReplaceStylesNew = css({
92
128
  `
93
129
  },
94
130
  [`${inlineCardSelector}, ${statusSelector}`]: {
95
- // TODO: will clean up !important later
131
+ // TODO: ED-28376 - clean up !important later
96
132
  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"} !important`
97
133
  }
98
134
  },
@@ -150,5 +186,53 @@ export const findReplaceStylesNew = css({
150
186
  [`${inlineCardSelector}, ${statusSelector}`]: {
151
187
  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"} !important`
152
188
  }
189
+ },
190
+ /** Expand title match styles */
191
+
192
+ /** Light mode */
193
+
194
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
195
+ [`.${searchMatchExpandTitleClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
196
+ borderRadius: "var(--ds-space-050, 4px)",
197
+ padding: `${"var(--ds-space-050, 4px)"} 0`,
198
+ boxShadow: `
199
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
200
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
201
+ `,
202
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
203
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
204
+ [`.${expandClassNames.titleInput}`]: {
205
+ color: "var(--ds-text, #172B4D)"
206
+ }
207
+ },
208
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
209
+ [`.${searchMatchExpandTitleClass}.${selectedSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
210
+ boxShadow: `
211
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
212
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
213
+ `,
214
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
215
+ },
216
+ /** Dark mode */
217
+
218
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
219
+ [`.${searchMatchExpandTitleClass}.${darkModeSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
220
+ boxShadow: `
221
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
222
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
223
+ `,
224
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
225
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
226
+ [`.${expandClassNames.titleInput}`]: {
227
+ color: "var(--ds-text-inverse, #FFFFFF)"
228
+ }
229
+ },
230
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
231
+ [`.${searchMatchExpandTitleClass}.${selectedSearchMatchClass}.${darkModeSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
232
+ boxShadow: `
233
+ inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
234
+ inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
235
+ `,
236
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
153
237
  }
154
238
  });
package/dist/esm/pm-plugins/commands.js CHANGED
@@ -271,10 +271,10 @@ var updateSelectedHighlight = function updateSelectedHighlight(state, nextSelect
271
271
  decorationSet = removeDecorationsFromSet(decorationSet, decorationsToRemove, state.doc);
272
272
  }
273
273
  if (currentSelectedMatch) {
274
- decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch.start, currentSelectedMatch.end, false, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? currentSelectedMatch.nodeType : undefined)]);
274
+ decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch)]);
275
275
  }
276
276
  if (nextSelectedMatch) {
277
- decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? nextSelectedMatch.nodeType : undefined)]);
277
+ decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch, true)]);
278
278
  }
279
279
  return decorationSet;
280
280
  };
package/dist/esm/pm-plugins/plugin-factory.js CHANGED
@@ -41,7 +41,8 @@ var handleDocChanged = function handleDocChanged(tr, pluginState) {
41
41
  return {
42
42
  start: tr.mapping.map(match.start),
43
43
  end: tr.mapping.map(match.end),
44
- canReplace: match.canReplace
44
+ canReplace: match.canReplace,
45
+ nodeType: match.nodeType
45
46
  };
46
47
  });
47
48
  var matchesToAdd = [];
package/dist/esm/pm-plugins/utils/index.js CHANGED
@@ -7,7 +7,7 @@ import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
7
7
  import { isPromise, MentionNameStatus } from '@atlaskit/mention/types';
8
8
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
9
  import { getGlobalTheme } from '@atlaskit/tokens';
10
- import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
10
+ import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass, searchMatchExpandTitleClass, searchMatchTextClass } from '../../ui/styles';
11
11
  export function getSelectedText(selection) {
12
12
  var text = '';
13
13
  var selectedContent = selection.content().content;
@@ -20,14 +20,26 @@ export var createDecorations = function createDecorations(selectedIndex, matches
20
20
  return matches.map(function (_ref, i) {
21
21
  var start = _ref.start,
22
22
  end = _ref.end,
23
+ canReplace = _ref.canReplace,
23
24
  nodeType = _ref.nodeType;
24
- return createDecoration(start, end, i === selectedIndex, nodeType);
25
+ return createDecoration({
26
+ start: start,
27
+ end: end,
28
+ canReplace: canReplace,
29
+ nodeType: nodeType
30
+ }, i === selectedIndex);
25
31
  });
26
32
  };
27
33
  var isElement = function isElement(nodeType) {
28
- return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
34
+ return ['blockCard', 'embedCard', 'inlineCard', 'status', 'mention', 'date'].includes(nodeType || '');
29
35
  };
30
- export var createDecoration = function createDecoration(start, end, isSelected, nodeType) {
36
+ var isExpandTitle = function isExpandTitle(match) {
37
+ return ['expand', 'nestedExpand'].includes(match.nodeType || '') && !match.canReplace;
38
+ };
39
+ export var createDecoration = function createDecoration(match, isSelected) {
40
+ var start = match.start,
41
+ end = match.end,
42
+ nodeType = match.nodeType;
31
43
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
32
44
  var _getGlobalTheme = getGlobalTheme(),
33
45
  colorMode = _getGlobalTheme.colorMode;
@@ -36,19 +48,24 @@ export var createDecoration = function createDecoration(start, end, isSelected,
36
48
  return Decoration.node(start, end, {
37
49
  class: className
38
50
  });
51
+ } else if (isExpandTitle(match)) {
52
+ var _className = classnames(searchMatchExpandTitleClass, _defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
53
+ return Decoration.node(start, end, {
54
+ class: _className
55
+ });
39
56
  } else {
40
- var _className = classnames(searchMatchClass, _defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
57
+ var _className2 = classnames(searchMatchTextClass, _defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
41
58
  return Decoration.inline(start, end, {
42
- class: _className
59
+ class: _className2
43
60
  });
44
61
  }
45
62
  } else {
46
- var _className2 = searchMatchClass;
63
+ var _className3 = searchMatchClass;
47
64
  if (isSelected) {
48
- _className2 += " ".concat(selectedSearchMatchClass);
65
+ _className3 += " ".concat(selectedSearchMatchClass);
49
66
  }
50
67
  return Decoration.inline(start, end, {
51
- class: _className2
68
+ class: _className3
52
69
  });
53
70
  }
54
71
  };
@@ -88,45 +105,23 @@ export function findMatches(_ref2) {
88
105
  index = text.indexOf(searchText, end);
89
106
  }
90
107
  };
91
- var collectStatusMatch = function collectStatusMatch(textGrouping, nodeSize) {
108
+ var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
92
109
  if (!textGrouping) {
93
110
  return;
94
111
  }
95
112
  var pos = textGrouping.pos;
96
113
  var text = textGrouping.text;
97
- if (shouldMatchCase) {
114
+ if (node.type.name === 'status' && shouldMatchCase) {
98
115
  text = text.toUpperCase();
99
- } else {
116
+ } else if (!shouldMatchCase) {
100
117
  text = text.toLowerCase();
101
118
  searchText = searchText.toLowerCase();
102
119
  }
103
120
  var index = text.indexOf(searchText);
104
121
  if (index !== -1) {
105
- var start = pos;
106
122
  matches.push({
107
- start: start,
108
- end: start + nodeSize,
109
- canReplace: false,
110
- nodeType: 'status'
111
- });
112
- }
113
- };
114
- var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
115
- if (!textGrouping) {
116
- return;
117
- }
118
- var text = textGrouping.text;
119
- var pos = textGrouping.pos;
120
- if (!shouldMatchCase) {
121
- searchText = searchText.toLowerCase();
122
- text = text.toLowerCase();
123
- }
124
- var index = text.indexOf(searchText);
125
- if (index !== -1) {
126
- var start = pos;
127
- matches.push({
128
- start: start,
129
- end: start + node.nodeSize,
123
+ start: pos,
124
+ end: pos + node.nodeSize,
130
125
  canReplace: false,
131
126
  nodeType: node.type.name
132
127
  });
@@ -176,10 +171,10 @@ export function findMatches(_ref2) {
176
171
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
177
172
  switch (node.type.name) {
178
173
  case 'status':
179
- collectStatusMatch({
174
+ collectNodeMatch({
180
175
  text: node.attrs.text,
181
176
  pos: pos
182
- }, node.nodeSize);
177
+ }, node);
183
178
  break;
184
179
  case 'date':
185
180
  collectNodeMatch({
@@ -187,6 +182,13 @@ export function findMatches(_ref2) {
187
182
  pos: pos
188
183
  }, node);
189
184
  break;
185
+ case 'expand':
186
+ case 'nestedExpand':
187
+ collectNodeMatch({
188
+ text: node.attrs.title,
189
+ pos: pos
190
+ }, node);
191
+ break;
190
192
  case 'mention':
191
193
  var text;
192
194
  if (node.attrs.text) {
@@ -263,6 +265,10 @@ export var prevIndex = function prevIndex(currentIndex, total) {
263
265
  export var getSelectionForMatch = function getSelectionForMatch(selection, doc, index, matches) {
264
266
  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
265
267
  if (matches[index]) {
268
+ if (isExpandTitle(matches[index])) {
269
+ // create a text selection at the first position inside the expand body
270
+ return TextSelection.create(doc, matches[index].start + offset - 2);
271
+ }
266
272
  return TextSelection.create(doc, matches[index].start + offset);
267
273
  }
268
274
  return selection;
package/dist/esm/ui/styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ var _css2;
2
3
  /* eslint-disable @atlaskit/editor/no-re-export */
3
4
  // Entry file in package.json
4
5
 
@@ -8,11 +9,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
9
 
9
10
  import { css } from '@emotion/react';
10
11
  import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
12
+ import { expandClassNames } from '@atlaskit/editor-common/styles';
11
13
  export var searchMatchClass = 'search-match';
14
+ export var searchMatchTextClass = 'search-match-text';
12
15
  export var selectedSearchMatchClass = 'selected-search-match';
13
16
  export var blockSearchMatchClass = 'search-match-block';
14
17
  export var selectedBlockSearchMatchClass = 'search-match-block-selected';
15
18
  export var darkModeSearchMatchClass = 'search-match-dark';
19
+ export var searchMatchExpandTitleClass = 'search-match-expand-title';
16
20
  var inlineCardSelector = '.loader-wrapper>a';
17
21
  var statusSelector = '.lozenge-wrapper';
18
22
  var mentionSelector = '.editor-mention-primitive';
@@ -24,12 +28,22 @@ export var findReplaceStyles = css(_defineProperty(_defineProperty({}, ".".conca
24
28
  }), ".".concat(selectedSearchMatchClass), {
25
29
  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
26
30
  }));
27
- export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(searchMatchClass), {
28
- borderRadius: '3px',
29
- backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
30
- boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
31
- }), ".".concat(selectedSearchMatchClass), {
32
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
31
+ export var findReplaceStylesNew = css((_css2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css2, ".".concat(searchMatchTextClass), {
32
+ borderRadius: "var(--ds-space-050, 4px)",
33
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
34
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t"),
35
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
36
+ color: "var(--ds-text, #172B4D)"
37
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass), {
38
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t"),
39
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
40
+ }), ".".concat(searchMatchTextClass, ".").concat(darkModeSearchMatchClass), {
41
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t"),
42
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
43
+ color: "var(--ds-text-inverse, #FFFFFF)"
44
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
45
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t"),
46
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
33
47
  }), ".".concat(blockSearchMatchClass), _defineProperty({
34
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
49
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
@@ -52,7 +66,7 @@ export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_definePro
52
66
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
53
67
  }
54
68
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
55
- // TODO: will clean up !important later
69
+ // TODO: ED-28376 - clean up !important later
56
70
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
57
71
  })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
58
72
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -60,7 +74,7 @@ export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_definePro
60
74
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
61
75
  }
62
76
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
63
- // TODO: will clean up !important later
77
+ // TODO: ED-28376 - clean up !important later
64
78
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
65
79
  })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), _defineProperty({
66
80
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -78,7 +92,7 @@ export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_definePro
78
92
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
79
93
  boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
80
94
  borderRadius: '3px'
81
- })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
95
+ })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css2, ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
82
96
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
83
97
  '.loader-wrapper>div::after': {
84
98
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
@@ -92,4 +106,22 @@ export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_definePro
92
106
  }
93
107
  }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
94
108
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
109
+ })), ".".concat(searchMatchExpandTitleClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), _defineProperty({
110
+ borderRadius: "var(--ds-space-050, 4px)",
111
+ padding: "var(--ds-space-050, 4px)".concat(" 0"),
112
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t"),
113
+ backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)"
114
+ }, ".".concat(expandClassNames.titleInput), {
115
+ color: "var(--ds-text, #172B4D)"
116
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), {
117
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t"),
118
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
119
+ }), ".".concat(searchMatchExpandTitleClass, ".").concat(darkModeSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), _defineProperty({
120
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t"),
121
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
122
+ }, ".".concat(expandClassNames.titleInput), {
123
+ color: "var(--ds-text-inverse, #FFFFFF)"
124
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), {
125
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t"),
126
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
95
127
  })));
package/dist/types/pm-plugins/utils/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { FindReplacePlugin } from '../../findReplacePluginType';
10
10
  import type { Match } from '../../types';
11
11
  export declare function getSelectedText(selection: TextSelection): string;
12
12
  export declare const createDecorations: (selectedIndex: number, matches: Match[]) => Decoration[];
13
- export declare const createDecoration: (start: number, end: number, isSelected?: Boolean, nodeType?: string) => Decoration;
13
+ export declare const createDecoration: (match: Match, isSelected?: Boolean) => Decoration;
14
14
  type FindMatchesType = {
15
15
  content: PmNode | Fragment;
16
16
  searchText: string;
package/dist/types/ui/styles.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  export declare const searchMatchClass = "search-match";
2
+ export declare const searchMatchTextClass = "search-match-text";
2
3
  export declare const selectedSearchMatchClass = "selected-search-match";
3
4
  export declare const blockSearchMatchClass = "search-match-block";
4
5
  export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
5
6
  export declare const darkModeSearchMatchClass = "search-match-dark";
7
+ export declare const searchMatchExpandTitleClass = "search-match-expand-title";
6
8
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
7
9
  export declare const findReplaceStylesNew: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/pm-plugins/utils/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { FindReplacePlugin } from '../../findReplacePluginType';
10
10
  import type { Match } from '../../types';
11
11
  export declare function getSelectedText(selection: TextSelection): string;
12
12
  export declare const createDecorations: (selectedIndex: number, matches: Match[]) => Decoration[];
13
- export declare const createDecoration: (start: number, end: number, isSelected?: Boolean, nodeType?: string) => Decoration;
13
+ export declare const createDecoration: (match: Match, isSelected?: Boolean) => Decoration;
14
14
  type FindMatchesType = {
15
15
  content: PmNode | Fragment;
16
16
  searchText: string;
package/dist/types-ts4.5/ui/styles.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  export declare const searchMatchClass = "search-match";
2
+ export declare const searchMatchTextClass = "search-match-text";
2
3
  export declare const selectedSearchMatchClass = "selected-search-match";
3
4
  export declare const blockSearchMatchClass = "search-match-block";
4
5
  export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
5
6
  export declare const darkModeSearchMatchClass = "search-match-dark";
7
+ export declare const searchMatchExpandTitleClass = "search-match-expand-title";
6
8
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
7
9
  export declare const findReplaceStylesNew: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-find-replace",
3
- "version": "2.9.0",
3
+ "version": "2.10.1",
4
4
  "description": "find replace plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -47,7 +47,7 @@
47
47
  "@atlaskit/primitives": "^14.9.0",
48
48
  "@atlaskit/textfield": "^8.0.0",
49
49
  "@atlaskit/theme": "^18.0.0",
50
- "@atlaskit/tmp-editor-statsig": "^8.2.0",
50
+ "@atlaskit/tmp-editor-statsig": "^8.3.0",
51
51
  "@atlaskit/tokens": "^5.4.0",
52
52
  "@atlaskit/tooltip": "^20.3.0",
53
53
  "@babel/runtime": "^7.0.0",