@atlaskit/editor-plugin-card 0.14.3 → 0.14.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-card
 
+## 0.14.4
+
+### Patch Changes
+
+- [#56625](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/56625) [`1df300977e9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1df300977e9a) - [ux] Always show link icon when showing 'change view' overlay in editor. Do not show if the overlay will cover the whole link including the icon.
+
 ## 0.14.3
 
 ### Patch Changes

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

@@ -28,6 +28,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var DEBOUNCE_IN_MS = 5;
 var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 2;
+var ICON_WIDTH_IN_PX = 16;
 var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
 var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
 var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
@@ -143,10 +144,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       return;
     }
     try {
+      var oneLine = (0, _utils2.isOneLine)(containerRef.current, marker);
+
       // Get the width of the available space to display overlay.
       // This is the width of the inline link itself. If the inline
       // is wrapped to the next line, this is width of the last line.
-      var availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX;
+      var availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
 
       // If available width is less than the min width of overlay, don't show overlay.
       var canShowOverlay = availableWidth > minOverlayWidth.current;

package/dist/cjs/ui/InlineCardOverlay/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getChildElement = void 0;
+exports.isOneLine = exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getChildElement = void 0;
 /**
  * Find a child element inside a ref.
  */
@@ -20,6 +20,11 @@ var getInlineCardAvailableWidth = exports.getInlineCardAvailableWidth = function
   var end = endEl.getBoundingClientRect().left;
   return end - start;
 };
+var isOneLine = exports.isOneLine = function isOneLine(startEl, endEl) {
+  var start = startEl.getBoundingClientRect().top;
+  var end = endEl.getBoundingClientRect().top;
+  return start === end;
+};
 
 /**
  * Get max and min width of an overlay.

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

@@ -10,10 +10,11 @@ import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import { N20A, N800 } from '@atlaskit/theme/colors';
 import { messages } from '../../messages';
-import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths } from './utils';
+import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 const DEBOUNCE_IN_MS = 5;
 const ESTIMATED_MIN_WIDTH_IN_PX = 16;
 const PADDING_IN_PX = 2;
+const ICON_WIDTH_IN_PX = 16;
 const OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
 const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
 const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
@@ -128,10 +129,14 @@ const InlineCardOverlay = ({
       return;
     }
     try {
+      const oneLine = isOneLine(containerRef.current, marker);
+
       // Get the width of the available space to display overlay.
       // This is the width of the inline link itself. If the inline
       // is wrapped to the next line, this is width of the last line.
-      const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX;
+      const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
 
       // If available width is less than the min width of overlay, don't show overlay.
       const canShowOverlay = availableWidth > minOverlayWidth.current;

package/dist/es2019/ui/InlineCardOverlay/utils.js

@@ -12,6 +12,11 @@ export const getInlineCardAvailableWidth = (startEl, endEl) => {
   const end = endEl.getBoundingClientRect().left;
   return end - start;
 };
+export const isOneLine = (startEl, endEl) => {
+  const start = startEl.getBoundingClientRect().top;
+  const end = endEl.getBoundingClientRect().top;
+  return start === end;
+};
 
 /**
  * Get max and min width of an overlay.

package/dist/esm/ui/InlineCardOverlay/index.js

@@ -16,10 +16,11 @@ import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import { N20A, N800 } from '@atlaskit/theme/colors';
 import { messages } from '../../messages';
-import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths } from './utils';
+import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 var DEBOUNCE_IN_MS = 5;
 var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 2;
+var ICON_WIDTH_IN_PX = 16;
 var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
 var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
 var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
@@ -135,10 +136,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       return;
     }
     try {
+      var oneLine = isOneLine(containerRef.current, marker);
+
       // Get the width of the available space to display overlay.
       // This is the width of the inline link itself. If the inline
       // is wrapped to the next line, this is width of the last line.
-      var availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX;
+      var availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
 
       // If available width is less than the min width of overlay, don't show overlay.
       var canShowOverlay = availableWidth > minOverlayWidth.current;

package/dist/esm/ui/InlineCardOverlay/utils.js

@@ -14,6 +14,11 @@ export var getInlineCardAvailableWidth = function getInlineCardAvailableWidth(st
   var end = endEl.getBoundingClientRect().left;
   return end - start;
 };
+export var isOneLine = function isOneLine(startEl, endEl) {
+  var start = startEl.getBoundingClientRect().top;
+  var end = endEl.getBoundingClientRect().top;
+  return start === end;
+};
 
 /**
  * Get max and min width of an overlay.

package/dist/types/ui/InlineCardOverlay/utils.d.ts

@@ -7,6 +7,7 @@ export declare const getChildElement: (ref: React.RefObject<HTMLElement>, select
  * (Mainly here to make the component unit testable.)
  */
 export declare const getInlineCardAvailableWidth: (startEl: HTMLElement, endEl: HTMLElement) => number;
+export declare const isOneLine: (startEl: HTMLElement, endEl: HTMLElement) => boolean;
 /**
  * Get max and min width of an overlay.
  * (Mainly here to make the component unit testable.)

package/dist/types-ts4.5/ui/InlineCardOverlay/utils.d.ts

@@ -7,6 +7,7 @@ export declare const getChildElement: (ref: React.RefObject<HTMLElement>, select
  * (Mainly here to make the component unit testable.)
  */
 export declare const getInlineCardAvailableWidth: (startEl: HTMLElement, endEl: HTMLElement) => number;
+export declare const isOneLine: (startEl: HTMLElement, endEl: HTMLElement) => boolean;
 /**
  * Get max and min width of an overlay.
  * (Mainly here to make the component unit testable.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",

package/tmp/api-report-tmp.d.ts

@@ -1,199 +0,0 @@
-## API Report File for "@atlaskit/editor-plugin-card"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import type { ACTION } from '@atlaskit/editor-common/analytics';
-import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { CardAppearance } from '@atlaskit/editor-common/provider-factory';
-import type { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardPluginActions } from '@atlaskit/editor-common/card';
-import type { CardProvider } from '@atlaskit/editor-common/provider-factory';
-import type { CardReplacementInputMethod } from '@atlaskit/editor-common/card';
-import type { DatasourceModalType } from '@atlaskit/editor-common/types';
-import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-import type { EditorAppearance } from '@atlaskit/editor-common/types';
-import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
-import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
-import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
-import type { LinkPickerOptions } from '@atlaskit/editor-common/types';
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';
-import type { OptionalPlugin } from '@atlaskit/editor-common/types';
-import type { SmartLinkEvents } from '@atlaskit/smart-card';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-
-// @public (undocumented)
-type CardInfo = {
-    title?: string;
-    url?: string;
-    pos: number;
-};
-
-// @public (undocumented)
-export type CardPlugin = NextEditorPlugin<'card', {
-    pluginConfiguration: CardPluginOptions;
-    dependencies: [
-    OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<AnalyticsPlugin>,
-    WidthPlugin,
-    DecorationsPlugin,
-    GridPlugin,
-    FloatingToolbarPlugin,
-    HyperlinkPlugin
-    ];
-    sharedState: CardPluginState | null;
-    actions: CardPluginActions;
-}>;
-
-// @public
-export const cardPlugin: CardPlugin;
-
-// @public (undocumented)
-type CardPluginEvent = DatasourceEvent | LinkEvent;
-
-// @public (undocumented)
-type CardPluginOptions = CardOptions & {
-    editorAppearance?: EditorAppearance;
-    platform: 'mobile' | 'web';
-    fullWidthMode?: boolean;
-    linkPicker?: LinkPickerOptions;
-    cardPluginEvents?: EditorCardPluginEvents<CardPluginEvent>;
-};
-
-// @public (undocumented)
-type CardPluginState = {
-    requests: Request_2[];
-    provider: CardProvider | null;
-    cards: CardInfo[];
-    showLinkingToolbar: boolean;
-    smartLinkEvents?: SmartLinkEvents;
-    editorAppearance?: EditorAppearance;
-    showDatasourceModal: boolean;
-    datasourceModalType?: DatasourceModalType;
-    datasourceTableRef?: HTMLElement;
-    layout?: DatasourceTableLayout;
-    inlineCardAwarenessCandidatePosition?: number;
-    overlayCandidatePosition?: number;
-    removeOverlay?: () => void;
-    selectedInlineLinkPosition?: number;
-    allowEmbeds?: boolean;
-    allowBlockCards?: boolean;
-};
-
-// @public (undocumented)
-type DatasourceCreatedEvent = {
-    event: EVENT.CREATED;
-    subject: EVENT_SUBJECT.DATASOURCE;
-    data: Metadata_2;
-};
-
-// @public (undocumented)
-type DatasourceDeletedEvent = {
-    event: EVENT.DELETED;
-    subject: EVENT_SUBJECT.DATASOURCE;
-    data: Metadata_2;
-};
-
-// @public (undocumented)
-type DatasourceEvent = DatasourceCreatedEvent | DatasourceDeletedEvent | DatasourceUpdatedEvent;
-
-// @public (undocumented)
-type DatasourceTableLayout = 'center' | 'full-width' | 'wide';
-
-// @public (undocumented)
-type DatasourceUpdatedEvent = {
-    event: EVENT.UPDATED;
-    subject: EVENT_SUBJECT.DATASOURCE;
-    data: Metadata_2<UpdateMetadata>;
-};
-
-// @public (undocumented)
-type EditorCardPluginEvents<T> = {
-    push: (...events: T[]) => void;
-    subscribe: (listener: Subscriber<T>) => () => void;
-    flush: () => void;
-    getSize: () => number;
-};
-
-// @public (undocumented)
-enum EVENT {
-    // (undocumented)
-    CREATED = "created",
-    // (undocumented)
-    DELETED = "deleted",
-    // (undocumented)
-    UPDATED = "updated"
-}
-
-// @public (undocumented)
-enum EVENT_SUBJECT {
-    // (undocumented)
-    DATASOURCE = "datasource",
-    // (undocumented)
-    LINK = "link"
-}
-
-// @public
-type LinkCreatedEvent = {
-    event: EVENT.CREATED;
-    subject: EVENT_SUBJECT.LINK;
-    data: Metadata_2;
-};
-
-// @public (undocumented)
-type LinkDeletedEvent = {
-    event: EVENT.DELETED;
-    subject: EVENT_SUBJECT.LINK;
-    data: Metadata_2;
-};
-
-// @public (undocumented)
-type LinkEvent = LinkCreatedEvent | LinkDeletedEvent | LinkUpdatedEvent;
-
-// @public (undocumented)
-type LinkUpdatedEvent = {
-    event: EVENT.UPDATED;
-    subject: EVENT_SUBJECT.LINK;
-    data: Metadata_2<UpdateMetadata>;
-};
-
-// @public (undocumented)
-type Metadata_2<T = {}> = {
-    node: Node_2;
-    isUndo?: boolean;
-    isRedo?: boolean;
-    action?: string;
-    inputMethod?: string;
-    sourceEvent?: unknown;
-    nodeContext?: string;
-} & T;
-
-// @public (undocumented)
-type Request_2 = {
-    pos: number;
-    url: string;
-    appearance: CardAppearance;
-    compareLinkText: boolean;
-    source: CardReplacementInputMethod;
-    previousAppearance?: 'url' | CardAppearance;
-    analyticsAction?: ACTION;
-    shouldReplaceLink?: boolean;
-    sourceEvent?: UIAnalyticsEvent | null | undefined;
-};
-export { Request_2 as Request }
-
-// @public (undocumented)
-type Subscriber<T> = (event: T) => void;
-
-// @public (undocumented)
-type UpdateMetadata = {
-    previousDisplay?: string;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```