@atlaskit/editor-plugin-insert-block 7.0.0 → 7.0.2
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 +14 -0
- package/dist/cjs/insertBlockPlugin.js +3 -2
- package/dist/cjs/ui/toolbar-components/CodeBlockButton.js +43 -0
- package/dist/cjs/ui/toolbar-components/config-resolver.js +90 -0
- package/dist/cjs/ui/toolbar-components.js +292 -1
- package/dist/es2019/insertBlockPlugin.js +4 -3
- package/dist/es2019/ui/toolbar-components/CodeBlockButton.js +39 -0
- package/dist/es2019/ui/toolbar-components/config-resolver.js +84 -0
- package/dist/es2019/ui/toolbar-components.js +274 -1
- package/dist/esm/insertBlockPlugin.js +4 -3
- package/dist/esm/ui/toolbar-components/CodeBlockButton.js +36 -0
- package/dist/esm/ui/toolbar-components/config-resolver.js +84 -0
- package/dist/esm/ui/toolbar-components.js +292 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/types/index.d.ts +23 -0
- package/dist/types/ui/toolbar-components/CodeBlockButton.d.ts +8 -0
- package/dist/types/ui/toolbar-components/config-resolver.d.ts +6 -0
- package/dist/types/ui/toolbar-components.d.ts +16 -0
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/types/index.d.ts +23 -0
- package/dist/types-ts4.5/ui/toolbar-components/CodeBlockButton.d.ts +8 -0
- package/dist/types-ts4.5/ui/toolbar-components/config-resolver.d.ts +6 -0
- package/dist/types-ts4.5/ui/toolbar-components.d.ts +16 -0
- package/package.json +10 -10
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
|
|
3
|
+
import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK, CODE_BLOCK_GROUP, CODE_BLOCK_BUTTON, CODE_BLOCK_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
|
|
4
4
|
import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
|
|
5
5
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
|
+
import { CodeBlockButton } from './toolbar-components/CodeBlockButton';
|
|
7
|
+
import { resolveToolbarConfig } from './toolbar-components/config-resolver';
|
|
6
8
|
import { EmojiButton } from './toolbar-components/EmojiButton';
|
|
7
9
|
import { ImageButton } from './toolbar-components/ImageButton';
|
|
8
10
|
import { InsertButton } from './toolbar-components/InsertButton';
|
|
@@ -258,4 +260,293 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
|
|
|
258
260
|
});
|
|
259
261
|
}
|
|
260
262
|
}]);
|
|
263
|
+
};
|
|
264
|
+
|
|
265
|
+
/**
|
|
266
|
+
* Updated toolbar components function that uses the new configuration resolver.
|
|
267
|
+
* This function replaces the hardcoded approach with a config-driven one.
|
|
268
|
+
*/
|
|
269
|
+
export var getToolbarComponentsUpdated = function getToolbarComponentsUpdated(_ref8) {
|
|
270
|
+
var _config$taskList, _config$media, _config$codeBlock, _config$mention, _config$emoji, _config$layout, _config$table, _config$insert;
|
|
271
|
+
var api = _ref8.api,
|
|
272
|
+
options = _ref8.options,
|
|
273
|
+
onInsertBlockType = _ref8.onInsertBlockType;
|
|
274
|
+
var config = resolveToolbarConfig(options);
|
|
275
|
+
var components = [];
|
|
276
|
+
|
|
277
|
+
// Helper function to create responsive wrapper component
|
|
278
|
+
var createResponsiveComponent = function createResponsiveComponent() {
|
|
279
|
+
return expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref9) {
|
|
280
|
+
var children = _ref9.children;
|
|
281
|
+
return /*#__PURE__*/React.createElement(Show, {
|
|
282
|
+
above: "lg"
|
|
283
|
+
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
|
|
284
|
+
} : undefined;
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
// TaskList Group
|
|
288
|
+
if ((_config$taskList = config.taskList) !== null && _config$taskList !== void 0 && _config$taskList.enabled) {
|
|
289
|
+
components.push({
|
|
290
|
+
type: TASK_LIST_GROUP.type,
|
|
291
|
+
key: TASK_LIST_GROUP.key,
|
|
292
|
+
parents: [{
|
|
293
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
294
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
295
|
+
rank: INSERT_BLOCK_SECTION_RANK[TASK_LIST_GROUP.key]
|
|
296
|
+
}],
|
|
297
|
+
component: createResponsiveComponent()
|
|
298
|
+
});
|
|
299
|
+
components.push({
|
|
300
|
+
type: TASK_LIST_BUTTON.type,
|
|
301
|
+
key: TASK_LIST_BUTTON.key,
|
|
302
|
+
parents: [{
|
|
303
|
+
type: TASK_LIST_GROUP.type,
|
|
304
|
+
key: TASK_LIST_GROUP.key,
|
|
305
|
+
rank: TASK_LIST_GROUP_RANK[TASK_LIST_BUTTON.key]
|
|
306
|
+
}],
|
|
307
|
+
component: function component() {
|
|
308
|
+
return /*#__PURE__*/React.createElement(TaskListButton, {
|
|
309
|
+
api: api
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
// Media Group
|
|
316
|
+
if ((_config$media = config.media) !== null && _config$media !== void 0 && _config$media.enabled) {
|
|
317
|
+
components.push({
|
|
318
|
+
type: MEDIA_GROUP.type,
|
|
319
|
+
key: MEDIA_GROUP.key,
|
|
320
|
+
parents: [{
|
|
321
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
322
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
323
|
+
rank: INSERT_BLOCK_SECTION_RANK[MEDIA_GROUP.key]
|
|
324
|
+
}],
|
|
325
|
+
component: createResponsiveComponent()
|
|
326
|
+
});
|
|
327
|
+
components.push({
|
|
328
|
+
type: MEDIA_BUTTON.type,
|
|
329
|
+
key: MEDIA_BUTTON.key,
|
|
330
|
+
parents: [{
|
|
331
|
+
type: MEDIA_GROUP.type,
|
|
332
|
+
key: MEDIA_GROUP.key,
|
|
333
|
+
rank: MEDIA_GROUP_RANK[MEDIA_BUTTON.key]
|
|
334
|
+
}],
|
|
335
|
+
component: function component() {
|
|
336
|
+
return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
|
|
337
|
+
api: api
|
|
338
|
+
}) : /*#__PURE__*/React.createElement(MediaButton, {
|
|
339
|
+
api: api
|
|
340
|
+
});
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
// CodeBlock Group
|
|
346
|
+
if ((_config$codeBlock = config.codeBlock) !== null && _config$codeBlock !== void 0 && _config$codeBlock.enabled) {
|
|
347
|
+
components.push({
|
|
348
|
+
type: CODE_BLOCK_GROUP.type,
|
|
349
|
+
key: CODE_BLOCK_GROUP.key,
|
|
350
|
+
parents: [{
|
|
351
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
352
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
353
|
+
rank: INSERT_BLOCK_SECTION_RANK[CODE_BLOCK_GROUP.key]
|
|
354
|
+
}],
|
|
355
|
+
component: createResponsiveComponent()
|
|
356
|
+
});
|
|
357
|
+
components.push({
|
|
358
|
+
type: CODE_BLOCK_BUTTON.type,
|
|
359
|
+
key: CODE_BLOCK_BUTTON.key,
|
|
360
|
+
parents: [{
|
|
361
|
+
type: CODE_BLOCK_GROUP.type,
|
|
362
|
+
key: CODE_BLOCK_GROUP.key,
|
|
363
|
+
rank: CODE_BLOCK_GROUP_RANK[CODE_BLOCK_BUTTON.key]
|
|
364
|
+
}],
|
|
365
|
+
component: function component() {
|
|
366
|
+
return /*#__PURE__*/React.createElement(CodeBlockButton, {
|
|
367
|
+
api: api
|
|
368
|
+
});
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
// Mention Group
|
|
374
|
+
if ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enabled) {
|
|
375
|
+
components.push({
|
|
376
|
+
type: MENTION_GROUP.type,
|
|
377
|
+
key: MENTION_GROUP.key,
|
|
378
|
+
parents: [{
|
|
379
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
380
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
381
|
+
rank: INSERT_BLOCK_SECTION_RANK[MENTION_GROUP.key]
|
|
382
|
+
}],
|
|
383
|
+
component: createResponsiveComponent()
|
|
384
|
+
});
|
|
385
|
+
components.push({
|
|
386
|
+
type: MENTION_BUTTON.type,
|
|
387
|
+
key: MENTION_BUTTON.key,
|
|
388
|
+
parents: [{
|
|
389
|
+
type: MENTION_GROUP.type,
|
|
390
|
+
key: MENTION_GROUP.key,
|
|
391
|
+
rank: MENTION_GROUP_RANK[MENTION_BUTTON.key]
|
|
392
|
+
}],
|
|
393
|
+
component: function component() {
|
|
394
|
+
return /*#__PURE__*/React.createElement(MentionButton, {
|
|
395
|
+
api: api
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// Emoji Group
|
|
402
|
+
if ((_config$emoji = config.emoji) !== null && _config$emoji !== void 0 && _config$emoji.enabled) {
|
|
403
|
+
components.push({
|
|
404
|
+
type: EMOJI_GROUP.type,
|
|
405
|
+
key: EMOJI_GROUP.key,
|
|
406
|
+
parents: [{
|
|
407
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
408
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
409
|
+
rank: INSERT_BLOCK_SECTION_RANK[EMOJI_GROUP.key]
|
|
410
|
+
}],
|
|
411
|
+
component: createResponsiveComponent()
|
|
412
|
+
});
|
|
413
|
+
components.push({
|
|
414
|
+
type: EMOJI_BUTTON.type,
|
|
415
|
+
key: EMOJI_BUTTON.key,
|
|
416
|
+
parents: [{
|
|
417
|
+
type: EMOJI_GROUP.type,
|
|
418
|
+
key: EMOJI_GROUP.key,
|
|
419
|
+
rank: EMOJI_GROUP_RANK[EMOJI_BUTTON.key]
|
|
420
|
+
}],
|
|
421
|
+
component: function component() {
|
|
422
|
+
return /*#__PURE__*/React.createElement(EmojiButton, {
|
|
423
|
+
api: api
|
|
424
|
+
});
|
|
425
|
+
}
|
|
426
|
+
});
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
// Layout Group
|
|
430
|
+
if ((_config$layout = config.layout) !== null && _config$layout !== void 0 && _config$layout.enabled) {
|
|
431
|
+
components.push({
|
|
432
|
+
type: LAYOUT_GROUP.type,
|
|
433
|
+
key: LAYOUT_GROUP.key,
|
|
434
|
+
parents: [{
|
|
435
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
436
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
437
|
+
rank: INSERT_BLOCK_SECTION_RANK[LAYOUT_GROUP.key]
|
|
438
|
+
}],
|
|
439
|
+
component: createResponsiveComponent()
|
|
440
|
+
});
|
|
441
|
+
components.push({
|
|
442
|
+
type: LAYOUT_BUTTON.type,
|
|
443
|
+
key: LAYOUT_BUTTON.key,
|
|
444
|
+
parents: [{
|
|
445
|
+
type: LAYOUT_GROUP.type,
|
|
446
|
+
key: LAYOUT_GROUP.key,
|
|
447
|
+
rank: LAYOUT_GROUP_RANK[LAYOUT_BUTTON.key]
|
|
448
|
+
}],
|
|
449
|
+
component: function component() {
|
|
450
|
+
return /*#__PURE__*/React.createElement(LayoutButton, {
|
|
451
|
+
api: api
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
// Table Group
|
|
458
|
+
if ((_config$table = config.table) !== null && _config$table !== void 0 && _config$table.enabled) {
|
|
459
|
+
components.push({
|
|
460
|
+
type: TABLE_GROUP.type,
|
|
461
|
+
key: TABLE_GROUP.key,
|
|
462
|
+
parents: [{
|
|
463
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
464
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
465
|
+
rank: INSERT_BLOCK_SECTION_RANK[TABLE_GROUP.key]
|
|
466
|
+
}],
|
|
467
|
+
component: createResponsiveComponent()
|
|
468
|
+
});
|
|
469
|
+
components.push({
|
|
470
|
+
type: TABLE_BUTTON.type,
|
|
471
|
+
key: TABLE_BUTTON.key,
|
|
472
|
+
parents: [{
|
|
473
|
+
type: TABLE_GROUP.type,
|
|
474
|
+
key: TABLE_GROUP.key,
|
|
475
|
+
rank: TABLE_GROUP_RANK[TABLE_BUTTON.key]
|
|
476
|
+
}],
|
|
477
|
+
component: function component() {
|
|
478
|
+
return /*#__PURE__*/React.createElement(TableButton, {
|
|
479
|
+
api: api
|
|
480
|
+
});
|
|
481
|
+
}
|
|
482
|
+
});
|
|
483
|
+
if (options.tableSelectorSupported) {
|
|
484
|
+
components.push({
|
|
485
|
+
type: TABLE_SIZE_PICKER.type,
|
|
486
|
+
key: TABLE_SIZE_PICKER.key,
|
|
487
|
+
parents: [{
|
|
488
|
+
type: TABLE_GROUP.type,
|
|
489
|
+
key: TABLE_GROUP.key,
|
|
490
|
+
rank: TABLE_GROUP_RANK[TABLE_SIZE_PICKER.key]
|
|
491
|
+
}],
|
|
492
|
+
component: function component() {
|
|
493
|
+
return /*#__PURE__*/React.createElement(TableSizePicker, {
|
|
494
|
+
api: api,
|
|
495
|
+
tableSelectorSupported: options.tableSelectorSupported
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
// Insert Group
|
|
503
|
+
if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
|
|
504
|
+
components.push({
|
|
505
|
+
type: INSERT_GROUP.type,
|
|
506
|
+
key: INSERT_GROUP.key,
|
|
507
|
+
parents: [{
|
|
508
|
+
type: INSERT_BLOCK_SECTION.type,
|
|
509
|
+
key: INSERT_BLOCK_SECTION.key,
|
|
510
|
+
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
|
|
511
|
+
}]
|
|
512
|
+
});
|
|
513
|
+
components.push({
|
|
514
|
+
type: INSERT_BUTTON.type,
|
|
515
|
+
key: INSERT_BUTTON.key,
|
|
516
|
+
parents: [{
|
|
517
|
+
type: INSERT_GROUP.type,
|
|
518
|
+
key: INSERT_GROUP.key,
|
|
519
|
+
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
|
|
520
|
+
}],
|
|
521
|
+
component: function component() {
|
|
522
|
+
return /*#__PURE__*/React.createElement(InsertButton, {
|
|
523
|
+
api: api,
|
|
524
|
+
showElementBrowserLink: options.showElementBrowserLink,
|
|
525
|
+
tableSelectorSupported: options.tableSelectorSupported,
|
|
526
|
+
onInsertBlockType: onInsertBlockType,
|
|
527
|
+
nativeStatusSupported: options.nativeStatusSupported,
|
|
528
|
+
horizontalRuleEnabled: options.horizontalRuleEnabled,
|
|
529
|
+
expandEnabled: options.allowExpand,
|
|
530
|
+
insertMenuItems: options.insertMenuItems,
|
|
531
|
+
numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
|
|
532
|
+
});
|
|
533
|
+
}
|
|
534
|
+
});
|
|
535
|
+
}
|
|
536
|
+
return components;
|
|
537
|
+
};
|
|
538
|
+
|
|
539
|
+
/**
|
|
540
|
+
* Main export that switches between old and new implementations based on experiment.
|
|
541
|
+
* This allows for gradual rollout of the new config-driven approach.
|
|
542
|
+
*/
|
|
543
|
+
export var getToolbarComponentsWithConfig = function getToolbarComponentsWithConfig(props) {
|
|
544
|
+
if (expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) && 'options' in props) {
|
|
545
|
+
// Use new config-driven approach
|
|
546
|
+
return getToolbarComponentsUpdated(props);
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
// Use legacy approach
|
|
550
|
+
var legacyProps = props;
|
|
551
|
+
return getToolbarComponents(legacyProps);
|
|
261
552
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { insertBlockPlugin } from './insertBlockPlugin';
|
|
2
2
|
export type { InsertBlockPlugin } from './insertBlockPluginType';
|
|
3
|
-
export type { InsertBlockOptions, InsertBlockPluginOptions, InsertBlockPluginDependencies, InsertBlockPluginState, } from './types';
|
|
3
|
+
export type { InsertBlockOptions, InsertBlockPluginOptions, InsertBlockPluginDependencies, InsertBlockPluginState, ToolbarInsertBlockButtonsConfig, } from './types';
|
|
@@ -55,6 +55,19 @@ export type InsertBlockPluginDependencies = [
|
|
|
55
55
|
OptionalPlugin<ConnectivityPlugin>,
|
|
56
56
|
OptionalPlugin<ToolbarPlugin>
|
|
57
57
|
];
|
|
58
|
+
export interface ToolbarGroupConfig {
|
|
59
|
+
enabled?: boolean;
|
|
60
|
+
}
|
|
61
|
+
export interface ToolbarInsertBlockButtonsConfig {
|
|
62
|
+
codeBlock?: ToolbarGroupConfig;
|
|
63
|
+
emoji?: ToolbarGroupConfig;
|
|
64
|
+
insert?: ToolbarGroupConfig;
|
|
65
|
+
layout?: ToolbarGroupConfig;
|
|
66
|
+
media?: ToolbarGroupConfig;
|
|
67
|
+
mention?: ToolbarGroupConfig;
|
|
68
|
+
table?: ToolbarGroupConfig;
|
|
69
|
+
taskList?: ToolbarGroupConfig;
|
|
70
|
+
}
|
|
58
71
|
export interface InsertBlockPluginOptions {
|
|
59
72
|
allowExpand?: boolean;
|
|
60
73
|
allowTables?: boolean;
|
|
@@ -69,12 +82,22 @@ export interface InsertBlockPluginOptions {
|
|
|
69
82
|
*/
|
|
70
83
|
showElementBrowserLink?: boolean;
|
|
71
84
|
tableSelectorSupported?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Configure which toolbar buttons should be visible
|
|
87
|
+
* @default undefined - shows all available buttons (current behaviour)
|
|
88
|
+
*
|
|
89
|
+
* Only applies when platform_editor_toolbar_aifc is enabled
|
|
90
|
+
*/
|
|
91
|
+
toolbarButtons?: ToolbarInsertBlockButtonsConfig;
|
|
72
92
|
/**
|
|
73
93
|
* To hide the individual insert block buttons in the toolbar
|
|
74
94
|
* and only show the plus button
|
|
75
95
|
* @default undefined Shows the insert block buttons and the plus button
|
|
76
96
|
*
|
|
77
97
|
* Only applies when platform_editor_toolbar_aifc is enabled
|
|
98
|
+
*
|
|
99
|
+
* @warning Use {@link toolbarButtons} instead to configure the insert block toolbar buttons
|
|
100
|
+
* @see https://product-fabric.atlassian.net/browse/ED-29426
|
|
78
101
|
*/
|
|
79
102
|
toolbarShowPlusInsertOnly?: boolean;
|
|
80
103
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { InsertBlockPlugin } from '../../insertBlockPluginType';
|
|
4
|
+
type CodeBlockButtonProps = {
|
|
5
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
6
|
+
};
|
|
7
|
+
export declare const CodeBlockButton: ({ api }: CodeBlockButtonProps) => React.JSX.Element | null;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { InsertBlockPluginOptions, ToolbarInsertBlockButtonsConfig } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Resolves toolbar configuration from plugin options, handling backward compatibility
|
|
4
|
+
* and providing sensible defaults.
|
|
5
|
+
*/
|
|
6
|
+
export declare const resolveToolbarConfig: (options: InsertBlockPluginOptions) => ToolbarInsertBlockButtonsConfig;
|
|
@@ -2,6 +2,7 @@ import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types
|
|
|
2
2
|
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
3
3
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
4
4
|
import type { InsertBlockPlugin } from '../insertBlockPluginType';
|
|
5
|
+
import type { InsertBlockPluginOptions } from '../types';
|
|
5
6
|
type GetToolbarComponentsProps = {
|
|
6
7
|
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
7
8
|
expandEnabled?: boolean;
|
|
@@ -13,5 +14,20 @@ type GetToolbarComponentsProps = {
|
|
|
13
14
|
tableSelectorSupported?: boolean;
|
|
14
15
|
toolbarShowPlusInsertOnly?: boolean;
|
|
15
16
|
};
|
|
17
|
+
type GetToolbarComponentsUpdatedProps = {
|
|
18
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
19
|
+
onInsertBlockType?: (name: string) => Command;
|
|
20
|
+
options: InsertBlockPluginOptions;
|
|
21
|
+
};
|
|
16
22
|
export declare const getToolbarComponents: ({ api, tableSelectorSupported, toolbarShowPlusInsertOnly, showElementBrowserLink, onInsertBlockType, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, }: GetToolbarComponentsProps) => RegisterComponent[];
|
|
23
|
+
/**
|
|
24
|
+
* Updated toolbar components function that uses the new configuration resolver.
|
|
25
|
+
* This function replaces the hardcoded approach with a config-driven one.
|
|
26
|
+
*/
|
|
27
|
+
export declare const getToolbarComponentsUpdated: ({ api, options, onInsertBlockType, }: GetToolbarComponentsUpdatedProps) => RegisterComponent[];
|
|
28
|
+
/**
|
|
29
|
+
* Main export that switches between old and new implementations based on experiment.
|
|
30
|
+
* This allows for gradual rollout of the new config-driven approach.
|
|
31
|
+
*/
|
|
32
|
+
export declare const getToolbarComponentsWithConfig: (props: GetToolbarComponentsProps | GetToolbarComponentsUpdatedProps) => RegisterComponent[];
|
|
17
33
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { insertBlockPlugin } from './insertBlockPlugin';
|
|
2
2
|
export type { InsertBlockPlugin } from './insertBlockPluginType';
|
|
3
|
-
export type { InsertBlockOptions, InsertBlockPluginOptions, InsertBlockPluginDependencies, InsertBlockPluginState, } from './types';
|
|
3
|
+
export type { InsertBlockOptions, InsertBlockPluginOptions, InsertBlockPluginDependencies, InsertBlockPluginState, ToolbarInsertBlockButtonsConfig, } from './types';
|
|
@@ -55,6 +55,19 @@ export type InsertBlockPluginDependencies = [
|
|
|
55
55
|
OptionalPlugin<ConnectivityPlugin>,
|
|
56
56
|
OptionalPlugin<ToolbarPlugin>
|
|
57
57
|
];
|
|
58
|
+
export interface ToolbarGroupConfig {
|
|
59
|
+
enabled?: boolean;
|
|
60
|
+
}
|
|
61
|
+
export interface ToolbarInsertBlockButtonsConfig {
|
|
62
|
+
codeBlock?: ToolbarGroupConfig;
|
|
63
|
+
emoji?: ToolbarGroupConfig;
|
|
64
|
+
insert?: ToolbarGroupConfig;
|
|
65
|
+
layout?: ToolbarGroupConfig;
|
|
66
|
+
media?: ToolbarGroupConfig;
|
|
67
|
+
mention?: ToolbarGroupConfig;
|
|
68
|
+
table?: ToolbarGroupConfig;
|
|
69
|
+
taskList?: ToolbarGroupConfig;
|
|
70
|
+
}
|
|
58
71
|
export interface InsertBlockPluginOptions {
|
|
59
72
|
allowExpand?: boolean;
|
|
60
73
|
allowTables?: boolean;
|
|
@@ -69,12 +82,22 @@ export interface InsertBlockPluginOptions {
|
|
|
69
82
|
*/
|
|
70
83
|
showElementBrowserLink?: boolean;
|
|
71
84
|
tableSelectorSupported?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Configure which toolbar buttons should be visible
|
|
87
|
+
* @default undefined - shows all available buttons (current behaviour)
|
|
88
|
+
*
|
|
89
|
+
* Only applies when platform_editor_toolbar_aifc is enabled
|
|
90
|
+
*/
|
|
91
|
+
toolbarButtons?: ToolbarInsertBlockButtonsConfig;
|
|
72
92
|
/**
|
|
73
93
|
* To hide the individual insert block buttons in the toolbar
|
|
74
94
|
* and only show the plus button
|
|
75
95
|
* @default undefined Shows the insert block buttons and the plus button
|
|
76
96
|
*
|
|
77
97
|
* Only applies when platform_editor_toolbar_aifc is enabled
|
|
98
|
+
*
|
|
99
|
+
* @warning Use {@link toolbarButtons} instead to configure the insert block toolbar buttons
|
|
100
|
+
* @see https://product-fabric.atlassian.net/browse/ED-29426
|
|
78
101
|
*/
|
|
79
102
|
toolbarShowPlusInsertOnly?: boolean;
|
|
80
103
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { InsertBlockPlugin } from '../../insertBlockPluginType';
|
|
4
|
+
type CodeBlockButtonProps = {
|
|
5
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
6
|
+
};
|
|
7
|
+
export declare const CodeBlockButton: ({ api }: CodeBlockButtonProps) => React.JSX.Element | null;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { InsertBlockPluginOptions, ToolbarInsertBlockButtonsConfig } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Resolves toolbar configuration from plugin options, handling backward compatibility
|
|
4
|
+
* and providing sensible defaults.
|
|
5
|
+
*/
|
|
6
|
+
export declare const resolveToolbarConfig: (options: InsertBlockPluginOptions) => ToolbarInsertBlockButtonsConfig;
|
|
@@ -2,6 +2,7 @@ import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types
|
|
|
2
2
|
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
3
3
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
4
4
|
import type { InsertBlockPlugin } from '../insertBlockPluginType';
|
|
5
|
+
import type { InsertBlockPluginOptions } from '../types';
|
|
5
6
|
type GetToolbarComponentsProps = {
|
|
6
7
|
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
7
8
|
expandEnabled?: boolean;
|
|
@@ -13,5 +14,20 @@ type GetToolbarComponentsProps = {
|
|
|
13
14
|
tableSelectorSupported?: boolean;
|
|
14
15
|
toolbarShowPlusInsertOnly?: boolean;
|
|
15
16
|
};
|
|
17
|
+
type GetToolbarComponentsUpdatedProps = {
|
|
18
|
+
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
19
|
+
onInsertBlockType?: (name: string) => Command;
|
|
20
|
+
options: InsertBlockPluginOptions;
|
|
21
|
+
};
|
|
16
22
|
export declare const getToolbarComponents: ({ api, tableSelectorSupported, toolbarShowPlusInsertOnly, showElementBrowserLink, onInsertBlockType, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, }: GetToolbarComponentsProps) => RegisterComponent[];
|
|
23
|
+
/**
|
|
24
|
+
* Updated toolbar components function that uses the new configuration resolver.
|
|
25
|
+
* This function replaces the hardcoded approach with a config-driven one.
|
|
26
|
+
*/
|
|
27
|
+
export declare const getToolbarComponentsUpdated: ({ api, options, onInsertBlockType, }: GetToolbarComponentsUpdatedProps) => RegisterComponent[];
|
|
28
|
+
/**
|
|
29
|
+
* Main export that switches between old and new implementations based on experiment.
|
|
30
|
+
* This allows for gradual rollout of the new config-driven approach.
|
|
31
|
+
*/
|
|
32
|
+
export declare const getToolbarComponentsWithConfig: (props: GetToolbarComponentsProps | GetToolbarComponentsUpdatedProps) => RegisterComponent[];
|
|
17
33
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-insert-block",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.2",
|
|
4
4
|
"description": "Insert block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"atlaskit:src": "src/index.ts",
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@atlaskit/button": "^23.4.0",
|
|
33
|
-
"@atlaskit/editor-plugin-analytics": "^6.
|
|
33
|
+
"@atlaskit/editor-plugin-analytics": "^6.1.0",
|
|
34
34
|
"@atlaskit/editor-plugin-block-type": "^9.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-code-block": "^8.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-connectivity": "^6.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-date": "^8.0.0",
|
|
38
|
-
"@atlaskit/editor-plugin-emoji": "^7.
|
|
38
|
+
"@atlaskit/editor-plugin-emoji": "^7.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-expand": "^7.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-extension": "^9.0.0",
|
|
41
41
|
"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
|
|
@@ -55,21 +55,21 @@
|
|
|
55
55
|
"@atlaskit/editor-plugin-table": "^15.0.0",
|
|
56
56
|
"@atlaskit/editor-plugin-tasks-and-decisions": "^9.0.0",
|
|
57
57
|
"@atlaskit/editor-plugin-toolbar": "^3.0.0",
|
|
58
|
-
"@atlaskit/editor-plugin-type-ahead": "^6.
|
|
58
|
+
"@atlaskit/editor-plugin-type-ahead": "^6.1.0",
|
|
59
59
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
60
60
|
"@atlaskit/editor-shared-styles": "^3.6.0",
|
|
61
|
-
"@atlaskit/editor-toolbar": "^0.
|
|
61
|
+
"@atlaskit/editor-toolbar": "^0.10.0",
|
|
62
62
|
"@atlaskit/editor-toolbar-model": "^0.2.0",
|
|
63
63
|
"@atlaskit/emoji": "^69.5.0",
|
|
64
64
|
"@atlaskit/heading": "^5.2.0",
|
|
65
65
|
"@atlaskit/icon": "^28.3.0",
|
|
66
|
-
"@atlaskit/icon-lab": "^5.
|
|
66
|
+
"@atlaskit/icon-lab": "^5.8.0",
|
|
67
67
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
68
68
|
"@atlaskit/primitives": "^14.15.0",
|
|
69
69
|
"@atlaskit/theme": "^21.0.0",
|
|
70
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
71
|
-
"@atlaskit/tokens": "^6.
|
|
72
|
-
"@atlaskit/tooltip": "^20.
|
|
70
|
+
"@atlaskit/tmp-editor-statsig": "^12.33.0",
|
|
71
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
72
|
+
"@atlaskit/tooltip": "^20.5.0",
|
|
73
73
|
"@babel/runtime": "^7.0.0",
|
|
74
74
|
"@emotion/react": "^11.7.1",
|
|
75
75
|
"bind-event-listener": "^3.0.0",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"react-virtualized": "^9.8.0"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
|
-
"@atlaskit/editor-common": "^110.
|
|
81
|
+
"@atlaskit/editor-common": "^110.4.0",
|
|
82
82
|
"react": "^18.2.0",
|
|
83
83
|
"react-dom": "^18.2.0",
|
|
84
84
|
"react-intl-next": "npm:react-intl@^5.18.1"
|