@atlaskit/editor-common 114.1.1 → 114.2.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/card/ui/assets/card.js +13 -7
- package/dist/cjs/card/ui/assets/embed.js +13 -7
- package/dist/cjs/card/ui/assets/inline.js +13 -7
- package/dist/cjs/card/ui/assets/url.js +13 -7
- package/dist/cjs/extensibility/ExtensionNodeWrapper.js +1 -1
- package/dist/cjs/extensibility/extensionNodeView.js +1 -1
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/resizer/BreakoutResizer.js +7 -4
- package/dist/cjs/resizer/Resizer.js +33 -12
- package/dist/cjs/table/content-mode.js +62 -0
- package/dist/cjs/table/index.js +19 -0
- package/dist/cjs/toolbar/context.js +14 -4
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui/MediaSingle/styled.js +1 -1
- package/dist/es2019/card/ui/assets/card.js +14 -7
- package/dist/es2019/card/ui/assets/embed.js +14 -7
- package/dist/es2019/card/ui/assets/inline.js +14 -7
- package/dist/es2019/card/ui/assets/url.js +14 -7
- package/dist/es2019/extensibility/ExtensionNodeWrapper.js +1 -1
- package/dist/es2019/extensibility/extensionNodeView.js +1 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/resizer/BreakoutResizer.js +7 -4
- package/dist/es2019/resizer/Resizer.js +33 -13
- package/dist/es2019/table/content-mode.js +56 -0
- package/dist/es2019/table/index.js +2 -1
- package/dist/es2019/toolbar/context.js +17 -9
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui/MediaSingle/styled.js +1 -1
- package/dist/esm/card/ui/assets/card.js +14 -7
- package/dist/esm/card/ui/assets/embed.js +14 -7
- package/dist/esm/card/ui/assets/inline.js +14 -7
- package/dist/esm/card/ui/assets/url.js +14 -7
- package/dist/esm/extensibility/ExtensionNodeWrapper.js +1 -1
- package/dist/esm/extensibility/extensionNodeView.js +1 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/resizer/BreakoutResizer.js +7 -4
- package/dist/esm/resizer/Resizer.js +33 -12
- package/dist/esm/table/content-mode.js +57 -0
- package/dist/esm/table/index.js +2 -1
- package/dist/esm/toolbar/context.js +15 -5
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui/MediaSingle/styled.js +1 -1
- package/dist/types/table/content-mode.d.ts +35 -0
- package/dist/types/table/index.d.ts +1 -0
- package/dist/types-ts4.5/table/content-mode.d.ts +35 -0
- package/dist/types-ts4.5/table/index.d.ts +1 -0
- package/package.json +1 -4
|
@@ -118,7 +118,7 @@ export class ExtensionNode extends ReactNodeView {
|
|
|
118
118
|
if (this.didReuseSsrDom && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
|
|
119
119
|
const ssrElement = this.findSSRElement();
|
|
120
120
|
if (ssrElement) {
|
|
121
|
-
const extensionNodeWrapper = ssrElement.querySelector('[data-
|
|
121
|
+
const extensionNodeWrapper = ssrElement.querySelector('[data-testid="extension-node-wrapper"]');
|
|
122
122
|
if (extensionNodeWrapper) {
|
|
123
123
|
extensionNodeWrapper.remove();
|
|
124
124
|
}
|
|
@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
|
|
|
4
4
|
import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
|
|
5
5
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
6
6
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
7
|
-
const packageVersion = "
|
|
7
|
+
const packageVersion = "114.1.1";
|
|
8
8
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
9
9
|
// Remove URL as it has UGC
|
|
10
10
|
// Ignored via go/ees007
|
|
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
2
2
|
import { bind, bindAll } from 'bind-event-listener';
|
|
3
3
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
7
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
|
|
7
8
|
import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
|
|
@@ -68,6 +69,10 @@ const defaultStyles = {
|
|
|
68
69
|
display: 'grid'
|
|
69
70
|
};
|
|
70
71
|
const RESIZE_STEP_VALUE = 10;
|
|
72
|
+
const RESIZER_ENABLE_HANDLES = {
|
|
73
|
+
left: true,
|
|
74
|
+
right: true
|
|
75
|
+
};
|
|
71
76
|
/**
|
|
72
77
|
* BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
|
|
73
78
|
* correct ADF support.
|
|
@@ -324,10 +329,8 @@ const BreakoutResizer = ({
|
|
|
324
329
|
});
|
|
325
330
|
}
|
|
326
331
|
return /*#__PURE__*/React.createElement(Resizer, {
|
|
327
|
-
ref: resizerRef
|
|
328
|
-
|
|
329
|
-
,
|
|
330
|
-
enable: {
|
|
332
|
+
ref: resizerRef,
|
|
333
|
+
enable: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? RESIZER_ENABLE_HANDLES : {
|
|
331
334
|
left: true,
|
|
332
335
|
right: true
|
|
333
336
|
},
|
|
@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
|
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
8
8
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
9
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
11
|
import Tooltip from '@atlaskit/tooltip';
|
|
11
12
|
import { messages } from '../messages/breakout';
|
|
@@ -106,16 +107,31 @@ const ResizerNext = (props, ref) => {
|
|
|
106
107
|
left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleSize, handleAlignmentMethod),
|
|
107
108
|
right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleSize, handleAlignmentMethod)
|
|
108
109
|
};
|
|
110
|
+
const handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
|
|
109
111
|
const baseHandleStyles = {
|
|
110
|
-
width:
|
|
112
|
+
width: handleWidth,
|
|
111
113
|
zIndex: resizerHandleZIndex,
|
|
112
114
|
pointerEvents: 'auto',
|
|
113
115
|
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
|
|
114
116
|
};
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
const memoizedBaseHandleStyles = useMemo(() => ({
|
|
118
|
+
width: handleWidth,
|
|
119
|
+
zIndex: resizerHandleZIndex,
|
|
120
|
+
pointerEvents: 'auto',
|
|
121
|
+
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
|
|
122
|
+
}), [handleWidth, handlePositioning]);
|
|
123
|
+
const offset = handlePositioning === 'adjacent' ? `calc(${handleWidth} * -1)` : `calc(${handleWidth} * -0.5)`;
|
|
124
|
+
const memoizedNextHandleStyles = useMemo(() => SUPPORTED_HANDLES.reduce((result, position) => ({
|
|
125
|
+
...result,
|
|
126
|
+
[position]: {
|
|
127
|
+
...memoizedBaseHandleStyles,
|
|
128
|
+
[position]: offset,
|
|
129
|
+
...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])
|
|
130
|
+
}
|
|
131
|
+
}), {}), [memoizedBaseHandleStyles, offset, handleStyles]);
|
|
132
|
+
const nextHandleStyles = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
|
|
133
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
|
|
134
|
+
SUPPORTED_HANDLES.reduce((result, position) => ({
|
|
119
135
|
...result,
|
|
120
136
|
[position]: {
|
|
121
137
|
...baseHandleStyles,
|
|
@@ -199,15 +215,19 @@ const ResizerNext = (props, ref) => {
|
|
|
199
215
|
}
|
|
200
216
|
return snapGap;
|
|
201
217
|
}, [snap, snapGap]);
|
|
218
|
+
const resizerAutoSize = useMemo(() => ({
|
|
219
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
220
|
+
height: 'auto'
|
|
221
|
+
}), [width]);
|
|
222
|
+
const resizerSize = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
|
|
223
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
|
|
224
|
+
{
|
|
225
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
226
|
+
height: 'auto'
|
|
227
|
+
};
|
|
202
228
|
return /*#__PURE__*/React.createElement(Resizable, _extends({
|
|
203
|
-
ref: resizable
|
|
204
|
-
|
|
205
|
-
,
|
|
206
|
-
size: {
|
|
207
|
-
width: width !== null && width !== void 0 ? width : 'auto',
|
|
208
|
-
// just content itself (no paddings)
|
|
209
|
-
height: 'auto'
|
|
210
|
-
}
|
|
229
|
+
ref: resizable,
|
|
230
|
+
size: resizerSize
|
|
211
231
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
212
232
|
,
|
|
213
233
|
className: resizerClassName,
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Returns true if any cell in the first row of the table has a colwidth attribute set.
|
|
5
|
+
*
|
|
6
|
+
* Used by both the editor (as `hasTableColumnBeenResized`) and the renderer (as `hasColWidths`)
|
|
7
|
+
* to determine whether a table has had its columns manually resized.
|
|
8
|
+
*/
|
|
9
|
+
export const hasTableColumnBeenResized = tableNode => {
|
|
10
|
+
const firstRow = tableNode.content.firstChild;
|
|
11
|
+
if (!firstRow) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
for (let i = 0; i < firstRow.childCount; i++) {
|
|
15
|
+
if (firstRow.child(i).attrs.colwidth) {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return false;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Returns true if the table has been explicitly resized — either the table itself has a width
|
|
24
|
+
* attribute set, or any column has been individually resized (colwidth present on cells).
|
|
25
|
+
*/
|
|
26
|
+
export const hasTableBeenResized = tableNode => tableNode.attrs.width !== null || hasTableColumnBeenResized(tableNode);
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Determines whether a table should render in content mode.
|
|
30
|
+
*
|
|
31
|
+
* Content mode tables have no fixed column widths — the browser sizes columns to fit their
|
|
32
|
+
* content (`table-layout: auto`). This is the shared core predicate used by both the editor
|
|
33
|
+
* and the renderer. Each consumer is responsible for computing `isSupported` from its own
|
|
34
|
+
* feature flags / props before calling this function.
|
|
35
|
+
*
|
|
36
|
+
* A table is in content mode when ALL of the following are true:
|
|
37
|
+
* 1. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
|
|
38
|
+
* 2. `isSupported` is true (caller has verified resizing is allowed and appearance is full-page)
|
|
39
|
+
* 3. The table is not nested inside another table or block node
|
|
40
|
+
* 4. The table node exists
|
|
41
|
+
* 5. The table has not been explicitly resized (`width === null` and no `colwidth` on cells)
|
|
42
|
+
* 6. The table's layout is `'align-start'`
|
|
43
|
+
*/
|
|
44
|
+
export const isTableInContentMode = ({
|
|
45
|
+
tableNode,
|
|
46
|
+
isSupported,
|
|
47
|
+
isTableNested
|
|
48
|
+
}) => {
|
|
49
|
+
if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
if (!tableNode || isTableNested) {
|
|
53
|
+
return false;
|
|
54
|
+
}
|
|
55
|
+
return isSupported && !hasTableBeenResized(tableNode) && tableNode.attrs.layout === 'align-start';
|
|
56
|
+
};
|
|
@@ -2,4 +2,5 @@
|
|
|
2
2
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
3
3
|
|
|
4
4
|
export { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
|
|
5
|
-
export { default as SortingIcon, StatusClassNames } from './SortingIcon';
|
|
5
|
+
export { default as SortingIcon, StatusClassNames } from './SortingIcon';
|
|
6
|
+
export { hasTableBeenResized, hasTableColumnBeenResized, isTableInContentMode } from './content-mode';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { createContext, useContext } from 'react';
|
|
1
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
2
3
|
const EditorToolbarContext = /*#__PURE__*/createContext({
|
|
3
4
|
editorView: null,
|
|
4
5
|
editorAppearance: undefined,
|
|
@@ -24,14 +25,21 @@ export const EditorToolbarProvider = ({
|
|
|
24
25
|
editorToolbarDockingPreference,
|
|
25
26
|
isOffline
|
|
26
27
|
}) => {
|
|
28
|
+
const memoizedValue = useMemo(() => ({
|
|
29
|
+
editorView,
|
|
30
|
+
editorAppearance,
|
|
31
|
+
editorViewMode,
|
|
32
|
+
editorToolbarDockingPreference,
|
|
33
|
+
isOffline
|
|
34
|
+
}), [editorView, editorAppearance, editorViewMode, editorToolbarDockingPreference, isOffline]);
|
|
35
|
+
const contextValue = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedValue : {
|
|
36
|
+
editorView,
|
|
37
|
+
editorAppearance,
|
|
38
|
+
editorViewMode,
|
|
39
|
+
editorToolbarDockingPreference,
|
|
40
|
+
isOffline
|
|
41
|
+
};
|
|
27
42
|
return /*#__PURE__*/React.createElement(EditorToolbarContext.Provider, {
|
|
28
|
-
|
|
29
|
-
value: {
|
|
30
|
-
editorView,
|
|
31
|
-
editorAppearance,
|
|
32
|
-
editorViewMode,
|
|
33
|
-
editorToolbarDockingPreference,
|
|
34
|
-
isOffline
|
|
35
|
-
}
|
|
43
|
+
value: contextValue
|
|
36
44
|
}, children);
|
|
37
45
|
};
|
|
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import Layer from '../Layer';
|
|
16
16
|
const packageName = "@atlaskit/editor-common";
|
|
17
|
-
const packageVersion = "
|
|
17
|
+
const packageVersion = "114.1.1";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -322,7 +322,7 @@ export const mediaWrapperStyle = props => css`
|
|
|
322
322
|
/* Renderer */
|
|
323
323
|
[data-node-type='media'] {
|
|
324
324
|
position: static !important;
|
|
325
|
-
|
|
325
|
+
height: auto !important;
|
|
326
326
|
|
|
327
327
|
> div {
|
|
328
328
|
position: absolute;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
|
+
|
|
2
4
|
// Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
|
|
3
5
|
var IconCardGlyph = function IconCardGlyph(_ref) {
|
|
4
6
|
var ariaLabel = _ref['aria-label'],
|
|
@@ -20,17 +22,22 @@ var IconCardGlyph = function IconCardGlyph(_ref) {
|
|
|
20
22
|
fill: "currentColor"
|
|
21
23
|
}));
|
|
22
24
|
};
|
|
25
|
+
var iconCardStyle = {
|
|
26
|
+
width: '24px',
|
|
27
|
+
height: '24px'
|
|
28
|
+
};
|
|
23
29
|
export var IconCard = function IconCard(_ref2) {
|
|
24
30
|
var label = _ref2.label;
|
|
31
|
+
var style = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? iconCardStyle :
|
|
32
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props
|
|
33
|
+
{
|
|
34
|
+
width: '24px',
|
|
35
|
+
height: '24px'
|
|
36
|
+
};
|
|
25
37
|
return /*#__PURE__*/React.createElement(IconCardGlyph, {
|
|
26
38
|
"aria-label": label
|
|
27
|
-
// eslint-disable-next-line @
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
28
40
|
,
|
|
29
|
-
style:
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
31
|
-
width: '24px',
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
33
|
-
height: '24px'
|
|
34
|
-
}
|
|
41
|
+
style: style
|
|
35
42
|
});
|
|
36
43
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
|
+
|
|
2
4
|
// Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
|
|
3
5
|
var IconEmbedGlyph = function IconEmbedGlyph(_ref) {
|
|
4
6
|
var ariaLabel = _ref['aria-label'],
|
|
@@ -20,17 +22,22 @@ var IconEmbedGlyph = function IconEmbedGlyph(_ref) {
|
|
|
20
22
|
fill: "currentColor"
|
|
21
23
|
}));
|
|
22
24
|
};
|
|
25
|
+
var iconEmbedStyle = {
|
|
26
|
+
width: '24px',
|
|
27
|
+
height: '24px'
|
|
28
|
+
};
|
|
23
29
|
export var IconEmbed = function IconEmbed(_ref2) {
|
|
24
30
|
var label = _ref2.label;
|
|
31
|
+
var style = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? iconEmbedStyle :
|
|
32
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props
|
|
33
|
+
{
|
|
34
|
+
width: '24px',
|
|
35
|
+
height: '24px'
|
|
36
|
+
};
|
|
25
37
|
return /*#__PURE__*/React.createElement(IconEmbedGlyph, {
|
|
26
38
|
"aria-label": label
|
|
27
|
-
// eslint-disable-next-line @
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
28
40
|
,
|
|
29
|
-
style:
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
31
|
-
width: '24px',
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
33
|
-
height: '24px'
|
|
34
|
-
}
|
|
41
|
+
style: style
|
|
35
42
|
});
|
|
36
43
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
|
+
|
|
2
4
|
// Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
|
|
3
5
|
var IconInlineGlyph = function IconInlineGlyph(_ref) {
|
|
4
6
|
var ariaLabel = _ref['aria-label'],
|
|
@@ -20,17 +22,22 @@ var IconInlineGlyph = function IconInlineGlyph(_ref) {
|
|
|
20
22
|
fill: "currentColor"
|
|
21
23
|
}));
|
|
22
24
|
};
|
|
25
|
+
var iconInlineStyle = {
|
|
26
|
+
width: '24px',
|
|
27
|
+
height: '24px'
|
|
28
|
+
};
|
|
23
29
|
export var IconInline = function IconInline(_ref2) {
|
|
24
30
|
var label = _ref2.label;
|
|
31
|
+
var style = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? iconInlineStyle :
|
|
32
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props
|
|
33
|
+
{
|
|
34
|
+
width: '24px',
|
|
35
|
+
height: '24px'
|
|
36
|
+
};
|
|
25
37
|
return /*#__PURE__*/React.createElement(IconInlineGlyph, {
|
|
26
38
|
"aria-label": label
|
|
27
|
-
// eslint-disable-next-line @
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
28
40
|
,
|
|
29
|
-
style:
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
31
|
-
width: '24px',
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
33
|
-
height: '24px'
|
|
34
|
-
}
|
|
41
|
+
style: style
|
|
35
42
|
});
|
|
36
43
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
|
+
|
|
2
4
|
// Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
|
|
3
5
|
var IconUrlGlyph = function IconUrlGlyph(_ref) {
|
|
4
6
|
var ariaLabel = _ref['aria-label'],
|
|
@@ -22,17 +24,22 @@ var IconUrlGlyph = function IconUrlGlyph(_ref) {
|
|
|
22
24
|
fill: "currentColor"
|
|
23
25
|
}));
|
|
24
26
|
};
|
|
27
|
+
var iconUrlStyle = {
|
|
28
|
+
width: '24px',
|
|
29
|
+
height: '24px'
|
|
30
|
+
};
|
|
25
31
|
export var IconUrl = function IconUrl(_ref2) {
|
|
26
32
|
var label = _ref2.label;
|
|
33
|
+
var style = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? iconUrlStyle :
|
|
34
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props
|
|
35
|
+
{
|
|
36
|
+
width: '24px',
|
|
37
|
+
height: '24px'
|
|
38
|
+
};
|
|
27
39
|
return /*#__PURE__*/React.createElement(IconUrlGlyph, {
|
|
28
40
|
"aria-label": label
|
|
29
|
-
// eslint-disable-next-line @
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
30
42
|
,
|
|
31
|
-
style:
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
33
|
-
width: '24px',
|
|
34
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
35
|
-
height: '24px'
|
|
36
|
-
}
|
|
43
|
+
style: style
|
|
37
44
|
});
|
|
38
45
|
};
|
|
@@ -70,7 +70,7 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
|
|
|
70
70
|
relative: showMacroInteractionDesignUpdates
|
|
71
71
|
});
|
|
72
72
|
return jsx("span", {
|
|
73
|
-
"data-
|
|
73
|
+
"data-testid": "extension-node-wrapper"
|
|
74
74
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
75
75
|
,
|
|
76
76
|
className: wrapperClassNames,
|
|
@@ -147,7 +147,7 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
147
147
|
if (this.didReuseSsrDom && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
|
|
148
148
|
var ssrElement = this.findSSRElement();
|
|
149
149
|
if (ssrElement) {
|
|
150
|
-
var extensionNodeWrapper = ssrElement.querySelector('[data-
|
|
150
|
+
var extensionNodeWrapper = ssrElement.querySelector('[data-testid="extension-node-wrapper"]');
|
|
151
151
|
if (extensionNodeWrapper) {
|
|
152
152
|
extensionNodeWrapper.remove();
|
|
153
153
|
}
|
|
@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
|
|
|
10
10
|
import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
|
|
11
11
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
12
12
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
13
|
-
var packageVersion = "
|
|
13
|
+
var packageVersion = "114.1.1";
|
|
14
14
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
15
15
|
// Remove URL as it has UGC
|
|
16
16
|
// Ignored via go/ees007
|
|
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
3
3
|
import { bind, bindAll } from 'bind-event-listener';
|
|
4
4
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
8
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
|
|
8
9
|
import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
|
|
@@ -69,6 +70,10 @@ var defaultStyles = {
|
|
|
69
70
|
display: 'grid'
|
|
70
71
|
};
|
|
71
72
|
var RESIZE_STEP_VALUE = 10;
|
|
73
|
+
var RESIZER_ENABLE_HANDLES = {
|
|
74
|
+
left: true,
|
|
75
|
+
right: true
|
|
76
|
+
};
|
|
72
77
|
/**
|
|
73
78
|
* BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
|
|
74
79
|
* correct ADF support.
|
|
@@ -321,10 +326,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
|
|
|
321
326
|
});
|
|
322
327
|
}
|
|
323
328
|
return /*#__PURE__*/React.createElement(Resizer, {
|
|
324
|
-
ref: resizerRef
|
|
325
|
-
|
|
326
|
-
,
|
|
327
|
-
enable: {
|
|
329
|
+
ref: resizerRef,
|
|
330
|
+
enable: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? RESIZER_ENABLE_HANDLES : {
|
|
328
331
|
left: true,
|
|
329
332
|
right: true
|
|
330
333
|
},
|
|
@@ -12,6 +12,7 @@ import { useIntl } from 'react-intl';
|
|
|
12
12
|
|
|
13
13
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
14
14
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
15
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
16
17
|
import Tooltip from '@atlaskit/tooltip';
|
|
17
18
|
import { messages } from '../messages/breakout';
|
|
@@ -120,16 +121,30 @@ var ResizerNext = function ResizerNext(props, ref) {
|
|
|
120
121
|
left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleSize, handleAlignmentMethod),
|
|
121
122
|
right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleSize, handleAlignmentMethod)
|
|
122
123
|
};
|
|
124
|
+
var handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
|
|
123
125
|
var baseHandleStyles = {
|
|
124
|
-
width:
|
|
126
|
+
width: handleWidth,
|
|
125
127
|
zIndex: resizerHandleZIndex,
|
|
126
128
|
pointerEvents: 'auto',
|
|
127
129
|
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
|
|
128
130
|
};
|
|
129
|
-
var
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
var memoizedBaseHandleStyles = useMemo(function () {
|
|
132
|
+
return {
|
|
133
|
+
width: handleWidth,
|
|
134
|
+
zIndex: resizerHandleZIndex,
|
|
135
|
+
pointerEvents: 'auto',
|
|
136
|
+
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
|
|
137
|
+
};
|
|
138
|
+
}, [handleWidth, handlePositioning]);
|
|
139
|
+
var offset = handlePositioning === 'adjacent' ? "calc(".concat(handleWidth, " * -1)") : "calc(".concat(handleWidth, " * -0.5)");
|
|
140
|
+
var memoizedNextHandleStyles = useMemo(function () {
|
|
141
|
+
return SUPPORTED_HANDLES.reduce(function (result, position) {
|
|
142
|
+
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, memoizedBaseHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
|
|
143
|
+
}, {});
|
|
144
|
+
}, [memoizedBaseHandleStyles, offset, handleStyles]);
|
|
145
|
+
var nextHandleStyles = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
|
|
146
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
|
|
147
|
+
SUPPORTED_HANDLES.reduce(function (result, position) {
|
|
133
148
|
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, baseHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
|
|
134
149
|
}, {});
|
|
135
150
|
var resizerClassName = classnames(className, resizerItemClassName, _defineProperty({
|
|
@@ -195,15 +210,21 @@ var ResizerNext = function ResizerNext(props, ref) {
|
|
|
195
210
|
}
|
|
196
211
|
return snapGap;
|
|
197
212
|
}, [snap, snapGap]);
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
201
|
-
,
|
|
202
|
-
size: {
|
|
213
|
+
var resizerAutoSize = useMemo(function () {
|
|
214
|
+
return {
|
|
203
215
|
width: width !== null && width !== void 0 ? width : 'auto',
|
|
204
|
-
// just content itself (no paddings)
|
|
205
216
|
height: 'auto'
|
|
206
|
-
}
|
|
217
|
+
};
|
|
218
|
+
}, [width]);
|
|
219
|
+
var resizerSize = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
|
|
220
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
|
|
221
|
+
{
|
|
222
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
223
|
+
height: 'auto'
|
|
224
|
+
};
|
|
225
|
+
return /*#__PURE__*/React.createElement(Resizable, _extends({
|
|
226
|
+
ref: resizable,
|
|
227
|
+
size: resizerSize
|
|
207
228
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
208
229
|
,
|
|
209
230
|
className: resizerClassName,
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Returns true if any cell in the first row of the table has a colwidth attribute set.
|
|
5
|
+
*
|
|
6
|
+
* Used by both the editor (as `hasTableColumnBeenResized`) and the renderer (as `hasColWidths`)
|
|
7
|
+
* to determine whether a table has had its columns manually resized.
|
|
8
|
+
*/
|
|
9
|
+
export var hasTableColumnBeenResized = function hasTableColumnBeenResized(tableNode) {
|
|
10
|
+
var firstRow = tableNode.content.firstChild;
|
|
11
|
+
if (!firstRow) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
for (var i = 0; i < firstRow.childCount; i++) {
|
|
15
|
+
if (firstRow.child(i).attrs.colwidth) {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return false;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Returns true if the table has been explicitly resized — either the table itself has a width
|
|
24
|
+
* attribute set, or any column has been individually resized (colwidth present on cells).
|
|
25
|
+
*/
|
|
26
|
+
export var hasTableBeenResized = function hasTableBeenResized(tableNode) {
|
|
27
|
+
return tableNode.attrs.width !== null || hasTableColumnBeenResized(tableNode);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Determines whether a table should render in content mode.
|
|
32
|
+
*
|
|
33
|
+
* Content mode tables have no fixed column widths — the browser sizes columns to fit their
|
|
34
|
+
* content (`table-layout: auto`). This is the shared core predicate used by both the editor
|
|
35
|
+
* and the renderer. Each consumer is responsible for computing `isSupported` from its own
|
|
36
|
+
* feature flags / props before calling this function.
|
|
37
|
+
*
|
|
38
|
+
* A table is in content mode when ALL of the following are true:
|
|
39
|
+
* 1. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
|
|
40
|
+
* 2. `isSupported` is true (caller has verified resizing is allowed and appearance is full-page)
|
|
41
|
+
* 3. The table is not nested inside another table or block node
|
|
42
|
+
* 4. The table node exists
|
|
43
|
+
* 5. The table has not been explicitly resized (`width === null` and no `colwidth` on cells)
|
|
44
|
+
* 6. The table's layout is `'align-start'`
|
|
45
|
+
*/
|
|
46
|
+
export var isTableInContentMode = function isTableInContentMode(_ref) {
|
|
47
|
+
var tableNode = _ref.tableNode,
|
|
48
|
+
isSupported = _ref.isSupported,
|
|
49
|
+
isTableNested = _ref.isTableNested;
|
|
50
|
+
if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
if (!tableNode || isTableNested) {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
return isSupported && !hasTableBeenResized(tableNode) && tableNode.attrs.layout === 'align-start';
|
|
57
|
+
};
|
package/dist/esm/table/index.js
CHANGED
|
@@ -2,4 +2,5 @@
|
|
|
2
2
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
3
3
|
|
|
4
4
|
export { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
|
|
5
|
-
export { default as SortingIcon, StatusClassNames } from './SortingIcon';
|
|
5
|
+
export { default as SortingIcon, StatusClassNames } from './SortingIcon';
|
|
6
|
+
export { hasTableBeenResized, hasTableColumnBeenResized, isTableInContentMode } from './content-mode';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { createContext, useContext } from 'react';
|
|
1
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
2
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
2
3
|
var EditorToolbarContext = /*#__PURE__*/createContext({
|
|
3
4
|
editorView: null,
|
|
4
5
|
editorAppearance: undefined,
|
|
@@ -23,14 +24,23 @@ export var EditorToolbarProvider = function EditorToolbarProvider(_ref) {
|
|
|
23
24
|
editorViewMode = _ref.editorViewMode,
|
|
24
25
|
editorToolbarDockingPreference = _ref.editorToolbarDockingPreference,
|
|
25
26
|
isOffline = _ref.isOffline;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
value: {
|
|
27
|
+
var memoizedValue = useMemo(function () {
|
|
28
|
+
return {
|
|
29
29
|
editorView: editorView,
|
|
30
30
|
editorAppearance: editorAppearance,
|
|
31
31
|
editorViewMode: editorViewMode,
|
|
32
32
|
editorToolbarDockingPreference: editorToolbarDockingPreference,
|
|
33
33
|
isOffline: isOffline
|
|
34
|
-
}
|
|
34
|
+
};
|
|
35
|
+
}, [editorView, editorAppearance, editorViewMode, editorToolbarDockingPreference, isOffline]);
|
|
36
|
+
var contextValue = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedValue : {
|
|
37
|
+
editorView: editorView,
|
|
38
|
+
editorAppearance: editorAppearance,
|
|
39
|
+
editorViewMode: editorViewMode,
|
|
40
|
+
editorToolbarDockingPreference: editorToolbarDockingPreference,
|
|
41
|
+
isOffline: isOffline
|
|
42
|
+
};
|
|
43
|
+
return /*#__PURE__*/React.createElement(EditorToolbarContext.Provider, {
|
|
44
|
+
value: contextValue
|
|
35
45
|
}, children);
|
|
36
46
|
};
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "
|
|
24
|
+
var packageVersion = "114.1.1";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|