@atlaskit/editor-toolbar 0.3.1 → 0.3.3
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 +15 -0
- package/dist/cjs/hooks/ui-context.js +6 -3
- package/dist/cjs/index.js +63 -0
- package/dist/cjs/ui/ToolbarButton.js +5 -3
- package/dist/cjs/ui/icons/EmojiIcon.js +13 -0
- package/dist/cjs/ui/icons/HistoryIcon.js +13 -0
- package/dist/cjs/ui/icons/ImageIcon.js +13 -0
- package/dist/cjs/ui/icons/LayoutIcon.js +13 -0
- package/dist/cjs/ui/icons/MentionIcon.js +13 -0
- package/dist/cjs/ui/icons/RedoIcon.js +13 -0
- package/dist/cjs/ui/icons/TableIcon.js +13 -0
- package/dist/cjs/ui/icons/TaskIcon.js +13 -0
- package/dist/cjs/ui/icons/UndoIcon.js +13 -0
- package/dist/es2019/hooks/ui-context.js +6 -3
- package/dist/es2019/index.js +9 -0
- package/dist/es2019/ui/ToolbarButton.js +5 -3
- package/dist/es2019/ui/icons/EmojiIcon.js +2 -0
- package/dist/es2019/ui/icons/HistoryIcon.js +2 -0
- package/dist/es2019/ui/icons/ImageIcon.js +2 -0
- package/dist/es2019/ui/icons/LayoutIcon.js +2 -0
- package/dist/es2019/ui/icons/MentionIcon.js +2 -0
- package/dist/es2019/ui/icons/RedoIcon.js +2 -0
- package/dist/es2019/ui/icons/TableIcon.js +2 -0
- package/dist/es2019/ui/icons/TaskIcon.js +2 -0
- package/dist/es2019/ui/icons/UndoIcon.js +2 -0
- package/dist/esm/hooks/ui-context.js +6 -3
- package/dist/esm/index.js +9 -0
- package/dist/esm/ui/ToolbarButton.js +5 -3
- package/dist/esm/ui/icons/EmojiIcon.js +2 -0
- package/dist/esm/ui/icons/HistoryIcon.js +2 -0
- package/dist/esm/ui/icons/ImageIcon.js +2 -0
- package/dist/esm/ui/icons/LayoutIcon.js +2 -0
- package/dist/esm/ui/icons/MentionIcon.js +2 -0
- package/dist/esm/ui/icons/RedoIcon.js +2 -0
- package/dist/esm/ui/icons/TableIcon.js +2 -0
- package/dist/esm/ui/icons/TaskIcon.js +2 -0
- package/dist/esm/ui/icons/UndoIcon.js +2 -0
- package/dist/types/hooks/ui-context.d.ts +5 -1
- package/dist/types/index.d.ts +9 -0
- package/dist/types/ui/icons/EmojiIcon.d.ts +1 -0
- package/dist/types/ui/icons/HistoryIcon.d.ts +1 -0
- package/dist/types/ui/icons/ImageIcon.d.ts +1 -0
- package/dist/types/ui/icons/LayoutIcon.d.ts +1 -0
- package/dist/types/ui/icons/MentionIcon.d.ts +1 -0
- package/dist/types/ui/icons/RedoIcon.d.ts +1 -0
- package/dist/types/ui/icons/TableIcon.d.ts +1 -0
- package/dist/types/ui/icons/TaskIcon.d.ts +1 -0
- package/dist/types/ui/icons/UndoIcon.d.ts +1 -0
- package/dist/types-ts4.5/hooks/ui-context.d.ts +5 -1
- package/dist/types-ts4.5/index.d.ts +9 -0
- package/dist/types-ts4.5/ui/icons/EmojiIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/HistoryIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/ImageIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/LayoutIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/MentionIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/RedoIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/TableIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/TaskIcon.d.ts +1 -0
- package/dist/types-ts4.5/ui/icons/UndoIcon.d.ts +1 -0
- package/package.json +3 -3
- package/src/hooks/ui-context.tsx +10 -1
- package/src/index.ts +9 -0
- package/src/ui/ToolbarButton.tsx +4 -3
- package/src/ui/icons/EmojiIcon.tsx +2 -0
- package/src/ui/icons/HistoryIcon.tsx +2 -0
- package/src/ui/icons/ImageIcon.tsx +2 -0
- package/src/ui/icons/LayoutIcon.tsx +2 -0
- package/src/ui/icons/MentionIcon.tsx +2 -0
- package/src/ui/icons/RedoIcon.tsx +2 -0
- package/src/ui/icons/TableIcon.tsx +2 -0
- package/src/ui/icons/TaskIcon.tsx +2 -0
- package/src/ui/icons/UndoIcon.tsx +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f78a34afab8d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f78a34afab8d4) -
|
|
8
|
+
[ux] ED-28961 register undo redo and track changes buttons to new toolbar behind
|
|
9
|
+
platform_editor_toolbar_aifc. adds ai buttons into comment toolbar.
|
|
10
|
+
|
|
11
|
+
## 0.3.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`c3b98666f3840`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3b98666f3840) -
|
|
16
|
+
[ux] ED-28740 register insert block items to new toolbar behind platform_editor_toolbar_aifc
|
|
17
|
+
|
|
3
18
|
## 0.3.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -9,7 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
10
10
|
var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
|
|
11
11
|
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
12
|
-
preventDefaultOnMouseDown: false
|
|
12
|
+
preventDefaultOnMouseDown: false,
|
|
13
|
+
isDisabled: false
|
|
13
14
|
});
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -25,11 +26,13 @@ var useToolbarUI = exports.useToolbarUI = function useToolbarUI() {
|
|
|
25
26
|
var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_ref) {
|
|
26
27
|
var children = _ref.children,
|
|
27
28
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
28
|
-
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown
|
|
29
|
+
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
30
|
+
isDisabled = _ref.isDisabled;
|
|
29
31
|
return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
|
|
30
32
|
value: {
|
|
31
33
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
32
|
-
preventDefaultOnMouseDown: preventDefaultOnMouseDown
|
|
34
|
+
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
35
|
+
isDisabled: isDisabled
|
|
33
36
|
}
|
|
34
37
|
}, children);
|
|
35
38
|
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -136,6 +136,12 @@ Object.defineProperty(exports, "CommentIcon", {
|
|
|
136
136
|
return _CommentIcon.CommentIcon;
|
|
137
137
|
}
|
|
138
138
|
});
|
|
139
|
+
Object.defineProperty(exports, "EmojiIcon", {
|
|
140
|
+
enumerable: true,
|
|
141
|
+
get: function get() {
|
|
142
|
+
return _EmojiIcon.EmojiIcon;
|
|
143
|
+
}
|
|
144
|
+
});
|
|
139
145
|
Object.defineProperty(exports, "HeadingFiveIcon", {
|
|
140
146
|
enumerable: true,
|
|
141
147
|
get: function get() {
|
|
@@ -172,6 +178,18 @@ Object.defineProperty(exports, "HeadingTwoIcon", {
|
|
|
172
178
|
return _HeadingTwoIcon.HeadingTwoIcon;
|
|
173
179
|
}
|
|
174
180
|
});
|
|
181
|
+
Object.defineProperty(exports, "HistoryIcon", {
|
|
182
|
+
enumerable: true,
|
|
183
|
+
get: function get() {
|
|
184
|
+
return _HistoryIcon.HistoryIcon;
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
Object.defineProperty(exports, "ImageIcon", {
|
|
188
|
+
enumerable: true,
|
|
189
|
+
get: function get() {
|
|
190
|
+
return _ImageIcon.ImageIcon;
|
|
191
|
+
}
|
|
192
|
+
});
|
|
175
193
|
Object.defineProperty(exports, "IndentIcon", {
|
|
176
194
|
enumerable: true,
|
|
177
195
|
get: function get() {
|
|
@@ -184,6 +202,12 @@ Object.defineProperty(exports, "ItalicIcon", {
|
|
|
184
202
|
return _ItalicIcon.ItalicIcon;
|
|
185
203
|
}
|
|
186
204
|
});
|
|
205
|
+
Object.defineProperty(exports, "LayoutIcon", {
|
|
206
|
+
enumerable: true,
|
|
207
|
+
get: function get() {
|
|
208
|
+
return _LayoutIcon.LayoutIcon;
|
|
209
|
+
}
|
|
210
|
+
});
|
|
187
211
|
Object.defineProperty(exports, "LinkIcon", {
|
|
188
212
|
enumerable: true,
|
|
189
213
|
get: function get() {
|
|
@@ -202,6 +226,12 @@ Object.defineProperty(exports, "ListNumberedIcon", {
|
|
|
202
226
|
return _ListNumberedIcon.ListNumberedIcon;
|
|
203
227
|
}
|
|
204
228
|
});
|
|
229
|
+
Object.defineProperty(exports, "MentionIcon", {
|
|
230
|
+
enumerable: true,
|
|
231
|
+
get: function get() {
|
|
232
|
+
return _MentionIcon.MentionIcon;
|
|
233
|
+
}
|
|
234
|
+
});
|
|
205
235
|
Object.defineProperty(exports, "MoreItemsIcon", {
|
|
206
236
|
enumerable: true,
|
|
207
237
|
get: function get() {
|
|
@@ -244,6 +274,12 @@ Object.defineProperty(exports, "QuoteIcon", {
|
|
|
244
274
|
return _QuoteIcon.QuoteIcon;
|
|
245
275
|
}
|
|
246
276
|
});
|
|
277
|
+
Object.defineProperty(exports, "RedoIcon", {
|
|
278
|
+
enumerable: true,
|
|
279
|
+
get: function get() {
|
|
280
|
+
return _RedoIcon.RedoIcon;
|
|
281
|
+
}
|
|
282
|
+
});
|
|
247
283
|
Object.defineProperty(exports, "ShowMoreHorizontalIcon", {
|
|
248
284
|
enumerable: true,
|
|
249
285
|
get: function get() {
|
|
@@ -268,6 +304,18 @@ Object.defineProperty(exports, "SuperscriptIcon", {
|
|
|
268
304
|
return _SuperscriptIcon.SuperscriptIcon;
|
|
269
305
|
}
|
|
270
306
|
});
|
|
307
|
+
Object.defineProperty(exports, "TableIcon", {
|
|
308
|
+
enumerable: true,
|
|
309
|
+
get: function get() {
|
|
310
|
+
return _TableIcon.TableIcon;
|
|
311
|
+
}
|
|
312
|
+
});
|
|
313
|
+
Object.defineProperty(exports, "TaskIcon", {
|
|
314
|
+
enumerable: true,
|
|
315
|
+
get: function get() {
|
|
316
|
+
return _TaskIcon.TaskIcon;
|
|
317
|
+
}
|
|
318
|
+
});
|
|
271
319
|
Object.defineProperty(exports, "TextColorIcon", {
|
|
272
320
|
enumerable: true,
|
|
273
321
|
get: function get() {
|
|
@@ -358,6 +406,12 @@ Object.defineProperty(exports, "UnderlineIcon", {
|
|
|
358
406
|
return _UnderlineIcon.UnderlineIcon;
|
|
359
407
|
}
|
|
360
408
|
});
|
|
409
|
+
Object.defineProperty(exports, "UndoIcon", {
|
|
410
|
+
enumerable: true,
|
|
411
|
+
get: function get() {
|
|
412
|
+
return _UndoIcon.UndoIcon;
|
|
413
|
+
}
|
|
414
|
+
});
|
|
361
415
|
Object.defineProperty(exports, "useToolbarDropdownMenu", {
|
|
362
416
|
enumerable: true,
|
|
363
417
|
get: function get() {
|
|
@@ -427,5 +481,14 @@ var _AlignTextCenterIcon = require("./ui/icons/AlignTextCenterIcon");
|
|
|
427
481
|
var _AlignTextRightIcon = require("./ui/icons/AlignTextRightIcon");
|
|
428
482
|
var _IndentIcon = require("./ui/icons/IndentIcon");
|
|
429
483
|
var _OutdentIcon = require("./ui/icons/OutdentIcon");
|
|
484
|
+
var _EmojiIcon = require("./ui/icons/EmojiIcon");
|
|
485
|
+
var _LayoutIcon = require("./ui/icons/LayoutIcon");
|
|
486
|
+
var _ImageIcon = require("./ui/icons/ImageIcon");
|
|
487
|
+
var _MentionIcon = require("./ui/icons/MentionIcon");
|
|
488
|
+
var _TableIcon = require("./ui/icons/TableIcon");
|
|
489
|
+
var _TaskIcon = require("./ui/icons/TaskIcon");
|
|
490
|
+
var _UndoIcon = require("./ui/icons/UndoIcon");
|
|
491
|
+
var _RedoIcon = require("./ui/icons/RedoIcon");
|
|
492
|
+
var _HistoryIcon = require("./ui/icons/HistoryIcon");
|
|
430
493
|
var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
|
|
431
494
|
var _uiContext = require("./hooks/ui-context");
|
|
@@ -35,10 +35,12 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
35
35
|
ariaKeyshortcuts = _ref.ariaKeyshortcuts,
|
|
36
36
|
label = _ref.label;
|
|
37
37
|
var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
|
|
38
|
-
preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown
|
|
38
|
+
preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
|
|
39
|
+
ctxDisabled = _useToolbarUI.isDisabled;
|
|
40
|
+
var disabled = Boolean(ctxDisabled || isDisabled);
|
|
39
41
|
return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
|
|
40
42
|
ref: ref,
|
|
41
|
-
xcss: (0, _css.cx)(styles.button,
|
|
43
|
+
xcss: (0, _css.cx)(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
|
|
42
44
|
"aria-pressed": isSelected,
|
|
43
45
|
"aria-expanded": ariaExpanded,
|
|
44
46
|
"aria-haspopup": ariaHasPopup,
|
|
@@ -50,7 +52,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
50
52
|
onBlur: onBlur,
|
|
51
53
|
onFocus: onFocus,
|
|
52
54
|
testId: testId,
|
|
53
|
-
isDisabled:
|
|
55
|
+
isDisabled: disabled,
|
|
54
56
|
onMouseDown: function onMouseDown(event) {
|
|
55
57
|
if (preventDefaultOnMouseDown) {
|
|
56
58
|
event.preventDefault();
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "EmojiIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _emoji.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _emoji = _interopRequireDefault(require("@atlaskit/icon/core/emoji"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "HistoryIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _history.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _history = _interopRequireDefault(require("@atlaskit/icon-lab/core/history"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "ImageIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _image.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _image = _interopRequireDefault(require("@atlaskit/icon/core/image"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "LayoutIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _layoutTwoColumns.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "MentionIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _mention.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _mention = _interopRequireDefault(require("@atlaskit/icon/core/mention"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "RedoIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _redo.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _redo = _interopRequireDefault(require("@atlaskit/icon/core/redo"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "TableIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _grid.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _grid = _interopRequireDefault(require("@atlaskit/icon/core/grid"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "TaskIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _task.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "UndoIcon", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _undo.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _undo = _interopRequireDefault(require("@atlaskit/icon/core/undo"));
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { createContext, useContext } from 'react';
|
|
2
2
|
const ToolbarUIContext = /*#__PURE__*/createContext({
|
|
3
3
|
onDropdownOpenChanged: () => {},
|
|
4
|
-
preventDefaultOnMouseDown: false
|
|
4
|
+
preventDefaultOnMouseDown: false,
|
|
5
|
+
isDisabled: false
|
|
5
6
|
});
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -17,12 +18,14 @@ export const useToolbarUI = () => {
|
|
|
17
18
|
export const ToolbarUIProvider = ({
|
|
18
19
|
children,
|
|
19
20
|
onDropdownOpenChanged,
|
|
20
|
-
preventDefaultOnMouseDown
|
|
21
|
+
preventDefaultOnMouseDown,
|
|
22
|
+
isDisabled
|
|
21
23
|
}) => {
|
|
22
24
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
23
25
|
value: {
|
|
24
26
|
onDropdownOpenChanged,
|
|
25
|
-
preventDefaultOnMouseDown
|
|
27
|
+
preventDefaultOnMouseDown,
|
|
28
|
+
isDisabled
|
|
26
29
|
}
|
|
27
30
|
}, children);
|
|
28
31
|
};
|
package/dist/es2019/index.js
CHANGED
|
@@ -56,5 +56,14 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
|
|
|
56
56
|
export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
|
|
57
57
|
export { IndentIcon } from './ui/icons/IndentIcon';
|
|
58
58
|
export { OutdentIcon } from './ui/icons/OutdentIcon';
|
|
59
|
+
export { EmojiIcon } from './ui/icons/EmojiIcon';
|
|
60
|
+
export { LayoutIcon } from './ui/icons/LayoutIcon';
|
|
61
|
+
export { ImageIcon } from './ui/icons/ImageIcon';
|
|
62
|
+
export { MentionIcon } from './ui/icons/MentionIcon';
|
|
63
|
+
export { TableIcon } from './ui/icons/TableIcon';
|
|
64
|
+
export { TaskIcon } from './ui/icons/TaskIcon';
|
|
65
|
+
export { UndoIcon } from './ui/icons/UndoIcon';
|
|
66
|
+
export { RedoIcon } from './ui/icons/RedoIcon';
|
|
67
|
+
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
59
68
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
60
69
|
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
@@ -28,11 +28,13 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
|
|
|
28
28
|
label
|
|
29
29
|
}, ref) => {
|
|
30
30
|
const {
|
|
31
|
-
preventDefaultOnMouseDown
|
|
31
|
+
preventDefaultOnMouseDown,
|
|
32
|
+
isDisabled: ctxDisabled
|
|
32
33
|
} = useToolbarUI();
|
|
34
|
+
const disabled = Boolean(ctxDisabled || isDisabled);
|
|
33
35
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
34
36
|
ref: ref,
|
|
35
|
-
xcss: cx(styles.button,
|
|
37
|
+
xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
|
|
36
38
|
"aria-pressed": isSelected,
|
|
37
39
|
"aria-expanded": ariaExpanded,
|
|
38
40
|
"aria-haspopup": ariaHasPopup,
|
|
@@ -44,7 +46,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
|
|
|
44
46
|
onBlur: onBlur,
|
|
45
47
|
onFocus: onFocus,
|
|
46
48
|
testId: testId,
|
|
47
|
-
isDisabled:
|
|
49
|
+
isDisabled: disabled,
|
|
48
50
|
onMouseDown: event => {
|
|
49
51
|
if (preventDefaultOnMouseDown) {
|
|
50
52
|
event.preventDefault();
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { createContext, useContext } from 'react';
|
|
2
2
|
var ToolbarUIContext = /*#__PURE__*/createContext({
|
|
3
3
|
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
4
|
-
preventDefaultOnMouseDown: false
|
|
4
|
+
preventDefaultOnMouseDown: false,
|
|
5
|
+
isDisabled: false
|
|
5
6
|
});
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -17,11 +18,13 @@ export var useToolbarUI = function useToolbarUI() {
|
|
|
17
18
|
export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
|
|
18
19
|
var children = _ref.children,
|
|
19
20
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
20
|
-
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown
|
|
21
|
+
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
22
|
+
isDisabled = _ref.isDisabled;
|
|
21
23
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
22
24
|
value: {
|
|
23
25
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
24
|
-
preventDefaultOnMouseDown: preventDefaultOnMouseDown
|
|
26
|
+
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
27
|
+
isDisabled: isDisabled
|
|
25
28
|
}
|
|
26
29
|
}, children);
|
|
27
30
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -56,5 +56,14 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
|
|
|
56
56
|
export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
|
|
57
57
|
export { IndentIcon } from './ui/icons/IndentIcon';
|
|
58
58
|
export { OutdentIcon } from './ui/icons/OutdentIcon';
|
|
59
|
+
export { EmojiIcon } from './ui/icons/EmojiIcon';
|
|
60
|
+
export { LayoutIcon } from './ui/icons/LayoutIcon';
|
|
61
|
+
export { ImageIcon } from './ui/icons/ImageIcon';
|
|
62
|
+
export { MentionIcon } from './ui/icons/MentionIcon';
|
|
63
|
+
export { TableIcon } from './ui/icons/TableIcon';
|
|
64
|
+
export { TaskIcon } from './ui/icons/TaskIcon';
|
|
65
|
+
export { UndoIcon } from './ui/icons/UndoIcon';
|
|
66
|
+
export { RedoIcon } from './ui/icons/RedoIcon';
|
|
67
|
+
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
59
68
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
60
69
|
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
@@ -27,10 +27,12 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
27
27
|
ariaKeyshortcuts = _ref.ariaKeyshortcuts,
|
|
28
28
|
label = _ref.label;
|
|
29
29
|
var _useToolbarUI = useToolbarUI(),
|
|
30
|
-
preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown
|
|
30
|
+
preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
|
|
31
|
+
ctxDisabled = _useToolbarUI.isDisabled;
|
|
32
|
+
var disabled = Boolean(ctxDisabled || isDisabled);
|
|
31
33
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
32
34
|
ref: ref,
|
|
33
|
-
xcss: cx(styles.button,
|
|
35
|
+
xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
|
|
34
36
|
"aria-pressed": isSelected,
|
|
35
37
|
"aria-expanded": ariaExpanded,
|
|
36
38
|
"aria-haspopup": ariaHasPopup,
|
|
@@ -42,7 +44,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
42
44
|
onBlur: onBlur,
|
|
43
45
|
onFocus: onFocus,
|
|
44
46
|
testId: testId,
|
|
45
|
-
isDisabled:
|
|
47
|
+
isDisabled: disabled,
|
|
46
48
|
onMouseDown: function onMouseDown(event) {
|
|
47
49
|
if (preventDefaultOnMouseDown) {
|
|
48
50
|
event.preventDefault();
|
|
@@ -11,6 +11,10 @@ type ToolbarUIContextType = {
|
|
|
11
11
|
* Whether to prevent default behavior on mouse down events on ToolbarButton.
|
|
12
12
|
*/
|
|
13
13
|
preventDefaultOnMouseDown?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
|
+
*/
|
|
17
|
+
isDisabled?: boolean;
|
|
14
18
|
};
|
|
15
19
|
/**
|
|
16
20
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -19,5 +23,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
19
23
|
type ToolbarUIProviderProps = {
|
|
20
24
|
children: React.ReactNode;
|
|
21
25
|
} & ToolbarUIContextType;
|
|
22
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
26
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
23
27
|
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -55,6 +55,15 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
|
|
|
55
55
|
export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
|
|
56
56
|
export { IndentIcon } from './ui/icons/IndentIcon';
|
|
57
57
|
export { OutdentIcon } from './ui/icons/OutdentIcon';
|
|
58
|
+
export { EmojiIcon } from './ui/icons/EmojiIcon';
|
|
59
|
+
export { LayoutIcon } from './ui/icons/LayoutIcon';
|
|
60
|
+
export { ImageIcon } from './ui/icons/ImageIcon';
|
|
61
|
+
export { MentionIcon } from './ui/icons/MentionIcon';
|
|
62
|
+
export { TableIcon } from './ui/icons/TableIcon';
|
|
63
|
+
export { TaskIcon } from './ui/icons/TaskIcon';
|
|
64
|
+
export { UndoIcon } from './ui/icons/UndoIcon';
|
|
65
|
+
export { RedoIcon } from './ui/icons/RedoIcon';
|
|
66
|
+
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
58
67
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
59
68
|
export type { IconComponent } from './types';
|
|
60
69
|
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ImageIcon } from '@atlaskit/icon/core/image';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MentionIcon } from '@atlaskit/icon/core/mention';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as RedoIcon } from '@atlaskit/icon/core/redo';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableIcon } from '@atlaskit/icon/core/grid';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TaskIcon } from '@atlaskit/icon/core/task';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as UndoIcon } from '@atlaskit/icon/core/undo';
|
|
@@ -11,6 +11,10 @@ type ToolbarUIContextType = {
|
|
|
11
11
|
* Whether to prevent default behavior on mouse down events on ToolbarButton.
|
|
12
12
|
*/
|
|
13
13
|
preventDefaultOnMouseDown?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
|
+
*/
|
|
17
|
+
isDisabled?: boolean;
|
|
14
18
|
};
|
|
15
19
|
/**
|
|
16
20
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -19,5 +23,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
19
23
|
type ToolbarUIProviderProps = {
|
|
20
24
|
children: React.ReactNode;
|
|
21
25
|
} & ToolbarUIContextType;
|
|
22
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
26
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
23
27
|
export {};
|
|
@@ -55,6 +55,15 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
|
|
|
55
55
|
export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
|
|
56
56
|
export { IndentIcon } from './ui/icons/IndentIcon';
|
|
57
57
|
export { OutdentIcon } from './ui/icons/OutdentIcon';
|
|
58
|
+
export { EmojiIcon } from './ui/icons/EmojiIcon';
|
|
59
|
+
export { LayoutIcon } from './ui/icons/LayoutIcon';
|
|
60
|
+
export { ImageIcon } from './ui/icons/ImageIcon';
|
|
61
|
+
export { MentionIcon } from './ui/icons/MentionIcon';
|
|
62
|
+
export { TableIcon } from './ui/icons/TableIcon';
|
|
63
|
+
export { TaskIcon } from './ui/icons/TaskIcon';
|
|
64
|
+
export { UndoIcon } from './ui/icons/UndoIcon';
|
|
65
|
+
export { RedoIcon } from './ui/icons/RedoIcon';
|
|
66
|
+
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
58
67
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
59
68
|
export type { IconComponent } from './types';
|
|
60
69
|
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as HistoryIcon } from '@atlaskit/icon-lab/core/history';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ImageIcon } from '@atlaskit/icon/core/image';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MentionIcon } from '@atlaskit/icon/core/mention';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as RedoIcon } from '@atlaskit/icon/core/redo';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableIcon } from '@atlaskit/icon/core/grid';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TaskIcon } from '@atlaskit/icon/core/task';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as UndoIcon } from '@atlaskit/icon/core/undo';
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.3.
|
|
6
|
+
"version": "0.3.3",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"team": "Editor: Jenga",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@atlaskit/badge": "^18.1.0",
|
|
28
|
-
"@atlaskit/button": "^23.
|
|
28
|
+
"@atlaskit/button": "^23.4.0",
|
|
29
29
|
"@atlaskit/css": "^0.12.0",
|
|
30
30
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
31
31
|
"@atlaskit/icon": "^27.12.0",
|
|
32
32
|
"@atlaskit/icon-lab": "^5.6.0",
|
|
33
|
-
"@atlaskit/logo": "^19.
|
|
33
|
+
"@atlaskit/logo": "^19.7.0",
|
|
34
34
|
"@atlaskit/popup": "^4.3.0",
|
|
35
35
|
"@atlaskit/primitives": "^14.11.0",
|
|
36
36
|
"@atlaskit/tokens": "^6.0.0",
|
package/src/hooks/ui-context.tsx
CHANGED
|
@@ -14,11 +14,17 @@ type ToolbarUIContextType = {
|
|
|
14
14
|
* Whether to prevent default behavior on mouse down events on ToolbarButton.
|
|
15
15
|
*/
|
|
16
16
|
preventDefaultOnMouseDown?: boolean;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
20
|
+
*/
|
|
21
|
+
isDisabled?: boolean;
|
|
17
22
|
};
|
|
18
23
|
|
|
19
24
|
const ToolbarUIContext = createContext<ToolbarUIContextType>({
|
|
20
25
|
onDropdownOpenChanged: () => {},
|
|
21
26
|
preventDefaultOnMouseDown: false,
|
|
27
|
+
isDisabled: false,
|
|
22
28
|
});
|
|
23
29
|
|
|
24
30
|
/**
|
|
@@ -42,9 +48,12 @@ export const ToolbarUIProvider = ({
|
|
|
42
48
|
children,
|
|
43
49
|
onDropdownOpenChanged,
|
|
44
50
|
preventDefaultOnMouseDown,
|
|
51
|
+
isDisabled,
|
|
45
52
|
}: ToolbarUIProviderProps) => {
|
|
46
53
|
return (
|
|
47
|
-
<ToolbarUIContext.Provider
|
|
54
|
+
<ToolbarUIContext.Provider
|
|
55
|
+
value={{ onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled }}
|
|
56
|
+
>
|
|
48
57
|
{children}
|
|
49
58
|
</ToolbarUIContext.Provider>
|
|
50
59
|
);
|
package/src/index.ts
CHANGED
|
@@ -57,6 +57,15 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
|
|
|
57
57
|
export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
|
|
58
58
|
export { IndentIcon } from './ui/icons/IndentIcon';
|
|
59
59
|
export { OutdentIcon } from './ui/icons/OutdentIcon';
|
|
60
|
+
export { EmojiIcon } from './ui/icons/EmojiIcon';
|
|
61
|
+
export { LayoutIcon } from './ui/icons/LayoutIcon';
|
|
62
|
+
export { ImageIcon } from './ui/icons/ImageIcon';
|
|
63
|
+
export { MentionIcon } from './ui/icons/MentionIcon';
|
|
64
|
+
export { TableIcon } from './ui/icons/TableIcon';
|
|
65
|
+
export { TaskIcon } from './ui/icons/TaskIcon';
|
|
66
|
+
export { UndoIcon } from './ui/icons/UndoIcon';
|
|
67
|
+
export { RedoIcon } from './ui/icons/RedoIcon';
|
|
68
|
+
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
60
69
|
|
|
61
70
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
62
71
|
|
package/src/ui/ToolbarButton.tsx
CHANGED
|
@@ -84,14 +84,15 @@ export const ToolbarButton = forwardRef(
|
|
|
84
84
|
}: ToolbarButtonProps,
|
|
85
85
|
ref: Ref<HTMLButtonElement>,
|
|
86
86
|
) => {
|
|
87
|
-
const { preventDefaultOnMouseDown } = useToolbarUI();
|
|
87
|
+
const { preventDefaultOnMouseDown, isDisabled: ctxDisabled } = useToolbarUI();
|
|
88
|
+
const disabled = Boolean(ctxDisabled || isDisabled);
|
|
88
89
|
|
|
89
90
|
return (
|
|
90
91
|
<Pressable
|
|
91
92
|
ref={ref}
|
|
92
93
|
xcss={cx(
|
|
93
94
|
styles.button,
|
|
94
|
-
|
|
95
|
+
disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
|
|
95
96
|
)}
|
|
96
97
|
aria-pressed={isSelected}
|
|
97
98
|
aria-expanded={ariaExpanded}
|
|
@@ -104,7 +105,7 @@ export const ToolbarButton = forwardRef(
|
|
|
104
105
|
onBlur={onBlur}
|
|
105
106
|
onFocus={onFocus}
|
|
106
107
|
testId={testId}
|
|
107
|
-
isDisabled={
|
|
108
|
+
isDisabled={disabled}
|
|
108
109
|
onMouseDown={(event) => {
|
|
109
110
|
if (preventDefaultOnMouseDown) {
|
|
110
111
|
event.preventDefault();
|