@atlaskit/editor-plugin-synced-block 3.0.2 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.0.3
+
+### Patch Changes
+
+- [`dd19fd49edc58`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd19fd49edc58) -
+  Added sync block quick insert
+- Updated dependencies
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/syncedBlock.js

@@ -48,12 +48,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
     (0, _classCallCheck2.default)(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
-    var _props$node$attrs = props.node.attrs,
-      resourceId = _props$node$attrs.resourceId,
-      localId = _props$node$attrs.localId;
-    // Temporary solution to identify the source
-    _this.isSource = resourceId === localId;
     _this.options = props.options;
+    _this.syncBlockStore = props.syncBlockStore;
     return _this;
   }
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
@@ -64,6 +60,11 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       domRef.classList.add(_syncBlock.SyncBlockSharedCssClassName.prefix);
       return domRef;
     }
+  }, {
+    key: "isSource",
+    value: function isSource() {
+      return this.syncBlockStore.isSourceBlock(this.node);
+    }
   }, {
     key: "handleContentChanges",
     value: function handleContentChanges(updatedDoc) {
@@ -72,7 +73,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         return;
       }
       // write data
-      var node = (0, _editorSyncedBlockProvider.createSyncBlockNode)(this.node, false);
+      var node = (0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false);
       (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.syncedBlockProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
         content: updatedDoc.toJSON()
       }]);
@@ -82,7 +83,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function setInnerEditorView(editorView) {
       var _this$options2;
       // set inner editor view
-      var nodes = [(0, _editorSyncedBlockProvider.createSyncBlockNode)(this.node, false)];
+      var nodes = [(0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false)];
       (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.syncedBlockProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
@@ -141,7 +142,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      if (this.isSource) {
+      if (this.isSource()) {
         return this.renderEditor();
       }
       return this.renderRenderer();
@@ -198,7 +199,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
   var options = _ref.options,
     pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api;
+    api = _ref.api,
+    syncBlockStore = _ref.syncBlockStore;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -209,7 +211,8 @@ var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher
+      eventDispatcher: eventDispatcher,
+      syncBlockStore: syncBlockStore
     }).init();
   };
 };

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

@@ -1,18 +1,44 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _insert = require("@atlaskit/editor-common/insert");
+var _utils = require("@atlaskit/editor-common/utils");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _utils2 = require("./utils/utils");
-var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(state) {
-  var tr = state.tr,
-    syncBlock = state.schema.nodes.syncBlock;
-  var node = (0, _editorSyncedBlockProvider.createSyncBlockPMNode)(syncBlock);
-  (0, _utils.safeInsert)(node)(tr);
+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(typeAheadInsert, state, syncBlockStore) {
+  var syncBlock = state.schema.nodes.syncBlock;
+  var tr;
+  var syncBlockNode = syncBlockStore.createSyncBlockNode();
+
+  // If the selection is empty, we want to insert the panel on a new line
+  if (state.selection.empty) {
+    var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
+    if (!node) {
+      return false;
+    }
+    if (typeAheadInsert !== undefined) {
+      // If the type-ahead insert is provided, we should use that to insert the node
+      tr = typeAheadInsert(node);
+    } else {
+      var _insertSelectedItem;
+      // Otherwise we can use insertSelectedItem to insert the node
+      tr = (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+    }
+  } else {
+    tr = (0, _utils.createWrapSelectionTransaction)({
+      state: state,
+      type: syncBlock,
+      nodeAttributes: _objectSpread({}, syncBlockNode.attrs)
+    });
+  }
   return tr;
 };
 var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

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

@@ -32,7 +32,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
           options: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api
+          api: api,
+          syncBlockStore: syncBlockStore
         })
       }
     },

package/dist/cjs/syncedBlockPlugin.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.syncedBlockPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
-var _smartLink = _interopRequireDefault(require("@atlaskit/icon/core/smart-link"));
 var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
 var _ContentComponent = require("./ui/ContentComponent");
@@ -34,26 +35,27 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       }];
     },
     pluginsOptions: {
-      quickInsert: function quickInsert() {
+      quickInsert: function quickInsert(_ref2) {
+        var formatMessage = _ref2.formatMessage;
         return [{
           id: 'syncBlock',
-          title: 'Synced Block',
-          description: 'Create a synced block',
+          title: formatMessage(_messages.blockTypeMessages.syncedBlock),
+          description: formatMessage(_messages.blockTypeMessages.syncedBlockDescription),
           priority: 800,
-          keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block'],
+          keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
           keyshortcut: '',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_smartLink.default, {
-              label: "Synced Block"
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconSyncBlock, {
+              label: formatMessage(_messages.blockTypeMessages.syncedBlock)
             });
           },
-          action: function action(_insert, state) {
-            return (0, _actions.createSyncedBlock)(state);
+          action: function action(insert, state) {
+            return (0, _actions.createSyncedBlock)(insert, state, syncBlockStore);
           }
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory, api);
+        return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory, api, syncBlockStore);
       }
     },
     contentComponent: function contentComponent() {

package/dist/cjs/ui/floating-toolbar.js

@@ -24,6 +24,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
   var api = arguments.length > 4 ? arguments[4] : undefined;
+  var syncBlockStore = arguments.length > 5 ? arguments[5] : undefined;
   var syncBlockObject = (0, _utils2.findSyncBlock)(state);
   if (!syncBlockObject) {
     return;
@@ -51,7 +52,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     onClick: (0, _actions.copySyncedBlockReferenceToClipboard)(api)
   }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
   items.push(copyButton);
-  if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
+  if (!syncBlockStore.isSourceBlock(syncBlockObject.node)) {
     var editSourceButton = _objectSpread({
       id: 'editor.syncedBlock.editSource',
       type: 'button',

package/dist/es2019/nodeviews/syncedBlock.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { createSyncBlockNode, useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 const defaultSyncBlockEditorDocument = {
@@ -30,26 +30,24 @@ const defaultSyncBlockRendererDocument = {
 class SyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
-    const {
-      resourceId,
-      localId
-    } = props.node.attrs;
-    // Temporary solution to identify the source
-    this.isSource = resourceId === localId;
     this.options = props.options;
+    this.syncBlockStore = props.syncBlockStore;
   }
   createDomRef() {
     const domRef = document.createElement('div');
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
   }
+  isSource() {
+    return this.syncBlockStore.isSourceBlock(this.node);
+  }
   handleContentChanges(updatedDoc) {
     var _this$options, _this$options$syncedB;
     if (!this.isSource) {
       return;
     }
     // write data
-    const node = createSyncBlockNode(this.node, false);
+    const node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
     (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$syncedB = _this$options.syncedBlockProvider) === null || _this$options$syncedB === void 0 ? void 0 : _this$options$syncedB.writeNodesData([node], [{
       content: updatedDoc.toJSON()
     }]);
@@ -57,7 +55,7 @@ class SyncBlock extends ReactNodeView {
   setInnerEditorView(editorView) {
     var _this$options2, _this$options2$synced;
     // set inner editor view
-    const nodes = [createSyncBlockNode(this.node, false)];
+    const nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
     (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$synced = _this$options2.syncedBlockProvider) === null || _this$options2$synced === void 0 ? void 0 : _this$options2$synced.fetchNodesData(nodes).then(data => {
       var _data$;
       const tr = editorView.state.tr;
@@ -102,7 +100,7 @@ class SyncBlock extends ReactNodeView {
     });
   }
   render() {
-    if (this.isSource) {
+    if (this.isSource()) {
       return this.renderEditor();
     }
     return this.renderRenderer();
@@ -150,7 +148,8 @@ class SyncBlock extends ReactNodeView {
 export const syncBlockNodeView = ({
   options,
   pmPluginFactoryParams,
-  api
+  api,
+  syncBlockStore
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -163,6 +162,7 @@ export const syncBlockNodeView = ({
     view,
     getPos,
     portalProviderAPI,
-    eventDispatcher
+    eventDispatcher,
+    syncBlockStore
   }).init();
 };

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

@@ -1,18 +1,44 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { createSyncBlockPMNode, generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
 import { findSyncBlock } from './utils/utils';
-export const createSyncedBlock = state => {
+export const createSyncedBlock = (typeAheadInsert, state, syncBlockStore) => {
   const {
-    tr,
     schema: {
       nodes: {
         syncBlock
       }
     }
   } = state;
-  const node = createSyncBlockPMNode(syncBlock);
-  safeInsert(node)(tr);
+  let tr;
+  const syncBlockNode = syncBlockStore.createSyncBlockNode();
+
+  // If the selection is empty, we want to insert the panel on a new line
+  if (state.selection.empty) {
+    const node = syncBlock.createAndFill({
+      ...syncBlockNode.attrs
+    });
+    if (!node) {
+      return false;
+    }
+    if (typeAheadInsert !== undefined) {
+      // If the type-ahead insert is provided, we should use that to insert the node
+      tr = typeAheadInsert(node);
+    } else {
+      var _insertSelectedItem;
+      // Otherwise we can use insertSelectedItem to insert the node
+      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+    }
+  } else {
+    tr = createWrapSelectionTransaction({
+      state,
+      type: syncBlock,
+      nodeAttributes: {
+        ...syncBlockNode.attrs
+      }
+    });
+  }
   return tr;
 };
 export const copySyncedBlockReferenceToClipboard = api => (state, dispatch, _view) => {

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

@@ -26,7 +26,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         syncBlock: lazySyncBlockView({
           options,
           pmPluginFactoryParams,
-          api
+          api,
+          syncBlockStore
         })
       }
     },

package/dist/es2019/syncedBlockPlugin.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { syncBlock } from '@atlaskit/adf-schema';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
-import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
 import { ContentComponent } from './ui/ContentComponent';
@@ -26,21 +27,23 @@ export const syncedBlockPlugin = ({
       }];
     },
     pluginsOptions: {
-      quickInsert: () => [{
+      quickInsert: ({
+        formatMessage
+      }) => [{
         id: 'syncBlock',
-        title: 'Synced Block',
-        description: 'Create a synced block',
+        title: formatMessage(blockTypeMessages.syncedBlock),
+        description: formatMessage(blockTypeMessages.syncedBlockDescription),
         priority: 800,
-        keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block'],
+        keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
         keyshortcut: '',
-        icon: () => /*#__PURE__*/React.createElement(SmartLinkIcon, {
-          label: "Synced Block"
+        icon: () => /*#__PURE__*/React.createElement(IconSyncBlock, {
+          label: formatMessage(blockTypeMessages.syncedBlock)
         }),
-        action: (_insert, state) => {
-          return createSyncedBlock(state);
+        action: (insert, state) => {
+          return createSyncedBlock(insert, state, syncBlockStore);
         }
       }],
-      floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory, api)
+      floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory, api, syncBlockStore)
     },
     contentComponent: () => {
       return /*#__PURE__*/React.createElement(ContentComponent, {

package/dist/es2019/ui/floating-toolbar.js

@@ -7,7 +7,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../pm-plugins/actions';
 import { findSyncBlock } from '../pm-plugins/utils/utils';
-export const getToolbarConfig = (state, intl, _options = {}, _providerFactory, api) => {
+export const getToolbarConfig = (state, intl, _options = {}, _providerFactory, api, syncBlockStore) => {
   var _api$decorations;
   const syncBlockObject = findSyncBlock(state);
   if (!syncBlockObject) {
@@ -37,7 +37,7 @@ export const getToolbarConfig = (state, intl, _options = {}, _providerFactory, a
     ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
   };
   items.push(copyButton);
-  if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
+  if (!syncBlockStore.isSourceBlock(syncBlockObject.node)) {
     const editSourceButton = {
       id: 'editor.syncedBlock.editSource',
       type: 'button',

package/dist/esm/nodeviews/syncedBlock.js

@@ -11,7 +11,7 @@ import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { createSyncBlockNode, useFetchDocNode as _useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode as _useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 var defaultSyncBlockEditorDocument = {
@@ -41,12 +41,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
     _classCallCheck(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
-    var _props$node$attrs = props.node.attrs,
-      resourceId = _props$node$attrs.resourceId,
-      localId = _props$node$attrs.localId;
-    // Temporary solution to identify the source
-    _this.isSource = resourceId === localId;
     _this.options = props.options;
+    _this.syncBlockStore = props.syncBlockStore;
     return _this;
   }
   _inherits(SyncBlock, _ReactNodeView);
@@ -57,6 +53,11 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       domRef.classList.add(SyncBlockSharedCssClassName.prefix);
       return domRef;
     }
+  }, {
+    key: "isSource",
+    value: function isSource() {
+      return this.syncBlockStore.isSourceBlock(this.node);
+    }
   }, {
     key: "handleContentChanges",
     value: function handleContentChanges(updatedDoc) {
@@ -65,7 +66,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         return;
       }
       // write data
-      var node = createSyncBlockNode(this.node, false);
+      var node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
       (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.syncedBlockProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
         content: updatedDoc.toJSON()
       }]);
@@ -75,7 +76,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function setInnerEditorView(editorView) {
       var _this$options2;
       // set inner editor view
-      var nodes = [createSyncBlockNode(this.node, false)];
+      var nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
       (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.syncedBlockProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
@@ -134,7 +135,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      if (this.isSource) {
+      if (this.isSource()) {
         return this.renderEditor();
       }
       return this.renderRenderer();
@@ -191,7 +192,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 export var syncBlockNodeView = function syncBlockNodeView(_ref) {
   var options = _ref.options,
     pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api;
+    api = _ref.api,
+    syncBlockStore = _ref.syncBlockStore;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -202,7 +204,8 @@ export var syncBlockNodeView = function syncBlockNodeView(_ref) {
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher
+      eventDispatcher: eventDispatcher,
+      syncBlockStore: syncBlockStore
     }).init();
   };
 };

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

@@ -1,12 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { createSyncBlockPMNode, generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { generateSyncBlockSourceUrl } from '@atlaskit/editor-synced-block-provider';
 import { findSyncBlock } from './utils/utils';
-export var createSyncedBlock = function createSyncedBlock(state) {
-  var tr = state.tr,
-    syncBlock = state.schema.nodes.syncBlock;
-  var node = createSyncBlockPMNode(syncBlock);
-  safeInsert(node)(tr);
+export var createSyncedBlock = function createSyncedBlock(typeAheadInsert, state, syncBlockStore) {
+  var syncBlock = state.schema.nodes.syncBlock;
+  var tr;
+  var syncBlockNode = syncBlockStore.createSyncBlockNode();
+
+  // If the selection is empty, we want to insert the panel on a new line
+  if (state.selection.empty) {
+    var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
+    if (!node) {
+      return false;
+    }
+    if (typeAheadInsert !== undefined) {
+      // If the type-ahead insert is provided, we should use that to insert the node
+      tr = typeAheadInsert(node);
+    } else {
+      var _insertSelectedItem;
+      // Otherwise we can use insertSelectedItem to insert the node
+      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+    }
+  } else {
+    tr = createWrapSelectionTransaction({
+      state: state,
+      type: syncBlock,
+      nodeAttributes: _objectSpread({}, syncBlockNode.attrs)
+    });
+  }
   return tr;
 };
 export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

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

@@ -26,7 +26,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         syncBlock: lazySyncBlockView({
           options: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api
+          api: api,
+          syncBlockStore: syncBlockStore
         })
       }
     },

package/dist/esm/syncedBlockPlugin.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { syncBlock } from '@atlaskit/adf-schema';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
-import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
 import { ContentComponent } from './ui/ContentComponent';
@@ -27,26 +28,27 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       }];
     },
     pluginsOptions: {
-      quickInsert: function quickInsert() {
+      quickInsert: function quickInsert(_ref2) {
+        var formatMessage = _ref2.formatMessage;
         return [{
           id: 'syncBlock',
-          title: 'Synced Block',
-          description: 'Create a synced block',
+          title: formatMessage(blockTypeMessages.syncedBlock),
+          description: formatMessage(blockTypeMessages.syncedBlockDescription),
           priority: 800,
-          keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block'],
+          keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
           keyshortcut: '',
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(SmartLinkIcon, {
-              label: "Synced Block"
+            return /*#__PURE__*/React.createElement(IconSyncBlock, {
+              label: formatMessage(blockTypeMessages.syncedBlock)
             });
           },
-          action: function action(_insert, state) {
-            return createSyncedBlock(state);
+          action: function action(insert, state) {
+            return createSyncedBlock(insert, state, syncBlockStore);
           }
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        return getToolbarConfig(state, intl, config, providerFactory, api);
+        return getToolbarConfig(state, intl, config, providerFactory, api, syncBlockStore);
       }
     },
     contentComponent: function contentComponent() {

package/dist/esm/ui/floating-toolbar.js

@@ -15,6 +15,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
   var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
   var api = arguments.length > 4 ? arguments[4] : undefined;
+  var syncBlockStore = arguments.length > 5 ? arguments[5] : undefined;
   var syncBlockObject = findSyncBlock(state);
   if (!syncBlockObject) {
     return;
@@ -42,7 +43,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
     onClick: copySyncedBlockReferenceToClipboard(api)
   }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
   items.push(copyButton);
-  if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
+  if (!syncBlockStore.isSourceBlock(syncBlockObject.node)) {
     var editSourceButton = _objectSpread({
       id: 'editor.syncedBlock.editSource',
       type: 'button',

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -6,6 +6,7 @@ import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-vie
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -15,15 +16,17 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
+    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
-    private isSource;
     private options;
     private fetchIntervalId;
+    private syncBlockStore;
     constructor(props: SyncBlockNodeViewProps);
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private isSource;
     private handleContentChanges;
     private setInnerEditorView;
     private renderEditor;
@@ -38,6 +41,7 @@ export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore: SyncBlockStoreManager;
 }
-export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
+export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api, syncBlockStore }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
 export {};

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

@@ -1,7 +1,8 @@
-import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (state: EditorState) => Transaction;
+export declare const createSyncedBlock: (typeAheadInsert: TypeAheadInsert, state: EditorState, syncBlockStore: SyncBlockStoreManager) => 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;

package/dist/types/ui/floating-toolbar.d.ts

@@ -2,5 +2,6 @@ import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
-export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => FloatingToolbarConfig | undefined;
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, syncBlockStore: SyncBlockStoreManager) => FloatingToolbarConfig | undefined;

package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts

@@ -6,6 +6,7 @@ import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-vie
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -15,15 +16,17 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
+    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
-    private isSource;
     private options;
     private fetchIntervalId;
+    private syncBlockStore;
     constructor(props: SyncBlockNodeViewProps);
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private isSource;
     private handleContentChanges;
     private setInnerEditorView;
     private renderEditor;
@@ -38,6 +41,7 @@ export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore: SyncBlockStoreManager;
 }
-export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
+export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api, syncBlockStore }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
 export {};

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

@@ -1,7 +1,8 @@
-import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
-export declare const createSyncedBlock: (state: EditorState) => Transaction;
+export declare const createSyncedBlock: (typeAheadInsert: TypeAheadInsert, state: EditorState, syncBlockStore: SyncBlockStoreManager) => 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;

package/dist/types-ts4.5/ui/floating-toolbar.d.ts

@@ -2,5 +2,6 @@ import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
-export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => FloatingToolbarConfig | undefined;
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, syncBlockStore: SyncBlockStoreManager) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,7 +42,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.2.0",
+		"@atlaskit/editor-common": "^110.3.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {