@atlaskit/editor-plugin-floating-toolbar 1.9.1 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.10.0
+
+### Minor Changes
+
+- [`3ac0ae73c0d52`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ac0ae73c0d52) -
+  [ED-24499] Add Turn into dropdown button to text selection toolbar for
+  platform_editor_basic_text_transformations experiment. This button will be used to provide options
+  to transform selected texts/inline nodes into other elements (e.g. expand) containing the content.
+
+### Patch Changes
+
+- [#126418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126418)
+  [`dc10688cd20b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc10688cd20b6) -
+  [ux] Migrate typography with new ADS token and primitive
+- Updated dependencies
+
+## 1.9.2
+
+### Patch Changes
+
+- [#125082](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125082)
+  [`ba605ab4da0e1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba605ab4da0e1) -
+  [ED-23977] This change cleans up the use of the feature flag
+  'platform.editor.a11y-main-toolbar-navigation_osrty'.
+- Updated dependencies
+
 ## 1.9.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -239,7 +239,9 @@ function ContentComponent(_ref5) {
     } : _config$absoluteOffse,
     focusTrap = config.focusTrap,
     _config$mediaAssistiv = config.mediaAssistiveMessage,
-    mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv;
+    mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
+    _config$stick = config.stick,
+    stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -290,7 +292,7 @@ function ContentComponent(_ref5) {
     fitWidth: width,
     absoluteOffset: absoluteOffset,
     alignX: align,
-    stick: true,
+    stick: stick,
     zIndex: zIndex,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,

package/dist/cjs/ui/Dropdown.js

@@ -18,7 +18,6 @@ var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -126,6 +125,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         title = _this$props2.title,
         icon = _this$props2.icon,
+        iconBefore = _this$props2.iconBefore,
         options = _this$props2.options,
         dispatchCommand = _this$props2.dispatchCommand,
         mountPoint = _this$props2.mountPoint,
@@ -161,6 +161,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           }, (0, _react2.jsx)(_chevronDown.default, {
             label: "Expand dropdown menu"
           })),
+          icon: iconBefore,
           onClick: this.toggleOpen,
           onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
@@ -207,10 +208,9 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           this.props.setDisableParentScroll(this.state.isOpen);
         }
 
-        // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element, we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
-        if (this.props.mountPoint &&
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
-        (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+        // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element,
+        // we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
+        if (this.props.mountPoint) {
           return;
         }
         if (this.state.isOpen && this.state.isOpenedByKeyboard) {

package/dist/cjs/ui/SimpleModal.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _primitives = require("@atlaskit/primitives");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SimpleModal = exports.SimpleModal = function SimpleModal(props) {
@@ -26,7 +27,9 @@ var SimpleModal = exports.SimpleModal = function SimpleModal(props) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    as: "p"
+  }, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
     onClick: onClose,
     testId: testId ? "".concat(testId, "-cancel-button") : undefined

package/dist/cjs/ui/Toolbar.js

@@ -157,12 +157,16 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
       case 'dropdown':
         var DropdownIcon = item.icon;
+        var BeforeIcon = item.iconBefore;
         return (0, _react2.jsx)(_Dropdown.default, {
           key: idx,
           title: item.title,
           icon: DropdownIcon && (0, _react2.jsx)(DropdownIcon, {
             label: item.title
           }),
+          iconBefore: BeforeIcon && (0, _react2.jsx)(BeforeIcon, {
+            label: ""
+          }),
           dispatchCommand: dispatchCommand,
           options: item.options,
           disabled: item.disabled,

package/dist/es2019/plugin.js

@@ -227,7 +227,8 @@ export function ContentComponent({
       bottom: 0
     },
     focusTrap,
-    mediaAssistiveMessage = ''
+    mediaAssistiveMessage = '',
+    stick = true
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   const isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
@@ -276,7 +277,7 @@ export function ContentComponent({
     fitWidth: width,
     absoluteOffset: absoluteOffset,
     alignX: align,
-    stick: true,
+    stick: stick,
     zIndex: zIndex,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,

package/dist/es2019/ui/Dropdown.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -104,6 +103,7 @@ export default class Dropdown extends Component {
     const {
       title,
       icon,
+      iconBefore,
       options,
       dispatchCommand,
       mountPoint,
@@ -140,6 +140,7 @@ export default class Dropdown extends Component {
         }, jsx(ExpandIcon, {
           label: "Expand dropdown menu"
         })),
+        icon: iconBefore,
         onClick: this.toggleOpen,
         onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
@@ -184,10 +185,9 @@ export default class Dropdown extends Component {
         this.props.setDisableParentScroll(this.state.isOpen);
       }
 
-      // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element, we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
-      if (this.props.mountPoint &&
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
-      getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+      // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element,
+      // we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
+      if (this.props.mountPoint) {
         return;
       }
       if (this.state.isOpen && this.state.isOpenedByKeyboard) {

package/dist/es2019/ui/SimpleModal.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Button from '@atlaskit/button/new';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { Text } from '@atlaskit/primitives';
 export const SimpleModal = props => {
   const {
     onConfirm,
@@ -20,7 +21,9 @@ export const SimpleModal = props => {
     testId: testId
   }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     onClick: onClose,
     testId: testId ? `${testId}-cancel-button` : undefined

package/dist/es2019/ui/Toolbar.js

@@ -133,12 +133,16 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         }
       case 'dropdown':
         const DropdownIcon = item.icon;
+        const BeforeIcon = item.iconBefore;
         return jsx(Dropdown, {
           key: idx,
           title: item.title,
           icon: DropdownIcon && jsx(DropdownIcon, {
             label: item.title
           }),
+          iconBefore: BeforeIcon && jsx(BeforeIcon, {
+            label: ""
+          }),
           dispatchCommand: dispatchCommand,
           options: item.options,
           disabled: item.disabled,

package/dist/esm/plugin.js

@@ -229,7 +229,9 @@ export function ContentComponent(_ref5) {
     } : _config$absoluteOffse,
     focusTrap = config.focusTrap,
     _config$mediaAssistiv = config.mediaAssistiveMessage,
-    mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv;
+    mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
+    _config$stick = config.stick,
+    stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -280,7 +282,7 @@ export function ContentComponent(_ref5) {
     fitWidth: width,
     absoluteOffset: absoluteOffset,
     alignX: align,
-    stick: true,
+    stick: stick,
     zIndex: zIndex,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,

package/dist/esm/ui/Dropdown.js

@@ -21,7 +21,6 @@ import { css, jsx } from '@emotion/react';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -121,6 +120,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         title = _this$props2.title,
         icon = _this$props2.icon,
+        iconBefore = _this$props2.iconBefore,
         options = _this$props2.options,
         dispatchCommand = _this$props2.dispatchCommand,
         mountPoint = _this$props2.mountPoint,
@@ -156,6 +156,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           }, jsx(ExpandIcon, {
             label: "Expand dropdown menu"
           })),
+          icon: iconBefore,
           onClick: this.toggleOpen,
           onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
@@ -202,10 +203,9 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           this.props.setDisableParentScroll(this.state.isOpen);
         }
 
-        // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element, we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
-        if (this.props.mountPoint &&
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
-        getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+        // ECA11Y-235: no sense in sending keyboard event since the menu popup mounted to the custom element,
+        // we will ensure first element focused asap as 'MenuArrowKeyNavigationProvider' is mounted
+        if (this.props.mountPoint) {
           return;
         }
         if (this.state.isOpen && this.state.isOpenedByKeyboard) {

package/dist/esm/ui/SimpleModal.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Button from '@atlaskit/button/new';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { Text } from '@atlaskit/primitives';
 export var SimpleModal = function SimpleModal(props) {
   var onConfirm = props.onConfirm,
     onClose = props.onClose,
@@ -16,7 +17,9 @@ export var SimpleModal = function SimpleModal(props) {
     testId: testId
   }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     onClick: onClose,
     testId: testId ? "".concat(testId, "-cancel-button") : undefined

package/dist/esm/ui/Toolbar.js

@@ -150,12 +150,16 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         }
       case 'dropdown':
         var DropdownIcon = item.icon;
+        var BeforeIcon = item.iconBefore;
         return jsx(Dropdown, {
           key: idx,
           title: item.title,
           icon: DropdownIcon && jsx(DropdownIcon, {
             label: item.title
           }),
+          iconBefore: BeforeIcon && jsx(BeforeIcon, {
+            label: ""
+          }),
           dispatchCommand: dispatchCommand,
           options: item.options,
           disabled: item.disabled,

package/dist/types/ui/Dropdown.d.ts

@@ -11,6 +11,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     title: string;
     icon?: ReactElement<any>;
+    iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
     options: DropdownOptions<Function>;
     dispatchCommand: (command: Function) => void;

package/dist/types-ts4.5/ui/Dropdown.d.ts

@@ -11,6 +11,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     title: string;
     icon?: ReactElement<any>;
+    iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
     options: DropdownOptions<Function>;
     dispatchCommand: (command: Function) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "1.9.1",
+	"version": "1.10.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,10 +26,10 @@
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.6.0",
 		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/checkbox": "^13.5.0",
-		"@atlaskit/editor-common": "^87.0.0",
+		"@atlaskit/checkbox": "^13.6.0",
+		"@atlaskit/editor-common": "^87.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
-		"@atlaskit/editor-plugin-block-controls": "^1.9.0",
+		"@atlaskit/editor-plugin-block-controls": "^1.10.0",
 		"@atlaskit/editor-plugin-context-panel": "^1.2.0",
 		"@atlaskit/editor-plugin-copy-button": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
@@ -38,14 +38,14 @@
 		"@atlaskit/editor-plugin-extension": "^1.12.0",
 		"@atlaskit/editor-plugin-table": "^7.24.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/emoji": "^67.6.0",
-		"@atlaskit/icon": "^22.7.0",
-		"@atlaskit/menu": "^2.8.0",
+		"@atlaskit/emoji": "^67.7.0",
+		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/menu": "^2.9.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",