@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,2 +0,0 @@
1
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
- export const pluginKey = new PluginKey('panelPlugin');
@@ -1,48 +0,0 @@
1
- import { PanelType } from '@atlaskit/adf-schema';
2
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
3
- import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
4
- import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
5
- export const findPanel = (state, selection) => {
6
- const {
7
- panel
8
- } = state.schema.nodes;
9
- return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
10
- };
11
- export const panelAttrsToDom = (attrs, allowCustomPanel) => {
12
- const {
13
- panelColor,
14
- panelType,
15
- panelIcon,
16
- panelIconId,
17
- panelIconText
18
- } = attrs;
19
- const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
20
- const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
21
- const tokenColor = panelColor && hexToEditorBackgroundPaletteColor(panelColor);
22
- const panelBackgroundColor = tokenColor || panelColor;
23
- const style = [`${panelColor && isCustomPanel ? `background-color: ${panelBackgroundColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;'}`].join('');
24
- let panelAttrs = {
25
- class: PanelSharedCssClassName.prefix,
26
- 'data-panel-type': panelType || PanelType.INFO,
27
- style
28
- };
29
- if (panelColor && isCustomPanel) {
30
- panelAttrs = {
31
- ...panelAttrs,
32
- 'data-panel-color': panelColor,
33
- 'data-panel-icon-id': panelIconId,
34
- 'data-panel-icon-text': panelIconText
35
- };
36
- }
37
- const iconDiv = ['div', {
38
- class: PanelSharedCssClassName.icon
39
- }];
40
- const contentDiv = ['div', {
41
- class: PanelSharedCssClassName.content
42
- }, 0];
43
- if (hasIcon) {
44
- return ['div', panelAttrs, iconDiv, contentDiv];
45
- } else {
46
- return ['div', panelAttrs, contentDiv];
47
- }
48
- };
@@ -1,116 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- import { PanelType } from '@atlaskit/adf-schema';
5
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
- import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
7
- import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
8
- import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
9
- import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
10
- import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
11
- import { findPanel } from './utils';
12
- export var removePanel = function removePanel(editorAnalyticsAPI) {
13
- return function (state, dispatch) {
14
- var nodes = state.schema.nodes,
15
- tr = state.tr;
16
- var payload = {
17
- action: ACTION.DELETED,
18
- actionSubject: ACTION_SUBJECT.PANEL,
19
- attributes: {
20
- inputMethod: INPUT_METHOD.TOOLBAR
21
- },
22
- eventType: EVENT_TYPE.TRACK
23
- };
24
- var deleteTr = tr;
25
- if (findSelectedNodeOfType(nodes.panel)(tr.selection)) {
26
- deleteTr = removeSelectedNode(tr);
27
- } else if (findParentNodeOfType(nodes.panel)(tr.selection)) {
28
- deleteTr = removeParentNodeOfType(nodes.panel)(tr);
29
- }
30
- if (!deleteTr) {
31
- return false;
32
- }
33
- if (dispatch) {
34
- editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(deleteTr);
35
- dispatch(deleteTr);
36
- }
37
- return true;
38
- };
39
- };
40
- export var changePanelType = function changePanelType(editorAnalyticsAPI) {
41
- return function (panelType) {
42
- var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
43
- var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
44
- return function (state, dispatch) {
45
- var nodes = state.schema.nodes,
46
- tr = state.tr;
47
- var panelNode = findPanel(state);
48
- if (panelNode === undefined) {
49
- return false;
50
- }
51
- var newType = panelType;
52
- var previousType = panelNode.node.attrs.panelType;
53
- var newTr;
54
- if (allowCustomPanel) {
55
- var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
56
- var previousIcon = panelNode.node.attrs.panelIcon;
57
- var previousIconId = panelNode.node.attrs.panelIconId;
58
- var previousIconText = panelNode.node.attrs.panelIconText;
59
- var newPanelOptions = _objectSpread({
60
- color: previousColor,
61
- emoji: previousIcon,
62
- emojiId: previousIconId,
63
- emojiText: previousIconText
64
- }, panelOptions);
65
- newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
66
- panelIcon: newPanelOptions.emoji,
67
- panelIconId: newPanelOptions.emojiId,
68
- panelIconText: newPanelOptions.emojiText,
69
- panelColor: newPanelOptions.color,
70
- panelType: panelType
71
- });
72
- } else {
73
- newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
74
- panelType: panelType
75
- });
76
- }
77
- var payload = {
78
- action: ACTION.CHANGED_TYPE,
79
- actionSubject: ACTION_SUBJECT.PANEL,
80
- attributes: {
81
- newType: newType,
82
- previousType: previousType
83
- },
84
- eventType: EVENT_TYPE.TRACK
85
- };
86
-
87
- // Select the panel if it was previously selected
88
- var newTrWithSelection = state.selection instanceof NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
89
- editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
90
- newTrWithSelection.setMeta('scrollIntoView', false);
91
- if (dispatch) {
92
- dispatch(newTrWithSelection);
93
- }
94
- return true;
95
- };
96
- };
97
- };
98
- export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
99
- return withAnalytics(analyticsAPI, {
100
- action: ACTION.INSERTED,
101
- actionSubject: ACTION_SUBJECT.DOCUMENT,
102
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
103
- attributes: {
104
- inputMethod: inputMethod,
105
- panelType: PanelType.INFO // only info panels can be inserted via this action
106
- },
107
-
108
- eventType: EVENT_TYPE.TRACK
109
- })(function (state, dispatch) {
110
- var nodes = state.schema.nodes;
111
- if (nodes.panel && nodes.paragraph) {
112
- return wrapSelectionIn(nodes.panel)(state, dispatch);
113
- }
114
- return false;
115
- });
116
- }
@@ -1,209 +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
- var panelPlugin = function panelPlugin(_ref) {
14
- var _ref$config = _ref.config,
15
- options = _ref$config === void 0 ? {} : _ref$config,
16
- api = _ref.api;
17
- return {
18
- name: 'panel',
19
- nodes: function nodes() {
20
- var panelNode = panel(!!options.allowCustomPanel);
21
- return [{
22
- name: 'panel',
23
- node: panelNode
24
- }];
25
- },
26
- pmPlugins: function pmPlugins() {
27
- return [{
28
- name: 'panel',
29
- plugin: function plugin(_ref2) {
30
- var providerFactory = _ref2.providerFactory,
31
- dispatch = _ref2.dispatch;
32
- return createPlugin(dispatch, providerFactory, options);
33
- }
34
- }, {
35
- name: 'panelKeyMap',
36
- plugin: function plugin() {
37
- return keymap();
38
- }
39
- }];
40
- },
41
- actions: {
42
- insertPanel: function insertPanel(inputMethod) {
43
- var _api$analytics;
44
- return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
45
- }
46
- },
47
- pluginsOptions: {
48
- quickInsert: function quickInsert(_ref3) {
49
- var formatMessage = _ref3.formatMessage;
50
- var quickInsertOptions = [{
51
- id: 'infopanel',
52
- title: formatMessage(blockTypeMessages.infoPanel),
53
- keywords: ['panel'],
54
- description: formatMessage(blockTypeMessages.infoPanelDescription),
55
- priority: 800,
56
- icon: function icon() {
57
- return /*#__PURE__*/React.createElement(IconPanel, null);
58
- },
59
- action: function action(insert, state) {
60
- return createPanelAction({
61
- state: state,
62
- attributes: {
63
- panelType: PanelType.INFO
64
- },
65
- api: api
66
- });
67
- }
68
- }, {
69
- id: 'notepanel',
70
- title: formatMessage(blockTypeMessages.notePanel),
71
- description: formatMessage(blockTypeMessages.notePanelDescription),
72
- priority: 1000,
73
- icon: function icon() {
74
- return /*#__PURE__*/React.createElement(IconPanelNote, null);
75
- },
76
- action: function action(insert, state) {
77
- return createPanelAction({
78
- state: state,
79
- attributes: {
80
- panelType: PanelType.NOTE
81
- },
82
- api: api
83
- });
84
- }
85
- }, {
86
- id: 'successpanel',
87
- title: formatMessage(blockTypeMessages.successPanel),
88
- description: formatMessage(blockTypeMessages.successPanelDescription),
89
- keywords: ['tip'],
90
- priority: 1000,
91
- icon: function icon() {
92
- return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
93
- },
94
- action: function action(insert, state) {
95
- return createPanelAction({
96
- state: state,
97
- attributes: {
98
- panelType: PanelType.SUCCESS
99
- },
100
- api: api
101
- });
102
- }
103
- }, {
104
- id: 'warningpanel',
105
- title: formatMessage(blockTypeMessages.warningPanel),
106
- description: formatMessage(blockTypeMessages.warningPanelDescription),
107
- priority: 1000,
108
- icon: function icon() {
109
- return /*#__PURE__*/React.createElement(IconPanelWarning, null);
110
- },
111
- action: function action(insert, state) {
112
- return createPanelAction({
113
- state: state,
114
- attributes: {
115
- panelType: PanelType.WARNING
116
- },
117
- api: api
118
- });
119
- }
120
- }, {
121
- id: 'errorpanel',
122
- title: formatMessage(blockTypeMessages.errorPanel),
123
- description: formatMessage(blockTypeMessages.errorPanelDescription),
124
- priority: 1000,
125
- icon: function icon() {
126
- return /*#__PURE__*/React.createElement(IconPanelError, null);
127
- },
128
- action: function action(insert, state) {
129
- return createPanelAction({
130
- state: state,
131
- attributes: {
132
- panelType: PanelType.ERROR
133
- },
134
- api: api
135
- });
136
- }
137
- }];
138
- if (options.allowCustomPanel && options.allowCustomPanelEdit) {
139
- quickInsertOptions.push({
140
- id: 'custompanel',
141
- title: formatMessage(blockTypeMessages.customPanel),
142
- description: formatMessage(blockTypeMessages.customPanelDescription),
143
- priority: 1000,
144
- icon: function icon() {
145
- return /*#__PURE__*/React.createElement(IconCustomPanel, null);
146
- },
147
- action: function action(insert, state) {
148
- return createPanelAction({
149
- state: state,
150
- attributes: {
151
- panelType: PanelType.CUSTOM,
152
- panelIcon: ':rainbow:',
153
- panelIconId: '1f308',
154
- panelIconText: '🌈',
155
- // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
156
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
157
- panelColor: T50
158
- },
159
- api: api
160
- });
161
- }
162
- });
163
- }
164
- return quickInsertOptions;
165
- },
166
- floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
167
- return getToolbarConfig(state, intl, options, providerFactory, api);
168
- }
169
- }
170
- };
171
- };
172
-
173
- /**
174
- * Creates panel action and wrap selection transaction with analytics for the panel insertion.
175
- *
176
- * @example
177
- * const tr = createPanelAction({
178
- * state: editorState,
179
- * attributes: { panelType: 'info' },
180
- * });
181
- * if (tr) {
182
- * applyTransaction(tr);
183
- * }
184
- */
185
- function createPanelAction(_ref4) {
186
- var state = _ref4.state,
187
- attributes = _ref4.attributes,
188
- api = _ref4.api;
189
- var tr = createWrapSelectionTransaction({
190
- state: state,
191
- type: state.schema.nodes.panel,
192
- nodeAttributes: attributes
193
- });
194
- if (tr) {
195
- var _api$analytics2;
196
- api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
197
- action: ACTION.INSERTED,
198
- actionSubject: ACTION_SUBJECT.DOCUMENT,
199
- actionSubjectId: ACTION_SUBJECT_ID.PANEL,
200
- attributes: {
201
- inputMethod: INPUT_METHOD.QUICK_INSERT,
202
- panelType: attributes.panelType
203
- },
204
- eventType: EVENT_TYPE.TRACK
205
- })(tr);
206
- }
207
- return tr;
208
- }
209
- export default panelPlugin;
@@ -1,38 +0,0 @@
1
- import { defineMessages } from 'react-intl-next';
2
- export var 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,87 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import React from 'react';
4
- import ReactDOM from 'react-dom';
5
- import { PanelType } from '@atlaskit/adf-schema';
6
- import { Emoji } from '@atlaskit/editor-common/emoji';
7
- import { PanelErrorIcon, PanelInfoIcon, PanelNoteIcon, PanelSuccessIcon, PanelWarningIcon } from '@atlaskit/editor-common/icons';
8
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
9
- import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
10
- import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
11
- import TipIcon from '@atlaskit/icon/glyph/editor/hint';
12
- import { panelAttrsToDom } from '../utils';
13
- export var panelIcons = {
14
- info: PanelInfoIcon,
15
- success: PanelSuccessIcon,
16
- note: PanelNoteIcon,
17
- tip: TipIcon,
18
- warning: PanelWarningIcon,
19
- error: PanelErrorIcon,
20
- custom: PanelInfoIcon
21
- };
22
- export var PanelIcon = function PanelIcon(props) {
23
- var allowCustomPanel = props.allowCustomPanel,
24
- providerFactory = props.providerFactory,
25
- _props$panelAttribute = props.panelAttributes,
26
- panelType = _props$panelAttribute.panelType,
27
- panelIcon = _props$panelAttribute.panelIcon,
28
- panelIconId = _props$panelAttribute.panelIconId,
29
- panelIconText = _props$panelAttribute.panelIconText;
30
- if (allowCustomPanel && panelIcon && panelType === PanelType.CUSTOM) {
31
- return /*#__PURE__*/React.createElement(Emoji, {
32
- providers: providerFactory,
33
- shortName: panelIcon,
34
- id: panelIconId,
35
- fallback: panelIconText,
36
- showTooltip: false,
37
- allowTextFallback: false,
38
- fitToHeight: akEditorCustomIconSize
39
- });
40
- }
41
- var Icon = panelIcons[panelType];
42
- return /*#__PURE__*/React.createElement(Icon, {
43
- label: "Panel ".concat(panelType)
44
- });
45
- };
46
- var PanelNodeView = /*#__PURE__*/function () {
47
- function PanelNodeView(node, view, getPos, pluginOptions, providerFactory) {
48
- _classCallCheck(this, PanelNodeView);
49
- this.providerFactory = providerFactory;
50
- this.pluginOptions = pluginOptions;
51
- this.view = view;
52
- this.node = node;
53
- var _DOMSerializer$render = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.allowCustomPanel || false)),
54
- dom = _DOMSerializer$render.dom,
55
- contentDOM = _DOMSerializer$render.contentDOM;
56
- this.getPos = getPos;
57
- this.dom = dom;
58
- this.contentDOM = contentDOM;
59
- this.icon = this.dom.querySelector(".".concat(PanelSharedCssClassName.icon));
60
- if (!this.icon) {
61
- return;
62
- }
63
- // set contentEditable as false to be able to select the custom panels with keyboard
64
- this.icon.contentEditable = 'false';
65
- ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
66
- allowCustomPanel: pluginOptions.allowCustomPanel,
67
- panelAttributes: node.attrs,
68
- providerFactory: this.providerFactory
69
- }), this.icon);
70
- }
71
- _createClass(PanelNodeView, [{
72
- key: "ignoreMutation",
73
- value: function ignoreMutation(mutation) {
74
- // ignore mutation if it caused by the icon.
75
- var isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon;
76
- // ignore mutation if it caused by the lazy load emoji inside icon.
77
- var isInsideIcon = this.icon.contains(mutation.target);
78
- return isIcon || isInsideIcon;
79
- }
80
- }]);
81
- return PanelNodeView;
82
- }();
83
- export var getPanelNodeView = function getPanelNodeView(pluginOptions, providerFactory) {
84
- return function (node, view, getPos) {
85
- return new PanelNodeView(node, view, getPos, pluginOptions, providerFactory);
86
- };
87
- };
@@ -1,74 +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
- var parentPosition = findParentNodeOfType(nodeType)(selection);
6
- if (parentPosition) {
7
- return parentPosition.node;
8
- }
9
- return null;
10
- }
11
- function isInsideAnEmptyNode(selection, nodeType, schema) {
12
- var 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
- var deleteCurrentItem = function deleteCurrentItem($from, tr) {
19
- return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
20
- };
21
- var keymaps = {
22
- Backspace: function Backspace(state, dispatch) {
23
- var _nodeBeforePanel$type;
24
- var selection = state.selection,
25
- nodes = state.schema.nodes,
26
- tr = state.tr;
27
- var panel = nodes.panel,
28
- blockquote = nodes.blockquote;
29
- var $from = selection.$from,
30
- $to = selection.$to;
31
- // Don't do anything if selection is a range
32
- if ($from.pos !== $to.pos) {
33
- return false;
34
- }
35
-
36
- // If not at the start of a panel, no joining will happen so allow default behaviour (backspacing characters etc..)
37
- if ($from.parentOffset !== 0) {
38
- return false;
39
- }
40
- var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
41
- var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
42
- var parentNodeType = $from.parent.type;
43
- var isPreviousNodeAPanel = previousNodeType === panel;
44
- var isParentNodeAPanel = parentNodeType === panel;
45
- var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
46
-
47
- // Stops merging panels when deleting empty paragraph in between
48
- // Stops merging blockquotes with panels when deleting from start of blockquote
49
-
50
- if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) ||
51
- // Lift line of panel content up and out of the panel, when backspacing
52
- // at the start of a panel, if the node before the panel is an 'isolating' node
53
- // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
54
- // behaviour will fallback to 'select node backward' logic because the node
55
- // before is an isolating node.
56
- nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && hasParentNodeOfType(panel)(selection)) {
57
- var content = $from.node($from.depth).content;
58
- var insertPos = $previousPos.pos;
59
- deleteCurrentItem($from, tr).insert(insertPos, content);
60
- if (dispatch) {
61
- dispatch(setTextSelection(insertPos)(tr).scrollIntoView());
62
- }
63
- return true;
64
- }
65
- var nodeType = $from.node().type;
66
- if (nodeType !== panel) {
67
- return false;
68
- }
69
- return true;
70
- }
71
- };
72
- return keymap(keymaps);
73
- }
74
- export default keymapPlugin;
@@ -1,22 +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 var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
7
- var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
8
- useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
9
- return new SafePlugin({
10
- key: pluginKey,
11
- props: {
12
- nodeViews: {
13
- panel: getPanelNodeView(pluginOptions, providerFactory)
14
- },
15
- handleClickOn: createSelectionClickHandler(['panel'], function (target) {
16
- return !!target.closest(".".concat(PanelSharedCssClassName.prefix));
17
- }, {
18
- useLongPressSelection: useLongPressSelection
19
- })
20
- }
21
- });
22
- };