@atlaskit/editor-common 69.2.2 → 69.3.0

package/dist/cjs/transforms/layout.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeLayoutFromFirstChild = removeLayoutFromFirstChild;
+exports.removeLayoutFromLastChild = removeLayoutFromLastChild;
+exports.transformSliceToRemoveOpenLayoutNodes = transformSliceToRemoveOpenLayoutNodes;
+exports.unwrapContentFromLayout = unwrapContentFromLayout;
+
+var _prosemirrorModel = require("prosemirror-model");
+
+var _slice = require("../utils/slice");
+
+var isLayoutNode = function isLayoutNode(node) {
+  return node.type === node.type.schema.nodes.layoutSection || node.type === node.type.schema.nodes.layoutColumn;
+};
+
+function unwrapContentFromLayout(maybeLayoutSection) {
+  var fragment = (0, _slice.mapFragment)(_prosemirrorModel.Fragment.from(maybeLayoutSection), function (node) {
+    return isLayoutNode(node) ? node.content : node;
+  });
+  var nodes = [];
+  fragment.forEach(function (i) {
+    return nodes.push(i);
+  });
+  return nodes;
+}
+
+function removeLayoutFromFirstChild(node, i) {
+  return i === 0 ? unwrapContentFromLayout(node) : node;
+}
+
+function removeLayoutFromLastChild(node, i, fragment) {
+  return i === fragment.childCount - 1 ? unwrapContentFromLayout(node) : node;
+}
+/**
+ * When we have a slice that cuts across a layoutSection/layoutColumn
+ * we can end up with unexpected behaviour on paste/drop where a user
+ * is able to add columns to a layoutSection. By 'lifting' any content
+ * inside an 'open' layoutSection/layoutColumn to the top level, we
+ * can ensure prevent this.
+ *
+ * We only care about slices with non-zero openStart / openEnd's here
+ * as we're totally fine for people to copy/paste a full layoutSection
+ */
+
+
+function transformSliceToRemoveOpenLayoutNodes(slice, schema) {
+  // Case 1: A slice entirely within a single layoutSection
+  if (slice.openStart && slice.openEnd && slice.content.childCount === 1) {
+    var maybeLayoutSection = slice.content.firstChild;
+
+    if (maybeLayoutSection.type === schema.nodes.layoutSection) {
+      return new _prosemirrorModel.Slice((0, _slice.flatmap)(slice.content, removeLayoutFromFirstChild), // '-2' here because we've removed the layoutSection/layoutColumn; reducing the open depth.
+      slice.openStart - 2, slice.openEnd - 2);
+    }
+  } // Case 2: A slice starting inside a layoutSection and finishing outside
+
+
+  if (slice.openStart && slice.content.firstChild.type === schema.nodes.layoutSection) {
+    slice = new _prosemirrorModel.Slice((0, _slice.flatmap)(slice.content, removeLayoutFromFirstChild), slice.openStart - 2, slice.openEnd);
+  } // Case 3: A slice starting outside a layoutSection and finishing inside
+
+
+  if (slice.openEnd && slice.content.lastChild.type === schema.nodes.layoutSection) {
+    slice = new _prosemirrorModel.Slice((0, _slice.flatmap)(slice.content, removeLayoutFromLastChild), slice.openStart, slice.openEnd - 2);
+  } // Case 2 & 3 also handles a slice starting in one layoutSection & finishing in a different layoutSection
+
+
+  return slice;
+}

package/dist/cjs/types/command.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/context-panel.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/editor-actions.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/editor-appearance.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/editor-container-width.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/editor-plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/editor-react-context.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/empty-state-handler.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/feature-flags.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/floating-toolbar.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/index.js

@@ -16,9 +16,29 @@ Object.defineProperty(exports, "AnnotationUpdateEvent", {
   }
 });
 exports.SortOrder = void 0;
+Object.defineProperty(exports, "ToolbarSize", {
+  enumerable: true,
+  get: function get() {
+    return _toolbar.ToolbarSize;
+  }
+});
+Object.defineProperty(exports, "ToolbarWidths", {
+  enumerable: true,
+  get: function get() {
+    return _toolbar.ToolbarWidths;
+  }
+});
+Object.defineProperty(exports, "ToolbarWidthsFullPage", {
+  enumerable: true,
+  get: function get() {
+    return _toolbar.ToolbarWidthsFullPage;
+  }
+});
 
 var _annotation = require("./annotation");
 
+var _toolbar = require("./toolbar");
+
 var SortOrder;
 exports.SortOrder = SortOrder;
 

package/dist/cjs/types/plugin-factory.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/prosemirror-config.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/quick-insert.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/supported-browsers.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];

package/dist/cjs/types/toolbar.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarWidthsFullPage = exports.ToolbarWidths = exports.ToolbarSize = void 0;
+var ToolbarSize;
+exports.ToolbarSize = ToolbarSize;
+
+(function (ToolbarSize) {
+  ToolbarSize[ToolbarSize["XXL"] = 6] = "XXL";
+  ToolbarSize[ToolbarSize["XL"] = 5] = "XL";
+  ToolbarSize[ToolbarSize["L"] = 4] = "L";
+  ToolbarSize[ToolbarSize["M"] = 3] = "M";
+  ToolbarSize[ToolbarSize["S"] = 2] = "S";
+  ToolbarSize[ToolbarSize["XXXS"] = 1] = "XXXS";
+})(ToolbarSize || (exports.ToolbarSize = ToolbarSize = {}));
+
+var ToolbarWidths;
+exports.ToolbarWidths = ToolbarWidths;
+
+(function (ToolbarWidths) {
+  ToolbarWidths[ToolbarWidths["XXL"] = 610] = "XXL";
+  ToolbarWidths[ToolbarWidths["XL"] = 540] = "XL";
+  ToolbarWidths[ToolbarWidths["L"] = 460] = "L";
+  ToolbarWidths[ToolbarWidths["M"] = 450] = "M";
+  ToolbarWidths[ToolbarWidths["S"] = 370] = "S";
+})(ToolbarWidths || (exports.ToolbarWidths = ToolbarWidths = {}));
+
+var ToolbarWidthsFullPage;
+exports.ToolbarWidthsFullPage = ToolbarWidthsFullPage;
+
+(function (ToolbarWidthsFullPage) {
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XXL"] = 650] = "XXL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XL"] = 580] = "XL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["L"] = 540] = "L";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["M"] = 490] = "M";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["S"] = 410] = "S";
+})(ToolbarWidthsFullPage || (exports.ToolbarWidthsFullPage = ToolbarWidthsFullPage = {}));

package/dist/cjs/types/ui-components.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+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 = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+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; } }
+
+var packageName = "@atlaskit/editor-common";
+var packageVersion = "69.3.0";
+var halfFocusRing = 1;
+var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
+
+var DropList = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DropList, _Component);
+
+  var _super = _createSuper(DropList);
+
+  function DropList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, DropList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperStyles", (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function (theme) {
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), (0, _components.themed)({
+        light: (0, _tokens.token)('color.text', _colors.N900),
+        dark: (0, _tokens.token)('color.text', _colors.DN600)
+      })(theme), (0, _components.themed)({
+        light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
+        dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN50)
+      })(theme), (0, _constants.borderRadius)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)(), (0, _constants.gridSize)() / 4, _colors.N50A, _colors.N60A, (0, _constants.gridSize)() / 2);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
+      _this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+
+      document.addEventListener('click', _this.handleClickOutside, true);
+      document.addEventListener('keydown', _this.handleEsc);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidUpdate", function () {
+      if (_this.props.isOpen) {
+        _this.setContentWidth();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
+      document.removeEventListener('click', _this.handleClickOutside, true);
+      document.removeEventListener('keydown', _this.handleEsc);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContentWidth", function () {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
+          dropContentRef = _assertThisInitialize.dropContentRef,
+          triggerRef = _assertThisInitialize.triggerRef;
+
+      var shouldFitContainer = _this.props.shouldFitContainer; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEsc", function (event) {
+      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
+        _this.close(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickOutside", function (event) {
+      if (_this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
+
+          var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            _this.close(event);
+          }
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleContentRef", function (ref) {
+      _this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerRef", function (ref) {
+      _this.triggerRef = ref;
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(DropList, [{
+    key: "getChildContext",
+    value:
+    /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+    function getChildContext() {
+      return {
+        shouldAllowMultilineItems: false
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          isOpen = _this$props.isOpen,
+          position = _this$props.position,
+          trigger = _this$props.trigger,
+          onPositioned = _this$props.onPositioned,
+          testId = _this$props.testId;
+      var layerContent = isOpen ? (0, _react2.jsx)("div", {
+        css: function css(theme) {
+          return _this2.menuWrapper({
+            theme: theme
+          });
+        },
+        "data-role": "droplistContent",
+        "data-testid": testId && "".concat(testId, "--content"),
+        ref: this.handleContentRef
+      }, children) : null;
+      return (0, _react2.jsx)("div", {
+        css: this.wrapperStyles
+      }, (0, _react2.jsx)(_Layer.default, {
+        content: layerContent,
+        offset: dropOffset,
+        position: position,
+        onPositioned: onPositioned
+      }, (0, _react2.jsx)("div", {
+        css: this.triggerStyles,
+        ref: this.handleTriggerRef
+      }, trigger)));
+    }
+  }]);
+  return DropList;
+}(_react.Component);
+
+var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
+
+var _default = (0, _analyticsNext.withAnalyticsContext)({
+  componentName: 'droplist',
+  packageName: packageName,
+  packageVersion: packageVersion
+})((0, _analyticsNext.withAnalyticsEvents)({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DropList));
+
+exports.default = _default;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = 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"));
+
+var _analytics = require("../../analytics");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      errorCaptured: false
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(ErrorBoundary, [{
+    key: "hasFallback",
+    value: function hasFallback() {
+      return typeof this.props.fallbackComponent !== 'undefined';
+    }
+  }, {
+    key: "shouldRecover",
+    value: function shouldRecover() {
+      return this.hasFallback() && this.state.errorCaptured;
+    }
+  }, {
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.dispatchAnalyticsEvent) {
+        this.props.dispatchAnalyticsEvent({
+          action: _analytics.ACTION.EDITOR_CRASHED,
+          actionSubject: this.props.component,
+          actionSubjectId: this.props.componentId,
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            error: error,
+            errorInfo: errorInfo,
+            // @ts-expect-error
+            errorRethrown: !this.hasFallback()
+          }
+        });
+      }
+
+      if (this.hasFallback()) {
+        this.setState({
+          errorCaptured: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.shouldRecover()) {
+        return this.props.fallbackComponent;
+      }
+
+      return this.props.children;
+    }
+  }]);
+  return ErrorBoundary;
+}(_react.default.Component);
+
+exports.ErrorBoundary = ErrorBoundary;