@atlaskit/editor-core 189.6.4 → 189.6.6
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 +13 -0
- package/dist/cjs/composable-editor/editor.js +13 -1
- package/dist/cjs/ui/ConfigPanel/ConfigPanel.js +7 -1
- package/dist/cjs/ui/ConfigPanel/Header.js +19 -4
- package/dist/cjs/ui/ConfigPanel/messages.js +5 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/composable-editor/editor.js +13 -1
- package/dist/es2019/ui/ConfigPanel/ConfigPanel.js +7 -1
- package/dist/es2019/ui/ConfigPanel/Header.js +20 -2
- package/dist/es2019/ui/ConfigPanel/messages.js +5 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/composable-editor/editor.js +13 -1
- package/dist/esm/ui/ConfigPanel/ConfigPanel.js +7 -1
- package/dist/esm/ui/ConfigPanel/Header.js +19 -4
- package/dist/esm/ui/ConfigPanel/messages.js +5 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/ConfigPanel/Header.d.ts +2 -0
- package/dist/types/ui/ConfigPanel/messages.d.ts +5 -0
- package/dist/types-ts4.5/ui/ConfigPanel/Header.d.ts +2 -0
- package/dist/types-ts4.5/ui/ConfigPanel/messages.d.ts +5 -0
- package/package.json +1 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 189.6.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#60153](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60153) [`5764d44cc93b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5764d44cc93b) - Cleaned references for feature flag: platform.editor.table.overflow-state-analytics
|
|
8
|
+
- [#60143](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60143) [`2088c0f833e1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2088c0f833e1) - Memonized the Editor feature flags to avoid unnecessary re-renders on Confluence
|
|
9
|
+
|
|
10
|
+
## 189.6.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#59654](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59654) [`af9025d9eca2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af9025d9eca2) - [ux] Update "Documentation" link text in ConfigPanel for select Confluence macros
|
|
15
|
+
|
|
3
16
|
## 189.6.4
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ComposableEditor = ComposableEditor;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
9
|
var _react = require("react");
|
|
9
10
|
var _react2 = require("@emotion/react");
|
|
10
11
|
var _v = _interopRequireDefault(require("uuid/v4"));
|
|
@@ -13,6 +14,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
13
14
|
var _ufo = require("@atlaskit/editor-common/ufo");
|
|
14
15
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
15
16
|
var _editorPluginBase = require("@atlaskit/editor-plugin-base");
|
|
17
|
+
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
|
16
18
|
var _actions = _interopRequireDefault(require("../actions"));
|
|
17
19
|
var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
|
|
18
20
|
var _versionWrapper = require("../version-wrapper");
|
|
@@ -110,6 +112,13 @@ function Editor(passedProps) {
|
|
|
110
112
|
providerFactory: providerFactory
|
|
111
113
|
});
|
|
112
114
|
}
|
|
115
|
+
var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
|
|
116
|
+
var ffRef = (0, _react.useRef)(featureFlags);
|
|
117
|
+
if (!(0, _isEqual.default)(ffRef.current, featureFlags)) {
|
|
118
|
+
ffRef.current = featureFlags;
|
|
119
|
+
}
|
|
120
|
+
return ffRef.current;
|
|
121
|
+
};
|
|
113
122
|
function ComposableEditor(props) {
|
|
114
123
|
var editorSessionId = (0, _react.useRef)((0, _v.default)());
|
|
115
124
|
var data = (0, _react.useMemo)(function () {
|
|
@@ -121,11 +130,14 @@ function ComposableEditor(props) {
|
|
|
121
130
|
editorSessionId: editorSessionId.current
|
|
122
131
|
};
|
|
123
132
|
}, [props.appearance]);
|
|
133
|
+
var memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
|
|
124
134
|
return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext
|
|
125
135
|
// @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
|
|
126
136
|
, {
|
|
127
137
|
data: data
|
|
128
|
-
}, (0, _react2.jsx)(Editor, props
|
|
138
|
+
}, (0, _react2.jsx)(Editor, (0, _extends2.default)({}, props, {
|
|
139
|
+
featureFlags: memodEditorFeatureFlags
|
|
140
|
+
})));
|
|
129
141
|
}
|
|
130
142
|
ComposableEditor.propTypes = {
|
|
131
143
|
minHeight: function minHeight(_ref) {
|
|
@@ -277,6 +277,11 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
|
|
|
277
277
|
var _this$props2 = _this.props,
|
|
278
278
|
onCancel = _this$props2.onCancel,
|
|
279
279
|
showHeader = _this$props2.showHeader;
|
|
280
|
+
|
|
281
|
+
// Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
|
|
282
|
+
// This will be removed when Top 5 Modernized Macros updates are rolled out
|
|
283
|
+
var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
|
|
284
|
+
var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
|
|
280
285
|
if (!showHeader) {
|
|
281
286
|
return null;
|
|
282
287
|
}
|
|
@@ -286,7 +291,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
|
|
|
286
291
|
description: extensionManifest.description,
|
|
287
292
|
summary: extensionManifest.summary,
|
|
288
293
|
documentationUrl: extensionManifest.documentationUrl,
|
|
289
|
-
onClose: onCancel
|
|
294
|
+
onClose: onCancel,
|
|
295
|
+
enableHelpCTA: enableHelpCTA
|
|
290
296
|
});
|
|
291
297
|
}));
|
|
292
298
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFirstVisibleFieldName", (0, _memoizeOne.default)(function (fields) {
|
|
@@ -16,7 +16,7 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
16
16
|
var _colors = require("@atlaskit/theme/colors");
|
|
17
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
18
|
var _messages = require("./messages");
|
|
19
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
19
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
20
20
|
/** @jsx jsx */
|
|
21
21
|
var iconWidth = 40;
|
|
22
22
|
var buttonWidth = 40;
|
|
@@ -28,13 +28,15 @@ var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _tag
|
|
|
28
28
|
var centeredItemTitle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
29
29
|
var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n max-width: 100%;\n white-space: initial;\n .item-summary {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
|
|
30
30
|
var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
|
|
31
|
-
var
|
|
31
|
+
var helpLinkStyle = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: ", ";\n"])), "var(--ds-space-150, 12px)");
|
|
32
|
+
var closeButtonWrapper = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n text-align: right;\n"])), buttonWidth);
|
|
32
33
|
var Header = function Header(_ref) {
|
|
33
34
|
var icon = _ref.icon,
|
|
34
35
|
title = _ref.title,
|
|
35
36
|
description = _ref.description,
|
|
36
37
|
summary = _ref.summary,
|
|
37
38
|
documentationUrl = _ref.documentationUrl,
|
|
39
|
+
enableHelpCTA = _ref.enableHelpCTA,
|
|
38
40
|
onClose = _ref.onClose,
|
|
39
41
|
intl = _ref.intl;
|
|
40
42
|
var ResolvedIcon = (0, _reactLoadable.default)({
|
|
@@ -74,11 +76,24 @@ var Header = function Header(_ref) {
|
|
|
74
76
|
}))), (description || documentationUrl) && (0, _react2.jsx)("p", {
|
|
75
77
|
css: descriptionStyle,
|
|
76
78
|
"data-testid": "config-panel-header-description"
|
|
77
|
-
}, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (0, _react2.jsx)("
|
|
79
|
+
}, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)("p", {
|
|
80
|
+
css: helpLinkStyle
|
|
81
|
+
}, (0, _react2.jsx)(HelpLink, {
|
|
82
|
+
documentationUrl: documentationUrl,
|
|
83
|
+
label: intl.formatMessage(_messages.messages.help)
|
|
84
|
+
})) : (0, _react2.jsx)(HelpLink, {
|
|
85
|
+
documentationUrl: documentationUrl,
|
|
86
|
+
label: intl.formatMessage(_messages.messages.documentation)
|
|
87
|
+
}))));
|
|
88
|
+
};
|
|
89
|
+
var HelpLink = function HelpLink(_ref2) {
|
|
90
|
+
var documentationUrl = _ref2.documentationUrl,
|
|
91
|
+
label = _ref2.label;
|
|
92
|
+
return (0, _react2.jsx)("a", {
|
|
78
93
|
target: "_blank",
|
|
79
94
|
rel: "noopener noreferrer",
|
|
80
95
|
href: documentationUrl,
|
|
81
96
|
"data-testid": "config-panel-header-documentation-link"
|
|
82
|
-
},
|
|
97
|
+
}, label);
|
|
83
98
|
};
|
|
84
99
|
var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);
|
|
@@ -56,6 +56,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
|
|
|
56
56
|
defaultMessage: 'Documentation',
|
|
57
57
|
description: 'Label for the documentation link'
|
|
58
58
|
},
|
|
59
|
+
help: {
|
|
60
|
+
id: 'fabric.editor.configPanel.help',
|
|
61
|
+
defaultMessage: 'Need help?',
|
|
62
|
+
description: 'Label for documentation link v.2 (to replace "Documentation" text)'
|
|
63
|
+
},
|
|
59
64
|
custom: {
|
|
60
65
|
id: 'fabric.editor.configPanel.dateRange.option.custom',
|
|
61
66
|
defaultMessage: 'Custom',
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
/** @jsx jsx */
|
|
2
3
|
import { useRef, useCallback, useMemo } from 'react';
|
|
3
4
|
import { jsx } from '@emotion/react';
|
|
@@ -7,6 +8,7 @@ import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
7
8
|
import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
8
9
|
import { getAnalyticsAppearance, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
|
|
9
10
|
import { basePlugin } from '@atlaskit/editor-plugin-base';
|
|
11
|
+
import isEqual from 'lodash/isEqual';
|
|
10
12
|
import EditorActions from '../actions';
|
|
11
13
|
import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
|
|
12
14
|
import { name, version } from '../version-wrapper';
|
|
@@ -105,6 +107,13 @@ function Editor(passedProps) {
|
|
|
105
107
|
providerFactory: providerFactory
|
|
106
108
|
});
|
|
107
109
|
}
|
|
110
|
+
const useMemoEditorFeatureFlags = featureFlags => {
|
|
111
|
+
const ffRef = useRef(featureFlags);
|
|
112
|
+
if (!isEqual(ffRef.current, featureFlags)) {
|
|
113
|
+
ffRef.current = featureFlags;
|
|
114
|
+
}
|
|
115
|
+
return ffRef.current;
|
|
116
|
+
};
|
|
108
117
|
export function ComposableEditor(props) {
|
|
109
118
|
const editorSessionId = useRef(uuid());
|
|
110
119
|
const data = useMemo(() => {
|
|
@@ -116,11 +125,14 @@ export function ComposableEditor(props) {
|
|
|
116
125
|
editorSessionId: editorSessionId.current
|
|
117
126
|
};
|
|
118
127
|
}, [props.appearance]);
|
|
128
|
+
const memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
|
|
119
129
|
return jsx(FabricEditorAnalyticsContext
|
|
120
130
|
// @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
|
|
121
131
|
, {
|
|
122
132
|
data: data
|
|
123
|
-
}, jsx(Editor, props
|
|
133
|
+
}, jsx(Editor, _extends({}, props, {
|
|
134
|
+
featureFlags: memodEditorFeatureFlags
|
|
135
|
+
})));
|
|
124
136
|
}
|
|
125
137
|
ComposableEditor.propTypes = {
|
|
126
138
|
minHeight: ({
|
|
@@ -219,6 +219,11 @@ class ConfigPanel extends React.Component {
|
|
|
219
219
|
onCancel,
|
|
220
220
|
showHeader
|
|
221
221
|
} = this.props;
|
|
222
|
+
|
|
223
|
+
// Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
|
|
224
|
+
// This will be removed when Top 5 Modernized Macros updates are rolled out
|
|
225
|
+
const modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
|
|
226
|
+
const enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
|
|
222
227
|
if (!showHeader) {
|
|
223
228
|
return null;
|
|
224
229
|
}
|
|
@@ -228,7 +233,8 @@ class ConfigPanel extends React.Component {
|
|
|
228
233
|
description: extensionManifest.description,
|
|
229
234
|
summary: extensionManifest.summary,
|
|
230
235
|
documentationUrl: extensionManifest.documentationUrl,
|
|
231
|
-
onClose: onCancel
|
|
236
|
+
onClose: onCancel,
|
|
237
|
+
enableHelpCTA: enableHelpCTA
|
|
232
238
|
});
|
|
233
239
|
}));
|
|
234
240
|
_defineProperty(this, "getFirstVisibleFieldName", memoizeOne(fields => {
|
|
@@ -65,6 +65,9 @@ const itemText = css`
|
|
|
65
65
|
const descriptionStyle = css`
|
|
66
66
|
margin-bottom: ${"var(--ds-space-300, 24px)"};
|
|
67
67
|
`;
|
|
68
|
+
const helpLinkStyle = css`
|
|
69
|
+
padding-top: ${"var(--ds-space-150, 12px)"};
|
|
70
|
+
`;
|
|
68
71
|
const closeButtonWrapper = css`
|
|
69
72
|
width: ${buttonWidth}px;
|
|
70
73
|
text-align: right;
|
|
@@ -75,6 +78,7 @@ const Header = ({
|
|
|
75
78
|
description,
|
|
76
79
|
summary,
|
|
77
80
|
documentationUrl,
|
|
81
|
+
enableHelpCTA,
|
|
78
82
|
onClose,
|
|
79
83
|
intl
|
|
80
84
|
}) => {
|
|
@@ -113,11 +117,25 @@ const Header = ({
|
|
|
113
117
|
}))), (description || documentationUrl) && jsx("p", {
|
|
114
118
|
css: descriptionStyle,
|
|
115
119
|
"data-testid": "config-panel-header-description"
|
|
116
|
-
}, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("
|
|
120
|
+
}, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
|
|
121
|
+
css: helpLinkStyle
|
|
122
|
+
}, jsx(HelpLink, {
|
|
123
|
+
documentationUrl: documentationUrl,
|
|
124
|
+
label: intl.formatMessage(messages.help)
|
|
125
|
+
})) : jsx(HelpLink, {
|
|
126
|
+
documentationUrl: documentationUrl,
|
|
127
|
+
label: intl.formatMessage(messages.documentation)
|
|
128
|
+
}))));
|
|
129
|
+
};
|
|
130
|
+
const HelpLink = ({
|
|
131
|
+
documentationUrl,
|
|
132
|
+
label
|
|
133
|
+
}) => {
|
|
134
|
+
return jsx("a", {
|
|
117
135
|
target: "_blank",
|
|
118
136
|
rel: "noopener noreferrer",
|
|
119
137
|
href: documentationUrl,
|
|
120
138
|
"data-testid": "config-panel-header-documentation-link"
|
|
121
|
-
},
|
|
139
|
+
}, label);
|
|
122
140
|
};
|
|
123
141
|
export default injectIntl(Header);
|
|
@@ -50,6 +50,11 @@ export const messages = defineMessages({
|
|
|
50
50
|
defaultMessage: 'Documentation',
|
|
51
51
|
description: 'Label for the documentation link'
|
|
52
52
|
},
|
|
53
|
+
help: {
|
|
54
|
+
id: 'fabric.editor.configPanel.help',
|
|
55
|
+
defaultMessage: 'Need help?',
|
|
56
|
+
description: 'Label for documentation link v.2 (to replace "Documentation" text)'
|
|
57
|
+
},
|
|
53
58
|
custom: {
|
|
54
59
|
id: 'fabric.editor.configPanel.dateRange.option.custom',
|
|
55
60
|
defaultMessage: 'Custom',
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "189.6.
|
|
2
|
+
export const version = "189.6.6";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
/** @jsx jsx */
|
|
2
3
|
import { useRef, useCallback, useMemo } from 'react';
|
|
3
4
|
import { jsx } from '@emotion/react';
|
|
@@ -7,6 +8,7 @@ import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
7
8
|
import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
8
9
|
import { getAnalyticsAppearance, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
|
|
9
10
|
import { basePlugin } from '@atlaskit/editor-plugin-base';
|
|
11
|
+
import isEqual from 'lodash/isEqual';
|
|
10
12
|
import EditorActions from '../actions';
|
|
11
13
|
import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
|
|
12
14
|
import { name, version } from '../version-wrapper';
|
|
@@ -103,6 +105,13 @@ function Editor(passedProps) {
|
|
|
103
105
|
providerFactory: providerFactory
|
|
104
106
|
});
|
|
105
107
|
}
|
|
108
|
+
var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
|
|
109
|
+
var ffRef = useRef(featureFlags);
|
|
110
|
+
if (!isEqual(ffRef.current, featureFlags)) {
|
|
111
|
+
ffRef.current = featureFlags;
|
|
112
|
+
}
|
|
113
|
+
return ffRef.current;
|
|
114
|
+
};
|
|
106
115
|
export function ComposableEditor(props) {
|
|
107
116
|
var editorSessionId = useRef(uuid());
|
|
108
117
|
var data = useMemo(function () {
|
|
@@ -114,11 +123,14 @@ export function ComposableEditor(props) {
|
|
|
114
123
|
editorSessionId: editorSessionId.current
|
|
115
124
|
};
|
|
116
125
|
}, [props.appearance]);
|
|
126
|
+
var memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
|
|
117
127
|
return jsx(FabricEditorAnalyticsContext
|
|
118
128
|
// @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
|
|
119
129
|
, {
|
|
120
130
|
data: data
|
|
121
|
-
}, jsx(Editor, props
|
|
131
|
+
}, jsx(Editor, _extends({}, props, {
|
|
132
|
+
featureFlags: memodEditorFeatureFlags
|
|
133
|
+
})));
|
|
122
134
|
}
|
|
123
135
|
ComposableEditor.propTypes = {
|
|
124
136
|
minHeight: function minHeight(_ref) {
|
|
@@ -268,6 +268,11 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
|
|
|
268
268
|
var _this$props2 = _this.props,
|
|
269
269
|
onCancel = _this$props2.onCancel,
|
|
270
270
|
showHeader = _this$props2.showHeader;
|
|
271
|
+
|
|
272
|
+
// Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
|
|
273
|
+
// This will be removed when Top 5 Modernized Macros updates are rolled out
|
|
274
|
+
var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
|
|
275
|
+
var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
|
|
271
276
|
if (!showHeader) {
|
|
272
277
|
return null;
|
|
273
278
|
}
|
|
@@ -277,7 +282,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
|
|
|
277
282
|
description: extensionManifest.description,
|
|
278
283
|
summary: extensionManifest.summary,
|
|
279
284
|
documentationUrl: extensionManifest.documentationUrl,
|
|
280
|
-
onClose: onCancel
|
|
285
|
+
onClose: onCancel,
|
|
286
|
+
enableHelpCTA: enableHelpCTA
|
|
281
287
|
});
|
|
282
288
|
}));
|
|
283
289
|
_defineProperty(_assertThisInitialized(_this), "getFirstVisibleFieldName", memoizeOne(function (fields) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
3
3
|
/** @jsx jsx */
|
|
4
4
|
import { Fragment } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
@@ -21,13 +21,15 @@ var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLitera
|
|
|
21
21
|
var centeredItemTitle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
22
22
|
var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n max-width: 100%;\n white-space: initial;\n .item-summary {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), relativeFontSizeToBase16(11.67), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
|
|
23
23
|
var descriptionStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
|
|
24
|
-
var
|
|
24
|
+
var helpLinkStyle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding-top: ", ";\n"])), "var(--ds-space-150, 12px)");
|
|
25
|
+
var closeButtonWrapper = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n text-align: right;\n"])), buttonWidth);
|
|
25
26
|
var Header = function Header(_ref) {
|
|
26
27
|
var icon = _ref.icon,
|
|
27
28
|
title = _ref.title,
|
|
28
29
|
description = _ref.description,
|
|
29
30
|
summary = _ref.summary,
|
|
30
31
|
documentationUrl = _ref.documentationUrl,
|
|
32
|
+
enableHelpCTA = _ref.enableHelpCTA,
|
|
31
33
|
onClose = _ref.onClose,
|
|
32
34
|
intl = _ref.intl;
|
|
33
35
|
var ResolvedIcon = Loadable({
|
|
@@ -67,11 +69,24 @@ var Header = function Header(_ref) {
|
|
|
67
69
|
}))), (description || documentationUrl) && jsx("p", {
|
|
68
70
|
css: descriptionStyle,
|
|
69
71
|
"data-testid": "config-panel-header-description"
|
|
70
|
-
}, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("
|
|
72
|
+
}, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
|
|
73
|
+
css: helpLinkStyle
|
|
74
|
+
}, jsx(HelpLink, {
|
|
75
|
+
documentationUrl: documentationUrl,
|
|
76
|
+
label: intl.formatMessage(messages.help)
|
|
77
|
+
})) : jsx(HelpLink, {
|
|
78
|
+
documentationUrl: documentationUrl,
|
|
79
|
+
label: intl.formatMessage(messages.documentation)
|
|
80
|
+
}))));
|
|
81
|
+
};
|
|
82
|
+
var HelpLink = function HelpLink(_ref2) {
|
|
83
|
+
var documentationUrl = _ref2.documentationUrl,
|
|
84
|
+
label = _ref2.label;
|
|
85
|
+
return jsx("a", {
|
|
71
86
|
target: "_blank",
|
|
72
87
|
rel: "noopener noreferrer",
|
|
73
88
|
href: documentationUrl,
|
|
74
89
|
"data-testid": "config-panel-header-documentation-link"
|
|
75
|
-
},
|
|
90
|
+
}, label);
|
|
76
91
|
};
|
|
77
92
|
export default injectIntl(Header);
|
|
@@ -50,6 +50,11 @@ export var messages = defineMessages({
|
|
|
50
50
|
defaultMessage: 'Documentation',
|
|
51
51
|
description: 'Label for the documentation link'
|
|
52
52
|
},
|
|
53
|
+
help: {
|
|
54
|
+
id: 'fabric.editor.configPanel.help',
|
|
55
|
+
defaultMessage: 'Need help?',
|
|
56
|
+
description: 'Label for documentation link v.2 (to replace "Documentation" text)'
|
|
57
|
+
},
|
|
53
58
|
custom: {
|
|
54
59
|
id: 'fabric.editor.configPanel.dateRange.option.custom',
|
|
55
60
|
defaultMessage: 'Custom',
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "189.6.
|
|
2
|
+
export var version = "189.6.6";
|
|
@@ -6,6 +6,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
|
|
|
6
6
|
description?: string | undefined;
|
|
7
7
|
summary?: string | undefined;
|
|
8
8
|
documentationUrl?: string | undefined;
|
|
9
|
+
enableHelpCTA?: boolean | undefined;
|
|
9
10
|
icon: Icon;
|
|
10
11
|
onClose: () => void;
|
|
11
12
|
} & WrappedComponentProps<"intl">>> & {
|
|
@@ -14,6 +15,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
|
|
|
14
15
|
description?: string | undefined;
|
|
15
16
|
summary?: string | undefined;
|
|
16
17
|
documentationUrl?: string | undefined;
|
|
18
|
+
enableHelpCTA?: boolean | undefined;
|
|
17
19
|
icon: Icon;
|
|
18
20
|
onClose: () => void;
|
|
19
21
|
} & WrappedComponentProps<"intl">>;
|
|
@@ -6,6 +6,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
|
|
|
6
6
|
description?: string | undefined;
|
|
7
7
|
summary?: string | undefined;
|
|
8
8
|
documentationUrl?: string | undefined;
|
|
9
|
+
enableHelpCTA?: boolean | undefined;
|
|
9
10
|
icon: Icon;
|
|
10
11
|
onClose: () => void;
|
|
11
12
|
} & WrappedComponentProps<"intl">>> & {
|
|
@@ -14,6 +15,7 @@ declare const _default: import("react").FC<import("react-intl-next").WithIntlPro
|
|
|
14
15
|
description?: string | undefined;
|
|
15
16
|
summary?: string | undefined;
|
|
16
17
|
documentationUrl?: string | undefined;
|
|
18
|
+
enableHelpCTA?: boolean | undefined;
|
|
17
19
|
icon: Icon;
|
|
18
20
|
onClose: () => void;
|
|
19
21
|
} & WrappedComponentProps<"intl">>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "189.6.
|
|
3
|
+
"version": "189.6.6",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -288,10 +288,6 @@
|
|
|
288
288
|
"platform.editor.table.drag-and-drop": {
|
|
289
289
|
"type": "boolean"
|
|
290
290
|
},
|
|
291
|
-
"platform.editor.table.overflow-state-analytics": {
|
|
292
|
-
"type": "boolean",
|
|
293
|
-
"referenceOnly": "true"
|
|
294
|
-
},
|
|
295
291
|
"platform.editor.table.increase-shadow-visibility_lh89r": {
|
|
296
292
|
"type": "boolean",
|
|
297
293
|
"referenceOnly": "true"
|