@atlaskit/editor-plugin-insert-block 31.0.15 → 31.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 31.1.0
+
+### Minor Changes
+
+- [`059477aa93f45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/059477aa93f45) -
+  Add an optimistic-toolbar opt-out to plugin configuration. Exclude Live pages from
+  platform_editor_ssr_toolbar_optimistic, including early editor-state exposure, toolbar rendering,
+  and asynchronous media and mention provider initialization. Preserve the experiment for Edit pages
+  regardless of toolbar docking position.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.0.15
 
 ### Patch Changes

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -32,10 +32,11 @@ var POPUP_OFFSET = [0, 3];
  * and menu model as slash command.
  */
 var RegisteredInsertButton = exports.RegisteredInsertButton = function RegisteredInsertButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useEditorToolbar = (0, _context.useEditorToolbar)(),
     editorView = _useEditorToolbar.editorView;
-  var isOptimistic = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic');
+  var isOptimistic = !disableOptimisticToolbar && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic');
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),

package/dist/cjs/ui/toolbar-components/MediaButton.js

@@ -19,7 +19,8 @@ var _uiContext = require("@atlaskit/editor-toolbar/ui-context");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 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 MediaButton = exports.MediaButton = function MediaButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
@@ -68,7 +69,7 @@ var MediaButton = exports.MediaButton = function MediaButton(_ref) {
     });
   };
   var isOffline = (0, _isOfflineMode.isOfflineMode)(connectivityMode);
-  var isDisabled = isOffline || !(allowsUploads || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
+  var isDisabled = isOffline || !(allowsUploads || !disableOptimisticToolbar && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
   return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
     content: formatMessage(_insertBlock.toolbarInsertBlockMessages.addMediaFiles)
   }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, {

package/dist/cjs/ui/toolbar-components/MentionButton.js

@@ -17,7 +17,8 @@ var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button");
 var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var MentionButton = exports.MentionButton = function MentionButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['mention', 'typeAhead'], function (states) {
@@ -45,7 +46,7 @@ var MentionButton = exports.MentionButton = function MentionButton(_ref) {
 
   // The SSR state cannot resolve providers. Keep pending and available visually identical,
   // while preserving known selection restrictions and settled provider failures.
-  var isDisabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
+  var isDisabled = !disableOptimisticToolbar && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
   return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
       description: formatMessage(_insertBlock.toolbarInsertBlockMessages.mention),

package/dist/cjs/ui/toolbar-components.js

@@ -99,7 +99,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/_react.default.createElement(_ImageButton.ImageButton, {
           api: api
         }) : /*#__PURE__*/_react.default.createElement(_MediaButton.MediaButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         });
       }
     });
@@ -156,7 +157,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       }],
       component: function component() {
         return /*#__PURE__*/_react.default.createElement(_MentionButton.MentionButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         });
       }
     });
@@ -268,7 +270,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
     var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
       return function () {
         return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? /*#__PURE__*/_react.default.createElement(_RegisteredInsertButton.RegisteredInsertButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         }) : /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
           api: api,
           breakpoint: breakpoint,

package/dist/es2019/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -22,12 +22,13 @@ const POPUP_OFFSET = [0, 3];
  * and menu model as slash command.
  */
 export const RegisteredInsertButton = ({
-  api
+  api,
+  disableOptimisticToolbar
 }) => {
   const {
     editorView
   } = useEditorToolbar();
-  const isOptimistic = isExperimentEnabled('platform_editor_ssr_toolbar_optimistic');
+  const isOptimistic = !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic');
   const {
     formatMessage
   } = useIntl();

package/dist/es2019/ui/toolbar-components/MediaButton.js

@@ -11,7 +11,8 @@ import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
 import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export const MediaButton = ({
-  api
+  api,
+  disableOptimisticToolbar
 }) => {
   const {
     formatMessage
@@ -64,7 +65,7 @@ export const MediaButton = ({
     });
   };
   const isOffline = isOfflineMode(connectivityMode);
-  const isDisabled = isOffline || !(allowsUploads || isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
+  const isDisabled = isOffline || !(allowsUploads || !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: formatMessage(messages.addMediaFiles)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {

package/dist/es2019/ui/toolbar-components/MentionButton.js

@@ -10,7 +10,8 @@ import { ToolbarButton } from '@atlaskit/editor-toolbar/toolbar-button';
 import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export const MentionButton = ({
-  api
+  api,
+  disableOptimisticToolbar
 }) => {
   const {
     formatMessage
@@ -41,7 +42,7 @@ export const MentionButton = ({
 
   // The SSR state cannot resolve providers. Keep pending and available visually identical,
   // while preserving known selection restrictions and settled provider failures.
-  const isDisabled = isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
+  const isDisabled = !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: formatMessage(messages.mention),

package/dist/es2019/ui/toolbar-components.js

@@ -89,7 +89,8 @@ export const getToolbarComponents = ({
       component: () => !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
         api: api
       }) : /*#__PURE__*/React.createElement(MediaButton, {
-        api: api
+        api: api,
+        disableOptimisticToolbar: options.disableOptimisticToolbar
       })
     });
   }
@@ -142,7 +143,8 @@ export const getToolbarComponents = ({
         rank: MENTION_GROUP_RANK[MENTION_BUTTON.key]
       }],
       component: () => /*#__PURE__*/React.createElement(MentionButton, {
-        api: api
+        api: api,
+        disableOptimisticToolbar: options.disableOptimisticToolbar
       })
     });
   }
@@ -244,7 +246,8 @@ export const getToolbarComponents = ({
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
     const createInsertButtonComponent = breakpoint => {
       return () => isExperimentEnabled('platform_editor_slash_command') ? /*#__PURE__*/React.createElement(RegisteredInsertButton, {
-        api: api
+        api: api,
+        disableOptimisticToolbar: options.disableOptimisticToolbar
       }) : /*#__PURE__*/React.createElement(InsertButton, {
         api: api,
         breakpoint: breakpoint,

package/dist/esm/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -23,10 +23,11 @@ var POPUP_OFFSET = [0, 3];
  * and menu model as slash command.
  */
 export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useEditorToolbar = useEditorToolbar(),
     editorView = _useEditorToolbar.editorView;
-  var isOptimistic = isExperimentEnabled('platform_editor_ssr_toolbar_optimistic');
+  var isOptimistic = !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic');
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useToolbarUI = useToolbarUI(),

package/dist/esm/ui/toolbar-components/MediaButton.js

@@ -11,7 +11,8 @@ import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
 import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export var MediaButton = function MediaButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useToolbarUI = useToolbarUI(),
@@ -60,7 +61,7 @@ export var MediaButton = function MediaButton(_ref) {
     });
   };
   var isOffline = isOfflineMode(connectivityMode);
-  var isDisabled = isOffline || !(allowsUploads || isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
+  var isDisabled = isOffline || !(allowsUploads || !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && isUploadPending);
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: formatMessage(messages.addMediaFiles)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {

package/dist/esm/ui/toolbar-components/MentionButton.js

@@ -10,7 +10,8 @@ import { ToolbarButton } from '@atlaskit/editor-toolbar/toolbar-button';
 import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export var MentionButton = function MentionButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    disableOptimisticToolbar = _ref.disableOptimisticToolbar;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['mention', 'typeAhead'], function (states) {
@@ -38,7 +39,7 @@ export var MentionButton = function MentionButton(_ref) {
 
   // The SSR state cannot resolve providers. Keep pending and available visually identical,
   // while preserving known selection restrictions and settled provider failures.
-  var isDisabled = isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
+  var isDisabled = !disableOptimisticToolbar && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') ? canInsertMention === false || hasMentionState && isTypeAheadAllowed === false || mentionProviderStatus !== 'pending' && hasMentionState && !mentionProvider : !canInsertMention || !mentionProvider || !isTypeAheadAllowed;
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: formatMessage(messages.mention),

package/dist/esm/ui/toolbar-components.js

@@ -92,7 +92,8 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
         return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
           api: api
         }) : /*#__PURE__*/React.createElement(MediaButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         });
       }
     });
@@ -149,7 +150,8 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
       }],
       component: function component() {
         return /*#__PURE__*/React.createElement(MentionButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         });
       }
     });
@@ -261,7 +263,8 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
     var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
       return function () {
         return isExperimentEnabled('platform_editor_slash_command') ? /*#__PURE__*/React.createElement(RegisteredInsertButton, {
-          api: api
+          api: api,
+          disableOptimisticToolbar: options.disableOptimisticToolbar
         }) : /*#__PURE__*/React.createElement(InsertButton, {
           api: api,
           breakpoint: breakpoint,

package/dist/types/types/index.d.ts

@@ -67,6 +67,8 @@ export interface InsertBlockPluginOptions {
     allowExpand?: boolean;
     allowTables?: boolean;
     appearance?: EditorAppearance;
+    /** Opt this editor surface out of the optimistic SSR toolbar experiment. */
+    disableOptimisticToolbar?: boolean;
     horizontalRuleEnabled?: boolean;
     insertMenuItems?: any;
     /**

package/dist/types/ui/registered-insert-menu/RegisteredInsertButton.d.ts

@@ -3,10 +3,11 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types/next-edi
 import type { InsertBlockPlugin } from '../../insertBlockPluginType';
 type Props = {
     api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    disableOptimisticToolbar?: boolean;
 };
 /**
  * The toolbar owns its popup lifecycle, but renders the same registered items
  * and menu model as slash command.
  */
-export declare const RegisteredInsertButton: ({ api }: Props) => React.JSX.Element | null;
+export declare const RegisteredInsertButton: ({ api, disableOptimisticToolbar, }: Props) => React.JSX.Element | null;
 export {};

package/dist/types/ui/toolbar-components/MediaButton.d.ts

@@ -3,6 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types/next-edi
 import type { InsertBlockPlugin } from '../../insertBlockPluginType';
 type MediaButtonProps = {
     api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    disableOptimisticToolbar?: boolean;
 };
-export declare const MediaButton: ({ api }: MediaButtonProps) => React.JSX.Element | null;
+export declare const MediaButton: ({ api, disableOptimisticToolbar, }: MediaButtonProps) => React.JSX.Element | null;
 export {};

package/dist/types/ui/toolbar-components/MentionButton.d.ts

@@ -3,6 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types/next-edi
 import type { InsertBlockPlugin } from '../../insertBlockPluginType';
 type MentionButtonProps = {
     api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    disableOptimisticToolbar?: boolean;
 };
-export declare const MentionButton: ({ api }: MentionButtonProps) => React.JSX.Element | null;
+export declare const MentionButton: ({ api, disableOptimisticToolbar, }: MentionButtonProps) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "31.0.15",
+	"version": "31.1.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,9 +35,9 @@
 		"@atlaskit/editor-plugin-hyperlink": "^32.0.0",
 		"@atlaskit/editor-plugin-image-upload": "^30.0.0",
 		"@atlaskit/editor-plugin-layout": "^31.0.0",
-		"@atlaskit/editor-plugin-media": "^32.2.0",
+		"@atlaskit/editor-plugin-media": "^32.3.0",
 		"@atlaskit/editor-plugin-media-insert": "^48.0.0",
-		"@atlaskit/editor-plugin-mentions": "^32.1.0",
+		"@atlaskit/editor-plugin-mentions": "^32.2.0",
 		"@atlaskit/editor-plugin-metrics": "^31.0.0",
 		"@atlaskit/editor-plugin-panel": "^32.0.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^31.0.0",
@@ -60,10 +60,10 @@
 		"@atlaskit/icon-lab": "^7.11.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.6.0",
+		"@atlaskit/primitives": "^22.7.0",
 		"@atlaskit/textfield": "^10.3.0",
-		"@atlaskit/tmp-editor-statsig": "^259.0.0",
-		"@atlaskit/tokens": "^20.9.0",
+		"@atlaskit/tmp-editor-statsig": "^260.0.0",
+		"@atlaskit/tokens": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",