@atlaskit/editor-common 110.4.9 → 110.4.10
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 +10 -0
- package/dist/cjs/extensibility/Extension/Extension/index.js +8 -3
- package/dist/cjs/extensibility/Extension/InlineExtension/index.js +21 -4
- package/dist/cjs/extensibility/Extension/InlineExtension/styles.js +1 -14
- package/dist/cjs/extensibility/Extension/Lozenge/EditToggle.js +2 -1
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js +19 -5
- package/dist/cjs/extensibility/ExtensionComponent.js +7 -6
- package/dist/cjs/extensibility/ExtensionNodeWrapper.js +36 -6
- package/dist/cjs/extensibility/MultiBodiedExtension/index.js +10 -4
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/toolbar/index.js +0 -12
- package/dist/cjs/toolbar/rank.js +3 -5
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/extensibility/Extension/Extension/index.js +9 -4
- package/dist/es2019/extensibility/Extension/InlineExtension/index.js +23 -6
- package/dist/es2019/extensibility/Extension/InlineExtension/styles.js +0 -13
- package/dist/es2019/extensibility/Extension/Lozenge/EditToggle.js +2 -1
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js +18 -5
- package/dist/es2019/extensibility/ExtensionComponent.js +7 -6
- package/dist/es2019/extensibility/ExtensionNodeWrapper.js +36 -6
- package/dist/es2019/extensibility/MultiBodiedExtension/index.js +10 -4
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/toolbar/index.js +1 -1
- package/dist/es2019/toolbar/rank.js +0 -8
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/extensibility/Extension/Extension/index.js +9 -4
- package/dist/esm/extensibility/Extension/InlineExtension/index.js +23 -6
- package/dist/esm/extensibility/Extension/InlineExtension/styles.js +0 -13
- package/dist/esm/extensibility/Extension/Lozenge/EditToggle.js +2 -1
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js +19 -5
- package/dist/esm/extensibility/ExtensionComponent.js +7 -6
- package/dist/esm/extensibility/ExtensionNodeWrapper.js +36 -6
- package/dist/esm/extensibility/MultiBodiedExtension/index.js +10 -4
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/toolbar/index.js +1 -1
- package/dist/esm/toolbar/rank.js +2 -4
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/extensibility/Extension/InlineExtension/styles.d.ts +0 -1
- package/dist/types/toolbar/index.d.ts +1 -1
- package/dist/types/toolbar/rank.d.ts +0 -8
- package/dist/types-ts4.5/extensibility/Extension/InlineExtension/styles.d.ts +0 -1
- package/dist/types-ts4.5/toolbar/index.d.ts +1 -1
- package/dist/types-ts4.5/toolbar/rank.d.ts +0 -8
- package/package.json +2 -2
|
@@ -11,6 +11,7 @@ import { FormattedMessage, defineMessages } from 'react-intl-next';
|
|
|
11
11
|
import CustomizeIcon from '@atlaskit/icon/core/customize';
|
|
12
12
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
13
13
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
15
|
import Tooltip from '@atlaskit/tooltip';
|
|
15
16
|
const containerStyles = css({
|
|
16
17
|
textAlign: 'left',
|
|
@@ -21,6 +22,12 @@ const containerStyles = css({
|
|
|
21
22
|
marginTop: "var(--ds-space-300, 24px)"
|
|
22
23
|
}
|
|
23
24
|
});
|
|
25
|
+
const showLabelStyles = css({
|
|
26
|
+
opacity: 1
|
|
27
|
+
});
|
|
28
|
+
const hideLabelStyles = css({
|
|
29
|
+
opacity: 0
|
|
30
|
+
});
|
|
24
31
|
const labelStyles = css({
|
|
25
32
|
opacity: 0,
|
|
26
33
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -90,6 +97,9 @@ const iconStyles = css({
|
|
|
90
97
|
display: 'none'
|
|
91
98
|
}
|
|
92
99
|
});
|
|
100
|
+
const bodiedMacroIconStyles = css({
|
|
101
|
+
display: 'none'
|
|
102
|
+
});
|
|
93
103
|
const i18n = defineMessages({
|
|
94
104
|
configure: {
|
|
95
105
|
id: 'editor-common-extensibility.macro.button.configure',
|
|
@@ -121,7 +131,7 @@ export const ExtensionLabel = ({
|
|
|
121
131
|
pluginInjectionApi
|
|
122
132
|
}) => {
|
|
123
133
|
const isInlineExtension = extensionName === 'inlineExtension';
|
|
124
|
-
const showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
|
|
134
|
+
const showDefaultBodiedStyles = expValEquals('cc_editor_ttvc_release_bundle_one', 'isEnabled', true) ? isBodiedMacro : isBodiedMacro && !isNodeHovered;
|
|
125
135
|
const shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
|
|
126
136
|
const containerClassNames = classnames({
|
|
127
137
|
bodied: isBodiedMacro
|
|
@@ -132,7 +142,7 @@ export const ExtensionLabel = ({
|
|
|
132
142
|
bodied: isBodiedMacro,
|
|
133
143
|
'bodied-border': showDefaultBodiedStyles,
|
|
134
144
|
'bodied-background': showDefaultBodiedStyles,
|
|
135
|
-
'show-label': shouldShowBodiedMacroLabel,
|
|
145
|
+
'show-label': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : shouldShowBodiedMacroLabel,
|
|
136
146
|
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
|
|
137
147
|
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
|
|
138
148
|
// Need this separate class since we don't ever want to show the label during view mode
|
|
@@ -140,7 +150,8 @@ export const ExtensionLabel = ({
|
|
|
140
150
|
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
|
|
141
151
|
});
|
|
142
152
|
const iconClassNames = classnames({
|
|
143
|
-
'hide-icon': isBodiedMacro && !isNodeHovered
|
|
153
|
+
'hide-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : isBodiedMacro && !isNodeHovered,
|
|
154
|
+
'extension-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true)
|
|
144
155
|
});
|
|
145
156
|
return (
|
|
146
157
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
|
|
@@ -180,12 +191,14 @@ export const ExtensionLabel = ({
|
|
|
180
191
|
// Ignored via go/ees005
|
|
181
192
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
182
193
|
}, tooltipProps, {
|
|
183
|
-
css: labelStyles
|
|
194
|
+
css: [labelStyles, ...(expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? [!showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles] : [])]
|
|
184
195
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
185
196
|
,
|
|
186
197
|
className: labelClassNames
|
|
187
198
|
}), text, jsx("span", {
|
|
188
|
-
css: iconStyles,
|
|
199
|
+
css: [iconStyles, isBodiedMacro && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && bodiedMacroIconStyles]
|
|
200
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
201
|
+
,
|
|
189
202
|
className: iconClassNames,
|
|
190
203
|
"data-testid": "config-icon"
|
|
191
204
|
}, jsx(CustomizeIcon, {
|
|
@@ -5,6 +5,7 @@ import React, { Component, useEffect, useLayoutEffect, useRef, useState } from '
|
|
|
5
5
|
import memoizeOne from 'memoize-one';
|
|
6
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
9
|
import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
|
|
9
10
|
import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
|
|
10
11
|
import Extension from './Extension/Extension';
|
|
@@ -212,8 +213,8 @@ class ExtensionComponentInner extends Component {
|
|
|
212
213
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
213
214
|
isNodeSelected: selectedNode === node,
|
|
214
215
|
isNodeNested: isNodeNested,
|
|
215
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
216
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
216
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
217
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
217
218
|
isLivePageViewMode: isLivePageViewMode,
|
|
218
219
|
allowBodiedOverride: allowBodiedOverride
|
|
219
220
|
});
|
|
@@ -234,9 +235,9 @@ class ExtensionComponentInner extends Component {
|
|
|
234
235
|
pluginInjectionApi: pluginInjectionApi,
|
|
235
236
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
236
237
|
isNodeSelected: selectedNode === node,
|
|
237
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
238
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
238
239
|
isNodeNested: isNodeNested,
|
|
239
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
240
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
240
241
|
showLivePagesBodiedMacrosRendererView: !!(showLivePagesBodiedMacrosRendererView !== null && showLivePagesBodiedMacrosRendererView !== void 0 && showLivePagesBodiedMacrosRendererView(nodeToJSON(node))),
|
|
241
242
|
showUpdatedLivePages1PBodiedExtensionUI: !!(showUpdatedLivePages1PBodiedExtensionUI !== null && showUpdatedLivePages1PBodiedExtensionUI !== void 0 && showUpdatedLivePages1PBodiedExtensionUI(nodeToJSON(node))),
|
|
242
243
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
@@ -249,8 +250,8 @@ class ExtensionComponentInner extends Component {
|
|
|
249
250
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
250
251
|
isNodeSelected: selectedNode === node,
|
|
251
252
|
pluginInjectionApi: pluginInjectionApi,
|
|
252
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
253
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
253
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
254
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
254
255
|
isLivePageViewMode: isLivePageViewMode
|
|
255
256
|
}, extensionHandlerResult);
|
|
256
257
|
default:
|
|
@@ -8,6 +8,7 @@ import React from 'react';
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import classnames from 'classnames';
|
|
11
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
12
|
import { ZERO_WIDTH_SPACE } from '../whitespace';
|
|
12
13
|
const styles = css({
|
|
13
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -19,6 +20,37 @@ const styles = css({
|
|
|
19
20
|
position: 'relative'
|
|
20
21
|
}
|
|
21
22
|
});
|
|
23
|
+
const hoverStyles = css({
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
25
|
+
':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
|
|
26
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
|
|
27
|
+
},
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
29
|
+
':has(.extension-container:hover) .extension-label, :has(.extension-edit-toggle-container:hover) .extension-label, .extension-label:hover': {
|
|
30
|
+
opacity: 1,
|
|
31
|
+
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
|
|
32
|
+
boxShadow: 'none',
|
|
33
|
+
cursor: 'pointer',
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
35
|
+
'&.always-hide-label': {
|
|
36
|
+
opacity: 0,
|
|
37
|
+
cursor: 'auto'
|
|
38
|
+
},
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
40
|
+
'&.with-bodied-macro-live-page-styles': {
|
|
41
|
+
backgroundColor: "var(--ds-background-input, #FFFFFF)",
|
|
42
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
46
|
+
':has(.extension-label:hover) .extension-icon, :has(.extension-container:hover) .extension-icon, :has(.extension-edit-toggle-container:hover) .extension-icon': {
|
|
47
|
+
display: 'inline'
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
50
|
+
':has(.extension-label:hover) .extension-edit-toggle-container, :has(.extension-container:hover) .extension-edit-toggle-container, .extension-edit-toggle-container:hover': {
|
|
51
|
+
opacity: 1
|
|
52
|
+
}
|
|
53
|
+
});
|
|
22
54
|
/**
|
|
23
55
|
* If inlineExtension, add zero width space to the end of the nodes and wrap with span;
|
|
24
56
|
* Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
|
|
@@ -39,11 +71,9 @@ export const ExtensionNodeWrapper = ({
|
|
|
39
71
|
'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
|
|
40
72
|
relative: showMacroInteractionDesignUpdates
|
|
41
73
|
});
|
|
42
|
-
return (
|
|
74
|
+
return jsx("span", {
|
|
43
75
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE)
|
|
48
|
-
);
|
|
76
|
+
className: wrapperClassNames,
|
|
77
|
+
css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
|
|
78
|
+
}, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
|
|
49
79
|
};
|
|
@@ -11,6 +11,7 @@ import React, { Fragment, useState } from 'react';
|
|
|
11
11
|
import { css, jsx } from '@emotion/react';
|
|
12
12
|
import classnames from 'classnames';
|
|
13
13
|
import EditorFileIcon from '@atlaskit/icon/core/migration/file--editor-file';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
15
|
import { useSharedPluginStateWithSelector } from '../../hooks';
|
|
15
16
|
import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
|
|
16
17
|
import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
|
|
@@ -33,6 +34,11 @@ const imageStyles = css({
|
|
|
33
34
|
maxHeight: '24px',
|
|
34
35
|
maxWidth: '24px'
|
|
35
36
|
});
|
|
37
|
+
const hoverStyles = css({
|
|
38
|
+
'&:hover': {
|
|
39
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
const MultiBodiedExtensionFrames = ({
|
|
37
43
|
articleRef
|
|
38
44
|
}) => {
|
|
@@ -157,7 +163,7 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
157
163
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
158
164
|
'with-padding-background-styles': showMacroInteractionDesignUpdates,
|
|
159
165
|
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
|
|
160
|
-
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
|
|
166
|
+
'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
|
|
161
167
|
});
|
|
162
168
|
const containerClassNames = classnames('multiBodiedExtension--container', {
|
|
163
169
|
'remove-padding': showMacroInteractionDesignUpdates
|
|
@@ -187,10 +193,10 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
187
193
|
pluginInjectionApi: pluginInjectionApi
|
|
188
194
|
}), jsx("div", {
|
|
189
195
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
190
|
-
className: wrapperClassNames
|
|
196
|
+
className: wrapperClassNames,
|
|
197
|
+
css: [
|
|
191
198
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
192
|
-
,
|
|
193
|
-
css: mbeExtensionWrapperCSSStyles,
|
|
199
|
+
mbeExtensionWrapperCSSStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
|
|
194
200
|
"data-testid": "multiBodiedExtension--wrapper",
|
|
195
201
|
"data-layout": node.attrs.layout
|
|
196
202
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -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 = "110.4.
|
|
4
|
+
const packageVersion = "110.4.9";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// Ignored via go/ees007
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Disable no-re-export rule for entry point files
|
|
2
2
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
3
3
|
|
|
4
|
-
export { TOOLBAR_RANK, AI_SECTION_RANK, ROVO_GROUP_RANK, IMPROVE_WRITING_GROUP_RANK, ROVO_MENU_RANK, ROVO_PROMPT_MENU_SECTION_RANK, CHANGE_TONE_MENU_RANK, CHANGE_TONE_MENU_SECTION_RANK, TRANSLATE_MENU_RANK, COLLAB_SECTION_RANK, COMMENT_GROUP_RANK, TEXT_SECTION_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_COLLAPSED_RANK, TEXT_COLLAPSED_GROUP_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_RANK, TEXT_STYLES_MENU_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_FORMAT_MENU_RANK, TEXT_FORMATTING_MENU_SECTION_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, OVERFLOW_SECTION_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU_RANK, PIN_MENU_SECTION_RANK, INSERT_BLOCK_SECTION_RANK, TASK_LIST_GROUP_RANK, MEDIA_GROUP_RANK, MENTION_GROUP_RANK, EMOJI_GROUP_RANK, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, INSERT_GROUP_RANK, LINKING_SECTION_RANK, LINKING_GROUP_RANK, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU_RANK, ALIGNMENT_MENU_SECTION_RANK, LISTS_INDENTATION_GROUP_RANK, LISTS_INDENTATION_GROUP_COLLAPSED_RANK, LISTS_INDENTATION_MENU_RANK, LISTS_INDENTATION_MENU_SECTION_RANK, TRACK_CHANGES_SECTION_RANK,
|
|
4
|
+
export { TOOLBAR_RANK, AI_SECTION_RANK, ROVO_GROUP_RANK, IMPROVE_WRITING_GROUP_RANK, ROVO_MENU_RANK, ROVO_PROMPT_MENU_SECTION_RANK, CHANGE_TONE_MENU_RANK, CHANGE_TONE_MENU_SECTION_RANK, TRANSLATE_MENU_RANK, COLLAB_SECTION_RANK, COMMENT_GROUP_RANK, TEXT_SECTION_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_COLLAPSED_RANK, TEXT_COLLAPSED_GROUP_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_RANK, TEXT_STYLES_MENU_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_FORMAT_MENU_RANK, TEXT_FORMATTING_MENU_SECTION_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, OVERFLOW_SECTION_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU_RANK, PIN_MENU_SECTION_RANK, INSERT_BLOCK_SECTION_RANK, TASK_LIST_GROUP_RANK, MEDIA_GROUP_RANK, MENTION_GROUP_RANK, EMOJI_GROUP_RANK, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, INSERT_GROUP_RANK, LINKING_SECTION_RANK, LINKING_GROUP_RANK, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU_RANK, ALIGNMENT_MENU_SECTION_RANK, LISTS_INDENTATION_GROUP_RANK, LISTS_INDENTATION_GROUP_COLLAPSED_RANK, LISTS_INDENTATION_MENU_RANK, LISTS_INDENTATION_MENU_SECTION_RANK, TRACK_CHANGES_SECTION_RANK, UNDO_CHANGES_GROUP_RANK, REDO_CHANGES_GROUP_RANK, TRACK_CHANGES_GROUP_RANK, PIN_GROUP_RANK, PIN_SECTION_RANK, LOOM_MENU_SECTION_RANK, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK, DEFINE_GROUP_RANK, CODE_BLOCK_GROUP_RANK, ROVO_GROUP_DISPLAY_SMALL_RANK } from './rank';
|
|
5
5
|
export { TOOLBARS, AI_SECTION, ROVO_GROUP, IMPROVE_WRITING_GROUP, IMPROVE_WRITING_BUTTON, ROVO_HERO_BUTTON, ROVO_MENU, ROVO_PROMPT_MENU_SECTION, MAKE_SHORTER_MENU_ITEM, MAKE_LONGER_MENU_ITEM, CHANGE_TONE_NESTED_MENU, SPELLING_AND_GRAMMAR_MENU_ITEM, CHANGE_TONE_MENU_SECTION, MORE_PROFESSIONAL_MENU_ITEM, MORE_CASUAL_MENU_ITEM, MORE_EMPATHETIC_MENU_ITEM, TRANSLATE_NESTED_MENU, TRANSLATE_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_GROUP, TEXT_COLLAPSED_MENU, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_GROUP_COLLAPSED, BOLD_BUTTON_GROUP, UNDERLINE_BUTTON_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_HERO_BUTTON_COLLAPSED, BOLD_BUTTON, UNDERLINE_BUTTON, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_STYLES_GROUP, TEXT_STYLES_MENU, TEXT_STYLES_MENU_SECTION, NORMAL_TEXT_MENU_ITEM, HEADING_1_MENU_ITEM, HEADING_2_MENU_ITEM, HEADING_3_MENU_ITEM, HEADING_4_MENU_ITEM, HEADING_5_MENU_ITEM, HEADING_6_MENU_ITEM, BLOCK_QUOTE_MENU_ITEM, BOLD_MENU_ITEM, ITALIC_MENU_ITEM, UNDERLINE_MENU_ITEM, STRIKE_MENU_ITEM, CODE_MENU_ITEM, SUBSCRIPT_MENU_ITEM, SUPERSCRIPT_MENU_ITEM, CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, LISTS_INDENTATION_GROUP, LISTS_INDENTATION_GROUP_COLLAPSED, LISTS_INDENTATION_GROUP_INLINE, BULLETED_LIST_BUTTON_GROUP, BULLETED_LIST_BUTTON, LISTS_INDENTATION_HERO_BUTTON, LISTS_INDENTATION_HERO_BUTTON_COLLAPSED, LISTS_INDENTATION_MENU, LISTS_INDENTATION_MENU_SECTION, BULLETED_LIST_MENU_ITEM, NUMBERED_LIST_MENU_ITEM, TASK_LIST_MENU_ITEM, INDENT_MENU_ITEM, OUTDENT_MENU_ITEM, INSERT_BLOCK_SECTION, TASK_LIST_BUTTON, TASK_LIST_GROUP, MEDIA_BUTTON, MEDIA_GROUP, MENTION_BUTTON, MENTION_GROUP, EMOJI_BUTTON, EMOJI_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, LINKING_SECTION, LINKING_GROUP, LINKING_BUTTON, COLLAB_SECTION, COMMENT_GROUP, COMMENT_HERO_BUTTON, APPS_SECTION, OVERFLOW_SECTION, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, HIGHLIGHT_MENU_ITEM, CLEAR_COLOR_MENU_ITEM, OVERFLOW_GROUP, OVERFLOW_MENU, PIN_MENU_SECTION, PIN_MENU_ITEM, ALIGNMENT_GROUP, ALIGNMENT_MENU, ALIGNMENT_MENU_SECTION, ALIGN_LEFT_MENU_ITEM, ALIGN_CENTER_MENU_ITEM, ALIGN_RIGHT_MENU_ITEM, UNDO_CHANGES_GROUP, REDO_CHANGES_GROUP, TRACK_CHANGES_GROUP, TRACK_CHANGES_SECTION, UNDO_BUTTON, REDO_BUTTON, TRACK_CHANGES_BUTTON, PIN_SECTION, PIN_GROUP, PIN_BUTTON, LOOM_MENU_SECTION, LOOM_MENU_ITEM, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_MENU_PRIMARY_TOOLBAR, SELECTION_EXTENSION_MENU_SECTION, DEFINE_MENU_ITEM, DEFINE_GROUP, DEFINE_BUTTON, AI_VIEW_SECTION, ROVO_GROUP_VIEW, CODE_BLOCK_GROUP, CODE_BLOCK_BUTTON, IMPROVE_WRITING_MENU_ITEM, ROVO_GROUP_DISPLAY_SMALL, ROVO_MENU_DISPLAY_SMALL, ROVO_PROMPT_MENU_SECTION_DISPLAY_SMALL } from './keys';
|
|
6
6
|
export { useEditorToolbar, EditorToolbarProvider } from './context';
|
|
7
7
|
export { EditorToolbarUIProvider } from './EditorToolbarUIProvider';
|
|
@@ -267,9 +267,6 @@ export const COMMENT_GROUP_RANK = {
|
|
|
267
267
|
*/
|
|
268
268
|
|
|
269
269
|
export const TRACK_CHANGES_SECTION_RANK = {
|
|
270
|
-
[TRACK_CHANGES_GROUP.key]: 100
|
|
271
|
-
};
|
|
272
|
-
export const TRACK_CHANGES_SECTION_RANK_NEW = {
|
|
273
270
|
[UNDO_CHANGES_GROUP.key]: 100,
|
|
274
271
|
[REDO_CHANGES_GROUP.key]: 200,
|
|
275
272
|
[TRACK_CHANGES_GROUP.key]: 300
|
|
@@ -281,11 +278,6 @@ export const REDO_CHANGES_GROUP_RANK = {
|
|
|
281
278
|
[REDO_BUTTON.key]: 100
|
|
282
279
|
};
|
|
283
280
|
export const TRACK_CHANGES_GROUP_RANK = {
|
|
284
|
-
[UNDO_BUTTON.key]: 100,
|
|
285
|
-
[REDO_BUTTON.key]: 200,
|
|
286
|
-
[TRACK_CHANGES_BUTTON.key]: 300
|
|
287
|
-
};
|
|
288
|
-
export const TRACK_CHANGES_GROUP_RANK_NEW = {
|
|
289
281
|
[TRACK_CHANGES_BUTTON.key]: 100
|
|
290
282
|
};
|
|
291
283
|
|
|
@@ -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 = "110.4.
|
|
17
|
+
const packageVersion = "110.4.9";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
12
12
|
import React, { Fragment } from 'react';
|
|
13
13
|
|
|
14
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
-
import { jsx } from '@emotion/react';
|
|
15
|
+
import { css, jsx } from '@emotion/react';
|
|
16
16
|
import classnames from 'classnames';
|
|
17
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
18
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
@@ -24,6 +24,11 @@ import ExtensionLozenge from '../Lozenge';
|
|
|
24
24
|
import { overlay } from '../styles';
|
|
25
25
|
import { isEmptyBodiedMacro } from './extension-utils';
|
|
26
26
|
import { content, contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
|
|
27
|
+
var hoverStyles = css({
|
|
28
|
+
'&:hover': {
|
|
29
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
|
|
30
|
+
}
|
|
31
|
+
});
|
|
27
32
|
function ExtensionWithPluginState(props) {
|
|
28
33
|
var _node$attrs, _node$attrs2;
|
|
29
34
|
var node = props.node,
|
|
@@ -82,7 +87,7 @@ function ExtensionWithPluginState(props) {
|
|
|
82
87
|
'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
|
|
83
88
|
'with-bodied-border': showMacroInteractionDesignUpdates && (hasBody || isLegacyContentMacroExtension(node)) && !showBodiedExtensionRendererView && show1PBodiedExtensionBorder,
|
|
84
89
|
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
|
|
85
|
-
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
|
|
90
|
+
'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered,
|
|
86
91
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
87
92
|
'without-frame': removeBorder,
|
|
88
93
|
'legacy-content': showLegacyContentHeader
|
|
@@ -158,9 +163,9 @@ function ExtensionWithPluginState(props) {
|
|
|
158
163
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
159
164
|
,
|
|
160
165
|
className: classNames,
|
|
161
|
-
css:
|
|
166
|
+
css: [
|
|
162
167
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
163
|
-
wrapperStyleInheritedCursor
|
|
168
|
+
wrapperStyleInheritedCursor, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
|
|
164
169
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
165
170
|
,
|
|
166
171
|
style: customContainerStyles
|
|
@@ -5,15 +5,32 @@
|
|
|
5
5
|
import React, { Fragment } from 'react';
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
8
|
+
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import classnames from 'classnames';
|
|
10
10
|
import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
11
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
13
|
import { useSharedPluginStateWithSelector } from '../../../hooks';
|
|
13
14
|
import { createWidthContext, WidthContext } from '../../../ui';
|
|
14
15
|
import ExtensionLozenge from '../Lozenge';
|
|
15
16
|
import { overlay } from '../styles';
|
|
16
|
-
import {
|
|
17
|
+
import { wrapperStyle } from './styles';
|
|
18
|
+
var inlineWrapperStyles = css({
|
|
19
|
+
maxWidth: '100%',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
21
|
+
'tr &': {
|
|
22
|
+
maxWidth: 'inherit'
|
|
23
|
+
},
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
25
|
+
'.rich-media-item': {
|
|
26
|
+
maxWidth: '100%'
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
var hoverStyles = css({
|
|
30
|
+
'&:hover': {
|
|
31
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
|
|
32
|
+
}
|
|
33
|
+
});
|
|
17
34
|
var InlineExtension = function InlineExtension(props) {
|
|
18
35
|
var node = props.node,
|
|
19
36
|
pluginInjectionApi = props.pluginInjectionApi,
|
|
@@ -37,7 +54,7 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
37
54
|
'with-overlay': !showMacroInteractionDesignUpdates,
|
|
38
55
|
'with-children': hasChildren,
|
|
39
56
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
40
|
-
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
|
|
57
|
+
'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
|
|
41
58
|
});
|
|
42
59
|
var rendererContainerWidth = 0;
|
|
43
60
|
if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
@@ -63,10 +80,10 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
63
80
|
setIsNodeHovered: setIsNodeHovered,
|
|
64
81
|
pluginInjectionApi: pluginInjectionApi
|
|
65
82
|
}), jsx("div", {
|
|
66
|
-
"data-testid": "inline-extension-wrapper"
|
|
83
|
+
"data-testid": "inline-extension-wrapper",
|
|
84
|
+
css: [
|
|
67
85
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
68
|
-
,
|
|
69
|
-
css: [wrapperStyle, inlineWrapperStyles]
|
|
86
|
+
wrapperStyle, inlineWrapperStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
|
|
70
87
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
71
88
|
,
|
|
72
89
|
className: classNames
|
|
@@ -25,17 +25,4 @@ export var wrapperStyle = css(wrapperDefault, {
|
|
|
25
25
|
'&.with-hover-border': {
|
|
26
26
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
|
|
27
27
|
}
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
31
|
-
export var inlineWrapperStyles = css({
|
|
32
|
-
maxWidth: '100%',
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
|
-
'tr &': {
|
|
35
|
-
maxWidth: 'inherit'
|
|
36
|
-
},
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
38
|
-
'.rich-media-item': {
|
|
39
|
-
maxWidth: '100%'
|
|
40
|
-
}
|
|
41
28
|
});
|
|
@@ -12,6 +12,7 @@ import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
|
|
|
12
12
|
import EditIcon from '@atlaskit/icon/core/edit';
|
|
13
13
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
14
14
|
import { Flex, xcss } from '@atlaskit/primitives';
|
|
15
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
16
|
var buttonContainerStyles = css({
|
|
16
17
|
opacity: 0,
|
|
17
18
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -90,7 +91,7 @@ export var EditToggle = function EditToggle(_ref) {
|
|
|
90
91
|
"data-testid": "extension-edit-toggle-container"
|
|
91
92
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
92
93
|
,
|
|
93
|
-
css:
|
|
94
|
+
css: [buttonContainerStyles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? null : isNodeHovered && showButtonContainerStyle]
|
|
94
95
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
95
96
|
,
|
|
96
97
|
style: customContainerStyles
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
/**
|
|
3
4
|
* @jsxRuntime classic
|
|
@@ -11,6 +12,7 @@ import { FormattedMessage, defineMessages } from 'react-intl-next';
|
|
|
11
12
|
import CustomizeIcon from '@atlaskit/icon/core/customize';
|
|
12
13
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
13
14
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
15
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
16
|
import Tooltip from '@atlaskit/tooltip';
|
|
15
17
|
var containerStyles = css({
|
|
16
18
|
textAlign: 'left',
|
|
@@ -21,6 +23,12 @@ var containerStyles = css({
|
|
|
21
23
|
marginTop: "var(--ds-space-300, 24px)"
|
|
22
24
|
}
|
|
23
25
|
});
|
|
26
|
+
var showLabelStyles = css({
|
|
27
|
+
opacity: 1
|
|
28
|
+
});
|
|
29
|
+
var hideLabelStyles = css({
|
|
30
|
+
opacity: 0
|
|
31
|
+
});
|
|
24
32
|
var labelStyles = css({
|
|
25
33
|
opacity: 0,
|
|
26
34
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -90,6 +98,9 @@ var iconStyles = css({
|
|
|
90
98
|
display: 'none'
|
|
91
99
|
}
|
|
92
100
|
});
|
|
101
|
+
var bodiedMacroIconStyles = css({
|
|
102
|
+
display: 'none'
|
|
103
|
+
});
|
|
93
104
|
var i18n = defineMessages({
|
|
94
105
|
configure: {
|
|
95
106
|
id: 'editor-common-extensibility.macro.button.configure',
|
|
@@ -120,7 +131,7 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
120
131
|
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
|
|
121
132
|
pluginInjectionApi = _ref.pluginInjectionApi;
|
|
122
133
|
var isInlineExtension = extensionName === 'inlineExtension';
|
|
123
|
-
var showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
|
|
134
|
+
var showDefaultBodiedStyles = expValEquals('cc_editor_ttvc_release_bundle_one', 'isEnabled', true) ? isBodiedMacro : isBodiedMacro && !isNodeHovered;
|
|
124
135
|
var shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
|
|
125
136
|
var containerClassNames = classnames({
|
|
126
137
|
bodied: isBodiedMacro
|
|
@@ -131,7 +142,7 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
131
142
|
bodied: isBodiedMacro,
|
|
132
143
|
'bodied-border': showDefaultBodiedStyles,
|
|
133
144
|
'bodied-background': showDefaultBodiedStyles,
|
|
134
|
-
'show-label': shouldShowBodiedMacroLabel,
|
|
145
|
+
'show-label': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : shouldShowBodiedMacroLabel,
|
|
135
146
|
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
|
|
136
147
|
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
|
|
137
148
|
// Need this separate class since we don't ever want to show the label during view mode
|
|
@@ -139,7 +150,8 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
139
150
|
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
|
|
140
151
|
});
|
|
141
152
|
var iconClassNames = classnames({
|
|
142
|
-
'hide-icon': isBodiedMacro && !isNodeHovered
|
|
153
|
+
'hide-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : isBodiedMacro && !isNodeHovered,
|
|
154
|
+
'extension-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true)
|
|
143
155
|
});
|
|
144
156
|
return (
|
|
145
157
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
|
|
@@ -180,12 +192,14 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
180
192
|
// Ignored via go/ees005
|
|
181
193
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
182
194
|
}, tooltipProps, {
|
|
183
|
-
css: labelStyles
|
|
195
|
+
css: [labelStyles].concat(_toConsumableArray(expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? [!showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles] : []))
|
|
184
196
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
185
197
|
,
|
|
186
198
|
className: labelClassNames
|
|
187
199
|
}), text, jsx("span", {
|
|
188
|
-
css: iconStyles,
|
|
200
|
+
css: [iconStyles, isBodiedMacro && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && bodiedMacroIconStyles]
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
202
|
+
,
|
|
189
203
|
className: iconClassNames,
|
|
190
204
|
"data-testid": "config-icon"
|
|
191
205
|
}, jsx(CustomizeIcon, {
|
|
@@ -17,6 +17,7 @@ import React, { Component, useEffect, useLayoutEffect, useRef, useState } from '
|
|
|
17
17
|
import memoizeOne from 'memoize-one';
|
|
18
18
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
19
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
20
21
|
import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
|
|
21
22
|
import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
|
|
22
23
|
import Extension from './Extension/Extension';
|
|
@@ -250,8 +251,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
|
|
|
250
251
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
251
252
|
isNodeSelected: selectedNode === node,
|
|
252
253
|
isNodeNested: isNodeNested,
|
|
253
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
254
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
254
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
255
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
255
256
|
isLivePageViewMode: isLivePageViewMode,
|
|
256
257
|
allowBodiedOverride: allowBodiedOverride
|
|
257
258
|
});
|
|
@@ -272,9 +273,9 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
|
|
|
272
273
|
pluginInjectionApi: pluginInjectionApi,
|
|
273
274
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
274
275
|
isNodeSelected: selectedNode === node,
|
|
275
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
276
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
276
277
|
isNodeNested: isNodeNested,
|
|
277
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
278
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
278
279
|
showLivePagesBodiedMacrosRendererView: !!(showLivePagesBodiedMacrosRendererView !== null && showLivePagesBodiedMacrosRendererView !== void 0 && showLivePagesBodiedMacrosRendererView(nodeToJSON(node))),
|
|
279
280
|
showUpdatedLivePages1PBodiedExtensionUI: !!(showUpdatedLivePages1PBodiedExtensionUI !== null && showUpdatedLivePages1PBodiedExtensionUI !== void 0 && showUpdatedLivePages1PBodiedExtensionUI(nodeToJSON(node))),
|
|
280
281
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
@@ -287,8 +288,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
|
|
|
287
288
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
288
289
|
isNodeSelected: selectedNode === node,
|
|
289
290
|
pluginInjectionApi: pluginInjectionApi,
|
|
290
|
-
isNodeHovered: this.state.isNodeHovered,
|
|
291
|
-
setIsNodeHovered: this.setIsNodeHovered,
|
|
291
|
+
isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
|
|
292
|
+
setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
|
|
292
293
|
isLivePageViewMode: isLivePageViewMode
|
|
293
294
|
}, extensionHandlerResult);
|
|
294
295
|
default:
|
|
@@ -8,6 +8,7 @@ import React from 'react';
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import classnames from 'classnames';
|
|
11
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
12
|
import { ZERO_WIDTH_SPACE } from '../whitespace';
|
|
12
13
|
var styles = css({
|
|
13
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -19,6 +20,37 @@ var styles = css({
|
|
|
19
20
|
position: 'relative'
|
|
20
21
|
}
|
|
21
22
|
});
|
|
23
|
+
var hoverStyles = css({
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
25
|
+
':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
|
|
26
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
|
|
27
|
+
},
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
29
|
+
':has(.extension-container:hover) .extension-label, :has(.extension-edit-toggle-container:hover) .extension-label, .extension-label:hover': {
|
|
30
|
+
opacity: 1,
|
|
31
|
+
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
|
|
32
|
+
boxShadow: 'none',
|
|
33
|
+
cursor: 'pointer',
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
35
|
+
'&.always-hide-label': {
|
|
36
|
+
opacity: 0,
|
|
37
|
+
cursor: 'auto'
|
|
38
|
+
},
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
40
|
+
'&.with-bodied-macro-live-page-styles': {
|
|
41
|
+
backgroundColor: "var(--ds-background-input, #FFFFFF)",
|
|
42
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
46
|
+
':has(.extension-label:hover) .extension-icon, :has(.extension-container:hover) .extension-icon, :has(.extension-edit-toggle-container:hover) .extension-icon': {
|
|
47
|
+
display: 'inline'
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
50
|
+
':has(.extension-label:hover) .extension-edit-toggle-container, :has(.extension-container:hover) .extension-edit-toggle-container, .extension-edit-toggle-container:hover': {
|
|
51
|
+
opacity: 1
|
|
52
|
+
}
|
|
53
|
+
});
|
|
22
54
|
/**
|
|
23
55
|
* If inlineExtension, add zero width space to the end of the nodes and wrap with span;
|
|
24
56
|
* Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
|
|
@@ -37,11 +69,9 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
|
|
|
37
69
|
'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
|
|
38
70
|
relative: showMacroInteractionDesignUpdates
|
|
39
71
|
});
|
|
40
|
-
return (
|
|
72
|
+
return jsx("span", {
|
|
41
73
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE)
|
|
46
|
-
);
|
|
74
|
+
className: wrapperClassNames,
|
|
75
|
+
css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
|
|
76
|
+
}, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
|
|
47
77
|
};
|