@atlaskit/editor-plugin-insert-block 1.9.2 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/assets/expand.js +4 -3
- package/dist/cjs/assets/switch.js +15 -19
- package/dist/cjs/plugin.js +22 -6
- package/dist/cjs/ui/ToolbarInsertBlock/dropdown-button.js +9 -23
- package/dist/cjs/ui/ToolbarInsertBlock/item.js +23 -36
- package/dist/cjs/ui/transformOptions.js +5 -1
- package/dist/es2019/assets/expand.js +5 -3
- package/dist/es2019/assets/switch.js +14 -19
- package/dist/es2019/plugin.js +24 -10
- package/dist/es2019/ui/ToolbarInsertBlock/dropdown-button.js +7 -21
- package/dist/es2019/ui/ToolbarInsertBlock/item.js +20 -33
- package/dist/es2019/ui/transformOptions.js +5 -1
- package/dist/esm/assets/expand.js +4 -3
- package/dist/esm/assets/switch.js +14 -19
- package/dist/esm/plugin.js +22 -6
- package/dist/esm/ui/ToolbarInsertBlock/dropdown-button.js +7 -21
- package/dist/esm/ui/ToolbarInsertBlock/item.js +20 -33
- package/dist/esm/ui/transformOptions.js +5 -1
- package/dist/types/assets/expand.d.ts +3 -1
- package/dist/types/assets/switch.d.ts +6 -2
- package/dist/types/ui/transformOptions.d.ts +4 -1
- package/dist/types-ts4.5/assets/expand.d.ts +3 -1
- package/dist/types-ts4.5/assets/switch.d.ts +6 -2
- package/dist/types-ts4.5/ui/transformOptions.d.ts +4 -1
- package/package.json +4 -10
|
@@ -14,32 +14,19 @@ import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
|
|
|
14
14
|
import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
|
|
15
15
|
import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
|
|
16
16
|
import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
|
|
17
|
+
import GridIcon from '@atlaskit/icon/core/migration/grid--editor-table';
|
|
17
18
|
import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
|
|
18
19
|
import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
|
|
19
20
|
import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
|
|
20
21
|
import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
|
|
21
22
|
import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
|
|
22
23
|
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
|
|
23
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
24
|
-
import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
|
|
25
|
-
import CodeIcon from '@atlaskit/icon/glyph/editor/code';
|
|
26
|
-
import DateIcon from '@atlaskit/icon/glyph/editor/date';
|
|
27
|
-
import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
|
|
28
|
-
import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
|
|
29
24
|
import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
|
|
30
|
-
import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
|
|
31
|
-
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
|
|
32
25
|
import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
|
|
33
|
-
import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
|
|
34
|
-
import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
|
|
35
|
-
import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
|
|
36
|
-
import TableIcon from '@atlaskit/icon/glyph/editor/table';
|
|
37
|
-
import TaskIcon from '@atlaskit/icon/glyph/editor/task';
|
|
38
26
|
import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
|
|
39
|
-
import QuoteIcon from '@atlaskit/icon/glyph/quote';
|
|
40
27
|
import StatusIcon from '@atlaskit/icon/glyph/status';
|
|
41
28
|
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
42
|
-
import
|
|
29
|
+
import ExpandNodeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle';
|
|
43
30
|
import { shallowEquals } from './shallow-equals';
|
|
44
31
|
const from = init => ({
|
|
45
32
|
content: init.content,
|
|
@@ -48,7 +35,9 @@ const from = init => ({
|
|
|
48
35
|
name: init.name
|
|
49
36
|
},
|
|
50
37
|
elemBefore: jsx(init.Icon, {
|
|
51
|
-
label: ""
|
|
38
|
+
label: "",
|
|
39
|
+
color: "currentColor",
|
|
40
|
+
spacing: "spacious"
|
|
52
41
|
}),
|
|
53
42
|
elemAfter: init.shortcut ?
|
|
54
43
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -69,7 +58,7 @@ export const action = mem(init => {
|
|
|
69
58
|
disabled: init.disabled,
|
|
70
59
|
name: 'action',
|
|
71
60
|
shortcut: '[]',
|
|
72
|
-
Icon:
|
|
61
|
+
Icon: CheckboxCheckedIcon,
|
|
73
62
|
'aria-keyshortcuts': '[ ] Space'
|
|
74
63
|
});
|
|
75
64
|
});
|
|
@@ -79,7 +68,7 @@ export const link = mem(init => from({
|
|
|
79
68
|
disabled: init.disabled,
|
|
80
69
|
name: 'link',
|
|
81
70
|
shortcut: tooltip(addLink),
|
|
82
|
-
Icon:
|
|
71
|
+
Icon: LinkIcon,
|
|
83
72
|
'aria-haspopup': init['aria-haspopup'],
|
|
84
73
|
'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
|
|
85
74
|
}));
|
|
@@ -88,21 +77,21 @@ export const media = mem(init => from({
|
|
|
88
77
|
tooltipDescription: init.tooltipDescription,
|
|
89
78
|
disabled: init.disabled,
|
|
90
79
|
name: 'media',
|
|
91
|
-
Icon:
|
|
80
|
+
Icon: ImageIcon
|
|
92
81
|
}));
|
|
93
82
|
export const imageUpload = mem(init => from({
|
|
94
83
|
content: init.content,
|
|
95
84
|
tooltipDescription: init.tooltipDescription,
|
|
96
85
|
disabled: init.disabled,
|
|
97
86
|
name: 'image upload',
|
|
98
|
-
Icon:
|
|
87
|
+
Icon: ImageIcon
|
|
99
88
|
}));
|
|
100
89
|
export const mention = mem(init => from({
|
|
101
90
|
content: init.content,
|
|
102
91
|
tooltipDescription: init.tooltipDescription,
|
|
103
92
|
disabled: init.disabled,
|
|
104
93
|
name: 'mention',
|
|
105
|
-
Icon:
|
|
94
|
+
Icon: MentionIcon,
|
|
106
95
|
shortcut: '@',
|
|
107
96
|
'aria-haspopup': init['aria-haspopup'],
|
|
108
97
|
'aria-keyshortcuts': 'Shift+2 Space'
|
|
@@ -112,7 +101,7 @@ export const emoji = mem(init => from({
|
|
|
112
101
|
tooltipDescription: init.tooltipDescription,
|
|
113
102
|
disabled: init.disabled,
|
|
114
103
|
name: 'emoji',
|
|
115
|
-
Icon:
|
|
104
|
+
Icon: EmojiIcon,
|
|
116
105
|
shortcut: ':',
|
|
117
106
|
'aria-haspopup': init['aria-haspopup'],
|
|
118
107
|
'aria-keyshortcuts': 'Shift+;'
|
|
@@ -122,7 +111,7 @@ export const table = mem(init => from({
|
|
|
122
111
|
tooltipDescription: init.tooltipDescription,
|
|
123
112
|
disabled: init.disabled,
|
|
124
113
|
name: 'table',
|
|
125
|
-
Icon:
|
|
114
|
+
Icon: GridIcon,
|
|
126
115
|
shortcut: tooltip(toggleTable),
|
|
127
116
|
'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
|
|
128
117
|
}));
|
|
@@ -131,10 +120,10 @@ export const tableSelector = mem(init => from({
|
|
|
131
120
|
tooltipDescription: init.tooltipDescription,
|
|
132
121
|
disabled: init.disabled,
|
|
133
122
|
name: 'table selector',
|
|
134
|
-
Icon:
|
|
123
|
+
Icon: () => jsx(ChevronDownIcon, {
|
|
135
124
|
label: "",
|
|
136
125
|
color: "currentColor"
|
|
137
|
-
})
|
|
126
|
+
})
|
|
138
127
|
}));
|
|
139
128
|
export const layout = mem(init => from({
|
|
140
129
|
content: init.content,
|
|
@@ -148,7 +137,7 @@ export const codeblock = mem(init => from({
|
|
|
148
137
|
tooltipDescription: init.tooltipDescription,
|
|
149
138
|
disabled: init.disabled,
|
|
150
139
|
name: 'codeblock',
|
|
151
|
-
Icon:
|
|
140
|
+
Icon: AngleBracketsIcon,
|
|
152
141
|
shortcut: init.shortcut,
|
|
153
142
|
'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
|
|
154
143
|
}));
|
|
@@ -157,7 +146,7 @@ export const panel = mem(init => from({
|
|
|
157
146
|
tooltipDescription: init.tooltipDescription,
|
|
158
147
|
disabled: init.disabled,
|
|
159
148
|
name: 'panel',
|
|
160
|
-
Icon:
|
|
149
|
+
Icon: InformationIcon,
|
|
161
150
|
shortcut: init.shortcut,
|
|
162
151
|
'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
|
|
163
152
|
}));
|
|
@@ -166,7 +155,7 @@ export const blockquote = mem(init => from({
|
|
|
166
155
|
tooltipDescription: init.tooltipDescription,
|
|
167
156
|
disabled: init.disabled,
|
|
168
157
|
name: 'blockquote',
|
|
169
|
-
Icon:
|
|
158
|
+
Icon: QuotationMarkIcon,
|
|
170
159
|
shortcut: init.shortcut,
|
|
171
160
|
'aria-keyshortcuts': 'Shift+. Space'
|
|
172
161
|
}));
|
|
@@ -175,7 +164,7 @@ export const decision = mem(init => from({
|
|
|
175
164
|
tooltipDescription: init.tooltipDescription,
|
|
176
165
|
disabled: init.disabled,
|
|
177
166
|
name: 'decision',
|
|
178
|
-
Icon:
|
|
167
|
+
Icon: DecisionIcon,
|
|
179
168
|
shortcut: '<>',
|
|
180
169
|
'aria-keyshortcuts': 'Shift+, Shift+. Space'
|
|
181
170
|
}));
|
|
@@ -200,7 +189,7 @@ export const date = mem(init => from({
|
|
|
200
189
|
tooltipDescription: init.tooltipDescription,
|
|
201
190
|
disabled: init.disabled,
|
|
202
191
|
name: 'date',
|
|
203
|
-
Icon:
|
|
192
|
+
Icon: CalendarIcon,
|
|
204
193
|
shortcut: '//',
|
|
205
194
|
'aria-keyshortcuts': '/ / Enter'
|
|
206
195
|
}));
|
|
@@ -225,10 +214,8 @@ export const more = mem(init => from({
|
|
|
225
214
|
tooltipDescription: init.tooltipDescription,
|
|
226
215
|
disabled: init.disabled,
|
|
227
216
|
name: 'macro',
|
|
228
|
-
Icon: () =>
|
|
217
|
+
Icon: () => jsx(ShowMoreHorizontalIcon, {
|
|
229
218
|
label: "",
|
|
230
219
|
color: "currentColor"
|
|
231
|
-
}) : jsx(EditorMoreIcon, {
|
|
232
|
-
label: ""
|
|
233
220
|
})
|
|
234
221
|
}));
|
|
@@ -3,21 +3,25 @@ import EditorCodeIcon from '@atlaskit/icon/glyph/editor/code';
|
|
|
3
3
|
import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
|
|
4
4
|
import QuoteIcon from '@atlaskit/icon/glyph/quote';
|
|
5
5
|
import ExpandIcon from '../assets/expand';
|
|
6
|
-
export const transformationOptions = api => {
|
|
6
|
+
export const transformationOptions = (api, schema) => {
|
|
7
7
|
var _api$panel, _api$expand, _api$codeBlock, _api$blockType;
|
|
8
8
|
return [{
|
|
9
|
+
type: schema.nodes.panel,
|
|
9
10
|
title: messages.panel,
|
|
10
11
|
icon: EditorInfoIcon,
|
|
11
12
|
command: api === null || api === void 0 ? void 0 : (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel
|
|
12
13
|
}, {
|
|
14
|
+
type: schema.nodes.expand,
|
|
13
15
|
title: toolbarMessages.expand,
|
|
14
16
|
icon: ExpandIcon,
|
|
15
17
|
command: api === null || api === void 0 ? void 0 : (_api$expand = api.expand) === null || _api$expand === void 0 ? void 0 : _api$expand.actions.insertExpandWithInputMethod
|
|
16
18
|
}, {
|
|
19
|
+
type: schema.nodes.codeBlock,
|
|
17
20
|
title: messages.codeblock,
|
|
18
21
|
icon: EditorCodeIcon,
|
|
19
22
|
command: api === null || api === void 0 ? void 0 : (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock
|
|
20
23
|
}, {
|
|
24
|
+
type: schema.nodes.blockquote,
|
|
21
25
|
title: messages.blockquote,
|
|
22
26
|
icon: QuoteIcon,
|
|
23
27
|
command: api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : _api$blockType.actions.insertBlockQuote
|
|
@@ -11,7 +11,8 @@ var iconContainer = css({
|
|
|
11
11
|
width: '24px',
|
|
12
12
|
height: '24px'
|
|
13
13
|
});
|
|
14
|
-
export default function ExpandIcon() {
|
|
14
|
+
export default function ExpandIcon(_ref) {
|
|
15
|
+
var disabled = _ref.disabled;
|
|
15
16
|
return jsx("span", {
|
|
16
17
|
css: iconContainer
|
|
17
18
|
}, jsx("svg", {
|
|
@@ -22,11 +23,11 @@ export default function ExpandIcon() {
|
|
|
22
23
|
fill: "none"
|
|
23
24
|
}, jsx("path", {
|
|
24
25
|
d: "M2 2V14H16V2H2ZM2 0H16C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V14C18 14.5304 17.7893 15.0391 17.4142 15.4142C17.0391 15.7893 16.5304 16 16 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0Z",
|
|
25
|
-
fill: "var(--ds-icon, #44546F)"
|
|
26
|
+
fill: disabled ? "var(--ds-icon-disabled, #B3B9C4)" : "var(--ds-icon, #44546F)"
|
|
26
27
|
}), jsx("path", {
|
|
27
28
|
fillRule: "evenodd",
|
|
28
29
|
clipRule: "evenodd",
|
|
29
30
|
d: "M5.29158 6.29294C5.10477 6.48183 5 6.73678 5 7.00244C5 7.2681 5.10477 7.52305 5.29158 7.71194L8.23058 10.6769C8.44858 10.8919 8.73058 10.9989 9.00958 10.9989C9.28858 10.9989 9.56558 10.8919 9.77858 10.6769L12.7086 7.72194C12.8951 7.53292 12.9998 7.27803 12.9998 7.01244C12.9998 6.74686 12.8951 6.49196 12.7086 6.30294C12.6167 6.20976 12.5073 6.13576 12.3866 6.08525C12.2659 6.03474 12.1364 6.00873 12.0056 6.00873C11.8748 6.00873 11.7452 6.03474 11.6245 6.08525C11.5039 6.13576 11.3944 6.20976 11.3026 6.30294L9.00458 8.61994L6.69758 6.29294C6.60554 6.20012 6.49604 6.12644 6.37538 6.07617C6.25472 6.02589 6.1253 6 5.99458 6C5.86386 6 5.73444 6.02589 5.61378 6.07617C5.49312 6.12644 5.38362 6.20012 5.29158 6.29294Z",
|
|
30
|
-
fill: "var(--ds-icon, #44546F)"
|
|
31
|
+
fill: disabled ? "var(--ds-icon-disabled, #B3B9C4)" : "var(--ds-icon, #44546F)"
|
|
31
32
|
})));
|
|
32
33
|
}
|
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
7
|
+
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import RefreshIcon from '@atlaskit/icon/glyph/refresh';
|
|
9
|
+
var iconStyle = css({
|
|
10
|
+
transform: 'rotate(-90deg)'
|
|
11
|
+
});
|
|
3
12
|
export default function SwitchIcon() {
|
|
4
|
-
return
|
|
13
|
+
return jsx("span", {
|
|
14
|
+
css: iconStyle
|
|
15
|
+
}, jsx(RefreshIcon, {
|
|
5
16
|
label: ""
|
|
6
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
7
|
-
d: "M6.003 16H8.998C9.26322 16 9.51757 15.8947 9.70511 15.7071C9.89264 15.5196 9.998 15.2652 9.998 15C9.998 14.7348 9.89264 14.4805 9.70511 14.2929C9.51757 14.1054 9.26322 14 8.998 14H5.102C4.494 14 4 14.493 4 15.1V19C4 19.2656 4.10551 19.5204 4.29333 19.7082C4.48115 19.896 4.73589 20.0015 5.0015 20.0015C5.26711 20.0015 5.52185 19.896 5.70967 19.7082C5.89748 19.5204 6.003 19.2656 6.003 19V16Z",
|
|
8
|
-
fill: "var(--ds-icon, #44546F)"
|
|
9
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
10
|
-
d: "M18.018 14.572C16.989 16.649 14.807 18 12.37 18C10.104 18 8.051 16.833 6.945 14.98C6.659 14.5 6.023 14.334 5.524 14.609C5.40677 14.6709 5.30331 14.7559 5.21991 14.8589C5.13651 14.9619 5.0749 15.0808 5.0388 15.2083C5.00271 15.3359 4.99289 15.4694 5.00994 15.6009C5.027 15.7323 5.07056 15.8589 5.138 15.973C6.611 18.443 9.35 20 12.37 20C15.618 20 18.528 18.198 19.899 15.43C20.146 14.932 19.925 14.335 19.406 14.098C18.886 13.861 18.265 14.073 18.018 14.572Z",
|
|
11
|
-
fill: "var(--ds-icon, #44546F)"
|
|
12
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
13
|
-
fillRule: "evenodd",
|
|
14
|
-
clipRule: "evenodd",
|
|
15
|
-
d: "M15.002 10L18.898 10C19.506 10 20 9.50703 20 8.90003V5.00003C20 4.73441 19.8945 4.47968 19.7067 4.29186C19.5188 4.10404 19.2641 3.99853 18.9985 3.99853C18.7329 3.99853 18.4782 4.10404 18.2903 4.29186C18.1025 4.47968 17.997 4.73441 17.997 5.00003V8.00003H15.002C14.7368 8.00003 14.4824 8.10538 14.2949 8.29292C14.1074 8.48046 14.002 8.73481 14.002 9.00003C14.002 9.26524 14.1074 9.5196 14.2949 9.70713C14.4824 9.89467 14.7368 10 15.002 10Z",
|
|
16
|
-
fill: "var(--ds-icon, #44546F)"
|
|
17
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
18
|
-
fillRule: "evenodd",
|
|
19
|
-
clipRule: "evenodd",
|
|
20
|
-
d: "M4.596 9.90303C5.116 10.14 5.736 9.92803 5.983 9.42903C7.012 7.35203 9.193 6.00103 11.63 6.00103C13.896 6.00103 15.95 7.16803 17.055 9.02203C17.1988 9.25438 17.4265 9.42245 17.6909 9.49135C17.9553 9.56024 18.2361 9.52468 18.475 9.39203C18.975 9.11803 19.148 8.50703 18.862 8.02803C17.389 5.55803 14.65 4.00103 11.63 4.00103C8.382 4.00103 5.472 5.80303 4.102 8.57103C4.03537 8.70353 4.00045 8.84971 4 8.99803C4.00188 9.1902 4.05909 9.37775 4.16479 9.53825C4.27049 9.69875 4.4202 9.8254 4.596 9.90303Z",
|
|
21
|
-
fill: "var(--ds-icon, #44546F)"
|
|
22
17
|
}));
|
|
23
18
|
}
|
package/dist/esm/plugin.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React, { useLayoutEffect } from 'react';
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
|
|
4
5
|
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
6
7
|
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
8
|
+
import { getWrappingOptions } from '@atlaskit/editor-common/utils';
|
|
7
9
|
import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
|
|
8
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
11
|
import SwitchIcon from './assets/switch';
|
|
@@ -116,10 +118,8 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
116
118
|
// Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3931754727/Experiment+Elements+Basic+Text+Transformations
|
|
117
119
|
selectionToolbar: function selectionToolbar(state, intl) {
|
|
118
120
|
var _api$featureFlags;
|
|
119
|
-
var
|
|
120
|
-
|
|
121
|
-
// basicTextTransformations is used to present AI enablement status to avoid adding editor props
|
|
122
|
-
(api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 || (_api$featureFlags = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.basicTextTransformations) && $from.depth === 1;
|
|
121
|
+
var isEligible = // basicTextTransformations is used to present AI enablement status to avoid adding editor props
|
|
122
|
+
api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 || (_api$featureFlags = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.basicTextTransformations;
|
|
123
123
|
if (!isEligible) {
|
|
124
124
|
return;
|
|
125
125
|
}
|
|
@@ -127,13 +127,29 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
127
127
|
exposure: true
|
|
128
128
|
})) {
|
|
129
129
|
var formatMessage = intl.formatMessage;
|
|
130
|
-
var _options = transformationOptions(api).map(function (option) {
|
|
130
|
+
var _options = transformationOptions(api, state.schema).map(function (option) {
|
|
131
|
+
var canWrap;
|
|
132
|
+
if (option.type.name === 'codeBlock') {
|
|
133
|
+
var _$from$node;
|
|
134
|
+
var $from = state.selection.$from;
|
|
135
|
+
var grandParentNodeType = (_$from$node = $from.node(-1)) === null || _$from$node === void 0 ? void 0 : _$from$node.type;
|
|
136
|
+
var parentNodeType = $from.parent.type;
|
|
137
|
+
canWrap = shouldSplitSelectedNodeOnNodeInsertion({
|
|
138
|
+
parentNodeType: parentNodeType,
|
|
139
|
+
grandParentNodeType: grandParentNodeType,
|
|
140
|
+
content: option.type.createAndFill()
|
|
141
|
+
}) && contentAllowedInCodeBlock(state);
|
|
142
|
+
} else {
|
|
143
|
+
canWrap = !!getWrappingOptions(state, option.type).wrapping;
|
|
144
|
+
}
|
|
131
145
|
var IconBefore = option.icon;
|
|
132
146
|
return {
|
|
133
147
|
title: formatMessage(option.title),
|
|
134
148
|
icon: /*#__PURE__*/React.createElement(IconBefore, {
|
|
135
|
-
label: ""
|
|
149
|
+
label: "",
|
|
150
|
+
disabled: !canWrap
|
|
136
151
|
}),
|
|
152
|
+
disabled: !canWrap,
|
|
137
153
|
onClick: function onClick(state, dispatch) {
|
|
138
154
|
var _option$command;
|
|
139
155
|
(_option$command = option.command) === null || _option$command === void 0 || _option$command.call(option, INPUT_METHOD.FLOATING_TB)(state, dispatch);
|
|
@@ -7,37 +7,23 @@ import React from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
9
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
10
|
-
import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
|
|
11
10
|
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
12
11
|
import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
|
|
13
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
14
|
-
import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
|
|
15
12
|
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
16
|
-
import {
|
|
17
|
-
import { expandWrapperStyle, triggerWrapper } from './styles';
|
|
13
|
+
import { triggerWrapper } from './styles';
|
|
18
14
|
var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
|
|
19
15
|
return (
|
|
20
16
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
21
17
|
jsx("span", {
|
|
22
18
|
css: triggerWrapper
|
|
23
|
-
},
|
|
19
|
+
}, jsx(AddIcon, {
|
|
24
20
|
label: props.label,
|
|
25
|
-
color: "currentColor"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}), fg('platform_editor_migration_icon_and_typography') ?
|
|
29
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
30
|
-
jsx("span", {
|
|
31
|
-
css: expandWrapperStyle
|
|
32
|
-
}, jsx(ChevronDownIcon, {
|
|
21
|
+
color: "currentColor",
|
|
22
|
+
spacing: "spacious"
|
|
23
|
+
}), jsx("span", null, jsx(ChevronDownIcon, {
|
|
33
24
|
label: "",
|
|
34
|
-
color: "currentColor"
|
|
35
|
-
|
|
36
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
37
|
-
jsx("span", {
|
|
38
|
-
css: expandIconWrapperStyle
|
|
39
|
-
}, jsx(ExpandIcon, {
|
|
40
|
-
label: ""
|
|
25
|
+
color: "currentColor",
|
|
26
|
+
LEGACY_margin: "0 0 0 -8px"
|
|
41
27
|
})))
|
|
42
28
|
);
|
|
43
29
|
});
|
|
@@ -14,32 +14,19 @@ import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
|
|
|
14
14
|
import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
|
|
15
15
|
import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
|
|
16
16
|
import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
|
|
17
|
+
import GridIcon from '@atlaskit/icon/core/migration/grid--editor-table';
|
|
17
18
|
import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
|
|
18
19
|
import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
|
|
19
20
|
import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
|
|
20
21
|
import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
|
|
21
22
|
import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
|
|
22
23
|
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
|
|
23
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
24
|
-
import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
|
|
25
|
-
import CodeIcon from '@atlaskit/icon/glyph/editor/code';
|
|
26
|
-
import DateIcon from '@atlaskit/icon/glyph/editor/date';
|
|
27
|
-
import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
|
|
28
|
-
import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
|
|
29
24
|
import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
|
|
30
|
-
import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
|
|
31
|
-
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
|
|
32
25
|
import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
|
|
33
|
-
import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
|
|
34
|
-
import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
|
|
35
|
-
import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
|
|
36
|
-
import TableIcon from '@atlaskit/icon/glyph/editor/table';
|
|
37
|
-
import TaskIcon from '@atlaskit/icon/glyph/editor/task';
|
|
38
26
|
import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
|
|
39
|
-
import QuoteIcon from '@atlaskit/icon/glyph/quote';
|
|
40
27
|
import StatusIcon from '@atlaskit/icon/glyph/status';
|
|
41
28
|
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
42
|
-
import
|
|
29
|
+
import ExpandNodeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle';
|
|
43
30
|
import { shallowEquals } from './shallow-equals';
|
|
44
31
|
var from = function from(init) {
|
|
45
32
|
return {
|
|
@@ -49,7 +36,9 @@ var from = function from(init) {
|
|
|
49
36
|
name: init.name
|
|
50
37
|
},
|
|
51
38
|
elemBefore: jsx(init.Icon, {
|
|
52
|
-
label: ""
|
|
39
|
+
label: "",
|
|
40
|
+
color: "currentColor",
|
|
41
|
+
spacing: "spacious"
|
|
53
42
|
}),
|
|
54
43
|
elemAfter: init.shortcut ?
|
|
55
44
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -73,7 +62,7 @@ export var action = mem(function (init) {
|
|
|
73
62
|
disabled: init.disabled,
|
|
74
63
|
name: 'action',
|
|
75
64
|
shortcut: '[]',
|
|
76
|
-
Icon:
|
|
65
|
+
Icon: CheckboxCheckedIcon,
|
|
77
66
|
'aria-keyshortcuts': '[ ] Space'
|
|
78
67
|
});
|
|
79
68
|
});
|
|
@@ -84,7 +73,7 @@ export var link = mem(function (init) {
|
|
|
84
73
|
disabled: init.disabled,
|
|
85
74
|
name: 'link',
|
|
86
75
|
shortcut: tooltip(addLink),
|
|
87
|
-
Icon:
|
|
76
|
+
Icon: LinkIcon,
|
|
88
77
|
'aria-haspopup': init['aria-haspopup'],
|
|
89
78
|
'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
|
|
90
79
|
});
|
|
@@ -95,7 +84,7 @@ export var media = mem(function (init) {
|
|
|
95
84
|
tooltipDescription: init.tooltipDescription,
|
|
96
85
|
disabled: init.disabled,
|
|
97
86
|
name: 'media',
|
|
98
|
-
Icon:
|
|
87
|
+
Icon: ImageIcon
|
|
99
88
|
});
|
|
100
89
|
});
|
|
101
90
|
export var imageUpload = mem(function (init) {
|
|
@@ -104,7 +93,7 @@ export var imageUpload = mem(function (init) {
|
|
|
104
93
|
tooltipDescription: init.tooltipDescription,
|
|
105
94
|
disabled: init.disabled,
|
|
106
95
|
name: 'image upload',
|
|
107
|
-
Icon:
|
|
96
|
+
Icon: ImageIcon
|
|
108
97
|
});
|
|
109
98
|
});
|
|
110
99
|
export var mention = mem(function (init) {
|
|
@@ -113,7 +102,7 @@ export var mention = mem(function (init) {
|
|
|
113
102
|
tooltipDescription: init.tooltipDescription,
|
|
114
103
|
disabled: init.disabled,
|
|
115
104
|
name: 'mention',
|
|
116
|
-
Icon:
|
|
105
|
+
Icon: MentionIcon,
|
|
117
106
|
shortcut: '@',
|
|
118
107
|
'aria-haspopup': init['aria-haspopup'],
|
|
119
108
|
'aria-keyshortcuts': 'Shift+2 Space'
|
|
@@ -125,7 +114,7 @@ export var emoji = mem(function (init) {
|
|
|
125
114
|
tooltipDescription: init.tooltipDescription,
|
|
126
115
|
disabled: init.disabled,
|
|
127
116
|
name: 'emoji',
|
|
128
|
-
Icon:
|
|
117
|
+
Icon: EmojiIcon,
|
|
129
118
|
shortcut: ':',
|
|
130
119
|
'aria-haspopup': init['aria-haspopup'],
|
|
131
120
|
'aria-keyshortcuts': 'Shift+;'
|
|
@@ -137,7 +126,7 @@ export var table = mem(function (init) {
|
|
|
137
126
|
tooltipDescription: init.tooltipDescription,
|
|
138
127
|
disabled: init.disabled,
|
|
139
128
|
name: 'table',
|
|
140
|
-
Icon:
|
|
129
|
+
Icon: GridIcon,
|
|
141
130
|
shortcut: tooltip(toggleTable),
|
|
142
131
|
'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
|
|
143
132
|
});
|
|
@@ -148,12 +137,12 @@ export var tableSelector = mem(function (init) {
|
|
|
148
137
|
tooltipDescription: init.tooltipDescription,
|
|
149
138
|
disabled: init.disabled,
|
|
150
139
|
name: 'table selector',
|
|
151
|
-
Icon:
|
|
140
|
+
Icon: function Icon() {
|
|
152
141
|
return jsx(ChevronDownIcon, {
|
|
153
142
|
label: "",
|
|
154
143
|
color: "currentColor"
|
|
155
144
|
});
|
|
156
|
-
}
|
|
145
|
+
}
|
|
157
146
|
});
|
|
158
147
|
});
|
|
159
148
|
export var layout = mem(function (init) {
|
|
@@ -171,7 +160,7 @@ export var codeblock = mem(function (init) {
|
|
|
171
160
|
tooltipDescription: init.tooltipDescription,
|
|
172
161
|
disabled: init.disabled,
|
|
173
162
|
name: 'codeblock',
|
|
174
|
-
Icon:
|
|
163
|
+
Icon: AngleBracketsIcon,
|
|
175
164
|
shortcut: init.shortcut,
|
|
176
165
|
'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
|
|
177
166
|
});
|
|
@@ -182,7 +171,7 @@ export var panel = mem(function (init) {
|
|
|
182
171
|
tooltipDescription: init.tooltipDescription,
|
|
183
172
|
disabled: init.disabled,
|
|
184
173
|
name: 'panel',
|
|
185
|
-
Icon:
|
|
174
|
+
Icon: InformationIcon,
|
|
186
175
|
shortcut: init.shortcut,
|
|
187
176
|
'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
|
|
188
177
|
});
|
|
@@ -193,7 +182,7 @@ export var blockquote = mem(function (init) {
|
|
|
193
182
|
tooltipDescription: init.tooltipDescription,
|
|
194
183
|
disabled: init.disabled,
|
|
195
184
|
name: 'blockquote',
|
|
196
|
-
Icon:
|
|
185
|
+
Icon: QuotationMarkIcon,
|
|
197
186
|
shortcut: init.shortcut,
|
|
198
187
|
'aria-keyshortcuts': 'Shift+. Space'
|
|
199
188
|
});
|
|
@@ -204,7 +193,7 @@ export var decision = mem(function (init) {
|
|
|
204
193
|
tooltipDescription: init.tooltipDescription,
|
|
205
194
|
disabled: init.disabled,
|
|
206
195
|
name: 'decision',
|
|
207
|
-
Icon:
|
|
196
|
+
Icon: DecisionIcon,
|
|
208
197
|
shortcut: '<>',
|
|
209
198
|
'aria-keyshortcuts': 'Shift+, Shift+. Space'
|
|
210
199
|
});
|
|
@@ -235,7 +224,7 @@ export var date = mem(function (init) {
|
|
|
235
224
|
tooltipDescription: init.tooltipDescription,
|
|
236
225
|
disabled: init.disabled,
|
|
237
226
|
name: 'date',
|
|
238
|
-
Icon:
|
|
227
|
+
Icon: CalendarIcon,
|
|
239
228
|
shortcut: '//',
|
|
240
229
|
'aria-keyshortcuts': '/ / Enter'
|
|
241
230
|
});
|
|
@@ -269,11 +258,9 @@ export var more = mem(function (init) {
|
|
|
269
258
|
disabled: init.disabled,
|
|
270
259
|
name: 'macro',
|
|
271
260
|
Icon: function Icon() {
|
|
272
|
-
return
|
|
261
|
+
return jsx(ShowMoreHorizontalIcon, {
|
|
273
262
|
label: "",
|
|
274
263
|
color: "currentColor"
|
|
275
|
-
}) : jsx(EditorMoreIcon, {
|
|
276
|
-
label: ""
|
|
277
264
|
});
|
|
278
265
|
}
|
|
279
266
|
});
|
|
@@ -3,21 +3,25 @@ import EditorCodeIcon from '@atlaskit/icon/glyph/editor/code';
|
|
|
3
3
|
import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
|
|
4
4
|
import QuoteIcon from '@atlaskit/icon/glyph/quote';
|
|
5
5
|
import ExpandIcon from '../assets/expand';
|
|
6
|
-
export var transformationOptions = function transformationOptions(api) {
|
|
6
|
+
export var transformationOptions = function transformationOptions(api, schema) {
|
|
7
7
|
var _api$panel, _api$expand, _api$codeBlock, _api$blockType;
|
|
8
8
|
return [{
|
|
9
|
+
type: schema.nodes.panel,
|
|
9
10
|
title: messages.panel,
|
|
10
11
|
icon: EditorInfoIcon,
|
|
11
12
|
command: api === null || api === void 0 || (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel
|
|
12
13
|
}, {
|
|
14
|
+
type: schema.nodes.expand,
|
|
13
15
|
title: toolbarMessages.expand,
|
|
14
16
|
icon: ExpandIcon,
|
|
15
17
|
command: api === null || api === void 0 || (_api$expand = api.expand) === null || _api$expand === void 0 ? void 0 : _api$expand.actions.insertExpandWithInputMethod
|
|
16
18
|
}, {
|
|
19
|
+
type: schema.nodes.codeBlock,
|
|
17
20
|
title: messages.codeblock,
|
|
18
21
|
icon: EditorCodeIcon,
|
|
19
22
|
command: api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock
|
|
20
23
|
}, {
|
|
24
|
+
type: schema.nodes.blockquote,
|
|
21
25
|
title: messages.blockquote,
|
|
22
26
|
icon: QuoteIcon,
|
|
23
27
|
command: api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : _api$blockType.actions.insertBlockQuote
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { type Schema } from '@atlaskit/editor-prosemirror/model';
|
|
2
3
|
import QuoteIcon from '@atlaskit/icon/glyph/quote';
|
|
3
4
|
import ExpandIcon from '../assets/expand';
|
|
4
5
|
import type { InsertBlockPlugin } from '../plugin';
|
|
5
|
-
export declare const transformationOptions: (api: ExtractInjectionAPI<InsertBlockPlugin> | undefined) => ({
|
|
6
|
+
export declare const transformationOptions: (api: ExtractInjectionAPI<InsertBlockPlugin> | undefined, schema: Schema) => ({
|
|
7
|
+
type: import("prosemirror-model").NodeType;
|
|
6
8
|
title: {
|
|
7
9
|
id: string;
|
|
8
10
|
defaultMessage: string;
|
|
@@ -11,6 +13,7 @@ export declare const transformationOptions: (api: ExtractInjectionAPI<InsertBloc
|
|
|
11
13
|
icon: typeof ExpandIcon;
|
|
12
14
|
command: ((inputMethod: import("@atlaskit/editor-plugin-expand").InsertMethod) => import("@atlaskit/editor-common/types").Command) | undefined;
|
|
13
15
|
} | {
|
|
16
|
+
type: import("prosemirror-model").NodeType;
|
|
14
17
|
title: {
|
|
15
18
|
id: string;
|
|
16
19
|
defaultMessage: string;
|