@atlaskit/editor-plugin-synced-block 3.3.2 → 3.3.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.3.3
+
+### Patch Changes
+
+- [`e053b5e610ac2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e053b5e610ac2) -
+  [ux] EDITOR-1652 add convert to sync block to block menu
+- Updated dependencies
+
 ## 3.3.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/nodeviews/syncedBlock.js

@@ -70,6 +70,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function setInnerEditorView(editorView) {
       var _this$options;
       // set inner editor view
+      this.syncBlockStore.setSyncBlockNestedEditorView(editorView);
       var nodes = [(0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false)];
       (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.fetchNodesData(nodes).then(function (data) {
         var _data$;
@@ -162,6 +163,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (this.fetchIntervalId) {
         window.clearInterval(this.fetchIntervalId);
       }
+      this.syncBlockStore.setSyncBlockNestedEditorView(undefined);
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }

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

@@ -12,25 +12,47 @@ var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider
 var _utils2 = require("./utils/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(tr, syncBlockStore, typeAheadInsert) {
-  var syncBlock = tr.doc.type.schema.nodes.syncBlock;
+var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
+  var tr = _ref.tr,
+    syncBlockStore = _ref.syncBlockStore,
+    typeAheadInsert = _ref.typeAheadInsert;
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    syncBlock = _tr$doc$type$schema$n.syncBlock,
+    doc = _tr$doc$type$schema$n.doc;
   var syncBlockNode = syncBlockStore.createSyncBlockNode();
+  var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
+  if (!node) {
+    return false;
+  }
 
-  // If the selection is empty, we want to insert the panel on a new line
+  // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
-    if (!node) {
-      return false;
-    }
     if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
       tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    var _safeInsert;
-    // TODO: EDITOR-1653 - put selection inside the sync block if possible
-    (_safeInsert = (0, _utils.safeInsert)(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
+    var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
+    if (conversionInfo) {
+      tr.replaceWith(conversionInfo.from, conversionInfo.to, node).scrollIntoView();
+      var innerNodeJson = doc.create({}, conversionInfo.contentToInclude).toJSON();
+
+      // TMP solution to wait for the nested editor view to be set
+      // this will be removed once we have a proper architecture settled
+      setTimeout(function () {
+        var editorView = syncBlockStore.getSyncBlockNestedEditorView();
+        if (editorView) {
+          var innerTr = editorView.state.tr;
+          var innerNode = editorView.state.schema.nodeFromJSON(innerNodeJson);
+          editorView.dispatch(innerTr.replaceWith(0, editorView.state.doc.nodeSize - 2, innerNode));
+        }
+      }, 1000);
+    } else {
+      var _safeInsert;
+      // still insert an empty sync block if conversion is not possible
+      (_safeInsert = (0, _utils.safeInsert)(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
+    }
   }
   return tr;
 };

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

@@ -42,6 +42,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       return {
         destroy: function destroy() {
           syncBlockStore.setEditorView(undefined);
+          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },

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

@@ -3,9 +3,57 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findSyncBlock = void 0;
+exports.findSyncBlock = exports.canBeConvertedToSyncBlock = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
 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;
   return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection || state.selection) || (0, _utils.findParentNodeOfType)(syncBlock)(selection || state.selection);
+};
+var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  var from = selection.from;
+  var to = selection.to;
+  var depth = selection.$from.depth;
+  var contentToInclude;
+  if (selection instanceof _editorTables.CellSelection) {
+    var table = (0, _editorTables.findTable)(selection);
+    if (!table) {
+      return false;
+    }
+    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;
+  }
+  var syncBlockSchema = (0, _editorSyncedBlockProvider.getDefaultSyncBlockSchema)();
+  var canBeConverted = true;
+  selection.$from.doc.nodesBetween(from, to, function (node) {
+    if (!(node.type.name in syncBlockSchema.nodes)) {
+      canBeConverted = false;
+      return false;
+    }
+    node.marks.forEach(function (mark) {
+      if (!(mark.type.name in syncBlockSchema.marks)) {
+        canBeConverted = false;
+        return false;
+      }
+    });
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  return {
+    contentToInclude: contentToInclude,
+    from: from,
+    to: to
+  };
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -41,7 +41,11 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       insertSyncedBlock: function insertSyncedBlock() {
         return function (_ref2) {
           var tr = _ref2.tr;
-          return (0, _actions.createSyncedBlock)(tr, syncBlockStore) || null;
+          return (0, _actions.createSyncedBlock)({
+            tr: tr,
+            syncBlockStore: syncBlockStore,
+            dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider
+          }) || null;
         };
       }
     },
@@ -61,7 +65,12 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
             });
           },
           action: function action(insert, state) {
-            return (0, _actions.createSyncedBlock)(state.tr, syncBlockStore, insert);
+            return (0, _actions.createSyncedBlock)({
+              tr: state.tr,
+              syncBlockStore: syncBlockStore,
+              dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider,
+              typeAheadInsert: insert
+            });
           }
         }];
       },

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -9,13 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _utils = require("../pm-plugins/utils/utils");
 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;
-  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+  var canCreateSyncBlock = selection && (0, _utils.canBeConvertedToSyncBlock)(selection);
+  if (!canCreateSyncBlock) {
     return null;
   }
   var onClick = function onClick() {
@@ -27,5 +29,5 @@ var CreateSyncedBlockDropdownItem = exports.CreateSyncedBlockDropdownItem = func
       label: ""
     }),
     onClick: onClick
-  }, formatMessage(_messages.blockMenuMessages.createSyncedBlock));
+  }, selection !== null && selection !== void 0 && selection.empty ? formatMessage(_messages.blockMenuMessages.createSyncedBlock) : formatMessage(_messages.blockMenuMessages.convertToSyncedBlock));
 };

package/dist/es2019/nodeviews/syncedBlock.js

@@ -44,6 +44,7 @@ class SyncBlock extends ReactNodeView {
   setInnerEditorView(editorView) {
     var _this$options, _this$options$dataPro;
     // set inner editor view
+    this.syncBlockStore.setSyncBlockNestedEditorView(editorView);
     const nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
     (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$dataPro = _this$options.dataProvider) === null || _this$options$dataPro === void 0 ? void 0 : _this$options$dataPro.fetchNodesData(nodes).then(data => {
       var _data$;
@@ -118,6 +119,7 @@ class SyncBlock extends ReactNodeView {
     if (this.fetchIntervalId) {
       window.clearInterval(this.fetchIntervalId);
     }
+    this.syncBlockStore.setSyncBlockNestedEditorView(undefined);
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
     super.destroy();
   }

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

@@ -1,34 +1,56 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
-import { findSyncBlock } from './utils/utils';
-export const createSyncedBlock = (tr, syncBlockStore, typeAheadInsert) => {
+import { canBeConvertedToSyncBlock, findSyncBlock } from './utils/utils';
+export const createSyncedBlock = ({
+  tr,
+  syncBlockStore,
+  typeAheadInsert
+}) => {
   const {
     schema: {
       nodes: {
-        syncBlock
+        syncBlock,
+        doc
       }
     }
   } = tr.doc.type;
   const syncBlockNode = syncBlockStore.createSyncBlockNode();
+  const node = syncBlock.createAndFill({
+    ...syncBlockNode.attrs
+  });
+  if (!node) {
+    return false;
+  }
 
-  // If the selection is empty, we want to insert the panel on a new line
+  // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    const node = syncBlock.createAndFill({
-      ...syncBlockNode.attrs
-    });
-    if (!node) {
-      return false;
-    }
     if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
       tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    var _safeInsert;
-    // TODO: EDITOR-1653 - put selection inside the sync block if possible
-    (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 ? void 0 : _safeInsert.scrollIntoView();
+    const conversionInfo = canBeConvertedToSyncBlock(tr.selection);
+    if (conversionInfo) {
+      tr.replaceWith(conversionInfo.from, conversionInfo.to, node).scrollIntoView();
+      const innerNodeJson = doc.create({}, conversionInfo.contentToInclude).toJSON();
+
+      // TMP solution to wait for the nested editor view to be set
+      // this will be removed once we have a proper architecture settled
+      setTimeout(() => {
+        const editorView = syncBlockStore.getSyncBlockNestedEditorView();
+        if (editorView) {
+          const innerTr = editorView.state.tr;
+          const innerNode = editorView.state.schema.nodeFromJSON(innerNodeJson);
+          editorView.dispatch(innerTr.replaceWith(0, editorView.state.doc.nodeSize - 2, innerNode));
+        }
+      }, 1000);
+    } else {
+      var _safeInsert;
+      // still insert an empty sync block if conversion is not possible
+      (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 ? void 0 : _safeInsert.scrollIntoView();
+    }
   }
   return tr;
 };

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

@@ -36,6 +36,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       return {
         destroy() {
           syncBlockStore.setEditorView(undefined);
+          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },

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

@@ -1,7 +1,55 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 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 {
     syncBlock
   } = state.schema.nodes;
   return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
+};
+export const canBeConvertedToSyncBlock = selection => {
+  let from = selection.from;
+  let to = selection.to;
+  let depth = selection.$from.depth;
+  let contentToInclude;
+  if (selection instanceof CellSelection) {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    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;
+  }
+  const syncBlockSchema = getDefaultSyncBlockSchema();
+  let canBeConverted = true;
+  selection.$from.doc.nodesBetween(from, to, node => {
+    if (!(node.type.name in syncBlockSchema.nodes)) {
+      canBeConverted = false;
+      return false;
+    }
+    node.marks.forEach(mark => {
+      if (!(mark.type.name in syncBlockSchema.marks)) {
+        canBeConverted = false;
+        return false;
+      }
+    });
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  return {
+    contentToInclude,
+    from,
+    to
+  };
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -32,7 +32,11 @@ export const syncedBlockPlugin = ({
     commands: {
       insertSyncedBlock: () => ({
         tr
-      }) => createSyncedBlock(tr, syncBlockStore) || null
+      }) => createSyncedBlock({
+        tr,
+        syncBlockStore,
+        dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider
+      }) || null
     },
     pluginsOptions: {
       quickInsert: ({
@@ -48,7 +52,12 @@ export const syncedBlockPlugin = ({
           label: formatMessage(blockTypeMessages.syncedBlock)
         }),
         action: (insert, state) => {
-          return createSyncedBlock(state.tr, syncBlockStore, insert);
+          return createSyncedBlock({
+            tr: state.tr,
+            syncBlockStore,
+            dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider,
+            typeAheadInsert: insert
+          });
         }
       }],
       floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory, api, syncBlockStore)

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export const CreateSyncedBlockDropdownItem = ({
   api
 }) => {
@@ -10,7 +11,8 @@ export const CreateSyncedBlockDropdownItem = ({
     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;
-  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+  const canCreateSyncBlock = selection && canBeConvertedToSyncBlock(selection);
+  if (!canCreateSyncBlock) {
     return null;
   }
   const onClick = () => {
@@ -22,5 +24,5 @@ export const CreateSyncedBlockDropdownItem = ({
       label: ""
     }),
     onClick: onClick
-  }, formatMessage(blockMenuMessages.createSyncedBlock));
+  }, selection !== null && selection !== void 0 && selection.empty ? formatMessage(blockMenuMessages.createSyncedBlock) : formatMessage(blockMenuMessages.convertToSyncedBlock));
 };

package/dist/esm/nodeviews/syncedBlock.js

@@ -63,6 +63,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function setInnerEditorView(editorView) {
       var _this$options;
       // set inner editor view
+      this.syncBlockStore.setSyncBlockNestedEditorView(editorView);
       var nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
       (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.fetchNodesData(nodes).then(function (data) {
         var _data$;
@@ -155,6 +156,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (this.fetchIntervalId) {
         window.clearInterval(this.fetchIntervalId);
       }
+      this.syncBlockStore.setSyncBlockNestedEditorView(undefined);
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }

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

@@ -4,26 +4,48 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
-import { findSyncBlock } from './utils/utils';
-export var createSyncedBlock = function createSyncedBlock(tr, syncBlockStore, typeAheadInsert) {
-  var syncBlock = tr.doc.type.schema.nodes.syncBlock;
+import { canBeConvertedToSyncBlock, findSyncBlock } from './utils/utils';
+export var createSyncedBlock = function createSyncedBlock(_ref) {
+  var tr = _ref.tr,
+    syncBlockStore = _ref.syncBlockStore,
+    typeAheadInsert = _ref.typeAheadInsert;
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    syncBlock = _tr$doc$type$schema$n.syncBlock,
+    doc = _tr$doc$type$schema$n.doc;
   var syncBlockNode = syncBlockStore.createSyncBlockNode();
+  var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
+  if (!node) {
+    return false;
+  }
 
-  // If the selection is empty, we want to insert the panel on a new line
+  // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
-    if (!node) {
-      return false;
-    }
     if (typeAheadInsert) {
       tr = typeAheadInsert(node);
     } else {
       tr = tr.replaceSelectionWith(node).scrollIntoView();
     }
   } else {
-    var _safeInsert;
-    // TODO: EDITOR-1653 - put selection inside the sync block if possible
-    (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
+    var conversionInfo = canBeConvertedToSyncBlock(tr.selection);
+    if (conversionInfo) {
+      tr.replaceWith(conversionInfo.from, conversionInfo.to, node).scrollIntoView();
+      var innerNodeJson = doc.create({}, conversionInfo.contentToInclude).toJSON();
+
+      // TMP solution to wait for the nested editor view to be set
+      // this will be removed once we have a proper architecture settled
+      setTimeout(function () {
+        var editorView = syncBlockStore.getSyncBlockNestedEditorView();
+        if (editorView) {
+          var innerTr = editorView.state.tr;
+          var innerNode = editorView.state.schema.nodeFromJSON(innerNodeJson);
+          editorView.dispatch(innerTr.replaceWith(0, editorView.state.doc.nodeSize - 2, innerNode));
+        }
+      }, 1000);
+    } else {
+      var _safeInsert;
+      // still insert an empty sync block if conversion is not possible
+      (_safeInsert = safeInsert(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
+    }
   }
   return tr;
 };

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

@@ -36,6 +36,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       return {
         destroy: function destroy() {
           syncBlockStore.setEditorView(undefined);
+          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },

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

@@ -1,5 +1,53 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 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;
   return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
+};
+export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  var from = selection.from;
+  var to = selection.to;
+  var depth = selection.$from.depth;
+  var contentToInclude;
+  if (selection instanceof CellSelection) {
+    var table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    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;
+  }
+  var syncBlockSchema = getDefaultSyncBlockSchema();
+  var canBeConverted = true;
+  selection.$from.doc.nodesBetween(from, to, function (node) {
+    if (!(node.type.name in syncBlockSchema.nodes)) {
+      canBeConverted = false;
+      return false;
+    }
+    node.marks.forEach(function (mark) {
+      if (!(mark.type.name in syncBlockSchema.marks)) {
+        canBeConverted = false;
+        return false;
+      }
+    });
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  return {
+    contentToInclude: contentToInclude,
+    from: from,
+    to: to
+  };
 };

package/dist/esm/syncedBlockPlugin.js

@@ -34,7 +34,11 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       insertSyncedBlock: function insertSyncedBlock() {
         return function (_ref2) {
           var tr = _ref2.tr;
-          return createSyncedBlock(tr, syncBlockStore) || null;
+          return createSyncedBlock({
+            tr: tr,
+            syncBlockStore: syncBlockStore,
+            dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider
+          }) || null;
         };
       }
     },
@@ -54,7 +58,12 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
             });
           },
           action: function action(insert, state) {
-            return createSyncedBlock(state.tr, syncBlockStore, insert);
+            return createSyncedBlock({
+              tr: state.tr,
+              syncBlockStore: syncBlockStore,
+              dataProvider: config === null || config === void 0 ? void 0 : config.dataProvider,
+              typeAheadInsert: insert
+            });
           }
         }];
       },

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -2,13 +2,15 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+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;
-  if (!(selection !== null && selection !== void 0 && selection.empty)) {
+  var canCreateSyncBlock = selection && canBeConvertedToSyncBlock(selection);
+  if (!canCreateSyncBlock) {
     return null;
   }
   var onClick = function onClick() {
@@ -20,5 +22,5 @@ export var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownIte
       label: ""
     }),
     onClick: onClick
-  }, formatMessage(blockMenuMessages.createSyncedBlock));
+  }, selection !== null && selection !== void 0 && selection.empty ? formatMessage(blockMenuMessages.createSyncedBlock) : formatMessage(blockMenuMessages.convertToSyncedBlock));
 };

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

@@ -1,8 +1,15 @@
 import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockDataProvider, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (tr: Transaction, syncBlockStore: SyncBlockStoreManager, typeAheadInsert?: TypeAheadInsert) => false | Transaction;
+type createSyncedBlockProps = {
+    dataProvider?: SyncBlockDataProvider;
+    syncBlockStore: SyncBlockStoreManager;
+    tr: Transaction;
+    typeAheadInsert?: TypeAheadInsert;
+};
+export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, }: createSyncedBlockProps) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboard: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (_api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+export {};

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

@@ -1,3 +1,10 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export interface SyncBlockConversionInfo {
+    contentToInclude: Fragment;
+    from: number;
+    to: number;
+}
+export declare const canBeConvertedToSyncBlock: (selection: Selection) => SyncBlockConversionInfo | false;

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

@@ -1,8 +1,15 @@
 import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockDataProvider, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (tr: Transaction, syncBlockStore: SyncBlockStoreManager, typeAheadInsert?: TypeAheadInsert) => false | Transaction;
+type createSyncedBlockProps = {
+    dataProvider?: SyncBlockDataProvider;
+    syncBlockStore: SyncBlockStoreManager;
+    tr: Transaction;
+    typeAheadInsert?: TypeAheadInsert;
+};
+export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, }: createSyncedBlockProps) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboard: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (_api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+export {};

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

@@ -1,3 +1,10 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export interface SyncBlockConversionInfo {
+    contentToInclude: Fragment;
+    from: number;
+    to: number;
+}
+export declare const canBeConvertedToSyncBlock: (selection: Selection) => SyncBlockConversionInfo | false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.3.2",
+	"version": "3.3.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,6 +38,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-synced-block-provider": "^0.5.0",
+		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.14.0",
 		"@atlaskit/icon": "28.5.1",
 		"@atlaskit/modal-dialog": "^14.4.0",
@@ -45,7 +46,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.8.0",
+		"@atlaskit/editor-common": "^110.9.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {