@atlaskit/editor-plugin-layout 3.2.2 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-layout
 
+## 4.0.0
+
+### Patch Changes
+
+- [`e882e86092666`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e882e86092666) -
+  [ux] Register expand, layout and code block itmes in block menu. Update panel item.
+- Updated dependencies
+
 ## 3.2.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -9,17 +9,20 @@ var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
 var _globalStyles = require("./ui/global-styles");
+var _LayoutBlockMenuItem = require("./ui/LayoutBlockMenuItem");
 var _toolbar = require("./ui/toolbar");
 /**
  * This function is used to set the selection into
@@ -56,6 +59,19 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true, {
     exposure: true
   });
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: _blockMenu.FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.FORMAT_MENU_ITEM.key,
+        rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: (0, _LayoutBlockMenuItem.createLayoutBlockMenuItem)(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes: function nodes() {

package/dist/cjs/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLayoutBlockMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
+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 LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var isLayoutSelected = (0, _react.useMemo)(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof _state.NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
+      label: ""
+    })
+  }, formatMessage(_messages.blockMenuMessages.layout));
+};
+var createLayoutBlockMenuItem = exports.createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(LayoutBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/es2019/layoutPlugin.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_LAYOUT_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { buildToolbar } from './ui/toolbar';
 
 /**
@@ -49,6 +52,19 @@ export const layoutPlugin = ({
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: createLayoutBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes() {

package/dist/es2019/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+const LayoutBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const isLayoutSelected = useMemo(() => {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  const handleClick = () => {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.layout));
+};
+export const createLayoutBlockMenuItem = api => {
+  return () => /*#__PURE__*/React.createElement(LayoutBlockMenuItem, {
+    api: api
+  });
+};

package/dist/esm/layoutPlugin.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_LAYOUT_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { buildToolbar } from './ui/toolbar';
 
 /**
@@ -50,6 +53,19 @@ export var layoutPlugin = function layoutPlugin(_ref) {
   var allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: createLayoutBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes: function nodes() {

package/dist/esm/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var isLayoutSelected = useMemo(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.layout));
+};
+export var createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/React.createElement(LayoutBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/types/layoutPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -15,7 +16,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<GuidelinePlugin>,
-    OptionalPlugin<InteractionPlugin>
+    OptionalPlugin<InteractionPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

package/dist/types/ui/LayoutBlockMenuItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+export declare const createLayoutBlockMenuItem: (api: ExtractInjectionAPI<LayoutPlugin>) => () => React.JSX.Element;

package/dist/types-ts4.5/layoutPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -15,7 +16,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<GuidelinePlugin>,
-    OptionalPlugin<InteractionPlugin>
+    OptionalPlugin<InteractionPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

package/dist/types-ts4.5/ui/LayoutBlockMenuItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+export declare const createLayoutBlockMenuItem: (api: ExtractInjectionAPI<LayoutPlugin>) => () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "3.2.2",
+	"version": "4.0.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,25 +30,27 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^50.2.3",
-		"@atlaskit/editor-plugin-analytics": "^3.0.0",
-		"@atlaskit/editor-plugin-decorations": "^3.1.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
-		"@atlaskit/editor-plugin-guideline": "^3.0.0",
-		"@atlaskit/editor-plugin-interaction": "^5.0.0",
-		"@atlaskit/editor-plugin-selection": "^3.2.0",
-		"@atlaskit/editor-plugin-width": "^4.0.0",
+		"@atlaskit/editor-plugin-analytics": "^4.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^1.0.0",
+		"@atlaskit/editor-plugin-decorations": "^4.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^4.0.0",
+		"@atlaskit/editor-plugin-guideline": "^4.0.0",
+		"@atlaskit/editor-plugin-interaction": "^6.0.0",
+		"@atlaskit/editor-plugin-selection": "^4.0.0",
+		"@atlaskit/editor-plugin-width": "^5.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
+		"@atlaskit/editor-toolbar": "^0.6.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^12.0.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^108.0.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},