@atlaskit/editor-plugin-floating-toolbar 31.0.2 → 31.0.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 31.0.3
+
+### Patch Changes
+
+- [`f268dee2526f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f268dee2526f7) -
+  Migrate Smart Card registration and removal from transactions to editor actions behind
+  `platform_editor_reduce_forced_layout_2`. Remove unused card overlay registration behind
+  `platform_editor_reduce_forced_layout_2`.
+- Updated dependencies
+
 ## 31.0.2
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -24,6 +24,7 @@ var _useSharedPluginState2 = require("@atlaskit/editor-common/useSharedPluginSta
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _useToolbarExternalStore = require("./hooks/useToolbarExternalStore");
 var _commands = require("./pm-plugins/commands");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
 var _commands2 = require("./pm-plugins/toolbar-data/commands");
@@ -235,7 +236,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
  * @returns JSX element representing the floating toolbar or null if not visible
  */
 function ContentComponent(_ref5) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
+  var _configWithNodeInfo, _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
     editorView = _ref5.editorView,
     popupsMountPoint = _ref5.popupsMountPoint,
@@ -259,6 +260,9 @@ function ContentComponent(_ref5) {
     // for example, trigger remix on panel will not hide the floating toolbar
     configWithNodeInfo = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.sharedState.currentState()) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.configWithNodeInfo;
   }
+
+  // Subscribe to an external store for rerenders. Used by editor-plugin-card for card registration via editor actions
+  (0, _useToolbarExternalStore.useToolbarExternalStore)((_configWithNodeInfo = configWithNodeInfo) === null || _configWithNodeInfo === void 0 || (_configWithNodeInfo = _configWithNodeInfo.config) === null || _configWithNodeInfo === void 0 ? void 0 : _configWithNodeInfo.externalStore);
   if ((0, _isSsr.isSSR)()) {
     return null;
   }
@@ -268,9 +272,9 @@ function ContentComponent(_ref5) {
   if (userIntentState !== null && userIntentState !== void 0 && userIntentState.currentUserIntent && SUPPRESS_TOOLBAR_USER_INTENTS.includes(userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent)) {
     return null;
   }
-  var _configWithNodeInfo = configWithNodeInfo,
-    config = _configWithNodeInfo.config,
-    node = _configWithNodeInfo.node;
+  var _configWithNodeInfo2 = configWithNodeInfo,
+    config = _configWithNodeInfo2.config,
+    node = _configWithNodeInfo2.node;
 
   // When the new inline editor-toolbar is enabled, suppress floating toolbar for text selections.
   if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) {

package/dist/cjs/hooks/useToolbarExternalStore.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarExternalStore = void 0;
+var _react = require("react");
+var emptySnapshot = function emptySnapshot() {
+  return 0;
+};
+var emptySubscription = function emptySubscription() {
+  return function () {};
+};
+
+/** Refresh toolbar content when its optional external store changes. */
+var useToolbarExternalStore = exports.useToolbarExternalStore = function useToolbarExternalStore(store) {
+  var _store$subscribe, _store$getSnapshot;
+  (0, _react.useSyncExternalStore)((_store$subscribe = store === null || store === void 0 ? void 0 : store.subscribe) !== null && _store$subscribe !== void 0 ? _store$subscribe : emptySubscription, (_store$getSnapshot = store === null || store === void 0 ? void 0 : store.getSnapshot) !== null && _store$getSnapshot !== void 0 ? _store$getSnapshot : emptySnapshot, emptySnapshot);
+};

package/dist/es2019/floatingToolbarPlugin.js

@@ -11,6 +11,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/useSharedPluginSta
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { useToolbarExternalStore } from './hooks/useToolbarExternalStore';
 import { copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
@@ -226,7 +227,7 @@ export function ContentComponent({
   providerFactory,
   dispatchAnalyticsEvent
 }) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
+  var _configWithNodeInfo, _configWithNodeInfo$c, _configWithNodeInfo$c2, _configWithNodeInfo$c3, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   const {
     floatingToolbarState,
     editorDisabledState,
@@ -245,10 +246,13 @@ export function ContentComponent({
     // for example, trigger remix on panel will not hide the floating toolbar
     configWithNodeInfo = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : (_pluginInjectionApi$f2 = _pluginInjectionApi$f.sharedState.currentState()) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.configWithNodeInfo;
   }
+
+  // Subscribe to an external store for rerenders. Used by editor-plugin-card for card registration via editor actions
+  useToolbarExternalStore((_configWithNodeInfo = configWithNodeInfo) === null || _configWithNodeInfo === void 0 ? void 0 : (_configWithNodeInfo$c = _configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.externalStore);
   if (isSSR()) {
     return null;
   }
-  if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
+  if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c2 = configWithNodeInfo.config) === null || _configWithNodeInfo$c2 === void 0 ? void 0 : _configWithNodeInfo$c2.visible) !== 'undefined' && !((_configWithNodeInfo$c3 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c3 !== void 0 && _configWithNodeInfo$c3.visible)) {
     return null;
   }
   if (userIntentState !== null && userIntentState !== void 0 && userIntentState.currentUserIntent && SUPPRESS_TOOLBAR_USER_INTENTS.includes(userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent)) {

package/dist/es2019/hooks/useToolbarExternalStore.js

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from 'react';
+const emptySnapshot = () => 0;
+const emptySubscription = () => () => {};
+
+/** Refresh toolbar content when its optional external store changes. */
+export const useToolbarExternalStore = store => {
+  var _store$subscribe, _store$getSnapshot;
+  useSyncExternalStore((_store$subscribe = store === null || store === void 0 ? void 0 : store.subscribe) !== null && _store$subscribe !== void 0 ? _store$subscribe : emptySubscription, (_store$getSnapshot = store === null || store === void 0 ? void 0 : store.getSnapshot) !== null && _store$getSnapshot !== void 0 ? _store$getSnapshot : emptySnapshot, emptySnapshot);
+};

package/dist/esm/floatingToolbarPlugin.js

@@ -15,6 +15,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/useSharedPluginSta
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { useToolbarExternalStore } from './hooks/useToolbarExternalStore';
 import { copyNode as _copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
@@ -223,7 +224,7 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
  * @returns JSX element representing the floating toolbar or null if not visible
  */
 export function ContentComponent(_ref5) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
+  var _configWithNodeInfo, _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
     editorView = _ref5.editorView,
     popupsMountPoint = _ref5.popupsMountPoint,
@@ -247,6 +248,9 @@ export function ContentComponent(_ref5) {
     // for example, trigger remix on panel will not hide the floating toolbar
     configWithNodeInfo = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.sharedState.currentState()) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.configWithNodeInfo;
   }
+
+  // Subscribe to an external store for rerenders. Used by editor-plugin-card for card registration via editor actions
+  useToolbarExternalStore((_configWithNodeInfo = configWithNodeInfo) === null || _configWithNodeInfo === void 0 || (_configWithNodeInfo = _configWithNodeInfo.config) === null || _configWithNodeInfo === void 0 ? void 0 : _configWithNodeInfo.externalStore);
   if (isSSR()) {
     return null;
   }
@@ -256,9 +260,9 @@ export function ContentComponent(_ref5) {
   if (userIntentState !== null && userIntentState !== void 0 && userIntentState.currentUserIntent && SUPPRESS_TOOLBAR_USER_INTENTS.includes(userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent)) {
     return null;
   }
-  var _configWithNodeInfo = configWithNodeInfo,
-    config = _configWithNodeInfo.config,
-    node = _configWithNodeInfo.node;
+  var _configWithNodeInfo2 = configWithNodeInfo,
+    config = _configWithNodeInfo2.config,
+    node = _configWithNodeInfo2.node;
 
   // When the new inline editor-toolbar is enabled, suppress floating toolbar for text selections.
   if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) {

package/dist/esm/hooks/useToolbarExternalStore.js

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from 'react';
+var emptySnapshot = function emptySnapshot() {
+  return 0;
+};
+var emptySubscription = function emptySubscription() {
+  return function () {};
+};
+
+/** Refresh toolbar content when its optional external store changes. */
+export var useToolbarExternalStore = function useToolbarExternalStore(store) {
+  var _store$subscribe, _store$getSnapshot;
+  useSyncExternalStore((_store$subscribe = store === null || store === void 0 ? void 0 : store.subscribe) !== null && _store$subscribe !== void 0 ? _store$subscribe : emptySubscription, (_store$getSnapshot = store === null || store === void 0 ? void 0 : store.getSnapshot) !== null && _store$getSnapshot !== void 0 ? _store$getSnapshot : emptySnapshot, emptySnapshot);
+};

package/dist/types/hooks/useToolbarExternalStore.d.ts

@@ -0,0 +1,3 @@
+import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types/floating-toolbar';
+/** Refresh toolbar content when its optional external store changes. */
+export declare const useToolbarExternalStore: (store: FloatingToolbarConfig['externalStore']) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "31.0.2",
+	"version": "31.0.3",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,7 +22,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-utils": "^20.9.0",
-		"@atlaskit/button": "^25.5.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/checkbox": "^19.3.0",
 		"@atlaskit/editor-palette": "^3.5.0",
 		"@atlaskit/editor-plugin-analytics": "^29.0.0",
@@ -56,7 +56,7 @@
 		"react-loosely-lazy": "^1.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^133.1.0",
+		"@atlaskit/editor-common": "^133.4.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"