@atlaskit/editor-common 84.2.0 → 84.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/afm-jira/tsconfig.json +3 -0
- package/dist/cjs/element-browser/components/CategoryList.js +5 -18
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +5 -5
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/cjs/extensibility/ExtensionNodeWrapper.js +2 -2
- package/dist/cjs/mark/commands.js +2 -7
- package/dist/cjs/messages/annotation.js +1 -1
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +3 -2
- package/dist/cjs/styles/shared/annotation.js +2 -34
- package/dist/cjs/styles/shared/smartCard.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/utils/annotation/index.js +10 -18
- package/dist/cjs/utils/index.js +5 -1
- package/dist/cjs/utils/scroll-gutter.js +3 -0
- package/dist/cjs/utils/validator.js +5 -5
- package/dist/cjs/whitespace/index.js +18 -0
- package/dist/es2019/element-browser/components/CategoryList.js +5 -14
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +6 -6
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/es2019/extensibility/ExtensionNodeWrapper.js +1 -1
- package/dist/es2019/mark/commands.js +3 -10
- package/dist/es2019/messages/annotation.js +1 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +2 -1
- package/dist/es2019/styles/shared/annotation.js +3 -35
- package/dist/es2019/styles/shared/smartCard.js +2 -2
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/utils/annotation/index.js +11 -21
- package/dist/es2019/utils/index.js +4 -1
- package/dist/es2019/utils/scroll-gutter.js +3 -0
- package/dist/es2019/utils/validator.js +6 -6
- package/dist/es2019/whitespace/index.js +1 -0
- package/dist/esm/element-browser/components/CategoryList.js +5 -18
- package/dist/esm/element-browser/components/ElementList/ElementList.js +6 -6
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/esm/extensibility/ExtensionNodeWrapper.js +1 -1
- package/dist/esm/mark/commands.js +3 -8
- package/dist/esm/messages/annotation.js +1 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/react-node-view/getInlineNodeViewProducer.js +2 -1
- package/dist/esm/styles/shared/annotation.js +3 -35
- package/dist/esm/styles/shared/smartCard.js +2 -2
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/utils/annotation/index.js +11 -19
- package/dist/esm/utils/index.js +4 -1
- package/dist/esm/utils/scroll-gutter.js +3 -0
- package/dist/esm/utils/validator.js +6 -6
- package/dist/esm/whitespace/index.js +1 -0
- package/dist/types/types/annotation/index.d.ts +2 -2
- package/dist/types/utils/annotation/index.d.ts +2 -2
- package/dist/types/utils/index.d.ts +4 -1
- package/dist/types/utils/scroll-gutter.d.ts +3 -0
- package/dist/types/whitespace/index.d.ts +1 -0
- package/dist/types-ts4.5/types/annotation/index.d.ts +2 -2
- package/dist/types-ts4.5/utils/annotation/index.d.ts +2 -2
- package/dist/types-ts4.5/utils/index.d.ts +4 -1
- package/dist/types-ts4.5/utils/scroll-gutter.d.ts +3 -0
- package/dist/types-ts4.5/whitespace/index.d.ts +1 -0
- package/package.json +3 -8
- package/whitespace/package.json +15 -0
- /package/dist/cjs/{utils → whitespace}/whitespace.js +0 -0
- /package/dist/es2019/{utils → whitespace}/whitespace.js +0 -0
- /package/dist/esm/{utils → whitespace}/whitespace.js +0 -0
- /package/dist/types/{utils → whitespace}/whitespace.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → whitespace}/whitespace.d.ts +0 -0
|
@@ -255,7 +255,7 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
|
|
|
255
255
|
return _objectSpread({
|
|
256
256
|
type: type,
|
|
257
257
|
attrs: attrs
|
|
258
|
-
}, (0, _platformFeatureFlags.
|
|
258
|
+
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? {
|
|
259
259
|
marks: marks
|
|
260
260
|
} : {});
|
|
261
261
|
}
|
|
@@ -267,7 +267,7 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
|
|
|
267
267
|
return _objectSpread({
|
|
268
268
|
type: type,
|
|
269
269
|
attrs: attrs
|
|
270
|
-
}, (0, _platformFeatureFlags.
|
|
270
|
+
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? {
|
|
271
271
|
marks: marks
|
|
272
272
|
} : {});
|
|
273
273
|
}
|
|
@@ -279,7 +279,7 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
|
|
|
279
279
|
return _objectSpread({
|
|
280
280
|
type: type,
|
|
281
281
|
attrs: attrs
|
|
282
|
-
}, (0, _platformFeatureFlags.
|
|
282
|
+
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? {
|
|
283
283
|
marks: marks
|
|
284
284
|
} : {});
|
|
285
285
|
}
|
|
@@ -302,7 +302,7 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
|
|
|
302
302
|
return _objectSpread({
|
|
303
303
|
type: type,
|
|
304
304
|
attrs: attrs
|
|
305
|
-
}, (0, _platformFeatureFlags.
|
|
305
|
+
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? {
|
|
306
306
|
marks: marks
|
|
307
307
|
} : {});
|
|
308
308
|
}
|
|
@@ -509,7 +509,7 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
|
|
|
509
509
|
text: mentionText,
|
|
510
510
|
accessLevel: ''
|
|
511
511
|
}
|
|
512
|
-
}, (0, _platformFeatureFlags.
|
|
512
|
+
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? {
|
|
513
513
|
marks: marks
|
|
514
514
|
} : {});
|
|
515
515
|
if (mentionAccess) {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ZERO_WIDTH_JOINER", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _whitespace.ZERO_WIDTH_JOINER;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ZERO_WIDTH_SPACE", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _whitespace.ZERO_WIDTH_SPACE;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _whitespace = require("./whitespace");
|
|
@@ -6,7 +6,6 @@ import React, { Fragment, memo, useCallback } from 'react';
|
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
8
8
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { B400, B50, N800 } from '@atlaskit/theme/colors';
|
|
11
10
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
12
11
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
|
|
@@ -16,19 +15,16 @@ function CategoryList({
|
|
|
16
15
|
categories = [],
|
|
17
16
|
...props
|
|
18
17
|
}) {
|
|
19
|
-
const [focusedCategoryIndexState, setFocusedCategoryIndexState] = React.useState(null);
|
|
20
18
|
const {
|
|
21
|
-
focusedCategoryIndex
|
|
22
|
-
setFocusedCategoryIndex
|
|
19
|
+
focusedCategoryIndex,
|
|
20
|
+
setFocusedCategoryIndex,
|
|
23
21
|
onSelectCategory
|
|
24
22
|
} = props;
|
|
25
|
-
const focusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
|
|
26
|
-
const setFocusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
|
|
27
23
|
return jsx(Fragment, null, categories.map((category, index) => {
|
|
28
24
|
const categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
|
|
29
25
|
let selectNextCategory;
|
|
30
26
|
let selectPreviousCategory;
|
|
31
|
-
if (
|
|
27
|
+
if (categoriesLength > 1) {
|
|
32
28
|
selectNextCategory = () => {
|
|
33
29
|
if (index !== categoriesLength - 1) {
|
|
34
30
|
setFocusedCategoryIndex(index + 1);
|
|
@@ -77,9 +73,6 @@ function CategoryListItem({
|
|
|
77
73
|
}) {
|
|
78
74
|
const ref = useFocus(focus);
|
|
79
75
|
const onClick = useCallback(() => {
|
|
80
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
81
|
-
onSelectCategory(category);
|
|
82
|
-
}
|
|
83
76
|
/**
|
|
84
77
|
* When user double clicks on same category, focus on first item.
|
|
85
78
|
*/
|
|
@@ -88,9 +81,7 @@ function CategoryListItem({
|
|
|
88
81
|
} else {
|
|
89
82
|
setFocusedCategoryIndex(index);
|
|
90
83
|
}
|
|
91
|
-
|
|
92
|
-
onSelectCategory(category);
|
|
93
|
-
}
|
|
84
|
+
onSelectCategory(category);
|
|
94
85
|
fireAnalyticsEvent(createAnalyticsEvent)({
|
|
95
86
|
payload: {
|
|
96
87
|
action: ACTION.CLICKED,
|
|
@@ -168,7 +159,7 @@ function CategoryListItem({
|
|
|
168
159
|
isSelected: selectedCategory === category.name,
|
|
169
160
|
onClick: onClick,
|
|
170
161
|
onFocus: onFocus,
|
|
171
|
-
onKeyDown:
|
|
162
|
+
onKeyDown: onKeyDown,
|
|
172
163
|
theme: getTheme,
|
|
173
164
|
role: "tab",
|
|
174
165
|
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
@@ -12,7 +12,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
|
12
12
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
14
14
|
import { ButtonItem } from '@atlaskit/menu';
|
|
15
|
-
import {
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
16
|
import { B100, N200 } from '@atlaskit/theme/colors';
|
|
17
17
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
18
18
|
import Tooltip from '@atlaskit/tooltip';
|
|
@@ -122,7 +122,7 @@ function ElementList({
|
|
|
122
122
|
,
|
|
123
123
|
className: "element-item-wrapper",
|
|
124
124
|
css: elementItemWrapper,
|
|
125
|
-
onKeyDown:
|
|
125
|
+
onKeyDown: e => {
|
|
126
126
|
if (e.key === 'Tab') {
|
|
127
127
|
if (e.shiftKey && index === 0) {
|
|
128
128
|
if (setFocusedCategoryIndex) {
|
|
@@ -142,7 +142,7 @@ function ElementList({
|
|
|
142
142
|
setFocusedItemIndex(items.length - 1);
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
}
|
|
145
|
+
}
|
|
146
146
|
}, jsx(MemoizedElementItem, _extends({
|
|
147
147
|
inlineMode: !fullMode,
|
|
148
148
|
index: index,
|
|
@@ -177,7 +177,7 @@ function ElementList({
|
|
|
177
177
|
,
|
|
178
178
|
className: "element-item-wrapper",
|
|
179
179
|
css: elementItemWrapper,
|
|
180
|
-
onKeyDown:
|
|
180
|
+
onKeyDown: e => {
|
|
181
181
|
if (e.key === 'Tab') {
|
|
182
182
|
if (e.shiftKey && index === 0) {
|
|
183
183
|
if (setFocusedCategoryIndex) {
|
|
@@ -197,7 +197,7 @@ function ElementList({
|
|
|
197
197
|
setFocusedItemIndex(items.length - 1);
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
|
-
}
|
|
200
|
+
}
|
|
201
201
|
}, jsx(MemoizedElementItem, _extends({
|
|
202
202
|
inlineMode: !fullMode,
|
|
203
203
|
index: index,
|
|
@@ -226,7 +226,7 @@ function ElementList({
|
|
|
226
226
|
disableWidth: true
|
|
227
227
|
}, ({
|
|
228
228
|
height
|
|
229
|
-
}) =>
|
|
229
|
+
}) => fg('platform.editor.a11y-element-browser') ? jsx(Grid, _extends({
|
|
230
230
|
cellRenderer: gridCellRenderer,
|
|
231
231
|
height: height,
|
|
232
232
|
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
@@ -6,7 +6,6 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { FormattedMessage } from 'react-intl-next';
|
|
8
8
|
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
11
10
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
|
|
12
11
|
import useContainerWidth from '../hooks/use-container-width';
|
|
@@ -107,6 +106,7 @@ const categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
|
107
106
|
flexDirection: 'column'
|
|
108
107
|
});
|
|
109
108
|
function StatelessElementBrowser(props) {
|
|
109
|
+
var _props$categories;
|
|
110
110
|
const {
|
|
111
111
|
items,
|
|
112
112
|
onSelectItem,
|
|
@@ -125,21 +125,18 @@ function StatelessElementBrowser(props) {
|
|
|
125
125
|
const [columnCount, setColumnCount] = useState(1);
|
|
126
126
|
let selectedCategoryIndex;
|
|
127
127
|
let isFocusSearch;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
if (
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
// clear the flag if the search happens after a user has chosen the category
|
|
137
|
-
categoryBeenChosen.current = false;
|
|
138
|
-
}
|
|
139
|
-
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
140
|
-
// After user pick some category the category should stay focused.
|
|
141
|
-
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
128
|
+
selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(category => {
|
|
129
|
+
return category.name === selectedCategory;
|
|
130
|
+
});
|
|
131
|
+
if (showCategories) {
|
|
132
|
+
const isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
|
|
133
|
+
if (!isEmptySearchTerm) {
|
|
134
|
+
// clear the flag if the search happens after a user has chosen the category
|
|
135
|
+
categoryBeenChosen.current = false;
|
|
142
136
|
}
|
|
137
|
+
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
138
|
+
// After user pick some category the category should stay focused.
|
|
139
|
+
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
143
140
|
}
|
|
144
141
|
const {
|
|
145
142
|
selectedItemIndex,
|
|
@@ -182,22 +179,14 @@ function StatelessElementBrowser(props) {
|
|
|
182
179
|
*/
|
|
183
180
|
const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
|
|
184
181
|
const onItemsEnterTabKeyPress = useCallback(e => {
|
|
185
|
-
if (
|
|
186
|
-
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
} else {
|
|
190
|
-
if (e.key !== 'Enter') {
|
|
191
|
-
return;
|
|
192
|
-
}
|
|
182
|
+
if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
|
|
183
|
+
return;
|
|
193
184
|
}
|
|
194
|
-
if (
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
185
|
+
if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
|
|
186
|
+
// A11Y: Set focus on first category if tab pressed on search
|
|
187
|
+
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
return;
|
|
201
190
|
}
|
|
202
191
|
if (onInsertItem && selectedItem != null) {
|
|
203
192
|
onInsertItem(selectedItem);
|
|
@@ -248,7 +237,7 @@ function StatelessElementBrowser(props) {
|
|
|
248
237
|
focusedCategoryIndex: focusedCategoryIndex,
|
|
249
238
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
250
239
|
selectedCategoryIndex: selectedCategoryIndex,
|
|
251
|
-
onSelectCategory:
|
|
240
|
+
onSelectCategory: onSelectCategoryCB
|
|
252
241
|
})));
|
|
253
242
|
}
|
|
254
243
|
function MobileBrowser({
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useCallback, useEffect, useReducer, useRef } from 'react';
|
|
2
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
4
|
* a custom hook that handles keyboard navigation for Arrow keys based on a
|
|
@@ -65,7 +64,6 @@ const reducer = (state, action) => {
|
|
|
65
64
|
case ACTIONS.MOVE:
|
|
66
65
|
return moveReducer(state, action);
|
|
67
66
|
}
|
|
68
|
-
return state;
|
|
69
67
|
};
|
|
70
68
|
const moveReducer = (state, action) => {
|
|
71
69
|
const {
|
|
@@ -198,13 +196,11 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
198
196
|
...initialState,
|
|
199
197
|
listSize
|
|
200
198
|
};
|
|
201
|
-
if
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
});
|
|
207
|
-
}
|
|
199
|
+
// A11Y: if categories exist ,on the initial render search element should receive focus.
|
|
200
|
+
// After user pick some category the category should stay focused.
|
|
201
|
+
payload = Object.assign(payload, {
|
|
202
|
+
focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
|
|
203
|
+
});
|
|
208
204
|
dispatch({
|
|
209
205
|
type: ACTIONS.UPDATE_STATE,
|
|
210
206
|
payload
|
|
@@ -217,20 +213,15 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
217
213
|
focusOnSearch: false,
|
|
218
214
|
focusOnViewMore: false
|
|
219
215
|
};
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
});
|
|
224
|
-
}
|
|
216
|
+
payload = Object.assign(payload, {
|
|
217
|
+
focusedCategoryIndex: undefined
|
|
218
|
+
});
|
|
225
219
|
dispatch({
|
|
226
220
|
type: ACTIONS.UPDATE_STATE,
|
|
227
221
|
payload
|
|
228
222
|
});
|
|
229
223
|
}, [dispatch]);
|
|
230
224
|
const setFocusedCategoryIndex = useCallback(index => {
|
|
231
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
232
|
-
return;
|
|
233
|
-
}
|
|
234
225
|
const payload = {
|
|
235
226
|
focusOnSearch: false,
|
|
236
227
|
focusOnViewMore: false,
|
|
@@ -4,7 +4,7 @@ import React from 'react';
|
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import classnames from 'classnames';
|
|
7
|
-
import { ZERO_WIDTH_SPACE } from '../
|
|
7
|
+
import { ZERO_WIDTH_SPACE } from '../whitespace';
|
|
8
8
|
const styles = css({
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
10
10
|
'&.inline-extension': {
|
|
@@ -2,7 +2,7 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
// eslint-disable-next-line no-duplicate-imports
|
|
3
3
|
|
|
4
4
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
5
|
-
import {
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
const SMART_TO_ASCII = {
|
|
7
7
|
'…': '...',
|
|
8
8
|
'→': '->',
|
|
@@ -150,24 +150,17 @@ export const applyMarkOnRange = (from, to, removeMark, mark, tr) => {
|
|
|
150
150
|
const {
|
|
151
151
|
code
|
|
152
152
|
} = schema.marks;
|
|
153
|
-
const {
|
|
154
|
-
inlineCard
|
|
155
|
-
} = schema.nodes;
|
|
156
153
|
if (mark.type === code) {
|
|
157
|
-
|
|
154
|
+
fg('platform.editor.simplify-inline-cards-in-code-blocks_jw6t1') ? transformNonTextNodesToText(from, to, tr) : transformSmartCharsMentionsAndEmojis(from, to, tr);
|
|
158
155
|
}
|
|
159
156
|
tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (node, pos) => {
|
|
160
|
-
if (
|
|
157
|
+
if (fg('editor_inline_comments_on_inline_nodes')) {
|
|
161
158
|
if (!node.isText) {
|
|
162
159
|
const isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
|
|
163
160
|
if (!isAllowedInlineNode) {
|
|
164
161
|
return true;
|
|
165
162
|
}
|
|
166
163
|
}
|
|
167
|
-
} else if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
|
|
168
|
-
if (!node.isText && node.type !== inlineCard) {
|
|
169
|
-
return true;
|
|
170
|
-
}
|
|
171
164
|
} else {
|
|
172
165
|
if (!node.isText) {
|
|
173
166
|
return true;
|
|
@@ -5,7 +5,7 @@ export const annotationMessages = defineMessages({
|
|
|
5
5
|
defaultMessage: 'Comment',
|
|
6
6
|
description: 'Create/add an inline comment based on the users selection'
|
|
7
7
|
},
|
|
8
|
-
// TODO: Remove this message when the
|
|
8
|
+
// TODO: Remove this message when the editor_inline_comments_on_inline_nodes FF is removed
|
|
9
9
|
createCommentInvalid: {
|
|
10
10
|
id: 'fabric.editor.createCommentInvalid',
|
|
11
11
|
defaultMessage: 'You can only comment on text and headings',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "84.
|
|
4
|
+
const packageVersion = "84.3.1";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -6,7 +6,8 @@ import React from 'react';
|
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
|
|
8
8
|
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
|
9
|
-
import { analyticsEventKey, browser, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered
|
|
9
|
+
import { analyticsEventKey, browser, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
|
|
10
|
+
import { ZERO_WIDTH_SPACE } from '../whitespace';
|
|
10
11
|
import { generateUniqueNodeKey } from './generateUniqueNodeKey';
|
|
11
12
|
export const inlineNodeViewClassname = 'inlineNodeView';
|
|
12
13
|
function createNodeView({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
import {
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
5
5
|
export const annotationPrefix = 'ak-editor-annotation';
|
|
6
6
|
export const AnnotationSharedClassNames = {
|
|
@@ -17,7 +17,7 @@ export const BlockAnnotationSharedClassNames = {
|
|
|
17
17
|
const Yellow100 = 'rgb(255, 247, 214)';
|
|
18
18
|
const Y200a = 'rgba(255, 196, 0, 0.82)';
|
|
19
19
|
export const AnnotationSharedCSSByState = () => {
|
|
20
|
-
if (
|
|
20
|
+
if (fg('editor_inline_comments_on_inline_nodes')) {
|
|
21
21
|
// NOTE: These styles are shared between renderer and editor. Sometimes they
|
|
22
22
|
// need different selectors and other times they apply the same attributes
|
|
23
23
|
// in a different way. For example in renderer the focus styles are an
|
|
@@ -47,38 +47,6 @@ export const AnnotationSharedCSSByState = () => {
|
|
|
47
47
|
borderBottomColor: `var(--ds-border-accent-yellow, ${Y200a})`
|
|
48
48
|
})
|
|
49
49
|
};
|
|
50
|
-
} else if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
|
|
51
|
-
return {
|
|
52
|
-
focus: css({
|
|
53
|
-
background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
|
|
54
|
-
borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
|
|
55
|
-
boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
|
|
56
|
-
cursor: 'pointer',
|
|
57
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
58
|
-
'&:has(.card)': {
|
|
59
|
-
fontSize: '1.5rem',
|
|
60
|
-
lineHeight: '1.2rem',
|
|
61
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
62
|
-
'& > *': {
|
|
63
|
-
fontSize: '16px'
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}),
|
|
67
|
-
blur: css({
|
|
68
|
-
background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
|
|
69
|
-
borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
|
|
70
|
-
cursor: 'pointer',
|
|
71
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
72
|
-
'&:has(.card)': {
|
|
73
|
-
fontSize: '1.5rem',
|
|
74
|
-
lineHeight: '1.2rem',
|
|
75
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
76
|
-
'& > *': {
|
|
77
|
-
fontSize: '16px'
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
})
|
|
81
|
-
};
|
|
82
50
|
} else {
|
|
83
51
|
return {
|
|
84
52
|
focus: css({
|
|
@@ -98,7 +66,7 @@ export const AnnotationSharedCSSByState = () => {
|
|
|
98
66
|
};
|
|
99
67
|
}
|
|
100
68
|
};
|
|
101
|
-
export const annotationSharedStyles = () =>
|
|
69
|
+
export const annotationSharedStyles = () => fg('editor_inline_comments_on_inline_nodes') ?
|
|
102
70
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
|
|
103
71
|
css`
|
|
104
72
|
.ProseMirror {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import {
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { N0, N40 } from '@atlaskit/theme/colors';
|
|
6
6
|
import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
7
7
|
import { SmartCardSharedCssClassName } from './smart-card';
|
|
@@ -14,7 +14,7 @@ export const smartCardStyles = css`
|
|
|
14
14
|
max-width: calc(100% - 20px);
|
|
15
15
|
vertical-align: top;
|
|
16
16
|
word-break: break-all;
|
|
17
|
-
${
|
|
17
|
+
${fg('editor_inline_comments_on_inline_nodes') ? `.card-with-comment {
|
|
18
18
|
background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
|
|
19
19
|
border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
|
|
20
20
|
box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
|
|
@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
9
9
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
10
10
|
import Layer from '../Layer';
|
|
11
11
|
const packageName = "@atlaskit/editor-common";
|
|
12
|
-
const packageVersion = "84.
|
|
12
|
+
const packageVersion = "84.3.1";
|
|
13
13
|
const halfFocusRing = 1;
|
|
14
14
|
const dropOffset = '0, 8';
|
|
15
15
|
class DropList extends Component {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AnnotationTypes } from '@atlaskit/adf-schema';
|
|
2
|
-
import {
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
export const canApplyAnnotationOnRange = (rangeSelection, doc, schema) => {
|
|
4
4
|
const {
|
|
5
5
|
from,
|
|
@@ -8,31 +8,21 @@ export const canApplyAnnotationOnRange = (rangeSelection, doc, schema) => {
|
|
|
8
8
|
if (isNaN(from + to) || to - from <= 0 || to < 0 || from < 0) {
|
|
9
9
|
return false;
|
|
10
10
|
}
|
|
11
|
-
const {
|
|
12
|
-
inlineCard
|
|
13
|
-
} = schema.nodes;
|
|
14
11
|
let foundInvalid = false;
|
|
15
12
|
doc.nodesBetween(rangeSelection.from, rangeSelection.to, (node, _pos, parent) => {
|
|
16
13
|
// Special exception for hardBreak nodes
|
|
17
14
|
if (schema.nodes.hardBreak === node.type) {
|
|
18
15
|
return false;
|
|
19
16
|
}
|
|
17
|
+
|
|
20
18
|
// For block elements or text nodes, we want to check
|
|
21
19
|
// if annotations are allowed inside this tree
|
|
22
20
|
// or if we're leaf and not text
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
foundInvalid = true;
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
} else {
|
|
32
|
-
if (node.isInline && !node.isText && node.type !== inlineCard || node.isLeaf && !node.isText && node.type !== inlineCard || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
|
|
33
|
-
foundInvalid = true;
|
|
34
|
-
return false;
|
|
35
|
-
}
|
|
21
|
+
if (fg('editor_inline_comments_on_inline_nodes')) {
|
|
22
|
+
const isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
|
|
23
|
+
if (node.isInline && !node.isText && !isAllowedInlineNode || node.isLeaf && !node.isText && !isAllowedInlineNode || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
|
|
24
|
+
foundInvalid = true;
|
|
25
|
+
return false;
|
|
36
26
|
}
|
|
37
27
|
} else {
|
|
38
28
|
if (node.isInline && !node.isText || node.isLeaf && !node.isText || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
|
|
@@ -111,7 +101,7 @@ export function getRangeInlineNodeNames({
|
|
|
111
101
|
doc,
|
|
112
102
|
pos
|
|
113
103
|
}) {
|
|
114
|
-
if (!
|
|
104
|
+
if (!fg('editor_inline_comments_on_inline_nodes')) {
|
|
115
105
|
return undefined;
|
|
116
106
|
}
|
|
117
107
|
let nodeNames = new Set();
|
|
@@ -129,13 +119,13 @@ export function getRangeInlineNodeNames({
|
|
|
129
119
|
/**
|
|
130
120
|
* This function returns a list of node types that are wrapped by an annotation mark.
|
|
131
121
|
*
|
|
132
|
-
* The `undefined` will be returned if `
|
|
122
|
+
* The `undefined` will be returned if `editor_inline_comments_on_inline_nodes` is off.
|
|
133
123
|
*
|
|
134
124
|
* @todo: Do not forget to remove `undefined` when the
|
|
135
|
-
* `
|
|
125
|
+
* `editor_inline_comments_on_inline_nodes` is removed.
|
|
136
126
|
*/
|
|
137
127
|
export function getAnnotationInlineNodeTypes(state, annotationId) {
|
|
138
|
-
if (!
|
|
128
|
+
if (!fg('editor_inline_comments_on_inline_nodes')) {
|
|
139
129
|
return undefined;
|
|
140
130
|
}
|
|
141
131
|
const mark = state.schema.marks.annotation.create({
|
|
@@ -27,7 +27,10 @@ export { hasMergedCell, calcTableColumnWidths, convertProsemirrorTableNodeToArra
|
|
|
27
27
|
export { createCompareNodes } from './compareNodes';
|
|
28
28
|
export { compose } from './compose';
|
|
29
29
|
export { isTextInput } from './is-text-input';
|
|
30
|
-
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated - [ED-23844] moving to own entry point @atlaskit/editor-common/whitespace
|
|
32
|
+
*/
|
|
33
|
+
export { ZERO_WIDTH_SPACE, ZERO_WIDTH_JOINER } from '../whitespace';
|
|
31
34
|
export { shouldForceTracking } from './should-force-tracking';
|
|
32
35
|
export { getModeFromTheme } from './getModeFromTheme';
|
|
33
36
|
export { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './get-performance-options';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
|
|
2
2
|
import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
|
|
3
|
-
import {
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
export const ADFStages = {
|
|
5
5
|
FINAL: 'final',
|
|
6
6
|
STAGE_0: 'stage0'
|
|
@@ -236,7 +236,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
|
|
|
236
236
|
return {
|
|
237
237
|
type,
|
|
238
238
|
attrs,
|
|
239
|
-
...(
|
|
239
|
+
...(fg('editor_inline_comments_on_inline_nodes') ? {
|
|
240
240
|
marks
|
|
241
241
|
} : {})
|
|
242
242
|
};
|
|
@@ -249,7 +249,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
|
|
|
249
249
|
return {
|
|
250
250
|
type,
|
|
251
251
|
attrs,
|
|
252
|
-
...(
|
|
252
|
+
...(fg('editor_inline_comments_on_inline_nodes') ? {
|
|
253
253
|
marks
|
|
254
254
|
} : {})
|
|
255
255
|
};
|
|
@@ -262,7 +262,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
|
|
|
262
262
|
return {
|
|
263
263
|
type,
|
|
264
264
|
attrs,
|
|
265
|
-
...(
|
|
265
|
+
...(fg('editor_inline_comments_on_inline_nodes') ? {
|
|
266
266
|
marks
|
|
267
267
|
} : {})
|
|
268
268
|
};
|
|
@@ -286,7 +286,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
|
|
|
286
286
|
return {
|
|
287
287
|
type,
|
|
288
288
|
attrs,
|
|
289
|
-
...(
|
|
289
|
+
...(fg('editor_inline_comments_on_inline_nodes') ? {
|
|
290
290
|
marks
|
|
291
291
|
} : {})
|
|
292
292
|
};
|
|
@@ -498,7 +498,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
|
|
|
498
498
|
text: mentionText,
|
|
499
499
|
accessLevel: ''
|
|
500
500
|
},
|
|
501
|
-
...(
|
|
501
|
+
...(fg('editor_inline_comments_on_inline_nodes') ? {
|
|
502
502
|
marks
|
|
503
503
|
} : {})
|
|
504
504
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ZERO_WIDTH_SPACE, ZERO_WIDTH_JOINER } from './whitespace';
|