@atlaskit/editor-plugin-insert-block 2.0.2 → 2.0.3
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 +9 -0
- package/dist/cjs/plugin.js +23 -6
- package/dist/cjs/ui/ElementRail/MainToolBarIcon.js +18 -3
- package/dist/cjs/ui/ToolbarInsertBlock/index.js +2 -1
- package/dist/es2019/plugin.js +23 -6
- package/dist/es2019/ui/ElementRail/MainToolBarIcon.js +19 -3
- package/dist/es2019/ui/ToolbarInsertBlock/index.js +2 -1
- package/dist/esm/plugin.js +23 -6
- package/dist/esm/ui/ElementRail/MainToolBarIcon.js +18 -3
- package/dist/esm/ui/ToolbarInsertBlock/index.js +2 -1
- package/dist/types/ui/ElementRail/MainToolBarIcon.d.ts +4 -1
- package/dist/types-ts4.5/ui/ElementRail/MainToolBarIcon.d.ts +4 -1
- package/package.json +3 -3
- package/.eslintrc.js +0 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-insert-block
|
|
2
2
|
|
|
3
|
+
## 2.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#142470](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142470)
|
|
8
|
+
[`0d498622a7ca6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d498622a7ca6) -
|
|
9
|
+
Change background colour of icon to match surface behind it
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 2.0.2
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -60,7 +60,7 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
|
|
|
60
60
|
};
|
|
61
61
|
}
|
|
62
62
|
var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
63
|
-
var _api$primaryToolbar, _options$
|
|
63
|
+
var _api$primaryToolbar, _options$UNSAFE_edito4;
|
|
64
64
|
var _ref$config = _ref.config,
|
|
65
65
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
66
66
|
api = _ref.api;
|
|
@@ -128,11 +128,28 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
128
128
|
toggle();
|
|
129
129
|
}
|
|
130
130
|
},
|
|
131
|
-
|
|
131
|
+
/**
|
|
132
|
+
* For insert menu in right rail experiment - I don't want to expose state as it might not ship
|
|
133
|
+
* - Clean up ticket ED-24801
|
|
134
|
+
*/
|
|
135
|
+
// @ts-expect-error
|
|
136
|
+
getSharedState: function getSharedState(editorState) {
|
|
132
137
|
var _options$UNSAFE_edito;
|
|
133
|
-
if (
|
|
138
|
+
if (!editorState ||
|
|
134
139
|
// @ts-ignore
|
|
135
140
|
!['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
var pluginState = _elementBrowser.elementBrowserPmKey.getState(editorState);
|
|
144
|
+
return {
|
|
145
|
+
menuBrowserOpen: pluginState === null || pluginState === void 0 ? void 0 : pluginState.menuBrowserOpen
|
|
146
|
+
};
|
|
147
|
+
},
|
|
148
|
+
pmPlugins: function pmPlugins() {
|
|
149
|
+
var _options$UNSAFE_edito2;
|
|
150
|
+
if (
|
|
151
|
+
// @ts-ignore
|
|
152
|
+
!['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
|
|
136
153
|
[];
|
|
137
154
|
}
|
|
138
155
|
return [{
|
|
@@ -216,11 +233,11 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
216
233
|
// If we decide to ship the feature, we will consider a separate plugin if needed.
|
|
217
234
|
// Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
|
|
218
235
|
quickInsert: function quickInsert(intl) {
|
|
219
|
-
var _options$
|
|
236
|
+
var _options$UNSAFE_edito3;
|
|
220
237
|
var locale = intl.locale;
|
|
221
238
|
var isEligible = locale.startsWith('en') &&
|
|
222
239
|
// @ts-ignore
|
|
223
|
-
['full-page', 'full-width'].includes((_options$
|
|
240
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
|
|
224
241
|
if (isEligible && (0, _experiments.editorExperiment)('element-level-templates', true, {
|
|
225
242
|
exposure: true
|
|
226
243
|
})) {
|
|
@@ -240,7 +257,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
240
257
|
};
|
|
241
258
|
if (
|
|
242
259
|
// @ts-ignore
|
|
243
|
-
['full-page', 'full-width'].includes((_options$
|
|
260
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
|
|
244
261
|
plugin.pluginsOptions.contextPanel = function (state) {
|
|
245
262
|
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
246
263
|
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.RightRailIcon = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
10
11
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
11
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
13
|
var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
|
|
@@ -29,7 +30,7 @@ var buttonStyles = (0, _primitives.xcss)({
|
|
|
29
30
|
height: "var(--ds-space-300, 24px)",
|
|
30
31
|
width: "var(--ds-space-300, 24px)",
|
|
31
32
|
border: 'none',
|
|
32
|
-
backgroundColor: 'color.background.neutral',
|
|
33
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
33
34
|
borderRadius: 'border.radius.circle',
|
|
34
35
|
color: 'color.text',
|
|
35
36
|
zIndex: 'card',
|
|
@@ -54,11 +55,25 @@ var disabledStyles = (0, _primitives.xcss)({
|
|
|
54
55
|
backgroundColor: 'color.background.neutral'
|
|
55
56
|
}
|
|
56
57
|
});
|
|
58
|
+
var activeStyles = (0, _primitives.xcss)({
|
|
59
|
+
backgroundColor: 'color.background.selected',
|
|
60
|
+
color: 'color.text.selected',
|
|
61
|
+
':hover': {
|
|
62
|
+
backgroundColor: 'color.background.selected',
|
|
63
|
+
color: 'color.text.selected'
|
|
64
|
+
}
|
|
65
|
+
});
|
|
57
66
|
var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
|
|
58
67
|
var onClick = _ref.onClick,
|
|
59
|
-
isDisabled = _ref.isDisabled
|
|
68
|
+
isDisabled = _ref.isDisabled,
|
|
69
|
+
api = _ref.api;
|
|
60
70
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
61
71
|
formatMessage = _useIntl.formatMessage;
|
|
72
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['insertBlock']),
|
|
73
|
+
insertBlockState = _useSharedPluginState.insertBlockState;
|
|
74
|
+
|
|
75
|
+
// @ts-expect-error
|
|
76
|
+
var isOpen = insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.menuBrowserOpen;
|
|
62
77
|
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
63
78
|
xcss: [wrapperStyles]
|
|
64
79
|
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
@@ -71,7 +86,7 @@ var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
|
|
|
71
86
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
72
87
|
type: "button",
|
|
73
88
|
"aria-label": formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
|
|
74
|
-
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
|
|
89
|
+
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined, isOpen ? activeStyles : undefined],
|
|
75
90
|
onClick: onClick,
|
|
76
91
|
isDisabled: isDisabled
|
|
77
92
|
}, /*#__PURE__*/_react.default.createElement(_add.default, {
|
|
@@ -770,7 +770,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
770
770
|
css: _styles.wrapperStyle
|
|
771
771
|
}, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
|
|
772
772
|
onClick: this.handleClick,
|
|
773
|
-
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
|
|
773
|
+
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
|
|
774
|
+
api: this.props.pluginInjectionApi
|
|
774
775
|
}) : (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
|
|
775
776
|
popupsMountPoint: this.props.popupsMountPoint,
|
|
776
777
|
popupsBoundariesElement: this.props.popupsBoundariesElement,
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -51,7 +51,7 @@ export const insertBlockPlugin = ({
|
|
|
51
51
|
config: options = {},
|
|
52
52
|
api
|
|
53
53
|
}) => {
|
|
54
|
-
var _api$primaryToolbar, _options$
|
|
54
|
+
var _api$primaryToolbar, _options$UNSAFE_edito4;
|
|
55
55
|
const toggleDropdownMenuOptionsRef = {
|
|
56
56
|
current: null
|
|
57
57
|
};
|
|
@@ -117,11 +117,28 @@ export const insertBlockPlugin = ({
|
|
|
117
117
|
toggle();
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
|
-
|
|
120
|
+
/**
|
|
121
|
+
* For insert menu in right rail experiment - I don't want to expose state as it might not ship
|
|
122
|
+
* - Clean up ticket ED-24801
|
|
123
|
+
*/
|
|
124
|
+
// @ts-expect-error
|
|
125
|
+
getSharedState: editorState => {
|
|
121
126
|
var _options$UNSAFE_edito;
|
|
122
|
-
if (
|
|
127
|
+
if (!editorState ||
|
|
123
128
|
// @ts-ignore
|
|
124
129
|
!['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
const pluginState = elementBrowserPmKey.getState(editorState);
|
|
133
|
+
return {
|
|
134
|
+
menuBrowserOpen: pluginState === null || pluginState === void 0 ? void 0 : pluginState.menuBrowserOpen
|
|
135
|
+
};
|
|
136
|
+
},
|
|
137
|
+
pmPlugins: () => {
|
|
138
|
+
var _options$UNSAFE_edito2;
|
|
139
|
+
if (
|
|
140
|
+
// @ts-ignore
|
|
141
|
+
!['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
|
|
125
142
|
[];
|
|
126
143
|
}
|
|
127
144
|
return [{
|
|
@@ -207,13 +224,13 @@ export const insertBlockPlugin = ({
|
|
|
207
224
|
// If we decide to ship the feature, we will consider a separate plugin if needed.
|
|
208
225
|
// Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
|
|
209
226
|
quickInsert: intl => {
|
|
210
|
-
var _options$
|
|
227
|
+
var _options$UNSAFE_edito3;
|
|
211
228
|
const {
|
|
212
229
|
locale
|
|
213
230
|
} = intl;
|
|
214
231
|
const isEligible = locale.startsWith('en') &&
|
|
215
232
|
// @ts-ignore
|
|
216
|
-
['full-page', 'full-width'].includes((_options$
|
|
233
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
|
|
217
234
|
if (isEligible && editorExperiment('element-level-templates', true, {
|
|
218
235
|
exposure: true
|
|
219
236
|
})) {
|
|
@@ -233,7 +250,7 @@ export const insertBlockPlugin = ({
|
|
|
233
250
|
};
|
|
234
251
|
if (
|
|
235
252
|
// @ts-ignore
|
|
236
|
-
['full-page', 'full-width'].includes((_options$
|
|
253
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && editorExperiment('insert-menu-in-right-rail', true)) {
|
|
237
254
|
plugin.pluginsOptions.contextPanel = state => {
|
|
238
255
|
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
239
256
|
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
3
4
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
4
5
|
import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
|
|
@@ -22,7 +23,7 @@ const buttonStyles = xcss({
|
|
|
22
23
|
height: "var(--ds-space-300, 24px)",
|
|
23
24
|
width: "var(--ds-space-300, 24px)",
|
|
24
25
|
border: 'none',
|
|
25
|
-
backgroundColor: 'color.background.neutral',
|
|
26
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
26
27
|
borderRadius: 'border.radius.circle',
|
|
27
28
|
color: 'color.text',
|
|
28
29
|
zIndex: 'card',
|
|
@@ -47,13 +48,28 @@ const disabledStyles = xcss({
|
|
|
47
48
|
backgroundColor: 'color.background.neutral'
|
|
48
49
|
}
|
|
49
50
|
});
|
|
51
|
+
const activeStyles = xcss({
|
|
52
|
+
backgroundColor: 'color.background.selected',
|
|
53
|
+
color: 'color.text.selected',
|
|
54
|
+
':hover': {
|
|
55
|
+
backgroundColor: 'color.background.selected',
|
|
56
|
+
color: 'color.text.selected'
|
|
57
|
+
}
|
|
58
|
+
});
|
|
50
59
|
export const RightRailIcon = ({
|
|
51
60
|
onClick,
|
|
52
|
-
isDisabled
|
|
61
|
+
isDisabled,
|
|
62
|
+
api
|
|
53
63
|
}) => {
|
|
54
64
|
const {
|
|
55
65
|
formatMessage
|
|
56
66
|
} = useIntl();
|
|
67
|
+
const {
|
|
68
|
+
insertBlockState
|
|
69
|
+
} = useSharedPluginState(api, ['insertBlock']);
|
|
70
|
+
|
|
71
|
+
// @ts-expect-error
|
|
72
|
+
const isOpen = insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.menuBrowserOpen;
|
|
57
73
|
return /*#__PURE__*/React.createElement(Box, {
|
|
58
74
|
xcss: [wrapperStyles]
|
|
59
75
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
@@ -66,7 +82,7 @@ export const RightRailIcon = ({
|
|
|
66
82
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
67
83
|
type: "button",
|
|
68
84
|
"aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
|
|
69
|
-
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
|
|
85
|
+
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined, isOpen ? activeStyles : undefined],
|
|
70
86
|
onClick: onClick,
|
|
71
87
|
isDisabled: isDisabled
|
|
72
88
|
}, /*#__PURE__*/React.createElement(EditorAddIcon, {
|
|
@@ -804,7 +804,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
804
804
|
css: wrapperStyle
|
|
805
805
|
}, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true) ? jsx(RightRailIcon, {
|
|
806
806
|
onClick: this.handleClick,
|
|
807
|
-
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
|
|
807
|
+
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
|
|
808
|
+
api: this.props.pluginInjectionApi
|
|
808
809
|
}) : jsx(BlockInsertMenu, {
|
|
809
810
|
popupsMountPoint: this.props.popupsMountPoint,
|
|
810
811
|
popupsBoundariesElement: this.props.popupsBoundariesElement,
|
package/dist/esm/plugin.js
CHANGED
|
@@ -50,7 +50,7 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
|
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
53
|
-
var _api$primaryToolbar, _options$
|
|
53
|
+
var _api$primaryToolbar, _options$UNSAFE_edito4;
|
|
54
54
|
var _ref$config = _ref.config,
|
|
55
55
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
56
56
|
api = _ref.api;
|
|
@@ -118,11 +118,28 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
118
118
|
toggle();
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
|
-
|
|
121
|
+
/**
|
|
122
|
+
* For insert menu in right rail experiment - I don't want to expose state as it might not ship
|
|
123
|
+
* - Clean up ticket ED-24801
|
|
124
|
+
*/
|
|
125
|
+
// @ts-expect-error
|
|
126
|
+
getSharedState: function getSharedState(editorState) {
|
|
122
127
|
var _options$UNSAFE_edito;
|
|
123
|
-
if (
|
|
128
|
+
if (!editorState ||
|
|
124
129
|
// @ts-ignore
|
|
125
130
|
!['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
var pluginState = elementBrowserPmKey.getState(editorState);
|
|
134
|
+
return {
|
|
135
|
+
menuBrowserOpen: pluginState === null || pluginState === void 0 ? void 0 : pluginState.menuBrowserOpen
|
|
136
|
+
};
|
|
137
|
+
},
|
|
138
|
+
pmPlugins: function pmPlugins() {
|
|
139
|
+
var _options$UNSAFE_edito2;
|
|
140
|
+
if (
|
|
141
|
+
// @ts-ignore
|
|
142
|
+
!['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
|
|
126
143
|
[];
|
|
127
144
|
}
|
|
128
145
|
return [{
|
|
@@ -206,11 +223,11 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
206
223
|
// If we decide to ship the feature, we will consider a separate plugin if needed.
|
|
207
224
|
// Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
|
|
208
225
|
quickInsert: function quickInsert(intl) {
|
|
209
|
-
var _options$
|
|
226
|
+
var _options$UNSAFE_edito3;
|
|
210
227
|
var locale = intl.locale;
|
|
211
228
|
var isEligible = locale.startsWith('en') &&
|
|
212
229
|
// @ts-ignore
|
|
213
|
-
['full-page', 'full-width'].includes((_options$
|
|
230
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
|
|
214
231
|
if (isEligible && editorExperiment('element-level-templates', true, {
|
|
215
232
|
exposure: true
|
|
216
233
|
})) {
|
|
@@ -230,7 +247,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
230
247
|
};
|
|
231
248
|
if (
|
|
232
249
|
// @ts-ignore
|
|
233
|
-
['full-page', 'full-width'].includes((_options$
|
|
250
|
+
['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && editorExperiment('insert-menu-in-right-rail', true)) {
|
|
234
251
|
plugin.pluginsOptions.contextPanel = function (state) {
|
|
235
252
|
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
236
253
|
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
3
4
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
4
5
|
import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
|
|
@@ -22,7 +23,7 @@ var buttonStyles = xcss({
|
|
|
22
23
|
height: "var(--ds-space-300, 24px)",
|
|
23
24
|
width: "var(--ds-space-300, 24px)",
|
|
24
25
|
border: 'none',
|
|
25
|
-
backgroundColor: 'color.background.neutral',
|
|
26
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
26
27
|
borderRadius: 'border.radius.circle',
|
|
27
28
|
color: 'color.text',
|
|
28
29
|
zIndex: 'card',
|
|
@@ -47,11 +48,25 @@ var disabledStyles = xcss({
|
|
|
47
48
|
backgroundColor: 'color.background.neutral'
|
|
48
49
|
}
|
|
49
50
|
});
|
|
51
|
+
var activeStyles = xcss({
|
|
52
|
+
backgroundColor: 'color.background.selected',
|
|
53
|
+
color: 'color.text.selected',
|
|
54
|
+
':hover': {
|
|
55
|
+
backgroundColor: 'color.background.selected',
|
|
56
|
+
color: 'color.text.selected'
|
|
57
|
+
}
|
|
58
|
+
});
|
|
50
59
|
export var RightRailIcon = function RightRailIcon(_ref) {
|
|
51
60
|
var onClick = _ref.onClick,
|
|
52
|
-
isDisabled = _ref.isDisabled
|
|
61
|
+
isDisabled = _ref.isDisabled,
|
|
62
|
+
api = _ref.api;
|
|
53
63
|
var _useIntl = useIntl(),
|
|
54
64
|
formatMessage = _useIntl.formatMessage;
|
|
65
|
+
var _useSharedPluginState = useSharedPluginState(api, ['insertBlock']),
|
|
66
|
+
insertBlockState = _useSharedPluginState.insertBlockState;
|
|
67
|
+
|
|
68
|
+
// @ts-expect-error
|
|
69
|
+
var isOpen = insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.menuBrowserOpen;
|
|
55
70
|
return /*#__PURE__*/React.createElement(Box, {
|
|
56
71
|
xcss: [wrapperStyles]
|
|
57
72
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
@@ -64,7 +79,7 @@ export var RightRailIcon = function RightRailIcon(_ref) {
|
|
|
64
79
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
65
80
|
type: "button",
|
|
66
81
|
"aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
|
|
67
|
-
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
|
|
82
|
+
xcss: [buttonStyles, isDisabled ? disabledStyles : undefined, isOpen ? activeStyles : undefined],
|
|
68
83
|
onClick: onClick,
|
|
69
84
|
isDisabled: isDisabled
|
|
70
85
|
}, /*#__PURE__*/React.createElement(EditorAddIcon, {
|
|
@@ -761,7 +761,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
761
761
|
css: wrapperStyle
|
|
762
762
|
}, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true) ? jsx(RightRailIcon, {
|
|
763
763
|
onClick: this.handleClick,
|
|
764
|
-
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
|
|
764
|
+
isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
|
|
765
|
+
api: this.props.pluginInjectionApi
|
|
765
766
|
}) : jsx(BlockInsertMenu, {
|
|
766
767
|
popupsMountPoint: this.props.popupsMountPoint,
|
|
767
768
|
popupsBoundariesElement: this.props.popupsBoundariesElement,
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type InsertBlockPlugin } from '../../plugin';
|
|
2
4
|
type Props = {
|
|
3
5
|
onClick: () => void;
|
|
4
6
|
isDisabled: boolean;
|
|
7
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
5
8
|
};
|
|
6
|
-
export declare const RightRailIcon: ({ onClick, isDisabled }: Props) => JSX.Element;
|
|
9
|
+
export declare const RightRailIcon: ({ onClick, isDisabled, api }: Props) => JSX.Element;
|
|
7
10
|
export {};
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type InsertBlockPlugin } from '../../plugin';
|
|
2
4
|
type Props = {
|
|
3
5
|
onClick: () => void;
|
|
4
6
|
isDisabled: boolean;
|
|
7
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
5
8
|
};
|
|
6
|
-
export declare const RightRailIcon: ({ onClick, isDisabled }: Props) => JSX.Element;
|
|
9
|
+
export declare const RightRailIcon: ({ onClick, isDisabled, api }: Props) => JSX.Element;
|
|
7
10
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-insert-block",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "Insert block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/button": "^20.1.0",
|
|
35
|
-
"@atlaskit/editor-common": "^90.
|
|
35
|
+
"@atlaskit/editor-common": "^90.1.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
37
37
|
"@atlaskit/editor-plugin-block-type": "^3.15.0",
|
|
38
38
|
"@atlaskit/editor-plugin-code-block": "^3.3.0",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/icon": "^22.18.0",
|
|
63
63
|
"@atlaskit/icon-lab": "^0.2.0",
|
|
64
64
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
65
|
-
"@atlaskit/primitives": "^12.
|
|
65
|
+
"@atlaskit/primitives": "^12.2.0",
|
|
66
66
|
"@atlaskit/theme": "^13.0.0",
|
|
67
67
|
"@atlaskit/tmp-editor-statsig": "^2.1.0",
|
|
68
68
|
"@atlaskit/tokens": "^1.60.0",
|
package/.eslintrc.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
rules: {
|
|
3
|
-
'@typescript-eslint/no-duplicate-imports': 'error',
|
|
4
|
-
'@typescript-eslint/no-explicit-any': 'error',
|
|
5
|
-
'@typescript-eslint/ban-types': [
|
|
6
|
-
'error',
|
|
7
|
-
{
|
|
8
|
-
types: {
|
|
9
|
-
'React.FC':
|
|
10
|
-
'Please use types directly on props instead, and explicitly define children if required',
|
|
11
|
-
'React.FunctionalComponent':
|
|
12
|
-
'Please use types directly on props instead, and explicitly define children if required',
|
|
13
|
-
},
|
|
14
|
-
extendDefaults: false,
|
|
15
|
-
},
|
|
16
|
-
],
|
|
17
|
-
},
|
|
18
|
-
overrides: [
|
|
19
|
-
{
|
|
20
|
-
files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
|
|
21
|
-
rules: {
|
|
22
|
-
'@typescript-eslint/no-explicit-any': 'off',
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
],
|
|
26
|
-
};
|