@atlaskit/editor-plugin-synced-block 5.1.9 → 5.1.11

package/dist/es2019/pm-plugins/experience-tracking/delete-reference-experience.js

@@ -0,0 +1,181 @@
+import { bind } from 'bind-event-listener';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getRemovedResourceIds, getTarget, wasSyncBlockDeletedOrAddedByHistory } from '../utils/experience-tracking-utils';
+const pluginKey = new PluginKey('deleteReferenceSyncBlockExperience');
+const START_METHOD = {
+  ELEMENT_TOOLBAR: 'element-toolbar',
+  DELETE: 'delete',
+  TYPED_OVER: 'typed-over',
+  CUT: 'cut',
+  UNDO: 'undo',
+  REDO: 'redo'
+};
+
+/**
+ * This experience tracks when a reference sync block is deleted.
+ *
+ * Start: When user deletes ref sync block from toolbar, presses delete when cursor is in front of ref sync block,
+ * presses any key with a ref sync block selected, cuts with a ref sync block selected, triggers undo/redo that deletes a ref sync block
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the reference sync block being removed from the DOM
+ */
+export const getDeleteReferenceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const experience = getDeleteReferenceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setDeleteExperience(experience);
+  const unbindClickListener = bind(document, {
+    type: 'click',
+    listener: event => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      const testId = button.dataset.testid;
+      if (isReferenceSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.ELEMENT_TOOLBAR
+        });
+      }
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        cut: view => {
+          const {
+            state
+          } = view;
+          if (hasSyncBlockInSelection(state.selection)) {
+            experience.start({
+              method: START_METHOD.CUT
+            });
+          }
+          return false;
+        },
+        keydown: (view, event) => {
+          const {
+            state
+          } = view;
+          const hasSelection = hasSyncBlockInSelection(state.selection);
+          const hasAdjacent = hasSyncBlockBeforeCursor(state.selection);
+          if (hasSelection) {
+            experience.start({
+              method: START_METHOD.TYPED_OVER
+            });
+          }
+          if (isDeleteKey(event.key) && hasAdjacent) {
+            experience.start({
+              method: START_METHOD.DELETE
+            });
+          }
+          return false;
+        }
+      }
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach(tr => {
+        const {
+          hasDeletedSyncBlock,
+          isUndo
+        } = wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState);
+        if (hasDeletedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
+    },
+    view: () => {
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+export const getDeleteReferenceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        const deletedResourceIds = getRemovedResourceIds(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => {
+        return {
+          target: getTarget(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+const isReferenceSyncedBlockDeleteButtonId = testId => testId === 'reference-synced-block-delete-button';
+const isDeleteKey = key => {
+  return key === 'Delete' || key === 'Backspace';
+};
+const hasSyncBlockInSelection = selection => {
+  const {
+    syncBlock
+  } = selection.$from.doc.type.schema.nodes;
+  let found = false;
+  selection.$from.doc.nodesBetween(selection.from, selection.to, node => {
+    if (node.type === syncBlock) {
+      found = true;
+      return false;
+    }
+    // sync block nodes can only be found at the top level
+    return false;
+  });
+  return found;
+};
+const hasSyncBlockBeforeCursor = selection => {
+  if (!selection.empty) {
+    return false;
+  }
+  const {
+    syncBlock
+  } = selection.$from.doc.type.schema.nodes;
+  const {
+    nodeBefore
+  } = selection.$from;
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type) === syncBlock;
+};

package/dist/es2019/pm-plugins/experience-tracking/delete-source-experience.js

@@ -0,0 +1,98 @@
+import { bind } from 'bind-event-listener';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getRemovedResourceIds, getTarget } from '../utils/experience-tracking-utils';
+const pluginKey = new PluginKey('deleteSourceSyncBlockExperience');
+const START_METHOD = {
+  DELETE_CONFIRM_BUTTON: 'delete-confirm-button'
+};
+
+/**
+ * This experience tracks when a source sync block is deleted.
+ *
+ * Start: When user clicks the delete button in the delete modal
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the source sync block being removed from the DOM
+ */
+export const getDeleteSourceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const experience = getDeleteSourceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setDeleteExperience(experience);
+  const unbindClickListener = bind(document, {
+    type: 'click',
+    listener: event => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      const testId = button.dataset.testid;
+      if (isSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.DELETE_CONFIRM_BUTTON
+        });
+      }
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: () => {
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+export const getDeleteSourceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        const deletedResourceIds = getRemovedResourceIds(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => {
+        return {
+          target: getTarget(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+const isSyncedBlockDeleteButtonId = testId => testId === 'synced-block-delete-confirmation-modal-delete-button';

package/dist/es2019/pm-plugins/experience-tracking/get-experience-tracking-plugins.js

@@ -1,5 +1,8 @@
 import { getCreateReferenceExperiencePlugin } from "./create-reference-experience";
 import { getCreateSourceExperiencePlugin } from "./create-source-experience";
+import { getDeleteReferenceExperiencePlugin } from "./delete-reference-experience";
+import { getDeleteSourceExperiencePlugin } from "./delete-source-experience";
+import { getProviderOnlyExperiencesPlugin } from "./provider-only-experiences";
 export const getExperienceTrackingPlugins = ({
   refs,
   dispatchAnalyticsEvent,
@@ -18,5 +21,26 @@ export const getExperienceTrackingPlugins = ({
       dispatchAnalyticsEvent,
       syncBlockStore
     })
+  }, {
+    name: 'deleteSourceExperiencePlugin',
+    plugin: () => getDeleteSourceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
+  }, {
+    name: 'deleteReferenceExperiencePlugin',
+    plugin: () => getDeleteReferenceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
+  }, {
+    name: 'providerOnlySyncedBlockExperiencesPlugin',
+    plugin: () => getProviderOnlyExperiencesPlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
   }];
 };

package/dist/es2019/pm-plugins/experience-tracking/provider-only-experiences.js

@@ -0,0 +1,127 @@
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+const pluginKey = new PluginKey('providerOnlySyncBlockExperiences');
+export const getProviderOnlyExperiencesPlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const saveSourceExperience = getSaveSourceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setSaveExperience(saveSourceExperience);
+  const saveReferenceExperience = getSaveReferenceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const fetchExperience = getFetchExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const fetchSourceInfoExperience = getFetchSourceInfoExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.referenceManager.setExperiences(fetchExperience, fetchSourceInfoExperience, saveReferenceExperience);
+  return new SafePlugin({
+    key: pluginKey,
+    view: () => {
+      return {
+        destroy: () => {
+          saveSourceExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          saveReferenceExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchSourceInfoExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+        }
+      };
+    }
+  });
+};
+
+/**
+ * This experience tracks when a source sync block is saved to the BE.
+ *
+ * Start: When the flush source sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+const getSaveSourceExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block is saved to the BE.
+ *
+ * Start: When the flush sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+const getSaveReferenceExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block data is fetched from the BE.
+ *
+ * Start: When the fetchNodesData function is called.
+ * Success: When the fetching the data is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the data being successfully fetched, or the fetch fails
+ */
+const getFetchExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_FETCH,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block source info data (title, url) is fetched from the BE.
+ *
+ * Start: When the fetchSourceInfo function is called.
+ * Success: When the fetching the data is successful within 2500ms of start.
+ * Failure: When 2500ms passes without the data being successfully fetched, or the fetch fails
+ */
+const getFetchSourceInfoExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_GET_SOURCE_INFO,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2500
+    })]
+  });
+};

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

@@ -0,0 +1,65 @@
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { findChildren } from '@atlaskit/editor-prosemirror/utils';
+let targetEl;
+export const getTarget = containerElement => {
+  if (!targetEl) {
+    const element = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('.ProseMirror');
+    if (!element || !(element instanceof HTMLElement)) {
+      return null;
+    }
+    targetEl = element;
+  }
+  return targetEl;
+};
+export const wasSyncBlockDeletedOrAddedByHistory = (tr, oldState, newState) => {
+  const historyMeta = tr.getMeta(pmHistoryPluginKey);
+  if (!Boolean(historyMeta)) {
+    return {};
+  }
+  const {
+    syncBlock
+  } = newState.schema.nodes;
+  const oldSyncBlockNodes = findChildren(oldState.doc, node => node.type === syncBlock);
+  const newSyncBlockNodes = findChildren(newState.doc, node => node.type === syncBlock);
+  const oldSyncBlockIds = new Set(oldSyncBlockNodes.map(nodeWithPos => nodeWithPos.node.attrs.localId).filter(localId => Boolean(localId)));
+  const newSyncBlockIds = new Set(newSyncBlockNodes.map(nodeWithPos => nodeWithPos.node.attrs.localId).filter(localId => Boolean(localId)));
+  const hasDeletedSyncBlock = Array.from(oldSyncBlockIds).some(localId => !newSyncBlockIds.has(localId));
+  const hasAddedSyncBlock = Array.from(newSyncBlockIds).some(localId => !oldSyncBlockIds.has(localId));
+  return {
+    hasDeletedSyncBlock,
+    hasAddedSyncBlock,
+    isUndo: historyMeta.redo === false
+  };
+};
+const getResourceIds = (nodes, resourceIds, query) => {
+  nodes.forEach(node => {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    const syncBlockElements = node.querySelectorAll(query);
+    syncBlockElements.forEach(element => {
+      const resourceId = element.getAttribute('resourceid');
+      if (resourceId) {
+        resourceIds.push(resourceId);
+      }
+    });
+  });
+};
+export const getAddedResourceIds = (mutations, query) => {
+  const resourceIds = [];
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.addedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};
+export const getRemovedResourceIds = (mutations, query) => {
+  const resourceIds = [];
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.removedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};

package/dist/es2019/types/index.js

@@ -5,4 +5,7 @@ export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
-}({});
+}({});
+export const EXPERIENCE_ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -43,17 +43,48 @@ const CreateSyncedBlockDropdownItem = ({
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: 'create-synced-block-block-menu-btn',
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
       appearance: "new"
     }, formatMessage(blockMenuMessages.newLozenge))
   }, formatMessage(blockMenuMessages.createSyncedBlock));
 };
+const CopySyncedBlockDropdownItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
+    var _states$connectivityS2;
+    return {
+      mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+    };
+  });
+  const onClick = () => {
+    var _api$core3, _api$core4, _api$blockControls2, _api$blockControls2$c;
+    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
+    api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
+      closeMenu: true
+    }));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick,
+    isDisabled: isOfflineMode(mode),
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(blockMenuMessages.newLozenge))
+  }, formatMessage(blockMenuMessages.copySyncedBlock));
+};
 export const CreateOrCopySyncedBlockDropdownItem = ({
   api,
   enableSourceSyncedBlockCreation
 }) => {
-  var _menuTriggerByNode$no;
   const {
     menuTriggerByNode
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
@@ -62,7 +93,11 @@ export const CreateOrCopySyncedBlockDropdownItem = ({
       menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
     };
   });
-  if (!['syncBlock', 'bodiedSyncBlock'].includes((_menuTriggerByNode$no = menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) !== null && _menuTriggerByNode$no !== void 0 ? _menuTriggerByNode$no : '') && enableSourceSyncedBlockCreation) {
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
+    return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
+      api: api
+    });
+  } else if (enableSourceSyncedBlockCreation) {
     return /*#__PURE__*/React.createElement(CreateSyncedBlockDropdownItem, {
       api: api
     });

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -5,6 +5,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 export const DeleteConfirmationModal = ({
@@ -105,6 +106,7 @@ export const DeleteConfirmationModal = ({
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: isOfflineMode(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
+    testId: fg('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
   }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

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

@@ -6,6 +6,7 @@ import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
@@ -42,6 +43,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       title: formatMessage(commonMessages.delete),
       onClick: removeSyncedBlock(api),
       icon: DeleteIcon,
+      testId: fg('platform_synced_block_dogfooding') ? 'reference-synced-block-delete-button' : undefined,
       ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };
     items.push(deleteButton);
@@ -53,7 +55,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       icon: CopyIcon,
       title: formatMessage(messages.copySyncBlockLabel),
       showTitle: false,
-      tooltipContent: formatMessage(messages.copySyncBlockTooltip),
+      tooltipContent: formatMessage(messages.copySyncedBlockTooltip),
       onClick: copySyncedBlockReferenceToClipboard(syncBlockStore, api),
       ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };

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

@@ -53,8 +53,8 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     syncBlockStore.sourceManager.createBodiedSyncBlockNode(_attrs);
     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));
+    // set selection to the start of the previous selection for the position taken up by the start of the new synced block
+    tr.setSelection(TextSelection.create(tr.doc, conversionInfo.from));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -6,10 +6,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 var toDOM = function toDOM() {
   return ['div', {
@@ -82,12 +85,20 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
-      var _this$api5;
+      var _this$api5, _this$api6;
       var syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.syncedBlock.sharedState) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.currentState()) === null || _this$api5 === void 0 ? void 0 : _this$api5.syncBlockStore;
       if (!syncBlockStore) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+      return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.SYNCED_BLOCK,
+        dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+        ref: forwardRef,
+        syncBlockStore: syncBlockStore,
+        node: this.node
+      })) : /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
         ref: forwardRef,
         syncBlockStore: syncBlockStore,
         node: this.node