@atlaskit/editor-common 74.1.2 → 74.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-common
 
+## 74.2.1
+
+### Patch Changes
+
+- [`01bb98b52ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01bb98b52ee) - Internal change to replace gridSize with space tokens.
+
+## 74.2.0
+
+### Minor Changes
+
+- [`1549c2e6dda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1549c2e6dda) - Extract width plugin from `editor-core` to separate `editor-plugin-width` package.
+- [`f055b886032`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f055b886032) - Extract the grid plugin to a separate package.
+
+### Patch Changes
+
+- [`6b56797b868`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b56797b868) - Dummy changeset to trigger a pre-release of editor-common
+- [`10ddf00db40`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10ddf00db40) - [ux] add a handler size option and relevant style and demo page
+- [`94561f309f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94561f309f3) - New stage-0 change: custom "width" attribute on Tables nodes
+- [`b7086232a7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7086232a7c) - ESS-3135: move collab provider types into @atlaskit/collab-provider
+- Updated dependencies
+
 ## 74.1.2
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var 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 = "74.1.2";
+var packageVersion = "74.2.1";
 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/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "EXTENSION_PADDING", {
     return _extension.EXTENSION_PADDING;
   }
 });
+Object.defineProperty(exports, "GRID_GUTTER", {
+  enumerable: true,
+  get: function get() {
+    return _grid.GRID_GUTTER;
+  }
+});
 Object.defineProperty(exports, "LAYOUT_COLUMN_PADDING", {
   enumerable: true,
   get: function get() {
@@ -141,6 +147,12 @@ Object.defineProperty(exports, "getOrderedListInlineStyles", {
     return _lists.getOrderedListInlineStyles;
   }
 });
+Object.defineProperty(exports, "gridStyles", {
+  enumerable: true,
+  get: function get() {
+    return _grid.gridStyles;
+  }
+});
 Object.defineProperty(exports, "headingsSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -315,4 +327,5 @@ var _dropdownMenu = require("./shared/dropdown-menu");
 var _codeBlock = require("./shared/code-block");
 var _layout = require("./shared/layout");
 var _extension = require("./shared/extension");
-var _resizer = require("./shared/resizer");
+var _resizer = require("./shared/resizer");
+var _grid = require("./shared/grid");

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridStyles = exports.GRID_GUTTER = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+var GRID_GUTTER = 12;
+exports.GRID_GUTTER = GRID_GUTTER;
+var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, "var(--ds-border, ".concat(_colors.N30A, ")"), "var(--ds-border-focused, ".concat(_colors.B200, ")"));
+exports.gridStyles = gridStyles;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandleZIndex = exports.resizerHandleRightClassName = exports.resizerHandlePadding = exports.resizerHandleLeftClassName = void 0;
+exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandlerSmallClassName = exports.resizerHandlerMediumClassName = exports.resizerHandlerLargeClassName = exports.resizerHandlerClassName = exports.resizerHandleZIndex = exports.resizerHandleRightClassName = exports.resizerHandlePadding = exports.resizerHandleLeftClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
@@ -27,5 +27,17 @@ var resizerHandlePadding = 13;
 exports.resizerHandlePadding = resizerHandlePadding;
 var resizerHandleZIndex = 99;
 exports.resizerHandleZIndex = resizerHandleZIndex;
-var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n    /* padding-right: 12px; */\n    /* margin-right: -", "px; */\n  }\n\n  .", " {\n    align-items: flex-start;\n    /* padding-left: 12px; */\n    /* margin-left: -", "px; */\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandlePadding, resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"));
+var resizerHandlerSmallClassName = 'resizer-handler-small';
+exports.resizerHandlerSmallClassName = resizerHandlerSmallClassName;
+var resizerHandlerMediumClassName = 'resizer-handler-medium';
+exports.resizerHandlerMediumClassName = resizerHandlerMediumClassName;
+var resizerHandlerLargeClassName = 'resizer-handler-large';
+exports.resizerHandlerLargeClassName = resizerHandlerLargeClassName;
+var resizerHandlerClassName = {
+  small: resizerHandlerSmallClassName,
+  medium: resizerHandlerMediumClassName,
+  large: resizerHandlerLargeClassName
+};
+exports.resizerHandlerClassName = resizerHandlerClassName;
+var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n    /* padding-right: 12px; */\n    /* margin-right: -", "px; */\n  }\n\n  .", " {\n    align-items: flex-start;\n    /* padding-left: 12px; */\n    /* margin-left: -", "px; */\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandlePadding, resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large);
 exports.resizerStyles = resizerStyles;

package/dist/cjs/ui/ContextPanel/context.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = exports.ContextPanel = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+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; } }
+// React context to communicate the active context panel width up and down the tree.
+//
+// We need the width prop from the ContextPanel component.
+//
+// However, the actual <ContextPanel /> component might be deeply nested inside the contextPanel.
+// For example, in the template context panel storybook, we wrap it in 2 higher order components.
+//
+// Changing the max-width on the main editor container happens above where the <ContextPanel /> gets rendered.
+//
+// To subtract the context panel width from the available real estate, we use the Provider and Consumer.
+//
+// positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
+// able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
+// panel
+
+var ContextPanel = /*#__PURE__*/_react.default.createContext({
+  width: 0,
+  positionedOverEditor: false,
+  broadcastWidth: function broadcastWidth() {},
+  broadcastPosition: function broadcastPosition() {}
+});
+exports.ContextPanel = ContextPanel;
+var ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ContextPanelWidthProvider, _React$Component);
+  var _super = _createSuper(ContextPanelWidthProvider);
+  function ContextPanelWidthProvider(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ContextPanelWidthProvider);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      width: 0,
+      positionedOverEditor: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "broadcastSidebarWidth", function (width) {
+      if (width !== _this.state.width) {
+        _this.setState({
+          width: width
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "broadcastPosition", function (positionedOverEditor) {
+      if (positionedOverEditor !== _this.state.positionedOverEditor) {
+        _this.setState({
+          positionedOverEditor: positionedOverEditor
+        });
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ContextPanelWidthProvider, [{
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        width = _this$state.width,
+        positionedOverEditor = _this$state.positionedOverEditor;
+      return /*#__PURE__*/_react.default.createElement(Provider, {
+        value: {
+          width: width,
+          positionedOverEditor: positionedOverEditor,
+          broadcastWidth: this.broadcastSidebarWidth,
+          broadcastPosition: this.broadcastPosition
+        }
+      }, this.props.children);
+    }
+  }]);
+  return ContextPanelWidthProvider;
+}(_react.default.Component);
+exports.ContextPanelWidthProvider = ContextPanelWidthProvider;
+var Provider = ContextPanel.Provider,
+  Consumer = ContextPanel.Consumer;
+exports.ContextPanelConsumer = Consumer;
+exports.ContextPanelProvider = Provider;

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

@@ -22,13 +22,11 @@ var _constants = require("@atlaskit/theme/constants");
 var _Layer = _interopRequireDefault(require("../Layer"));
 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; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+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; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.1.2";
+var packageVersion = "74.2.1";
 var halfFocusRing = 1;
-// TODO: Migrate away from gridSize
-// Recommendation: Replace gridSize with token('space.100', '8px') after verfiying Popper can accept this
-var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
+var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DropList, _Component);
   var _super = _createSuper(DropList);

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

@@ -14,7 +14,9 @@ function ResizerNext(props) {
   var resizable = _react.default.useRef(null);
   var handleResize = props.handleResize,
     handleResizeStart = props.handleResizeStart,
-    handleResizeStop = props.handleResizeStop;
+    handleResizeStop = props.handleResizeStop,
+    _props$handlerHeightS = props.handlerHeightSize,
+    handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS;
   var onResizeStart = _react.default.useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
@@ -57,6 +59,11 @@ function ResizerNext(props) {
       right: _resizer.resizerHandleRightClassName
     };
   }
+
+  // add handler height size classname to handleClasses
+  Object.keys(handles).forEach(function (key) {
+    handles[key] = (0, _classnames.default)(handles[key], _resizer.resizerHandlerClassName[handlerHeightSize]);
+  });
   var innerPadding = props.innerPadding || _resizer.resizerHandlePadding;
   var handleStyles = {
     left: {

package/dist/cjs/ui/index.js

@@ -17,6 +17,30 @@ Object.defineProperty(exports, "Caption", {
     return _Caption.default;
   }
 });
+Object.defineProperty(exports, "ContextPanel", {
+  enumerable: true,
+  get: function get() {
+    return _context.ContextPanel;
+  }
+});
+Object.defineProperty(exports, "ContextPanelConsumer", {
+  enumerable: true,
+  get: function get() {
+    return _context.ContextPanelConsumer;
+  }
+});
+Object.defineProperty(exports, "ContextPanelProvider", {
+  enumerable: true,
+  get: function get() {
+    return _context.ContextPanelProvider;
+  }
+});
+Object.defineProperty(exports, "ContextPanelWidthProvider", {
+  enumerable: true,
+  get: function get() {
+    return _context.ContextPanelWidthProvider;
+  }
+});
 Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
   enumerable: true,
   get: function get() {
@@ -295,5 +319,6 @@ var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 var _IntlErrorBoundary = require("./IntlErrorBoundary");
 var _IntlProviderIfMissingWrapper = _interopRequireDefault(require("./IntlProviderIfMissingWrapper"));
 var _Button = _interopRequireDefault(require("./FloatingToolbar/Button"));
+var _context = require("./ContextPanel/context");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/ui-menu/ToolbarButton/index.js

@@ -14,7 +14,9 @@ var _analyticsListeners = require("@atlaskit/analytics-listeners");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _styles = _interopRequireDefault(require("./styles"));
-var _templateObject;
+var _templateObject; // This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
+// If you make any change here, copy it to above file as well
+//  and notify about the change in #team-fc-editor-ai-dev channel.
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/ui-menu/ToolbarButton/styles.js

@@ -8,6 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+// This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/styles.tsx`
+// If you make any change here, copy it to above file as well
+//  and notify about the change in #team-fc-editor-ai-dev channel.
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
     ref: ref

package/dist/cjs/utils/grid.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridTypeForLayout = void 0;
+var gridTypeForLayout = function gridTypeForLayout(layout) {
+  return layout === 'wrap-left' || layout === 'wrap-right' ? 'wrapped' : 'full';
+};
+exports.gridTypeForLayout = gridTypeForLayout;

package/dist/cjs/utils/index.js

@@ -346,6 +346,12 @@ Object.defineProperty(exports, "getUnsupportedContentLevelData", {
     return _analytics.getUnsupportedContentLevelData;
   }
 });
+Object.defineProperty(exports, "gridTypeForLayout", {
+  enumerable: true,
+  get: function get() {
+    return _grid.gridTypeForLayout;
+  }
+});
 Object.defineProperty(exports, "hasMergedCell", {
   enumerable: true,
   get: function get() {
@@ -769,6 +775,7 @@ var _outdatedBrowsers = require("./outdated-browsers");
 var _referentiality = require("./referentiality");
 var _list = require("./list");
 var _hyperlink = require("./hyperlink");
+var _grid = require("./grid");
 // prosemirror-history does not export its plugin key
 var pmHistoryPluginKey = 'history$';
 exports.pmHistoryPluginKey = pmHistoryPluginKey;

package/dist/cjs/utils/validator.js

@@ -670,7 +670,8 @@ var getValidNode = function getValidNode(originalNode) {
                 type: type,
                 content: content,
                 attrs: _objectSpread(_objectSpread({}, attrs), {}, {
-                  localId: (attrs === null || attrs === void 0 ? void 0 : attrs.localId) || (0, _adfSchema.generateUuid)()
+                  localId: (attrs === null || attrs === void 0 ? void 0 : attrs.localId) || (0, _adfSchema.generateUuid)(),
+                  width: (attrs === null || attrs === void 0 ? void 0 : attrs.width) || null
                 })
               };
             }

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-// DO NOT EMPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS.
+// DO NOT EXPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS.
 export {};

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.1.2";
+const packageVersion = "74.2.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/index.js

@@ -22,4 +22,5 @@ export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
-export { resizerStyles } from './shared/resizer';
+export { resizerStyles } from './shared/resizer';
+export { gridStyles, GRID_GUTTER } from './shared/grid';

package/dist/es2019/styles/shared/grid.js

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
+import { B200, N30A } from '@atlaskit/theme/colors';
+export const GRID_GUTTER = 12;
+export const gridStyles = css`
+  .gridParent {
+    width: calc(100% + ${GRID_GUTTER * 2}px);
+    margin-left: -${GRID_GUTTER}px;
+    margin-right: -${GRID_GUTTER}px;
+    transform: scale(1);
+    z-index: ${akEditorGridLineZIndex};
+  }
+
+  .gridContainer {
+    position: fixed;
+    height: 100vh;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
+  .gridLine {
+    border-left: 1px solid ${`var(--ds-border, ${N30A})`};
+    display: inline-block;
+    box-sizing: border-box;
+    height: 100%;
+    margin-left: -1px;
+
+    transition: border-color 0.15s linear;
+    z-index: 0;
+  }
+
+  .highlight {
+    border-left: 1px solid ${`var(--ds-border-focused, ${B200})`};
+  }
+`;

package/dist/es2019/styles/shared/resizer.js

@@ -13,6 +13,14 @@ export const resizerHandleLeftClassName = 'resizer-handle-left';
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const resizerHandlePadding = 13;
 export const resizerHandleZIndex = 99;
+export const resizerHandlerSmallClassName = 'resizer-handler-small';
+export const resizerHandlerMediumClassName = 'resizer-handler-medium';
+export const resizerHandlerLargeClassName = 'resizer-handler-large';
+export const resizerHandlerClassName = {
+  small: resizerHandlerSmallClassName,
+  medium: resizerHandlerMediumClassName,
+  large: resizerHandlerLargeClassName
+};
 export const resizerStyles = css`
   .${resizerItemClassName} {
     background: ${`var(--ds-border-focused, ${B200})`};
@@ -69,4 +77,19 @@ export const resizerStyles = css`
     .${resizerHandleLeftClassName}::after {
     background: ${`var(--ds-border-focused, ${B200})`};
   }
+
+  .${resizerHandleRightClassName}.${resizerHandlerClassName.medium}::after,
+    .${resizerHandleLeftClassName}.${resizerHandlerClassName.medium}::after {
+    height: 64px;
+  }
+
+  .${resizerHandleRightClassName}.${resizerHandlerClassName.small}::after,
+    .${resizerHandleLeftClassName}.${resizerHandlerClassName.small}::after {
+    height: 43px;
+  }
+
+  .${resizerHandleRightClassName}.${resizerHandlerClassName.large}::after,
+    .${resizerHandleLeftClassName}.${resizerHandlerClassName.large}::after {
+    height: 96px;
+  }
 `;

package/dist/es2019/ui/ContextPanel/context.js

@@ -0,0 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+
+// React context to communicate the active context panel width up and down the tree.
+//
+// We need the width prop from the ContextPanel component.
+//
+// However, the actual <ContextPanel /> component might be deeply nested inside the contextPanel.
+// For example, in the template context panel storybook, we wrap it in 2 higher order components.
+//
+// Changing the max-width on the main editor container happens above where the <ContextPanel /> gets rendered.
+//
+// To subtract the context panel width from the available real estate, we use the Provider and Consumer.
+//
+// positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
+// able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
+// panel
+export const ContextPanel = /*#__PURE__*/React.createContext({
+  width: 0,
+  positionedOverEditor: false,
+  broadcastWidth: () => {},
+  broadcastPosition: () => {}
+});
+export class ContextPanelWidthProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "state", {
+      width: 0,
+      positionedOverEditor: false
+    });
+    _defineProperty(this, "broadcastSidebarWidth", width => {
+      if (width !== this.state.width) {
+        this.setState({
+          width
+        });
+      }
+    });
+    _defineProperty(this, "broadcastPosition", positionedOverEditor => {
+      if (positionedOverEditor !== this.state.positionedOverEditor) {
+        this.setState({
+          positionedOverEditor
+        });
+      }
+    });
+  }
+  render() {
+    const {
+      width,
+      positionedOverEditor
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Provider, {
+      value: {
+        width,
+        positionedOverEditor,
+        broadcastWidth: this.broadcastSidebarWidth,
+        broadcastPosition: this.broadcastPosition
+      }
+    }, this.props.children);
+  }
+}
+const {
+  Provider,
+  Consumer
+} = ContextPanel;
+export { Provider as ContextPanelProvider, Consumer as ContextPanelConsumer };

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

@@ -5,15 +5,12 @@ import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.1.2";
+const packageVersion = "74.2.1";
 const halfFocusRing = 1;
-// TODO: Migrate away from gridSize
-// Recommendation: Replace gridSize with token('space.100', '8px') after verfiying Popper can accept this
-const dropOffset = `0, ${gridSize()}px`;
+const dropOffset = '0, 8';
 class DropList extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/ui/Resizer/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
+import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
 import { handleSides } from './utils';
 export default function ResizerNext(props) {
   const resizable = React.useRef(null);
   const {
     handleResize,
     handleResizeStart,
-    handleResizeStop
+    handleResizeStop,
+    handlerHeightSize = 'medium'
   } = props;
   const onResizeStart = React.useCallback(event => {
     // prevent creating a drag event on Firefox
@@ -52,6 +53,11 @@ export default function ResizerNext(props) {
       right: resizerHandleRightClassName
     };
   }
+
+  // add handler height size classname to handleClasses
+  Object.keys(handles).forEach(key => {
+    handles[key] = classnames(handles[key], resizerHandlerClassName[handlerHeightSize]);
+  });
   const innerPadding = props.innerPadding || resizerHandlePadding;
   const handleStyles = {
     left: {

package/dist/es2019/ui/index.js

@@ -17,4 +17,5 @@ export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
 export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';
-export { default as FloatingToolbarButton } from './FloatingToolbar/Button';
+export { default as FloatingToolbarButton } from './FloatingToolbar/Button';
+export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';

package/dist/es2019/ui-menu/ToolbarButton/index.js

@@ -1,3 +1,6 @@
+// This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
+// If you make any change here, copy it to above file as well
+//  and notify about the change in #team-fc-editor-ai-dev channel.
 /** @jsx jsx */
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/es2019/ui-menu/ToolbarButton/styles.js

@@ -1,4 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+// This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/styles.tsx`
+// If you make any change here, copy it to above file as well
+//  and notify about the change in #team-fc-editor-ai-dev channel.
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default /*#__PURE__*/React.forwardRef((props, ref) => {

package/dist/es2019/utils/grid.js

@@ -0,0 +1 @@
+export const gridTypeForLayout = layout => layout === 'wrap-left' || layout === 'wrap-right' ? 'wrapped' : 'full';

package/dist/es2019/utils/index.js

@@ -38,4 +38,5 @@ export { getItemCounterDigitsSize, getOrderFromOrderedListNode, resolveOrder, is
 export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLinkDomain, findFilepaths, isLinkInMatches, FILEPATH_REGEXP, DONTLINKIFY_REGEXP, getLinkCreationAnalyticsEvent } from './hyperlink';
 
 // prosemirror-history does not export its plugin key
-export const pmHistoryPluginKey = 'history$';
+export const pmHistoryPluginKey = 'history$';
+export { gridTypeForLayout } from './grid';

package/dist/es2019/utils/validator.js

@@ -651,7 +651,8 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
                 content,
                 attrs: {
                   ...attrs,
-                  localId: (attrs === null || attrs === void 0 ? void 0 : attrs.localId) || uuid()
+                  localId: (attrs === null || attrs === void 0 ? void 0 : attrs.localId) || uuid(),
+                  width: (attrs === null || attrs === void 0 ? void 0 : attrs.width) || null
                 }
               };
             }