@atlaskit/editor-plugin-insert-block 1.11.1 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/cjs/plugin.js +41 -3
- package/dist/cjs/pm-plugins/commands.js +16 -0
- package/dist/cjs/pm-plugins/elementBrowser.js +39 -0
- package/dist/cjs/ui/ElementRail/index.js +16 -0
- package/dist/cjs/ui/ToolbarInsertBlock/index.js +49 -13
- package/dist/es2019/plugin.js +39 -3
- package/dist/es2019/pm-plugins/commands.js +11 -0
- package/dist/es2019/pm-plugins/elementBrowser.js +31 -0
- package/dist/es2019/ui/ElementRail/index.js +10 -0
- package/dist/es2019/ui/ToolbarInsertBlock/index.js +42 -4
- package/dist/esm/plugin.js +41 -3
- package/dist/esm/pm-plugins/commands.js +11 -0
- package/dist/esm/pm-plugins/elementBrowser.js +33 -0
- package/dist/esm/ui/ElementRail/index.js +9 -0
- package/dist/esm/ui/ToolbarInsertBlock/index.js +49 -13
- package/dist/types/pm-plugins/commands.d.ts +6 -0
- package/dist/types/pm-plugins/elementBrowser.d.ts +16 -0
- package/dist/types/types.d.ts +3 -1
- package/dist/types/ui/ElementRail/index.d.ts +16 -0
- package/dist/types-ts4.5/pm-plugins/commands.d.ts +6 -0
- package/dist/types-ts4.5/pm-plugins/elementBrowser.d.ts +16 -0
- package/dist/types-ts4.5/types.d.ts +3 -1
- package/dist/types-ts4.5/ui/ElementRail/index.d.ts +16 -0
- package/package.json +10 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-insert-block
|
|
2
2
|
|
|
3
|
+
## 1.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#136891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136891)
|
|
8
|
+
[`388780c6348e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/388780c6348e9) -
|
|
9
|
+
Pass emoji provider via preset
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 1.12.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- [#137041](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137041)
|
|
20
|
+
[`060aff106c5ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/060aff106c5ac) -
|
|
21
|
+
Add new experiment for insert menu in right rail, allow right menu to be opened from main toolbar
|
|
22
|
+
'+' button
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- [#137041](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137041)
|
|
27
|
+
[`060aff106c5ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/060aff106c5ac) -
|
|
28
|
+
Add insert-right-rail experiment and reimplement right rail logic
|
|
29
|
+
|
|
3
30
|
## 1.11.1
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -15,8 +15,11 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
|
15
15
|
var _types = require("@atlaskit/editor-common/types");
|
|
16
16
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
17
17
|
var _consts = require("@atlaskit/editor-plugin-block-type/consts");
|
|
18
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
19
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
20
|
var _switch = _interopRequireDefault(require("./assets/switch"));
|
|
21
|
+
var _elementBrowser = require("./pm-plugins/elementBrowser");
|
|
22
|
+
var _ElementRail = require("./ui/ElementRail");
|
|
20
23
|
var _templateOptions = require("./ui/templateOptions");
|
|
21
24
|
var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
|
|
22
25
|
var _transformOptions = require("./ui/transformOptions");
|
|
@@ -110,7 +113,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
110
113
|
name: 'insertBlock',
|
|
111
114
|
component: primaryToolbarComponent
|
|
112
115
|
});
|
|
113
|
-
|
|
116
|
+
var plugin = {
|
|
114
117
|
name: 'insertBlock',
|
|
115
118
|
actions: {
|
|
116
119
|
toggleAdditionalMenu: function toggleAdditionalMenu() {
|
|
@@ -121,6 +124,17 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
121
124
|
toggle();
|
|
122
125
|
}
|
|
123
126
|
},
|
|
127
|
+
pmPlugins: function pmPlugins() {
|
|
128
|
+
if (!(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
|
|
129
|
+
[];
|
|
130
|
+
}
|
|
131
|
+
return [{
|
|
132
|
+
name: 'elementBrowserPmPlugin',
|
|
133
|
+
plugin: function plugin() {
|
|
134
|
+
return (0, _elementBrowser.elementBrowserPmPlugin)();
|
|
135
|
+
}
|
|
136
|
+
}];
|
|
137
|
+
},
|
|
124
138
|
pluginsOptions: {
|
|
125
139
|
// This is added for basic text transformations experiment.
|
|
126
140
|
// This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
|
|
@@ -201,6 +215,20 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
201
215
|
},
|
|
202
216
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
|
|
203
217
|
};
|
|
218
|
+
if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
|
|
219
|
+
plugin.pluginsOptions.contextPanel = function (state) {
|
|
220
|
+
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
221
|
+
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
222
|
+
var pluginState = _elementBrowser.elementBrowserPmKey.getState(state);
|
|
223
|
+
if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
|
|
224
|
+
return /*#__PURE__*/_react.default.createElement(_ElementRail.InsertMenuRail, {
|
|
225
|
+
api: api
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
return;
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
return plugin;
|
|
204
232
|
};
|
|
205
233
|
function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
206
234
|
var _ref4, _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
|
|
@@ -229,6 +257,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
|
229
257
|
mediaState = _useSharedPluginState.mediaState,
|
|
230
258
|
typeAheadState = _useSharedPluginState.typeAheadState,
|
|
231
259
|
placeholderTextState = _useSharedPluginState.placeholderTextState;
|
|
260
|
+
var getEmojiProvider = function getEmojiProvider() {
|
|
261
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_get_emoji_provider_from_config')) {
|
|
262
|
+
if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
|
|
263
|
+
return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
|
|
264
|
+
}
|
|
265
|
+
} else {
|
|
266
|
+
return providers.emojiProvider;
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
var emojiProvider = getEmojiProvider();
|
|
232
270
|
return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
|
|
233
271
|
pluginInjectionApi: pluginInjectionApi,
|
|
234
272
|
buttons: buttons,
|
|
@@ -255,8 +293,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
|
255
293
|
availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
|
|
256
294
|
linkSupported: !!hyperlinkState,
|
|
257
295
|
linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
|
|
258
|
-
emojiDisabled: !emojiState || !
|
|
259
|
-
emojiProvider:
|
|
296
|
+
emojiDisabled: !emojiState || !emojiProvider,
|
|
297
|
+
emojiProvider: emojiProvider,
|
|
260
298
|
nativeStatusSupported: options.nativeStatusSupported,
|
|
261
299
|
horizontalRuleEnabled: options.horizontalRuleEnabled,
|
|
262
300
|
onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.toggleInsertMenuRightRail = void 0;
|
|
7
|
+
var _elementBrowser = require("./elementBrowser");
|
|
8
|
+
/**
|
|
9
|
+
* For insert menu in right rail experiment
|
|
10
|
+
* - Clean up ticket ED-24801
|
|
11
|
+
*/
|
|
12
|
+
var toggleInsertMenuRightRail = exports.toggleInsertMenuRightRail = function toggleInsertMenuRightRail(tr) {
|
|
13
|
+
return tr.setMeta(_elementBrowser.elementBrowserPmKey, {
|
|
14
|
+
update: true
|
|
15
|
+
});
|
|
16
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.elementBrowserPmPlugin = exports.elementBrowserPmKey = void 0;
|
|
7
|
+
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
8
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
|
+
/**
|
|
10
|
+
* For insert menu in right rail experiment
|
|
11
|
+
* - Clean up ticket ED-24801
|
|
12
|
+
*/
|
|
13
|
+
var elementBrowserPmKey = exports.elementBrowserPmKey = new _state.PluginKey('elementBrowserPmPlugin');
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* For insert menu in right rail experiment
|
|
17
|
+
* - Clean up ticket ED-24801
|
|
18
|
+
*/
|
|
19
|
+
var elementBrowserPmPlugin = exports.elementBrowserPmPlugin = function elementBrowserPmPlugin() {
|
|
20
|
+
return new _safePlugin.SafePlugin({
|
|
21
|
+
key: elementBrowserPmKey,
|
|
22
|
+
state: {
|
|
23
|
+
init: function init() {
|
|
24
|
+
return {
|
|
25
|
+
menuBrowserOpen: false
|
|
26
|
+
};
|
|
27
|
+
},
|
|
28
|
+
apply: function apply(tr, pluginState) {
|
|
29
|
+
var meta = tr.getMeta(elementBrowserPmKey);
|
|
30
|
+
if (!meta) {
|
|
31
|
+
return pluginState;
|
|
32
|
+
}
|
|
33
|
+
return {
|
|
34
|
+
menuBrowserOpen: !pluginState.menuBrowserOpen
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.InsertMenuRail = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
/**
|
|
10
|
+
* For insert menu in right rail experiment
|
|
11
|
+
* - Clean up ticket ED-24801
|
|
12
|
+
*/
|
|
13
|
+
var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
|
|
14
|
+
var api = _ref.api;
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("div", null);
|
|
16
|
+
};
|
|
@@ -26,6 +26,8 @@ var _uiReact = require("@atlaskit/editor-common/ui-react");
|
|
|
26
26
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
27
27
|
var _picker = require("@atlaskit/emoji/picker");
|
|
28
28
|
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
29
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
30
|
+
var _commands = require("../../pm-plugins/commands");
|
|
29
31
|
var _blockInsertMenu = require("./block-insert-menu");
|
|
30
32
|
var _createItems3 = require("./create-items");
|
|
31
33
|
var _messages = require("./messages");
|
|
@@ -210,10 +212,44 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
210
212
|
(_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
|
|
211
213
|
});
|
|
212
214
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
|
|
215
|
+
/**
|
|
216
|
+
* For insert menu in right rail experiment
|
|
217
|
+
* - Clean up ticket ED-24801
|
|
218
|
+
*/
|
|
219
|
+
if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true, {
|
|
220
|
+
exposure: true
|
|
221
|
+
})) {
|
|
222
|
+
var _this$props$pluginInj;
|
|
223
|
+
(_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref3) {
|
|
224
|
+
var _this$props$pluginInj2;
|
|
225
|
+
var tr = _ref3.tr;
|
|
226
|
+
(0, _commands.toggleInsertMenuRightRail)(tr);
|
|
227
|
+
(_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.applyChange(tr);
|
|
228
|
+
return tr;
|
|
229
|
+
});
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
213
232
|
_this.togglePlusMenuVisibility();
|
|
214
233
|
});
|
|
215
234
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenByKeyboard", function (event) {
|
|
216
235
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
236
|
+
/**
|
|
237
|
+
* For insert menu in right rail experiment
|
|
238
|
+
* - Clean up ticket ED-24801
|
|
239
|
+
*/
|
|
240
|
+
if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true, {
|
|
241
|
+
exposure: true
|
|
242
|
+
})) {
|
|
243
|
+
var _this$props$pluginInj3;
|
|
244
|
+
(_this$props$pluginInj3 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 || _this$props$pluginInj3.core.actions.execute(function (_ref4) {
|
|
245
|
+
var _this$props$pluginInj4;
|
|
246
|
+
var tr = _ref4.tr;
|
|
247
|
+
(0, _commands.toggleInsertMenuRightRail)(tr);
|
|
248
|
+
(_this$props$pluginInj4 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 || (_this$props$pluginInj4 = _this$props$pluginInj4.contextPanel) === null || _this$props$pluginInj4 === void 0 || _this$props$pluginInj4.actions.applyChange(tr);
|
|
249
|
+
return tr;
|
|
250
|
+
});
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
217
253
|
_this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
|
|
218
254
|
isOpenedByKeyboard: true
|
|
219
255
|
}));
|
|
@@ -382,9 +418,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
382
418
|
var pluginInjectionApi = _this.props.pluginInjectionApi;
|
|
383
419
|
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
|
|
384
420
|
});
|
|
385
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (
|
|
386
|
-
var item =
|
|
387
|
-
inputMethod =
|
|
421
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref5) {
|
|
422
|
+
var item = _ref5.item,
|
|
423
|
+
inputMethod = _ref5.inputMethod;
|
|
388
424
|
var _this$props10 = _this.props,
|
|
389
425
|
editorView = _this$props10.editorView,
|
|
390
426
|
editorActions = _this$props10.editorActions,
|
|
@@ -474,8 +510,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
474
510
|
inputMethod: _analytics.INPUT_METHOD.TOOLBAR
|
|
475
511
|
});
|
|
476
512
|
});
|
|
477
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (
|
|
478
|
-
var item =
|
|
513
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (_ref6) {
|
|
514
|
+
var item = _ref6.item;
|
|
479
515
|
return _this.onItemActivated({
|
|
480
516
|
item: item,
|
|
481
517
|
inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
|
|
@@ -521,8 +557,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
521
557
|
popupsScrollableElement = _this$props11.popupsScrollableElement,
|
|
522
558
|
emojiProvider = _this$props11.emojiProvider,
|
|
523
559
|
replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
|
|
524
|
-
var dropdownEmoji = this.state.dropdownItems.some(function (
|
|
525
|
-
var name =
|
|
560
|
+
var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
|
|
561
|
+
var name = _ref7.value.name;
|
|
526
562
|
return name === 'emoji';
|
|
527
563
|
});
|
|
528
564
|
var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
|
|
@@ -611,7 +647,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
611
647
|
_tableSelectorButton6,
|
|
612
648
|
_this$props$isDisable,
|
|
613
649
|
_this$props$replacePl,
|
|
614
|
-
_this$props$
|
|
650
|
+
_this$props$pluginInj5;
|
|
615
651
|
var _this$state2 = this.state,
|
|
616
652
|
buttons = _this$state2.buttons,
|
|
617
653
|
dropdownItems = _this$state2.dropdownItems,
|
|
@@ -620,12 +656,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
620
656
|
var _this$props13 = this.props,
|
|
621
657
|
isDisabled = _this$props13.isDisabled,
|
|
622
658
|
isReducedSpacing = _this$props13.isReducedSpacing;
|
|
623
|
-
var isTableButtonVisible = buttons.some(function (
|
|
624
|
-
var value =
|
|
659
|
+
var isTableButtonVisible = buttons.some(function (_ref8) {
|
|
660
|
+
var value = _ref8.value;
|
|
625
661
|
return value.name === 'table';
|
|
626
662
|
});
|
|
627
|
-
var isTableSizeVisible = buttons.some(function (
|
|
628
|
-
var value =
|
|
663
|
+
var isTableSizeVisible = buttons.some(function (_ref9) {
|
|
664
|
+
var value = _ref9.value;
|
|
629
665
|
return value.name === 'table selector';
|
|
630
666
|
});
|
|
631
667
|
if (buttons.length === 0 && dropdownItems.length === 0) {
|
|
@@ -739,7 +775,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
739
775
|
replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
|
|
740
776
|
showElementBrowserLink: this.props.showElementBrowserLink || false,
|
|
741
777
|
pluginInjectionApi: this.props.pluginInjectionApi
|
|
742
|
-
})), !((_this$props$
|
|
778
|
+
})), !((_this$props$pluginInj5 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj5 !== void 0 && _this$props$pluginInj5.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
743
779
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
744
780
|
(0, _react2.jsx)("span", {
|
|
745
781
|
css: _styles.separatorStyles
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -7,8 +7,11 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
7
7
|
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
8
8
|
import { getWrappingOptions } from '@atlaskit/editor-common/utils';
|
|
9
9
|
import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
12
|
import SwitchIcon from './assets/switch';
|
|
13
|
+
import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
|
|
14
|
+
import { InsertMenuRail } from './ui/ElementRail';
|
|
12
15
|
import { templateOptions } from './ui/templateOptions';
|
|
13
16
|
import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
|
|
14
17
|
import { transformationOptions } from './ui/transformOptions';
|
|
@@ -99,7 +102,7 @@ export const insertBlockPlugin = ({
|
|
|
99
102
|
name: 'insertBlock',
|
|
100
103
|
component: primaryToolbarComponent
|
|
101
104
|
});
|
|
102
|
-
|
|
105
|
+
const plugin = {
|
|
103
106
|
name: 'insertBlock',
|
|
104
107
|
actions: {
|
|
105
108
|
toggleAdditionalMenu: () => {
|
|
@@ -110,6 +113,15 @@ export const insertBlockPlugin = ({
|
|
|
110
113
|
toggle();
|
|
111
114
|
}
|
|
112
115
|
},
|
|
116
|
+
pmPlugins: () => {
|
|
117
|
+
if (!editorExperiment('insert-menu-in-right-rail', true)) {
|
|
118
|
+
[];
|
|
119
|
+
}
|
|
120
|
+
return [{
|
|
121
|
+
name: 'elementBrowserPmPlugin',
|
|
122
|
+
plugin: () => elementBrowserPmPlugin()
|
|
123
|
+
}];
|
|
124
|
+
},
|
|
113
125
|
pluginsOptions: {
|
|
114
126
|
// This is added for basic text transformations experiment.
|
|
115
127
|
// This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
|
|
@@ -194,6 +206,20 @@ export const insertBlockPlugin = ({
|
|
|
194
206
|
},
|
|
195
207
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
|
|
196
208
|
};
|
|
209
|
+
if (editorExperiment('insert-menu-in-right-rail', true)) {
|
|
210
|
+
plugin.pluginsOptions.contextPanel = state => {
|
|
211
|
+
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
212
|
+
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
213
|
+
const pluginState = elementBrowserPmKey.getState(state);
|
|
214
|
+
if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
|
|
215
|
+
return /*#__PURE__*/React.createElement(InsertMenuRail, {
|
|
216
|
+
api: api
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
return;
|
|
220
|
+
};
|
|
221
|
+
}
|
|
222
|
+
return plugin;
|
|
197
223
|
};
|
|
198
224
|
function ToolbarInsertBlockWithInjectionApi({
|
|
199
225
|
editorView,
|
|
@@ -224,6 +250,16 @@ function ToolbarInsertBlockWithInjectionApi({
|
|
|
224
250
|
typeAheadState,
|
|
225
251
|
placeholderTextState
|
|
226
252
|
} = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
|
|
253
|
+
const getEmojiProvider = () => {
|
|
254
|
+
if (fg('platform_editor_get_emoji_provider_from_config')) {
|
|
255
|
+
if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
|
|
256
|
+
return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
|
|
257
|
+
}
|
|
258
|
+
} else {
|
|
259
|
+
return providers.emojiProvider;
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
const emojiProvider = getEmojiProvider();
|
|
227
263
|
return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
|
|
228
264
|
pluginInjectionApi: pluginInjectionApi,
|
|
229
265
|
buttons: buttons,
|
|
@@ -250,8 +286,8 @@ function ToolbarInsertBlockWithInjectionApi({
|
|
|
250
286
|
availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
|
|
251
287
|
linkSupported: !!hyperlinkState,
|
|
252
288
|
linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
|
|
253
|
-
emojiDisabled: !emojiState || !
|
|
254
|
-
emojiProvider:
|
|
289
|
+
emojiDisabled: !emojiState || !emojiProvider,
|
|
290
|
+
emojiProvider: emojiProvider,
|
|
255
291
|
nativeStatusSupported: options.nativeStatusSupported,
|
|
256
292
|
horizontalRuleEnabled: options.horizontalRuleEnabled,
|
|
257
293
|
onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { elementBrowserPmKey } from './elementBrowser';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* For insert menu in right rail experiment
|
|
5
|
+
* - Clean up ticket ED-24801
|
|
6
|
+
*/
|
|
7
|
+
export const toggleInsertMenuRightRail = tr => {
|
|
8
|
+
return tr.setMeta(elementBrowserPmKey, {
|
|
9
|
+
update: true
|
|
10
|
+
});
|
|
11
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
/**
|
|
4
|
+
* For insert menu in right rail experiment
|
|
5
|
+
* - Clean up ticket ED-24801
|
|
6
|
+
*/
|
|
7
|
+
export const elementBrowserPmKey = new PluginKey('elementBrowserPmPlugin');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* For insert menu in right rail experiment
|
|
11
|
+
* - Clean up ticket ED-24801
|
|
12
|
+
*/
|
|
13
|
+
export const elementBrowserPmPlugin = () => new SafePlugin({
|
|
14
|
+
key: elementBrowserPmKey,
|
|
15
|
+
state: {
|
|
16
|
+
init() {
|
|
17
|
+
return {
|
|
18
|
+
menuBrowserOpen: false
|
|
19
|
+
};
|
|
20
|
+
},
|
|
21
|
+
apply(tr, pluginState) {
|
|
22
|
+
const meta = tr.getMeta(elementBrowserPmKey);
|
|
23
|
+
if (!meta) {
|
|
24
|
+
return pluginState;
|
|
25
|
+
}
|
|
26
|
+
return {
|
|
27
|
+
menuBrowserOpen: !pluginState.menuBrowserOpen
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
@@ -16,6 +16,8 @@ import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlask
|
|
|
16
16
|
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
17
17
|
import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
18
18
|
import * as colors from '@atlaskit/theme/colors';
|
|
19
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
|
+
import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
|
|
19
21
|
import { BlockInsertMenu } from './block-insert-menu';
|
|
20
22
|
import { createItems } from './create-items';
|
|
21
23
|
import { messages } from './messages';
|
|
@@ -208,10 +210,46 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
208
210
|
(_this$unregisterToggl = this.unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 ? void 0 : _this$unregisterToggl.call(this);
|
|
209
211
|
});
|
|
210
212
|
_defineProperty(this, "handleClick", () => {
|
|
213
|
+
/**
|
|
214
|
+
* For insert menu in right rail experiment
|
|
215
|
+
* - Clean up ticket ED-24801
|
|
216
|
+
*/
|
|
217
|
+
if (editorExperiment('insert-menu-in-right-rail', true, {
|
|
218
|
+
exposure: true
|
|
219
|
+
})) {
|
|
220
|
+
var _this$props$pluginInj;
|
|
221
|
+
(_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.core.actions.execute(({
|
|
222
|
+
tr
|
|
223
|
+
}) => {
|
|
224
|
+
var _this$props$pluginInj2, _this$props$pluginInj3;
|
|
225
|
+
toggleInsertMenuRightRail(tr);
|
|
226
|
+
(_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.actions.applyChange(tr);
|
|
227
|
+
return tr;
|
|
228
|
+
});
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
211
231
|
this.togglePlusMenuVisibility();
|
|
212
232
|
});
|
|
213
233
|
_defineProperty(this, "handleOpenByKeyboard", event => {
|
|
214
234
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
235
|
+
/**
|
|
236
|
+
* For insert menu in right rail experiment
|
|
237
|
+
* - Clean up ticket ED-24801
|
|
238
|
+
*/
|
|
239
|
+
if (editorExperiment('insert-menu-in-right-rail', true, {
|
|
240
|
+
exposure: true
|
|
241
|
+
})) {
|
|
242
|
+
var _this$props$pluginInj4;
|
|
243
|
+
(_this$props$pluginInj4 = this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.core.actions.execute(({
|
|
244
|
+
tr
|
|
245
|
+
}) => {
|
|
246
|
+
var _this$props$pluginInj5, _this$props$pluginInj6;
|
|
247
|
+
toggleInsertMenuRightRail(tr);
|
|
248
|
+
(_this$props$pluginInj5 = this.props.pluginInjectionApi) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.contextPanel) === null || _this$props$pluginInj6 === void 0 ? void 0 : _this$props$pluginInj6.actions.applyChange(tr);
|
|
249
|
+
return tr;
|
|
250
|
+
});
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
215
253
|
this.setState({
|
|
216
254
|
...this.state,
|
|
217
255
|
isOpenedByKeyboard: true
|
|
@@ -590,8 +628,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
590
628
|
}
|
|
591
629
|
const onUnmount = () => {
|
|
592
630
|
requestAnimationFrame(() => {
|
|
593
|
-
var _this$props$
|
|
594
|
-
return (_this$props$
|
|
631
|
+
var _this$props$pluginInj7, _this$props$pluginInj8, _this$props$pluginInj9;
|
|
632
|
+
return (_this$props$pluginInj7 = this.props.pluginInjectionApi) === null || _this$props$pluginInj7 === void 0 ? void 0 : (_this$props$pluginInj8 = _this$props$pluginInj7.core) === null || _this$props$pluginInj8 === void 0 ? void 0 : (_this$props$pluginInj9 = _this$props$pluginInj8.actions) === null || _this$props$pluginInj9 === void 0 ? void 0 : _this$props$pluginInj9.focus();
|
|
595
633
|
});
|
|
596
634
|
};
|
|
597
635
|
return jsx(Popup, {
|
|
@@ -651,7 +689,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
651
689
|
});
|
|
652
690
|
}
|
|
653
691
|
render() {
|
|
654
|
-
var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl, _this$props$
|
|
692
|
+
var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl, _this$props$pluginInj10;
|
|
655
693
|
const {
|
|
656
694
|
buttons,
|
|
657
695
|
dropdownItems,
|
|
@@ -770,7 +808,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
770
808
|
replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
|
|
771
809
|
showElementBrowserLink: this.props.showElementBrowserLink || false,
|
|
772
810
|
pluginInjectionApi: this.props.pluginInjectionApi
|
|
773
|
-
})), !((_this$props$
|
|
811
|
+
})), !((_this$props$pluginInj10 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj10 !== void 0 && _this$props$pluginInj10.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
774
812
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
775
813
|
jsx("span", {
|
|
776
814
|
css: separatorStyles
|
package/dist/esm/plugin.js
CHANGED
|
@@ -7,8 +7,11 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
7
7
|
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
8
8
|
import { getWrappingOptions } from '@atlaskit/editor-common/utils';
|
|
9
9
|
import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
12
|
import SwitchIcon from './assets/switch';
|
|
13
|
+
import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
|
|
14
|
+
import { InsertMenuRail } from './ui/ElementRail';
|
|
12
15
|
import { templateOptions } from './ui/templateOptions';
|
|
13
16
|
import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
|
|
14
17
|
import { transformationOptions } from './ui/transformOptions';
|
|
@@ -100,7 +103,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
100
103
|
name: 'insertBlock',
|
|
101
104
|
component: primaryToolbarComponent
|
|
102
105
|
});
|
|
103
|
-
|
|
106
|
+
var plugin = {
|
|
104
107
|
name: 'insertBlock',
|
|
105
108
|
actions: {
|
|
106
109
|
toggleAdditionalMenu: function toggleAdditionalMenu() {
|
|
@@ -111,6 +114,17 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
111
114
|
toggle();
|
|
112
115
|
}
|
|
113
116
|
},
|
|
117
|
+
pmPlugins: function pmPlugins() {
|
|
118
|
+
if (!editorExperiment('insert-menu-in-right-rail', true)) {
|
|
119
|
+
[];
|
|
120
|
+
}
|
|
121
|
+
return [{
|
|
122
|
+
name: 'elementBrowserPmPlugin',
|
|
123
|
+
plugin: function plugin() {
|
|
124
|
+
return elementBrowserPmPlugin();
|
|
125
|
+
}
|
|
126
|
+
}];
|
|
127
|
+
},
|
|
114
128
|
pluginsOptions: {
|
|
115
129
|
// This is added for basic text transformations experiment.
|
|
116
130
|
// This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
|
|
@@ -191,6 +205,20 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
191
205
|
},
|
|
192
206
|
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
|
|
193
207
|
};
|
|
208
|
+
if (editorExperiment('insert-menu-in-right-rail', true)) {
|
|
209
|
+
plugin.pluginsOptions.contextPanel = function (state) {
|
|
210
|
+
// api.getSharedState() will have an outdated reference to editorState on first mount of this component
|
|
211
|
+
// so instead just rely on plugin key as we don't need to be reactive to changes here
|
|
212
|
+
var pluginState = elementBrowserPmKey.getState(state);
|
|
213
|
+
if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
|
|
214
|
+
return /*#__PURE__*/React.createElement(InsertMenuRail, {
|
|
215
|
+
api: api
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
return;
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
return plugin;
|
|
194
222
|
};
|
|
195
223
|
function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
196
224
|
var _ref4, _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
|
|
@@ -219,6 +247,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
|
219
247
|
mediaState = _useSharedPluginState.mediaState,
|
|
220
248
|
typeAheadState = _useSharedPluginState.typeAheadState,
|
|
221
249
|
placeholderTextState = _useSharedPluginState.placeholderTextState;
|
|
250
|
+
var getEmojiProvider = function getEmojiProvider() {
|
|
251
|
+
if (fg('platform_editor_get_emoji_provider_from_config')) {
|
|
252
|
+
if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
|
|
253
|
+
return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
|
|
254
|
+
}
|
|
255
|
+
} else {
|
|
256
|
+
return providers.emojiProvider;
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
var emojiProvider = getEmojiProvider();
|
|
222
260
|
return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
|
|
223
261
|
pluginInjectionApi: pluginInjectionApi,
|
|
224
262
|
buttons: buttons,
|
|
@@ -245,8 +283,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
|
|
|
245
283
|
availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
|
|
246
284
|
linkSupported: !!hyperlinkState,
|
|
247
285
|
linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
|
|
248
|
-
emojiDisabled: !emojiState || !
|
|
249
|
-
emojiProvider:
|
|
286
|
+
emojiDisabled: !emojiState || !emojiProvider,
|
|
287
|
+
emojiProvider: emojiProvider,
|
|
250
288
|
nativeStatusSupported: options.nativeStatusSupported,
|
|
251
289
|
horizontalRuleEnabled: options.horizontalRuleEnabled,
|
|
252
290
|
onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { elementBrowserPmKey } from './elementBrowser';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* For insert menu in right rail experiment
|
|
5
|
+
* - Clean up ticket ED-24801
|
|
6
|
+
*/
|
|
7
|
+
export var toggleInsertMenuRightRail = function toggleInsertMenuRightRail(tr) {
|
|
8
|
+
return tr.setMeta(elementBrowserPmKey, {
|
|
9
|
+
update: true
|
|
10
|
+
});
|
|
11
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
/**
|
|
4
|
+
* For insert menu in right rail experiment
|
|
5
|
+
* - Clean up ticket ED-24801
|
|
6
|
+
*/
|
|
7
|
+
export var elementBrowserPmKey = new PluginKey('elementBrowserPmPlugin');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* For insert menu in right rail experiment
|
|
11
|
+
* - Clean up ticket ED-24801
|
|
12
|
+
*/
|
|
13
|
+
export var elementBrowserPmPlugin = function elementBrowserPmPlugin() {
|
|
14
|
+
return new SafePlugin({
|
|
15
|
+
key: elementBrowserPmKey,
|
|
16
|
+
state: {
|
|
17
|
+
init: function init() {
|
|
18
|
+
return {
|
|
19
|
+
menuBrowserOpen: false
|
|
20
|
+
};
|
|
21
|
+
},
|
|
22
|
+
apply: function apply(tr, pluginState) {
|
|
23
|
+
var meta = tr.getMeta(elementBrowserPmKey);
|
|
24
|
+
if (!meta) {
|
|
25
|
+
return pluginState;
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
menuBrowserOpen: !pluginState.menuBrowserOpen
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
};
|
|
@@ -32,6 +32,8 @@ import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlask
|
|
|
32
32
|
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
33
33
|
import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
34
34
|
import * as colors from '@atlaskit/theme/colors';
|
|
35
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
36
|
+
import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
|
|
35
37
|
import { BlockInsertMenu } from './block-insert-menu';
|
|
36
38
|
import { createItems } from './create-items';
|
|
37
39
|
import { messages } from './messages';
|
|
@@ -201,10 +203,44 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
201
203
|
(_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
|
|
202
204
|
});
|
|
203
205
|
_defineProperty(_assertThisInitialized(_this), "handleClick", function () {
|
|
206
|
+
/**
|
|
207
|
+
* For insert menu in right rail experiment
|
|
208
|
+
* - Clean up ticket ED-24801
|
|
209
|
+
*/
|
|
210
|
+
if (editorExperiment('insert-menu-in-right-rail', true, {
|
|
211
|
+
exposure: true
|
|
212
|
+
})) {
|
|
213
|
+
var _this$props$pluginInj;
|
|
214
|
+
(_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref3) {
|
|
215
|
+
var _this$props$pluginInj2;
|
|
216
|
+
var tr = _ref3.tr;
|
|
217
|
+
toggleInsertMenuRightRail(tr);
|
|
218
|
+
(_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.applyChange(tr);
|
|
219
|
+
return tr;
|
|
220
|
+
});
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
204
223
|
_this.togglePlusMenuVisibility();
|
|
205
224
|
});
|
|
206
225
|
_defineProperty(_assertThisInitialized(_this), "handleOpenByKeyboard", function (event) {
|
|
207
226
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
227
|
+
/**
|
|
228
|
+
* For insert menu in right rail experiment
|
|
229
|
+
* - Clean up ticket ED-24801
|
|
230
|
+
*/
|
|
231
|
+
if (editorExperiment('insert-menu-in-right-rail', true, {
|
|
232
|
+
exposure: true
|
|
233
|
+
})) {
|
|
234
|
+
var _this$props$pluginInj3;
|
|
235
|
+
(_this$props$pluginInj3 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 || _this$props$pluginInj3.core.actions.execute(function (_ref4) {
|
|
236
|
+
var _this$props$pluginInj4;
|
|
237
|
+
var tr = _ref4.tr;
|
|
238
|
+
toggleInsertMenuRightRail(tr);
|
|
239
|
+
(_this$props$pluginInj4 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 || (_this$props$pluginInj4 = _this$props$pluginInj4.contextPanel) === null || _this$props$pluginInj4 === void 0 || _this$props$pluginInj4.actions.applyChange(tr);
|
|
240
|
+
return tr;
|
|
241
|
+
});
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
208
244
|
_this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
|
|
209
245
|
isOpenedByKeyboard: true
|
|
210
246
|
}));
|
|
@@ -373,9 +409,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
373
409
|
var pluginInjectionApi = _this.props.pluginInjectionApi;
|
|
374
410
|
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
|
|
375
411
|
});
|
|
376
|
-
_defineProperty(_assertThisInitialized(_this), "onItemActivated", function (
|
|
377
|
-
var item =
|
|
378
|
-
inputMethod =
|
|
412
|
+
_defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref5) {
|
|
413
|
+
var item = _ref5.item,
|
|
414
|
+
inputMethod = _ref5.inputMethod;
|
|
379
415
|
var _this$props10 = _this.props,
|
|
380
416
|
editorView = _this$props10.editorView,
|
|
381
417
|
editorActions = _this$props10.editorActions,
|
|
@@ -465,8 +501,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
465
501
|
inputMethod: INPUT_METHOD.TOOLBAR
|
|
466
502
|
});
|
|
467
503
|
});
|
|
468
|
-
_defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (
|
|
469
|
-
var item =
|
|
504
|
+
_defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref6) {
|
|
505
|
+
var item = _ref6.item;
|
|
470
506
|
return _this.onItemActivated({
|
|
471
507
|
item: item,
|
|
472
508
|
inputMethod: INPUT_METHOD.INSERT_MENU
|
|
@@ -512,8 +548,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
512
548
|
popupsScrollableElement = _this$props11.popupsScrollableElement,
|
|
513
549
|
emojiProvider = _this$props11.emojiProvider,
|
|
514
550
|
replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
|
|
515
|
-
var dropdownEmoji = this.state.dropdownItems.some(function (
|
|
516
|
-
var name =
|
|
551
|
+
var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
|
|
552
|
+
var name = _ref7.value.name;
|
|
517
553
|
return name === 'emoji';
|
|
518
554
|
});
|
|
519
555
|
var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
|
|
@@ -602,7 +638,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
602
638
|
_tableSelectorButton6,
|
|
603
639
|
_this$props$isDisable,
|
|
604
640
|
_this$props$replacePl,
|
|
605
|
-
_this$props$
|
|
641
|
+
_this$props$pluginInj5;
|
|
606
642
|
var _this$state2 = this.state,
|
|
607
643
|
buttons = _this$state2.buttons,
|
|
608
644
|
dropdownItems = _this$state2.dropdownItems,
|
|
@@ -611,12 +647,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
611
647
|
var _this$props13 = this.props,
|
|
612
648
|
isDisabled = _this$props13.isDisabled,
|
|
613
649
|
isReducedSpacing = _this$props13.isReducedSpacing;
|
|
614
|
-
var isTableButtonVisible = buttons.some(function (
|
|
615
|
-
var value =
|
|
650
|
+
var isTableButtonVisible = buttons.some(function (_ref8) {
|
|
651
|
+
var value = _ref8.value;
|
|
616
652
|
return value.name === 'table';
|
|
617
653
|
});
|
|
618
|
-
var isTableSizeVisible = buttons.some(function (
|
|
619
|
-
var value =
|
|
654
|
+
var isTableSizeVisible = buttons.some(function (_ref9) {
|
|
655
|
+
var value = _ref9.value;
|
|
620
656
|
return value.name === 'table selector';
|
|
621
657
|
});
|
|
622
658
|
if (buttons.length === 0 && dropdownItems.length === 0) {
|
|
@@ -730,7 +766,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
730
766
|
replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
|
|
731
767
|
showElementBrowserLink: this.props.showElementBrowserLink || false,
|
|
732
768
|
pluginInjectionApi: this.props.pluginInjectionApi
|
|
733
|
-
})), !((_this$props$
|
|
769
|
+
})), !((_this$props$pluginInj5 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj5 !== void 0 && _this$props$pluginInj5.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
734
770
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
735
771
|
jsx("span", {
|
|
736
772
|
css: separatorStyles
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
type ElementBrowserPmPluginState = {
|
|
4
|
+
menuBrowserOpen: boolean;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* For insert menu in right rail experiment
|
|
8
|
+
* - Clean up ticket ED-24801
|
|
9
|
+
*/
|
|
10
|
+
export declare const elementBrowserPmKey: PluginKey<ElementBrowserPmPluginState>;
|
|
11
|
+
/**
|
|
12
|
+
* For insert menu in right rail experiment
|
|
13
|
+
* - Clean up ticket ED-24801
|
|
14
|
+
*/
|
|
15
|
+
export declare const elementBrowserPmPlugin: () => SafePlugin<ElementBrowserPmPluginState>;
|
|
16
|
+
export {};
|
package/dist/types/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
|
2
2
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
3
|
import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
|
|
4
4
|
import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
|
|
5
|
+
import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
5
6
|
import type { DatePlugin } from '@atlaskit/editor-plugin-date';
|
|
6
7
|
import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
|
|
7
8
|
import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
|
|
@@ -43,5 +44,6 @@ export type InsertBlockPluginDependencies = [
|
|
|
43
44
|
OptionalPlugin<ExtensionPlugin>,
|
|
44
45
|
OptionalPlugin<TasksAndDecisionsPlugin>,
|
|
45
46
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
46
|
-
OptionalPlugin<FeatureFlagsPlugin
|
|
47
|
+
OptionalPlugin<FeatureFlagsPlugin>,
|
|
48
|
+
OptionalPlugin<ContextPanelPlugin>
|
|
47
49
|
];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type InsertBlockPlugin } from '../../plugin';
|
|
4
|
+
/**
|
|
5
|
+
* For insert menu in right rail experiment
|
|
6
|
+
* - Clean up ticket ED-24801
|
|
7
|
+
*/
|
|
8
|
+
export declare const InsertMenuRail: ({ api }: {
|
|
9
|
+
api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"insertBlock", {
|
|
10
|
+
pluginConfiguration: import("../../plugin").InsertBlockOptions | undefined;
|
|
11
|
+
dependencies: import("../..").InsertBlockPluginDependencies;
|
|
12
|
+
actions: {
|
|
13
|
+
toggleAdditionalMenu: () => void;
|
|
14
|
+
};
|
|
15
|
+
}> | undefined;
|
|
16
|
+
}) => JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
type ElementBrowserPmPluginState = {
|
|
4
|
+
menuBrowserOpen: boolean;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* For insert menu in right rail experiment
|
|
8
|
+
* - Clean up ticket ED-24801
|
|
9
|
+
*/
|
|
10
|
+
export declare const elementBrowserPmKey: PluginKey<ElementBrowserPmPluginState>;
|
|
11
|
+
/**
|
|
12
|
+
* For insert menu in right rail experiment
|
|
13
|
+
* - Clean up ticket ED-24801
|
|
14
|
+
*/
|
|
15
|
+
export declare const elementBrowserPmPlugin: () => SafePlugin<ElementBrowserPmPluginState>;
|
|
16
|
+
export {};
|
|
@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
|
2
2
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
3
|
import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
|
|
4
4
|
import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
|
|
5
|
+
import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
5
6
|
import type { DatePlugin } from '@atlaskit/editor-plugin-date';
|
|
6
7
|
import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
|
|
7
8
|
import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
|
|
@@ -43,5 +44,6 @@ export type InsertBlockPluginDependencies = [
|
|
|
43
44
|
OptionalPlugin<ExtensionPlugin>,
|
|
44
45
|
OptionalPlugin<TasksAndDecisionsPlugin>,
|
|
45
46
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
46
|
-
OptionalPlugin<FeatureFlagsPlugin
|
|
47
|
+
OptionalPlugin<FeatureFlagsPlugin>,
|
|
48
|
+
OptionalPlugin<ContextPanelPlugin>
|
|
47
49
|
];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type InsertBlockPlugin } from '../../plugin';
|
|
4
|
+
/**
|
|
5
|
+
* For insert menu in right rail experiment
|
|
6
|
+
* - Clean up ticket ED-24801
|
|
7
|
+
*/
|
|
8
|
+
export declare const InsertMenuRail: ({ api }: {
|
|
9
|
+
api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"insertBlock", {
|
|
10
|
+
pluginConfiguration: import("../../plugin").InsertBlockOptions | undefined;
|
|
11
|
+
dependencies: import("../..").InsertBlockPluginDependencies;
|
|
12
|
+
actions: {
|
|
13
|
+
toggleAdditionalMenu: () => void;
|
|
14
|
+
};
|
|
15
|
+
}> | undefined;
|
|
16
|
+
}) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-insert-block",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "Insert block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
".": "./src/index.ts"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/editor-common": "^88.
|
|
34
|
+
"@atlaskit/editor-common": "^88.11.0",
|
|
35
35
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
36
36
|
"@atlaskit/editor-plugin-block-type": "^3.14.0",
|
|
37
37
|
"@atlaskit/editor-plugin-code-block": "^3.3.0",
|
|
38
38
|
"@atlaskit/editor-plugin-date": "^2.3.0",
|
|
39
|
-
"@atlaskit/editor-plugin-emoji": "^2.
|
|
39
|
+
"@atlaskit/editor-plugin-emoji": "^2.5.0",
|
|
40
40
|
"@atlaskit/editor-plugin-expand": "^2.6.0",
|
|
41
41
|
"@atlaskit/editor-plugin-extension": "^1.14.0",
|
|
42
42
|
"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
|
|
@@ -57,7 +57,8 @@
|
|
|
57
57
|
"@atlaskit/editor-prosemirror": "5.0.1",
|
|
58
58
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
59
59
|
"@atlaskit/emoji": "^67.7.0",
|
|
60
|
-
"@atlaskit/icon": "^22.
|
|
60
|
+
"@atlaskit/icon": "^22.16.0",
|
|
61
|
+
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
61
62
|
"@atlaskit/primitives": "^12.1.0",
|
|
62
63
|
"@atlaskit/theme": "^13.0.0",
|
|
63
64
|
"@atlaskit/tmp-editor-statsig": "^2.1.0",
|
|
@@ -114,5 +115,10 @@
|
|
|
114
115
|
"import-no-extraneous-disable-for-examples-and-docs"
|
|
115
116
|
]
|
|
116
117
|
}
|
|
118
|
+
},
|
|
119
|
+
"platform-feature-flags": {
|
|
120
|
+
"platform_editor_get_emoji_provider_from_config": {
|
|
121
|
+
"type": "boolean"
|
|
122
|
+
}
|
|
117
123
|
}
|
|
118
124
|
}
|