@atlaskit/editor-core 189.1.15 → 189.2.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.
Files changed (75) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/composable-editor/editor-internal.js +22 -1
  3. package/dist/cjs/create-editor/feature-flags-from-props.js +4 -5
  4. package/dist/cjs/plugins/index.js +0 -7
  5. package/dist/cjs/presets/universal.js +3 -2
  6. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  7. package/dist/cjs/version-wrapper.js +1 -1
  8. package/dist/es2019/composable-editor/editor-internal.js +25 -2
  9. package/dist/es2019/create-editor/feature-flags-from-props.js +4 -5
  10. package/dist/es2019/plugins/index.js +0 -1
  11. package/dist/es2019/presets/universal.js +3 -2
  12. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  13. package/dist/es2019/version-wrapper.js +1 -1
  14. package/dist/esm/composable-editor/editor-internal.js +23 -2
  15. package/dist/esm/create-editor/feature-flags-from-props.js +4 -5
  16. package/dist/esm/plugins/index.js +0 -1
  17. package/dist/esm/presets/universal.js +3 -2
  18. package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  19. package/dist/esm/version-wrapper.js +1 -1
  20. package/dist/types/create-editor/get-ui-component.d.ts +1 -1
  21. package/dist/types/plugins/index.d.ts +0 -1
  22. package/dist/types/plugins/insert-block/types.d.ts +1 -1
  23. package/dist/types/types/editor-props.d.ts +1 -1
  24. package/dist/types-ts4.5/create-editor/get-ui-component.d.ts +1 -1
  25. package/dist/types-ts4.5/plugins/index.d.ts +0 -1
  26. package/dist/types-ts4.5/plugins/insert-block/types.d.ts +1 -1
  27. package/dist/types-ts4.5/types/editor-props.d.ts +1 -1
  28. package/package.json +5 -4
  29. package/report.api.md +1 -8
  30. package/tmp/api-report-tmp.d.ts +1 -8
  31. package/dist/cjs/plugins/panel/actions.js +0 -125
  32. package/dist/cjs/plugins/panel/index.js +0 -215
  33. package/dist/cjs/plugins/panel/message.js +0 -44
  34. package/dist/cjs/plugins/panel/nodeviews/panel.js +0 -94
  35. package/dist/cjs/plugins/panel/pm-plugins/keymaps.js +0 -81
  36. package/dist/cjs/plugins/panel/pm-plugins/main.js +0 -28
  37. package/dist/cjs/plugins/panel/toolbar.js +0 -293
  38. package/dist/cjs/plugins/panel/types.js +0 -8
  39. package/dist/cjs/plugins/panel/utils.js +0 -53
  40. package/dist/es2019/plugins/panel/actions.js +0 -116
  41. package/dist/es2019/plugins/panel/index.js +0 -192
  42. package/dist/es2019/plugins/panel/message.js +0 -38
  43. package/dist/es2019/plugins/panel/nodeviews/panel.js +0 -82
  44. package/dist/es2019/plugins/panel/pm-plugins/keymaps.js +0 -82
  45. package/dist/es2019/plugins/panel/pm-plugins/main.js +0 -21
  46. package/dist/es2019/plugins/panel/toolbar.js +0 -279
  47. package/dist/es2019/plugins/panel/types.js +0 -2
  48. package/dist/es2019/plugins/panel/utils.js +0 -48
  49. package/dist/esm/plugins/panel/actions.js +0 -116
  50. package/dist/esm/plugins/panel/index.js +0 -209
  51. package/dist/esm/plugins/panel/message.js +0 -38
  52. package/dist/esm/plugins/panel/nodeviews/panel.js +0 -87
  53. package/dist/esm/plugins/panel/pm-plugins/keymaps.js +0 -74
  54. package/dist/esm/plugins/panel/pm-plugins/main.js +0 -22
  55. package/dist/esm/plugins/panel/toolbar.js +0 -286
  56. package/dist/esm/plugins/panel/types.js +0 -2
  57. package/dist/esm/plugins/panel/utils.js +0 -46
  58. package/dist/types/plugins/panel/actions.d.ts +0 -12
  59. package/dist/types/plugins/panel/index.d.ts +0 -17
  60. package/dist/types/plugins/panel/message.d.ts +0 -37
  61. package/dist/types/plugins/panel/nodeviews/panel.d.ts +0 -36
  62. package/dist/types/plugins/panel/pm-plugins/keymaps.d.ts +0 -3
  63. package/dist/types/plugins/panel/pm-plugins/main.d.ts +0 -11
  64. package/dist/types/plugins/panel/toolbar.d.ts +0 -15
  65. package/dist/types/plugins/panel/types.d.ts +0 -21
  66. package/dist/types/plugins/panel/utils.d.ts +0 -5
  67. package/dist/types-ts4.5/plugins/panel/actions.d.ts +0 -12
  68. package/dist/types-ts4.5/plugins/panel/index.d.ts +0 -17
  69. package/dist/types-ts4.5/plugins/panel/message.d.ts +0 -37
  70. package/dist/types-ts4.5/plugins/panel/nodeviews/panel.d.ts +0 -36
  71. package/dist/types-ts4.5/plugins/panel/pm-plugins/keymaps.d.ts +0 -3
  72. package/dist/types-ts4.5/plugins/panel/pm-plugins/main.d.ts +0 -11
  73. package/dist/types-ts4.5/plugins/panel/toolbar.d.ts +0 -15
  74. package/dist/types-ts4.5/plugins/panel/types.d.ts +0 -21
  75. package/dist/types-ts4.5/plugins/panel/utils.d.ts +0 -5
@@ -1,192 +0,0 @@
1
- import React from 'react';
2
- import { panel, PanelType } from '@atlaskit/adf-schema';
3
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
- import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
- import { IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
6
- import { IconCustomPanel } from '@atlaskit/editor-common/quick-insert';
7
- import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
8
- import { T50 } from '@atlaskit/theme/colors';
9
- import { insertPanelWithAnalytics } from './actions';
10
- import keymap from './pm-plugins/keymaps';
11
- import { createPlugin } from './pm-plugins/main';
12
- import { getToolbarConfig } from './toolbar';
13
- const panelPlugin = ({
14
- config: options = {},
15
- api
16
- }) => ({
17
- name: 'panel',
18
- nodes() {
19
- const panelNode = panel(!!options.allowCustomPanel);
20
- return [{
21
- name: 'panel',
22
- node: panelNode
23
- }];
24
- },
25
- pmPlugins() {
26
- return [{
27
- name: 'panel',
28
- plugin: ({
29
- providerFactory,
30
- dispatch
31
- }) => createPlugin(dispatch, providerFactory, options)
32
- }, {
33
- name: 'panelKeyMap',
34
- plugin: () => keymap()
35
- }];
36
- },
37
- actions: {
38
- insertPanel(inputMethod) {
39
- var _api$analytics;
40
- return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
41
- }
42
- },
43
- pluginsOptions: {
44
- quickInsert: ({
45
- formatMessage
46
- }) => {
47
- let quickInsertOptions = [{
48
- id: 'infopanel',
49
- title: formatMessage(blockTypeMessages.infoPanel),
50
- keywords: ['panel'],
51
- description: formatMessage(blockTypeMessages.infoPanelDescription),
52
- priority: 800,
53
- icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
54
- action(insert, state) {
55
- return createPanelAction({
56
- state,
57
- attributes: {
58
- panelType: PanelType.INFO
59
- },
60
- api
61
- });
62
- }
63
- }, {
64
- id: 'notepanel',
65
- title: formatMessage(blockTypeMessages.notePanel),
66
- description: formatMessage(blockTypeMessages.notePanelDescription),
67
- priority: 1000,
68
- icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
69
- action(insert, state) {
70
- return createPanelAction({
71
- state,
72
- attributes: {
73
- panelType: PanelType.NOTE
74
- },
75
- api
76
- });
77
- }
78
- }, {
79
- id: 'successpanel',
80
- title: formatMessage(blockTypeMessages.successPanel),
81
- description: formatMessage(blockTypeMessages.successPanelDescription),
82
- keywords: ['tip'],
83
- priority: 1000,
84
- icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
85
- action(insert, state) {
86
- return createPanelAction({
87
- state,
88
- attributes: {
89
- panelType: PanelType.SUCCESS
90
- },
91
- api
92
- });
93
- }
94
- }, {
95
- id: 'warningpanel',
96
- title: formatMessage(blockTypeMessages.warningPanel),
97
- description: formatMessage(blockTypeMessages.warningPanelDescription),
98
- priority: 1000,
99
- icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
100
- action(insert, state) {
101
- return createPanelAction({
102
- state,
103
- attributes: {
104
- panelType: PanelType.WARNING
105
- },
106
- api
107
- });
108
- }
109
- }, {
110
- id: 'errorpanel',
111
- title: formatMessage(blockTypeMessages.errorPanel),
112
- description: formatMessage(blockTypeMessages.errorPanelDescription),
113
- priority: 1000,
114
- icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
115
- action(insert, state) {
116
- return createPanelAction({
117
- state,
118
- attributes: {
119
- panelType: PanelType.ERROR
120
- },
121
- api
122
- });
123
- }
124
- }];
125
- if (options.allowCustomPanel && options.allowCustomPanelEdit) {
126
- quickInsertOptions.push({
127
- id: 'custompanel',
128
- title: formatMessage(blockTypeMessages.customPanel),
129
- description: formatMessage(blockTypeMessages.customPanelDescription),
130
- priority: 1000,
131
- icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
132
- action(insert, state) {
133
- return createPanelAction({
134
- state,
135
- attributes: {
136
- panelType: PanelType.CUSTOM,
137
- panelIcon: ':rainbow:',
138
- panelIconId: '1f308',
139
- panelIconText: '🌈',
140
- // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
141
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
142
- panelColor: T50
143
- },
144
- api
145
- });
146
- }
147
- });
148
- }
149
- return quickInsertOptions;
150
- },
151
- floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api)
152
- }
153
- });
154
-
155
- /**
156
- * Creates panel action and wrap selection transaction with analytics for the panel insertion.
157
- *
158
- * @example
159
- * const tr = createPanelAction({
160
- * state: editorState,
161
- * attributes: { panelType: 'info' },
162
- * });
163
- * if (tr) {
164
- * applyTransaction(tr);
165
- * }
166
- */
167
- function createPanelAction({
168
- state,
169
- attributes,
170
- api
171
- }) {
172
- const tr = createWrapSelectionTransaction({
173
- state,
174
- type: state.schema.nodes.panel,
175
- nodeAttributes: attributes
176
- });
177
- if (tr) {
178
- var _api$analytics2;
179
- api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
180
- action: ACTION.INSERTED,
181
- actionSubject: ACTION_SUBJECT.DOCUMENT,
182
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
183
- attributes: {
184
- inputMethod: INPUT_METHOD.QUICK_INSERT,
185
- panelType: attributes.panelType
186
- },
187
- eventType: EVENT_TYPE.TRACK
188
- })(tr);
189
- }
190
- return tr;
191
- }
192
- export default panelPlugin;
@@ -1,38 +0,0 @@
1
- import { defineMessages } from 'react-intl-next';
2
- export const messages = defineMessages({
3
- info: {
4
- id: 'fabric.editor.info',
5
- defaultMessage: 'Info',
6
- description: 'Panels provide a way to highlight text. The info panel has a blue background.'
7
- },
8
- note: {
9
- id: 'fabric.editor.note',
10
- defaultMessage: 'Note',
11
- description: 'Panels provide a way to highlight text. The note panel has a purple background.'
12
- },
13
- success: {
14
- id: 'fabric.editor.success',
15
- defaultMessage: 'Success',
16
- description: 'Panels provide a way to highlight text. The success panel has a green background.'
17
- },
18
- warning: {
19
- id: 'fabric.editor.warning',
20
- defaultMessage: 'Warning',
21
- description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
22
- },
23
- error: {
24
- id: 'fabric.editor.error',
25
- defaultMessage: 'Error',
26
- description: 'Panels provide a way to highlight text. The error panel has a red background.'
27
- },
28
- emoji: {
29
- id: 'fabric.editor.panel.emoji',
30
- defaultMessage: 'Add emoji',
31
- description: 'Select the panel icon'
32
- },
33
- backgroundColor: {
34
- id: 'fabric.editor.panel.backgroundColor',
35
- defaultMessage: 'Background color',
36
- description: 'Select the panel background color.'
37
- }
38
- });
@@ -1,82 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import { PanelType } from '@atlaskit/adf-schema';
4
- import { Emoji } from '@atlaskit/editor-common/emoji';
5
- import { PanelErrorIcon, PanelInfoIcon, PanelNoteIcon, PanelSuccessIcon, PanelWarningIcon } from '@atlaskit/editor-common/icons';
6
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
7
- import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
8
- import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
9
- import TipIcon from '@atlaskit/icon/glyph/editor/hint';
10
- import { panelAttrsToDom } from '../utils';
11
- export const panelIcons = {
12
- info: PanelInfoIcon,
13
- success: PanelSuccessIcon,
14
- note: PanelNoteIcon,
15
- tip: TipIcon,
16
- warning: PanelWarningIcon,
17
- error: PanelErrorIcon,
18
- custom: PanelInfoIcon
19
- };
20
- export const PanelIcon = props => {
21
- const {
22
- allowCustomPanel,
23
- providerFactory,
24
- panelAttributes: {
25
- panelType,
26
- panelIcon,
27
- panelIconId,
28
- panelIconText
29
- }
30
- } = props;
31
- if (allowCustomPanel && panelIcon && panelType === PanelType.CUSTOM) {
32
- return /*#__PURE__*/React.createElement(Emoji, {
33
- providers: providerFactory,
34
- shortName: panelIcon,
35
- id: panelIconId,
36
- fallback: panelIconText,
37
- showTooltip: false,
38
- allowTextFallback: false,
39
- fitToHeight: akEditorCustomIconSize
40
- });
41
- }
42
- const Icon = panelIcons[panelType];
43
- return /*#__PURE__*/React.createElement(Icon, {
44
- label: `Panel ${panelType}`
45
- });
46
- };
47
- class PanelNodeView {
48
- constructor(node, view, getPos, pluginOptions, providerFactory) {
49
- this.providerFactory = providerFactory;
50
- this.pluginOptions = pluginOptions;
51
- this.view = view;
52
- this.node = node;
53
- const {
54
- dom,
55
- contentDOM
56
- } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.allowCustomPanel || false));
57
- this.getPos = getPos;
58
- this.dom = dom;
59
- this.contentDOM = contentDOM;
60
- this.icon = this.dom.querySelector(`.${PanelSharedCssClassName.icon}`);
61
- if (!this.icon) {
62
- return;
63
- }
64
- // set contentEditable as false to be able to select the custom panels with keyboard
65
- this.icon.contentEditable = 'false';
66
- ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
67
- allowCustomPanel: pluginOptions.allowCustomPanel,
68
- panelAttributes: node.attrs,
69
- providerFactory: this.providerFactory
70
- }), this.icon);
71
- }
72
- ignoreMutation(mutation) {
73
- // ignore mutation if it caused by the icon.
74
- const isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon;
75
- // ignore mutation if it caused by the lazy load emoji inside icon.
76
- const isInsideIcon = this.icon.contains(mutation.target);
77
- return isIcon || isInsideIcon;
78
- }
79
- }
80
- export const getPanelNodeView = (pluginOptions, providerFactory) => (node, view, getPos) => {
81
- return new PanelNodeView(node, view, getPos, pluginOptions, providerFactory);
82
- };
@@ -1,82 +0,0 @@
1
- import { isEmptyNode } from '@atlaskit/editor-common/utils';
2
- import { keymap } from '@atlaskit/editor-prosemirror/keymap';
3
- import { findParentNodeOfType, hasParentNodeOfType, setTextSelection } from '@atlaskit/editor-prosemirror/utils';
4
- function findParentNode(selection, nodeType) {
5
- const parentPosition = findParentNodeOfType(nodeType)(selection);
6
- if (parentPosition) {
7
- return parentPosition.node;
8
- }
9
- return null;
10
- }
11
- function isInsideAnEmptyNode(selection, nodeType, schema) {
12
- const parentNode = findParentNode(selection, nodeType);
13
- return parentNode && isEmptyNode(schema)(parentNode);
14
- }
15
-
16
- // Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
17
- export function keymapPlugin() {
18
- const deleteCurrentItem = ($from, tr) => {
19
- return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
20
- };
21
- const keymaps = {
22
- Backspace: (state, dispatch) => {
23
- var _nodeBeforePanel$type, _nodeBeforePanel$type2;
24
- const {
25
- selection,
26
- schema: {
27
- nodes
28
- },
29
- tr
30
- } = state;
31
- const {
32
- panel,
33
- blockquote
34
- } = nodes;
35
- const {
36
- $from,
37
- $to
38
- } = selection;
39
- // Don't do anything if selection is a range
40
- if ($from.pos !== $to.pos) {
41
- return false;
42
- }
43
-
44
- // If not at the start of a panel, no joining will happen so allow default behaviour (backspacing characters etc..)
45
- if ($from.parentOffset !== 0) {
46
- return false;
47
- }
48
- const $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
49
- const previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
50
- const parentNodeType = $from.parent.type;
51
- const isPreviousNodeAPanel = previousNodeType === panel;
52
- const isParentNodeAPanel = parentNodeType === panel;
53
- const nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
54
-
55
- // Stops merging panels when deleting empty paragraph in between
56
- // Stops merging blockquotes with panels when deleting from start of blockquote
57
-
58
- if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) ||
59
- // Lift line of panel content up and out of the panel, when backspacing
60
- // at the start of a panel, if the node before the panel is an 'isolating' node
61
- // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
62
- // behaviour will fallback to 'select node backward' logic because the node
63
- // before is an isolating node.
64
- nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panel)(selection)) {
65
- const content = $from.node($from.depth).content;
66
- const insertPos = $previousPos.pos;
67
- deleteCurrentItem($from, tr).insert(insertPos, content);
68
- if (dispatch) {
69
- dispatch(setTextSelection(insertPos)(tr).scrollIntoView());
70
- }
71
- return true;
72
- }
73
- const nodeType = $from.node().type;
74
- if (nodeType !== panel) {
75
- return false;
76
- }
77
- return true;
78
- }
79
- };
80
- return keymap(keymaps);
81
- }
82
- export default keymapPlugin;
@@ -1,21 +0,0 @@
1
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
2
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
- import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
4
- import { getPanelNodeView } from '../nodeviews/panel';
5
- import { pluginKey } from '../types';
6
- export const createPlugin = (dispatch, providerFactory, pluginOptions) => {
7
- const {
8
- useLongPressSelection = false
9
- } = pluginOptions;
10
- return new SafePlugin({
11
- key: pluginKey,
12
- props: {
13
- nodeViews: {
14
- panel: getPanelNodeView(pluginOptions, providerFactory)
15
- },
16
- handleClickOn: createSelectionClickHandler(['panel'], target => !!target.closest(`.${PanelSharedCssClassName.prefix}`), {
17
- useLongPressSelection
18
- })
19
- }
20
- });
21
- };
@@ -1,279 +0,0 @@
1
- import { PanelType } from '@atlaskit/adf-schema';
2
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
3
- import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
4
- import commonMessages from '@atlaskit/editor-common/messages';
5
- import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
6
- import { DEFAULT_BORDER_COLOR, panelBackgroundPalette } from '@atlaskit/editor-common/ui-color';
7
- import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
- import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
9
- import InfoIcon from '@atlaskit/icon/glyph/editor/info';
10
- import NoteIcon from '@atlaskit/icon/glyph/editor/note';
11
- import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
12
- import RemoveEmojiIcon from '@atlaskit/icon/glyph/editor/remove-emoji';
13
- import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
14
- import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
15
- import { changePanelType, removePanel } from './actions';
16
- import { messages } from './message';
17
- import { findPanel } from './utils';
18
- export const panelIconMap = {
19
- [PanelType.INFO]: {
20
- shortName: ':info:',
21
- id: 'atlassian-info'
22
- },
23
- [PanelType.NOTE]: {
24
- shortName: ':note:',
25
- id: 'atlassian-note'
26
- },
27
- [PanelType.WARNING]: {
28
- shortName: ':warning:',
29
- id: 'atlassian-warning'
30
- },
31
- [PanelType.ERROR]: {
32
- shortName: ':cross_mark:',
33
- id: 'atlassian-cross_mark'
34
- },
35
- [PanelType.SUCCESS]: {
36
- shortName: ':check_mark:',
37
- id: 'atlassian-check_mark'
38
- },
39
- [PanelType.TIP]: {
40
- shortName: ':tip:',
41
- id: 'atlassian-tip'
42
- }
43
- };
44
- export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) => {
45
- // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
46
- const items = [{
47
- id: 'editor.panel.info',
48
- type: 'button',
49
- icon: InfoIcon,
50
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
51
- selected: activePanelType === PanelType.INFO,
52
- title: formatMessage(messages.info),
53
- tabIndex: null
54
- }, {
55
- id: 'editor.panel.note',
56
- type: 'button',
57
- icon: NoteIcon,
58
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
59
- selected: activePanelType === PanelType.NOTE,
60
- title: formatMessage(messages.note),
61
- tabIndex: null
62
- }, {
63
- id: 'editor.panel.success',
64
- type: 'button',
65
- icon: SuccessIcon,
66
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
67
- selected: activePanelType === PanelType.SUCCESS,
68
- title: formatMessage(messages.success),
69
- tabIndex: null
70
- }, {
71
- id: 'editor.panel.warning',
72
- type: 'button',
73
- icon: WarningIcon,
74
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
75
- selected: activePanelType === PanelType.WARNING,
76
- title: formatMessage(messages.warning),
77
- tabIndex: null
78
- }, {
79
- id: 'editor.panel.error',
80
- type: 'button',
81
- icon: ErrorIcon,
82
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
83
- selected: activePanelType === PanelType.ERROR,
84
- title: formatMessage(messages.error),
85
- tabIndex: null
86
- }];
87
- if (isCustomPanelEnabled) {
88
- const changeColor = color => (state, dispatch) => {
89
- const panelNode = findPanel(state);
90
- if (panelNode === undefined) {
91
- return false;
92
- }
93
- let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
94
- const emojiInfo = panelNode.node.attrs.panelType;
95
- const panelEmoji = panelIconMap[emojiInfo];
96
- const previousEmoji = panelEmoji ? {
97
- emoji: panelEmoji.shortName,
98
- emojiId: panelEmoji.id
99
- } : {};
100
- if (previousColor === color) {
101
- changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
102
- color,
103
- ...previousEmoji
104
- }, isCustomPanelEnabled)(state, dispatch);
105
- return false;
106
- }
107
- const payload = {
108
- action: ACTION.CHANGED_BACKGROUND_COLOR,
109
- actionSubject: ACTION_SUBJECT.PANEL,
110
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
111
- attributes: {
112
- newColor: color,
113
- previousColor: previousColor
114
- },
115
- eventType: EVENT_TYPE.TRACK
116
- };
117
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
118
- color,
119
- ...previousEmoji
120
- }, isCustomPanelEnabled))(state, dispatch);
121
- return false;
122
- };
123
- const changeEmoji = emoji => (state, dispatch) => {
124
- const panelNode = findPanel(state);
125
- if (panelNode === undefined) {
126
- return false;
127
- }
128
- let previousIcon = panelNode.node.attrs.panelIcon || '';
129
- if (previousIcon === emoji.shortName) {
130
- changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
131
- emoji: emoji.shortName,
132
- emojiId: emoji.id,
133
- emojiText: emoji.fallback
134
- }, true)(state, dispatch);
135
- return false;
136
- }
137
- const payload = {
138
- action: ACTION.CHANGED_ICON,
139
- actionSubject: ACTION_SUBJECT.PANEL,
140
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
141
- attributes: {
142
- newIcon: emoji.shortName,
143
- previousIcon: previousIcon
144
- },
145
- eventType: EVENT_TYPE.TRACK
146
- };
147
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
148
- emoji: emoji.shortName,
149
- emojiId: emoji.id,
150
- emojiText: emoji.fallback
151
- }, true))(state, dispatch);
152
- return false;
153
- };
154
- const removeEmoji = () => (state, dispatch) => {
155
- const panelNode = findPanel(state);
156
- if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
157
- return false;
158
- }
159
- if (panelNode === undefined) {
160
- return false;
161
- }
162
- const payload = {
163
- action: ACTION.REMOVE_ICON,
164
- actionSubject: ACTION_SUBJECT.PANEL,
165
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
166
- attributes: {
167
- icon: panelNode.node.attrs.panelIcon
168
- },
169
- eventType: EVENT_TYPE.TRACK
170
- };
171
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
172
- emoji: undefined,
173
- emojiId: undefined,
174
- emojiText: undefined
175
- }, isCustomPanelEnabled))(state, dispatch);
176
- return false;
177
- };
178
- const panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
179
- const defaultPalette = panelBackgroundPalette.find(item => item.value === panelColor) || {
180
- label: 'Custom',
181
- value: panelColor,
182
- border: DEFAULT_BORDER_COLOR
183
- };
184
- if (isCustomPanelEditable) {
185
- const colorPicker = {
186
- id: 'editor.panel.colorPicker',
187
- title: formatMessage(messages.backgroundColor),
188
- type: 'select',
189
- selectType: 'color',
190
- defaultValue: defaultPalette,
191
- options: panelBackgroundPalette,
192
- onChange: option => changeColor(option.value)
193
- };
194
- const emojiPicker = {
195
- id: 'editor.panel.emojiPicker',
196
- title: formatMessage(messages.emoji),
197
- type: 'select',
198
- selectType: 'emoji',
199
- options: [],
200
- selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
201
- onChange: emoji => changeEmoji(emoji)
202
- };
203
- const removeEmojiButton = {
204
- id: 'editor.panel.removeEmoji',
205
- type: 'button',
206
- icon: RemoveEmojiIcon,
207
- onClick: removeEmoji(),
208
- title: formatMessage(commonMessages.removeEmoji),
209
- disabled: activePanelIcon ? false : true
210
- };
211
- items.push(emojiPicker, removeEmojiButton, {
212
- type: 'separator'
213
- }, colorPicker);
214
- }
215
- }
216
- if (state) {
217
- items.push({
218
- type: 'copy-button',
219
- items: [{
220
- type: 'separator'
221
- }, {
222
- state,
223
- formatMessage,
224
- nodeType: panelNodeType
225
- }]
226
- });
227
- }
228
- items.push({
229
- type: 'separator'
230
- }, {
231
- id: 'editor.panel.delete',
232
- type: 'button',
233
- appearance: 'danger',
234
- focusEditoronEnter: true,
235
- icon: RemoveIcon,
236
- onClick: removePanel(editorAnalyticsAPI),
237
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
238
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
239
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
240
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
241
- title: formatMessage(commonMessages.remove),
242
- tabIndex: null
243
- });
244
- return items;
245
- };
246
- export const getToolbarConfig = (state, intl, options = {}, providerFactory, api) => {
247
- const {
248
- formatMessage
249
- } = intl;
250
- const panelObject = findPanel(state);
251
- if (panelObject) {
252
- var _api$analytics;
253
- const nodeType = state.schema.nodes.panel;
254
- const {
255
- panelType,
256
- panelColor,
257
- panelIcon
258
- } = panelObject.node.attrs;
259
- const isStandardPanel = panelType => {
260
- return panelType !== PanelType.CUSTOM ? panelType : undefined;
261
- };
262
-
263
- // force toolbar to be turned on
264
- const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
265
- const getDomRef = editorView => {
266
- const domAtPos = editorView.domAtPos.bind(editorView);
267
- const element = findDomRefAtPos(panelObject.pos, domAtPos);
268
- return element;
269
- };
270
- return {
271
- title: 'Panel floating controls',
272
- getDomRef,
273
- nodeType,
274
- items,
275
- scrollable: true
276
- };
277
- }
278
- return;
279
- };