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

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/utils/index.js +10 -9
  3. package/dist/cjs/ui/styles.js +37 -10
  4. package/dist/es2019/pm-plugins/utils/index.js +11 -8
  5. package/dist/es2019/ui/styles.js +39 -5
  6. package/dist/esm/pm-plugins/utils/index.js +10 -9
  7. package/dist/esm/ui/styles.js +36 -9
  8. package/dist/types/ui/styles.d.ts +1 -0
  9. package/dist/types-ts4.5/ui/styles.d.ts +1 -0
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-find-replace
2
2
 
3
+ ## 2.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#177117](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177117)
8
+ [`49ae44aea25fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49ae44aea25fc) -
9
+ Add new styles for inline nodes for find and replace, include these in block node checks
10
+
3
11
  ## 2.8.0
4
12
 
5
13
  ### Minor Changes
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 _classnames2 = _interopRequireDefault(require("classnames"));
13
+ var _classnames3 = _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");
@@ -35,30 +35,31 @@ var createDecorations = exports.createDecorations = function createDecorations(s
35
35
  return createDecoration(start, end, i === selectedIndex, nodeType);
36
36
  });
37
37
  };
38
- var isBlock = function isBlock(nodeType) {
39
- return nodeType === 'blockCard' || nodeType === 'embedCard';
38
+ var isElement = function isElement(nodeType) {
39
+ return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
40
40
  };
41
41
  var createDecoration = exports.createDecoration = function createDecoration(start, end, isSelected, nodeType) {
42
42
  if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
43
43
  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
44
44
  colorMode = _getGlobalTheme.colorMode;
45
- var className = (0, _classnames2.default)(_styles.searchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.blockSearchMatchClass, isBlock(nodeType)), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
46
- if (isBlock(nodeType)) {
45
+ if (isElement(nodeType)) {
46
+ var className = (0, _classnames3.default)(_styles.blockSearchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedBlockSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
47
47
  return _view.Decoration.node(start, end, {
48
48
  class: className
49
49
  });
50
50
  } else {
51
+ var _className = (0, _classnames3.default)(_styles.searchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
51
52
  return _view.Decoration.inline(start, end, {
52
- class: className
53
+ class: _className
53
54
  });
54
55
  }
55
56
  } else {
56
- var _className = _styles.searchMatchClass;
57
+ var _className2 = _styles.searchMatchClass;
57
58
  if (isSelected) {
58
- _className += " ".concat(_styles.selectedSearchMatchClass);
59
+ _className2 += " ".concat(_styles.selectedSearchMatchClass);
59
60
  }
60
61
  return _view.Decoration.inline(start, end, {
61
- class: _className
62
+ class: _className2
62
63
  });
63
64
  }
64
65
  };
package/dist/cjs/ui/styles.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.selectedSearchMatchClass = exports.searchMatchClass = exports.findReplaceStylesNew = exports.findReplaceStyles = exports.darkModeSearchMatchClass = exports.blockSearchMatchClass = void 0;
7
+ exports.selectedSearchMatchClass = exports.selectedBlockSearchMatchClass = 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");
@@ -18,7 +18,12 @@ var _colors = require("@atlaskit/theme/colors");
18
18
  var searchMatchClass = exports.searchMatchClass = 'search-match';
19
19
  var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
20
20
  var blockSearchMatchClass = exports.blockSearchMatchClass = 'search-match-block';
21
+ var selectedBlockSearchMatchClass = exports.selectedBlockSearchMatchClass = 'search-match-block-selected';
21
22
  var darkModeSearchMatchClass = exports.darkModeSearchMatchClass = 'search-match-dark';
23
+ var inlineCardSelector = '.loader-wrapper>a';
24
+ var statusSelector = '.lozenge-wrapper';
25
+ var mentionSelector = '.editor-mention-primitive';
26
+ var dateSelector = '.date-lozenger-container';
22
27
  var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(searchMatchClass), {
23
28
  borderRadius: '3px',
24
29
  backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
@@ -32,44 +37,66 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)((0, _d
32
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)")
33
38
  }), ".".concat(selectedSearchMatchClass), {
34
39
  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
35
- }), ".".concat(blockSearchMatchClass), {
40
+ }), ".".concat(blockSearchMatchClass), (0, _defineProperty2.default)({
36
41
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
37
42
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
38
43
  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\t")
39
44
  }
40
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass), {
45
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
46
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
47
+ borderRadius: '3px'
48
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass), (0, _defineProperty2.default)({
41
49
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
42
50
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
43
51
  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\t")
44
52
  }
45
- }), ".".concat(blockSearchMatchClass, ".ak-editor-selected-node"), {
53
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
54
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
55
+ borderRadius: '3px'
56
+ })), ".".concat(blockSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
46
57
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
47
58
  '.loader-wrapper>div::after': {
48
59
  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")
49
60
  }
50
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".ak-editor-selected-node"), {
61
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
62
+ // TODO: will clean up !important later
63
+ 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
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
51
65
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
52
66
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
53
67
  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")
54
68
  }
55
- }), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
69
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
70
+ // TODO: will clean up !important later
71
+ 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
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), (0, _defineProperty2.default)({
56
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
57
74
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
58
75
  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\t")
59
76
  }
60
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
77
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
78
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
79
+ borderRadius: '3px'
80
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass), (0, _defineProperty2.default)({
61
81
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
62
82
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
63
83
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
64
84
  }
65
- }), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), {
85
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
86
+ 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
+ borderRadius: '3px'
88
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
66
89
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
67
90
  '.loader-wrapper>div::after': {
68
91
  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")
69
92
  }
70
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), {
93
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
94
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
95
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
71
96
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
72
97
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
73
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 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
74
99
  }
75
- }));
100
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
101
+ 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")
102
+ })));
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 } from '../../ui/styles';
9
+ import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
10
10
  export function getSelectedText(selection) {
11
11
  let text = '';
12
12
  const selectedContent = selection.content().content;
@@ -20,22 +20,25 @@ export const createDecorations = (selectedIndex, matches) => matches.map(({
20
20
  end,
21
21
  nodeType
22
22
  }, i) => createDecoration(start, end, i === selectedIndex, nodeType));
23
- const isBlock = nodeType => nodeType === 'blockCard' || nodeType === 'embedCard';
23
+ const isElement = nodeType => nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
24
24
  export const createDecoration = (start, end, isSelected, nodeType) => {
25
25
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
26
26
  const {
27
27
  colorMode
28
28
  } = getGlobalTheme();
29
- const className = classnames(searchMatchClass, {
30
- [selectedSearchMatchClass]: isSelected,
31
- [blockSearchMatchClass]: isBlock(nodeType),
32
- [darkModeSearchMatchClass]: colorMode === 'dark'
33
- });
34
- if (isBlock(nodeType)) {
29
+ if (isElement(nodeType)) {
30
+ const className = classnames(blockSearchMatchClass, {
31
+ [selectedBlockSearchMatchClass]: isSelected,
32
+ [darkModeSearchMatchClass]: colorMode === 'dark'
33
+ });
35
34
  return Decoration.node(start, end, {
36
35
  class: className
37
36
  });
38
37
  } else {
38
+ const className = classnames(searchMatchClass, {
39
+ [selectedSearchMatchClass]: isSelected,
40
+ [darkModeSearchMatchClass]: colorMode === 'dark'
41
+ });
39
42
  return Decoration.inline(start, end, {
40
43
  class: className
41
44
  });
package/dist/es2019/ui/styles.js CHANGED
@@ -10,7 +10,12 @@ import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
10
10
  export const searchMatchClass = 'search-match';
11
11
  export const selectedSearchMatchClass = 'selected-search-match';
12
12
  export const blockSearchMatchClass = 'search-match-block';
13
+ export const selectedBlockSearchMatchClass = 'search-match-block-selected';
13
14
  export const darkModeSearchMatchClass = 'search-match-dark';
15
+ const inlineCardSelector = '.loader-wrapper>a';
16
+ const statusSelector = '.lozenge-wrapper';
17
+ const mentionSelector = '.editor-mention-primitive';
18
+ const dateSelector = '.date-lozenger-container';
14
19
  export const findReplaceStyles = css({
15
20
  [`.${searchMatchClass}`]: {
16
21
  borderRadius: '3px',
@@ -43,15 +48,23 @@ export const findReplaceStylesNew = css({
43
48
  inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
44
49
  inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
45
50
  `
51
+ },
52
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
53
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
54
+ borderRadius: '3px'
46
55
  }
47
56
  },
48
- [`.${selectedSearchMatchClass}.${blockSearchMatchClass}`]: {
57
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}`]: {
49
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
59
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
51
60
  boxShadow: `
52
61
  inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
53
62
  inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
54
63
  `
64
+ },
65
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
66
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
67
+ borderRadius: '3px'
55
68
  }
56
69
  },
57
70
  /** With node selection */
@@ -63,9 +76,13 @@ export const findReplaceStylesNew = css({
63
76
  inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"},
64
77
  0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
65
78
  `
79
+ },
80
+ [`${inlineCardSelector}, ${statusSelector}`]: {
81
+ // TODO: will clean up !important later
82
+ 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`
66
83
  }
67
84
  },
68
- [`.${selectedSearchMatchClass}.${blockSearchMatchClass}.ak-editor-selected-node`]: {
85
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.ak-editor-selected-node`]: {
69
86
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
70
87
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
71
88
  boxShadow: `
@@ -73,10 +90,13 @@ export const findReplaceStylesNew = css({
73
90
  inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"},
74
91
  0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
75
92
  `
93
+ },
94
+ [`${inlineCardSelector}, ${statusSelector}`]: {
95
+ // TODO: will clean up !important later
96
+ 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`
76
97
  }
77
98
  },
78
99
  /** Dark mode */
79
-
80
100
  /** Without node selection */
81
101
  [`.${blockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
82
102
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -85,15 +105,23 @@ export const findReplaceStylesNew = css({
85
105
  inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
86
106
  inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
87
107
  `
108
+ },
109
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
110
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
111
+ borderRadius: '3px'
88
112
  }
89
113
  },
90
- [`.${selectedSearchMatchClass}.${blockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
114
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
91
115
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
92
116
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
93
117
  boxShadow: `
94
118
  inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
95
119
  inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
96
120
  `
121
+ },
122
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
123
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
124
+ borderRadius: '3px'
97
125
  }
98
126
  },
99
127
  /** With node selection */
@@ -105,9 +133,12 @@ export const findReplaceStylesNew = css({
105
133
  inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"},
106
134
  0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
107
135
  `
136
+ },
137
+ [`${inlineCardSelector}, ${statusSelector}`]: {
138
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"} !important`
108
139
  }
109
140
  },
110
- [`.${selectedSearchMatchClass}.${blockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node`]: {
141
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node`]: {
111
142
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
112
143
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
113
144
  boxShadow: `
@@ -115,6 +146,9 @@ export const findReplaceStylesNew = css({
115
146
  inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"},
116
147
  0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
117
148
  `
149
+ },
150
+ [`${inlineCardSelector}, ${statusSelector}`]: {
151
+ 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`
118
152
  }
119
153
  }
120
154
  });
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 } from '../../ui/styles';
10
+ import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
11
11
  export function getSelectedText(selection) {
12
12
  var text = '';
13
13
  var selectedContent = selection.content().content;
@@ -24,30 +24,31 @@ export var createDecorations = function createDecorations(selectedIndex, matches
24
24
  return createDecoration(start, end, i === selectedIndex, nodeType);
25
25
  });
26
26
  };
27
- var isBlock = function isBlock(nodeType) {
28
- return nodeType === 'blockCard' || nodeType === 'embedCard';
27
+ var isElement = function isElement(nodeType) {
28
+ return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
29
29
  };
30
30
  export var createDecoration = function createDecoration(start, end, isSelected, nodeType) {
31
31
  if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
32
32
  var _getGlobalTheme = getGlobalTheme(),
33
33
  colorMode = _getGlobalTheme.colorMode;
34
- var className = classnames(searchMatchClass, _defineProperty(_defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), blockSearchMatchClass, isBlock(nodeType)), darkModeSearchMatchClass, colorMode === 'dark'));
35
- if (isBlock(nodeType)) {
34
+ if (isElement(nodeType)) {
35
+ var className = classnames(blockSearchMatchClass, _defineProperty(_defineProperty({}, selectedBlockSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
36
36
  return Decoration.node(start, end, {
37
37
  class: className
38
38
  });
39
39
  } else {
40
+ var _className = classnames(searchMatchClass, _defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
40
41
  return Decoration.inline(start, end, {
41
- class: className
42
+ class: _className
42
43
  });
43
44
  }
44
45
  } else {
45
- var _className = searchMatchClass;
46
+ var _className2 = searchMatchClass;
46
47
  if (isSelected) {
47
- _className += " ".concat(selectedSearchMatchClass);
48
+ _className2 += " ".concat(selectedSearchMatchClass);
48
49
  }
49
50
  return Decoration.inline(start, end, {
50
- class: _className
51
+ class: _className2
51
52
  });
52
53
  }
53
54
  };
package/dist/esm/ui/styles.js CHANGED
@@ -11,7 +11,12 @@ import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
11
11
  export var searchMatchClass = 'search-match';
12
12
  export var selectedSearchMatchClass = 'selected-search-match';
13
13
  export var blockSearchMatchClass = 'search-match-block';
14
+ export var selectedBlockSearchMatchClass = 'search-match-block-selected';
14
15
  export var darkModeSearchMatchClass = 'search-match-dark';
16
+ var inlineCardSelector = '.loader-wrapper>a';
17
+ var statusSelector = '.lozenge-wrapper';
18
+ var mentionSelector = '.editor-mention-primitive';
19
+ var dateSelector = '.date-lozenger-container';
15
20
  export var findReplaceStyles = css(_defineProperty(_defineProperty({}, ".".concat(searchMatchClass), {
16
21
  borderRadius: '3px',
17
22
  backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
@@ -25,44 +30,66 @@ export var findReplaceStylesNew = css(_defineProperty(_defineProperty(_definePro
25
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)")
26
31
  }), ".".concat(selectedSearchMatchClass), {
27
32
  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
28
- }), ".".concat(blockSearchMatchClass), {
33
+ }), ".".concat(blockSearchMatchClass), _defineProperty({
29
34
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
30
35
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
31
36
  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\t")
32
37
  }
33
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass), {
38
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
39
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
40
+ borderRadius: '3px'
41
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass), _defineProperty({
34
42
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
43
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
36
44
  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\t")
37
45
  }
38
- }), ".".concat(blockSearchMatchClass, ".ak-editor-selected-node"), {
46
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
47
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
48
+ borderRadius: '3px'
49
+ })), ".".concat(blockSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
39
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
40
51
  '.loader-wrapper>div::after': {
41
52
  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")
42
53
  }
43
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".ak-editor-selected-node"), {
54
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
55
+ // TODO: will clean up !important later
56
+ 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
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
44
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
45
59
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
46
60
  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")
47
61
  }
48
- }), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
62
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
63
+ // TODO: will clean up !important later
64
+ 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
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), _defineProperty({
49
66
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
67
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
51
68
  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\t")
52
69
  }
53
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
70
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
71
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
72
+ borderRadius: '3px'
73
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass), _defineProperty({
54
74
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
55
75
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
56
76
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
57
77
  }
58
- }), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), {
78
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
79
+ 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
+ borderRadius: '3px'
81
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
59
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
60
83
  '.loader-wrapper>div::after': {
61
84
  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")
62
85
  }
63
- }), ".".concat(selectedSearchMatchClass, ".").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), {
86
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
87
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
88
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
64
89
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
65
90
  '[data-smart-link-container="true"], .loader-wrapper>div::after': {
66
91
  boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
67
92
  }
68
- }));
93
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector), {
94
+ 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")
95
+ })));
package/dist/types/ui/styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const searchMatchClass = "search-match";
2
2
  export declare const selectedSearchMatchClass = "selected-search-match";
3
3
  export declare const blockSearchMatchClass = "search-match-block";
4
+ export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
4
5
  export declare const darkModeSearchMatchClass = "search-match-dark";
5
6
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
6
7
  export declare const findReplaceStylesNew: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const searchMatchClass = "search-match";
2
2
  export declare const selectedSearchMatchClass = "selected-search-match";
3
3
  export declare const blockSearchMatchClass = "search-match-block";
4
+ export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
4
5
  export declare const darkModeSearchMatchClass = "search-match-dark";
5
6
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
6
7
  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.8.0",
3
+ "version": "2.9.0",
4
4
  "description": "find replace plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",