@atlaskit/editor-common 125.2.1 → 125.4.0

package/dist/esm/extensions/extension-handlers.js

@@ -1,21 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { useIntl } from 'react-intl';
 import Loadable from 'react-loadable';
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { lazy, LazySuspense } from 'react-loosely-lazy';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getExtensionKeyAndNodeKey, resolveImport } from './manifest-helpers';
 import { messages } from './messages';
 import { resolveImportSync } from './resolveImportSync';
@@ -117,52 +105,6 @@ function isUnknownConfluenceMacroWithBody(extensionNode) {
   var _extensionNode$parame;
   return extensionNode !== null && extensionNode.type === 'extension' && extensionNode.extensionType === 'com.atlassian.confluence.macro.core' && !!((_extensionNode$parame = extensionNode.parameters) !== null && _extensionNode$parame !== void 0 && (_extensionNode$parame = _extensionNode$parame.macroParams) !== null && _extensionNode$parame !== void 0 && (_extensionNode$parame = _extensionNode$parame.__bodyContent) !== null && _extensionNode$parame !== void 0 && _extensionNode$parame.value);
 }
-// eslint-disable-next-line @repo/internal/react/no-class-components -- error boundaries require a class component
-var ExtensionRendererErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  function ExtensionRendererErrorBoundary() {
-    var _this;
-    _classCallCheck(this, ExtensionRendererErrorBoundary);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, ExtensionRendererErrorBoundary, [].concat(args));
-    _defineProperty(_this, "state", {});
-    return _this;
-  }
-  _inherits(ExtensionRendererErrorBoundary, _React$Component);
-  return _createClass(ExtensionRendererErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      // eslint-disable-next-line no-console
-      console.error('Error rendering extension', error);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.state.error ? renderExtensionLoadingError(this.state.error, this.props.fallbackProps) : this.props.children;
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError(error) {
-      return {
-        error: error
-      };
-    }
-  }]);
-}(React.Component);
-var noop = function noop() {};
-function renderExtensionLoadingError(error, props) {
-  // Needed because the old react-loadable (older code-splitting library) error handling behaviour might be relied on by extensions.
-  // https://unpkg.com/react-loadable@5.2.2/lib/index.js
-  return /*#__PURE__*/React.createElement(ExtensionLoading, _extends({
-    isLoading: false,
-    pastDelay: true,
-    timedOut: false,
-    error: error,
-    retry: noop
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props));
-}
 function ExtensionLoading(props) {
   var intl = useIntl();
   var extensionNode = props.node;
@@ -185,51 +127,29 @@ function ExtensionLoading(props) {
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getNodeRenderer(extensionProvider, extensionType, extensionKey) {
-  var loadNodeRenderer = function loadNodeRenderer() {
-    var _renderSync, _ref;
-    var maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
-    if (maybePromise instanceof Promise) {
-      return maybePromise.then(function (node) {
-        return resolveImport(node.render());
-      });
-    }
-    var preloaded = maybePromise === null || maybePromise === void 0 || (_renderSync = (_ref = maybePromise).renderSync) === null || _renderSync === void 0 ? void 0 : _renderSync.call(_ref);
-    // Only product implemented preloading will return sync result
-    // However the out-of-box won't handle this. Confluence uses a custom implementation
-    return preloaded ?
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    resolveImportSync(preloaded) : resolveImport(maybePromise.render());
-  };
-  var LazyNodeRenderer = lazy(function () {
-    return loadNodeRenderer();
-  });
-  LazyNodeRenderer.displayName = 'lazy(NodeRenderer)';
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var LoadableNodeRenderer = Loadable({
-    loader: loadNodeRenderer,
+  return Loadable({
+    loader: function loader() {
+      var maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
+      if (maybePromise instanceof Promise) {
+        return maybePromise.then(function (node) {
+          return resolveImport(node.render());
+        });
+      } else {
+        var _renderSync, _ref;
+        var preloaded = maybePromise === null || maybePromise === void 0 || (_renderSync = (_ref = maybePromise).renderSync) === null || _renderSync === void 0 ? void 0 : _renderSync.call(_ref);
+        // Only product implemented preloading will return sync result
+        // However the out-of-box won't handle this. Confluence uses a custom implementation
+        return preloaded ?
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        resolveImportSync(preloaded) : resolveImport(maybePromise.render());
+      }
+    },
     // react-loadable passes all props from <NodeRenderer> to the loading component at runtime,
     // but its TypeScript types only expect LoadingComponentProps. We cast here because
     // ExtensionLoading accepts additional props (node, showUnknownMacroPlaceholder) that
     // react-loadable will pass through but doesn't know about in its type definitions.
     loading: ExtensionLoading
   });
-  var NodeRenderer = function NodeRenderer(props) {
-    var _props$loadingFallbac;
-    if (!isExperimentEnabled('platform_editor_loosely_lazy_migration')) {
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(LoadableNodeRenderer, props);
-    }
-    return /*#__PURE__*/React.createElement(ExtensionRendererErrorBoundary, {
-      fallbackProps: props
-    }, /*#__PURE__*/React.createElement(LazySuspense, {
-      fallback: (_props$loadingFallbac = props.loadingFallback) !== null && _props$loadingFallbac !== void 0 ? _props$loadingFallbac : null
-    }, /*#__PURE__*/React.createElement(LazyNodeRenderer, props)));
-  };
-  NodeRenderer.preload = function () {
-    return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? LazyNodeRenderer.preload() : LoadableNodeRenderer.preload();
-  };
-  return NodeRenderer;
 }
 // eslint-disable-next-line @atlaskit/editor/no-re-export
 export { getExtensionManifest } from './getExtensionManifest';

package/dist/esm/floating-toolbar/DropdownMenuExtensionItems.js

@@ -3,9 +3,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useRef, useState } from 'react';
 import Loadable from 'react-loadable';
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { lazy, LazySuspense } from 'react-loosely-lazy';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getContextualToolbarItemsFromModule } from '../extensions';
 import { nodeToJSON } from '../utils';
 import { DropdownMenuItem } from './DropdownMenuItem';
@@ -88,29 +85,12 @@ var DropdownMenuExtensionItem = function DropdownMenuExtensionItem(_ref3) {
   // Use ref to keep icon component stable across renders
   var iconRef = useRef(null);
   if (!iconRef.current && item.icon) {
-    var loadIcon = function loadIcon() {
-      return resolveExtensionIcon(item.icon);
-    };
-    var IconLazy = lazy(function () {
-      return resolveExtensionIcon(item.icon);
-    });
-    IconLazy.displayName = 'lazy(ExtensionIcon)';
-    var IconLoadable = Loadable({
-      loader: loadIcon,
+    iconRef.current = Loadable({
+      loader: function loader() {
+        return resolveExtensionIcon(item.icon);
+      },
       loading: noop
     });
-    var Icon = function Icon(props) {
-      return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
-        fallback: null
-      }, /*#__PURE__*/React.createElement(IconLazy, props)) :
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
-      React.createElement(IconLoadable, props);
-    };
-    Icon.preload = function () {
-      return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconLazy.preload() : IconLoadable.preload();
-    };
-    iconRef.current = Icon;
   }
   var dropdownItem = convertExtensionToDropdownMenuItem({
     item: item,

package/dist/esm/icons/index.js

@@ -1,11 +1,7 @@
 // Disable no-re-export rule for entry point files
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-import React from 'react';
 import Loadable from 'react-loadable';
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { lazy, LazySuspense } from 'react-loosely-lazy';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export { PanelInfoIcon } from './shared/PanelInfoIcon';
 export { PanelWarningIcon } from './shared/PanelWarningIcon';
 export { PanelErrorIcon } from './shared/PanelErrorIcon';
@@ -14,31 +10,13 @@ export { PanelNoteIcon } from './shared/PanelNoteIcon';
 export { BorderIcon } from './shared/BorderIcon';
 export { SteppedRainbowIconDecoration, rainbow, disabledRainbow } from './shared/SteppedRainbowIconDecoration';
 export { DynamicStrokeIconDecoration } from './shared/DynamicStrokeIconDecoration';
-var loadIconTable = function loadIconTable() {
-  return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
-    return module.default;
-  });
-};
-var IconTableLazy = lazy(function () {
-  return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
-    return module.default;
-  });
-});
-IconTableLazy.displayName = 'lazy(IconTable)';
-var IconTableLoadable = Loadable({
-  loader: loadIconTable,
+export var IconTable = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
+      return module.default;
+    });
+  },
   loading: function loading() {
     return null;
   }
-});
-export var IconTable = function IconTable(props) {
-  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(IconTableLazy, props)) :
-  /*#__PURE__*/
-  // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
-  React.createElement(IconTableLoadable, props);
-};
-IconTable.preload = function () {
-  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconTableLazy.preload() : IconTableLoadable.preload();
-};
+});

package/dist/esm/monitoring/error.js

@@ -19,7 +19,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "125.2.0";
+var packageVersion = "125.3.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/quick-insert/CompactQuickInsertMenuItem.compiled.css

@@ -1,7 +1,6 @@
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
-._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._1dqonqa1{border-style:solid}

package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js

@@ -2,9 +2,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./CompactQuickInsertMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useState } from 'react';
-import ButtonItem from '@atlaskit/menu/button-item';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import React, { useId, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
@@ -14,7 +12,6 @@ import { useQuickInsertContext } from './useQuickInsertContext';
 var styles = {
   iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
   content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
-  icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
   iconLarge: "_2rko1mok _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
   shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
 };
@@ -72,12 +69,17 @@ var disabledItemStyles = xcss({
   width: '100%'
 });
 export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref) {
+  var _ref3, _resolvedPreview$imag, _resolvedPreview$imag2, _resolvedPreview$attr;
   var ariaLabel = _ref.ariaLabel,
+    description = _ref.description,
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    preview = _ref.preview,
     previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
+    _ref$shouldShowPrevie = _ref.shouldShowPreview,
+    shouldShowPreview = _ref$shouldShowPrevie === void 0 ? true : _ref$shouldShowPrevie,
     _ref$shouldWrapIcon = _ref.shouldWrapIcon,
     shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
     title = _ref.title;
@@ -89,38 +91,27 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     },
     id = _ref2.id,
     isSelected = _ref2.isSelected;
+  var resolvedDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
+  var previewId = useId();
   var handleClick = useQuickInsertMenuItemSelection(onSelect);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     referenceElement = _useState2[0],
     setReferenceElement = _useState2[1];
-  if (!isExperimentEnabled('platform_editor_slash_command')) {
-    var _wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.icon
-    }, iconBefore) : iconBefore;
-    return /*#__PURE__*/React.createElement(ButtonItem, {
-      "aria-label": ariaLabel,
-      "aria-selected": isSelected,
-      iconBefore: _wrappedIcon,
-      id: id,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      onClick: handleClick,
-      role: "option"
-    }, /*#__PURE__*/React.createElement(Inline, {
-      alignBlock: "center",
-      spread: "space-between"
-    }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.shortcut
-    }, shortcut)));
-  }
+  var resolvedPreview = useMemo(function () {
+    return preview !== null && preview !== void 0 ? preview : previewImageUrls ? {
+      image: previewImageUrls
+    } : {};
+  }, [preview, previewImageUrls]);
+  var shouldRenderPreview = shouldShowPreview && isSelected && !isDisabled;
+  var hasAccessiblePreview = Boolean(resolvedDescription || (resolvedPreview === null || resolvedPreview === void 0 ? void 0 : resolvedPreview.attribution));
   var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconLarge
   }, iconBefore) : iconBefore;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
     ref: setReferenceElement,
     "aria-label": ariaLabel,
+    "aria-describedby": shouldRenderPreview && hasAccessiblePreview ? previewId : undefined,
     "aria-selected": isSelected,
     id: id,
     isDisabled: isDisabled,
@@ -136,9 +127,12 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
   }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.shortcut
-  }, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
-    key: previewImageUrls.light,
-    previewImageUrls: previewImageUrls,
-    referenceElement: referenceElement
+  }, shortcut))), shouldRenderPreview && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
+    key: (_ref3 = (_resolvedPreview$imag = (_resolvedPreview$imag2 = resolvedPreview.image) === null || _resolvedPreview$imag2 === void 0 ? void 0 : _resolvedPreview$imag2.light) !== null && _resolvedPreview$imag !== void 0 ? _resolvedPreview$imag : (_resolvedPreview$attr = resolvedPreview.attribution) === null || _resolvedPreview$attr === void 0 ? void 0 : _resolvedPreview$attr.name) !== null && _ref3 !== void 0 ? _ref3 : title,
+    id: previewId,
+    description: resolvedDescription,
+    preview: resolvedPreview,
+    referenceElement: referenceElement,
+    title: title
   }));
 };

package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css

@@ -1,4 +1,45 @@
+._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._16jlidpf{flex-grow:0}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1bsbncxg{width:264px}
+._1bsbp3fh{width:15pc}
+._1e0c1txw{display:flex}
 ._1e0c1ule{display:block}
+._1e0ccj1k{display:-webkit-box}
+._1i4qfg65{overflow-wrap:anywhere}
+._1o9zidpf{flex-shrink:0}
 ._1pby16oo{z-index:510}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjegat{-webkit-line-clamp:4}
+._2lx21bp4{flex-direction:column}
 ._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i68cl{height:90pt}
+._4t3i7vkz{height:1pc}
+._5ral1f51{object-fit:contain}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._c71l1kw7{max-height:inherit}
+._c71lk6is{max-height:calc(100vh - 1pc)}
+._i0dlexct{flex-basis:16px}
+._p12f1oec{max-width:calc(100vw - 1pc)}
+._p12f1osq{max-width:100%}
+._sudp1e54{-webkit-box-orient:vertical}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,94 +1,176 @@
 /* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./QuickInsertHoverPreview.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-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) { _defineProperty(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; }
-import { useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Popper } from '@atlaskit/popper/main';
+
+// Viewport calculations and multiline clamping require styles outside @atlaskit/css's schema.
+
+import { useIntl } from 'react-intl';
+
+// Viewport clamping requires modifiers, which the top-layer adapter does not support.
+import { Popper } from '@atlaskit/popper/react-popper';
+import { Text } from '@atlaskit/primitives/compiled/text';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
-var PREVIEW_WIDTH = 294;
-var PREVIEW_OFFSET = [-4, 4];
+import { messages } from './messages';
 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. */
 export var 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 = 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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasFailed = _useState2[0],
-    setHasFailed = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_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.
+  var imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
+  var hasAccessibleContent = Boolean(description || preview.attribution);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
-    offset: PREVIEW_OFFSET,
     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: ax([styles.image, dimensions ? styles.visible : styles.hidden])
-    });
+      style: style,
+      className: 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    panelElement = _useState2[0],
+    setPanelElement = _useState2[1];
+  var AttributionIcon = (_preview$attribution = preview.attribution) === null || _preview$attribution === void 0 ? void 0 : _preview$attribution.icon;
+  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: ax([styles.panel])
+  }, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
+    key: imageUrl,
+    imageUrl: imageUrl
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.content])
+  }, /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: ax([styles.title])
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.description])
+  }, description), preview.attribution && /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.attribution])
+  }, AttributionIcon && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    className: ax([styles.attributionIcon])
+  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, AttributionIcon ? preview.attribution.name : formatMessage(messages.previewAttributionBy, {
+    name: preview.attribution.name
+  })))));
+};
+var PreviewImage = function PreviewImage(_ref4) {
+  var imageUrl = _ref4.imageUrl;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFailed = _useState4[0],
+    setHasFailed = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasLoaded = _useState6[0],
+    setHasLoaded = _useState6[1];
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    "data-testid": "quick-insert-preview-image-area",
+    className: 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: ax([styles.image, !hasLoaded && styles.imageHidden])
+  }));
 };