@atlaskit/editor-plugin-breakout 2.6.0 → 2.7.0

package/dist/esm/pm-plugins/utils/measure-framerate.js

@@ -0,0 +1,116 @@
+/**
+ * Measure the FPS of a resizing component.
+ *
+ * This is a simplified version of the `useMeasureFramerate` hook from `editor-plugin-table`.
+ * (packages/editor/editor-plugin-table/src/pm-plugins/utils/analytics.ts)
+ */
+
+export var reduceResizeFrameRateSamples = function reduceResizeFrameRateSamples(frameRateSamples) {
+  if (frameRateSamples.length > 1) {
+    var frameRateSum = frameRateSamples.reduce(function (sum, frameRate, index) {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    var averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+/**
+ * Measures the framerate of a component over a given time period.
+ * @param {object} [config] - Configuration options for framerate measurement.
+ * @returns {object} An object containing startMeasure, endMeasure, and countFrames methods.
+ * @example
+ * const { startMeasure, endMeasure, countFrames } = measureFramerate();
+ * startMeasure();
+ * // ... animation loop with countFrames() calls
+ * const samples = endMeasure(); // [60, 58, 62]
+ */
+export var measureFramerate = function measureFramerate(config) {
+  var _ref = config || {},
+    _ref$maxSamples = _ref.maxSamples,
+    maxSamples = _ref$maxSamples === void 0 ? 10 : _ref$maxSamples,
+    _ref$minFrames = _ref.minFrames,
+    minFrames = _ref$minFrames === void 0 ? 5 : _ref$minFrames,
+    _ref$minTimeMs = _ref.minTimeMs,
+    minTimeMs = _ref$minTimeMs === void 0 ? 500 : _ref$minTimeMs,
+    _ref$sampleRateMs = _ref.sampleRateMs,
+    sampleRateMs = _ref$sampleRateMs === void 0 ? 1000 : _ref$sampleRateMs,
+    _ref$timeoutMs = _ref.timeoutMs,
+    timeoutMs = _ref$timeoutMs === void 0 ? 200 : _ref$timeoutMs;
+  var frameCount = 0;
+  var lastTime = 0;
+  var timeoutId;
+  var frameRateSamples = [];
+  var startMeasure = function startMeasure() {
+    frameCount = 0;
+    lastTime = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   * @returns {number[]} An array of frame rate samples as integers.
+   * @example
+   * const samples = endMeasure(); // [60, 58, 62]
+   */
+  var endMeasure = function endMeasure() {
+    var samples = frameRateSamples;
+    frameRateSamples = [];
+    return samples;
+  };
+  var sampleFrameRate = function sampleFrameRate() {
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var currentTime = performance.now();
+    var deltaTime = currentTime - lastTime - delay;
+    var isValidSample = deltaTime > minTimeMs && frameCount >= minFrames;
+    if (isValidSample) {
+      var frameRate = Math.round(frameCount / (deltaTime / 1000));
+      frameRateSamples.push(frameRate);
+    }
+    frameCount = 0;
+    lastTime = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   * @example
+   * const animate = () => {
+   *   countFrames();
+   *   requestAnimationFrame(animate);
+   * };
+   */
+  var countFrames = function countFrames() {
+    if (frameRateSamples.length >= maxSamples && timeoutId) {
+      clearTimeout(timeoutId);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime === 0) {
+      lastTime = performance.now();
+    }
+    frameCount++;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (performance.now() - lastTime > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId = setTimeout(function () {
+        return sampleFrameRate(timeoutMs);
+      }, timeoutMs);
+    }
+  };
+  return {
+    startMeasure: startMeasure,
+    endMeasure: endMeasure,
+    countFrames: countFrames
+  };
+};

package/dist/types/breakoutPluginType.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -20,7 +21,8 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<BlockControlsPlugin>,
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<UserIntentPlugin>,
-    OptionalPlugin<GuidelinePlugin>
+    OptionalPlugin<GuidelinePlugin>,
+    OptionalPlugin<AnalyticsPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types/pm-plugins/pragmatic-resizer.d.ts

@@ -1,9 +1,14 @@
+import type { IntlShape, MessageDescriptor } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+export declare const resizeHandleMessage: Record<string, MessageDescriptor>;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, nodeViewPortalProviderAPI, }: {
     target: HTMLElement;
     onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;

package/dist/types/pm-plugins/resizing-mark-view.d.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
@@ -9,16 +11,20 @@ export declare class ResizingMarkView implements NodeView {
     view: EditorView;
     mark: Mark;
     destroyFn: () => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     /**
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
      * @param {EditorView} view - The editor view
-     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
+     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - The pluginInjectionAPI
+     * @param {Function} getIntl - () => IntlShape
+     * @param {PortalProviderAPI} - The nodeViewPortalProviderAPI
      * @example
      * ```ts
      * ```
      */
-    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
     ignoreMutation(): boolean;
     destroy(): void;
 }

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -1,7 +1,9 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
 import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/dist/types/pm-plugins/utils/analytics.d.ts

@@ -0,0 +1,7 @@
+import type { BreakoutEventPayload } from '@atlaskit/editor-common/analytics';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => BreakoutEventPayload[];

package/dist/types/pm-plugins/utils/measure-framerate.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Measure the FPS of a resizing component.
+ *
+ * This is a simplified version of the `useMeasureFramerate` hook from `editor-plugin-table`.
+ * (packages/editor/editor-plugin-table/src/pm-plugins/utils/analytics.ts)
+ */
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+type MeasureFramerateConfig = {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+};
+/**
+ * Measures the framerate of a component over a given time period.
+ * @param {object} [config] - Configuration options for framerate measurement.
+ * @returns {object} An object containing startMeasure, endMeasure, and countFrames methods.
+ * @example
+ * const { startMeasure, endMeasure, countFrames } = measureFramerate();
+ * startMeasure();
+ * // ... animation loop with countFrames() calls
+ * const samples = endMeasure(); // [60, 58, 62]
+ */
+export declare const measureFramerate: (config?: MeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/dist/types-ts4.5/breakoutPluginType.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
@@ -20,7 +21,8 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<BlockControlsPlugin>,
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<UserIntentPlugin>,
-    OptionalPlugin<GuidelinePlugin>
+    OptionalPlugin<GuidelinePlugin>,
+    OptionalPlugin<AnalyticsPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types-ts4.5/pm-plugins/pragmatic-resizer.d.ts

@@ -1,9 +1,14 @@
+import type { IntlShape, MessageDescriptor } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+export declare const resizeHandleMessage: Record<string, MessageDescriptor>;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, nodeViewPortalProviderAPI, }: {
     target: HTMLElement;
     onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;

package/dist/types-ts4.5/pm-plugins/resizing-mark-view.d.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
@@ -9,16 +11,20 @@ export declare class ResizingMarkView implements NodeView {
     view: EditorView;
     mark: Mark;
     destroyFn: () => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     /**
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
      * @param {EditorView} view - The editor view
-     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
+     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - The pluginInjectionAPI
+     * @param {Function} getIntl - () => IntlShape
+     * @param {PortalProviderAPI} - The nodeViewPortalProviderAPI
      * @example
      * ```ts
      * ```
      */
-    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
     ignoreMutation(): boolean;
     destroy(): void;
 }

package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts

@@ -1,7 +1,9 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
 import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts

@@ -0,0 +1,7 @@
+import type { BreakoutEventPayload } from '@atlaskit/editor-common/analytics';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => BreakoutEventPayload[];

package/dist/types-ts4.5/pm-plugins/utils/measure-framerate.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Measure the FPS of a resizing component.
+ *
+ * This is a simplified version of the `useMeasureFramerate` hook from `editor-plugin-table`.
+ * (packages/editor/editor-plugin-table/src/pm-plugins/utils/analytics.ts)
+ */
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+type MeasureFramerateConfig = {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+};
+/**
+ * Measures the framerate of a component over a given time period.
+ * @param {object} [config] - Configuration options for framerate measurement.
+ * @returns {object} An object containing startMeasure, endMeasure, and countFrames methods.
+ * @example
+ * const { startMeasure, endMeasure, countFrames } = measureFramerate();
+ * startMeasure();
+ * // ... animation loop with countFrames() calls
+ * const samples = endMeasure(); // [60, 58, 62]
+ */
+export declare const measureFramerate: (config?: MeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.6.0",
+	"version": "2.7.0",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.3.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
+		"@atlaskit/editor-common": "^106.5.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.16.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -48,12 +48,14 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.14.0",
+		"@atlaskit/tmp-editor-statsig": "^6.0.0",
 		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
-		"memoize-one": "^6.0.0"
+		"memoize-one": "^6.0.0",
+		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",