@atlaskit/editor-plugin-placeholder 22.0.0 → 22.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 22.1.0
+
+### Minor Changes
+
+- [`eb1c9f7924470`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb1c9f7924470) -
+  [ux] Subscribe the empty-document loading spinner to collab-edit initialization state using a
+  selector behind platform_editor_placeholder_collab_spinner so it clears when collaboration
+  initializes without requiring an unrelated editor render.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.0.0
 
 ### Patch Changes

package/dist/cjs/PlaceholderLoadingSpinner.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/cjs/PlaceholderLoadingSpinner.js

@@ -0,0 +1,41 @@
+/* PlaceholderLoadingSpinner.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlaceholderLoadingSpinner = void 0;
+require("./PlaceholderLoadingSpinner.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _document = require("@atlaskit/editor-common/utils/document");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+var PlaceholderLoadingSpinner = exports.PlaceholderLoadingSpinner = function PlaceholderLoadingSpinner(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var isCollabInitializing = (0, _hooks.useSharedPluginStateWithSelector)(api, ['collabEdit'], function (_ref2) {
+    var collabEditState = _ref2.collabEditState;
+    return !!collabEditState && !collabEditState.initialised.collabInitialisedAt;
+  });
+  var doc = editorView === null || editorView === void 0 ? void 0 : editorView.state.doc;
+  if (!editorView || !isCollabInitializing || doc && !(0, _document.isEmptyDocument)(doc)) {
+    return null;
+  }
+
+  // In this scenario
+  // - the collab plugin exists - but we don't have a "initial/placeholder" document
+  // - and the collab plugin is not yet ready
+  // So we show a placeholder spinner to indicate the content is still loading
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    xcss: spinnerContainerStyles.spinnerContainer
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    interactionName: "live-pages-loading-spinner",
+    size: "medium"
+  }));
+};
+var spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
+};

package/dist/cjs/placeholderPlugin.js

@@ -12,8 +12,10 @@ var _react = _interopRequireDefault(require("react"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+var _PlaceholderLoadingSpinner = require("./PlaceholderLoadingSpinner");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var EMPTY_PARAGRAPH_TIMEOUT_DELAY = exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
 
@@ -73,20 +75,20 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
       if ((options === null || options === void 0 ? void 0 : options.enableLoadingSpinner) === false) {
         return null;
       }
+      if ((0, _fg.fg)('platform_editor_placeholder_collab_spinner')) {
+        return /*#__PURE__*/_react.default.createElement(_PlaceholderLoadingSpinner.PlaceholderLoadingSpinner, {
+          api: api,
+          editorView: params.editorView
+        });
+      }
       var doc = (_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.state.doc;
 
       // @ts-ignore fix which needs follow up to use standard apis
       var collabEditPluginState = (_params$editorView2 = params.editorView) === null || _params$editorView2 === void 0 || (_params$editorView2 = _params$editorView2.state) === null || _params$editorView2 === void 0 ? void 0 : _params$editorView2.collabEditPlugin$;
       if (collabEditPluginState && collabEditPluginState.isReady !== true) {
         if (doc && !(0, _document.isEmptyDocument)(doc)) {
-          // If we have a document, and it's not empty - we should not show a loading component
           return null;
         }
-
-        // In this scenario
-        // - the collab plugin exists - but we don't have a "initial/placeholder" document
-        // - and the collab plugin is not yet ready
-        // So we show a placeholder spinner to indicate the content is still loading
         return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
           xcss: spinnerContainerStyles.spinnerContainer
         }, /*#__PURE__*/_react.default.createElement(_spinner.default, {

package/dist/es2019/PlaceholderLoadingSpinner.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/es2019/PlaceholderLoadingSpinner.js

@@ -0,0 +1,34 @@
+/* PlaceholderLoadingSpinner.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./PlaceholderLoadingSpinner.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import Spinner from '@atlaskit/spinner/spinner';
+export const PlaceholderLoadingSpinner = ({
+  api,
+  editorView
+}) => {
+  const isCollabInitializing = useSharedPluginStateWithSelector(api, ['collabEdit'], ({
+    collabEditState
+  }) => !!collabEditState && !collabEditState.initialised.collabInitialisedAt);
+  const doc = editorView === null || editorView === void 0 ? void 0 : editorView.state.doc;
+  if (!editorView || !isCollabInitializing || doc && !isEmptyDocument(doc)) {
+    return null;
+  }
+
+  // In this scenario
+  // - the collab plugin exists - but we don't have a "initial/placeholder" document
+  // - and the collab plugin is not yet ready
+  // So we show a placeholder spinner to indicate the content is still loading
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: spinnerContainerStyles.spinnerContainer
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    interactionName: "live-pages-loading-spinner",
+    size: "medium"
+  }));
+};
+const spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
+};

package/dist/es2019/placeholderPlugin.js

@@ -5,8 +5,10 @@ import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
+import { PlaceholderLoadingSpinner } from './PlaceholderLoadingSpinner';
 import createPlugin from './pm-plugins/main';
 export const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
 
@@ -63,20 +65,20 @@ export const placeholderPlugin = ({
       if ((options === null || options === void 0 ? void 0 : options.enableLoadingSpinner) === false) {
         return null;
       }
+      if (fg('platform_editor_placeholder_collab_spinner')) {
+        return /*#__PURE__*/React.createElement(PlaceholderLoadingSpinner, {
+          api: api,
+          editorView: params.editorView
+        });
+      }
       const doc = (_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.state.doc;
 
       // @ts-ignore fix which needs follow up to use standard apis
       const collabEditPluginState = (_params$editorView2 = params.editorView) === null || _params$editorView2 === void 0 ? void 0 : (_params$editorView2$s = _params$editorView2.state) === null || _params$editorView2$s === void 0 ? void 0 : _params$editorView2$s.collabEditPlugin$;
       if (collabEditPluginState && collabEditPluginState.isReady !== true) {
         if (doc && !isEmptyDocument(doc)) {
-          // If we have a document, and it's not empty - we should not show a loading component
           return null;
         }
-
-        // In this scenario
-        // - the collab plugin exists - but we don't have a "initial/placeholder" document
-        // - and the collab plugin is not yet ready
-        // So we show a placeholder spinner to indicate the content is still loading
         return /*#__PURE__*/React.createElement(Box, {
           xcss: spinnerContainerStyles.spinnerContainer
         }, /*#__PURE__*/React.createElement(Spinner, {

package/dist/esm/PlaceholderLoadingSpinner.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/esm/PlaceholderLoadingSpinner.js

@@ -0,0 +1,34 @@
+/* PlaceholderLoadingSpinner.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./PlaceholderLoadingSpinner.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import Spinner from '@atlaskit/spinner/spinner';
+export var PlaceholderLoadingSpinner = function PlaceholderLoadingSpinner(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var isCollabInitializing = useSharedPluginStateWithSelector(api, ['collabEdit'], function (_ref2) {
+    var collabEditState = _ref2.collabEditState;
+    return !!collabEditState && !collabEditState.initialised.collabInitialisedAt;
+  });
+  var doc = editorView === null || editorView === void 0 ? void 0 : editorView.state.doc;
+  if (!editorView || !isCollabInitializing || doc && !isEmptyDocument(doc)) {
+    return null;
+  }
+
+  // In this scenario
+  // - the collab plugin exists - but we don't have a "initial/placeholder" document
+  // - and the collab plugin is not yet ready
+  // So we show a placeholder spinner to indicate the content is still loading
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: spinnerContainerStyles.spinnerContainer
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    interactionName: "live-pages-loading-spinner",
+    size: "medium"
+  }));
+};
+var spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
+};

package/dist/esm/placeholderPlugin.js

@@ -5,8 +5,10 @@ import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
+import { PlaceholderLoadingSpinner } from './PlaceholderLoadingSpinner';
 import createPlugin from './pm-plugins/main';
 export var EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
 
@@ -66,20 +68,20 @@ export var placeholderPlugin = function placeholderPlugin(_ref) {
       if ((options === null || options === void 0 ? void 0 : options.enableLoadingSpinner) === false) {
         return null;
       }
+      if (fg('platform_editor_placeholder_collab_spinner')) {
+        return /*#__PURE__*/React.createElement(PlaceholderLoadingSpinner, {
+          api: api,
+          editorView: params.editorView
+        });
+      }
       var doc = (_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.state.doc;
 
       // @ts-ignore fix which needs follow up to use standard apis
       var collabEditPluginState = (_params$editorView2 = params.editorView) === null || _params$editorView2 === void 0 || (_params$editorView2 = _params$editorView2.state) === null || _params$editorView2 === void 0 ? void 0 : _params$editorView2.collabEditPlugin$;
       if (collabEditPluginState && collabEditPluginState.isReady !== true) {
         if (doc && !isEmptyDocument(doc)) {
-          // If we have a document, and it's not empty - we should not show a loading component
           return null;
         }
-
-        // In this scenario
-        // - the collab plugin exists - but we don't have a "initial/placeholder" document
-        // - and the collab plugin is not yet ready
-        // So we show a placeholder spinner to indicate the content is still loading
         return /*#__PURE__*/React.createElement(Box, {
           xcss: spinnerContainerStyles.spinnerContainer
         }, /*#__PURE__*/React.createElement(Spinner, {

package/dist/types/PlaceholderLoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PlaceholderPlugin } from './placeholderPluginType';
+export declare const PlaceholderLoadingSpinner: ({ api, editorView, }: {
+    api: ExtractInjectionAPI<PlaceholderPlugin> | undefined;
+    editorView?: EditorView;
+}) => React.JSX.Element | null;

package/dist/types/placeholderPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { DocNode } from '@atlaskit/adf-schema/doc';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { CollabEditPlugin } from '@atlaskit/editor-plugin-collab-edit/collabEditPluginType';
 import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { ShowDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
@@ -23,6 +24,12 @@ export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
         setPlaceholder: (placeholder: string) => EditorCommand;
         setPlaceholderHidden: (isPlaceholderHidden: boolean) => EditorCommand;
     };
-    dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin, OptionalPlugin<ShowDiffPlugin>];
+    dependencies: [
+        FocusPlugin,
+        CompositionPlugin,
+        TypeAheadPlugin,
+        OptionalPlugin<ShowDiffPlugin>,
+        OptionalPlugin<CollabEditPlugin>
+    ];
     pluginConfiguration: PlaceholderPluginOptions | undefined;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-placeholder",
-	"version": "22.0.0",
+	"version": "22.1.0",
 	"description": "Placeholder plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,6 +22,7 @@
 		"@atlaskit/adf-schema": "^57.6.0",
 		"@atlaskit/adf-utils": "^20.9.0",
 		"@atlaskit/css": "^1.1.0",
+		"@atlaskit/editor-plugin-collab-edit": "^23.0.0",
 		"@atlaskit/editor-plugin-composition": "^21.0.0",
 		"@atlaskit/editor-plugin-focus": "^21.0.0",
 		"@atlaskit/editor-plugin-show-diff": "^20.0.0",
@@ -30,12 +31,12 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/spinner": "^20.4.0",
-		"@atlaskit/tmp-editor-statsig": "^209.0.0",
-		"@atlaskit/tokens": "^20.0.0",
+		"@atlaskit/tmp-editor-statsig": "^210.0.0",
+		"@atlaskit/tokens": "^20.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^126.0.0",
+		"@atlaskit/editor-common": "^126.1.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -45,5 +46,10 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"
+	},
+	"platform-feature-flags": {
+		"platform_editor_placeholder_collab_spinner": {
+			"type": "boolean"
+		}
 	}
 }