@atlaskit/editor-common 125.2.1 → 125.4.0

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

@@ -2,86 +2,161 @@
 import "./QuickInsertHoverPreview.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-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';
-const PREVIEW_WIDTH = 294;
-const PREVIEW_OFFSET = [-4, 4];
+import { messages } from './messages';
 const 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'
   }
 }];
 const 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 const QuickInsertHoverPreview = ({
-  previewImageUrls,
-  referenceElement
+  description,
+  id,
+  preview,
+  referenceElement,
+  title
 }) => {
   const {
     colorMode
   } = useThemeObserver();
-  const previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
-  return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
-    key: previewImageUrl,
-    previewImageUrl: previewImageUrl,
-    referenceElement: referenceElement
-  });
-};
-const QuickInsertHoverPreviewImage = ({
-  previewImageUrl,
-  referenceElement
-}) => {
-  const [hasFailed, setHasFailed] = useState(false);
-  const [dimensions, setDimensions] = useState();
-  if (hasFailed) {
-    return null;
-  }
-
-  // Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
+  const imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
+  const 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
   }, ({
     ref,
-    style
-  }) => /*#__PURE__*/React.createElement("img", {
+    style,
+    update
+  }) => /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Popper positioning and intrinsic image dimensions are runtime values.
-      ...style,
-      height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
-      width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
-    },
+    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);
+};
+const QuickInsertPreviewPanel = ({
+  description,
+  id,
+  imageUrl,
+  preview,
+  referenceElement,
+  title,
+  update
+}) => {
+  var _preview$attribution;
+  const {
+    formatMessage
+  } = useIntl();
+  const [panelElement, setPanelElement] = useState(null);
+  const AttributionIcon = (_preview$attribution = preview.attribution) === null || _preview$attribution === void 0 ? void 0 : _preview$attribution.icon;
+  useLayoutEffect(() => {
+    var _referenceElement$own;
+    void update();
+    const ResizeObserverConstructor = (_referenceElement$own = referenceElement.ownerDocument.defaultView) === null || _referenceElement$own === void 0 ? void 0 : _referenceElement$own.ResizeObserver;
+    if (!panelElement || !ResizeObserverConstructor) {
+      return;
+    }
+    const observer = new ResizeObserverConstructor(() => void update());
+    observer.observe(panelElement);
+    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
+  })))));
+};
+const PreviewImage = ({
+  imageUrl
+}) => {
+  const [hasFailed, setHasFailed] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  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: previewImageUrl,
+    src: imageUrl,
     alt: "",
-    onLoad: event => {
-      const {
-        naturalHeight,
-        naturalWidth
-      } = event.currentTarget;
-      if (naturalWidth === 0) {
-        return;
-      }
-      setDimensions({
-        height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
-        width: PREVIEW_WIDTH
-      });
-    },
+    onLoad: () => setHasLoaded(true),
     onError: () => setHasFailed(true),
-    className: ax([styles.image, dimensions ? styles.visible : styles.hidden])
-  })), referenceElement.ownerDocument.body);
+    className: ax([styles.image, !hasLoaded && styles.imageHidden])
+  }));
 };

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

@@ -8,8 +8,10 @@ export const QuickInsertMenuItem = ({
   iconBefore,
   isDisabled,
   onSelect,
+  preview,
   previewImageUrls,
   shortcut,
+  shouldShowPreview,
   shouldWrapIcon,
   title
 }) => {
@@ -31,8 +33,10 @@ export const QuickInsertMenuItem = ({
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     onSelect: onSelect,
+    preview: preview,
     previewImageUrls: previewImageUrls,
     shortcut: shortcut,
+    shouldShowPreview: shouldShowPreview,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   });

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

@@ -1,8 +1,15 @@
 import React from 'react';
-import Section from '@atlaskit/menu/section';
+import HeadingItem from '@atlaskit/menu/heading-item';
+import { Box } from '@atlaskit/primitives/compiled/box';
 export const QuickInsertMenuSection = ({
   children,
   title
-}) => /*#__PURE__*/React.createElement(Section, {
-  title: title
-}, children);
+}) => /*#__PURE__*/React.createElement(Box, {
+  role: "group",
+  "aria-label": title
+}, /*#__PURE__*/React.createElement(Box, {
+  paddingBlockStart: "space.150",
+  paddingBlockEnd: "space.050"
+}, /*#__PURE__*/React.createElement(HeadingItem, {
+  "aria-hidden": true
+}, title)), children);