@atlaskit/editor-core 189.1.13 → 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 (208) hide show
  1. package/CHANGELOG.md +18 -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/i18n/cs.js +0 -1
  5. package/dist/cjs/i18n/da.js +0 -1
  6. package/dist/cjs/i18n/de.js +0 -1
  7. package/dist/cjs/i18n/en.js +0 -1
  8. package/dist/cjs/i18n/en_GB.js +0 -1
  9. package/dist/cjs/i18n/en_ZZ.js +0 -1
  10. package/dist/cjs/i18n/es.js +0 -1
  11. package/dist/cjs/i18n/fi.js +0 -1
  12. package/dist/cjs/i18n/fr.js +0 -1
  13. package/dist/cjs/i18n/hu.js +0 -1
  14. package/dist/cjs/i18n/it.js +0 -1
  15. package/dist/cjs/i18n/ja.js +0 -1
  16. package/dist/cjs/i18n/ko.js +0 -1
  17. package/dist/cjs/i18n/nb.js +0 -1
  18. package/dist/cjs/i18n/nl.js +0 -1
  19. package/dist/cjs/i18n/pl.js +0 -1
  20. package/dist/cjs/i18n/pt_BR.js +0 -1
  21. package/dist/cjs/i18n/ru.js +0 -1
  22. package/dist/cjs/i18n/sv.js +0 -1
  23. package/dist/cjs/i18n/th.js +0 -1
  24. package/dist/cjs/i18n/tr.js +0 -1
  25. package/dist/cjs/i18n/uk.js +0 -1
  26. package/dist/cjs/i18n/vi.js +0 -1
  27. package/dist/cjs/i18n/zh.js +0 -1
  28. package/dist/cjs/i18n/zh_TW.js +0 -1
  29. package/dist/cjs/plugins/index.js +0 -7
  30. package/dist/cjs/presets/universal.js +3 -2
  31. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  32. package/dist/cjs/ui/ContentStyles/index.js +7 -7
  33. package/dist/cjs/version-wrapper.js +1 -1
  34. package/dist/es2019/composable-editor/editor-internal.js +25 -2
  35. package/dist/es2019/create-editor/feature-flags-from-props.js +4 -5
  36. package/dist/es2019/i18n/cs.js +0 -1
  37. package/dist/es2019/i18n/da.js +0 -1
  38. package/dist/es2019/i18n/de.js +0 -1
  39. package/dist/es2019/i18n/en.js +0 -1
  40. package/dist/es2019/i18n/en_GB.js +0 -1
  41. package/dist/es2019/i18n/en_ZZ.js +0 -1
  42. package/dist/es2019/i18n/es.js +0 -1
  43. package/dist/es2019/i18n/fi.js +0 -1
  44. package/dist/es2019/i18n/fr.js +0 -1
  45. package/dist/es2019/i18n/hu.js +0 -1
  46. package/dist/es2019/i18n/it.js +0 -1
  47. package/dist/es2019/i18n/ja.js +0 -1
  48. package/dist/es2019/i18n/ko.js +0 -1
  49. package/dist/es2019/i18n/nb.js +0 -1
  50. package/dist/es2019/i18n/nl.js +0 -1
  51. package/dist/es2019/i18n/pl.js +0 -1
  52. package/dist/es2019/i18n/pt_BR.js +0 -1
  53. package/dist/es2019/i18n/ru.js +0 -1
  54. package/dist/es2019/i18n/sv.js +0 -1
  55. package/dist/es2019/i18n/th.js +0 -1
  56. package/dist/es2019/i18n/tr.js +0 -1
  57. package/dist/es2019/i18n/uk.js +0 -1
  58. package/dist/es2019/i18n/vi.js +0 -1
  59. package/dist/es2019/i18n/zh.js +0 -1
  60. package/dist/es2019/i18n/zh_TW.js +0 -1
  61. package/dist/es2019/plugins/index.js +0 -1
  62. package/dist/es2019/presets/universal.js +3 -2
  63. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  64. package/dist/es2019/ui/ContentStyles/index.js +1 -1
  65. package/dist/es2019/version-wrapper.js +1 -1
  66. package/dist/esm/composable-editor/editor-internal.js +23 -2
  67. package/dist/esm/create-editor/feature-flags-from-props.js +4 -5
  68. package/dist/esm/i18n/cs.js +0 -1
  69. package/dist/esm/i18n/da.js +0 -1
  70. package/dist/esm/i18n/de.js +0 -1
  71. package/dist/esm/i18n/en.js +0 -1
  72. package/dist/esm/i18n/en_GB.js +0 -1
  73. package/dist/esm/i18n/en_ZZ.js +0 -1
  74. package/dist/esm/i18n/es.js +0 -1
  75. package/dist/esm/i18n/fi.js +0 -1
  76. package/dist/esm/i18n/fr.js +0 -1
  77. package/dist/esm/i18n/hu.js +0 -1
  78. package/dist/esm/i18n/it.js +0 -1
  79. package/dist/esm/i18n/ja.js +0 -1
  80. package/dist/esm/i18n/ko.js +0 -1
  81. package/dist/esm/i18n/nb.js +0 -1
  82. package/dist/esm/i18n/nl.js +0 -1
  83. package/dist/esm/i18n/pl.js +0 -1
  84. package/dist/esm/i18n/pt_BR.js +0 -1
  85. package/dist/esm/i18n/ru.js +0 -1
  86. package/dist/esm/i18n/sv.js +0 -1
  87. package/dist/esm/i18n/th.js +0 -1
  88. package/dist/esm/i18n/tr.js +0 -1
  89. package/dist/esm/i18n/uk.js +0 -1
  90. package/dist/esm/i18n/vi.js +0 -1
  91. package/dist/esm/i18n/zh.js +0 -1
  92. package/dist/esm/i18n/zh_TW.js +0 -1
  93. package/dist/esm/plugins/index.js +0 -1
  94. package/dist/esm/presets/universal.js +3 -2
  95. package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js +10 -8
  96. package/dist/esm/ui/ContentStyles/index.js +1 -1
  97. package/dist/esm/version-wrapper.js +1 -1
  98. package/dist/types/create-editor/get-ui-component.d.ts +1 -1
  99. package/dist/types/i18n/cs.d.ts +0 -1
  100. package/dist/types/i18n/da.d.ts +0 -1
  101. package/dist/types/i18n/de.d.ts +0 -1
  102. package/dist/types/i18n/en.d.ts +0 -1
  103. package/dist/types/i18n/en_GB.d.ts +0 -1
  104. package/dist/types/i18n/en_ZZ.d.ts +0 -1
  105. package/dist/types/i18n/es.d.ts +0 -1
  106. package/dist/types/i18n/fi.d.ts +0 -1
  107. package/dist/types/i18n/fr.d.ts +0 -1
  108. package/dist/types/i18n/hu.d.ts +0 -1
  109. package/dist/types/i18n/it.d.ts +0 -1
  110. package/dist/types/i18n/ja.d.ts +0 -1
  111. package/dist/types/i18n/ko.d.ts +0 -1
  112. package/dist/types/i18n/nb.d.ts +0 -1
  113. package/dist/types/i18n/nl.d.ts +0 -1
  114. package/dist/types/i18n/pl.d.ts +0 -1
  115. package/dist/types/i18n/pt_BR.d.ts +0 -1
  116. package/dist/types/i18n/ru.d.ts +0 -1
  117. package/dist/types/i18n/sv.d.ts +0 -1
  118. package/dist/types/i18n/th.d.ts +0 -1
  119. package/dist/types/i18n/tr.d.ts +0 -1
  120. package/dist/types/i18n/uk.d.ts +0 -1
  121. package/dist/types/i18n/vi.d.ts +0 -1
  122. package/dist/types/i18n/zh.d.ts +0 -1
  123. package/dist/types/i18n/zh_TW.d.ts +0 -1
  124. package/dist/types/plugins/index.d.ts +0 -1
  125. package/dist/types/plugins/insert-block/types.d.ts +1 -1
  126. package/dist/types/types/editor-props.d.ts +1 -1
  127. package/dist/types/{plugins/panel/styles.d.ts → ui/ContentStyles/panel.d.ts} +1 -1
  128. package/dist/types-ts4.5/create-editor/get-ui-component.d.ts +1 -1
  129. package/dist/types-ts4.5/i18n/cs.d.ts +0 -1
  130. package/dist/types-ts4.5/i18n/da.d.ts +0 -1
  131. package/dist/types-ts4.5/i18n/de.d.ts +0 -1
  132. package/dist/types-ts4.5/i18n/en.d.ts +0 -1
  133. package/dist/types-ts4.5/i18n/en_GB.d.ts +0 -1
  134. package/dist/types-ts4.5/i18n/en_ZZ.d.ts +0 -1
  135. package/dist/types-ts4.5/i18n/es.d.ts +0 -1
  136. package/dist/types-ts4.5/i18n/fi.d.ts +0 -1
  137. package/dist/types-ts4.5/i18n/fr.d.ts +0 -1
  138. package/dist/types-ts4.5/i18n/hu.d.ts +0 -1
  139. package/dist/types-ts4.5/i18n/it.d.ts +0 -1
  140. package/dist/types-ts4.5/i18n/ja.d.ts +0 -1
  141. package/dist/types-ts4.5/i18n/ko.d.ts +0 -1
  142. package/dist/types-ts4.5/i18n/nb.d.ts +0 -1
  143. package/dist/types-ts4.5/i18n/nl.d.ts +0 -1
  144. package/dist/types-ts4.5/i18n/pl.d.ts +0 -1
  145. package/dist/types-ts4.5/i18n/pt_BR.d.ts +0 -1
  146. package/dist/types-ts4.5/i18n/ru.d.ts +0 -1
  147. package/dist/types-ts4.5/i18n/sv.d.ts +0 -1
  148. package/dist/types-ts4.5/i18n/th.d.ts +0 -1
  149. package/dist/types-ts4.5/i18n/tr.d.ts +0 -1
  150. package/dist/types-ts4.5/i18n/uk.d.ts +0 -1
  151. package/dist/types-ts4.5/i18n/vi.d.ts +0 -1
  152. package/dist/types-ts4.5/i18n/zh.d.ts +0 -1
  153. package/dist/types-ts4.5/i18n/zh_TW.d.ts +0 -1
  154. package/dist/types-ts4.5/plugins/index.d.ts +0 -1
  155. package/dist/types-ts4.5/plugins/insert-block/types.d.ts +1 -1
  156. package/dist/types-ts4.5/types/editor-props.d.ts +1 -1
  157. package/dist/types-ts4.5/{plugins/panel/styles.d.ts → ui/ContentStyles/panel.d.ts} +1 -1
  158. package/package.json +6 -5
  159. package/report.api.md +1 -8
  160. package/tmp/api-report-tmp.d.ts +1 -8
  161. package/dist/cjs/plugins/panel/actions.js +0 -125
  162. package/dist/cjs/plugins/panel/index.js +0 -215
  163. package/dist/cjs/plugins/panel/message.js +0 -44
  164. package/dist/cjs/plugins/panel/nodeviews/panel.js +0 -94
  165. package/dist/cjs/plugins/panel/pm-plugins/keymaps.js +0 -81
  166. package/dist/cjs/plugins/panel/pm-plugins/main.js +0 -28
  167. package/dist/cjs/plugins/panel/toolbar.js +0 -293
  168. package/dist/cjs/plugins/panel/types.js +0 -8
  169. package/dist/cjs/plugins/panel/utils.js +0 -53
  170. package/dist/es2019/plugins/panel/actions.js +0 -116
  171. package/dist/es2019/plugins/panel/index.js +0 -192
  172. package/dist/es2019/plugins/panel/message.js +0 -38
  173. package/dist/es2019/plugins/panel/nodeviews/panel.js +0 -82
  174. package/dist/es2019/plugins/panel/pm-plugins/keymaps.js +0 -82
  175. package/dist/es2019/plugins/panel/pm-plugins/main.js +0 -21
  176. package/dist/es2019/plugins/panel/toolbar.js +0 -280
  177. package/dist/es2019/plugins/panel/types.js +0 -2
  178. package/dist/es2019/plugins/panel/utils.js +0 -48
  179. package/dist/esm/plugins/panel/actions.js +0 -116
  180. package/dist/esm/plugins/panel/index.js +0 -209
  181. package/dist/esm/plugins/panel/message.js +0 -38
  182. package/dist/esm/plugins/panel/nodeviews/panel.js +0 -87
  183. package/dist/esm/plugins/panel/pm-plugins/keymaps.js +0 -74
  184. package/dist/esm/plugins/panel/pm-plugins/main.js +0 -22
  185. package/dist/esm/plugins/panel/toolbar.js +0 -287
  186. package/dist/esm/plugins/panel/types.js +0 -2
  187. package/dist/esm/plugins/panel/utils.js +0 -46
  188. package/dist/types/plugins/panel/actions.d.ts +0 -12
  189. package/dist/types/plugins/panel/index.d.ts +0 -17
  190. package/dist/types/plugins/panel/message.d.ts +0 -37
  191. package/dist/types/plugins/panel/nodeviews/panel.d.ts +0 -36
  192. package/dist/types/plugins/panel/pm-plugins/keymaps.d.ts +0 -3
  193. package/dist/types/plugins/panel/pm-plugins/main.d.ts +0 -11
  194. package/dist/types/plugins/panel/toolbar.d.ts +0 -16
  195. package/dist/types/plugins/panel/types.d.ts +0 -21
  196. package/dist/types/plugins/panel/utils.d.ts +0 -5
  197. package/dist/types-ts4.5/plugins/panel/actions.d.ts +0 -12
  198. package/dist/types-ts4.5/plugins/panel/index.d.ts +0 -17
  199. package/dist/types-ts4.5/plugins/panel/message.d.ts +0 -37
  200. package/dist/types-ts4.5/plugins/panel/nodeviews/panel.d.ts +0 -36
  201. package/dist/types-ts4.5/plugins/panel/pm-plugins/keymaps.d.ts +0 -3
  202. package/dist/types-ts4.5/plugins/panel/pm-plugins/main.d.ts +0 -11
  203. package/dist/types-ts4.5/plugins/panel/toolbar.d.ts +0 -16
  204. package/dist/types-ts4.5/plugins/panel/types.d.ts +0 -21
  205. package/dist/types-ts4.5/plugins/panel/utils.d.ts +0 -5
  206. /package/dist/cjs/{plugins/panel/styles.js → ui/ContentStyles/panel.js} +0 -0
  207. /package/dist/es2019/{plugins/panel/styles.js → ui/ContentStyles/panel.js} +0 -0
  208. /package/dist/esm/{plugins/panel/styles.js → ui/ContentStyles/panel.js} +0 -0
@@ -1,192 +0,0 @@
1
- import React from 'react';
2
- import { panel, PanelType } from '@atlaskit/adf-schema';
3
- import { createPlugin } from './pm-plugins/main';
4
- import { getToolbarConfig } from './toolbar';
5
- import keymap from './pm-plugins/keymaps';
6
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
7
- import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanelError } from '@atlaskit/editor-common/quick-insert';
8
- import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
9
- import { blockTypeMessages } from '@atlaskit/editor-common/messages';
10
- import { IconCustomPanel } from '@atlaskit/editor-common/quick-insert';
11
- import { T50 } from '@atlaskit/theme/colors';
12
- import { insertPanelWithAnalytics } from './actions';
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 { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
4
- import TipIcon from '@atlaskit/icon/glyph/editor/hint';
5
- import { PanelType } from '@atlaskit/adf-schema';
6
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
7
- import { Emoji } from '@atlaskit/editor-common/emoji';
8
- import { panelAttrsToDom } from '../utils';
9
- import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
10
- import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
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 { keymap } from '@atlaskit/editor-prosemirror/keymap';
2
- import { setTextSelection, findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
- import { isEmptyNode } from '../../../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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
3
- import { getPanelNodeView } from '../nodeviews/panel';
4
- import { pluginKey } from '../types';
5
- import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
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,280 +0,0 @@
1
- import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
2
- import InfoIcon from '@atlaskit/icon/glyph/editor/info';
3
- import NoteIcon from '@atlaskit/icon/glyph/editor/note';
4
- import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
5
- import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
6
- import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
7
- import RemoveEmojiIcon from '@atlaskit/icon/glyph/editor/remove-emoji';
8
- import commonMessages from '../../messages';
9
- import { removePanel, changePanelType } from './actions';
10
- import { panelBackgroundPalette } from '@atlaskit/editor-common/ui-color';
11
- import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
12
- import { findPanel } from './utils';
13
- import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
14
- import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
15
- import { PanelType } from '@atlaskit/adf-schema';
16
- import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
17
- import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
18
- import { messages } from './message';
19
- export const panelIconMap = {
20
- [PanelType.INFO]: {
21
- shortName: ':info:',
22
- id: 'atlassian-info'
23
- },
24
- [PanelType.NOTE]: {
25
- shortName: ':note:',
26
- id: 'atlassian-note'
27
- },
28
- [PanelType.WARNING]: {
29
- shortName: ':warning:',
30
- id: 'atlassian-warning'
31
- },
32
- [PanelType.ERROR]: {
33
- shortName: ':cross_mark:',
34
- id: 'atlassian-cross_mark'
35
- },
36
- [PanelType.SUCCESS]: {
37
- shortName: ':check_mark:',
38
- id: 'atlassian-check_mark'
39
- },
40
- [PanelType.TIP]: {
41
- shortName: ':tip:',
42
- id: 'atlassian-tip'
43
- }
44
- };
45
- export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) => {
46
- // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
47
- const items = [{
48
- id: 'editor.panel.info',
49
- type: 'button',
50
- icon: InfoIcon,
51
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
52
- selected: activePanelType === PanelType.INFO,
53
- title: formatMessage(messages.info),
54
- tabIndex: null
55
- }, {
56
- id: 'editor.panel.note',
57
- type: 'button',
58
- icon: NoteIcon,
59
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
60
- selected: activePanelType === PanelType.NOTE,
61
- title: formatMessage(messages.note),
62
- tabIndex: null
63
- }, {
64
- id: 'editor.panel.success',
65
- type: 'button',
66
- icon: SuccessIcon,
67
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
68
- selected: activePanelType === PanelType.SUCCESS,
69
- title: formatMessage(messages.success),
70
- tabIndex: null
71
- }, {
72
- id: 'editor.panel.warning',
73
- type: 'button',
74
- icon: WarningIcon,
75
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
76
- selected: activePanelType === PanelType.WARNING,
77
- title: formatMessage(messages.warning),
78
- tabIndex: null
79
- }, {
80
- id: 'editor.panel.error',
81
- type: 'button',
82
- icon: ErrorIcon,
83
- onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
84
- selected: activePanelType === PanelType.ERROR,
85
- title: formatMessage(messages.error),
86
- tabIndex: null
87
- }];
88
- if (isCustomPanelEnabled) {
89
- const changeColor = color => (state, dispatch) => {
90
- const panelNode = findPanel(state);
91
- if (panelNode === undefined) {
92
- return false;
93
- }
94
- let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
95
- const emojiInfo = panelNode.node.attrs.panelType;
96
- const panelEmoji = panelIconMap[emojiInfo];
97
- const previousEmoji = panelEmoji ? {
98
- emoji: panelEmoji.shortName,
99
- emojiId: panelEmoji.id
100
- } : {};
101
- if (previousColor === color) {
102
- changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
103
- color,
104
- ...previousEmoji
105
- }, isCustomPanelEnabled)(state, dispatch);
106
- return false;
107
- }
108
- const payload = {
109
- action: ACTION.CHANGED_BACKGROUND_COLOR,
110
- actionSubject: ACTION_SUBJECT.PANEL,
111
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
112
- attributes: {
113
- newColor: color,
114
- previousColor: previousColor
115
- },
116
- eventType: EVENT_TYPE.TRACK
117
- };
118
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
119
- color,
120
- ...previousEmoji
121
- }, isCustomPanelEnabled))(state, dispatch);
122
- return false;
123
- };
124
- const changeEmoji = emoji => (state, dispatch) => {
125
- const panelNode = findPanel(state);
126
- if (panelNode === undefined) {
127
- return false;
128
- }
129
- let previousIcon = panelNode.node.attrs.panelIcon || '';
130
- if (previousIcon === emoji.shortName) {
131
- changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
132
- emoji: emoji.shortName,
133
- emojiId: emoji.id,
134
- emojiText: emoji.fallback
135
- }, true)(state, dispatch);
136
- return false;
137
- }
138
- const payload = {
139
- action: ACTION.CHANGED_ICON,
140
- actionSubject: ACTION_SUBJECT.PANEL,
141
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
142
- attributes: {
143
- newIcon: emoji.shortName,
144
- previousIcon: previousIcon
145
- },
146
- eventType: EVENT_TYPE.TRACK
147
- };
148
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
149
- emoji: emoji.shortName,
150
- emojiId: emoji.id,
151
- emojiText: emoji.fallback
152
- }, true))(state, dispatch);
153
- return false;
154
- };
155
- const removeEmoji = () => (state, dispatch) => {
156
- const panelNode = findPanel(state);
157
- if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
158
- return false;
159
- }
160
- if (panelNode === undefined) {
161
- return false;
162
- }
163
- const payload = {
164
- action: ACTION.REMOVE_ICON,
165
- actionSubject: ACTION_SUBJECT.PANEL,
166
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
167
- attributes: {
168
- icon: panelNode.node.attrs.panelIcon
169
- },
170
- eventType: EVENT_TYPE.TRACK
171
- };
172
- withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
173
- emoji: undefined,
174
- emojiId: undefined,
175
- emojiText: undefined
176
- }, isCustomPanelEnabled))(state, dispatch);
177
- return false;
178
- };
179
- const panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
180
- const defaultPalette = panelBackgroundPalette.find(item => item.value === panelColor) || {
181
- label: 'Custom',
182
- value: panelColor,
183
- border: DEFAULT_BORDER_COLOR
184
- };
185
- if (isCustomPanelEditable) {
186
- const colorPicker = {
187
- id: 'editor.panel.colorPicker',
188
- title: formatMessage(messages.backgroundColor),
189
- type: 'select',
190
- selectType: 'color',
191
- defaultValue: defaultPalette,
192
- options: panelBackgroundPalette,
193
- onChange: option => changeColor(option.value)
194
- };
195
- const emojiPicker = {
196
- id: 'editor.panel.emojiPicker',
197
- title: formatMessage(messages.emoji),
198
- type: 'select',
199
- selectType: 'emoji',
200
- options: [],
201
- selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
202
- onChange: emoji => changeEmoji(emoji)
203
- };
204
- const removeEmojiButton = {
205
- id: 'editor.panel.removeEmoji',
206
- type: 'button',
207
- icon: RemoveEmojiIcon,
208
- onClick: removeEmoji(),
209
- title: formatMessage(commonMessages.removeEmoji),
210
- disabled: activePanelIcon ? false : true
211
- };
212
- items.push(emojiPicker, removeEmojiButton, {
213
- type: 'separator'
214
- }, colorPicker);
215
- }
216
- }
217
- if (state) {
218
- items.push({
219
- type: 'copy-button',
220
- items: [{
221
- type: 'separator'
222
- }, {
223
- state,
224
- formatMessage,
225
- nodeType: panelNodeType
226
- }]
227
- });
228
- }
229
- items.push({
230
- type: 'separator'
231
- }, {
232
- id: 'editor.panel.delete',
233
- type: 'button',
234
- appearance: 'danger',
235
- focusEditoronEnter: true,
236
- icon: RemoveIcon,
237
- onClick: removePanel(editorAnalyticsAPI),
238
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
239
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
240
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
241
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
242
- title: formatMessage(commonMessages.remove),
243
- tabIndex: null
244
- });
245
- return items;
246
- };
247
- export const getToolbarConfig = (state, intl, options = {}, providerFactory, api) => {
248
- const {
249
- formatMessage
250
- } = intl;
251
- const panelObject = findPanel(state);
252
- if (panelObject) {
253
- var _api$analytics;
254
- const nodeType = state.schema.nodes.panel;
255
- const {
256
- panelType,
257
- panelColor,
258
- panelIcon
259
- } = panelObject.node.attrs;
260
- const isStandardPanel = panelType => {
261
- return panelType !== PanelType.CUSTOM ? panelType : undefined;
262
- };
263
-
264
- // force toolbar to be turned on
265
- 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);
266
- const getDomRef = editorView => {
267
- const domAtPos = editorView.domAtPos.bind(editorView);
268
- const element = findDomRefAtPos(panelObject.pos, domAtPos);
269
- return element;
270
- };
271
- return {
272
- title: 'Panel floating controls',
273
- getDomRef,
274
- nodeType,
275
- items,
276
- scrollable: true
277
- };
278
- }
279
- return;
280
- };