@atlaskit/editor-common 125.2.1 → 125.4.0

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

@@ -11,93 +11,172 @@ require("./QuickInsertHoverPreview.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactDom = require("react-dom");
-var _main = require("@atlaskit/popper/main");
+var _reactIntl = require("react-intl");
+var _reactPopper = require("@atlaskit/popper/react-popper");
+var _text = require("@atlaskit/primitives/compiled/text");
 var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
+var _messages = require("./messages");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var PREVIEW_WIDTH = 294;
-var PREVIEW_OFFSET = [-4, 4];
+// Viewport calculations and multiline clamping require styles outside @atlaskit/css's schema.
+// Viewport clamping requires modifiers, which the top-layer adapter does not support.
 var PREVIEW_MODIFIERS = [{
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+}, {
+  name: 'flip',
+  options: {
+    fallbackPlacements: ['left-start'],
+    // Choose the side by horizontal space; vertical overflow is shifted into view.
+    altAxis: false,
+    padding: 8,
+    rootBoundary: 'viewport'
+  }
+}, {
   name: 'preventOverflow',
   options: {
-    mainAxis: false
+    mainAxis: true,
+    altAxis: true,
+    tether: false,
+    padding: 8,
+    rootBoundary: 'viewport'
   }
 }];
 var styles = {
-  image: "_1e0c1ule _1pby16oo",
-  hidden: "_3um015vq",
-  visible: "_3um0ewfl"
+  positioner: "_c71lk6is _p12f1oec _1pby16oo",
+  panel: "_2rko1qi0 _1reo15vq _18m915vq _1rjcutpp _18zrutpp _vchhusvi _bfhk1bhr _16qs130s _c71l1kw7 _p12f1osq _1bsbncxg",
+  content: "_zulpu2gc _1e0c1txw _2lx21bp4",
+  title: "_11c81qyo _1reo15vq _18m915vq _syazazsu _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
+  description: "_11c8fhey _1reo15vq _18m915vq _syazi7uo _1e0ccj1k _1i4qfg65 _sudp1e54 _1yyjegat",
+  imageArea: "_2rko12b0 _1reo15vq _18m915vq _bfhkhfxm _4t3i68cl _6rthu2gc _p12f1osq _1bsbp3fh",
+  image: "_1e0c1ule _4t3i1osq _5ral1f51 _1bsb1osq",
+  imageHidden: "_3um015vq",
+  attribution: "_11c8wadc _zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
+  attributionIcon: "_16jlidpf _1o9zidpf _i0dlexct _4cvr1h6o _1e0c1txw _4t3i7vkz _1bah1h6o _1bsb7vkz"
 };
 
-/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
+/** The selected item's description and attribution are announced through its aria-describedby. */
 var QuickInsertHoverPreview = exports.QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
-  var previewImageUrls = _ref.previewImageUrls,
-    referenceElement = _ref.referenceElement;
+  var description = _ref.description,
+    id = _ref.id,
+    preview = _ref.preview,
+    referenceElement = _ref.referenceElement,
+    title = _ref.title;
   var _useThemeObserver = (0, _useThemeObserver2.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
-  var previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
-  return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
-    key: previewImageUrl,
-    previewImageUrl: previewImageUrl,
-    referenceElement: referenceElement
-  });
-};
-var QuickInsertHoverPreviewImage = function QuickInsertHoverPreviewImage(_ref2) {
-  var previewImageUrl = _ref2.previewImageUrl,
-    referenceElement = _ref2.referenceElement;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hasFailed = _useState2[0],
-    setHasFailed = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    dimensions = _useState4[0],
-    setDimensions = _useState4[1];
-  if (hasFailed) {
-    return null;
-  }
-
-  // Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_main.Popper, {
-    offset: PREVIEW_OFFSET,
+  var imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
+  var hasAccessibleContent = Boolean(description || preview.attribution);
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_reactPopper.Popper, {
     placement: "right-start",
     referenceElement: referenceElement,
     strategy: "fixed",
-    shouldFitViewport: true,
     modifiers: PREVIEW_MODIFIERS
-  }, function (_ref3) {
-    var ref = _ref3.ref,
-      style = _ref3.style;
-    return /*#__PURE__*/React.createElement("img", {
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style,
+      update = _ref2.update;
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
-        width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
-      }),
-      "aria-hidden": "true",
-      "data-testid": "quick-insert-hover-preview",
-      src: previewImageUrl,
-      alt: "",
-      onLoad: function onLoad(event) {
-        var _event$currentTarget = event.currentTarget,
-          naturalHeight = _event$currentTarget.naturalHeight,
-          naturalWidth = _event$currentTarget.naturalWidth;
-        if (naturalWidth === 0) {
-          return;
-        }
-        setDimensions({
-          height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
-          width: PREVIEW_WIDTH
-        });
-      },
-      onError: function onError() {
-        return setHasFailed(true);
-      },
-      className: (0, _runtime.ax)([styles.image, dimensions ? styles.visible : styles.hidden])
-    });
+      style: style,
+      className: (0, _runtime.ax)([styles.positioner])
+    }, /*#__PURE__*/React.createElement(QuickInsertPreviewPanel, {
+      description: description,
+      id: hasAccessibleContent ? id : undefined,
+      imageUrl: imageUrl,
+      preview: preview,
+      referenceElement: referenceElement,
+      title: title,
+      update: update
+    }));
   }), referenceElement.ownerDocument.body);
+};
+var QuickInsertPreviewPanel = function QuickInsertPreviewPanel(_ref3) {
+  var _preview$attribution;
+  var description = _ref3.description,
+    id = _ref3.id,
+    imageUrl = _ref3.imageUrl,
+    preview = _ref3.preview,
+    referenceElement = _ref3.referenceElement,
+    title = _ref3.title,
+    update = _ref3.update;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    panelElement = _useState2[0],
+    setPanelElement = _useState2[1];
+  var AttributionIcon = (_preview$attribution = preview.attribution) === null || _preview$attribution === void 0 ? void 0 : _preview$attribution.icon;
+  (0, _react.useLayoutEffect)(function () {
+    var _referenceElement$own;
+    void update();
+    var ResizeObserverConstructor = (_referenceElement$own = referenceElement.ownerDocument.defaultView) === null || _referenceElement$own === void 0 ? void 0 : _referenceElement$own.ResizeObserver;
+    if (!panelElement || !ResizeObserverConstructor) {
+      return;
+    }
+    var observer = new ResizeObserverConstructor(function () {
+      return void update();
+    });
+    observer.observe(panelElement);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [panelElement, referenceElement, update]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setPanelElement,
+    id: id,
+    role: id ? 'tooltip' : undefined,
+    "data-testid": "quick-insert-preview-panel",
+    className: (0, _runtime.ax)([styles.panel])
+  }, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
+    key: imageUrl,
+    imageUrl: imageUrl
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.content])
+  }, /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([styles.title])
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.description])
+  }, description), preview.attribution && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.attribution])
+  }, AttributionIcon && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([styles.attributionIcon])
+  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement(_text.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, AttributionIcon ? preview.attribution.name : formatMessage(_messages.messages.previewAttributionBy, {
+    name: preview.attribution.name
+  })))));
+};
+var PreviewImage = function PreviewImage(_ref4) {
+  var imageUrl = _ref4.imageUrl;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    hasFailed = _useState4[0],
+    setHasFailed = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasLoaded = _useState6[0],
+    setHasLoaded = _useState6[1];
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    "data-testid": "quick-insert-preview-image-area",
+    className: (0, _runtime.ax)([styles.imageArea])
+  }, !hasFailed && /*#__PURE__*/React.createElement("img", {
+    "aria-hidden": "true",
+    "data-testid": "quick-insert-hover-preview",
+    src: imageUrl,
+    alt: "",
+    onLoad: function onLoad() {
+      return setHasLoaded(true);
+    },
+    onError: function onError() {
+      return setHasFailed(true);
+    },
+    className: (0, _runtime.ax)([styles.image, !hasLoaded && styles.imageHidden])
+  }));
 };

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

@@ -15,8 +15,10 @@ var QuickInsertMenuItem = exports.QuickInsertMenuItem = function QuickInsertMenu
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    preview = _ref.preview,
     previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
+    shouldShowPreview = _ref.shouldShowPreview,
     shouldWrapIcon = _ref.shouldWrapIcon,
     title = _ref.title;
   var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
@@ -36,8 +38,10 @@ var QuickInsertMenuItem = exports.QuickInsertMenuItem = function QuickInsertMenu
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     onSelect: onSelect,
+    preview: preview,
     previewImageUrls: previewImageUrls,
     shortcut: shortcut,
+    shouldShowPreview: shouldShowPreview,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   });

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

@@ -6,11 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.QuickInsertMenuSection = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
+var _headingItem = _interopRequireDefault(require("@atlaskit/menu/heading-item"));
+var _box = require("@atlaskit/primitives/compiled/box");
 var QuickInsertMenuSection = exports.QuickInsertMenuSection = function QuickInsertMenuSection(_ref) {
   var children = _ref.children,
     title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement(_section.default, {
-    title: title
-  }, children);
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    role: "group",
+    "aria-label": title
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    paddingBlockStart: "space.150",
+    paddingBlockEnd: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_headingItem.default, {
+    "aria-hidden": true
+  }, title)), children);
 };