@atlaskit/editor-plugin-block-menu 3.2.5 → 3.2.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.7
+
+### Patch Changes
+
+- [`0ef848d2118aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ef848d2118aa) -
+  Grey out `Turn Into` option on block menu where it is not supported
+- Updated dependencies
+
+## 3.2.6
+
+### Patch Changes
+
+- [`3c44ed6acd860`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3c44ed6acd860) -
+  Enable `Turn into` in block menu on all nested node under a feature gate
+- Updated dependencies
+
 ## 3.2.5
 
 ### Patch Changes

package/dist/cjs/ui/block-menu-components.js

@@ -61,7 +61,9 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
           children: null
         },
         children = _ref.children;
-      return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, null, children);
+      return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, {
+        api: api
+      }, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/cjs/ui/format-menu-nested.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormatMenuComponent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -13,11 +14,17 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
+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 FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.turnInto) : formatMessage(_blockMenu.messages.turnInto);
+  var isDisabled = (0, _react.useMemo)(function () {
+    return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
@@ -26,6 +33,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
     elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
       label: ""
     }),
-    enableMaxHeight: true
+    enableMaxHeight: true,
+    isDisabled: isDisabled
   }, children);
 };

package/dist/cjs/ui/format-menu-section.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormatMenuSection = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
 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 FormatMenuSection = exports.FormatMenuSection = function FormatMenuSection(_ref) {
@@ -15,7 +16,9 @@ var FormatMenuSection = exports.FormatMenuSection = function FormatMenuSection(_
   var isFormatMenuHidden = (0, _react.useCallback)(function () {
     return (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api);
   }, [api]);
-  if (isFormatMenuHidden()) {
+
+  // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
+  if (isFormatMenuHidden() && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes')) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);

package/dist/cjs/ui/utils/checkIsFormatMenuHidden.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.checkIsFormatMenuHidden = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _isNestedNode = require("./isNestedNode");
@@ -31,7 +32,7 @@ var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, me
     }
   }
   var isNested = (0, _isNestedNode.isNestedNode)(selection, menuTriggerBy);
-  return !content || isNested;
+  return !content || isNested && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_transform_nested_node');
 };
 var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema, menuTriggerBy) {
   var nodes = schema.nodes;
@@ -42,8 +43,8 @@ var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(sel
   if (selection.empty || selection.content().size === 0) {
     // if empty selection, show format menu
     return false;
-  } else if (isNested) {
-    // if nested,  always hide format menu
+  } else if (isNested && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_transform_nested_node')) {
+    // if nested,  always hide format menu unless feature gate is enabled
     return true;
   } else {
     var content;

package/dist/es2019/ui/block-menu-components.js

@@ -49,7 +49,9 @@ const getFormatMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
+      return /*#__PURE__*/React.createElement(FormatMenuComponent, {
+        api: api
+      }, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/es2019/ui/format-menu-nested.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
@@ -6,13 +6,18 @@ import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export const FormatMenuComponent = ({
+  api,
   children
 }) => {
   const {
     formatMessage
   } = useIntl();
   const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
+  const isDisabled = useMemo(() => {
+    return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
+  }, [api]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -21,6 +26,7 @@ export const FormatMenuComponent = ({
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: ""
     }),
-    enableMaxHeight: true
+    enableMaxHeight: true,
+    isDisabled: isDisabled
   }, children);
 };

package/dist/es2019/ui/format-menu-section.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export const FormatMenuSection = ({
   children,
@@ -8,7 +9,9 @@ export const FormatMenuSection = ({
   const isFormatMenuHidden = useCallback(() => {
     return checkIsFormatMenuHidden(api);
   }, [api]);
-  if (isFormatMenuHidden()) {
+
+  // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
+  if (isFormatMenuHidden() && !fg('platform_editor_block_menu_for_disabled_nodes')) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);

package/dist/es2019/ui/utils/checkIsFormatMenuHidden.js

@@ -1,4 +1,5 @@
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { isNestedNode } from './isNestedNode';
@@ -25,7 +26,7 @@ const getIsFormatMenuHidden = (selection, schema, menuTriggerBy) => {
     }
   }
   const isNested = isNestedNode(selection, menuTriggerBy);
-  return !content || isNested;
+  return !content || isNested && !fg('platform_editor_block_menu_transform_nested_node');
 };
 const getIsFormatMenuHiddenEmptyLine = (selection, schema, menuTriggerBy) => {
   const nodes = schema.nodes;
@@ -36,8 +37,8 @@ const getIsFormatMenuHiddenEmptyLine = (selection, schema, menuTriggerBy) => {
   if (selection.empty || selection.content().size === 0) {
     // if empty selection, show format menu
     return false;
-  } else if (isNested) {
-    // if nested,  always hide format menu
+  } else if (isNested && !fg('platform_editor_block_menu_transform_nested_node')) {
+    // if nested,  always hide format menu unless feature gate is enabled
     return true;
   } else {
     let content;

package/dist/esm/ui/block-menu-components.js

@@ -54,7 +54,9 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
           children: null
         },
         children = _ref.children;
-      return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
+      return /*#__PURE__*/React.createElement(FormatMenuComponent, {
+        api: api
+      }, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/esm/ui/format-menu-nested.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
@@ -6,11 +6,16 @@ import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export var FormatMenuComponent = function FormatMenuComponent(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
+  var isDisabled = useMemo(function () {
+    return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
+  }, [api]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     text: text,
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
@@ -19,6 +24,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: ""
     }),
-    enableMaxHeight: true
+    enableMaxHeight: true,
+    isDisabled: isDisabled
   }, children);
 };

package/dist/esm/ui/format-menu-section.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export var FormatMenuSection = function FormatMenuSection(_ref) {
   var children = _ref.children,
@@ -7,7 +8,9 @@ export var FormatMenuSection = function FormatMenuSection(_ref) {
   var isFormatMenuHidden = useCallback(function () {
     return checkIsFormatMenuHidden(api);
   }, [api]);
-  if (isFormatMenuHidden()) {
+
+  // When platform_editor_block_menu_for_disabled_nodes feature flag is OFF, use the original behavior (hide the menu)
+  if (isFormatMenuHidden() && !fg('platform_editor_block_menu_for_disabled_nodes')) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);

package/dist/esm/ui/utils/checkIsFormatMenuHidden.js

@@ -1,4 +1,5 @@
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { isNestedNode } from './isNestedNode';
@@ -25,7 +26,7 @@ var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, me
     }
   }
   var isNested = isNestedNode(selection, menuTriggerBy);
-  return !content || isNested;
+  return !content || isNested && !fg('platform_editor_block_menu_transform_nested_node');
 };
 var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema, menuTriggerBy) {
   var nodes = schema.nodes;
@@ -36,8 +37,8 @@ var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(sel
   if (selection.empty || selection.content().size === 0) {
     // if empty selection, show format menu
     return false;
-  } else if (isNested) {
-    // if nested,  always hide format menu
+  } else if (isNested && !fg('platform_editor_block_menu_transform_nested_node')) {
+    // if nested,  always hide format menu unless feature gate is enabled
     return true;
   } else {
     var content;

package/dist/types/ui/format-menu-nested.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-export declare const FormatMenuComponent: ({ children }: {
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+export declare const FormatMenuComponent: ({ api, children, }: {
+    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 }) => React.JSX.Element;

package/dist/types-ts4.5/ui/format-menu-nested.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-export declare const FormatMenuComponent: ({ children }: {
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+export declare const FormatMenuComponent: ({ api, children, }: {
+    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 }) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "3.2.5",
+	"version": "3.2.7",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.9.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
@@ -91,11 +91,17 @@
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
 		},
+		"platform_editor_block_menu_transform_nested_node": {
+			"type": "boolean"
+		},
 		"platform_editor_block_menu_selection_fix": {
 			"type": "boolean"
 		},
 		"platform_editor_block_menu_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_block_menu_for_disabled_nodes": {
+			"type": "boolean"
 		}
 	}
 }