@atlaskit/editor-plugin-find-replace 2.7.2 → 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.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/pm-plugins/commands.js +2 -2
- package/dist/cjs/pm-plugins/utils/batch-decorations.js +7 -2
- package/dist/cjs/pm-plugins/utils/index.js +77 -18
- package/dist/cjs/ui/styles.js +78 -2
- package/dist/es2019/pm-plugins/commands.js +2 -2
- package/dist/es2019/pm-plugins/utils/batch-decorations.js +7 -2
- package/dist/es2019/pm-plugins/utils/index.js +79 -19
- package/dist/es2019/ui/styles.js +133 -0
- package/dist/esm/pm-plugins/commands.js +2 -2
- package/dist/esm/pm-plugins/utils/batch-decorations.js +7 -2
- package/dist/esm/pm-plugins/utils/index.js +77 -19
- package/dist/esm/ui/styles.js +77 -1
- package/dist/types/findReplacePluginType.d.ts +3 -1
- package/dist/types/pm-plugins/utils/index.d.ts +2 -5
- package/dist/types/types/index.d.ts +2 -0
- package/dist/types/ui/styles.d.ts +4 -0
- package/dist/types-ts4.5/findReplacePluginType.d.ts +3 -1
- package/dist/types-ts4.5/pm-plugins/utils/index.d.ts +2 -5
- package/dist/types-ts4.5/types/index.d.ts +2 -0
- package/dist/types-ts4.5/ui/styles.d.ts +4 -0
- package/package.json +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
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
|
+
|
|
11
|
+
## 2.8.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#175569](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175569)
|
|
16
|
+
[`3bcbd0cff0437`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bcbd0cff0437) -
|
|
17
|
+
[ux] ED-27958 extend the find algorithm to search smart cards behind
|
|
18
|
+
platform_editor_find_and_replace_improvements
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 2.7.2
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -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)]);
|
|
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)]);
|
|
282
282
|
}
|
|
283
283
|
if (nextSelectedMatch) {
|
|
284
|
-
decorationSet = decorationSet.add(state.doc, [(0, _utils.createDecoration)(nextSelectedMatch.start, nextSelectedMatch.end, true)]);
|
|
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)]);
|
|
285
285
|
}
|
|
286
286
|
return decorationSet;
|
|
287
287
|
};
|
|
@@ -9,6 +9,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
13
|
var _pluginFactory = require("../plugin-factory");
|
|
13
14
|
var _index = require("./index");
|
|
14
15
|
// max number of decorations to apply at once
|
|
@@ -248,7 +249,7 @@ var BatchDecorations = /*#__PURE__*/function () {
|
|
|
248
249
|
return {
|
|
249
250
|
viewportStartPos: viewportStartPos,
|
|
250
251
|
viewportEndPos: viewportEndPos,
|
|
251
|
-
startPos: 1,
|
|
252
|
+
startPos: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 0 : 1,
|
|
252
253
|
endPos: editorView.state.doc.nodeSize
|
|
253
254
|
};
|
|
254
255
|
}
|
|
@@ -259,7 +260,11 @@ var BatchDecorations = /*#__PURE__*/function () {
|
|
|
259
260
|
top: y,
|
|
260
261
|
left: x
|
|
261
262
|
});
|
|
262
|
-
|
|
263
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
264
|
+
return startPos ? startPos.pos : 0;
|
|
265
|
+
} else {
|
|
266
|
+
return startPos ? startPos.pos : 1;
|
|
267
|
+
}
|
|
263
268
|
}
|
|
264
269
|
}, {
|
|
265
270
|
key: "getEndPos",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
@@ -8,12 +9,15 @@ exports.findMatches = findMatches;
|
|
|
8
9
|
exports.findSearchIndex = findSearchIndex;
|
|
9
10
|
exports.getSelectedText = getSelectedText;
|
|
10
11
|
exports.removeMatchesFromSet = exports.removeDecorationsFromSet = exports.prevIndex = exports.nextIndex = exports.isMatchAffectedByStep = exports.getSelectionForMatch = void 0;
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
var _classnames3 = _interopRequireDefault(require("classnames"));
|
|
11
14
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
12
15
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
16
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
14
17
|
var _resource = require("@atlaskit/mention/resource");
|
|
15
18
|
var _types = require("@atlaskit/mention/types");
|
|
16
19
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
|
+
var _tokens = require("@atlaskit/tokens");
|
|
17
21
|
var _styles = require("../../ui/styles");
|
|
18
22
|
function getSelectedText(selection) {
|
|
19
23
|
var text = '';
|
|
@@ -26,18 +30,38 @@ function getSelectedText(selection) {
|
|
|
26
30
|
var createDecorations = exports.createDecorations = function createDecorations(selectedIndex, matches) {
|
|
27
31
|
return matches.map(function (_ref, i) {
|
|
28
32
|
var start = _ref.start,
|
|
29
|
-
end = _ref.end
|
|
30
|
-
|
|
33
|
+
end = _ref.end,
|
|
34
|
+
nodeType = _ref.nodeType;
|
|
35
|
+
return createDecoration(start, end, i === selectedIndex, nodeType);
|
|
31
36
|
});
|
|
32
37
|
};
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
var isElement = function isElement(nodeType) {
|
|
39
|
+
return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
|
|
40
|
+
};
|
|
41
|
+
var createDecoration = exports.createDecoration = function createDecoration(start, end, isSelected, nodeType) {
|
|
42
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
43
|
+
var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
|
|
44
|
+
colorMode = _getGlobalTheme.colorMode;
|
|
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
|
+
return _view.Decoration.node(start, end, {
|
|
48
|
+
class: className
|
|
49
|
+
});
|
|
50
|
+
} else {
|
|
51
|
+
var _className = (0, _classnames3.default)(_styles.searchMatchClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.selectedSearchMatchClass, isSelected), _styles.darkModeSearchMatchClass, colorMode === 'dark'));
|
|
52
|
+
return _view.Decoration.inline(start, end, {
|
|
53
|
+
class: _className
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
} else {
|
|
57
|
+
var _className2 = _styles.searchMatchClass;
|
|
58
|
+
if (isSelected) {
|
|
59
|
+
_className2 += " ".concat(_styles.selectedSearchMatchClass);
|
|
60
|
+
}
|
|
61
|
+
return _view.Decoration.inline(start, end, {
|
|
62
|
+
class: _className2
|
|
63
|
+
});
|
|
37
64
|
}
|
|
38
|
-
return _view.Decoration.inline(start, end, {
|
|
39
|
-
class: className
|
|
40
|
-
});
|
|
41
65
|
};
|
|
42
66
|
function findMatches(_ref2) {
|
|
43
67
|
var content = _ref2.content,
|
|
@@ -69,7 +93,8 @@ function findMatches(_ref2) {
|
|
|
69
93
|
matches.push({
|
|
70
94
|
start: pos + index,
|
|
71
95
|
end: pos + end,
|
|
72
|
-
canReplace: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined
|
|
96
|
+
canReplace: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined,
|
|
97
|
+
nodeType: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 'text' : undefined
|
|
73
98
|
});
|
|
74
99
|
index = text.indexOf(searchText, end);
|
|
75
100
|
}
|
|
@@ -92,11 +117,12 @@ function findMatches(_ref2) {
|
|
|
92
117
|
matches.push({
|
|
93
118
|
start: start,
|
|
94
119
|
end: start + nodeSize,
|
|
95
|
-
canReplace: false
|
|
120
|
+
canReplace: false,
|
|
121
|
+
nodeType: 'status'
|
|
96
122
|
});
|
|
97
123
|
}
|
|
98
124
|
};
|
|
99
|
-
var
|
|
125
|
+
var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
|
|
100
126
|
if (!textGrouping) {
|
|
101
127
|
return;
|
|
102
128
|
}
|
|
@@ -111,11 +137,39 @@ function findMatches(_ref2) {
|
|
|
111
137
|
var start = pos;
|
|
112
138
|
matches.push({
|
|
113
139
|
start: start,
|
|
114
|
-
end: start + nodeSize,
|
|
115
|
-
canReplace: false
|
|
140
|
+
end: start + node.nodeSize,
|
|
141
|
+
canReplace: false,
|
|
142
|
+
nodeType: node.type.name
|
|
116
143
|
});
|
|
117
144
|
}
|
|
118
145
|
};
|
|
146
|
+
var collectCardTitleMatch = function collectCardTitleMatch(node, pos) {
|
|
147
|
+
var _api$card;
|
|
148
|
+
var cards = api === null || api === void 0 || (_api$card = api.card) === null || _api$card === void 0 || (_api$card = _api$card.sharedState.currentState()) === null || _api$card === void 0 ? void 0 : _api$card.cards;
|
|
149
|
+
if (cards) {
|
|
150
|
+
var relevantCard = cards.find(function (card) {
|
|
151
|
+
return card.url === node.attrs.url;
|
|
152
|
+
});
|
|
153
|
+
var title = relevantCard === null || relevantCard === void 0 ? void 0 : relevantCard.title;
|
|
154
|
+
if (relevantCard) {
|
|
155
|
+
if (title) {
|
|
156
|
+
collectNodeMatch({
|
|
157
|
+
text: title,
|
|
158
|
+
pos: pos
|
|
159
|
+
}, node);
|
|
160
|
+
} else {
|
|
161
|
+
// when there is no title, e.g. in an error case like unauthorized
|
|
162
|
+
// the link card just shows the entire url as the title in inline card
|
|
163
|
+
if (node.type.name === 'inlineCard') {
|
|
164
|
+
collectNodeMatch({
|
|
165
|
+
text: node.attrs.url,
|
|
166
|
+
pos: pos
|
|
167
|
+
}, node);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
};
|
|
119
173
|
if (searchTextLength > 0) {
|
|
120
174
|
content.descendants(function (node, pos) {
|
|
121
175
|
if (node.isText) {
|
|
@@ -139,10 +193,10 @@ function findMatches(_ref2) {
|
|
|
139
193
|
}, node.nodeSize);
|
|
140
194
|
break;
|
|
141
195
|
case 'date':
|
|
142
|
-
|
|
196
|
+
collectNodeMatch({
|
|
143
197
|
text: (0, _utils.timestampToString)(node.attrs.timestamp, getIntl ? getIntl() : null),
|
|
144
198
|
pos: pos
|
|
145
|
-
}, node
|
|
199
|
+
}, node);
|
|
146
200
|
break;
|
|
147
201
|
case 'mention':
|
|
148
202
|
var text;
|
|
@@ -167,12 +221,17 @@ function findMatches(_ref2) {
|
|
|
167
221
|
}
|
|
168
222
|
}
|
|
169
223
|
if (text) {
|
|
170
|
-
|
|
224
|
+
collectNodeMatch({
|
|
171
225
|
text: text,
|
|
172
226
|
pos: pos
|
|
173
|
-
}, node
|
|
227
|
+
}, node);
|
|
174
228
|
}
|
|
175
229
|
break;
|
|
230
|
+
case 'inlineCard':
|
|
231
|
+
case 'blockCard':
|
|
232
|
+
case 'embedCard':
|
|
233
|
+
collectCardTitleMatch(node, pos);
|
|
234
|
+
break;
|
|
176
235
|
default:
|
|
177
236
|
break;
|
|
178
237
|
}
|
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.findReplaceStyles = 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");
|
|
@@ -17,10 +17,86 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
17
17
|
|
|
18
18
|
var searchMatchClass = exports.searchMatchClass = 'search-match';
|
|
19
19
|
var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
|
|
20
|
+
var blockSearchMatchClass = exports.blockSearchMatchClass = 'search-match-block';
|
|
21
|
+
var selectedBlockSearchMatchClass = exports.selectedBlockSearchMatchClass = 'search-match-block-selected';
|
|
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';
|
|
20
27
|
var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(searchMatchClass), {
|
|
21
28
|
borderRadius: '3px',
|
|
22
29
|
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
23
30
|
boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px 0 ".concat(_colors.N50A, ", 0 0 1px 0 ").concat(_colors.N60A), ")") + ', inset 0 0 0 1px ' + "var(--ds-border-input, ".concat("".concat(_colors.N40A), ")")
|
|
24
31
|
}), ".".concat(selectedSearchMatchClass), {
|
|
25
32
|
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
26
|
-
}));
|
|
33
|
+
}));
|
|
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)"
|
|
40
|
+
}), ".".concat(blockSearchMatchClass), (0, _defineProperty2.default)({
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
42
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
44
|
+
}
|
|
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)({
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
52
|
+
}
|
|
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)({
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
'.loader-wrapper>div::after': {
|
|
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")
|
|
60
|
+
}
|
|
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)({
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
66
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
68
|
+
}
|
|
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)({
|
|
73
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
74
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
76
|
+
}
|
|
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)({
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
82
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
84
|
+
}
|
|
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)({
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
90
|
+
'.loader-wrapper>div::after': {
|
|
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")
|
|
92
|
+
}
|
|
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)({
|
|
96
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
97
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
99
|
+
}
|
|
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
|
+
})));
|
|
@@ -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)]);
|
|
267
|
+
decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch.start, currentSelectedMatch.end, false, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? currentSelectedMatch.nodeType : undefined)]);
|
|
268
268
|
}
|
|
269
269
|
if (nextSelectedMatch) {
|
|
270
|
-
decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true)]);
|
|
270
|
+
decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? nextSelectedMatch.nodeType : undefined)]);
|
|
271
271
|
}
|
|
272
272
|
return decorationSet;
|
|
273
273
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
1
2
|
import { getPluginState } from '../plugin-factory';
|
|
2
3
|
import { createDecorations, findDecorationFromMatch } from './index';
|
|
3
4
|
|
|
@@ -134,7 +135,7 @@ class BatchDecorations {
|
|
|
134
135
|
return {
|
|
135
136
|
viewportStartPos,
|
|
136
137
|
viewportEndPos,
|
|
137
|
-
startPos: 1,
|
|
138
|
+
startPos: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 0 : 1,
|
|
138
139
|
endPos: editorView.state.doc.nodeSize
|
|
139
140
|
};
|
|
140
141
|
}
|
|
@@ -143,7 +144,11 @@ class BatchDecorations {
|
|
|
143
144
|
top: y,
|
|
144
145
|
left: x
|
|
145
146
|
});
|
|
146
|
-
|
|
147
|
+
if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
148
|
+
return startPos ? startPos.pos : 0;
|
|
149
|
+
} else {
|
|
150
|
+
return startPos ? startPos.pos : 1;
|
|
151
|
+
}
|
|
147
152
|
}
|
|
148
153
|
getEndPos(editorView, y, x) {
|
|
149
154
|
const maxPos = editorView.state.doc.nodeSize;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
import classnames from 'classnames';
|
|
1
2
|
import { timestampToString } from '@atlaskit/editor-common/utils';
|
|
2
3
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
5
|
import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
|
|
5
6
|
import { isPromise, MentionNameStatus } from '@atlaskit/mention/types';
|
|
6
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
-
import {
|
|
8
|
+
import { getGlobalTheme } from '@atlaskit/tokens';
|
|
9
|
+
import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
|
|
8
10
|
export function getSelectedText(selection) {
|
|
9
11
|
let text = '';
|
|
10
12
|
const selectedContent = selection.content().content;
|
|
@@ -15,16 +17,41 @@ export function getSelectedText(selection) {
|
|
|
15
17
|
}
|
|
16
18
|
export const createDecorations = (selectedIndex, matches) => matches.map(({
|
|
17
19
|
start,
|
|
18
|
-
end
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
end,
|
|
21
|
+
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) => {
|
|
25
|
+
if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
26
|
+
const {
|
|
27
|
+
colorMode
|
|
28
|
+
} = getGlobalTheme();
|
|
29
|
+
if (isElement(nodeType)) {
|
|
30
|
+
const className = classnames(blockSearchMatchClass, {
|
|
31
|
+
[selectedBlockSearchMatchClass]: isSelected,
|
|
32
|
+
[darkModeSearchMatchClass]: colorMode === 'dark'
|
|
33
|
+
});
|
|
34
|
+
return Decoration.node(start, end, {
|
|
35
|
+
class: className
|
|
36
|
+
});
|
|
37
|
+
} else {
|
|
38
|
+
const className = classnames(searchMatchClass, {
|
|
39
|
+
[selectedSearchMatchClass]: isSelected,
|
|
40
|
+
[darkModeSearchMatchClass]: colorMode === 'dark'
|
|
41
|
+
});
|
|
42
|
+
return Decoration.inline(start, end, {
|
|
43
|
+
class: className
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
let className = searchMatchClass;
|
|
48
|
+
if (isSelected) {
|
|
49
|
+
className += ` ${selectedSearchMatchClass}`;
|
|
50
|
+
}
|
|
51
|
+
return Decoration.inline(start, end, {
|
|
52
|
+
class: className
|
|
53
|
+
});
|
|
24
54
|
}
|
|
25
|
-
return Decoration.inline(start, end, {
|
|
26
|
-
class: className
|
|
27
|
-
});
|
|
28
55
|
};
|
|
29
56
|
export function findMatches({
|
|
30
57
|
content,
|
|
@@ -60,7 +87,8 @@ export function findMatches({
|
|
|
60
87
|
matches.push({
|
|
61
88
|
start: pos + index,
|
|
62
89
|
end: pos + end,
|
|
63
|
-
canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined
|
|
90
|
+
canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined,
|
|
91
|
+
nodeType: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 'text' : undefined
|
|
64
92
|
});
|
|
65
93
|
index = text.indexOf(searchText, end);
|
|
66
94
|
}
|
|
@@ -87,11 +115,12 @@ export function findMatches({
|
|
|
87
115
|
matches.push({
|
|
88
116
|
start,
|
|
89
117
|
end: start + nodeSize,
|
|
90
|
-
canReplace: false
|
|
118
|
+
canReplace: false,
|
|
119
|
+
nodeType: 'status'
|
|
91
120
|
});
|
|
92
121
|
}
|
|
93
122
|
};
|
|
94
|
-
const
|
|
123
|
+
const collectNodeMatch = (textGrouping, node) => {
|
|
95
124
|
if (!textGrouping) {
|
|
96
125
|
return;
|
|
97
126
|
}
|
|
@@ -110,11 +139,37 @@ export function findMatches({
|
|
|
110
139
|
const start = pos;
|
|
111
140
|
matches.push({
|
|
112
141
|
start,
|
|
113
|
-
end: start + nodeSize,
|
|
114
|
-
canReplace: false
|
|
142
|
+
end: start + node.nodeSize,
|
|
143
|
+
canReplace: false,
|
|
144
|
+
nodeType: node.type.name
|
|
115
145
|
});
|
|
116
146
|
}
|
|
117
147
|
};
|
|
148
|
+
const collectCardTitleMatch = (node, pos) => {
|
|
149
|
+
var _api$card, _api$card$sharedState;
|
|
150
|
+
const cards = api === null || api === void 0 ? void 0 : (_api$card = api.card) === null || _api$card === void 0 ? void 0 : (_api$card$sharedState = _api$card.sharedState.currentState()) === null || _api$card$sharedState === void 0 ? void 0 : _api$card$sharedState.cards;
|
|
151
|
+
if (cards) {
|
|
152
|
+
const relevantCard = cards.find(card => card.url === node.attrs.url);
|
|
153
|
+
const title = relevantCard === null || relevantCard === void 0 ? void 0 : relevantCard.title;
|
|
154
|
+
if (relevantCard) {
|
|
155
|
+
if (title) {
|
|
156
|
+
collectNodeMatch({
|
|
157
|
+
text: title,
|
|
158
|
+
pos
|
|
159
|
+
}, node);
|
|
160
|
+
} else {
|
|
161
|
+
// when there is no title, e.g. in an error case like unauthorized
|
|
162
|
+
// the link card just shows the entire url as the title in inline card
|
|
163
|
+
if (node.type.name === 'inlineCard') {
|
|
164
|
+
collectNodeMatch({
|
|
165
|
+
text: node.attrs.url,
|
|
166
|
+
pos
|
|
167
|
+
}, node);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
};
|
|
118
173
|
if (searchTextLength > 0) {
|
|
119
174
|
content.descendants((node, pos) => {
|
|
120
175
|
if (node.isText) {
|
|
@@ -138,10 +193,10 @@ export function findMatches({
|
|
|
138
193
|
}, node.nodeSize);
|
|
139
194
|
break;
|
|
140
195
|
case 'date':
|
|
141
|
-
|
|
196
|
+
collectNodeMatch({
|
|
142
197
|
text: timestampToString(node.attrs.timestamp, getIntl ? getIntl() : null),
|
|
143
198
|
pos
|
|
144
|
-
}, node
|
|
199
|
+
}, node);
|
|
145
200
|
break;
|
|
146
201
|
case 'mention':
|
|
147
202
|
let text;
|
|
@@ -166,12 +221,17 @@ export function findMatches({
|
|
|
166
221
|
}
|
|
167
222
|
}
|
|
168
223
|
if (text) {
|
|
169
|
-
|
|
224
|
+
collectNodeMatch({
|
|
170
225
|
text,
|
|
171
226
|
pos
|
|
172
|
-
}, node
|
|
227
|
+
}, node);
|
|
173
228
|
}
|
|
174
229
|
break;
|
|
230
|
+
case 'inlineCard':
|
|
231
|
+
case 'blockCard':
|
|
232
|
+
case 'embedCard':
|
|
233
|
+
collectCardTitleMatch(node, pos);
|
|
234
|
+
break;
|
|
175
235
|
default:
|
|
176
236
|
break;
|
|
177
237
|
}
|
package/dist/es2019/ui/styles.js
CHANGED
|
@@ -9,6 +9,13 @@ import { css } from '@emotion/react';
|
|
|
9
9
|
import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
|
|
10
10
|
export const searchMatchClass = 'search-match';
|
|
11
11
|
export const selectedSearchMatchClass = 'selected-search-match';
|
|
12
|
+
export const blockSearchMatchClass = 'search-match-block';
|
|
13
|
+
export const selectedBlockSearchMatchClass = 'search-match-block-selected';
|
|
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';
|
|
12
19
|
export const findReplaceStyles = css({
|
|
13
20
|
[`.${searchMatchClass}`]: {
|
|
14
21
|
borderRadius: '3px',
|
|
@@ -18,4 +25,130 @@ export const findReplaceStyles = css({
|
|
|
18
25
|
[`.${selectedSearchMatchClass}`]: {
|
|
19
26
|
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
20
27
|
}
|
|
28
|
+
});
|
|
29
|
+
export const findReplaceStylesNew = css({
|
|
30
|
+
/** 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)"}`
|
|
35
|
+
},
|
|
36
|
+
[`.${selectedSearchMatchClass}`]: {
|
|
37
|
+
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
38
|
+
},
|
|
39
|
+
/** Block match styles */
|
|
40
|
+
|
|
41
|
+
/** Light mode */
|
|
42
|
+
|
|
43
|
+
/** Without node selection */
|
|
44
|
+
[`.${blockSearchMatchClass}`]: {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
46
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
47
|
+
boxShadow: `
|
|
48
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
|
|
49
|
+
inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"}
|
|
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'
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
[`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}`]: {
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
59
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
60
|
+
boxShadow: `
|
|
61
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
|
|
62
|
+
inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"}
|
|
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'
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
/** With node selection */
|
|
71
|
+
[`.${blockSearchMatchClass}.ak-editor-selected-node`]: {
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
73
|
+
'.loader-wrapper>div::after': {
|
|
74
|
+
boxShadow: `
|
|
75
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
|
|
76
|
+
inset 0 0 0 5px ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"},
|
|
77
|
+
0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
|
|
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`
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
[`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.ak-editor-selected-node`]: {
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
87
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
88
|
+
boxShadow: `
|
|
89
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"},
|
|
90
|
+
inset 0 0 0 4px ${"var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"},
|
|
91
|
+
0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
|
|
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`
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
/** Dark mode */
|
|
100
|
+
/** Without node selection */
|
|
101
|
+
[`.${blockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
|
|
102
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
103
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
104
|
+
boxShadow: `
|
|
105
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
|
|
106
|
+
inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"}
|
|
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'
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
[`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
116
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
117
|
+
boxShadow: `
|
|
118
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
|
|
119
|
+
inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}
|
|
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'
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
/** With node selection */
|
|
128
|
+
[`.${blockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node`]: {
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
130
|
+
'.loader-wrapper>div::after': {
|
|
131
|
+
boxShadow: `
|
|
132
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
|
|
133
|
+
inset 0 0 0 5px ${"var(--ds-background-accent-yellow-bolder-pressed, #533F04)"},
|
|
134
|
+
0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
|
|
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`
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
[`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node`]: {
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
143
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
144
|
+
boxShadow: `
|
|
145
|
+
inset 0 0 0 1px ${"var(--ds-background-accent-yellow-bolder, #946F00)"},
|
|
146
|
+
inset 0 0 0 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"},
|
|
147
|
+
0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
|
|
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`
|
|
152
|
+
}
|
|
153
|
+
}
|
|
21
154
|
});
|
|
@@ -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)]);
|
|
274
|
+
decorationSet = decorationSet.add(state.doc, [createDecoration(currentSelectedMatch.start, currentSelectedMatch.end, false, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? currentSelectedMatch.nodeType : undefined)]);
|
|
275
275
|
}
|
|
276
276
|
if (nextSelectedMatch) {
|
|
277
|
-
decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true)]);
|
|
277
|
+
decorationSet = decorationSet.add(state.doc, [createDecoration(nextSelectedMatch.start, nextSelectedMatch.end, true, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? nextSelectedMatch.nodeType : undefined)]);
|
|
278
278
|
}
|
|
279
279
|
return decorationSet;
|
|
280
280
|
};
|
|
@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
4
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
5
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
6
|
import { getPluginState } from '../plugin-factory';
|
|
6
7
|
import { createDecorations, findDecorationFromMatch } from './index';
|
|
7
8
|
|
|
@@ -242,7 +243,7 @@ var BatchDecorations = /*#__PURE__*/function () {
|
|
|
242
243
|
return {
|
|
243
244
|
viewportStartPos: viewportStartPos,
|
|
244
245
|
viewportEndPos: viewportEndPos,
|
|
245
|
-
startPos: 1,
|
|
246
|
+
startPos: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 0 : 1,
|
|
246
247
|
endPos: editorView.state.doc.nodeSize
|
|
247
248
|
};
|
|
248
249
|
}
|
|
@@ -253,7 +254,11 @@ var BatchDecorations = /*#__PURE__*/function () {
|
|
|
253
254
|
top: y,
|
|
254
255
|
left: x
|
|
255
256
|
});
|
|
256
|
-
|
|
257
|
+
if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
258
|
+
return startPos ? startPos.pos : 0;
|
|
259
|
+
} else {
|
|
260
|
+
return startPos ? startPos.pos : 1;
|
|
261
|
+
}
|
|
257
262
|
}
|
|
258
263
|
}, {
|
|
259
264
|
key: "getEndPos",
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import classnames from 'classnames';
|
|
1
3
|
import { timestampToString } from '@atlaskit/editor-common/utils';
|
|
2
4
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
5
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
6
|
import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
|
|
5
7
|
import { isPromise, MentionNameStatus } from '@atlaskit/mention/types';
|
|
6
8
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
-
import {
|
|
9
|
+
import { getGlobalTheme } from '@atlaskit/tokens';
|
|
10
|
+
import { searchMatchClass, selectedSearchMatchClass, blockSearchMatchClass, darkModeSearchMatchClass, selectedBlockSearchMatchClass } from '../../ui/styles';
|
|
8
11
|
export function getSelectedText(selection) {
|
|
9
12
|
var text = '';
|
|
10
13
|
var selectedContent = selection.content().content;
|
|
@@ -16,18 +19,38 @@ export function getSelectedText(selection) {
|
|
|
16
19
|
export var createDecorations = function createDecorations(selectedIndex, matches) {
|
|
17
20
|
return matches.map(function (_ref, i) {
|
|
18
21
|
var start = _ref.start,
|
|
19
|
-
end = _ref.end
|
|
20
|
-
|
|
22
|
+
end = _ref.end,
|
|
23
|
+
nodeType = _ref.nodeType;
|
|
24
|
+
return createDecoration(start, end, i === selectedIndex, nodeType);
|
|
21
25
|
});
|
|
22
26
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
var isElement = function isElement(nodeType) {
|
|
28
|
+
return nodeType === 'blockCard' || nodeType === 'embedCard' || nodeType === 'inlineCard' || nodeType === 'status' || nodeType === 'mention' || nodeType === 'date';
|
|
29
|
+
};
|
|
30
|
+
export var createDecoration = function createDecoration(start, end, isSelected, nodeType) {
|
|
31
|
+
if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
|
|
32
|
+
var _getGlobalTheme = getGlobalTheme(),
|
|
33
|
+
colorMode = _getGlobalTheme.colorMode;
|
|
34
|
+
if (isElement(nodeType)) {
|
|
35
|
+
var className = classnames(blockSearchMatchClass, _defineProperty(_defineProperty({}, selectedBlockSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
|
|
36
|
+
return Decoration.node(start, end, {
|
|
37
|
+
class: className
|
|
38
|
+
});
|
|
39
|
+
} else {
|
|
40
|
+
var _className = classnames(searchMatchClass, _defineProperty(_defineProperty({}, selectedSearchMatchClass, isSelected), darkModeSearchMatchClass, colorMode === 'dark'));
|
|
41
|
+
return Decoration.inline(start, end, {
|
|
42
|
+
class: _className
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
} else {
|
|
46
|
+
var _className2 = searchMatchClass;
|
|
47
|
+
if (isSelected) {
|
|
48
|
+
_className2 += " ".concat(selectedSearchMatchClass);
|
|
49
|
+
}
|
|
50
|
+
return Decoration.inline(start, end, {
|
|
51
|
+
class: _className2
|
|
52
|
+
});
|
|
27
53
|
}
|
|
28
|
-
return Decoration.inline(start, end, {
|
|
29
|
-
class: className
|
|
30
|
-
});
|
|
31
54
|
};
|
|
32
55
|
export function findMatches(_ref2) {
|
|
33
56
|
var content = _ref2.content,
|
|
@@ -59,7 +82,8 @@ export function findMatches(_ref2) {
|
|
|
59
82
|
matches.push({
|
|
60
83
|
start: pos + index,
|
|
61
84
|
end: pos + end,
|
|
62
|
-
canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined
|
|
85
|
+
canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? true : undefined,
|
|
86
|
+
nodeType: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? 'text' : undefined
|
|
63
87
|
});
|
|
64
88
|
index = text.indexOf(searchText, end);
|
|
65
89
|
}
|
|
@@ -82,11 +106,12 @@ export function findMatches(_ref2) {
|
|
|
82
106
|
matches.push({
|
|
83
107
|
start: start,
|
|
84
108
|
end: start + nodeSize,
|
|
85
|
-
canReplace: false
|
|
109
|
+
canReplace: false,
|
|
110
|
+
nodeType: 'status'
|
|
86
111
|
});
|
|
87
112
|
}
|
|
88
113
|
};
|
|
89
|
-
var
|
|
114
|
+
var collectNodeMatch = function collectNodeMatch(textGrouping, node) {
|
|
90
115
|
if (!textGrouping) {
|
|
91
116
|
return;
|
|
92
117
|
}
|
|
@@ -101,11 +126,39 @@ export function findMatches(_ref2) {
|
|
|
101
126
|
var start = pos;
|
|
102
127
|
matches.push({
|
|
103
128
|
start: start,
|
|
104
|
-
end: start + nodeSize,
|
|
105
|
-
canReplace: false
|
|
129
|
+
end: start + node.nodeSize,
|
|
130
|
+
canReplace: false,
|
|
131
|
+
nodeType: node.type.name
|
|
106
132
|
});
|
|
107
133
|
}
|
|
108
134
|
};
|
|
135
|
+
var collectCardTitleMatch = function collectCardTitleMatch(node, pos) {
|
|
136
|
+
var _api$card;
|
|
137
|
+
var cards = api === null || api === void 0 || (_api$card = api.card) === null || _api$card === void 0 || (_api$card = _api$card.sharedState.currentState()) === null || _api$card === void 0 ? void 0 : _api$card.cards;
|
|
138
|
+
if (cards) {
|
|
139
|
+
var relevantCard = cards.find(function (card) {
|
|
140
|
+
return card.url === node.attrs.url;
|
|
141
|
+
});
|
|
142
|
+
var title = relevantCard === null || relevantCard === void 0 ? void 0 : relevantCard.title;
|
|
143
|
+
if (relevantCard) {
|
|
144
|
+
if (title) {
|
|
145
|
+
collectNodeMatch({
|
|
146
|
+
text: title,
|
|
147
|
+
pos: pos
|
|
148
|
+
}, node);
|
|
149
|
+
} else {
|
|
150
|
+
// when there is no title, e.g. in an error case like unauthorized
|
|
151
|
+
// the link card just shows the entire url as the title in inline card
|
|
152
|
+
if (node.type.name === 'inlineCard') {
|
|
153
|
+
collectNodeMatch({
|
|
154
|
+
text: node.attrs.url,
|
|
155
|
+
pos: pos
|
|
156
|
+
}, node);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
};
|
|
109
162
|
if (searchTextLength > 0) {
|
|
110
163
|
content.descendants(function (node, pos) {
|
|
111
164
|
if (node.isText) {
|
|
@@ -129,10 +182,10 @@ export function findMatches(_ref2) {
|
|
|
129
182
|
}, node.nodeSize);
|
|
130
183
|
break;
|
|
131
184
|
case 'date':
|
|
132
|
-
|
|
185
|
+
collectNodeMatch({
|
|
133
186
|
text: timestampToString(node.attrs.timestamp, getIntl ? getIntl() : null),
|
|
134
187
|
pos: pos
|
|
135
|
-
}, node
|
|
188
|
+
}, node);
|
|
136
189
|
break;
|
|
137
190
|
case 'mention':
|
|
138
191
|
var text;
|
|
@@ -157,12 +210,17 @@ export function findMatches(_ref2) {
|
|
|
157
210
|
}
|
|
158
211
|
}
|
|
159
212
|
if (text) {
|
|
160
|
-
|
|
213
|
+
collectNodeMatch({
|
|
161
214
|
text: text,
|
|
162
215
|
pos: pos
|
|
163
|
-
}, node
|
|
216
|
+
}, node);
|
|
164
217
|
}
|
|
165
218
|
break;
|
|
219
|
+
case 'inlineCard':
|
|
220
|
+
case 'blockCard':
|
|
221
|
+
case 'embedCard':
|
|
222
|
+
collectCardTitleMatch(node, pos);
|
|
223
|
+
break;
|
|
166
224
|
default:
|
|
167
225
|
break;
|
|
168
226
|
}
|
package/dist/esm/ui/styles.js
CHANGED
|
@@ -10,10 +10,86 @@ import { css } from '@emotion/react';
|
|
|
10
10
|
import { N40A, N50A, N60A } from '@atlaskit/theme/colors';
|
|
11
11
|
export var searchMatchClass = 'search-match';
|
|
12
12
|
export var selectedSearchMatchClass = 'selected-search-match';
|
|
13
|
+
export var blockSearchMatchClass = 'search-match-block';
|
|
14
|
+
export var selectedBlockSearchMatchClass = 'search-match-block-selected';
|
|
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';
|
|
13
20
|
export var findReplaceStyles = css(_defineProperty(_defineProperty({}, ".".concat(searchMatchClass), {
|
|
14
21
|
borderRadius: '3px',
|
|
15
22
|
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
16
23
|
boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px 0 ".concat(N50A, ", 0 0 1px 0 ").concat(N60A), ")") + ', inset 0 0 0 1px ' + "var(--ds-border-input, ".concat("".concat(N40A), ")")
|
|
17
24
|
}), ".".concat(selectedSearchMatchClass), {
|
|
18
25
|
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
19
|
-
}));
|
|
26
|
+
}));
|
|
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)"
|
|
33
|
+
}), ".".concat(blockSearchMatchClass), _defineProperty({
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
35
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
37
|
+
}
|
|
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({
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
43
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
45
|
+
}
|
|
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({
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
51
|
+
'.loader-wrapper>div::after': {
|
|
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")
|
|
53
|
+
}
|
|
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({
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
59
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
61
|
+
}
|
|
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({
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
67
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
69
|
+
}
|
|
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({
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
75
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
77
|
+
}
|
|
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({
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
83
|
+
'.loader-wrapper>div::after': {
|
|
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")
|
|
85
|
+
}
|
|
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({
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
90
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
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")
|
|
92
|
+
}
|
|
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
|
+
})));
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
5
|
+
import type { CardPlugin } from '@atlaskit/editor-plugin-card';
|
|
5
6
|
import type { MentionsPlugin } from '@atlaskit/editor-plugin-mentions';
|
|
6
7
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
7
8
|
import type { FindReplacePluginState, FindReplaceToolbarButtonActionProps } from './types';
|
|
@@ -12,7 +13,8 @@ export type FindReplacePluginOptions = {
|
|
|
12
13
|
export type FindReplacePluginDependencies = [
|
|
13
14
|
OptionalPlugin<AnalyticsPlugin>,
|
|
14
15
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
15
|
-
OptionalPlugin<MentionsPlugin
|
|
16
|
+
OptionalPlugin<MentionsPlugin>,
|
|
17
|
+
OptionalPlugin<CardPlugin>
|
|
16
18
|
];
|
|
17
19
|
export type FindReplacePlugin = NextEditorPlugin<'findReplace', {
|
|
18
20
|
pluginConfiguration: FindReplacePluginOptions;
|
|
@@ -9,11 +9,8 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
|
9
9
|
import { FindReplacePlugin } from '../../findReplacePluginType';
|
|
10
10
|
import type { Match } from '../../types';
|
|
11
11
|
export declare function getSelectedText(selection: TextSelection): string;
|
|
12
|
-
export declare const createDecorations: (selectedIndex: number, matches:
|
|
13
|
-
|
|
14
|
-
end: number;
|
|
15
|
-
}[]) => Decoration[];
|
|
16
|
-
export declare const createDecoration: (start: number, end: number, isSelected?: boolean) => Decoration;
|
|
12
|
+
export declare const createDecorations: (selectedIndex: number, matches: Match[]) => Decoration[];
|
|
13
|
+
export declare const createDecoration: (start: number, end: number, isSelected?: Boolean, nodeType?: string) => Decoration;
|
|
17
14
|
type FindMatchesType = {
|
|
18
15
|
content: PmNode | Fragment;
|
|
19
16
|
searchText: string;
|
|
@@ -49,6 +49,8 @@ export type Match = {
|
|
|
49
49
|
end: number;
|
|
50
50
|
/** Boolean for whether the match can be replaced */
|
|
51
51
|
canReplace?: boolean;
|
|
52
|
+
/** Type of the node of the match */
|
|
53
|
+
nodeType?: string;
|
|
52
54
|
};
|
|
53
55
|
export type TextGrouping = {
|
|
54
56
|
/** The concatenated text across nodes */
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export declare const searchMatchClass = "search-match";
|
|
2
2
|
export declare const selectedSearchMatchClass = "selected-search-match";
|
|
3
|
+
export declare const blockSearchMatchClass = "search-match-block";
|
|
4
|
+
export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
|
|
5
|
+
export declare const darkModeSearchMatchClass = "search-match-dark";
|
|
3
6
|
export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
|
|
7
|
+
export declare const findReplaceStylesNew: import("@emotion/react").SerializedStyles;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
5
|
+
import type { CardPlugin } from '@atlaskit/editor-plugin-card';
|
|
5
6
|
import type { MentionsPlugin } from '@atlaskit/editor-plugin-mentions';
|
|
6
7
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
7
8
|
import type { FindReplacePluginState, FindReplaceToolbarButtonActionProps } from './types';
|
|
@@ -12,7 +13,8 @@ export type FindReplacePluginOptions = {
|
|
|
12
13
|
export type FindReplacePluginDependencies = [
|
|
13
14
|
OptionalPlugin<AnalyticsPlugin>,
|
|
14
15
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
15
|
-
OptionalPlugin<MentionsPlugin
|
|
16
|
+
OptionalPlugin<MentionsPlugin>,
|
|
17
|
+
OptionalPlugin<CardPlugin>
|
|
16
18
|
];
|
|
17
19
|
export type FindReplacePlugin = NextEditorPlugin<'findReplace', {
|
|
18
20
|
pluginConfiguration: FindReplacePluginOptions;
|
|
@@ -9,11 +9,8 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
|
9
9
|
import { FindReplacePlugin } from '../../findReplacePluginType';
|
|
10
10
|
import type { Match } from '../../types';
|
|
11
11
|
export declare function getSelectedText(selection: TextSelection): string;
|
|
12
|
-
export declare const createDecorations: (selectedIndex: number, matches:
|
|
13
|
-
|
|
14
|
-
end: number;
|
|
15
|
-
}[]) => Decoration[];
|
|
16
|
-
export declare const createDecoration: (start: number, end: number, isSelected?: boolean) => Decoration;
|
|
12
|
+
export declare const createDecorations: (selectedIndex: number, matches: Match[]) => Decoration[];
|
|
13
|
+
export declare const createDecoration: (start: number, end: number, isSelected?: Boolean, nodeType?: string) => Decoration;
|
|
17
14
|
type FindMatchesType = {
|
|
18
15
|
content: PmNode | Fragment;
|
|
19
16
|
searchText: string;
|
|
@@ -49,6 +49,8 @@ export type Match = {
|
|
|
49
49
|
end: number;
|
|
50
50
|
/** Boolean for whether the match can be replaced */
|
|
51
51
|
canReplace?: boolean;
|
|
52
|
+
/** Type of the node of the match */
|
|
53
|
+
nodeType?: string;
|
|
52
54
|
};
|
|
53
55
|
export type TextGrouping = {
|
|
54
56
|
/** The concatenated text across nodes */
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export declare const searchMatchClass = "search-match";
|
|
2
2
|
export declare const selectedSearchMatchClass = "selected-search-match";
|
|
3
|
+
export declare const blockSearchMatchClass = "search-match-block";
|
|
4
|
+
export declare const selectedBlockSearchMatchClass = "search-match-block-selected";
|
|
5
|
+
export declare const darkModeSearchMatchClass = "search-match-dark";
|
|
3
6
|
export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
|
|
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.
|
|
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",
|
|
@@ -35,12 +35,13 @@
|
|
|
35
35
|
"@atlaskit/button": "^23.2.0",
|
|
36
36
|
"@atlaskit/editor-common": "^107.2.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^2.3.0",
|
|
38
|
+
"@atlaskit/editor-plugin-card": "^6.6.0",
|
|
38
39
|
"@atlaskit/editor-plugin-mentions": "^4.7.0",
|
|
39
40
|
"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
|
|
40
41
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
41
42
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
42
43
|
"@atlaskit/form": "^12.0.0",
|
|
43
|
-
"@atlaskit/icon": "^27.
|
|
44
|
+
"@atlaskit/icon": "^27.2.0",
|
|
44
45
|
"@atlaskit/mention": "^24.2.0",
|
|
45
46
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
46
47
|
"@atlaskit/primitives": "^14.9.0",
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
"@atlaskit/tooltip": "^20.3.0",
|
|
52
53
|
"@babel/runtime": "^7.0.0",
|
|
53
54
|
"@emotion/react": "^11.7.1",
|
|
55
|
+
"classnames": "^2.2.5",
|
|
54
56
|
"lodash": "^4.17.21",
|
|
55
57
|
"raf-schd": "^4.0.3"
|
|
56
58
|
},
|