@atlaskit/editor-plugin-synced-block 4.2.1 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.2.2
+
+### Patch Changes
+
+- [`3432c4a4a074c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3432c4a4a074c) -
+  [ux] EDITOR-2525 update block menu convert to sync block to support all fishfooding node types
+- Updated dependencies
+
 ## 4.2.1
 
 ### Patch Changes

package/dist/cjs/editor-commands/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("../pm-plugins/utils/utils");
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
@@ -48,7 +49,10 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     // Save the new node with empty content to backend
     // This is so that the node can be copied and referenced without the source being saved/published
     syncBlockStore.createBodiedSyncBlockNode(_attrs);
-    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
+    tr.replaceWith(conversionInfo.from > 0 ? conversionInfo.from - 1 : 0, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
+
+    // set selection to the end of the previous selection + 1 for the position taken up by the start of the new synced block
+    tr.setSelection(_state.TextSelection.create(tr.doc, conversionInfo.to + 1));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/cjs/pm-plugins/utils/utils.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isBodiedSyncBlockNode = exports.findSyncBlockOrBodiedSyncBlock = exports.findSyncBlock = exports.findBodiedSyncBlock = exports.canBeConvertedToSyncBlock = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _editorTables = require("@atlaskit/editor-tables");
 var findSyncBlock = exports.findSyncBlock = function findSyncBlock(state, selection) {
   var syncBlock = state.schema.nodes.syncBlock;
@@ -22,11 +22,22 @@ var findSyncBlockOrBodiedSyncBlock = exports.findSyncBlockOrBodiedSyncBlock = fu
 var isBodiedSyncBlockNode = exports.isBodiedSyncBlockNode = function isBodiedSyncBlockNode(node, bodiedSyncBlock) {
   return node.type === bodiedSyncBlock;
 };
+var UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock']);
+
+/**
+* Checks whether the selection can be converted to sync block
+*
+* @param selection - the current editor selection to validate for sync block conversion
+* @returns A fragment containing the content to include in the synced block,
+* stripping out unsupported marks (breakout on codeblock/expand/layout), as well as from and to positions,
+* or false if conversion is not possible
+*/
 var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  var schema = selection.$from.doc.type.schema;
+  var nodes = schema.nodes;
   var from = selection.from;
   var to = selection.to;
-  var depth = selection.$from.depth;
-  var contentToInclude;
+  var contentToInclude = selection.content().content;
   if (selection instanceof _editorTables.CellSelection) {
     var table = (0, _editorTables.findTable)(selection);
     if (!table) {
@@ -35,35 +46,41 @@ var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function can
     contentToInclude = _model.Fragment.from([table.node]);
     from = table.pos;
     to = table.pos + table.node.nodeSize;
-    depth = selection.$from.doc.resolve(table.pos).depth;
-  } else {
-    contentToInclude = _model.Fragment.from(selection.content().content);
-  }
-
-  // sync blocks can't be nested
-  if (depth > 1) {
-    return false;
+  } else if (selection instanceof _state.TextSelection) {
+    var trueParent = (0, _utils.findParentNodeOfType)([nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.blockquote])(selection);
+    if (trueParent) {
+      contentToInclude = _model.Fragment.from([trueParent.node]);
+      from = trueParent.pos;
+      to = trueParent.pos + trueParent.node.nodeSize;
+    }
   }
-  var syncBlockSchema = (0, _editorSyncedBlockProvider.getDefaultSyncBlockSchema)();
   var canBeConverted = true;
   selection.$from.doc.nodesBetween(from, to, function (node) {
-    if (!(node.type.name in syncBlockSchema.nodes)) {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
       canBeConverted = false;
       return false;
     }
-    node.marks.forEach(function (mark) {
-      if (!(mark.type.name in syncBlockSchema.marks)) {
-        canBeConverted = false;
-        return false;
-      }
-    });
   });
   if (!canBeConverted) {
     return false;
   }
+  contentToInclude = removeBreakoutMarks(contentToInclude);
   return {
     contentToInclude: contentToInclude,
     from: from,
     to: to
   };
+};
+var removeBreakoutMarks = function removeBreakoutMarks(content) {
+  var nodes = [];
+
+  // we only need to recurse at the top level, because breakout has to be on a top level
+  content.forEach(function (node) {
+    var filteredMarks = node.marks.filter(function (mark) {
+      return mark.type.name !== 'breakout';
+    });
+    var newNode = node.type.create(node.attrs, node.content, filteredMarks);
+    nodes.push(newNode);
+  });
+  return _model.Fragment.from(nodes);
 };

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -1,25 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreateSyncedBlockDropdownItem = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _utils = require("../pm-plugins/utils/utils");
+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 CreateSyncedBlockDropdownItem = exports.CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
-  var _api$selection;
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
-  var canCreateSyncBlock = selection && (0, _utils.canBeConvertedToSyncBlock)(selection);
-  if (!canCreateSyncBlock) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection', 'blockControls'], function (states) {
+      var _states$selectionStat, _states$blockControls;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+      };
+    }),
+    selection = _useSharedPluginState.selection,
+    activeNode = _useSharedPluginState.activeNode;
+  var isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+  var canBeConverted = (0, _react.useMemo)(function () {
+    return selection && (0, _utils.canBeConvertedToSyncBlock)(selection);
+  }, [selection]);
+  if (isNested || !canBeConverted) {
     return null;
   }
   var onClick = function onClick() {
@@ -37,7 +50,7 @@ var CreateSyncedBlockDropdownItem = exports.CreateSyncedBlockDropdownItem = func
   }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     alignItems: "center",
     gap: "space.050"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, selection !== null && selection !== void 0 && selection.empty ? formatMessage(_messages.blockMenuMessages.createSyncedBlock) : formatMessage(_messages.blockMenuMessages.convertToSyncedBlock)), /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage(_messages.blockMenuMessages.createSyncedBlock)), /*#__PURE__*/_react.default.createElement(_lozenge.default, {
     appearance: "new"
   }, formatMessage(_messages.blockMenuMessages.newLozenge))));
 };

package/dist/es2019/editor-commands/index.js

@@ -1,5 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export const createSyncedBlock = ({
@@ -48,7 +49,10 @@ export const createSyncedBlock = ({
     // Save the new node with empty content to backend
     // This is so that the node can be copied and referenced without the source being saved/published
     syncBlockStore.createBodiedSyncBlockNode(attrs);
-    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
+    tr.replaceWith(conversionInfo.from > 0 ? conversionInfo.from - 1 : 0, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
+
+    // set selection to the end of the previous selection + 1 for the position taken up by the start of the new synced block
+    tr.setSelection(TextSelection.create(tr.doc, conversionInfo.to + 1));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/es2019/pm-plugins/utils/utils.js

@@ -1,6 +1,6 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { getDefaultSyncBlockSchema } from '@atlaskit/editor-synced-block-provider';
 import { CellSelection, findTable } from '@atlaskit/editor-tables';
 export const findSyncBlock = (state, selection) => {
   const {
@@ -18,11 +18,24 @@ export const findSyncBlockOrBodiedSyncBlock = (state, selection) => {
   return findSyncBlock(state, selection) || findBodiedSyncBlock(state, selection);
 };
 export const isBodiedSyncBlockNode = (node, bodiedSyncBlock) => node.type === bodiedSyncBlock;
+const UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock']);
+
+/**
+* Checks whether the selection can be converted to sync block
+*
+* @param selection - the current editor selection to validate for sync block conversion
+* @returns A fragment containing the content to include in the synced block,
+* stripping out unsupported marks (breakout on codeblock/expand/layout), as well as from and to positions,
+* or false if conversion is not possible
+*/
 export const canBeConvertedToSyncBlock = selection => {
+  const schema = selection.$from.doc.type.schema;
+  const {
+    nodes
+  } = schema;
   let from = selection.from;
   let to = selection.to;
-  let depth = selection.$from.depth;
-  let contentToInclude;
+  let contentToInclude = selection.content().content;
   if (selection instanceof CellSelection) {
     const table = findTable(selection);
     if (!table) {
@@ -31,35 +44,39 @@ export const canBeConvertedToSyncBlock = selection => {
     contentToInclude = Fragment.from([table.node]);
     from = table.pos;
     to = table.pos + table.node.nodeSize;
-    depth = selection.$from.doc.resolve(table.pos).depth;
-  } else {
-    contentToInclude = Fragment.from(selection.content().content);
-  }
-
-  // sync blocks can't be nested
-  if (depth > 1) {
-    return false;
+  } else if (selection instanceof TextSelection) {
+    const trueParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.blockquote])(selection);
+    if (trueParent) {
+      contentToInclude = Fragment.from([trueParent.node]);
+      from = trueParent.pos;
+      to = trueParent.pos + trueParent.node.nodeSize;
+    }
   }
-  const syncBlockSchema = getDefaultSyncBlockSchema();
   let canBeConverted = true;
   selection.$from.doc.nodesBetween(from, to, node => {
-    if (!(node.type.name in syncBlockSchema.nodes)) {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
       canBeConverted = false;
       return false;
     }
-    node.marks.forEach(mark => {
-      if (!(mark.type.name in syncBlockSchema.marks)) {
-        canBeConverted = false;
-        return false;
-      }
-    });
   });
   if (!canBeConverted) {
     return false;
   }
+  contentToInclude = removeBreakoutMarks(contentToInclude);
   return {
     contentToInclude,
     from,
     to
   };
+};
+const removeBreakoutMarks = content => {
+  const nodes = [];
+
+  // we only need to recurse at the top level, because breakout has to be on a top level
+  content.forEach(node => {
+    const filteredMarks = node.marks.filter(mark => mark.type.name !== 'breakout');
+    const newNode = node.type.create(node.attrs, node.content, filteredMarks);
+    nodes.push(newNode);
+  });
+  return Fragment.from(nodes);
 };

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
@@ -8,13 +9,22 @@ import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export const CreateSyncedBlockDropdownItem = ({
   api
 }) => {
-  var _api$selection, _api$selection$shared, _api$selection$shared2;
   const {
     formatMessage
   } = useIntl();
-  const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
-  const canCreateSyncBlock = selection && canBeConvertedToSyncBlock(selection);
-  if (!canCreateSyncBlock) {
+  const {
+    selection,
+    activeNode
+  } = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], states => {
+    var _states$selectionStat, _states$blockControls;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+    };
+  });
+  const isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+  const canBeConverted = useMemo(() => selection && canBeConvertedToSyncBlock(selection), [selection]);
+  if (isNested || !canBeConverted) {
     return null;
   }
   const onClick = () => {
@@ -32,7 +42,7 @@ export const CreateSyncedBlockDropdownItem = ({
   }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     gap: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, null, selection !== null && selection !== void 0 && selection.empty ? formatMessage(blockMenuMessages.createSyncedBlock) : formatMessage(blockMenuMessages.convertToSyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
+  }, /*#__PURE__*/React.createElement(Text, null, formatMessage(blockMenuMessages.createSyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
     appearance: "new"
   }, formatMessage(blockMenuMessages.newLozenge))));
 };

package/dist/esm/editor-commands/index.js

@@ -1,5 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export var createSyncedBlock = function createSyncedBlock(_ref) {
@@ -42,7 +43,10 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     // Save the new node with empty content to backend
     // This is so that the node can be copied and referenced without the source being saved/published
     syncBlockStore.createBodiedSyncBlockNode(_attrs);
-    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
+    tr.replaceWith(conversionInfo.from > 0 ? conversionInfo.from - 1 : 0, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
+
+    // set selection to the end of the previous selection + 1 for the position taken up by the start of the new synced block
+    tr.setSelection(TextSelection.create(tr.doc, conversionInfo.to + 1));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/esm/pm-plugins/utils/utils.js

@@ -1,6 +1,6 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { getDefaultSyncBlockSchema } from '@atlaskit/editor-synced-block-provider';
 import { CellSelection, findTable } from '@atlaskit/editor-tables';
 export var findSyncBlock = function findSyncBlock(state, selection) {
   var syncBlock = state.schema.nodes.syncBlock;
@@ -16,11 +16,22 @@ export var findSyncBlockOrBodiedSyncBlock = function findSyncBlockOrBodiedSyncBl
 export var isBodiedSyncBlockNode = function isBodiedSyncBlockNode(node, bodiedSyncBlock) {
   return node.type === bodiedSyncBlock;
 };
+var UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock']);
+
+/**
+* Checks whether the selection can be converted to sync block
+*
+* @param selection - the current editor selection to validate for sync block conversion
+* @returns A fragment containing the content to include in the synced block,
+* stripping out unsupported marks (breakout on codeblock/expand/layout), as well as from and to positions,
+* or false if conversion is not possible
+*/
 export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  var schema = selection.$from.doc.type.schema;
+  var nodes = schema.nodes;
   var from = selection.from;
   var to = selection.to;
-  var depth = selection.$from.depth;
-  var contentToInclude;
+  var contentToInclude = selection.content().content;
   if (selection instanceof CellSelection) {
     var table = findTable(selection);
     if (!table) {
@@ -29,35 +40,41 @@ export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(select
     contentToInclude = Fragment.from([table.node]);
     from = table.pos;
     to = table.pos + table.node.nodeSize;
-    depth = selection.$from.doc.resolve(table.pos).depth;
-  } else {
-    contentToInclude = Fragment.from(selection.content().content);
-  }
-
-  // sync blocks can't be nested
-  if (depth > 1) {
-    return false;
+  } else if (selection instanceof TextSelection) {
+    var trueParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.blockquote])(selection);
+    if (trueParent) {
+      contentToInclude = Fragment.from([trueParent.node]);
+      from = trueParent.pos;
+      to = trueParent.pos + trueParent.node.nodeSize;
+    }
   }
-  var syncBlockSchema = getDefaultSyncBlockSchema();
   var canBeConverted = true;
   selection.$from.doc.nodesBetween(from, to, function (node) {
-    if (!(node.type.name in syncBlockSchema.nodes)) {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
       canBeConverted = false;
       return false;
     }
-    node.marks.forEach(function (mark) {
-      if (!(mark.type.name in syncBlockSchema.marks)) {
-        canBeConverted = false;
-        return false;
-      }
-    });
   });
   if (!canBeConverted) {
     return false;
   }
+  contentToInclude = removeBreakoutMarks(contentToInclude);
   return {
     contentToInclude: contentToInclude,
     from: from,
     to: to
   };
+};
+var removeBreakoutMarks = function removeBreakoutMarks(content) {
+  var nodes = [];
+
+  // we only need to recurse at the top level, because breakout has to be on a top level
+  content.forEach(function (node) {
+    var filteredMarks = node.marks.filter(function (mark) {
+      return mark.type.name !== 'breakout';
+    });
+    var newNode = node.type.create(node.attrs, node.content, filteredMarks);
+    nodes.push(newNode);
+  });
+  return Fragment.from(nodes);
 };

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -1,18 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
-  var _api$selection;
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
-  var canCreateSyncBlock = selection && canBeConvertedToSyncBlock(selection);
-  if (!canCreateSyncBlock) {
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], function (states) {
+      var _states$selectionStat, _states$blockControls;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+      };
+    }),
+    selection = _useSharedPluginState.selection,
+    activeNode = _useSharedPluginState.activeNode;
+  var isNested = activeNode && activeNode.rootPos !== activeNode.pos;
+  var canBeConverted = useMemo(function () {
+    return selection && canBeConvertedToSyncBlock(selection);
+  }, [selection]);
+  if (isNested || !canBeConverted) {
     return null;
   }
   var onClick = function onClick() {
@@ -30,7 +41,7 @@ export var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownIte
   }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     gap: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, null, selection !== null && selection !== void 0 && selection.empty ? formatMessage(blockMenuMessages.createSyncedBlock) : formatMessage(blockMenuMessages.convertToSyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
+  }, /*#__PURE__*/React.createElement(Text, null, formatMessage(blockMenuMessages.createSyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
     appearance: "new"
   }, formatMessage(blockMenuMessages.newLozenge))));
 };

package/dist/types/pm-plugins/utils/utils.d.ts

@@ -1,6 +1,6 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState, type Selection } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
 export declare const findBodiedSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
@@ -11,4 +11,12 @@ export interface SyncBlockConversionInfo {
     from: number;
     to: number;
 }
+/**
+* Checks whether the selection can be converted to sync block
+*
+* @param selection - the current editor selection to validate for sync block conversion
+* @returns A fragment containing the content to include in the synced block,
+* stripping out unsupported marks (breakout on codeblock/expand/layout), as well as from and to positions,
+* or false if conversion is not possible
+*/
 export declare const canBeConvertedToSyncBlock: (selection: Selection) => SyncBlockConversionInfo | false;

package/dist/types-ts4.5/pm-plugins/utils/utils.d.ts

@@ -1,6 +1,6 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState, type Selection } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
 export declare const findBodiedSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
@@ -11,4 +11,12 @@ export interface SyncBlockConversionInfo {
     from: number;
     to: number;
 }
+/**
+* Checks whether the selection can be converted to sync block
+*
+* @param selection - the current editor selection to validate for sync block conversion
+* @returns A fragment containing the content to include in the synced block,
+* stripping out unsupported marks (breakout on codeblock/expand/layout), as well as from and to positions,
+* or false if conversion is not possible
+*/
 export declare const canBeConvertedToSyncBlock: (selection: Selection) => SyncBlockConversionInfo | false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.2.1",
+	"version": "4.2.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
 		"@atlaskit/icon": "28.5.4",
-		"@atlaskit/icon-lab": "^5.11.0",
+		"@atlaskit/icon-lab": "^5.12.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/modal-dialog": "^14.6.0",