@atlaskit/editor-core 177.0.1 → 178.0.0

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @atlaskit/editor-core
 
+## 178.0.0
+
+### Major Changes
+
+- [`04e3aacbcc0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04e3aacbcc0) - ED-16069 Unskip type over mediagroup integ test
+
+### Minor Changes
+
+- [`055a333dad9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/055a333dad9) - [ux] Remove `moreTextColors` feature flag and deprecate `allowMoreTextColors` field of `allowTextColor` editor prop and `colorPaletteExtended` mark.
+
+  Showing more colors in the color selection palette is now a default behaviour.
+
+  ## **DEPRECATION WARNING:**
+
+  There are 2 deprecations in this change:
+
+  ### 1. `allowMoreTextColors` field of `allowTextColor` editor prop.
+
+  `allowMoreTextColors` field of `allowTextColor` editor prop. **is now deprecated and will be removed in the next stable release of `@atlaskit/editor-core` package**. Please take steps to remove that field from your code. E.g.:
+
+  ```tsx
+  <Editor
+   ...
+   allowTextColor ={
+    allowMoreTextColors: true // <-- Deprecated
+    defaultColour: {color: 'red', label: 'red'}
+   }
+  />
+  ```
+
+  Remove all instances of `allowMoreTextColors` field from `allowTextColor` `Editor` prop. I.e.:
+
+  ```tsx
+  <Editor
+   ...
+   allowTextColor ={
+    defaultColour: {color: 'red', label: 'red'}
+   }
+  />
+  ```
+
+  If the resulting `allowTextColor` prop is an empty object, set `allowTextColor` property value to `true`. E.g.:
+
+  ```tsx
+  <Editor
+   appearance="full-page"
+   ...
+   allowTextColor ={
+    allowMoreTextColors: true // <-- Invalid
+   }
+  />
+  ```
+
+  should become
+
+  ```tsx
+  <Editor
+   appearance="full-page"
+   ...
+   allowTextColor={true}
+  />
+  ```
+
+  ### 2. `colorPaletteExtended` mark of the ADF schema
+
+  `colorPaletteExtended` mark of the ADF schema **is now deprecated and will be removed in the next stable release**. The extended palette is now rolled into the main one. use `colorPalette` instead.
+
+### Patch Changes
+
+- [`a7eb7a6bb47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7eb7a6bb47) - ED-16068 unskipped tests
+- [`f7cdc36d75b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7cdc36d75b) - ED016195 update EDITOR_CRASHED_ADDITIONAL_INFORMATION event name
+- [`20117f2de5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20117f2de5a) - [ux] ED-16204 Fix table cell options floating toolbar context menu closes after clicking on disabled options
+- [`3f3720a4964`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f3720a4964) - EDM-5368 make type="button" to the buttons in HyperLinkToolbar. This has caused an issue in Jira Portal where clicking the button would submit the creation form.
+- [`efa8b7ee68e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa8b7ee68e) - ED-15808 Changes to replace usage of enzyme with React test library
+- [`df20a33d886`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df20a33d886) - ED-16445: Set allowUndoRedoButtons prop codemod in editor-core to run against the correct editor version (v175)
+- [`e1637ca6a5c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e1637ca6a5c) - ED-16004 unskipped test
+- [`31c37c54ee2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31c37c54ee2) - ED-15548 To add keyboard shortcut Alt + F9 to reach main toolbar and on 'Esc' user comes back to editor
+- [`70d0799eee0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70d0799eee0) - ED-14002 Added `safer-dispatched-transactions` featureFlag to preventtransactions from being mutated after dispatch at runtime.
+- [`c6c0cab10e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6c0cab10e0) - [ux] ED-16205 - Fix missing yellow highlight on merged table cells when hover sort column options on table floating toolbar
+- [`b9141027f87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9141027f87) - [ux] ED-13873 fixes a bug where after deleting a list in a panel or table the cursor would move to the cell to the right. Uses setSelection to position the cursor as expected after delete.
+- [`e9a8cb724c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9a8cb724c1) - [ux] ED-16207 - Update color picker button size and background to allow hover effect to standout
+- Updated dependencies
+
 ## 177.0.1
 
 ### Patch Changes

package/codemods/__tests__/next-remove-allow-more-text-colors-prop.ts

@@ -0,0 +1,147 @@
+jest.autoMockOff();
+
+import { createTransformer } from '../utils';
+import { removeAllowMoreColorsProp } from '../migrates/next-remove-allow-more-text-colors-prop';
+
+// This stays as require() since changing to import will trigger a linter error
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+const transformer = createTransformer('@atlaskit/editor-core', [
+  removeAllowMoreColorsProp,
+]);
+
+describe('remove `allowMoreTextColors` field from `allowTextColor` Editor prop.', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+      allowStatus={true}
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      allowTextColor = {
+        {
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+      allowStatus={true}
+    />
+    `, // -----
+    'remove allowMoreTextColors field if it exists',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor={true}
+    />
+    `, // -----
+    'set allowTextColor prop value to `true` if allowMoreTextColors is its only field',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor as MyEditor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor as MyEditor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    'remove allowMoreTextColors prop prop when Editor is renamed',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    const Editor = (props) => {
+      <div>{props.children}</div>
+    };
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+
+    const Editor = (props) => {
+      <div>{props.children}</div>
+    };
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    'only remove allowMoreTextColors prop for Editor from @atlaskit/editor-core',
+  );
+});

package/codemods/migrates/next-remove-allow-more-text-colors-prop.ts

@@ -0,0 +1,58 @@
+import core from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+import { findImportFromPackage } from '../utils';
+
+/**
+ * Generate a codemod to remove `allowMoreTextColors` field
+ * from `allowTextColor` Editor prop.
+ * Ref: ED-15849
+ */
+const createRemoveAllowMoreTextColorsPropTransform = (
+  pkg: string,
+  component: string,
+) => {
+  return (j: core.JSCodeshift, source: Collection<any>) => {
+    // Find regular or renamed imports
+    // of <Editor/> component from '@atlaskit/editor-core' package
+    const importedNames: string[] = findImportFromPackage(
+      j,
+      source,
+      '@atlaskit/editor-core',
+      'Editor',
+    );
+
+    // Make the change on all instances of named imports found
+    importedNames.forEach((importedComponentName) => {
+      // Find `allowTextColor` prop
+      const allowTextColorCollection = source.find(j.JSXAttribute, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'allowTextColor',
+        },
+      });
+      allowTextColorCollection
+        .find(j.ObjectProperty, { key: { name: 'allowMoreTextColors' } })
+        .forEach((x) => j(x).remove());
+
+      // If the remaining `allowTextColor` prop is an empty object, set `allowTextColor` to `true`.
+      allowTextColorCollection.forEach((allowTextColorPath) => {
+        j(allowTextColorPath).find(j.ObjectExpression, (objectExpression) => {
+          if (objectExpression.properties.length === 0) {
+            j(allowTextColorPath).replaceWith(
+              j.jsxAttribute(
+                j.jsxIdentifier('allowTextColor'),
+                j.jsxExpressionContainer(j.booleanLiteral(true)),
+              ),
+            );
+          }
+        });
+      });
+    });
+  };
+};
+
+export const removeAllowMoreColorsProp =
+  createRemoveAllowMoreTextColorsPropTransform(
+    '@atlaskit/editor-core',
+    'Editor',
+  );

package/dist/cjs/create-editor/ErrorBoundary.js

@@ -119,8 +119,10 @@ var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component) {
                   actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
                   eventType: _analytics.EVENT_TYPE.OPERATIONAL,
                   attributes: {
-                    errorStack: errorStack,
                     errorId: sharedId
+                  },
+                  nonPrivacySafeAttributes: {
+                    errorStack: errorStack
                   }
                 });
 

package/dist/cjs/create-editor/ReactEditorView.js

@@ -391,9 +391,10 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       var nodes = (0, _nodes.findChangedNodesFromTransaction)(unsafeTransaction);
       var changedNodesValid = (0, _nodes.validateNodes)(nodes);
-      var transaction = _this.featureFlags.saferDispatchedTransactions ? new Proxy(unsafeTransaction, (0, _saferTransactions.freezeUnsafeTransactionProperties)({
+      var transaction = _this.featureFlags.saferDispatchedTransactions || _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly ? new Proxy(unsafeTransaction, (0, _saferTransactions.freezeUnsafeTransactionProperties)({
         dispatchAnalyticsEvent: _this.dispatchAnalyticsEvent,
-        pluginKey: 'unknown-reacteditorview'
+        pluginKey: 'unknown-reacteditorview',
+        analyticsOnly: _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly
       })) : unsafeTransaction;
 
       if (changedNodesValid) {

package/dist/cjs/create-editor/create-editor.js

@@ -127,7 +127,8 @@ function createPMPlugins(config) {
       _performanceTracking$2 = performanceTracking.transactionTracking,
       transactionTracking = _performanceTracking$2 === void 0 ? TRACKING_DEFAULT : _performanceTracking$2;
   var saferDispatchedTransactions = featureFlags.saferDispatchedTransactions;
-  var useInstrumentedPlugin = uiTracking.enabled || transactionTracking.enabled || saferDispatchedTransactions;
+  var saferDispatchedTransactionsAnalyticsOnly = featureFlags.saferDispatchedTransactionsAnalyticsOnly;
+  var useInstrumentedPlugin = uiTracking.enabled || transactionTracking.enabled || saferDispatchedTransactions || saferDispatchedTransactionsAnalyticsOnly;
 
   if (process.env.NODE_ENV === 'development' && transactionTracking.enabled && !transactionTracker) {
     // eslint-disable-next-line no-console
@@ -139,6 +140,7 @@ function createPMPlugins(config) {
       uiTracking: uiTracking,
       transactionTracking: transactionTracking,
       saferDispatchedTransactions: saferDispatchedTransactions,
+      saferDispatchedTransactionsAnalyticsOnly: saferDispatchedTransactionsAnalyticsOnly,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
     }, transactionTracker);
   } : function (plugin) {

package/dist/cjs/editor.js

@@ -439,6 +439,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "deprecationWarnings",
     value: function deprecationWarnings(props) {
+      var _props$allowTextColor;
+
       if (process.env.NODE_ENV === 'production') {
         return;
       }
@@ -471,6 +473,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line no-console
         console.warn("Advanced table options are deprecated (except isHeaderRowRequired) to continue using advanced table features use - <Editor allowTables={{ advanced: true }} /> [Will be changed in editor-core@".concat(nextVersion, "]"));
       }
+
+      if (props.hasOwnProperty('allowTextColor') && typeof props.allowTextColor !== 'boolean' && (props === null || props === void 0 ? void 0 : (_props$allowTextColor = props.allowTextColor) === null || _props$allowTextColor === void 0 ? void 0 : _props$allowTextColor.allowMoreTextColors) !== undefined) {
+        // eslint-disable-next-line no-console
+        console.warn("\"allowMoreTextColors\" field of \"allowTextColor\" property is deprecated. It will be removedin editor-core@".concat(nextVersion, ". The color palette now shows more colors by default."));
+      }
     }
   }, {
     key: "onEditorDestroyed",

package/dist/cjs/plugins/block-type/commands/delete-and-move-cursor.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deleteAndMoveCursor = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+// We should override default behaviour when selection spans node depths or
+// ends at a node junction
+var shouldMoveCursorAfterDelete = function shouldMoveCursorAfterDelete(state) {
+  var _state$selection = state.selection,
+      $from = _state$selection.$from,
+      $to = _state$selection.$to;
+  var nodeRange = $from.blockRange($to);
+
+  if (!nodeRange) {
+    return false;
+  }
+
+  var hasSameAncestor = $from.depth === $to.depth && $from.depth - 1 === nodeRange.depth;
+  var toPositionHasNodeAfter = !!$to.nodeAfter;
+
+  if (hasSameAncestor || toPositionHasNodeAfter) {
+    return false;
+  }
+
+  return true;
+};
+/**
+ * Fixes cursor position after delete for list/task in panel and table
+ *
+ * ED-13873 fixes a bug where after deleting a list the cursor would move
+ * to the cell to the right. Uses setSelection to position the cursor as expected after deleting.
+ *
+ * @param state EditorState<any>
+ * @param dispatch CommandDispatch
+ * @returns boolean
+ */
+
+
+var deleteAndMoveCursor = function deleteAndMoveCursor(state, dispatch) {
+  if (state.selection.empty || !(state.selection instanceof _prosemirrorState.TextSelection)) {
+    return false;
+  }
+
+  if (!shouldMoveCursorAfterDelete(state)) {
+    return false;
+  }
+
+  var tr = state.tr;
+  tr.deleteSelection(); // Make sure the next position is not out of boundaries
+
+  var previousPosition = Math.min(Math.max(state.selection.$from.pos, 0), tr.doc.content.size); // Override default delete behaviour that moves the cursor to first suitable position after selection (postive bias).
+  // See. selectionToInsertionEnd. We will override behavior with negative bias (search for suitable cursor position backwards).
+
+  tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(previousPosition), -1));
+
+  if (dispatch) {
+    dispatch(tr.scrollIntoView());
+  }
+
+  return true;
+};
+
+exports.deleteAndMoveCursor = deleteAndMoveCursor;

package/dist/cjs/plugins/block-type/commands/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "cleanUpAtTheStartOfDocument", {
     return _blockType.cleanUpAtTheStartOfDocument;
   }
 });
+Object.defineProperty(exports, "deleteAndMoveCursor", {
+  enumerable: true,
+  get: function get() {
+    return _deleteAndMoveCursor.deleteAndMoveCursor;
+  }
+});
 Object.defineProperty(exports, "insertBlock", {
   enumerable: true,
   get: function get() {
@@ -80,4 +86,6 @@ var _blockType = require("./block-type");
 
 var _insertBlock = require("./insert-block");
 
-var _transformToCodeBlock = require("./transform-to-code-block");
+var _transformToCodeBlock = require("./transform-to-code-block");
+
+var _deleteAndMoveCursor = require("./delete-and-move-cursor");

package/dist/cjs/plugins/block-type/pm-plugins/keymap.js

@@ -9,6 +9,8 @@ exports.default = keymapPlugin;
 
 var _prosemirrorHistory = require("prosemirror-history");
 
+var _prosemirrorCommands = require("prosemirror-commands");
+
 var keymaps = _interopRequireWildcard(require("../../../keymaps"));
 
 var commands = _interopRequireWildcard(require("../../../commands"));
@@ -29,6 +31,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+var backspace = (0, _prosemirrorCommands.chainCommands)(_commands2.cleanUpAtTheStartOfDocument, _commands2.deleteAndMoveCursor);
+var del = (0, _prosemirrorCommands.chainCommands)((0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), _commands2.deleteAndMoveCursor);
+
 function keymapPlugin(schema, featureFlags) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
@@ -36,9 +41,9 @@ function keymapPlugin(schema, featureFlags) {
   keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), _prosemirrorHistory.redo, list);
   keymaps.bindKeymapWithCommand(keymaps.undo.common, _prosemirrorHistory.undo, list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, _commands2.cleanUpAtTheStartOfDocument, list);
-  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
-  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspace, list);
+  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, del, list);
+  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, del, list);
 
   if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
     keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBlockQuote), (0, _commands2.insertBlockTypesWithAnalytics)(blockTypes.BLOCK_QUOTE.name, _analytics.INPUT_METHOD.KEYBOARD), list);

package/dist/cjs/plugins/feature-flags-context/feature-flags-from-props.js

@@ -43,7 +43,7 @@ function getSpellCheck(featureFlags) {
 
 
 function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$collabEdit, _props$collabEdit2, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42;
+  var _props$featureFlags, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$collabEdit, _props$collabEdit2, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42, _props$featureFlags43, _props$featureFlags44;
 
   var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(props.featureFlags);
   var tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
@@ -51,7 +51,6 @@ function createFeatureFlagsFromProps(props) {
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
     interactiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
     placeholderBracketHint: !!props.placeholderBracketHint,
-    moreTextColors: typeof props.allowTextColor === 'boolean' ? false : Boolean(((_props$allowTextColor = props.allowTextColor) === null || _props$allowTextColor === void 0 ? void 0 : _props$allowTextColor.allowMoreTextColors) === true),
     findReplace: !!props.allowFindReplace,
     findReplaceMatchCase: (0, _typeof2.default)(props.allowFindReplace) === 'object' && Boolean(props.allowFindReplace.allowMatchCase),
     addColumnWithCustomStep: !props.allowTables || typeof props.allowTables === 'boolean' ? false : Boolean(props.allowTables.allowAddColumnWithCustomStep),
@@ -72,21 +71,22 @@ function createFeatureFlagsFromProps(props) {
     ufo: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.ufo) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.ufo) : false),
     twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.twoLineEditorToolbar) : false),
     saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.saferDispatchedTransactions) : false)),
+    saferDispatchedTransactionsAnalyticsOnly: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly || (typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.saferDispatchedTransactionsAnalyticsOnly) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.saferDispatchedTransactionsAnalyticsOnly) : false)),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
-    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
+    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
     tableCellOptionsInFloatingToolbar: typeof tableCellOptionsInFloatingToolbar === 'boolean' ? tableCellOptionsInFloatingToolbar : false,
-    showHoverPreview: Boolean(typeof ((_props$featureFlags29 = props.featureFlags) === null || _props$featureFlags29 === void 0 ? void 0 : _props$featureFlags29.showHoverPreview) === 'boolean' ? !!((_props$featureFlags30 = props.featureFlags) !== null && _props$featureFlags30 !== void 0 && _props$featureFlags30.showHoverPreview) : false),
-    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags32 = props.featureFlags) !== null && _props$featureFlags32 !== void 0 && _props$featureFlags32.indentationButtonsInTheToolbar) : false)),
-    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.floatingToolbarCopyButton) : false)),
-    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
+    showHoverPreview: Boolean(typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31.showHoverPreview) === 'boolean' ? !!((_props$featureFlags32 = props.featureFlags) !== null && _props$featureFlags32 !== void 0 && _props$featureFlags32.showHoverPreview) : false),
+    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.indentationButtonsInTheToolbar) : false)),
+    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags36 = props.featureFlags) !== null && _props$featureFlags36 !== void 0 && _props$featureFlags36.floatingToolbarCopyButton) : false)),
+    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
     disableSpellcheckByBrowser: getSpellCheck(props.featureFlags),
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
-    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.restartNumberedLists) === true,
-    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.listNumberContinuity) === true,
-    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.restartNumberedListsToolbar) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags40 = props.featureFlags) !== null && _props$featureFlags40 !== void 0 && _props$featureFlags40.useSomewhatSemanticTextColorNames) : false)),
+    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.restartNumberedLists) === true,
+    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.listNumberContinuity) === true,
+    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags40 = props.featureFlags) === null || _props$featureFlags40 === void 0 ? void 0 : _props$featureFlags40.restartNumberedListsToolbar) === true,
+    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42['prevent-popup-overflow']) : false)
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags43 = props.featureFlags) === null || _props$featureFlags43 === void 0 ? void 0 : _props$featureFlags43['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags44 = props.featureFlags) !== null && _props$featureFlags44 !== void 0 && _props$featureFlags44['prevent-popup-overflow']) : false)
   });
 }

package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -39,7 +39,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }; }
 
@@ -52,6 +52,7 @@ var menuItemDimensions = {
 exports.menuItemDimensions = menuItemDimensions;
 var spacer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
 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: ", "px;\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", "px;\n    }\n  }\n"])), menuItemDimensions.width, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+var label = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 100%;\n"])));
 var itemSpacing = (0, _constants.gridSize)() / 2;
 exports.itemSpacing = itemSpacing;
 var DropdownButtonItem = _menu.ButtonItem;
@@ -68,17 +69,24 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
       tooltipContent = _useState2[0],
       setTooltipContent = _useState2[1];
 
-  var handleTooltipMouseOut = (0, _react.useCallback)(function () {
+  var handleItemMouseOut = (0, _react.useCallback)(function () {
     setTooltipContent('');
-  }, []);
+
+    if (item.onMouseOut) {
+      dispatchCommand(item.onMouseOut);
+    }
+  }, [item.onMouseOut, dispatchCommand]);
   var handleItemMouseDown = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-  }, []);
-  var handleItemMouseOver = (0, _react.useCallback)(function (e) {
+    e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
+
+    if (item.onMouseDown) {
+      dispatchCommand(item.onMouseDown);
+    }
+  }, [item.onMouseDown, dispatchCommand]);
+  var handleItemMouseOver = (0, _react.useCallback)(function () {
     setTooltipContent(item.tooltip || '');
 
     if (item.onMouseOver) {
-      e.preventDefault();
       dispatchCommand(item.onMouseOver);
     }
   }, [item.tooltip, item.onMouseOver, dispatchCommand]);
@@ -120,6 +128,24 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
       editorView === null || editorView === void 0 ? void 0 : editorView.focus();
     }
   }, [dispatchCommand, item.onClick, hide, editorView]);
+  /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
+
+  var labelRef = /*#__PURE__*/(0, _react.createRef)();
+  var handleTitleWrapperMouseEvent = (0, _react.useCallback)(function (e) {
+    if (item.disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [item.disabled]);
+  (0, _react.useEffect)(function () {
+    var labelRefCurrent = labelRef.current;
+    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
+    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
+    return function () {
+      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
+      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
+    };
+  });
   var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
     iconBefore: iconBefore,
     iconAfter: item.elemAfter,
@@ -130,16 +156,18 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     onMouseOver: handleItemMouseOver,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
+    onMouseOut: handleItemMouseOut,
     onFocus: handleItemOnFocus,
     onBlur: handleItemOnBlur
-  }, item.title);
+  }, (0, _react2.jsx)("span", {
+    ref: labelRef,
+    css: label
+  }, item.title));
 
   if (tooltipContent) {
     return (0, _react2.jsx)(_tooltip.default, {
       content: tooltipContent
-    }, (0, _react2.jsx)("div", {
-      onMouseOut: handleTooltipMouseOut
-    }, itemContent));
+    }, itemContent);
   }
 
   return itemContent;