@atlaskit/editor-plugin-paste-options-toolbar 8.1.2 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-paste-options-toolbar
 
+## 8.2.0
+
+### Minor Changes
+
+- [`73fe865b67fd9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73fe865b67fd9) -
+  [ux] Adds new paste action buttons in editor-plugin-ai and registers them with the editor controls
+  registry - then renders these buttons from the registry into the (currently in development) paste
+  actions menu.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.1.2
 
 ### Patch Changes

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -38,6 +39,7 @@ function getPopupOffset(dom) {
   return [-(window.innerWidth - rightEdge - 50), 20];
 }
 var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
@@ -111,6 +113,11 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
   if (!target) {
     return null;
   }
+  var aiSurface = {
+    type: 'menu',
+    key: 'ai-paste-menu'
+  };
+  var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
     target: target,
     mountTo: mountTo,
@@ -122,9 +129,13 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     alignY: "bottom",
     handleClickOutside: handleDismiss,
     handleEscapeKeydown: handleDismiss
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/_react.default.createElement(_PasteActionsMenuContent.PasteActionsMenuContent, {
     options: options,
     onMouseDown: preventEditorFocusLoss,
-    onMouseEnter: handleMouseEnter
-  }));
+    onMouseEnter: handleMouseEnter,
+    aiSurface: aiSurface,
+    aiSurfaceComponents: aiSurfaceComponents
+  })));
 };

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenuContent.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -21,16 +22,21 @@ var styles = {
 var PasteActionsMenuContent = exports.PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
   var options = _ref.options,
     onMouseDown = _ref.onMouseDown,
-    onMouseEnter = _ref.onMouseEnter;
+    onMouseEnter = _ref.onMouseEnter,
+    aiSurface = _ref.aiSurface,
+    aiSurfaceComponents = _ref.aiSurfaceComponents;
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     ref: setOutsideClickTargetRef,
-    xcss: styles.container
-  }, options.map(function (option) {
+    xcss: styles.container,
+    onMouseDown: onMouseDown
+  }, aiSurface && aiSurfaceComponents && aiSurfaceComponents.length > 0 && /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
+    surface: aiSurface,
+    components: aiSurfaceComponents
+  }), options.map(function (option) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
       key: option.id,
       xcss: (0, _css.cx)(styles.option, option.selected && styles.selectedOption),
-      onMouseDown: onMouseDown,
       onMouseEnter: onMouseEnter,
       onFocus: onMouseEnter,
       onClick: option.onClick

package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -39,6 +40,7 @@ export const PasteActionsMenu = ({
   scrollableElement,
   editorAnalyticsAPI
 }) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
   const intl = useIntl();
   const {
     showToolbar,
@@ -107,6 +109,11 @@ export const PasteActionsMenu = ({
   if (!target) {
     return null;
   }
+  const aiSurface = {
+    type: 'menu',
+    key: 'ai-paste-menu'
+  };
+  const aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     target: target,
     mountTo: mountTo,
@@ -118,9 +125,13 @@ export const PasteActionsMenu = ({
     alignY: "bottom",
     handleClickOutside: handleDismiss,
     handleEscapeKeydown: handleDismiss
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
     options: options,
     onMouseDown: preventEditorFocusLoss,
-    onMouseEnter: handleMouseEnter
-  }));
+    onMouseEnter: handleMouseEnter,
+    aiSurface: aiSurface,
+    aiSurfaceComponents: aiSurfaceComponents
+  })));
 };

package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenuContent.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext } from 'react';
 import { cx } from '@atlaskit/css';
 import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   container: "_2rko12b0 _1rjc1b66 _bfhk1bhr _16qs130s",
@@ -13,16 +14,21 @@ const styles = {
 export const PasteActionsMenuContent = ({
   options,
   onMouseDown,
-  onMouseEnter
+  onMouseEnter,
+  aiSurface,
+  aiSurfaceComponents
 }) => {
   const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   return /*#__PURE__*/React.createElement(Box, {
     ref: setOutsideClickTargetRef,
-    xcss: styles.container
-  }, options.map(option => /*#__PURE__*/React.createElement(Pressable, {
+    xcss: styles.container,
+    onMouseDown: onMouseDown
+  }, aiSurface && aiSurfaceComponents && aiSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: aiSurface,
+    components: aiSurfaceComponents
+  }), options.map(option => /*#__PURE__*/React.createElement(Pressable, {
     key: option.id,
     xcss: cx(styles.option, option.selected && styles.selectedOption),
-    onMouseDown: onMouseDown,
     onMouseEnter: onMouseEnter,
     onFocus: onMouseEnter,
     onClick: option.onClick

package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -30,6 +31,7 @@ function getPopupOffset(dom) {
   return [-(window.innerWidth - rightEdge - 50), 20];
 }
 export var PasteActionsMenu = function PasteActionsMenu(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
@@ -103,6 +105,11 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
   if (!target) {
     return null;
   }
+  var aiSurface = {
+    type: 'menu',
+    key: 'ai-paste-menu'
+  };
+  var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(aiSurface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     target: target,
     mountTo: mountTo,
@@ -114,9 +121,13 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     alignY: "bottom",
     handleClickOutside: handleDismiss,
     handleEscapeKeydown: handleDismiss
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/React.createElement(PasteActionsMenuContent, {
     options: options,
     onMouseDown: preventEditorFocusLoss,
-    onMouseEnter: handleMouseEnter
-  }));
+    onMouseEnter: handleMouseEnter,
+    aiSurface: aiSurface,
+    aiSurfaceComponents: aiSurfaceComponents
+  })));
 };

package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenuContent.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext } from 'react';
 import { cx } from '@atlaskit/css';
 import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   container: "_2rko12b0 _1rjc1b66 _bfhk1bhr _16qs130s",
@@ -13,16 +14,21 @@ var styles = {
 export var PasteActionsMenuContent = function PasteActionsMenuContent(_ref) {
   var options = _ref.options,
     onMouseDown = _ref.onMouseDown,
-    onMouseEnter = _ref.onMouseEnter;
+    onMouseEnter = _ref.onMouseEnter,
+    aiSurface = _ref.aiSurface,
+    aiSurfaceComponents = _ref.aiSurfaceComponents;
   var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   return /*#__PURE__*/React.createElement(Box, {
     ref: setOutsideClickTargetRef,
-    xcss: styles.container
-  }, options.map(function (option) {
+    xcss: styles.container,
+    onMouseDown: onMouseDown
+  }, aiSurface && aiSurfaceComponents && aiSurfaceComponents.length > 0 && /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: aiSurface,
+    components: aiSurfaceComponents
+  }), options.map(function (option) {
     return /*#__PURE__*/React.createElement(Pressable, {
       key: option.id,
       xcss: cx(styles.option, option.selected && styles.selectedOption),
-      onMouseDown: onMouseDown,
       onMouseEnter: onMouseEnter,
       onFocus: onMouseEnter,
       onClick: option.onClick

package/dist/types/pasteOptionsToolbarPluginType.d.ts

@@ -1,8 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PastePlugin } from '@atlaskit/editor-plugin-paste';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { ToolbarDropdownOption } from './types/types';
-export type PasteOptionsToolbarPluginDependencies = [OptionalPlugin<AnalyticsPlugin>, PastePlugin];
+export type PasteOptionsToolbarPluginDependencies = [
+    OptionalPlugin<AnalyticsPlugin>,
+    PastePlugin,
+    OptionalPlugin<UiControlRegistryPlugin>
+];
 export interface PasteOptionsToolbarSharedState {
     isPlainText: boolean;
     plaintextLength: number;

package/dist/types/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RegisterComponent, SurfaceIdentifier } from '@atlaskit/editor-ui-control-model';
 export interface MenuOption {
     id: string;
     label: string;
@@ -6,9 +7,11 @@ export interface MenuOption {
     selected: boolean;
 }
 interface PasteActionsMenuContentProps {
+    aiSurface?: SurfaceIdentifier;
+    aiSurfaceComponents?: RegisterComponent[];
     onMouseDown: (e: React.MouseEvent) => void;
     onMouseEnter: () => void;
     options: MenuOption[];
 }
-export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, }: PasteActionsMenuContentProps) => React.JSX.Element;
+export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, aiSurface, aiSurfaceComponents, }: PasteActionsMenuContentProps) => React.JSX.Element;
 export {};

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

@@ -1,10 +1,12 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PastePlugin } from '@atlaskit/editor-plugin-paste';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { ToolbarDropdownOption } from './types/types';
 export type PasteOptionsToolbarPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
-    PastePlugin
+    PastePlugin,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export interface PasteOptionsToolbarSharedState {
     isPlainText: boolean;

package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenuContent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RegisterComponent, SurfaceIdentifier } from '@atlaskit/editor-ui-control-model';
 export interface MenuOption {
     id: string;
     label: string;
@@ -6,9 +7,11 @@ export interface MenuOption {
     selected: boolean;
 }
 interface PasteActionsMenuContentProps {
+    aiSurface?: SurfaceIdentifier;
+    aiSurfaceComponents?: RegisterComponent[];
     onMouseDown: (e: React.MouseEvent) => void;
     onMouseEnter: () => void;
     options: MenuOption[];
 }
-export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, }: PasteActionsMenuContentProps) => React.JSX.Element;
+export declare const PasteActionsMenuContent: ({ options, onMouseDown, onMouseEnter, aiSurface, aiSurfaceComponents, }: PasteActionsMenuContentProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-paste-options-toolbar",
-	"version": "8.1.2",
+	"version": "8.2.0",
 	"description": "Paste options toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,20 +32,22 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-markdown-transformer": "^5.20.0",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
-		"@atlaskit/editor-plugin-paste": "^8.2.0",
+		"@atlaskit/editor-plugin-paste": "^8.4.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
+		"@atlaskit/editor-ui-control-model": "^1.1.0",
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^31.0.0",
+		"@atlaskit/tmp-editor-statsig": "^32.12.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.20.0",
+		"@atlaskit/editor-common": "^111.25.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},