@atlaskit/editor-common 72.5.0 → 72.6.0

package/dist/es2019/utils/nodes.js

@@ -1,3 +1,4 @@
+import { findParentNodeOfType } from 'prosemirror-utils';
 /**
  * Finds all top level nodes affected by the transaction
  * Uses from/to positions in transaction's steps to work out which nodes will
@@ -77,4 +78,37 @@ export const isSupportedInParent = (state, fragment, currentAppearance) => {
   const depth = currentAppearance === 'embed' || currentAppearance === 'block' ? undefined : -1;
   const parent = state.selection.$from.node(depth);
   return parent && parent.type.validContent(fragment);
+};
+
+/**
+ * Checks if the passed in node is a media node
+ * Includes media, mediaInline, mediaGroup, mediaSingle
+ * @param node The PM node to be checked
+ */
+export const isMediaNode = node => {
+  return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(node.type.name);
+};
+
+/**
+ * Checks if the node before selection is a media node
+ * If there is no node before, checks the node before the parent node
+ * Includes media, mediaInline, mediaGroup, mediaSingle
+ * @param $pos The position of the selection
+ * @param state The editor state
+ */
+export const isNodeBeforeMediaNode = ($pos, state) => {
+  let nodeBefore = $pos.nodeBefore;
+  if (!nodeBefore) {
+    const depthOfParent = $pos.depth - 1 || 1;
+    const parentNode = findParentNodeOfType([state.schema.nodes[`${$pos.node(depthOfParent).type.name}`]])(state.selection);
+    const resolvedPosOfParentNode = parentNode ? state.tr.doc.resolve(parentNode.pos) : undefined;
+    const nodeBeforeParent = resolvedPosOfParentNode && resolvedPosOfParentNode.pos < state.doc.nodeSize ? resolvedPosOfParentNode.nodeBefore : undefined;
+    if (nodeBeforeParent) {
+      nodeBefore = nodeBeforeParent;
+    }
+  }
+  if (nodeBefore) {
+    return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(nodeBefore.type.name);
+  }
+  return false;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.5.0",
+	"version": "72.6.0",
 	"sideEffects": false
 }

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

@@ -1,5 +1,6 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
@@ -39,10 +40,23 @@ export var getParentNodeWidth = function getParentNodeWidth(pos, state, containe
   }
 
   // account for the padding of the parent node
-  if (node.type === schema.nodes.layoutSection) {
-    parentWidth -= LAYOUT_COLUMN_PADDING * 2;
-  } else if (node.type === schema.nodes.bodiedExtension) {
-    parentWidth -= BODIED_EXT_PADDING * 2;
+  switch (node.type) {
+    case schema.nodes.layoutSection:
+      parentWidth -= LAYOUT_COLUMN_PADDING * 2;
+      break;
+    case schema.nodes.bodiedExtension:
+      parentWidth -= BODIED_EXT_PADDING * 2;
+      break;
+    case schema.nodes.expand:
+      // padding
+      parentWidth -= gridSize() * 2;
+      // gutter offset
+      parentWidth += gridSize() * 1.5 * 2;
+      // padding right
+      parentWidth -= gridSize();
+      // padding left
+      parentWidth -= gridSize() * 4 - gridSize() / 2;
+      break;
   }
   parentWidth -= 2; // border
 

package/dist/esm/preset/builder.js

@@ -0,0 +1,172 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _construct from "@babel/runtime/helpers/construct";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var EditorPresetBuilder = /*#__PURE__*/function () {
+  function EditorPresetBuilder() {
+    _classCallCheck(this, EditorPresetBuilder);
+    _defineProperty(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) || [];
+  }
+  _createClass(EditorPresetBuilder, [{
+    key: "add",
+    value: function add(nextOrTuple) {
+      return _construct(EditorPresetBuilder, [
+      /**
+       * re-cast this to NewPlugin as we've done all the type
+       * safety, dependency checking, narrowing, during
+       * `SafePresetCheck & VerifyPluginDependencies`
+       */
+      nextOrTuple].concat(_toConsumableArray(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 = _slicedToArray(_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 = _slicedToArray(_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;
+}();

package/dist/esm/preset/index.js

@@ -0,0 +1,2 @@
+export { EditorPresetBuilder } from './builder';
+export { EditorPluginInjectionAPI } from './plugin-injection-api';

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

@@ -0,0 +1,213 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _typeof from "@babel/runtime/helpers/typeof";
+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; }
+import isEqual from 'lodash/isEqual';
+import throttle from 'lodash/throttle';
+function hasGetSharedState(plugin) {
+  return typeof plugin.getSharedState === 'function';
+}
+function hasActions(plugin) {
+  return _typeof(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 = throttle(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 = isEqual(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);
+export var PluginsData = /*#__PURE__*/_createClass(function PluginsData() {
+  _classCallCheck(this, PluginsData);
+});
+var ActionsAPI = /*#__PURE__*/function () {
+  function ActionsAPI() {
+    _classCallCheck(this, ActionsAPI);
+  }
+  _createClass(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;
+}();
+export var SharedStateAPI = /*#__PURE__*/function () {
+  function SharedStateAPI(_ref2) {
+    var getEditorState = _ref2.getEditorState;
+    _classCallCheck(this, SharedStateAPI);
+    this.getEditorState = getEditorState;
+    this.listeners = new Map();
+  }
+  _createClass(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;
+}();
+export var EditorPluginInjectionAPI = /*#__PURE__*/function () {
+  function EditorPluginInjectionAPI(_ref4) {
+    var _this2 = this;
+    var getEditorState = _ref4.getEditorState;
+    _classCallCheck(this, EditorPluginInjectionAPI);
+    _defineProperty(this, "onEditorViewUpdated", function (_ref5) {
+      var newEditorState = _ref5.newEditorState,
+        oldEditorState = _ref5.oldEditorState;
+      _this2.sharedStateAPI.notifyListeners({
+        newEditorState: newEditorState,
+        oldEditorState: oldEditorState,
+        plugins: _this2.plugins
+      });
+    });
+    _defineProperty(this, "onEditorPluginInitialized", function (plugin) {
+      _this2.addPlugin(plugin);
+    });
+    _defineProperty(this, "addPlugin", function (plugin) {
+      _this2.plugins.set(plugin.name, plugin);
+    });
+    _defineProperty(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();
+  }
+  _createClass(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;
+}();

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

@@ -3,5 +3,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 var richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
 export { mediaSingleSharedStyle, richMediaClassName };

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

@@ -152,11 +152,11 @@ export 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/esm/styles/shared/table.js

@@ -10,6 +10,7 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
+import { tableCellBackgroundStyleOverride } from './tableCell';
 export var tableMarginTop = 24;
 export var tableMarginBottom = 16;
 export var tableMarginTopWithControl = 14;
@@ -35,7 +36,7 @@ export var TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration")
 };
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, 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, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, 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, themed({
     light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
     dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
   })(props), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, themed({

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

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { css } from '@emotion/react';
+import { tableBackgroundColorNames } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+// 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 = '';
+  tableBackgroundColorNames.forEach(function (value, key) {
+    var paletteColorValue = 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;
+};
+export var tableCellBackgroundStyleOverride = function tableCellBackgroundStyleOverride() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), mapBackgroundColors());
+};

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.5.0";
+var packageVersion = "72.6.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 var DropList = /*#__PURE__*/function (_Component) {
@@ -131,7 +131,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 ? jsx("div", {
         css: function css(theme) {
           return _this2.menuWrapper({
@@ -140,7 +141,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 jsx("div", {
         css: this.wrapperStyles

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

@@ -10,5 +10,5 @@ export var buttonStyle = css(_templateObject || (_templateObject = _taggedTempla
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var buttonWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), N50);
+export var buttonWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), N50);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-color/ColorPalette/Palettes/index.js

@@ -1 +1,2 @@
-export { DEFAULT_BORDER_COLOR } from './common';
+export { DEFAULT_BORDER_COLOR } from './common';
+export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages } from './paletteMessagesTokenModeNames';