@atlaskit/editor-plugin-floating-toolbar 1.0.0 → 1.1.1
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/.eslintrc.js +18 -0
- package/CHANGELOG.md +37 -0
- package/dist/cjs/plugin.js +1 -3
- package/dist/cjs/ui/DropdownMenu.js +28 -17
- package/dist/cjs/ui/Select.js +2 -0
- package/dist/cjs/ui/Toolbar.js +7 -12
- package/dist/es2019/plugin.js +1 -3
- package/dist/es2019/ui/DropdownMenu.js +24 -29
- package/dist/es2019/ui/Input.js +1 -2
- package/dist/es2019/ui/Select.js +2 -0
- package/dist/es2019/ui/Toolbar.js +7 -17
- package/dist/esm/plugin.js +1 -3
- package/dist/esm/ui/DropdownMenu.js +27 -15
- package/dist/esm/ui/Input.js +1 -2
- package/dist/esm/ui/Select.js +2 -0
- package/dist/esm/ui/Toolbar.js +9 -16
- package/dist/types/types.d.ts +0 -2
- package/dist/types/ui/ExtensionsPlaceholder.d.ts +1 -2
- package/dist/types/ui/Input.d.ts +1 -2
- package/dist/types/ui/Toolbar.d.ts +1 -2
- package/dist/types-ts4.5/types.d.ts +0 -2
- package/dist/types-ts4.5/ui/ExtensionsPlaceholder.d.ts +1 -2
- package/dist/types-ts4.5/ui/Input.d.ts +1 -2
- package/dist/types-ts4.5/ui/Toolbar.d.ts +1 -2
- package/package.json +5 -7
- package/dist/cjs/ui/styles.js +0 -77
- package/dist/es2019/ui/styles.js +0 -64
- package/dist/esm/ui/styles.js +0 -68
- package/dist/types/ui/styles.d.ts +0 -20
- package/dist/types-ts4.5/ui/styles.d.ts +0 -20
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
rules: {
|
|
3
|
+
'@typescript-eslint/no-duplicate-imports': 'error',
|
|
4
|
+
'@typescript-eslint/no-explicit-any': 'warn',
|
|
5
|
+
'@atlaskit/design-system/ensure-design-token-usage/preview': [
|
|
6
|
+
'error',
|
|
7
|
+
{ domains: ['spacing'], shouldEnforceFallbacks: false },
|
|
8
|
+
],
|
|
9
|
+
},
|
|
10
|
+
overrides: [
|
|
11
|
+
{
|
|
12
|
+
files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
|
|
13
|
+
rules: {
|
|
14
|
+
'@typescript-eslint/no-explicit-any': 'off',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
};
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-floating-toolbar
|
|
2
2
|
|
|
3
|
+
## 1.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
|
|
8
|
+
|
|
9
|
+
## 1.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#72122](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72122) [`c3186450404a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3186450404a) - Breaking change:
|
|
14
|
+
|
|
15
|
+
## WHAT?:
|
|
16
|
+
|
|
17
|
+
Removing feature flags:
|
|
18
|
+
|
|
19
|
+
- singleLayout
|
|
20
|
+
- newInsertionBehaviour
|
|
21
|
+
- interactiveExpand
|
|
22
|
+
- findReplace
|
|
23
|
+
- findReplaceMatchCase
|
|
24
|
+
- extendFloatingToolbar
|
|
25
|
+
|
|
26
|
+
## WHY?:
|
|
27
|
+
|
|
28
|
+
Because the flags and props are unused/by default active. Removing them will reduce our maintenance burden
|
|
29
|
+
|
|
30
|
+
## HOW to update your code:
|
|
31
|
+
|
|
32
|
+
- If you were using the feature flag - the behaviour is now default and you can remove the flags
|
|
33
|
+
- If you were not using the feature flag - the behaviour is now default.
|
|
34
|
+
- If you have opted out of using the feature flag - we have been careful to ensure no-one has opted out of the behaviours. If you do have an issue please reach out to #help-editor.
|
|
35
|
+
|
|
36
|
+
### Patch Changes
|
|
37
|
+
|
|
38
|
+
- Updated dependencies
|
|
39
|
+
|
|
3
40
|
## 1.0.0
|
|
4
41
|
|
|
5
42
|
### Major Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -185,7 +185,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
|
|
|
185
185
|
};
|
|
186
186
|
};
|
|
187
187
|
function ContentComponent(_ref5) {
|
|
188
|
-
var
|
|
188
|
+
var _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
|
|
189
189
|
var pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
190
190
|
editorView = _ref5.editorView,
|
|
191
191
|
popupsMountPoint = _ref5.popupsMountPoint,
|
|
@@ -193,7 +193,6 @@ function ContentComponent(_ref5) {
|
|
|
193
193
|
popupsScrollableElement = _ref5.popupsScrollableElement,
|
|
194
194
|
providerFactory = _ref5.providerFactory,
|
|
195
195
|
dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
|
|
196
|
-
var featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
|
|
197
196
|
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode']),
|
|
198
197
|
floatingToolbarState = _useSharedPluginState.floatingToolbarState,
|
|
199
198
|
editorDisabledState = _useSharedPluginState.editorDisabledState,
|
|
@@ -314,7 +313,6 @@ function ContentComponent(_ref5) {
|
|
|
314
313
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
315
314
|
extensionsProvider: providers.extensionProvider,
|
|
316
315
|
scrollable: scrollable,
|
|
317
|
-
featureFlags: featureFlags,
|
|
318
316
|
api: pluginInjectionApi,
|
|
319
317
|
mediaAssistiveMessage: mediaAssistiveMessage
|
|
320
318
|
});
|
|
@@ -11,7 +11,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
|
|
|
11
11
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
12
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
13
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
14
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
14
|
var _react = require("react");
|
|
16
15
|
var _react2 = require("@emotion/react");
|
|
17
16
|
var _reactIntlNext = require("react-intl-next");
|
|
@@ -21,25 +20,37 @@ var _menu = require("@atlaskit/menu");
|
|
|
21
20
|
var _colors = require("@atlaskit/theme/colors");
|
|
22
21
|
var _constants = require("@atlaskit/theme/constants");
|
|
23
22
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
24
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
25
|
-
/** @jsx jsx */
|
|
26
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
27
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
28
23
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
29
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
24
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
25
|
+
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
30
26
|
var menuItemDimensions = exports.menuItemDimensions = {
|
|
31
27
|
width: 175,
|
|
32
28
|
height: 32
|
|
33
29
|
};
|
|
30
|
+
var spacerStyles = (0, _react2.css)({
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flex: 1,
|
|
33
|
+
padding: "var(--ds-space-100, 8px)"
|
|
34
|
+
});
|
|
34
35
|
|
|
35
|
-
// eslint-disable-next-line @atlaskit/design-system/
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
//
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
var
|
|
36
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
37
|
+
var menuContainerStyles = (0, _react2.css)({
|
|
38
|
+
minWidth: "".concat(menuItemDimensions.width, "px"),
|
|
39
|
+
// temporary solution to retain spacing defined by @atlaskit/Item
|
|
40
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
41
|
+
'& button': {
|
|
42
|
+
minHeight: "var(--ds-space-400, 32px)",
|
|
43
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 7px"),
|
|
44
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
45
|
+
'& > [data-item-elem-before]': {
|
|
46
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
var labelStyles = (0, _react2.css)({
|
|
51
|
+
display: 'inline-block',
|
|
52
|
+
width: '100%'
|
|
53
|
+
});
|
|
43
54
|
|
|
44
55
|
// TODO: Migrate away from gridSize
|
|
45
56
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -150,7 +161,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
|
|
|
150
161
|
onBlur: handleItemOnBlur
|
|
151
162
|
}, (0, _react2.jsx)("span", {
|
|
152
163
|
ref: labelRef,
|
|
153
|
-
css:
|
|
164
|
+
css: labelStyles
|
|
154
165
|
}, item.title));
|
|
155
166
|
if (tooltipContent) {
|
|
156
167
|
return (0, _react2.jsx)(_tooltip.default, {
|
|
@@ -179,7 +190,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
179
190
|
intl = _this$props.intl,
|
|
180
191
|
editorView = _this$props.editorView;
|
|
181
192
|
return (0, _react2.jsx)("div", {
|
|
182
|
-
css:
|
|
193
|
+
css: menuContainerStyles
|
|
183
194
|
}, items.filter(function (item) {
|
|
184
195
|
return !item.hidden;
|
|
185
196
|
}).map(function (item, idx) {
|
|
@@ -207,7 +218,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
207
218
|
});
|
|
208
219
|
}
|
|
209
220
|
return (0, _react2.jsx)("span", {
|
|
210
|
-
css:
|
|
221
|
+
css: spacerStyles
|
|
211
222
|
});
|
|
212
223
|
}
|
|
213
224
|
}]);
|
package/dist/cjs/ui/Select.js
CHANGED
|
@@ -34,7 +34,9 @@ function Search(props) {
|
|
|
34
34
|
var controlWrapper = (selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.select) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.controlRef) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.parentNode) || (selectRef === null || selectRef === void 0 || (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.controlRef) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.parentNode);
|
|
35
35
|
var menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
|
|
36
36
|
// since the portal is now outside, we need to position it as before
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
37
38
|
top: controlWrapper.offsetTop,
|
|
39
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
38
40
|
left: controlWrapper.offsetLeft,
|
|
39
41
|
height: controlWrapper.offsetHeight,
|
|
40
42
|
width: width
|
package/dist/cjs/ui/Toolbar.js
CHANGED
|
@@ -34,7 +34,7 @@ var _Input = _interopRequireDefault(require("./Input"));
|
|
|
34
34
|
var _ScrollButtons = require("./ScrollButtons");
|
|
35
35
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
36
36
|
var _Separator = _interopRequireDefault(require("./Separator"));
|
|
37
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12
|
|
37
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
38
38
|
/** @jsx jsx */
|
|
39
39
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
40
40
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -54,7 +54,6 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
54
54
|
node = _ref.node,
|
|
55
55
|
setDisableScroll = _ref.setDisableScroll,
|
|
56
56
|
mountRef = _ref.mountRef,
|
|
57
|
-
featureFlags = _ref.featureFlags,
|
|
58
57
|
api = _ref.api;
|
|
59
58
|
var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
60
59
|
return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
|
|
@@ -216,11 +215,6 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
216
215
|
if (!editorView || !extensionsProvider) {
|
|
217
216
|
return null;
|
|
218
217
|
}
|
|
219
|
-
var _ref2 = featureFlags || {},
|
|
220
|
-
extendFloatingToolbar = _ref2.extendFloatingToolbar;
|
|
221
|
-
if (!extendFloatingToolbar) {
|
|
222
|
-
return null;
|
|
223
|
-
}
|
|
224
218
|
return (0, _react2.jsx)(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
|
|
225
219
|
key: idx,
|
|
226
220
|
node: node,
|
|
@@ -252,7 +246,9 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
|
|
|
252
246
|
|
|
253
247
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
254
248
|
var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
|
|
255
|
-
return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0
|
|
249
|
+
return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0 ", ";\n > div {\n > div:first-child {\n ", "\n }\n > div:last-child {\n margin-right: ", ";\n }\n }\n "])), scrollDisabled ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n overflow-x: auto;\n overflow-y: hidden;\n "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n "])), "var(--ds-space-050, 4px)") : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : (0, _react2.css)({
|
|
250
|
+
display: 'flex'
|
|
251
|
+
}));
|
|
256
252
|
};
|
|
257
253
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
258
254
|
var Toolbar = /*#__PURE__*/function (_Component) {
|
|
@@ -298,8 +294,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
298
294
|
// this prevents https://product-fabric.atlassian.net/browse/ED-10207
|
|
299
295
|
(0, _createClass2.default)(Toolbar, [{
|
|
300
296
|
key: "resetStyling",
|
|
301
|
-
value: function resetStyling(
|
|
302
|
-
var table =
|
|
297
|
+
value: function resetStyling(_ref2) {
|
|
298
|
+
var table = _ref2.table;
|
|
303
299
|
if (this.props.editorView) {
|
|
304
300
|
var _this$props$api;
|
|
305
301
|
var _this$props$editorVie2 = this.props.editorView,
|
|
@@ -410,8 +406,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
410
406
|
}, (0, _react2.jsx)(ToolbarItems, (0, _extends2.default)({}, this.props, {
|
|
411
407
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
412
408
|
mountRef: this.mountRef,
|
|
413
|
-
mounted: this.state.mounted
|
|
414
|
-
featureFlags: this.props.featureFlags
|
|
409
|
+
mounted: this.state.mounted
|
|
415
410
|
}))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
|
|
416
411
|
intl: intl,
|
|
417
412
|
scrollContainerRef: this.scrollContainerRef,
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -180,8 +180,7 @@ function ContentComponent({
|
|
|
180
180
|
providerFactory,
|
|
181
181
|
dispatchAnalyticsEvent
|
|
182
182
|
}) {
|
|
183
|
-
var
|
|
184
|
-
const featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
|
|
183
|
+
var _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
|
|
185
184
|
const {
|
|
186
185
|
floatingToolbarState,
|
|
187
186
|
editorDisabledState,
|
|
@@ -299,7 +298,6 @@ function ContentComponent({
|
|
|
299
298
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
300
299
|
extensionsProvider: providers.extensionProvider,
|
|
301
300
|
scrollable: scrollable,
|
|
302
|
-
featureFlags: featureFlags,
|
|
303
301
|
api: pluginInjectionApi,
|
|
304
302
|
mediaAssistiveMessage: mediaAssistiveMessage
|
|
305
303
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import { createRef, useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import { Component } from 'react';
|
|
2
|
+
import { Component, createRef, useCallback, useEffect, useState } from 'react';
|
|
4
3
|
import { css, jsx } from '@emotion/react';
|
|
5
4
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
6
5
|
|
|
@@ -16,34 +15,30 @@ export const menuItemDimensions = {
|
|
|
16
15
|
width: 175,
|
|
17
16
|
height: 32
|
|
18
17
|
};
|
|
18
|
+
const spacerStyles = css({
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flex: 1,
|
|
21
|
+
padding: "var(--ds-space-100, 8px)"
|
|
22
|
+
});
|
|
19
23
|
|
|
20
|
-
// eslint-disable-next-line @atlaskit/design-system/
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
flex: 1;
|
|
24
|
-
padding: ${"var(--ds-space-100, 8px)"};
|
|
25
|
-
`;
|
|
26
|
-
|
|
27
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
28
|
-
const menuContainer = css`
|
|
29
|
-
min-width: ${menuItemDimensions.width}px;
|
|
30
|
-
|
|
24
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
25
|
+
const menuContainerStyles = css({
|
|
26
|
+
minWidth: `${menuItemDimensions.width}px`,
|
|
31
27
|
// temporary solution to retain spacing defined by @atlaskit/Item
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
29
|
+
'& button': {
|
|
30
|
+
minHeight: "var(--ds-space-400, 32px)",
|
|
31
|
+
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 7px`,
|
|
32
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
33
|
+
'& > [data-item-elem-before]': {
|
|
34
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
width: 100%;
|
|
46
|
-
`;
|
|
37
|
+
});
|
|
38
|
+
const labelStyles = css({
|
|
39
|
+
display: 'inline-block',
|
|
40
|
+
width: '100%'
|
|
41
|
+
});
|
|
47
42
|
|
|
48
43
|
// TODO: Migrate away from gridSize
|
|
49
44
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -152,7 +147,7 @@ const DropdownMenuItem = ({
|
|
|
152
147
|
onBlur: handleItemOnBlur
|
|
153
148
|
}, jsx("span", {
|
|
154
149
|
ref: labelRef,
|
|
155
|
-
css:
|
|
150
|
+
css: labelStyles
|
|
156
151
|
}, item.title));
|
|
157
152
|
if (tooltipContent) {
|
|
158
153
|
return jsx(Tooltip, {
|
|
@@ -173,7 +168,7 @@ class Dropdown extends Component {
|
|
|
173
168
|
editorView
|
|
174
169
|
} = this.props;
|
|
175
170
|
return jsx("div", {
|
|
176
|
-
css:
|
|
171
|
+
css: menuContainerStyles
|
|
177
172
|
}, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
|
|
178
173
|
key: idx,
|
|
179
174
|
item: item,
|
|
@@ -198,7 +193,7 @@ class Dropdown extends Component {
|
|
|
198
193
|
});
|
|
199
194
|
}
|
|
200
195
|
return jsx("span", {
|
|
201
|
-
css:
|
|
196
|
+
css: spacerStyles
|
|
202
197
|
});
|
|
203
198
|
}
|
|
204
199
|
}
|
package/dist/es2019/ui/Input.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
/** @jsx jsx */
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { Component } from 'react';
|
|
3
|
+
import React, { Component } from 'react';
|
|
5
4
|
import { jsx } from '@emotion/react';
|
|
6
5
|
import { panelTextInput } from '@atlaskit/editor-common/ui';
|
|
7
6
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
package/dist/es2019/ui/Select.js
CHANGED
|
@@ -20,7 +20,9 @@ export default function Search(props) {
|
|
|
20
20
|
const controlWrapper = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : (_selectRef$current$se = _selectRef$current.select) === null || _selectRef$current$se === void 0 ? void 0 : (_selectRef$current$se2 = _selectRef$current$se.controlRef) === null || _selectRef$current$se2 === void 0 ? void 0 : _selectRef$current$se2.parentNode) || (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : (_selectRef$current2$s = _selectRef$current2.select) === null || _selectRef$current2$s === void 0 ? void 0 : (_selectRef$current2$s2 = _selectRef$current2$s.select) === null || _selectRef$current2$s2 === void 0 ? void 0 : (_selectRef$current2$s3 = _selectRef$current2$s2.controlRef) === null || _selectRef$current2$s3 === void 0 ? void 0 : _selectRef$current2$s3.parentNode);
|
|
21
21
|
const menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
|
|
22
22
|
// since the portal is now outside, we need to position it as before
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
23
24
|
top: controlWrapper.offsetTop,
|
|
25
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
24
26
|
left: controlWrapper.offsetLeft,
|
|
25
27
|
height: controlWrapper.offsetHeight,
|
|
26
28
|
width
|
|
@@ -5,12 +5,10 @@ import React, { Component } from 'react';
|
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { injectIntl } from 'react-intl-next';
|
|
7
7
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
8
|
-
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
|
|
9
|
-
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
8
|
+
import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
10
9
|
import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
|
|
11
10
|
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
12
|
-
import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
13
|
-
import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
|
|
11
|
+
import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
14
12
|
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
15
13
|
import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
|
|
16
14
|
import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
|
|
@@ -36,7 +34,6 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
|
36
34
|
node,
|
|
37
35
|
setDisableScroll,
|
|
38
36
|
mountRef,
|
|
39
|
-
featureFlags,
|
|
40
37
|
api
|
|
41
38
|
}) => {
|
|
42
39
|
const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
@@ -181,12 +178,6 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
|
181
178
|
if (!editorView || !extensionsProvider) {
|
|
182
179
|
return null;
|
|
183
180
|
}
|
|
184
|
-
const {
|
|
185
|
-
extendFloatingToolbar
|
|
186
|
-
} = featureFlags || {};
|
|
187
|
-
if (!extendFloatingToolbar) {
|
|
188
|
-
return null;
|
|
189
|
-
}
|
|
190
181
|
return jsx(ExtensionsPlaceholder, {
|
|
191
182
|
key: idx,
|
|
192
183
|
node: node,
|
|
@@ -248,7 +239,7 @@ const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => cs
|
|
|
248
239
|
overflow-y: hidden;
|
|
249
240
|
`}
|
|
250
241
|
-webkit-overflow-scrolling: touch;
|
|
251
|
-
padding: ${"var(--ds-space-050, 4px)"} 0
|
|
242
|
+
padding: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"};
|
|
252
243
|
> div {
|
|
253
244
|
> div:first-child {
|
|
254
245
|
${firstElementIsSelect ? css`
|
|
@@ -261,9 +252,9 @@ const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => cs
|
|
|
261
252
|
margin-right: ${"var(--ds-space-100, 8px)"};
|
|
262
253
|
}
|
|
263
254
|
}
|
|
264
|
-
` : css
|
|
265
|
-
|
|
266
|
-
|
|
255
|
+
` : css({
|
|
256
|
+
display: 'flex'
|
|
257
|
+
})}
|
|
267
258
|
`;
|
|
268
259
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
269
260
|
class Toolbar extends Component {
|
|
@@ -406,8 +397,7 @@ class Toolbar extends Component {
|
|
|
406
397
|
}, jsx(ToolbarItems, _extends({}, this.props, {
|
|
407
398
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
408
399
|
mountRef: this.mountRef,
|
|
409
|
-
mounted: this.state.mounted
|
|
410
|
-
featureFlags: this.props.featureFlags
|
|
400
|
+
mounted: this.state.mounted
|
|
411
401
|
}))), scrollable && jsx(ScrollButtons, {
|
|
412
402
|
intl: intl,
|
|
413
403
|
scrollContainerRef: this.scrollContainerRef,
|
package/dist/esm/plugin.js
CHANGED
|
@@ -176,7 +176,7 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
|
|
|
176
176
|
};
|
|
177
177
|
};
|
|
178
178
|
function ContentComponent(_ref5) {
|
|
179
|
-
var
|
|
179
|
+
var _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
|
|
180
180
|
var pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
181
181
|
editorView = _ref5.editorView,
|
|
182
182
|
popupsMountPoint = _ref5.popupsMountPoint,
|
|
@@ -184,7 +184,6 @@ function ContentComponent(_ref5) {
|
|
|
184
184
|
popupsScrollableElement = _ref5.popupsScrollableElement,
|
|
185
185
|
providerFactory = _ref5.providerFactory,
|
|
186
186
|
dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
|
|
187
|
-
var featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
|
|
188
187
|
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode']),
|
|
189
188
|
floatingToolbarState = _useSharedPluginState.floatingToolbarState,
|
|
190
189
|
editorDisabledState = _useSharedPluginState.editorDisabledState,
|
|
@@ -305,7 +304,6 @@ function ContentComponent(_ref5) {
|
|
|
305
304
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
306
305
|
extensionsProvider: providers.extensionProvider,
|
|
307
306
|
scrollable: scrollable,
|
|
308
|
-
featureFlags: featureFlags,
|
|
309
307
|
api: pluginInjectionApi,
|
|
310
308
|
mediaAssistiveMessage: mediaAssistiveMessage
|
|
311
309
|
});
|
|
@@ -4,13 +4,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
4
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
6
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
7
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
9
7
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
8
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
11
9
|
/** @jsx jsx */
|
|
12
|
-
import { createRef, useCallback, useEffect, useState } from 'react';
|
|
13
|
-
import { Component } from 'react';
|
|
10
|
+
import { Component, createRef, useCallback, useEffect, useState } from 'react';
|
|
14
11
|
import { css, jsx } from '@emotion/react';
|
|
15
12
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
16
13
|
|
|
@@ -26,15 +23,30 @@ export var menuItemDimensions = {
|
|
|
26
23
|
width: 175,
|
|
27
24
|
height: 32
|
|
28
25
|
};
|
|
26
|
+
var spacerStyles = css({
|
|
27
|
+
display: 'flex',
|
|
28
|
+
flex: 1,
|
|
29
|
+
padding: "var(--ds-space-100, 8px)"
|
|
30
|
+
});
|
|
29
31
|
|
|
30
|
-
// eslint-disable-next-line @atlaskit/design-system/
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
//
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
32
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
33
|
+
var menuContainerStyles = css({
|
|
34
|
+
minWidth: "".concat(menuItemDimensions.width, "px"),
|
|
35
|
+
// temporary solution to retain spacing defined by @atlaskit/Item
|
|
36
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
37
|
+
'& button': {
|
|
38
|
+
minHeight: "var(--ds-space-400, 32px)",
|
|
39
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 7px"),
|
|
40
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
41
|
+
'& > [data-item-elem-before]': {
|
|
42
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
var labelStyles = css({
|
|
47
|
+
display: 'inline-block',
|
|
48
|
+
width: '100%'
|
|
49
|
+
});
|
|
38
50
|
|
|
39
51
|
// TODO: Migrate away from gridSize
|
|
40
52
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -145,7 +157,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
|
|
|
145
157
|
onBlur: handleItemOnBlur
|
|
146
158
|
}, jsx("span", {
|
|
147
159
|
ref: labelRef,
|
|
148
|
-
css:
|
|
160
|
+
css: labelStyles
|
|
149
161
|
}, item.title));
|
|
150
162
|
if (tooltipContent) {
|
|
151
163
|
return jsx(Tooltip, {
|
|
@@ -174,7 +186,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
174
186
|
intl = _this$props.intl,
|
|
175
187
|
editorView = _this$props.editorView;
|
|
176
188
|
return jsx("div", {
|
|
177
|
-
css:
|
|
189
|
+
css: menuContainerStyles
|
|
178
190
|
}, items.filter(function (item) {
|
|
179
191
|
return !item.hidden;
|
|
180
192
|
}).map(function (item, idx) {
|
|
@@ -202,7 +214,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
202
214
|
});
|
|
203
215
|
}
|
|
204
216
|
return jsx("span", {
|
|
205
|
-
css:
|
|
217
|
+
css: spacerStyles
|
|
206
218
|
});
|
|
207
219
|
}
|
|
208
220
|
}]);
|
package/dist/esm/ui/Input.js
CHANGED
|
@@ -8,8 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
8
8
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
9
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
10
|
/** @jsx jsx */
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { Component } from 'react';
|
|
11
|
+
import React, { Component } from 'react';
|
|
13
12
|
import { jsx } from '@emotion/react';
|
|
14
13
|
import { panelTextInput } from '@atlaskit/editor-common/ui';
|
|
15
14
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
package/dist/esm/ui/Select.js
CHANGED
|
@@ -24,7 +24,9 @@ export default function Search(props) {
|
|
|
24
24
|
var controlWrapper = (selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.select) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.controlRef) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.parentNode) || (selectRef === null || selectRef === void 0 || (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.controlRef) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.parentNode);
|
|
25
25
|
var menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
|
|
26
26
|
// since the portal is now outside, we need to position it as before
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
27
28
|
top: controlWrapper.offsetTop,
|
|
29
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
28
30
|
left: controlWrapper.offsetLeft,
|
|
29
31
|
height: controlWrapper.offsetHeight,
|
|
30
32
|
width: width
|
package/dist/esm/ui/Toolbar.js
CHANGED
|
@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
7
7
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
8
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
9
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
11
11
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
12
12
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
13
13
|
/** @jsx jsx */
|
|
@@ -15,12 +15,10 @@ import React, { Component } from 'react';
|
|
|
15
15
|
import { css, jsx } from '@emotion/react';
|
|
16
16
|
import { injectIntl } from 'react-intl-next';
|
|
17
17
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
18
|
-
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
|
|
19
|
-
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
18
|
+
import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
20
19
|
import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
|
|
21
20
|
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
22
|
-
import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
23
|
-
import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
|
|
21
|
+
import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
24
22
|
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
25
23
|
import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
|
|
26
24
|
import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
|
|
@@ -46,7 +44,6 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
46
44
|
node = _ref.node,
|
|
47
45
|
setDisableScroll = _ref.setDisableScroll,
|
|
48
46
|
mountRef = _ref.mountRef,
|
|
49
|
-
featureFlags = _ref.featureFlags,
|
|
50
47
|
api = _ref.api;
|
|
51
48
|
var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
52
49
|
return jsx(ButtonGroup, null, items.filter(function (item) {
|
|
@@ -208,11 +205,6 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
208
205
|
if (!editorView || !extensionsProvider) {
|
|
209
206
|
return null;
|
|
210
207
|
}
|
|
211
|
-
var _ref2 = featureFlags || {},
|
|
212
|
-
extendFloatingToolbar = _ref2.extendFloatingToolbar;
|
|
213
|
-
if (!extendFloatingToolbar) {
|
|
214
|
-
return null;
|
|
215
|
-
}
|
|
216
208
|
return jsx(ExtensionsPlaceholder, {
|
|
217
209
|
key: idx,
|
|
218
210
|
node: node,
|
|
@@ -244,7 +236,9 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
|
|
|
244
236
|
|
|
245
237
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
246
238
|
var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
|
|
247
|
-
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0
|
|
239
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0 ", ";\n > div {\n > div:first-child {\n ", "\n }\n > div:last-child {\n margin-right: ", ";\n }\n }\n "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n overflow: hidden;\n "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n overflow-x: auto;\n overflow-y: hidden;\n "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css({
|
|
240
|
+
display: 'flex'
|
|
241
|
+
}));
|
|
248
242
|
};
|
|
249
243
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
250
244
|
var Toolbar = /*#__PURE__*/function (_Component) {
|
|
@@ -290,8 +284,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
290
284
|
// this prevents https://product-fabric.atlassian.net/browse/ED-10207
|
|
291
285
|
_createClass(Toolbar, [{
|
|
292
286
|
key: "resetStyling",
|
|
293
|
-
value: function resetStyling(
|
|
294
|
-
var table =
|
|
287
|
+
value: function resetStyling(_ref2) {
|
|
288
|
+
var table = _ref2.table;
|
|
295
289
|
if (this.props.editorView) {
|
|
296
290
|
var _this$props$api;
|
|
297
291
|
var _this$props$editorVie2 = this.props.editorView,
|
|
@@ -402,8 +396,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
402
396
|
}, jsx(ToolbarItems, _extends({}, this.props, {
|
|
403
397
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
404
398
|
mountRef: this.mountRef,
|
|
405
|
-
mounted: this.state.mounted
|
|
406
|
-
featureFlags: this.props.featureFlags
|
|
399
|
+
mounted: this.state.mounted
|
|
407
400
|
}))), scrollable && jsx(ScrollButtons, {
|
|
408
401
|
intl: intl,
|
|
409
402
|
scrollContainerRef: this.scrollContainerRef,
|
package/dist/types/types.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
|
5
5
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
6
6
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
7
7
|
import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
|
|
8
|
-
import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
|
|
9
8
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
10
9
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
11
10
|
export type ConfigWithNodeInfo = {
|
|
@@ -26,7 +25,6 @@ export type ForceFocusSelector = (selector: string | null) => (tr: Transaction)
|
|
|
26
25
|
*/
|
|
27
26
|
export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
|
|
28
27
|
dependencies: [
|
|
29
|
-
OptionalPlugin<FeatureFlagsPlugin>,
|
|
30
28
|
DecorationsPlugin,
|
|
31
29
|
OptionalPlugin<ContextPanelPlugin>,
|
|
32
30
|
OptionalPlugin<ExtensionPlugin>,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
3
|
-
import type { ExtensionAPI } from '@atlaskit/editor-common/extensions';
|
|
2
|
+
import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
4
3
|
import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
|
|
5
4
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
5
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
package/dist/types/ui/Input.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
5
5
|
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
6
6
|
import type { Item } from '@atlaskit/editor-common/floating-toolbar';
|
|
7
7
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
8
|
-
import type {
|
|
8
|
+
import type { OptionalPlugin, PluginInjectionAPIWithDependencies } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
10
10
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
11
11
|
import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
|
|
@@ -27,7 +27,6 @@ export interface Props {
|
|
|
27
27
|
node: Node;
|
|
28
28
|
extensionsProvider?: Promise<ExtensionProvider>;
|
|
29
29
|
scrollable?: boolean;
|
|
30
|
-
featureFlags: FeatureFlags;
|
|
31
30
|
api: PluginInjectionAPIWithDependencies<[
|
|
32
31
|
typeof decorationsPlugin,
|
|
33
32
|
OptionalPlugin<typeof contextPanelPlugin>,
|
|
@@ -5,7 +5,6 @@ import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
|
5
5
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
6
6
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
7
7
|
import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
|
|
8
|
-
import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
|
|
9
8
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
10
9
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
11
10
|
export type ConfigWithNodeInfo = {
|
|
@@ -26,7 +25,6 @@ export type ForceFocusSelector = (selector: string | null) => (tr: Transaction)
|
|
|
26
25
|
*/
|
|
27
26
|
export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
|
|
28
27
|
dependencies: [
|
|
29
|
-
OptionalPlugin<FeatureFlagsPlugin>,
|
|
30
28
|
DecorationsPlugin,
|
|
31
29
|
OptionalPlugin<ContextPanelPlugin>,
|
|
32
30
|
OptionalPlugin<ExtensionPlugin>,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
3
|
-
import type { ExtensionAPI } from '@atlaskit/editor-common/extensions';
|
|
2
|
+
import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
4
3
|
import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
|
|
5
4
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
5
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -5,7 +5,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
5
5
|
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
6
6
|
import type { Item } from '@atlaskit/editor-common/floating-toolbar';
|
|
7
7
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
8
|
-
import type {
|
|
8
|
+
import type { OptionalPlugin, PluginInjectionAPIWithDependencies } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
10
10
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
11
11
|
import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
|
|
@@ -27,7 +27,6 @@ export interface Props {
|
|
|
27
27
|
node: Node;
|
|
28
28
|
extensionsProvider?: Promise<ExtensionProvider>;
|
|
29
29
|
scrollable?: boolean;
|
|
30
|
-
featureFlags: FeatureFlags;
|
|
31
30
|
api: PluginInjectionAPIWithDependencies<[
|
|
32
31
|
typeof decorationsPlugin,
|
|
33
32
|
OptionalPlugin<typeof contextPanelPlugin>,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-floating-toolbar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Floating toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -24,11 +24,10 @@
|
|
|
24
24
|
".": "./src/index.ts"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/adf-schema": "^35.5.1",
|
|
28
27
|
"@atlaskit/adf-utils": "^19.0.0",
|
|
29
|
-
"@atlaskit/button": "^17.
|
|
28
|
+
"@atlaskit/button": "^17.4.0",
|
|
30
29
|
"@atlaskit/checkbox": "^13.0.0",
|
|
31
|
-
"@atlaskit/editor-common": "^
|
|
30
|
+
"@atlaskit/editor-common": "^78.0.0",
|
|
32
31
|
"@atlaskit/editor-palette": "1.5.2",
|
|
33
32
|
"@atlaskit/editor-plugin-context-panel": "^1.0.0",
|
|
34
33
|
"@atlaskit/editor-plugin-copy-button": "^1.0.0",
|
|
@@ -36,16 +35,15 @@
|
|
|
36
35
|
"@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
|
|
37
36
|
"@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
|
|
38
37
|
"@atlaskit/editor-plugin-extension": "^1.0.0",
|
|
39
|
-
"@atlaskit/editor-plugin-feature-flags": "^1.0.0",
|
|
40
38
|
"@atlaskit/editor-plugin-table": "^7.3.0",
|
|
41
39
|
"@atlaskit/editor-prosemirror": "3.0.0",
|
|
42
40
|
"@atlaskit/emoji": "^67.6.0",
|
|
43
41
|
"@atlaskit/icon": "^22.0.0",
|
|
44
42
|
"@atlaskit/menu": "^2.1.0",
|
|
45
43
|
"@atlaskit/modal-dialog": "^12.10.0",
|
|
46
|
-
"@atlaskit/select": "^17.0
|
|
44
|
+
"@atlaskit/select": "^17.1.0",
|
|
47
45
|
"@atlaskit/theme": "^12.6.0",
|
|
48
|
-
"@atlaskit/tokens": "^1.
|
|
46
|
+
"@atlaskit/tokens": "^1.37.0",
|
|
49
47
|
"@atlaskit/tooltip": "^18.1.0",
|
|
50
48
|
"@babel/runtime": "^7.0.0",
|
|
51
49
|
"@emotion/react": "^11.7.1",
|
package/dist/cjs/ui/styles.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.iconOnlySpacing = exports.getButtonStyles = void 0;
|
|
8
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
9
|
-
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
10
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
-
var background = {
|
|
13
|
-
danger: {
|
|
14
|
-
default: {
|
|
15
|
-
light: 'inherit',
|
|
16
|
-
dark: 'inherit'
|
|
17
|
-
},
|
|
18
|
-
hover: {
|
|
19
|
-
light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
|
|
20
|
-
dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
|
|
21
|
-
},
|
|
22
|
-
active: {
|
|
23
|
-
light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
|
|
24
|
-
dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
var color = {
|
|
29
|
-
danger: {
|
|
30
|
-
default: {
|
|
31
|
-
light: "var(--ds-icon, ".concat(colors.N400, ")"),
|
|
32
|
-
dark: "var(--ds-icon, ".concat(colors.DN400, ")")
|
|
33
|
-
},
|
|
34
|
-
hover: {
|
|
35
|
-
light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
|
|
36
|
-
dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
|
|
37
|
-
},
|
|
38
|
-
active: {
|
|
39
|
-
light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
|
|
40
|
-
dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
var getStyles = function getStyles(property, _ref) {
|
|
45
|
-
var _ref$appearance = _ref.appearance,
|
|
46
|
-
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
47
|
-
_ref$state = _ref.state,
|
|
48
|
-
state = _ref$state === void 0 ? 'default' : _ref$state,
|
|
49
|
-
_ref$mode = _ref.mode,
|
|
50
|
-
mode = _ref$mode === void 0 ? 'light' : _ref$mode;
|
|
51
|
-
if (!property[appearance] || !property[appearance][state]) {
|
|
52
|
-
return 'initial';
|
|
53
|
-
}
|
|
54
|
-
return property[appearance][state][mode];
|
|
55
|
-
};
|
|
56
|
-
var iconOnlySpacing = exports.iconOnlySpacing = {
|
|
57
|
-
'&&': {
|
|
58
|
-
padding: '0px',
|
|
59
|
-
/**
|
|
60
|
-
Increased specificity here because css for .hyperlink-open-link defined in
|
|
61
|
-
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
|
|
62
|
-
overrides padding left-right 2px with 4px.
|
|
63
|
-
*/
|
|
64
|
-
'&&[href]': {
|
|
65
|
-
padding: '0 2px'
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
'& > span': {
|
|
69
|
-
margin: '0px'
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
var getButtonStyles = exports.getButtonStyles = function getButtonStyles(props) {
|
|
73
|
-
return {
|
|
74
|
-
background: getStyles(background, props),
|
|
75
|
-
color: getStyles(color, props)
|
|
76
|
-
};
|
|
77
|
-
};
|
package/dist/es2019/ui/styles.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { hexToRgba } from '@atlaskit/adf-schema';
|
|
2
|
-
import * as colors from '@atlaskit/theme/colors';
|
|
3
|
-
const background = {
|
|
4
|
-
danger: {
|
|
5
|
-
default: {
|
|
6
|
-
light: 'inherit',
|
|
7
|
-
dark: 'inherit'
|
|
8
|
-
},
|
|
9
|
-
hover: {
|
|
10
|
-
light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
|
|
11
|
-
dark: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`
|
|
12
|
-
},
|
|
13
|
-
active: {
|
|
14
|
-
light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`,
|
|
15
|
-
dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
const color = {
|
|
20
|
-
danger: {
|
|
21
|
-
default: {
|
|
22
|
-
light: `var(--ds-icon, ${colors.N400})`,
|
|
23
|
-
dark: `var(--ds-icon, ${colors.DN400})`
|
|
24
|
-
},
|
|
25
|
-
hover: {
|
|
26
|
-
light: `var(--ds-icon-danger, ${colors.R400})`,
|
|
27
|
-
dark: `var(--ds-icon-danger, ${colors.R400})`
|
|
28
|
-
},
|
|
29
|
-
active: {
|
|
30
|
-
light: `var(--ds-icon-danger, ${colors.R400})`,
|
|
31
|
-
dark: `var(--ds-icon-danger, ${colors.R400})`
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const getStyles = (property, {
|
|
36
|
-
appearance = 'default',
|
|
37
|
-
state = 'default',
|
|
38
|
-
mode = 'light'
|
|
39
|
-
}) => {
|
|
40
|
-
if (!property[appearance] || !property[appearance][state]) {
|
|
41
|
-
return 'initial';
|
|
42
|
-
}
|
|
43
|
-
return property[appearance][state][mode];
|
|
44
|
-
};
|
|
45
|
-
export const iconOnlySpacing = {
|
|
46
|
-
'&&': {
|
|
47
|
-
padding: '0px',
|
|
48
|
-
/**
|
|
49
|
-
Increased specificity here because css for .hyperlink-open-link defined in
|
|
50
|
-
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
|
|
51
|
-
overrides padding left-right 2px with 4px.
|
|
52
|
-
*/
|
|
53
|
-
'&&[href]': {
|
|
54
|
-
padding: '0 2px'
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
'& > span': {
|
|
58
|
-
margin: '0px'
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
export const getButtonStyles = props => ({
|
|
62
|
-
background: getStyles(background, props),
|
|
63
|
-
color: getStyles(color, props)
|
|
64
|
-
});
|
package/dist/esm/ui/styles.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { hexToRgba } from '@atlaskit/adf-schema';
|
|
2
|
-
import * as colors from '@atlaskit/theme/colors';
|
|
3
|
-
var background = {
|
|
4
|
-
danger: {
|
|
5
|
-
default: {
|
|
6
|
-
light: 'inherit',
|
|
7
|
-
dark: 'inherit'
|
|
8
|
-
},
|
|
9
|
-
hover: {
|
|
10
|
-
light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
|
|
11
|
-
dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
|
|
12
|
-
},
|
|
13
|
-
active: {
|
|
14
|
-
light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")"),
|
|
15
|
-
dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")")
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
var color = {
|
|
20
|
-
danger: {
|
|
21
|
-
default: {
|
|
22
|
-
light: "var(--ds-icon, ".concat(colors.N400, ")"),
|
|
23
|
-
dark: "var(--ds-icon, ".concat(colors.DN400, ")")
|
|
24
|
-
},
|
|
25
|
-
hover: {
|
|
26
|
-
light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
|
|
27
|
-
dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
|
|
28
|
-
},
|
|
29
|
-
active: {
|
|
30
|
-
light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
|
|
31
|
-
dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
var getStyles = function getStyles(property, _ref) {
|
|
36
|
-
var _ref$appearance = _ref.appearance,
|
|
37
|
-
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
38
|
-
_ref$state = _ref.state,
|
|
39
|
-
state = _ref$state === void 0 ? 'default' : _ref$state,
|
|
40
|
-
_ref$mode = _ref.mode,
|
|
41
|
-
mode = _ref$mode === void 0 ? 'light' : _ref$mode;
|
|
42
|
-
if (!property[appearance] || !property[appearance][state]) {
|
|
43
|
-
return 'initial';
|
|
44
|
-
}
|
|
45
|
-
return property[appearance][state][mode];
|
|
46
|
-
};
|
|
47
|
-
export var iconOnlySpacing = {
|
|
48
|
-
'&&': {
|
|
49
|
-
padding: '0px',
|
|
50
|
-
/**
|
|
51
|
-
Increased specificity here because css for .hyperlink-open-link defined in
|
|
52
|
-
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
|
|
53
|
-
overrides padding left-right 2px with 4px.
|
|
54
|
-
*/
|
|
55
|
-
'&&[href]': {
|
|
56
|
-
padding: '0 2px'
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
'& > span': {
|
|
60
|
-
margin: '0px'
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
export var getButtonStyles = function getButtonStyles(props) {
|
|
64
|
-
return {
|
|
65
|
-
background: getStyles(background, props),
|
|
66
|
-
color: getStyles(color, props)
|
|
67
|
-
};
|
|
68
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare const iconOnlySpacing: {
|
|
2
|
-
'&&': {
|
|
3
|
-
padding: string;
|
|
4
|
-
/**
|
|
5
|
-
Increased specificity here because css for .hyperlink-open-link defined in
|
|
6
|
-
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
|
|
7
|
-
overrides padding left-right 2px with 4px.
|
|
8
|
-
*/
|
|
9
|
-
'&&[href]': {
|
|
10
|
-
padding: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
'& > span': {
|
|
14
|
-
margin: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const getButtonStyles: (props: any) => {
|
|
18
|
-
background: any;
|
|
19
|
-
color: any;
|
|
20
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare const iconOnlySpacing: {
|
|
2
|
-
'&&': {
|
|
3
|
-
padding: string;
|
|
4
|
-
/**
|
|
5
|
-
Increased specificity here because css for .hyperlink-open-link defined in
|
|
6
|
-
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
|
|
7
|
-
overrides padding left-right 2px with 4px.
|
|
8
|
-
*/
|
|
9
|
-
'&&[href]': {
|
|
10
|
-
padding: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
'& > span': {
|
|
14
|
-
margin: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const getButtonStyles: (props: any) => {
|
|
18
|
-
background: any;
|
|
19
|
-
color: any;
|
|
20
|
-
};
|