@atlaskit/editor-plugin-insert-block 2.4.23 → 2.4.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.4.24
+
+### Patch Changes
+
+- [#179859](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179859)
+  [`1a90382aae1c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a90382aae1c6) -
+  Optimise the insert menu dropdown by preloading it.
+
 ## 2.4.23
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -1,12 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toolbarSizeToButtons = exports.insertBlockPlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _insert = require("@atlaskit/editor-common/insert");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -18,12 +20,14 @@ var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _switch = _interopRequireDefault(require("./assets/switch"));
-var _elementBrowser = require("./pm-plugins/elementBrowser");
+var _elementBrowser2 = require("./pm-plugins/elementBrowser");
 var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
 var _ElementRail = require("./ui/ElementRail");
 var _templateOptions = require("./ui/templateOptions");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _transformOptions = require("./ui/transformOptions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var toolbarSizeToButtons = exports.toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
   // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
@@ -85,6 +89,23 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
     };
   };
 }
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(function () {
+      return cb();
+    }, {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(function () {
+    return cb();
+  });
+}
 var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_ref) {
   var _api$primaryToolbar, _options$appearance4;
   var _ref$config = _ref.config,
@@ -151,7 +172,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         return;
       }
       var toggleInsertBlockPluginState = _toggleInsertBlock.toggleInsertBlockPmKey.getState(editorState);
-      var elementBrowserPluginState = _elementBrowser.elementBrowserPmKey.getState(editorState);
+      var elementBrowserPluginState = _elementBrowser2.elementBrowserPmKey.getState(editorState);
       return {
         showElementBrowser: (toggleInsertBlockPluginState === null || toggleInsertBlockPluginState === void 0 ? void 0 : toggleInsertBlockPluginState.showElementBrowser) || false,
         /**
@@ -162,6 +183,18 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         menuBrowserOpen: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? elementBrowserPluginState === null || elementBrowserPluginState === void 0 ? void 0 : elementBrowserPluginState.menuBrowserOpen : false
       };
     },
+    usePluginHook: function usePluginHook() {
+      (0, _react.useEffect)(function () {
+        // This is to optimise the UI so that when the user first clicks on the insert
+        // menu it opens instantly. As we're delaying the loading this won't affect the
+        // initial editor rendering metrics.
+        delayUntilIdle(function () {
+          if ((0, _platformFeatureFlags.fg)('platform_editor_preload_insert_menu')) {
+            _elementBrowser.ElementBrowser.preload();
+          }
+        });
+      }, []);
+    },
     pmPlugins: function pmPlugins() {
       var _options$appearance2;
       if (!['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '')) {
@@ -172,7 +205,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         plugins.push({
           name: 'elementBrowserPmPlugin',
           plugin: function plugin() {
-            return (0, _elementBrowser.elementBrowserPmPlugin)();
+            return (0, _elementBrowser2.elementBrowserPmPlugin)();
           }
         }, {
           name: 'elementBrowserEditorViewRef',
@@ -279,7 +312,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     plugin.pluginsOptions.contextPanel = function (state) {
       // api.getSharedState() will have an outdated reference to editorState on first mount of this component
       // so instead just rely on plugin key as we don't need to be reactive to changes here
-      var pluginState = _elementBrowser.elementBrowserPmKey.getState(state);
+      var pluginState = _elementBrowser2.elementBrowserPmKey.getState(state);
       if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen && editorViewRef.current) {
         return /*#__PURE__*/_react.default.createElement(_ElementRail.InsertMenuRail, {
           editorView: editorViewRef.current,

package/dist/es2019/insertBlockPlugin.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -76,6 +77,19 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
     return () => false;
   };
 }
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(() => cb(), {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(() => cb());
+}
 export const insertBlockPlugin = ({
   config: options = {},
   api
@@ -155,6 +169,18 @@ export const insertBlockPlugin = ({
         menuBrowserOpen: editorExperiment('insert-menu-in-right-rail', true) ? elementBrowserPluginState === null || elementBrowserPluginState === void 0 ? void 0 : elementBrowserPluginState.menuBrowserOpen : false
       };
     },
+    usePluginHook() {
+      useEffect(() => {
+        // This is to optimise the UI so that when the user first clicks on the insert
+        // menu it opens instantly. As we're delaying the loading this won't affect the
+        // initial editor rendering metrics.
+        delayUntilIdle(() => {
+          if (fg('platform_editor_preload_insert_menu')) {
+            ElementBrowser.preload();
+          }
+        });
+      }, []);
+    },
     pmPlugins: () => {
       var _options$appearance2;
       if (!['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '')) {

package/dist/esm/insertBlockPlugin.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -78,6 +79,23 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
     };
   };
 }
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(function () {
+      return cb();
+    }, {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(function () {
+    return cb();
+  });
+}
 export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   var _api$primaryToolbar, _options$appearance4;
   var _ref$config = _ref.config,
@@ -155,6 +173,18 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         menuBrowserOpen: editorExperiment('insert-menu-in-right-rail', true) ? elementBrowserPluginState === null || elementBrowserPluginState === void 0 ? void 0 : elementBrowserPluginState.menuBrowserOpen : false
       };
     },
+    usePluginHook: function usePluginHook() {
+      useEffect(function () {
+        // This is to optimise the UI so that when the user first clicks on the insert
+        // menu it opens instantly. As we're delaying the loading this won't affect the
+        // initial editor rendering metrics.
+        delayUntilIdle(function () {
+          if (fg('platform_editor_preload_insert_menu')) {
+            ElementBrowser.preload();
+          }
+        });
+      }, []);
+    },
     pmPlugins: function pmPlugins() {
       var _options$appearance2;
       if (!['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '')) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.4.23",
+	"version": "2.4.24",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-block-type": "^4.0.0",
 		"@atlaskit/editor-plugin-code-block": "^3.5.0",
-		"@atlaskit/editor-plugin-connectivity": "^1.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^1.1.0",
 		"@atlaskit/editor-plugin-date": "^2.4.0",
 		"@atlaskit/editor-plugin-emoji": "^2.7.0",
 		"@atlaskit/editor-plugin-expand": "^2.10.0",
@@ -66,8 +66,8 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.26.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tmp-editor-statsig": "^2.27.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@atlaskit/tooltip": "19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -130,6 +130,9 @@
 		"platform_editor_consistent_insert_menu": {
 			"type": "boolean"
 		},
+		"platform_editor_preload_insert_menu": {
+			"type": "boolean"
+		},
 		"platform_editor_reduce_element_browser_padding": {
 			"type": "boolean"
 		}