@atlaskit/editor-core 153.1.1 → 153.1.5

package/dist/es2019/plugins/breakout/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Plugin } from 'prosemirror-state';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -3,7 +3,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import ToolbarButton from '../../../ui/ToolbarButton';

package/dist/es2019/plugins/caption/nodeviews/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { Caption } from '@atlaskit/editor-common';
+import { Caption } from '@atlaskit/editor-common/ui';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 export class CaptionNodeView extends SelectionBasedNodeView {
   constructor(...args) {

package/dist/es2019/plugins/card/nodeviews/blockCard.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedBlock, browser } from '@atlaskit/editor-common';
+import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
 import { ReactNodeView } from '../../../nodeviews/';
 import { registerCard } from '../pm-plugins/actions';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export class BlockCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/plugins/card/nodeviews/embedCard.js

@@ -5,7 +5,8 @@ import { Card as SmartCard } from '@atlaskit/smart-card';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
-import { UnsupportedBlock, MediaSingle as RichMediaWrapper, browser, findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedBlock, MediaSingle as RichMediaWrapper, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 import { registerCard } from '../pm-plugins/actions';

package/dist/es2019/plugins/card/nodeviews/inlineCard.js

@@ -2,8 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedInline, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
 import ReactNodeView from '../../../nodeviews/ReactNodeView';

package/dist/es2019/plugins/card/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
 import { N20 } from '@atlaskit/theme/colors';
-import { SmartCardSharedCssClassName } from '@atlaskit/editor-common';
+import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {

package/dist/es2019/plugins/card/toolbar.js

@@ -10,7 +10,7 @@ import commonMessages from '../../messages';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { changeSelectedCardToText } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
-import { richMediaClassName } from '@atlaskit/editor-common';
+import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { displayInfoForCard, findCardInfo, titleUrlPairFromNode, appearanceForNodeType } from './utils';
 import { isSafeUrl } from '@atlaskit/adf-schema';

package/dist/es2019/plugins/card/ui/ResizableEmbedCard.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
-import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorMediaResizeHandlerPaddingWide, akEditorBreakoutPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
 import { Wrapper } from '../../../ui/Resizer/styled';

package/dist/es2019/plugins/code-block/index.js

@@ -24,8 +24,7 @@ const codeBlockPlugin = options => ({
       name: 'codeBlock',
       plugin: ({
         getIntl
-      }) => createPlugin({
-        useLongPressSelection: options.useLongPressSelection,
+      }) => createPlugin({ ...options,
         getIntl,
         appearance: options.appearance
       })

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

@@ -11,10 +11,26 @@ import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
-  appearance
+  appearance,
+  allowCompositionInputOverride = false
 }) => {
   const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+  const handleDOMEvents = {}; // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
+  // incorrecly and lose content when pressing enter in the middle of a code block line.
+
+  if (allowCompositionInputOverride) {
+    handleDOMEvents.beforeinput = (view, event) => {
+      if (event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      event.inputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
+        event.preventDefault();
+        return true;
+      }
+
+      return false;
+    };
+  }
+
   return new Plugin({
     state: {
       init(_, state) {
@@ -70,7 +86,8 @@ export const createPlugin = ({
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection
-      })
+      }),
+      handleDOMEvents
     }
   });
 };

package/dist/es2019/plugins/code-block/refresh-browser-selection.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key'; // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 

package/dist/es2019/plugins/collab-edit/analytics.js

@@ -1,7 +1,7 @@
 import { addAnalytics, ACTION, EVENT_TYPE, ACTION_SUBJECT } from '../analytics';
 import { getFeatureFlags } from '../feature-flags-context';
 import { getDocStructure } from '../../utils/document-logger';
-import { sniffUserBrowserExtensions } from '@atlaskit/editor-common';
+import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 export const addSynchronyErrorAnalytics = (state, tr) => {
   return error => {
     const browserExtensions = sniffUserBrowserExtensions({

package/dist/es2019/plugins/collab-edit/events/initialize.js

@@ -22,11 +22,17 @@ export const initialize = ({
 
   cleanup = subscribe(view, provider, options, providerFactory); // Initialize provider
 
-  /**
-   * We only want to initialise once, if we reload/reconfigure this plugin
-   * We dont want to re-init collab, it would break existing sessions
-   */
+  if (options.useNativePlugin) {
+    // ED-13912 For NCS we don't want to use memoizeOne because it causes
+    // infinite text while changing page-width
+    initCollab(provider, view);
+  } else {
+    /**
+     * We only want to initialise once, if we reload/reconfigure this plugin
+     * We dont want to re-init collab, it would break existing sessions
+     */
+    initCollabMemo(provider, view);
+  }
 
-  initCollabMemo(provider, view);
   return cleanup;
 };

package/dist/es2019/plugins/collab-edit/utils.js

@@ -2,7 +2,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { Decoration } from 'prosemirror-view';
 import * as themeColors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { addAnalytics } from '../analytics/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT } from '../analytics/types';
 export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(solid => ({

package/dist/es2019/plugins/date/actions.js

@@ -1,6 +1,6 @@
 import { NodeSelection, Selection } from 'prosemirror-state';
 import { Fragment } from 'prosemirror-model';
-import { todayTimestampInUTC } from '@atlaskit/editor-common';
+import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { withAnalytics, addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { isToday } from './utils/internal';

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { injectIntl } from 'react-intl-next';
-import { timestampToString, timestampToTaskContext, isPastDate, DateSharedCssClassName } from '@atlaskit/editor-common';
+import { timestampToString, timestampToTaskContext, isPastDate } from '@atlaskit/editor-common/utils';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';
 

package/dist/es2019/plugins/date/styles.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { DateSharedCssClassName } from '@atlaskit/editor-common';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Popup, timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/plugins/emoji/nodeviews/emoji-next.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { DOMSerializer } from 'prosemirror-model';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
 export class EmojiNodeView {
   constructor(node, _, context) {

package/dist/es2019/plugins/emoji/nodeviews/emoji.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Emoji from '../ui/Emoji';
 import { ReactNodeView } from '../../../nodeviews';
 import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';

package/dist/es2019/plugins/emoji/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { N0, N20, N900 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { EmojiSharedCssClassName } from '@atlaskit/editor-common';
+import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const emojiStyles = css`
   .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
@@ -18,8 +18,7 @@ export const emojiStyles = css`
 
     &.${akEditorSelectedNodeClassName} {
       .${EmojiSharedCssClassName.EMOJI_SPRITE},
-        .${EmojiSharedCssClassName.EMOJI_IMAGE}
-        > span {
+        .${EmojiSharedCssClassName.EMOJI_IMAGE} {
         border-radius: 2px;
         ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
       }

package/dist/es2019/plugins/emoji/ui/Emoji/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClickSelectWrapper } from '../../../../ui/styles';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 export default function EmojiNode(props) {
   return /*#__PURE__*/React.createElement(ClickSelectWrapper, null, /*#__PURE__*/React.createElement(Emoji, props));
 }

package/dist/es2019/plugins/expand/nodeviews/index.js

@@ -5,7 +5,7 @@ import { Selection, NodeSelection } from 'prosemirror-state';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 import { keyName } from 'w3c-keyname';
 import { DOMSerializer } from 'prosemirror-model';
-import { expandMessages } from '@atlaskit/editor-common';
+import { expandMessages } from '@atlaskit/editor-common/ui';
 import { isEmptyNode } from '../../../utils';
 import { updateExpandTitle, toggleExpandExpanded, deleteExpandAtPos, setSelectionInsideExpand } from '../commands';
 import { expandClassNames } from '../ui/class-names';

package/dist/es2019/plugins/expand/ui/ExpandIconButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, forwardRef } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common';
+import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common/ui';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/plugins/expand/ui/styles.js

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
-import { sharedExpandStyles } from '@atlaskit/editor-common';
+import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { BreakoutCssClassName } from '../../breakout/constants';
 import { expandClassNames } from './class-names';

package/dist/es2019/plugins/extension/commands.js

@@ -49,9 +49,11 @@ export const updateExtensionLayout = layout => createCommand({
   const selectedExtension = getSelectedExtension(state, true);
 
   if (selectedExtension) {
-    return tr.setNodeMarkup(selectedExtension.pos, undefined, { ...selectedExtension.node.attrs,
+    const trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, { ...selectedExtension.node.attrs,
       layout
     });
+    trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+    return trWithNewNodeMarkup;
   }
 
   return tr;

package/dist/es2019/plugins/extension/extension-api.js

@@ -41,33 +41,50 @@ const extensionAPICallPayload = functionName => ({
 });
 
 export const createExtensionAPI = options => {
-  const doc = {
-    insertAfter: (localId, adf, opt) => {
-      const {
-        editorView
-      } = options;
-      const {
-        dispatch
-      } = editorView; // Be extra cautious since 3rd party devs can use regular JS without type safety
-
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error(`insertAfter(): Invalid localId '${localId}'.`);
+  /**
+   * Finds the node and its position by `localId`. Throws if the node could not be found.
+   *
+   * @returns {NodeWithPos}
+   */
+  const ensureNodePosByLocalId = (localId, {
+    opName
+  }) => {
+    // Be extra cautious since 3rd party devs can use regular JS without type safety
+    if (typeof localId !== 'string' || localId === '') {
+      throw new Error(`${opName}(): Invalid localId '${localId}'.`);
+    } // Find the node + position matching the given ID
+
+
+    const {
+      editorView: {
+        state
       }
+    } = options;
+    const nodePos = findNodePosWithLocalId(state, localId);
 
+    if (!nodePos) {
+      throw new Error(`${opName}(): Could not find node with ID '${localId}'.`);
+    }
+
+    return nodePos;
+  };
+
+  const doc = {
+    insertAfter: (localId, adf, opt) => {
       if (typeof adf !== 'object' || Array.isArray(adf)) {
         throw new Error(`insertAfter(): Invalid ADF given.`);
-      } // Find the node + position matching the given ID
-
+      }
 
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'insertAfter'
+      });
+      const {
+        editorView
+      } = options;
       const {
+        dispatch,
         state
-      } = editorView;
-      const nodePos = findNodePosWithLocalId(state, localId);
-
-      if (!nodePos) {
-        throw new Error(`insertAfter(): Could not find node with ID '${localId}'.`);
-      } // Validate the given ADF
-
+      } = editorView; // Validate the given ADF
 
       const {
         tr,
@@ -139,35 +156,91 @@ export const createExtensionAPI = options => {
       dispatch(tr);
     },
     scrollTo: localId => {
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'scrollTo'
+      }); // Analytics - tracking the api call
+
+      const apiCallPayload = extensionAPICallPayload('scrollTo');
       const {
-        editorView
+        editorView: {
+          dispatch,
+          state
+        }
+      } = options;
+      let {
+        tr
+      } = state;
+      tr = addAnalytics(state, tr, apiCallPayload);
+      tr = setTextSelection(nodePos.pos)(tr);
+      tr = tr.scrollIntoView();
+      dispatch(tr);
+    },
+    update: (localId, mutationCallback) => {
+      var _changedValues$marks;
+
+      const {
+        node,
+        pos
+      } = ensureNodePosByLocalId(localId, {
+        opName: 'update'
+      });
+      const {
+        editorView: {
+          dispatch,
+          state
+        }
       } = options;
       const {
-        dispatch
-      } = editorView; // Be extra cautious since 3rd party devs can use regular JS without type safety
+        tr,
+        schema
+      } = state;
+      const changedValues = mutationCallback({
+        attrs: node.attrs,
+        marks: node.marks.map(pmMark => ({
+          type: pmMark.type.name,
+          attrs: pmMark.attrs
+        }))
+      });
 
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error(`scrollTo(): Invalid localId '${localId}'.`);
-      } // Find the node + position matching the given ID
+      const ensureValidMark = mark => {
+        if (typeof mark !== 'object' || Array.isArray(mark)) {
+          throw new Error(`update(): Invalid mark given.`);
+        } // Ensure that the given mark is present in the schema
 
 
-      const {
-        state
-      } = editorView;
-      const nodePos = findNodePosWithLocalId(state, localId);
+        const markType = schema.marks[mark.type];
 
-      if (!nodePos) {
-        throw new Error(`scrollTo(): Could not find node with ID '${localId}'.`);
-      } // Analytics - tracking the api call
+        if (!markType) {
+          throw new Error(`update(): Invalid ADF mark type '${mark.type}'.`);
+        }
 
+        if (!node.type.allowsMarkType(markType)) {
+          throw new Error(`update(): Node of type '${node.type.name}' does not allow marks of type '${mark.type}'.`);
+        }
 
-      const apiCallPayload = extensionAPICallPayload('scrollTo');
-      let {
-        tr
-      } = state;
-      tr = addAnalytics(state, tr, apiCallPayload);
-      tr = setTextSelection(nodePos.pos)(tr);
-      tr = tr.scrollIntoView();
+        return {
+          mark: markType,
+          attrs: mark.attrs
+        };
+      };
+
+      const newMarks = (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(({
+        mark,
+        attrs
+      }) => mark.create(attrs)); // Validate if the new attributes result in a valid node.
+      // We're doing this by relying on `createChecked`, which validates attributes,
+      // and if we don't exit - we assume validity.
+
+      try {
+        node.type.createChecked(changedValues.attrs, node.content, newMarks);
+      } catch (err) {
+        throw new Error(`update(): The given ADFEntity cannot be inserted in the current position.\n${err}`);
+      }
+
+      tr.setNodeMarkup(pos, undefined, changedValues.attrs, newMarks); // Analytics - tracking the api call
+
+      const apiCallPayload = extensionAPICallPayload('update');
+      addAnalytics(state, tr, apiCallPayload);
       dispatch(tr);
     }
   };

package/dist/es2019/plugins/extension/pm-plugins/unique-id.js

@@ -1,6 +1,6 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { stepAddsOneOf } from '../../../utils/step';
 const pluginKey = new PluginKey('extensionUniqueIdPlugin');
 
 const createPlugin = () => new Plugin({
@@ -9,34 +9,55 @@ const createPlugin = () => new Plugin({
     const tr = newState.tr;
     const selectionBookmark = tr.selection.getBookmark();
     let modified = false;
+    const {
+      extension,
+      bodiedExtension,
+      inlineExtension
+    } = newState.schema.nodes;
+    const extensionTypes = new Set([extension, bodiedExtension, inlineExtension]);
+    const idsObserved = new Set();
     transactions.forEach(transaction => {
       if (!transaction.docChanged) {
         return;
-      } // Adds a unique id to a node
-
-
-      nodesBetweenChanged(transaction, (node, pos) => {
-        const {
-          extension,
-          bodiedExtension,
-          inlineExtension
-        } = newState.schema.nodes;
-
-        if (!!node.type && (node.type === extension || node.type === bodiedExtension || node.type === inlineExtension)) {
-          const {
-            localId,
-            ...rest
-          } = node.attrs;
-
-          if (!localId) {
-            tr.setNodeMarkup(pos, undefined, {
-              localId: uuid.generate(),
-              ...rest
-            });
-            modified = true;
+      }
+
+      const isAddingExtension = transaction.steps.some(step => stepAddsOneOf(step, extensionTypes));
+
+      if (isAddingExtension) {
+        // Can't simply look at changed nodes, as we could be adding an extension
+        newState.doc.descendants((node, pos) => {
+          const localId = node.attrs.localId; // Dealing with an extension - make sure it's a unique ID
+
+          if (!!node.type && extensionTypes.has(node.type)) {
+            if (localId && !idsObserved.has(localId)) {
+              idsObserved.add(localId); // Also add a localId if it happens to not have one,
+            } else if (!localId || idsObserved.has(localId)) {
+              modified = true;
+              tr.setNodeMarkup(pos, undefined, { ...node.attrs,
+                localId: uuid.generate()
+              });
+            }
+            /**
+             * If it's a bodiedExtension, we'll need to keep digging; since we
+             * can have more extension nodes within the contents of that
+             */
+
+
+            if (node.type === bodiedExtension) {
+              return true;
+            }
+
+            return false;
           }
-        }
-      });
+          /**
+           * Otherwise continue traversing, we can encounter extensions nested in
+           * expands/bodiedExtensions
+           */
+
+
+          return true;
+        });
+      }
     });
 
     if (modified) {

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { calcBreakoutWidth, overflowShadow } from '@atlaskit/editor-common';
+import { overflowShadow } from '@atlaskit/editor-common/ui';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { Wrapper, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
 import { Overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
 import memoizeOne from 'memoize-one';
-import { getExtensionRenderer, getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/editor-common';
+import { getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/editor-common/extensions';
+import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 import Extension from './Extension';
 import InlineExtension from './InlineExtension';
 export default class ExtensionComponent extends Component {

package/dist/es2019/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 
 const ExtensionNodeWrapper = ({
   children,