@atlaskit/editor-common 72.5.1 → 72.6.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @atlaskit/editor-common
 
+## 72.6.1
+
+### Patch Changes
+
+- [`b737494c727`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b737494c727) - Update optional feature flag type
+
+## 72.6.0
+
+### Minor Changes
+
+- [`a697f9eb7ca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a697f9eb7ca) - [ED-16746] Introduce the shareable actions concept into the NextEditorPlugin
+- [`a7e36157e01`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7e36157e01) - [ED-15941] Refactor Preset into EditorPresetBuilder
+- [`66bbcd766fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66bbcd766fe) - [ED-16735] Inject its own api on NextEditorPlugin
+- [`0078ddc7e2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0078ddc7e2e) - New smartLinks prop to allow renderer and editor to determine whether smart link should show actions that can change the link resource.
+- [`568b7d96689`](https://bitbucket.org/atlassian/atlassian-frontend/commits/568b7d96689) - [ED-16819] Introduce 'isMediaNode' and 'isNodeBeforeMediaNode' utils that check if the node passed in (for isMediaNode) or the node before selection passed in (for isNodeBeforeMediaNode) has the type of media, mediaInline, mediaGroup or mediaSingle
+- [`592e3761622`](https://bitbucket.org/atlassian/atlassian-frontend/commits/592e3761622) - [ED-15941] NextEditorPlugins will receive an api with the plugins dependencies on runtime
+
+### Patch Changes
+
+- [`f81e7ba7c07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f81e7ba7c07) - [ux] ED-16556 Fixed - Table floating toolbar "Table Options" and "Cell Options" are not accessible
+- [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
+- [`49d121d9640`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49d121d9640) - [ED-16310] Creates an optional dependency type `OptionalPlugin` to indicate `NextEditorPlugin` dependencies are optional.
+
+  You can use in the dependency array of a `NextEditorPlugin` like so:
+
+  ```ts
+  const examplePlugin = NextEditorPlugin<
+    'example',
+    { dependencies: [typeof plugin1, OptionalPlugin<typeof plugin2>] }
+  >;
+  ```
+
+- [`f7fc96b3738`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7fc96b3738) - ED-17086 - Added feature flag for expandedChartColors
+- [`0379951cd05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0379951cd05) - [ED-17210] Improve equality check for SharedStateAPI onChange behaviour
+- [`eb7ef06e38c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb7ef06e38c) - Contextual toolbar focus will now be regained when exiting via ArrowLeft / ArrowRight keys, and will progress to the next toolbar item. onBlur will now also be called correctly when dropdown menu items lose focus.
+- [`2661a586431`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2661a586431) - ED-15843 Applied fix for bodiedExtensions animation as per DTR-807
+- [`747f7e45c27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/747f7e45c27) - [ux] ED-16816 Safari fix: add focus outline when focus is on color palatte options
+- [`db34131a1e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db34131a1e4) - [ED-16579] Add methods to Preset object including `setProvider`, `getProvider` and `getAllProviders`.
+
+  These are used internally to set providers (objects which can return functionality such as `emojiProvider`).
+
+- [`68f4ce6955d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68f4ce6955d) - Fix logic to reconfigure state in ReactEditorView to fix a breakage on NCS pages.
+- [`deef98920f4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/deef98920f4) - [ux] ED-16718 Table scroll troll - refactor nested expand logic back into editor-common
+- [`1720ddc8076`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1720ddc8076) - [ux] ED-16725 Added support for semantic tooltip names for background color palette.
+- [`3eea6eec479`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3eea6eec479) - [ux] ED-16930 Horizontally rendering multiple wrapped-left media items inside a table
+- Updated dependencies
+
 ## 72.5.1
 
 ### Patch Changes

package/dist/cjs/node-width/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getParentNodeWidth = void 0;
 var _prosemirrorUtils = require("prosemirror-utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("@atlaskit/theme/constants");
 var _extension = require("../styles/shared/extension");
 var _layout = require("../styles/shared/layout");
 var _breakout = require("../utils/breakout");
@@ -44,10 +45,23 @@ var getParentNodeWidth = function getParentNodeWidth(pos, state, containerWidth,
   }
 
   // account for the padding of the parent node
-  if (node.type === schema.nodes.layoutSection) {
-    parentWidth -= _layout.LAYOUT_COLUMN_PADDING * 2;
-  } else if (node.type === schema.nodes.bodiedExtension) {
-    parentWidth -= _extension.BODIED_EXT_PADDING * 2;
+  switch (node.type) {
+    case schema.nodes.layoutSection:
+      parentWidth -= _layout.LAYOUT_COLUMN_PADDING * 2;
+      break;
+    case schema.nodes.bodiedExtension:
+      parentWidth -= _extension.BODIED_EXT_PADDING * 2;
+      break;
+    case schema.nodes.expand:
+      // padding
+      parentWidth -= (0, _constants.gridSize)() * 2;
+      // gutter offset
+      parentWidth += (0, _constants.gridSize)() * 1.5 * 2;
+      // padding right
+      parentWidth -= (0, _constants.gridSize)();
+      // padding left
+      parentWidth -= (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2;
+      break;
   }
   parentWidth -= 2; // border
 

package/dist/cjs/preset/builder.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorPresetBuilder = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var EditorPresetBuilder = /*#__PURE__*/function () {
+  function EditorPresetBuilder() {
+    (0, _classCallCheck2.default)(this, EditorPresetBuilder);
+    (0, _defineProperty2.default)(this, "safeEntry", function (plugin) {
+      return Array.isArray(plugin) ? plugin : [plugin, undefined];
+    });
+    for (var _len = arguments.length, more = new Array(_len), _key = 0; _key < _len; _key++) {
+      more[_key] = arguments[_key];
+    }
+    this.data = [].concat(more) || [];
+  }
+  (0, _createClass2.default)(EditorPresetBuilder, [{
+    key: "add",
+    value: function add(nextOrTuple) {
+      return (0, _construct2.default)(EditorPresetBuilder, [
+      /**
+       * re-cast this to NewPlugin as we've done all the type
+       * safety, dependency checking, narrowing, during
+       * `SafePresetCheck & VerifyPluginDependencies`
+       */
+      nextOrTuple].concat((0, _toConsumableArray2.default)(this.data)));
+    }
+
+    //hasPlugin<Plugin extends NextEditorPlugin<any, any>>(
+    //  pluginToAdd: Plugin,
+    //): this is TryCastEditorPresetBuilderByCheckingPlugins<this, Plugin> {
+    //  const hasPluginQueryExists = this.data.find((pluginEntry) => {
+    //    const pluginFunction: NextEditorPlugin<any, any> = !Array.isArray(
+    //      pluginEntry,
+    //    )
+    //      ? pluginEntry
+    //      : pluginEntry[0];
+
+    //    return pluginFunction === pluginToAdd;
+    //  });
+
+    //  return Boolean(hasPluginQueryExists);
+    //}
+  }, {
+    key: "maybeAdd",
+    value: function maybeAdd(pluginToAdd, add) {
+      return add(pluginToAdd,
+      //  @ts-ignore
+      this);
+    }
+  }, {
+    key: "has",
+    value: function has(plugin) {
+      return this.data.some(function (pluginPreset) {
+        if (Array.isArray(pluginPreset)) {
+          return pluginPreset[0] === plugin;
+        }
+        return pluginPreset === plugin;
+      });
+    }
+  }, {
+    key: "build",
+    value: function build() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        pluginInjectionAPI = _ref.pluginInjectionAPI,
+        maybeExcludePlugins = _ref.excludePlugins;
+      var excludePlugins = new Set(maybeExcludePlugins ? maybeExcludePlugins : []);
+      var editorPlugins = this.processEditorPlugins({
+        pluginInjectionAPI: pluginInjectionAPI,
+        excludePlugins: excludePlugins
+      });
+      return this.removeExcludedPlugins(editorPlugins, excludePlugins);
+    }
+  }, {
+    key: "verifyDuplicatedPlugins",
+    value: function verifyDuplicatedPlugins() {
+      var cache = new Set();
+      this.data.forEach(function (pluginEntry) {
+        var _ref2 = Array.isArray(pluginEntry) ? pluginEntry : [pluginEntry, undefined],
+          _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          pluginFn = _ref3[0],
+          _ = _ref3[1];
+        if (cache.has(pluginFn)) {
+          throw new Error("".concat(pluginFn, " is already included!"));
+        }
+        cache.add(pluginFn);
+      });
+      return true;
+    }
+  }, {
+    key: "processEditorPlugins",
+    value: function processEditorPlugins(_ref4) {
+      var _this = this;
+      var pluginInjectionAPI = _ref4.pluginInjectionAPI,
+        excludePlugins = _ref4.excludePlugins;
+      this.verifyDuplicatedPlugins();
+      var seen = new Set();
+      var plugins = this.data.reverse().map(function (entry) {
+        var _this$safeEntry = _this.safeEntry(entry),
+          _this$safeEntry2 = (0, _slicedToArray2.default)(_this$safeEntry, 2),
+          fn = _this$safeEntry2[0],
+          config = _this$safeEntry2[1];
+        if (seen.has(fn)) {
+          return null;
+        }
+        seen.add(fn);
+        if (typeof fn !== 'function') {
+          return null;
+        }
+        var plugin = pluginInjectionAPI ? fn(config, pluginInjectionAPI.api()) : fn(config);
+        if (plugin && excludePlugins !== null && excludePlugins !== void 0 && excludePlugins.has(plugin.name)) {
+          return null;
+        }
+        if (!pluginInjectionAPI) {
+          return plugin;
+        }
+        pluginInjectionAPI.onEditorPluginInitialized(plugin);
+        return plugin;
+      }).filter(Boolean);
+      return plugins;
+    }
+  }, {
+    key: "removeExcludedPlugins",
+    value: function removeExcludedPlugins(plugins, excludes) {
+      if (excludes) {
+        return plugins.filter(function (plugin) {
+          return !plugin || !excludes.has(plugin.name);
+        });
+      }
+      return plugins;
+    }
+
+    // TODO: ED-17023 - Bring back type safety to the EditorPresetBuilder.add preset
+    //import type {
+    //  ExtractPluginDependencies,
+    //} from '../types/next-editor-plugin';
+    //type TryCastEditorPresetBuilderByCheckingDependencies<MaybeEditorPresetBuilder, Plugin> =
+    //  MaybeEditorPresetBuilder extends EditorPresetBuilder<any, infer StackPlugins>
+    //    ? Plugin extends NextEditorPlugin<any, any>
+    //      ? ExtractPluginDependencies<Plugin>[number] extends StackPlugins[number]
+    //        ? MaybeEditorPresetBuilder
+    //        : never
+    //      : never
+    //    : never;
+    // Because how our plugins are added in the preset, we can't use the type safe system
+    // in the EditorPresetBuilder.
+    // TODO: ED-17023 - Bring back type safety to the EditorPresetBuilder.add preset
+    //maybeAdd<
+    //  MaybePlugin extends NextEditorPlugin<any, any>,
+    //  MaybePluginNames extends string[],
+    //  MaybeStackPlugins extends AllEditorPresetPluginTypes[],
+    //  MaybeEditorPresetBuilder extends EditorPresetBuilder<
+    //    MaybePluginNames,
+    //    MaybeStackPlugins
+    //  >,
+    //>(
+    //  pluginToAdd: MaybePlugin,
+    //   add: (
+    //     pluginToAdd: MaybePlugin,
+    //     maybeEditorPresetBuilder: TryCastEditorPresetBuilderByCheckingDependencies<this, MaybePlugin>,
+    //   ) => MaybeEditorPresetBuilder,
+    //): MaybeEditorPresetBuilder | this {
+    //  return add(
+    //    pluginToAdd,
+    //    //  @ts-ignore
+    //    this as any,
+    //  );
+    //}
+  }]);
+  return EditorPresetBuilder;
+}();
+exports.EditorPresetBuilder = EditorPresetBuilder;

package/dist/cjs/preset/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorPluginInjectionAPI", {
+  enumerable: true,
+  get: function get() {
+    return _pluginInjectionApi.EditorPluginInjectionAPI;
+  }
+});
+Object.defineProperty(exports, "EditorPresetBuilder", {
+  enumerable: true,
+  get: function get() {
+    return _builder.EditorPresetBuilder;
+  }
+});
+var _builder = require("./builder");
+var _pluginInjectionApi = require("./plugin-injection-api");

package/dist/cjs/preset/plugin-injection-api.js

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SharedStateAPI = exports.PluginsData = exports.EditorPluginInjectionAPI = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function hasGetSharedState(plugin) {
+  return typeof plugin.getSharedState === 'function';
+}
+function hasActions(plugin) {
+  return (0, _typeof2.default)(plugin.actions) === 'object';
+}
+var DREAM_TARGET_60_FPS = 16;
+/*
+ *
+ * After some investigations, we discovered this is the best ratio for our current Editor: 80ms. That means is five times bigger than the 60fps dream target.
+ *
+ * In the future, once we remove the entire WithPluginState, We may decide to reduce this value.
+ *
+ */
+var THROTTLE_CALLS_FOR_MILLISECONDS = DREAM_TARGET_60_FPS * 5;
+var notifyListenersThrottled = (0, _throttle.default)(function (_ref) {
+  var newEditorState = _ref.newEditorState,
+    oldEditorState = _ref.oldEditorState,
+    listeners = _ref.listeners,
+    plugins = _ref.plugins;
+  var isInitialization = !oldEditorState && newEditorState;
+  var callbacks = [];
+  var _iterator = _createForOfIteratorHelper(listeners.keys()),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var pluginName = _step.value;
+      var plugin = plugins.get(pluginName);
+      if (!plugin || !hasGetSharedState(plugin)) {
+        return "continue";
+      }
+      var nextSharedState = plugin.getSharedState(newEditorState);
+      var prevSharedState = !isInitialization && oldEditorState ? plugin.getSharedState(oldEditorState) : undefined;
+      var isSamePluginState = (0, _isEqual.default)(prevSharedState, nextSharedState);
+      if (isInitialization || !isSamePluginState) {
+        (listeners.get(pluginName) || new Set()).forEach(function (callback) {
+          callbacks.push(callback.bind(callback, {
+            nextSharedState: nextSharedState,
+            prevSharedState: prevSharedState
+          }));
+        });
+      }
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _ret = _loop();
+      if (_ret === "continue") continue;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (callbacks.length === 0) {
+    return;
+  }
+  callbacks.forEach(function (cb) {
+    cb();
+  });
+}, THROTTLE_CALLS_FOR_MILLISECONDS);
+var PluginsData = /*#__PURE__*/(0, _createClass2.default)(function PluginsData() {
+  (0, _classCallCheck2.default)(this, PluginsData);
+});
+exports.PluginsData = PluginsData;
+var ActionsAPI = /*#__PURE__*/function () {
+  function ActionsAPI() {
+    (0, _classCallCheck2.default)(this, ActionsAPI);
+  }
+  (0, _createClass2.default)(ActionsAPI, [{
+    key: "createAPI",
+    value: function createAPI(plugin) {
+      if (!plugin || !hasActions(plugin)) {
+        return {};
+      }
+      return new Proxy(plugin.actions || {}, {
+        get: function get(target, prop, receiver) {
+          // We will be able to track perfomance here
+          return Reflect.get(target, prop);
+        }
+      });
+    }
+  }]);
+  return ActionsAPI;
+}();
+var SharedStateAPI = /*#__PURE__*/function () {
+  function SharedStateAPI(_ref2) {
+    var getEditorState = _ref2.getEditorState;
+    (0, _classCallCheck2.default)(this, SharedStateAPI);
+    this.getEditorState = getEditorState;
+    this.listeners = new Map();
+  }
+  (0, _createClass2.default)(SharedStateAPI, [{
+    key: "createAPI",
+    value: function createAPI(plugin) {
+      var _this = this;
+      if (!plugin) {
+        return {
+          currentState: function currentState() {
+            return undefined;
+          },
+          onChange: function onChange(sub) {
+            return function () {};
+          }
+        };
+      }
+      var pluginName = plugin.name;
+      return {
+        currentState: function currentState() {
+          var state = _this.getEditorState();
+          if (!state || !hasGetSharedState(plugin)) {
+            return undefined;
+          }
+          return plugin.getSharedState(state);
+        },
+        onChange: function onChange(sub) {
+          var pluginListeners = _this.listeners.get(pluginName) || new Set();
+          pluginListeners.add(sub);
+          _this.listeners.set(pluginName, pluginListeners);
+          return function () {
+            (_this.listeners.get(pluginName) || new Set()).delete(sub);
+          };
+        }
+      };
+    }
+  }, {
+    key: "notifyListeners",
+    value: function notifyListeners(_ref3) {
+      var newEditorState = _ref3.newEditorState,
+        oldEditorState = _ref3.oldEditorState,
+        plugins = _ref3.plugins;
+      var listeners = this.listeners;
+      notifyListenersThrottled({
+        newEditorState: newEditorState,
+        oldEditorState: oldEditorState,
+        listeners: listeners,
+        plugins: plugins
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.listeners.clear();
+    }
+  }]);
+  return SharedStateAPI;
+}();
+exports.SharedStateAPI = SharedStateAPI;
+var EditorPluginInjectionAPI = /*#__PURE__*/function () {
+  function EditorPluginInjectionAPI(_ref4) {
+    var _this2 = this;
+    var getEditorState = _ref4.getEditorState;
+    (0, _classCallCheck2.default)(this, EditorPluginInjectionAPI);
+    (0, _defineProperty2.default)(this, "onEditorViewUpdated", function (_ref5) {
+      var newEditorState = _ref5.newEditorState,
+        oldEditorState = _ref5.oldEditorState;
+      _this2.sharedStateAPI.notifyListeners({
+        newEditorState: newEditorState,
+        oldEditorState: oldEditorState,
+        plugins: _this2.plugins
+      });
+    });
+    (0, _defineProperty2.default)(this, "onEditorPluginInitialized", function (plugin) {
+      _this2.addPlugin(plugin);
+    });
+    (0, _defineProperty2.default)(this, "addPlugin", function (plugin) {
+      _this2.plugins.set(plugin.name, plugin);
+    });
+    (0, _defineProperty2.default)(this, "getPluginByName", function (pluginName) {
+      var plugin = _this2.plugins.get(pluginName);
+      return plugin;
+    });
+    this.sharedStateAPI = new SharedStateAPI({
+      getEditorState: getEditorState
+    });
+    this.plugins = new Map();
+    this.actionsAPI = new ActionsAPI();
+  }
+  (0, _createClass2.default)(EditorPluginInjectionAPI, [{
+    key: "api",
+    value: function api() {
+      var sharedStateAPI = this.sharedStateAPI,
+        actionsAPI = this.actionsAPI,
+        getPluginByName = this.getPluginByName;
+      var externalPlugins = new Proxy({}, {
+        get: function get(target, prop, receiver) {
+          var plugin = getPluginByName(prop);
+          if (!plugin) {
+            // eslint-disable-next-line
+            console.error("Plugin: ".concat(prop, " does not exist"));
+            return undefined;
+          }
+          var sharedState = sharedStateAPI.createAPI(plugin);
+          var actions = actionsAPI.createAPI(plugin);
+          var proxyCoreAPI = {
+            sharedState: sharedState,
+            actions: actions
+          };
+          return proxyCoreAPI;
+        }
+      });
+      return {
+        externalPlugins: externalPlugins
+      };
+    }
+  }]);
+  return EditorPluginInjectionAPI;
+}();
+exports.EditorPluginInjectionAPI = EditorPluginInjectionAPI;

package/dist/cjs/styles/shared/media-single.js

@@ -11,5 +11,5 @@ var _templateObject;
 var richMediaClassName = 'rich-media-item';
 exports.richMediaClassName = richMediaClassName;
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
 exports.mediaSingleSharedStyle = mediaSingleSharedStyle;

package/dist/cjs/styles/shared/panel.js

@@ -167,11 +167,11 @@ var PanelSharedSelectors = {
   removeEmojiIcon: "[aria-label=\"Remove emoji\"]",
   emojiIcon: "[aria-label=\"editor-add-emoji\"]",
   selectedEmoji: "[aria-label=\":grinning:\"]",
-  addYourOwnEmoji: "[aria-label=\"Add your own emoji\"]",
+  addYourOwnEmoji: "#add-custom-emoji",
   emojiNameInCustomEmoji: "[aria-label=\"Enter a name for the new emoji\"]",
   title: "#editor-title",
   emojiPopup: "[aria-label=\"Popup\"]",
-  searchEmoji: "[aria-label=\"Search emoji\"]",
+  searchEmoji: "[aria-label=\"Emoji name\"]",
   orangeWarningIcon: "[aria-label=\":warning:\"]",
   yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)",
   copyButton: "button[aria-label=\"Copy\"]"

package/dist/cjs/styles/shared/table.js

@@ -14,6 +14,7 @@ var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _browser = _interopRequireDefault(require("../../utils/browser"));
 var _codeBlock = require("./code-block");
+var _tableCell = require("./tableCell");
 var _templateObject;
 var tableMarginTop = 24;
 exports.tableMarginTop = tableMarginTop;
@@ -50,7 +51,7 @@ var TableSharedCssClassName = {
 };
 exports.TableSharedCssClassName = TableSharedCssClassName;
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
     dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
   })(props), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, (0, _components.themed)({

package/dist/cjs/styles/shared/tableCell.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableCellBackgroundStyleOverride = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _templateObject;
+// This is used in order to support usage of DS tokens. Table cell background-color
+// is set inline in '@atlaskit/adf-schema' and the color value is stored in ADF so
+// it is not possible to use tokens there without polluting ADF.
+// As table cell backgrounds are set inline, this should not break mobile as
+// hexToEditorBackgroundPaletteColor() outputs a css variable with fallback hex.
+var mapBackgroundColors = function mapBackgroundColors() {
+  var cssString = '';
+  _adfSchema.tableBackgroundColorNames.forEach(function (value, key) {
+    var paletteColorValue = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(value);
+    if (paletteColorValue) {
+      cssString += "\n        td[colorname='".concat(key, "' i],\n        th[colorname='").concat(key, "' i] {\n          background-color: ").concat(paletteColorValue, " !important;\n        }\n      ");
+    }
+  });
+  return cssString;
+};
+var tableCellBackgroundStyleOverride = function tableCellBackgroundStyleOverride() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), mapBackgroundColors());
+};
+exports.tableCellBackgroundStyleOverride = tableCellBackgroundStyleOverride;

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ 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); }; }
 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; } }
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.5.1";
+var packageVersion = "72.6.1";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 var DropList = /*#__PURE__*/function (_Component) {
@@ -137,7 +137,8 @@ var DropList = /*#__PURE__*/function (_Component) {
         position = _this$props.position,
         trigger = _this$props.trigger,
         onPositioned = _this$props.onPositioned,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        id = _this$props.id;
       var layerContent = isOpen ? (0, _react2.jsx)("div", {
         css: function css(theme) {
           return _this2.menuWrapper({
@@ -146,7 +147,9 @@ var DropList = /*#__PURE__*/function (_Component) {
         },
         "data-role": "droplistContent",
         "data-testid": testId && "".concat(testId, "--content"),
-        ref: this.handleContentRef
+        ref: this.handleContentRef,
+        id: id,
+        role: "menu"
       }, children) : null;
       return (0, _react2.jsx)("div", {
         css: this.wrapperStyles

package/dist/cjs/ui-color/ColorPalette/Color/styles.js

@@ -17,6 +17,6 @@ var buttonStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _tag
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 exports.buttonStyle = buttonStyle;
-var buttonWrapperStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), _colors.N50);
+var buttonWrapperStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), _colors.N50);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 exports.buttonWrapperStyle = buttonWrapperStyle;