@atlaskit/editor-plugin-block-controls 3.15.11 → 3.16.0

package/dist/esm/pm-plugins/vanilla-tooltip.js

@@ -0,0 +1,172 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { createPopper } from '@popperjs/core';
+import { bind } from 'bind-event-listener';
+var startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+var endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ *
+ * @warning Still experimental. One day we can likely want to move this to a common package.
+ */
+export var VanillaTooltip = /*#__PURE__*/function () {
+  function VanillaTooltip(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id) {
+    var _this = this;
+    var timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300;
+    _classCallCheck(this, VanillaTooltip);
+    _defineProperty(this, "listeners", []);
+    _defineProperty(this, "shouldHidePopover", false);
+    _defineProperty(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    var tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    // Warning: Currently this is used for styling - only works in the block controls package
+    tooltip.className = 'blocks-quick-insert-tooltip';
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    var showEvents = ['mouseenter', 'focus'];
+    var hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(function (event) {
+      _this.listeners.push(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push(bind(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          _this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = function () {
+      if (_this.shouldHidePopover) {
+        _this.tooltip.hidePopover();
+      }
+    };
+  }
+  return _createClass(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = createPopper(this.button, this.tooltip, {
+        placement: 'top',
+        modifiers: [startingOffset]
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$popperInstance;
+      (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
+      this.listeners.forEach(function (listener) {
+        listener();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = true;
+      // Disable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this2$popperInstance;
+        (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [startingOffset, {
+              name: 'eventListeners',
+              enabled: false
+            }]
+          });
+        });
+        _this2.tooltip.style.opacity = '0';
+        _this2.isDisplayed = false;
+        // If transition animations are disabled immediately hide the popover
+        if (_this2.tooltip.style.transition === 'none') {
+          _this2.tooltip.hidePopover();
+        }
+      }, immediate ? 0 : this.timeout);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this3 = this;
+      if (this.isDisplayed) {
+        return;
+      }
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = false;
+
+      // Make the tooltip visible - but hide until
+      this.tooltip.style.visibility = 'hidden';
+      this.tooltip.showPopover();
+
+      // Update its position
+      if (!this.popperInstance) {
+        this.createPopperInstance();
+      } else {
+        this.popperInstance.update();
+      }
+
+      // Enable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this3$popperInstance;
+        _this3.tooltip.style.opacity = '1';
+        _this3.tooltip.style.visibility = 'visible';
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [endingOffset, {
+              name: 'eventListeners',
+              enabled: true
+            }]
+          });
+        });
+        _this3.isDisplayed = true;
+      }, this.timeout);
+    }
+  }]);
+}();

package/dist/esm/ui/global-styles.js

@@ -5,9 +5,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -118,6 +120,89 @@ var globalStyles = function globalStyles() {
     }
   });
 };
+var quickInsertStyles = function quickInsertStyles() {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button': {
+      backgroundColor: 'transparent',
+      top: "var(--top-override,8px)",
+      position: 'sticky',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: "var(--ds-space-300, 24px)",
+      width: "var(--ds-space-300, 24px)",
+      border: 'none',
+      borderRadius: '50%',
+      zIndex: layers.card(),
+      outline: 'none',
+      cursor: 'pointer',
+      color: "var(--ds-icon-subtle, #626F86)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--top-override': "".concat(tableControlsSpacing, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--top-override': "".concat(tableControlsSpacing, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:focus': {
+      outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-visible-container': {
+      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-invisible-container': {
+      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
+      opacity: 0,
+      visibility: 'hidden'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-tooltip': {
+      zIndex: layers.tooltip(),
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-050, 4px)".concat(" 0"),
+      boxSizing: 'border-box',
+      maxWidth: '240px',
+      backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+      insetBlockStart: "var(--ds-space-0, 0px)",
+      insetInlineStart: "var(--ds-space-0, 0px)",
+      overflowWrap: 'break-word',
+      paddingBlockEnd: "var(--ds-space-025, 2px)",
+      paddingBlockStart: "var(--ds-space-025, 2px)",
+      paddingInlineEnd: "var(--ds-space-075, 6px)",
+      paddingInlineStart: "var(--ds-space-075, 6px)",
+      wordWrap: 'break-word',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      // Based on: platform/packages/design-system/motion/src/entering/keyframes-motion.tsx
+      transition: 'opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out',
+      '@media (prefers-reduced-motion: reduce)': {
+        transition: 'none'
+      }
+    }
+  });
+};
 var topLevelNodeMarginStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror': {
@@ -194,6 +279,6 @@ var blockCardWithoutLayout = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/types/pm-plugins/quick-insert-calculate-position.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { AnchorRectCache } from './utils/anchor-utils';
+export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
+    rootAnchorName: string | undefined;
+    getPos: () => number | undefined;
+    view: EditorView;
+    rootNodeType: string;
+    anchorName: string;
+    macroInteractionUpdates: boolean | undefined;
+    anchorRectCache: AnchorRectCache | undefined;
+}) => CSSProperties;

package/dist/types/pm-plugins/vanilla-quick-insert.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
+type VanillaQuickInsertProps = {
+    formatMessage: IntlShape['formatMessage'];
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    view: EditorView;
+    getPos: () => number | undefined;
+    cleanupCallbacks: ((() => void) | undefined)[];
+    rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
+    anchorName: string;
+    rootAnchorName: string;
+};
+/**
+ * Create a Node which contains the quick insert button
+ */
+export declare const createVanillaButton: (props: VanillaQuickInsertProps) => Node;
+export {};

package/dist/types/pm-plugins/vanilla-tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ *
+ * @warning Still experimental. One day we can likely want to move this to a common package.
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}

package/dist/types-ts4.5/pm-plugins/quick-insert-calculate-position.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { AnchorRectCache } from './utils/anchor-utils';
+export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
+    rootAnchorName: string | undefined;
+    getPos: () => number | undefined;
+    view: EditorView;
+    rootNodeType: string;
+    anchorName: string;
+    macroInteractionUpdates: boolean | undefined;
+    anchorRectCache: AnchorRectCache | undefined;
+}) => CSSProperties;

package/dist/types-ts4.5/pm-plugins/vanilla-quick-insert.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
+type VanillaQuickInsertProps = {
+    formatMessage: IntlShape['formatMessage'];
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    view: EditorView;
+    getPos: () => number | undefined;
+    cleanupCallbacks: ((() => void) | undefined)[];
+    rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
+    anchorName: string;
+    rootAnchorName: string;
+};
+/**
+ * Create a Node which contains the quick insert button
+ */
+export declare const createVanillaButton: (props: VanillaQuickInsertProps) => Node;
+export {};

package/dist/types-ts4.5/pm-plugins/vanilla-tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ *
+ * @warning Still experimental. One day we can likely want to move this to a common package.
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.15.11",
+	"version": "3.16.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.2.0",
+		"@atlaskit/editor-common": "^106.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -56,11 +56,12 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.12.0",
-		"@atlaskit/tokens": "^5.0.0",
+		"@atlaskit/tmp-editor-statsig": "^5.14.0",
+		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"@popperjs/core": "^2.11.8",
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
 		"raf-schd": "^4.0.3",
@@ -179,6 +180,9 @@
 		"platform_editor_no_cursor_on_live_doc_init": {
 			"type": "boolean"
 		},
+		"platform_editor_drag_and_drop_perf_analytics": {
+			"type": "boolean"
+		},
 		"platform_editor_column_count_analytics": {
 			"type": "boolean"
 		},