@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 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
@@ -185,7 +185,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
185
185
  };
186
186
  };
187
187
  function ContentComponent(_ref5) {
188
- var _pluginInjectionApi$f, _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
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/consistent-css-prop-usage
36
- var spacer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex: 1;\n padding: ", ";\n"])), "var(--ds-space-100, 8px)");
37
-
38
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
39
- var menuContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n min-width: ", "px;\n\n // temporary solution to retain spacing defined by @atlaskit/Item\n & button {\n min-height: ", ";\n padding: ", " ", " 7px;\n\n & > [data-item-elem-before] {\n margin-right: ", ";\n }\n }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
40
-
41
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
42
- var label = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n width: 100%;\n"])));
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: label
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: menuContainer
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: spacer
221
+ css: spacerStyles
211
222
  });
212
223
  }
213
224
  }]);
@@ -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
@@ -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, _templateObject13;
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 50px;\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)", 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)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n "]))));
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(_ref3) {
302
- var table = _ref3.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,
@@ -180,8 +180,7 @@ function ContentComponent({
180
180
  providerFactory,
181
181
  dispatchAnalyticsEvent
182
182
  }) {
183
- var _pluginInjectionApi$f, _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
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/consistent-css-prop-usage
21
- const spacer = css`
22
- display: flex;
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
- & button {
33
- min-height: ${"var(--ds-space-400, 32px)"};
34
- padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 7px;
35
-
36
- & > [data-item-elem-before] {
37
- margin-right: ${"var(--ds-space-050, 4px)"};
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
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
43
- const label = css`
44
- display: inline-block;
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: label
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: menuContainer
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: spacer
196
+ css: spacerStyles
202
197
  });
203
198
  }
204
199
  }
@@ -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
@@ -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 50px;
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
- display: flex;
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,
@@ -176,7 +176,7 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
176
176
  };
177
177
  };
178
178
  function ContentComponent(_ref5) {
179
- var _pluginInjectionApi$f, _configWithNodeInfo$c, _configWithNodeInfo$c2, _pluginInjectionApi$c, _pluginInjectionApi$d;
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/consistent-css-prop-usage
31
- var spacer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n padding: ", ";\n"])), "var(--ds-space-100, 8px)");
32
-
33
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
34
- var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n min-width: ", "px;\n\n // temporary solution to retain spacing defined by @atlaskit/Item\n & button {\n min-height: ", ";\n padding: ", " ", " 7px;\n\n & > [data-item-elem-before] {\n margin-right: ", ";\n }\n }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
35
-
36
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
37
- var label = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n"])));
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: label
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: menuContainer
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: spacer
217
+ css: spacerStyles
206
218
  });
207
219
  }
208
220
  }]);
@@ -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
@@ -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
@@ -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, _templateObject13;
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 50px;\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)", 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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n "]))));
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(_ref3) {
294
- var table = _ref3.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,
@@ -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';
@@ -1,6 +1,5 @@
1
1
  /** @jsx jsx */
2
- import React from 'react';
3
- import { Component } from 'react';
2
+ import React, { Component } from 'react';
4
3
  import { jsx } from '@emotion/react';
5
4
  export interface Props {
6
5
  mountPoint?: HTMLElement;
@@ -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 { FeatureFlags, OptionalPlugin, PluginInjectionAPIWithDependencies } from '@atlaskit/editor-common/types';
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';
@@ -1,6 +1,5 @@
1
1
  /** @jsx jsx */
2
- import React from 'react';
3
- import { Component } from 'react';
2
+ import React, { Component } from 'react';
4
3
  import { jsx } from '@emotion/react';
5
4
  export interface Props {
6
5
  mountPoint?: HTMLElement;
@@ -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 { FeatureFlags, OptionalPlugin, PluginInjectionAPIWithDependencies } from '@atlaskit/editor-common/types';
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.0.0",
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.3.0",
28
+ "@atlaskit/button": "^17.4.0",
30
29
  "@atlaskit/checkbox": "^13.0.0",
31
- "@atlaskit/editor-common": "^77.4.0",
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.3",
44
+ "@atlaskit/select": "^17.1.0",
47
45
  "@atlaskit/theme": "^12.6.0",
48
- "@atlaskit/tokens": "^1.36.0",
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",
@@ -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
- };
@@ -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
- });
@@ -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
- };