@atlaskit/editor-plugin-loom 2.2.9 → 2.2.11

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-loom
 
+## 2.2.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.10
+
+### Patch Changes
+
+- [#109923](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109923)
+  [`ed20be4a6f5d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ed20be4a6f5d5) -
+  ED-23511 fix loom and it button responsive
+- Updated dependencies
+
 ## 2.2.9
 
 ### Patch Changes

package/dist/cjs/ui/ToolbarButton.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -14,7 +13,9 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _logo = require("@atlaskit/logo");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
-var _useWindowWidth = require("../hooks/useWindowWidth");
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // This const is derived from the breakpoint where the toolbar hides its icons. It is used to hide the text in the AI button.
 // Derived from values from platform/packages/editor/editor-core/src/ui/Appearance/FullPage/MainToolbar.tsx
 var LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
@@ -23,14 +24,14 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     api = _ref.api,
     appearance = _ref.appearance,
     formatMessage = _ref.intl.formatMessage;
-  var width = (0, _useWindowWidth.useWindowWidth)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom']),
-    loomState = _useSharedPluginState.loomState;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom', 'width']),
+    loomState = _useSharedPluginState.loomState,
+    widthState = _useSharedPluginState.widthState;
   if (!loomState) {
     return null;
   }
   var label = formatMessage(appearance === 'comment' ? _messages.toolbarInsertBlockMessages.addLoomVideoComment : _messages.toolbarInsertBlockMessages.addLoomVideo);
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+  return (0, _react.jsx)(_uiMenu.ToolbarButton, {
     buttonId: _uiMenu.TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: function onClick() {
       var _api$core, _api$analytics;
@@ -43,10 +44,10 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_logo.LoomIcon, {
+    iconBefore: (0, _react.jsx)(_logo.LoomIcon, {
       label: label,
       size: "small"
     })
-  }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.plugin.loom.responsive-menu_4at4a') && width >= LOOM_BUTTON_WIDTH_BREAKPOINT && /*#__PURE__*/_react.default.createElement("span", null, formatMessage(_messages.toolbarInsertBlockMessages.recordLoomShortTitle)));
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.plugin.loom.responsive-menu_4at4a') && ((widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT && (0, _react.jsx)("span", null, formatMessage(_messages.toolbarInsertBlockMessages.recordLoomShortTitle)));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(LoomToolbarButton);

package/dist/es2019/ui/ToolbarButton.js

@@ -1,4 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -7,7 +9,6 @@ import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { LoomIcon } from '@atlaskit/logo';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { recordVideo } from '../commands';
-import { useWindowWidth } from '../hooks/useWindowWidth';
 // This const is derived from the breakpoint where the toolbar hides its icons. It is used to hide the text in the AI button.
 // Derived from values from platform/packages/editor/editor-core/src/ui/Appearance/FullPage/MainToolbar.tsx
 const LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
@@ -19,15 +20,15 @@ const LoomToolbarButton = ({
     formatMessage
   }
 }) => {
-  const width = useWindowWidth();
   const {
-    loomState
-  } = useSharedPluginState(api, ['loom']);
+    loomState,
+    widthState
+  } = useSharedPluginState(api, ['loom', 'width']);
   if (!loomState) {
     return null;
   }
   const label = formatMessage(appearance === 'comment' ? toolbarInsertBlockMessages.addLoomVideoComment : toolbarInsertBlockMessages.addLoomVideo);
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: () => {
       var _api$core, _api$analytics;
@@ -40,10 +41,10 @@ const LoomToolbarButton = ({
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+    iconBefore: jsx(LoomIcon, {
       label: label,
       size: "small"
     })
-  }, getBooleanFF('platform.editor.plugin.loom.responsive-menu_4at4a') && width >= LOOM_BUTTON_WIDTH_BREAKPOINT && /*#__PURE__*/React.createElement("span", null, formatMessage(toolbarInsertBlockMessages.recordLoomShortTitle)));
+  }, getBooleanFF('platform.editor.plugin.loom.responsive-menu_4at4a') && ((widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT && jsx("span", null, formatMessage(toolbarInsertBlockMessages.recordLoomShortTitle)));
 };
 export default injectIntl(LoomToolbarButton);

package/dist/esm/ui/ToolbarButton.js

@@ -1,4 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -7,7 +9,6 @@ import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { LoomIcon } from '@atlaskit/logo';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { recordVideo } from '../commands';
-import { useWindowWidth } from '../hooks/useWindowWidth';
 // This const is derived from the breakpoint where the toolbar hides its icons. It is used to hide the text in the AI button.
 // Derived from values from platform/packages/editor/editor-core/src/ui/Appearance/FullPage/MainToolbar.tsx
 var LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
@@ -16,14 +17,14 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     api = _ref.api,
     appearance = _ref.appearance,
     formatMessage = _ref.intl.formatMessage;
-  var width = useWindowWidth();
-  var _useSharedPluginState = useSharedPluginState(api, ['loom']),
-    loomState = _useSharedPluginState.loomState;
+  var _useSharedPluginState = useSharedPluginState(api, ['loom', 'width']),
+    loomState = _useSharedPluginState.loomState,
+    widthState = _useSharedPluginState.widthState;
   if (!loomState) {
     return null;
   }
   var label = formatMessage(appearance === 'comment' ? toolbarInsertBlockMessages.addLoomVideoComment : toolbarInsertBlockMessages.addLoomVideo);
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: function onClick() {
       var _api$core, _api$analytics;
@@ -36,10 +37,10 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+    iconBefore: jsx(LoomIcon, {
       label: label,
       size: "small"
     })
-  }, getBooleanFF('platform.editor.plugin.loom.responsive-menu_4at4a') && width >= LOOM_BUTTON_WIDTH_BREAKPOINT && /*#__PURE__*/React.createElement("span", null, formatMessage(toolbarInsertBlockMessages.recordLoomShortTitle)));
+  }, getBooleanFF('platform.editor.plugin.loom.responsive-menu_4at4a') && ((widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT && jsx("span", null, formatMessage(toolbarInsertBlockMessages.recordLoomShortTitle)));
 };
 export default injectIntl(LoomToolbarButton);

package/dist/types/plugin.d.ts

@@ -3,12 +3,14 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { LoomPluginState } from './pm-plugin';
 import type { LoomPluginOptions } from './types';
 export type LoomPlugin = NextEditorPlugin<'loom', {
     pluginConfiguration: LoomPluginOptions;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
+        WidthPlugin,
         HyperlinkPlugin
     ];
     sharedState: LoomPluginState | undefined;