@atlaskit/editor-plugin-panel 5.4.3 → 5.4.4

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/panelPlugin.js +16 -0
  3. package/dist/cjs/ui/panelBlockMenuItem.js +50 -0
  4. package/dist/es2019/panelPlugin.js +191 -173
  5. package/dist/es2019/ui/panelBlockMenuItem.js +41 -0
  6. package/dist/esm/panelPlugin.js +16 -0
  7. package/dist/esm/ui/panelBlockMenuItem.js +41 -0
  8. package/dist/types/panelPluginType.d.ts +5 -1
  9. package/dist/types/ui/panelBlockMenuItem.d.ts +4 -0
  10. package/dist/types-ts4.5/panelPluginType.d.ts +5 -1
  11. package/dist/types-ts4.5/ui/panelBlockMenuItem.d.ts +4 -0
  12. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-panel
2
2
 
3
+ ## 5.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`4a22b35e24a16`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4a22b35e24a16) -
8
+ [ux] Adds panel to the block menu.
9
+ - Updated dependencies
10
+
3
11
  ## 5.4.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/panelPlugin.js CHANGED
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _adfSchema = require("@atlaskit/adf-schema");
11
11
  var _analytics = require("@atlaskit/editor-common/analytics");
12
+ var _blockMenu = require("@atlaskit/editor-common/block-menu");
12
13
  var _insert = require("@atlaskit/editor-common/insert");
13
14
  var _messages = require("@atlaskit/editor-common/messages");
14
15
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
@@ -16,10 +17,12 @@ var _utils = require("@atlaskit/editor-common/utils");
16
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
18
  var _colors = require("@atlaskit/theme/colors");
18
19
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
20
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
19
21
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
20
22
  var _actions = require("./editor-actions/actions");
21
23
  var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
22
24
  var _main = require("./pm-plugins/main");
25
+ var _panelBlockMenuItem = require("./ui/panelBlockMenuItem");
23
26
  var _toolbar = require("./ui/toolbar");
24
27
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
28
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27,6 +30,19 @@ var panelPlugin = function panelPlugin(_ref) {
27
30
  var _ref$config = _ref.config,
28
31
  options = _ref$config === void 0 ? {} : _ref$config,
29
32
  api = _ref.api;
33
+ if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
34
+ var _api$blockMenu;
35
+ api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
36
+ type: 'block-menu-item',
37
+ key: _blockMenu.FORMAT_PANEL_MENU_ITEM.key,
38
+ parent: {
39
+ type: 'block-menu-section',
40
+ key: 'nested-menu-format-section-primary',
41
+ rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_PANEL_MENU_ITEM.key]
42
+ },
43
+ component: (0, _panelBlockMenuItem.createPanelBlockMenuItem)(api)
44
+ }]);
45
+ }
30
46
  return {
31
47
  name: 'panel',
32
48
  nodes: function nodes() {
package/dist/cjs/ui/panelBlockMenuItem.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.createPanelBlockMenuItem = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _reactIntlNext = require("react-intl-next");
11
+ var _messages = require("@atlaskit/editor-common/messages");
12
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
13
+ var _state = require("@atlaskit/editor-prosemirror/state");
14
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
15
+ var _informationCircle = _interopRequireDefault(require("@atlaskit/icon/core/information-circle"));
16
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
+ var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
18
+ var api = _ref.api;
19
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
20
+ formatMessage = _useIntl.formatMessage;
21
+ var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
22
+ var isPanelSelected = (0, _react.useMemo)(function () {
23
+ if (!selection) {
24
+ return false;
25
+ }
26
+ if (selection instanceof _state.NodeSelection) {
27
+ // Note: we are checking for any type of panel, not just of type infopanel
28
+ return selection.node.type.name === 'panel';
29
+ }
30
+ return false;
31
+ }, [selection]);
32
+ var handleClick = function handleClick() {
33
+ var _api$blockMenu;
34
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('panel'));
35
+ };
36
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
37
+ onClick: handleClick,
38
+ isSelected: isPanelSelected,
39
+ elemBefore: /*#__PURE__*/_react.default.createElement(_informationCircle.default, {
40
+ label: ""
41
+ })
42
+ }, formatMessage(_messages.blockTypeMessages.panel));
43
+ };
44
+ var createPanelBlockMenuItem = exports.createPanelBlockMenuItem = function createPanelBlockMenuItem(api) {
45
+ return function () {
46
+ return /*#__PURE__*/_react.default.createElement(PanelBlockMenuItem, {
47
+ api: api
48
+ });
49
+ };
50
+ };
package/dist/es2019/panelPlugin.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
+ import { FORMAT_PANEL_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
4
5
  import { insertSelectedItem } from '@atlaskit/editor-common/insert';
5
6
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
6
7
  import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
@@ -8,207 +9,224 @@ import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { T50 } from '@atlaskit/theme/colors';
10
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
11
13
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
14
  import { insertPanelWithAnalytics } from './editor-actions/actions';
13
15
  import keymap from './pm-plugins/keymaps';
14
16
  import { createPlugin } from './pm-plugins/main';
17
+ import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
15
18
  import { getToolbarConfig } from './ui/toolbar';
16
19
  const panelPlugin = ({
17
20
  config: options = {},
18
21
  api
19
- }) => ({
20
- name: 'panel',
21
- nodes() {
22
- if (fg('platform_editor_adf_with_localid')) {
22
+ }) => {
23
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
24
+ var _api$blockMenu;
25
+ api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
26
+ type: 'block-menu-item',
27
+ key: FORMAT_PANEL_MENU_ITEM.key,
28
+ parent: {
29
+ type: 'block-menu-section',
30
+ key: 'nested-menu-format-section-primary',
31
+ rank: FORMAT_NESTED_MENU_RANK[FORMAT_PANEL_MENU_ITEM.key]
32
+ },
33
+ component: createPanelBlockMenuItem(api)
34
+ }]);
35
+ }
36
+ return {
37
+ name: 'panel',
38
+ nodes() {
39
+ if (fg('platform_editor_adf_with_localid')) {
40
+ return [{
41
+ name: 'panel',
42
+ node: extendedPanelWithLocalId(!!options.allowCustomPanel)
43
+ }];
44
+ }
23
45
  return [{
24
46
  name: 'panel',
25
- node: extendedPanelWithLocalId(!!options.allowCustomPanel)
47
+ node: extendedPanel(!!options.allowCustomPanel)
26
48
  }];
27
- }
28
- return [{
29
- name: 'panel',
30
- node: extendedPanel(!!options.allowCustomPanel)
31
- }];
32
- },
33
- pmPlugins() {
34
- return [{
35
- name: 'panel',
36
- plugin: ({
37
- providerFactory,
38
- dispatch,
39
- nodeViewPortalProviderAPI
40
- }) => createPlugin(dispatch, providerFactory, options, api, nodeViewPortalProviderAPI)
41
- }, {
42
- name: 'panelKeyMap',
43
- plugin: () => keymap()
44
- }];
45
- },
46
- actions: {
47
- insertPanel(inputMethod) {
48
- if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
49
- return function (state, dispatch) {
50
- const tr = createPanelAction({
51
- state,
52
- attributes: {
53
- panelType: PanelType.INFO
54
- },
55
- api,
56
- inputMethod
57
- });
58
- if (!tr) {
59
- return false;
60
- }
61
- if (dispatch) {
62
- dispatch(tr);
63
- }
64
- return true;
65
- };
66
- } else {
67
- var _api$analytics;
68
- return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
69
- }
70
- }
71
- },
72
- pluginsOptions: {
73
- quickInsert: ({
74
- formatMessage
75
- }) => {
76
- if (editorExperiment('platform_editor_insertion', 'variant1')) {
77
- return [{
78
- id: 'infopanel',
79
- title: formatMessage(blockTypeMessages.infoPanel),
80
- keywords: ['panel'],
81
- description: formatMessage(blockTypeMessages.infoPanelDescription),
82
- priority: 800,
83
- icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
84
- action(typeAheadInsert, state) {
85
- return createPanelAction({
86
- state,
87
- attributes: {
88
- panelType: PanelType.INFO
89
- },
90
- api,
91
- typeAheadInsert
92
- });
93
- }
94
- }];
95
- } else {
96
- const quickInsertOptions = [{
97
- id: 'infopanel',
98
- title: formatMessage(blockTypeMessages.infoPanel),
99
- keywords: ['panel'],
100
- description: formatMessage(blockTypeMessages.infoPanelDescription),
101
- priority: 800,
102
- icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
103
- action(typeAheadInsert, state) {
104
- return createPanelAction({
49
+ },
50
+ pmPlugins() {
51
+ return [{
52
+ name: 'panel',
53
+ plugin: ({
54
+ providerFactory,
55
+ dispatch,
56
+ nodeViewPortalProviderAPI
57
+ }) => createPlugin(dispatch, providerFactory, options, api, nodeViewPortalProviderAPI)
58
+ }, {
59
+ name: 'panelKeyMap',
60
+ plugin: () => keymap()
61
+ }];
62
+ },
63
+ actions: {
64
+ insertPanel(inputMethod) {
65
+ if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
66
+ return function (state, dispatch) {
67
+ const tr = createPanelAction({
105
68
  state,
106
69
  attributes: {
107
70
  panelType: PanelType.INFO
108
71
  },
109
72
  api,
110
- typeAheadInsert
111
- });
112
- }
113
- }, {
114
- id: 'notepanel',
115
- title: formatMessage(blockTypeMessages.notePanel),
116
- description: formatMessage(blockTypeMessages.notePanelDescription),
117
- priority: 1000,
118
- icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
119
- action(typeAheadInsert, state) {
120
- return createPanelAction({
121
- state,
122
- attributes: {
123
- panelType: PanelType.NOTE
124
- },
125
- api,
126
- typeAheadInsert
127
- });
128
- }
129
- }, {
130
- id: 'successpanel',
131
- title: formatMessage(blockTypeMessages.successPanel),
132
- description: formatMessage(blockTypeMessages.successPanelDescription),
133
- keywords: ['tip'],
134
- priority: 1000,
135
- icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
136
- action(typeAheadInsert, state) {
137
- return createPanelAction({
138
- state,
139
- attributes: {
140
- panelType: PanelType.SUCCESS
141
- },
142
- api,
143
- typeAheadInsert
144
- });
145
- }
146
- }, {
147
- id: 'warningpanel',
148
- title: formatMessage(blockTypeMessages.warningPanel),
149
- description: formatMessage(blockTypeMessages.warningPanelDescription),
150
- priority: 1000,
151
- icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
152
- action(typeAheadInsert, state) {
153
- return createPanelAction({
154
- state,
155
- attributes: {
156
- panelType: PanelType.WARNING
157
- },
158
- api,
159
- typeAheadInsert
160
- });
161
- }
162
- }, {
163
- id: 'errorpanel',
164
- title: formatMessage(blockTypeMessages.errorPanel),
165
- description: formatMessage(blockTypeMessages.errorPanelDescription),
166
- priority: 1000,
167
- icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
168
- action(typeAheadInsert, state) {
169
- return createPanelAction({
170
- state,
171
- attributes: {
172
- panelType: PanelType.ERROR
173
- },
174
- api,
175
- typeAheadInsert
73
+ inputMethod
176
74
  });
177
- }
178
- }];
179
- if (options.allowCustomPanel && options.allowCustomPanelEdit) {
180
- quickInsertOptions.push({
181
- id: 'custompanel',
182
- title: formatMessage(blockTypeMessages.customPanel),
183
- description: formatMessage(blockTypeMessages.customPanelDescription),
75
+ if (!tr) {
76
+ return false;
77
+ }
78
+ if (dispatch) {
79
+ dispatch(tr);
80
+ }
81
+ return true;
82
+ };
83
+ } else {
84
+ var _api$analytics;
85
+ return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
86
+ }
87
+ }
88
+ },
89
+ pluginsOptions: {
90
+ quickInsert: ({
91
+ formatMessage
92
+ }) => {
93
+ if (editorExperiment('platform_editor_insertion', 'variant1')) {
94
+ return [{
95
+ id: 'infopanel',
96
+ title: formatMessage(blockTypeMessages.infoPanel),
97
+ keywords: ['panel'],
98
+ description: formatMessage(blockTypeMessages.infoPanelDescription),
99
+ priority: 800,
100
+ icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
101
+ action(typeAheadInsert, state) {
102
+ return createPanelAction({
103
+ state,
104
+ attributes: {
105
+ panelType: PanelType.INFO
106
+ },
107
+ api,
108
+ typeAheadInsert
109
+ });
110
+ }
111
+ }];
112
+ } else {
113
+ const quickInsertOptions = [{
114
+ id: 'infopanel',
115
+ title: formatMessage(blockTypeMessages.infoPanel),
116
+ keywords: ['panel'],
117
+ description: formatMessage(blockTypeMessages.infoPanelDescription),
118
+ priority: 800,
119
+ icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
120
+ action(typeAheadInsert, state) {
121
+ return createPanelAction({
122
+ state,
123
+ attributes: {
124
+ panelType: PanelType.INFO
125
+ },
126
+ api,
127
+ typeAheadInsert
128
+ });
129
+ }
130
+ }, {
131
+ id: 'notepanel',
132
+ title: formatMessage(blockTypeMessages.notePanel),
133
+ description: formatMessage(blockTypeMessages.notePanelDescription),
134
+ priority: 1000,
135
+ icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
136
+ action(typeAheadInsert, state) {
137
+ return createPanelAction({
138
+ state,
139
+ attributes: {
140
+ panelType: PanelType.NOTE
141
+ },
142
+ api,
143
+ typeAheadInsert
144
+ });
145
+ }
146
+ }, {
147
+ id: 'successpanel',
148
+ title: formatMessage(blockTypeMessages.successPanel),
149
+ description: formatMessage(blockTypeMessages.successPanelDescription),
150
+ keywords: ['tip'],
151
+ priority: 1000,
152
+ icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
153
+ action(typeAheadInsert, state) {
154
+ return createPanelAction({
155
+ state,
156
+ attributes: {
157
+ panelType: PanelType.SUCCESS
158
+ },
159
+ api,
160
+ typeAheadInsert
161
+ });
162
+ }
163
+ }, {
164
+ id: 'warningpanel',
165
+ title: formatMessage(blockTypeMessages.warningPanel),
166
+ description: formatMessage(blockTypeMessages.warningPanelDescription),
167
+ priority: 1000,
168
+ icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
169
+ action(typeAheadInsert, state) {
170
+ return createPanelAction({
171
+ state,
172
+ attributes: {
173
+ panelType: PanelType.WARNING
174
+ },
175
+ api,
176
+ typeAheadInsert
177
+ });
178
+ }
179
+ }, {
180
+ id: 'errorpanel',
181
+ title: formatMessage(blockTypeMessages.errorPanel),
182
+ description: formatMessage(blockTypeMessages.errorPanelDescription),
184
183
  priority: 1000,
185
- icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
184
+ icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
186
185
  action(typeAheadInsert, state) {
187
186
  return createPanelAction({
188
187
  state,
189
188
  attributes: {
190
- panelType: PanelType.CUSTOM,
191
- panelIcon: ':rainbow:',
192
- panelIconId: '1f308',
193
- panelIconText: '🌈',
194
- // Ignored via go/ees007
195
- // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
196
- // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
197
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
198
- panelColor: T50
189
+ panelType: PanelType.ERROR
199
190
  },
200
191
  api,
201
192
  typeAheadInsert
202
193
  });
203
194
  }
204
- });
195
+ }];
196
+ if (options.allowCustomPanel && options.allowCustomPanelEdit) {
197
+ quickInsertOptions.push({
198
+ id: 'custompanel',
199
+ title: formatMessage(blockTypeMessages.customPanel),
200
+ description: formatMessage(blockTypeMessages.customPanelDescription),
201
+ priority: 1000,
202
+ icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
203
+ action(typeAheadInsert, state) {
204
+ return createPanelAction({
205
+ state,
206
+ attributes: {
207
+ panelType: PanelType.CUSTOM,
208
+ panelIcon: ':rainbow:',
209
+ panelIconId: '1f308',
210
+ panelIconText: '🌈',
211
+ // Ignored via go/ees007
212
+ // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
213
+ // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
214
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
215
+ panelColor: T50
216
+ },
217
+ api,
218
+ typeAheadInsert
219
+ });
220
+ }
221
+ });
222
+ }
223
+ return quickInsertOptions;
205
224
  }
206
- return quickInsertOptions;
207
- }
208
- },
209
- floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api)
210
- }
211
- });
225
+ },
226
+ floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api)
227
+ }
228
+ };
229
+ };
212
230
 
213
231
  /**
214
232
  * Creates panel action and wrap selection transaction with analytics for the panel insertion.
package/dist/es2019/ui/panelBlockMenuItem.js ADDED
@@ -0,0 +1,41 @@
1
+ import React, { useMemo } from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
+ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
+ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
+ import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
8
+ const PanelBlockMenuItem = ({
9
+ api
10
+ }) => {
11
+ const {
12
+ formatMessage
13
+ } = useIntl();
14
+ const selection = useSharedPluginStateSelector(api, 'selection.selection');
15
+ const isPanelSelected = useMemo(() => {
16
+ if (!selection) {
17
+ return false;
18
+ }
19
+ if (selection instanceof NodeSelection) {
20
+ // Note: we are checking for any type of panel, not just of type infopanel
21
+ return selection.node.type.name === 'panel';
22
+ }
23
+ return false;
24
+ }, [selection]);
25
+ const handleClick = () => {
26
+ var _api$blockMenu;
27
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('panel'));
28
+ };
29
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
30
+ onClick: handleClick,
31
+ isSelected: isPanelSelected,
32
+ elemBefore: /*#__PURE__*/React.createElement(InformationCircleIcon, {
33
+ label: ""
34
+ })
35
+ }, formatMessage(blockTypeMessages.panel));
36
+ };
37
+ export const createPanelBlockMenuItem = api => {
38
+ return () => /*#__PURE__*/React.createElement(PanelBlockMenuItem, {
39
+ api: api
40
+ });
41
+ };
package/dist/esm/panelPlugin.js CHANGED
@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import React from 'react';
5
5
  import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
6
6
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
+ import { FORMAT_PANEL_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
7
8
  import { insertSelectedItem } from '@atlaskit/editor-common/insert';
8
9
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
9
10
  import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
@@ -11,15 +12,30 @@ import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
11
12
  import { fg } from '@atlaskit/platform-feature-flags';
12
13
  import { T50 } from '@atlaskit/theme/colors';
13
14
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
14
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
15
17
  import { insertPanelWithAnalytics } from './editor-actions/actions';
16
18
  import keymap from './pm-plugins/keymaps';
17
19
  import { createPlugin } from './pm-plugins/main';
20
+ import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
18
21
  import { getToolbarConfig } from './ui/toolbar';
19
22
  var panelPlugin = function panelPlugin(_ref) {
20
23
  var _ref$config = _ref.config,
21
24
  options = _ref$config === void 0 ? {} : _ref$config,
22
25
  api = _ref.api;
26
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
27
+ var _api$blockMenu;
28
+ api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
29
+ type: 'block-menu-item',
30
+ key: FORMAT_PANEL_MENU_ITEM.key,
31
+ parent: {
32
+ type: 'block-menu-section',
33
+ key: 'nested-menu-format-section-primary',
34
+ rank: FORMAT_NESTED_MENU_RANK[FORMAT_PANEL_MENU_ITEM.key]
35
+ },
36
+ component: createPanelBlockMenuItem(api)
37
+ }]);
38
+ }
23
39
  return {
24
40
  name: 'panel',
25
41
  nodes: function nodes() {
package/dist/esm/ui/panelBlockMenuItem.js ADDED
@@ -0,0 +1,41 @@
1
+ import React, { useMemo } from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
+ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
+ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
+ import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
8
+ var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
9
+ var api = _ref.api;
10
+ var _useIntl = useIntl(),
11
+ formatMessage = _useIntl.formatMessage;
12
+ var selection = useSharedPluginStateSelector(api, 'selection.selection');
13
+ var isPanelSelected = useMemo(function () {
14
+ if (!selection) {
15
+ return false;
16
+ }
17
+ if (selection instanceof NodeSelection) {
18
+ // Note: we are checking for any type of panel, not just of type infopanel
19
+ return selection.node.type.name === 'panel';
20
+ }
21
+ return false;
22
+ }, [selection]);
23
+ var handleClick = function handleClick() {
24
+ var _api$blockMenu;
25
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('panel'));
26
+ };
27
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
28
+ onClick: handleClick,
29
+ isSelected: isPanelSelected,
30
+ elemBefore: /*#__PURE__*/React.createElement(InformationCircleIcon, {
31
+ label: ""
32
+ })
33
+ }, formatMessage(blockTypeMessages.panel));
34
+ };
35
+ export var createPanelBlockMenuItem = function createPanelBlockMenuItem(api) {
36
+ return function () {
37
+ return /*#__PURE__*/React.createElement(PanelBlockMenuItem, {
38
+ api: api
39
+ });
40
+ };
41
+ };
package/dist/types/panelPluginType.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import type { Command, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
4
+ import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
4
5
  import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
5
6
  import { type EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
7
+ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
6
8
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
7
9
  export declare const pluginKey: PluginKey<any>;
8
10
  export interface PanelPluginOptions extends LongPressSelectionPluginOptions, PanelPluginConfig {
@@ -27,7 +29,9 @@ export type EmojiInfo = {
27
29
  export type PanelPluginDependencies = [
28
30
  typeof decorationsPlugin,
29
31
  OptionalPlugin<typeof analyticsPlugin>,
30
- EmojiPlugin
32
+ EmojiPlugin,
33
+ OptionalPlugin<BlockMenuPlugin>,
34
+ OptionalPlugin<SelectionPlugin>
31
35
  ];
32
36
  export type PanelPlugin = NextEditorPlugin<'panel', {
33
37
  actions: {
package/dist/types/ui/panelBlockMenuItem.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { PanelPlugin } from '../panelPluginType';
4
+ export declare const createPanelBlockMenuItem: (api: ExtractInjectionAPI<PanelPlugin>) => () => React.JSX.Element;
package/dist/types-ts4.5/panelPluginType.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import type { Command, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
4
+ import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
4
5
  import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
5
6
  import { type EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
7
+ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
6
8
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
7
9
  export declare const pluginKey: PluginKey<any>;
8
10
  export interface PanelPluginOptions extends LongPressSelectionPluginOptions, PanelPluginConfig {
@@ -27,7 +29,9 @@ export type EmojiInfo = {
27
29
  export type PanelPluginDependencies = [
28
30
  typeof decorationsPlugin,
29
31
  OptionalPlugin<typeof analyticsPlugin>,
30
- EmojiPlugin
32
+ EmojiPlugin,
33
+ OptionalPlugin<BlockMenuPlugin>,
34
+ OptionalPlugin<SelectionPlugin>
31
35
  ];
32
36
  export type PanelPlugin = NextEditorPlugin<'panel', {
33
37
  actions: {
package/dist/types-ts4.5/ui/panelBlockMenuItem.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { PanelPlugin } from '../panelPluginType';
4
+ export declare const createPanelBlockMenuItem: (api: ExtractInjectionAPI<PanelPlugin>) => () => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-panel",
3
- "version": "5.4.3",
3
+ "version": "5.4.4",
4
4
  "description": "Panel plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,21 +30,24 @@
30
30
  "@atlaskit/adf-schema": "^50.2.3",
31
31
  "@atlaskit/editor-palette": "^2.1.0",
32
32
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
33
+ "@atlaskit/editor-plugin-block-menu": "^0.0.18",
33
34
  "@atlaskit/editor-plugin-decorations": "^3.1.0",
34
35
  "@atlaskit/editor-plugin-emoji": "^4.3.0",
36
+ "@atlaskit/editor-plugin-selection": "^3.2.0",
35
37
  "@atlaskit/editor-prosemirror": "7.0.0",
36
38
  "@atlaskit/editor-shared-styles": "^3.6.0",
39
+ "@atlaskit/editor-toolbar": "^0.6.0",
37
40
  "@atlaskit/emoji": "^69.5.0",
38
41
  "@atlaskit/icon": "^28.1.0",
39
42
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
43
  "@atlaskit/theme": "^20.0.0",
41
- "@atlaskit/tmp-editor-statsig": "^11.9.0",
44
+ "@atlaskit/tmp-editor-statsig": "^11.11.0",
42
45
  "@atlaskit/tokens": "^6.1.0",
43
46
  "@babel/runtime": "^7.0.0",
44
47
  "uuid": "^3.1.0"
45
48
  },
46
49
  "peerDependencies": {
47
- "@atlaskit/editor-common": "^107.33.0",
50
+ "@atlaskit/editor-common": "^107.34.0",
48
51
  "react": "^18.2.0",
49
52
  "react-dom": "^18.2.0",
50
53
  "react-intl-next": "npm:react-intl@^5.18.1"