@atlaskit/editor-common 88.10.0 → 88.12.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/editor-common
 
+## 88.12.0
+
+### Minor Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`e26174c7d02a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e26174c7d02a6) -
+  ED-24631 Refactor how ExternalImageBadge and CommentBadge are rendered
+
+### Patch Changes
+
+- [#138136](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138136)
+  [`35938ecf46ba7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35938ecf46ba7) -
+  [ED-24755] Implement insert functionality of element templates and fire document inserted event
+  with template IDs
+- [#138270](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138270)
+  [`0acb3673d32d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0acb3673d32d9) -
+  Add insert menu to right rail for experiment
+- Updated dependencies
+
+## 88.11.0
+
+### Minor Changes
+
+- [#136891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136891)
+  [`388780c6348e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/388780c6348e9) -
+  Pass emoji provider via preset
+- [#137736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137736)
+  [`2a88fdd213838`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a88fdd213838) -
+  Introducing new smaller refined entry-points for editor-common to reduce bundle size.
+- [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
+  [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
+  ED-24650 fix nested node jittering issue
+
+### Patch Changes
+
+- [#137217](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137217)
+  [`699039baa2c85`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/699039baa2c85) -
+  [ux] [ED-24782] Add styling for blockquotes so that when media is nested, wrapLeft and wrapRight
+  do not cause the media to sit outside the blockquotes.
+- Updated dependencies
+
 ## 88.10.0
 
 ### Minor Changes

package/count-nodes/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/count-nodes",
+  "main": "../dist/cjs/utils/count-nodes.js",
+  "module": "../dist/esm/utils/count-nodes.js",
+  "module:es2019": "../dist/es2019/utils/count-nodes.js",
+  "sideEffects": false,
+  "types": "../dist/types/utils/count-nodes.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/utils/count-nodes.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/analytics/types/enums.js

@@ -169,6 +169,7 @@ var INPUT_METHOD = exports.INPUT_METHOD = /*#__PURE__*/function (INPUT_METHOD) {
   INPUT_METHOD["FLOATING_TB"] = "floatingToolbar";
   INPUT_METHOD["FORMATTING"] = "autoformatting";
   INPUT_METHOD["INSERT_MENU"] = "insertMenu";
+  INPUT_METHOD["INSERT_MENU_RIGHT_RAIL"] = "insertMenuRightRail";
   INPUT_METHOD["KEYBOARD"] = "keyboard";
   INPUT_METHOD["MEDIA_PICKER"] = "mediaPicker";
   INPUT_METHOD["MACRO_BROWSER"] = "macroBrowser";

package/dist/cjs/insert/index.js

@@ -246,6 +246,20 @@ var insertSelectedItem = exports.insertSelectedItem = function insertSelectedIte
        */
     } else if (node instanceof _model.Node && node.isInline || isInputFragment) {
       var fragment = isInputFragment ? node : _model.Fragment.fromArray([node, state.schema.text(' ')]);
+
+      // For platform_editor_element_level_templates experiment only
+      // clean up ticket ED-24873
+      // @ts-ignore
+      if (opts.isTemplate) {
+        return insertTemplateFragment({
+          fragment: fragment,
+          tr: tr,
+          position: {
+            start: start,
+            end: start
+          }
+        });
+      }
       tr = tr.replaceWith(start, start, fragment);
       if (opts.selectInlineNode) {
         // Select inserted node
@@ -291,4 +305,16 @@ function contentAllowedInCodeBlock(state) {
     return isAllowedChild = node.type === state.schema.nodes.listItem || node.type === state.schema.nodes.bulletList || node.type === state.schema.nodes.orderedList || node.type === state.schema.nodes.paragraph || node.isInline || node.type === state.schema.nodes.panel || node.isText;
   });
   return isAllowedChild;
-}
+}
+
+// For platform_editor_element_level_templates experiment only
+// clean up ticket ED-24873
+var insertTemplateFragment = function insertTemplateFragment(_ref3) {
+  var fragment = _ref3.fragment,
+    tr = _ref3.tr,
+    position = _ref3.position;
+  var start = position.start;
+  var trWithInsert = (0, _utils.safeInsert)(fragment, start)(tr);
+  tr.setSelection(trWithInsert.selection);
+  return tr;
+};

package/dist/cjs/media-single/CommentBadgeNext.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentBadgeNext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _media = require("../media");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var baseStyles = (0, _primitives.xcss)({
+  borderRadius: 'border.radius'
+});
+var smallBadgeStyles = (0, _primitives.xcss)({
+  height: 'space.200',
+  width: 'space.200'
+});
+var mediumBadgeStyles = (0, _primitives.xcss)({
+  height: 'space.300',
+  width: 'space.300'
+});
+var CommentBadgeNext = exports.CommentBadgeNext = function CommentBadgeNext(_ref) {
+  var _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    badgeSize = _ref.badgeSize;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var title = intl.formatMessage(_media.commentMessages.viewCommentsOnMedia);
+  var colourToken = (0, _react.useMemo)(function () {
+    switch (status) {
+      case 'active':
+        return 'color.background.accent.yellow.subtlest.pressed';
+      case 'entered':
+        return 'color.background.accent.yellow.subtlest.hovered';
+      default:
+        return 'color.background.accent.yellow.subtlest';
+    }
+  }, [status]);
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    position: "top",
+    content: title
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    xcss: [baseStyles, badgeSize === 'medium' ? mediumBadgeStyles : smallBadgeStyles],
+    padding: "space.0",
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    backgroundColor: colourToken
+  }, /*#__PURE__*/_react.default.createElement(_comment.default, {
+    label: title,
+    size: badgeSize
+  })));
+};

package/dist/cjs/media-single/ExternalImageBadge.js

@@ -1,76 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExternalImageBadge = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _media = require("../media");
-var _CommentBadge = require("./CommentBadge");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var baseStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  top: 'space.025',
   borderRadius: 'border.radius',
   backgroundColor: 'elevation.surface',
-  zIndex: 'tooltip',
   lineHeight: "var(--ds-space-200, 16px)",
-  right: 'var(--right-offset)',
   cursor: 'pointer'
 });
 var ExternalImageBadge = exports.ExternalImageBadge = function ExternalImageBadge(_ref) {
-  var mediaWidth = _ref.mediaWidth,
-    mediaHeight = _ref.mediaHeight,
-    _ref$commentBadgeRigh = _ref.commentBadgeRightOffset,
-    commentBadgeRightOffset = _ref$commentBadgeRigh === void 0 ? 0 : _ref$commentBadgeRigh,
-    mediaElement = _ref.mediaElement;
+  var badgeSize = _ref.badgeSize;
   var intl = (0, _reactIntlNext.useIntl)();
   var message = intl.formatMessage(_media.externalMediaMessages.externalMediaFile);
-  var _useState = (0, _react.useState)((0, _CommentBadge.getBadgeSize)(mediaWidth, mediaHeight)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    badgeSize = _useState2[0],
-    setBadgeSize = _useState2[1];
-  // detect resize of media element to adjust badge size
-  // will combine with the comment badge resize observer when refactoring in the future to avoid multiple resize observers
-  (0, _react.useEffect)(function () {
-    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
-      var _entries = (0, _slicedToArray2.default)(entries, 1),
-        entry = _entries[0];
-      var _entry$contentRect = entry.contentRect,
-        width = _entry$contentRect.width,
-        height = _entry$contentRect.height;
-      setBadgeSize((0, _CommentBadge.getBadgeSize)(width, height));
-    }));
-    if (mediaElement) {
-      observer.observe(mediaElement);
-    }
-    return function () {
-      observer.disconnect();
-    };
-  }, [mediaElement]);
-  var baseRightOffset = badgeSize === 'medium' ? 4 : 2;
-  var rightOffset = baseRightOffset + commentBadgeRightOffset;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-  , {
-    style: {
-      '--right-offset': "".concat(rightOffset, "px")
-    },
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     padding: badgeSize === 'medium' ? 'space.050' : 'space.0',
-    "data-external-image-badge": "true",
     xcss: baseStyles,
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: message
+    content: message,
+    position: "top"
   }, /*#__PURE__*/_react.default.createElement(_info.default, {
     size: "small",
     label: message

package/dist/cjs/media-single/MediaBadges.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaBadges = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _primitives = require("@atlaskit/primitives");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var containerStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  position: 'absolute',
+  top: 'space.0',
+  right: 'space.0',
+  lineHeight: "var(--ds-space-200, 16px)",
+  gap: 'space.025',
+  zIndex: 'card',
+  height: 'fit-content',
+  width: 'fit-content',
+  margin: 'space.075'
+});
+var resizeOffsetStyles = (0, _primitives.xcss)({
+  right: 'space.150'
+});
+var smallBadgeStyles = (0, _primitives.xcss)({
+  margin: 'space.025'
+});
+var getBadgeSize = function getBadgeSize(width, height) {
+  // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
+  return width && width < 70 || height && height < 70 ? 'small' : 'medium';
+};
+var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
+  var children = _ref.children,
+    mediaElement = _ref.mediaElement,
+    mediaWidth = _ref.mediaWidth,
+    mediaHeight = _ref.mediaHeight,
+    extendedResizeOffset = _ref.extendedResizeOffset;
+  var _useState = (0, _react.useState)(getBadgeSize(mediaWidth, mediaHeight)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    badgeSize = _useState2[0],
+    setBadgeSize = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
+      var _entries = (0, _slicedToArray2.default)(entries, 1),
+        entry = _entries[0];
+      var _entry$contentRect = entry.contentRect,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height;
+      setBadgeSize(getBadgeSize(width, height));
+    }));
+    if (mediaElement) {
+      observer.observe(mediaElement);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaElement]);
+  if (typeof children === 'function') {
+    children = children({
+      badgeSize: badgeSize
+    });
+  }
+  if (!mediaElement || _react.default.Children.count(children) === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    testId: "media-badges",
+    "data-media-badges": "true",
+    xcss: [containerStyles, extendedResizeOffset && resizeOffsetStyles, badgeSize === 'small' && smallBadgeStyles]
+  }, children);
+};

package/dist/cjs/media-single/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "CommentBadge", {
     return _CommentBadge.CommentBadge;
   }
 });
+Object.defineProperty(exports, "CommentBadgeNext", {
+  enumerable: true,
+  get: function get() {
+    return _CommentBadgeNext.CommentBadgeNext;
+  }
+});
 Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
   enumerable: true,
   get: function get() {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH", {
     return _constants.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH;
   }
 });
+Object.defineProperty(exports, "MediaBadges", {
+  enumerable: true,
+  get: function get() {
+    return _MediaBadges.MediaBadges;
+  }
+});
 Object.defineProperty(exports, "MediaSingleLayout", {
   enumerable: true,
   get: function get() {
@@ -144,4 +156,6 @@ Object.defineProperty(exports, "wrappedLayouts", {
 var _constants = require("./constants");
 var _utils = require("./utils");
 var _CommentBadge = require("./CommentBadge");
-var _ExternalImageBadge = require("./ExternalImageBadge");
+var _CommentBadgeNext = require("./CommentBadgeNext");
+var _ExternalImageBadge = require("./ExternalImageBadge");
+var _MediaBadges = require("./MediaBadges");

package/dist/cjs/messages/insert-block.js

@@ -16,6 +16,11 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
     defaultMessage: 'Create and assign action items',
     description: ''
   },
+  closeInsertRightRail: {
+    id: 'fabric.editor.insertRightRail.close',
+    defaultMessage: 'Close',
+    description: 'Close button label'
+  },
   link: {
     id: 'fabric.editor.link',
     defaultMessage: 'Link',
@@ -36,6 +41,11 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
     defaultMessage: 'Add image, video, or file',
     description: 'Insert one or more files, videos or images'
   },
+  insertRightRailTitle: {
+    id: 'fabric.editor.insertRightRail.title',
+    defaultMessage: 'Insert',
+    description: 'Insert a node into the document'
+  },
   insertMediaFromUrl: {
     id: 'fabric.editor.insertMediaFromUrl',
     defaultMessage: 'Image from link',

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "88.10.0";
+var packageVersion = "88.12.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -14,6 +14,9 @@ var blockquoteSharedStyles = exports.blockquoteSharedStyles = (0, _react.css)({
   '& blockquote': {
     boxSizing: 'border-box',
     color: 'inherit',
+    width: '100%',
+    clear: 'both',
+    display: 'inline-block',
     paddingLeft: "var(--ds-space-200, 16px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderLeft: "2px solid ".concat("var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")")),
@@ -57,6 +60,9 @@ var blockquoteSharedStylesNew = exports.blockquoteSharedStylesNew = (0, _react.c
   '& blockquote': {
     boxSizing: 'border-box',
     color: 'inherit',
+    width: '100%',
+    clear: 'both',
+    display: 'inline-block',
     paddingLeft: "var(--ds-space-250, 20px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderLeft: "2px solid ".concat("var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")")),

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

@@ -32,7 +32,7 @@ var mediaSingleSharedStyle = exports.mediaSingleSharedStyle = (0, _react.css)((_
   marginBottom: "var(--ds-space-150, 12px)",
   clear: 'both',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.image-wrap-left, &.image-wrap-right': {
+  '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
     clear: 'none',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&:first-child': {

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

@@ -13,7 +13,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _browser = require("../../utils/browser");
 var _codeBlock = require("./code-block");
 var _tableCell = require("./tableCell");
-var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var tableMarginTop = exports.tableMarginTop = 24;
 var tableMarginBottom = exports.tableMarginBottom = 16;
 var tableMarginTopWithControl = exports.tableMarginTopWithControl = 14;
@@ -45,9 +45,16 @@ var TableSharedCssClassName = exports.TableSharedCssClassName = {
   TABLE_RESIZER_CONTAINER: "".concat(_adfSchema.tablePrefixSelector, "-resizer-container")
 };
 
+/* first block node has 0 top margin */
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :first-child:not(style),\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
+};
+
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
 var tableSharedStyle = exports.tableSharedStyle = function tableSharedStyle() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t.", " {\n\t\tposition: relative;\n\t\tmargin: 0 auto ", ";\n\t\tbox-sizing: border-box;\n\n\t\t/**\n     * Fix block top alignment inside table cells.\n     */\n\t\t.decisionItemView-content-wrap:first-of-type > div {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.", "[data-number-column='true'] {\n\t\tpadding-left: ", "px;\n\t\tclear: both;\n\t}\n\n\t.", " {\n\t\twill-change: width, margin-left;\n\t}\n\n\t.", " table {\n\t\twill-change: width;\n\t}\n\n\t.", " > table {\n\t\tmargin: ", " 0 0 0;\n\t}\n\n\t.", " > table,\n\t.", " > table {\n\t\tmargin: ", " ", " 0 0;\n\t}\n\n\t/* avoid applying styles to nested tables (possible via extensions) */\n\t.", " > table,\n\t.", " > table,\n\t.", " > table {\n\t\tborder-collapse: collapse;\n\t\tborder: ", "px solid\n\t\t\t", ";\n\t\ttable-layout: fixed;\n\t\tfont-size: 1em;\n\t\twidth: 100%;\n\n\t\t&[data-autosize='true'] {\n\t\t\ttable-layout: auto;\n\t\t}\n\n\t\t& {\n\t\t\t* {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\thr {\n\t\t\t\tbox-sizing: content-box;\n\t\t\t}\n\n\t\t\ttbody {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t\tth td {\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tmin-width: ", "px;\n\t\t\t\tfont-weight: normal;\n\t\t\t\tvertical-align: top;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-right-width: 0;\n\t\t\t\tborder-bottom-width: 0;\n\n\t\t\t\tpadding: ", ";\n\t\t\t\t/* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n\t\t\t\t", "\n\n\t\t\t\t> :first-child:not(style),\n        > style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\tth p:not(:first-of-type),\n\t\t\t\ttd p:not(:first-of-type) {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t\tth {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\ttext-align: left;\n\n\t\t\t\t/* only apply this styling to codeblocks in default background headercells */\n\t\t\t\t/* TODO this needs to be overhauled as it relies on unsafe selectors */\n\t\t\t\t&:not([style]):not(.danger) {\n\t\t\t\t\t.", ":not(.danger) {\n\t\t\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t\t\t:not(.", ") {\n\t\t\t\t\t\t\tbox-shadow: 0px 0px 0px 1px ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tbackground-image: ", ";\n\n\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t/* this is only relevant to the element taken care of by renderer */\n\t\t\t\t\t\t> [data-ds--code--code-block] {\n\t\t\t\t\t\t\tbackground-image: ", "!important;\n\n\t\t\t\t\t\t\tbackground-color: ", "!important;\n\n\t\t\t\t\t\t\t// selector lives inside @atlaskit/code\n\t\t\t\t\t\t\t--ds--code--line-number-bg-color: ", ";\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), (0, _experiments.editorExperiment)('table-nested-dnd', true) ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)") : "var(--ds-space-100, 8px)", _browser.browser.gecko || _browser.browser.ie || _browser.browser.mac && _browser.browser.chrome ? 'background-clip: padding-box;' : '', "var(--ds-space-150, 12px)", "var(--ds-background-accent-gray-subtlest, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, rgb(235, 237, 240))", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, transparent)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t.", " {\n\t\tposition: relative;\n\t\tmargin: 0 auto ", ";\n\t\tbox-sizing: border-box;\n\n\t\t/**\n     * Fix block top alignment inside table cells.\n     */\n\t\t.decisionItemView-content-wrap:first-of-type > div {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.", "[data-number-column='true'] {\n\t\tpadding-left: ", "px;\n\t\tclear: both;\n\t}\n\n\t.", " {\n\t\twill-change: width, margin-left;\n\t}\n\n\t.", " table {\n\t\twill-change: width;\n\t}\n\n\t.", " > table {\n\t\tmargin: ", " 0 0 0;\n\t}\n\n\t.", " > table,\n\t.", " > table {\n\t\tmargin: ", " ", " 0 0;\n\t}\n\n\t/* avoid applying styles to nested tables (possible via extensions) */\n\t.", " > table,\n\t.", " > table,\n\t.", " > table {\n\t\tborder-collapse: collapse;\n\t\tborder: ", "px solid\n\t\t\t", ";\n\t\ttable-layout: fixed;\n\t\tfont-size: 1em;\n\t\twidth: 100%;\n\n\t\t&[data-autosize='true'] {\n\t\t\ttable-layout: auto;\n\t\t}\n\n\t\t& {\n\t\t\t* {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\thr {\n\t\t\t\tbox-sizing: content-box;\n\t\t\t}\n\n\t\t\ttbody {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t\tth td {\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tmin-width: ", "px;\n\t\t\t\tfont-weight: normal;\n\t\t\t\tvertical-align: top;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-right-width: 0;\n\t\t\t\tborder-bottom-width: 0;\n\n\t\t\t\tpadding: ", ";\n\t\t\t\t/* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n\t\t\t\t", "\n\n\t\t\t\t", "\n\n\t\t\t\tth p:not(:first-of-type),\n\t\t\t\ttd p:not(:first-of-type) {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t\tth {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\ttext-align: left;\n\n\t\t\t\t/* only apply this styling to codeblocks in default background headercells */\n\t\t\t\t/* TODO this needs to be overhauled as it relies on unsafe selectors */\n\t\t\t\t&:not([style]):not(.danger) {\n\t\t\t\t\t.", ":not(.danger) {\n\t\t\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t\t\t:not(.", ") {\n\t\t\t\t\t\t\tbox-shadow: 0px 0px 0px 1px ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tbackground-image: ", ";\n\n\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t/* this is only relevant to the element taken care of by renderer */\n\t\t\t\t\t\t> [data-ds--code--code-block] {\n\t\t\t\t\t\t\tbackground-image: ", "!important;\n\n\t\t\t\t\t\t\tbackground-color: ", "!important;\n\n\t\t\t\t\t\t\t// selector lives inside @atlaskit/code\n\t\t\t\t\t\t\t--ds--code--line-number-bg-color: ", ";\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), (0, _experiments.editorExperiment)('table-nested-dnd', true) ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)") : "var(--ds-space-100, 8px)", _browser.browser.gecko || _browser.browser.ie || _browser.browser.mac && _browser.browser.chrome ? 'background-clip: padding-box;' : '', firstNodeWithNotMarginTop(), "var(--ds-space-150, 12px)", "var(--ds-background-accent-gray-subtlest, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, rgb(235, 237, 240))", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, transparent)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"
   }), "var(--ds-background-neutral, rgb(235, 237, 240))", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, rgb(226, 229, 233))", (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"

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

@@ -25,7 +25,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "88.10.0";
+var packageVersion = "88.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -20,6 +20,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// @deprecated - use Emoji from editor-plugin-emoji
 var EmojiNode = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(EmojiNode, _PureComponent);
   var _super = _createSuper(EmojiNode);

package/dist/cjs/ui/MediaSingle/styled.js

@@ -211,7 +211,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\n\t", "\n\n\t/* Editor */\n  & > figure {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t// Comments on media project adds comment badge as child of the media wrapper,\n\t// thus we need to exclude it so that style is applied to intended div\n\t& > div:not([data-comment-badge='true'], [data-external-image-badge='true']) {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t& * [data-mark-annotation-type='inlineComment'] {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t&[data-node-type='embedCard'] > div {\n\t\twidth: 100%;\n\t}\n\n\t/* Renderer */\n\t[data-node-type='media'] {\n\t\tposition: static !important;\n\n\t\t> div {\n\t\t\tposition: absolute;\n\t\t\theight: 100%;\n\t\t}\n\t}\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\n\t", "\n\n\t/* Editor */\n  & > figure {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t// Comments on media project adds comment badge as child of the media wrapper,\n\t// thus we need to exclude it so that style is applied to intended div\n\t// remove [data-comment-badge='true'] when ff platform_editor_insert_media_plugin_phase_one is cleaned up\n\t& > div:not([data-comment-badge='true'], [data-media-badges='true']) {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t& * [data-mark-annotation-type='inlineComment'] {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t&[data-node-type='embedCard'] > div {\n\t\twidth: 100%;\n\t}\n\n\t/* Renderer */\n\t[data-node-type='media'] {\n\t\tposition: static !important;\n\n\t\t> div {\n\t\t\tposition: absolute;\n\t\t\theight: 100%;\n\t\t}\n\t}\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,