@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/ui/LinkSearch/LinkSearchListItem.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppr
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
-import { token } from '@atlaskit/tokens';
 import { N20, N300, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
@@ -20,20 +19,20 @@ export const container = css`
   margin-top: 0;
 `;
 export const containerSelected = css`
-  background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
 `;
 const nameWrapper = css`
   overflow: hidden;
 `;
 export const nameStyle = css`
-  color: ${token('color.text', N800)};
+  color: ${`var(--ds-text, ${N800})`};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 20px;
 `;
 export const containerName = css`
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;

package/dist/es2019/ui/LinkSearch/ToolbarComponents.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 export const RECENT_SEARCH_WIDTH_IN_PX = 420;
 export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export const LINKPICKER_HEIGHT_IN_PX = 570;
 export const inputWrapper = css`
   display: flex;
   line-height: 0;

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -1,15 +1,14 @@
 import { css } from '@emotion/react';
 import { N400, N100 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-
+// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 export const panelTextInput = css`
   input& {
     background: transparent;
     border: 0;
     border-radius: 0;
     box-sizing: content-box;
-    color: ${token('color.text.subtle', N400)};
+    color: ${`var(--ds-text-subtle, ${N400})`};
     flex-grow: 1;
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
@@ -26,7 +25,7 @@ export const panelTextInput = css`
     }
 
     &::placeholder {
-      color: ${token('color.text.subtlest', N100)};
+      color: ${`var(--ds-text-subtlest, ${N100})`};
     }
   }
 `;

package/dist/es2019/ui/ToolbarArrowKeyNavigationProvider/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -20,33 +20,34 @@ export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
 
 export const ToolbarArrowKeyNavigationProvider = ({
   children,
-  editorView
+  editorView,
+  childComponentSelector,
+  handleEscape,
+  disableArrowKeyNavigation
 }) => {
   const wrapperRef = useRef(null);
-  const currentSelectedItemIndex = useRef(0);
-
-  const incrementIndex = list => {
-    if (currentSelectedItemIndex.current === list.length - 1) {
-      currentSelectedItemIndex.current = 0;
+  const selectedItemIndex = useRef(0);
+  const incrementIndex = useCallback(list => {
+    if (selectedItemIndex.current === list.length - 1) {
+      selectedItemIndex.current = 0;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+      selectedItemIndex.current = selectedItemIndex.current + 1;
     }
-  };
-
-  const decrementIndex = list => {
-    if (currentSelectedItemIndex.current === 0) {
-      currentSelectedItemIndex.current = list.length - 1;
+  }, []);
+  const decrementIndex = useCallback(list => {
+    if (selectedItemIndex.current === 0) {
+      selectedItemIndex.current = list.length - 1;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+      selectedItemIndex.current = selectedItemIndex.current - 1;
     }
-  };
+  }, []);
 
   const handleArrowRight = () => {
     var _filteredFocusableEle;
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
   };
 
   const handleArrowLeft = () => {
@@ -54,14 +55,23 @@ export const ToolbarArrowKeyNavigationProvider = ({
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
   };
 
   const handleTab = () => {
     var _filteredFocusableEle3;
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+
+  const focusAndScrollToElement = element => {
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+    element.focus();
   };
 
   const submenuKeydownHandleContext = {
@@ -70,7 +80,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
     handleTab
   };
   useLayoutEffect(() => {
-    if (!wrapperRef.current) {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
       return;
     }
 
@@ -83,17 +93,17 @@ export const ToolbarArrowKeyNavigationProvider = ({
      */
 
     const handleKeyDown = event => {
-      var _document$querySelect, _wrapperRef$current, _filteredFocusableEle4;
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
 
-      //To trap the focus inside the horizontal main toolbar for left and right arrow keys
-      const targetElement = event.target; //To filter out the events outside the main toolbar
+      //To trap the focus inside the horizontal toolbar for left and right arrow keys
+      const targetElement = event.target; //To filter out the events outside the child component
 
-      if (!targetElement.closest("[data-testid='ak-editor-main-toolbar']")) {
+      if (!targetElement.closest(`${childComponentSelector}`)) {
         return;
       } //The key events are from child components such as dropdown menus / popups are ignored
 
 
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
         return;
       }
 
@@ -106,25 +116,37 @@ export const ToolbarArrowKeyNavigationProvider = ({
 
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        selectedItemIndex.current = -1;
       } else {
-        currentSelectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : currentSelectedItemIndex.current;
+        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
       }
 
-      if (event.key === 'ArrowRight') {
-        incrementIndex(filteredFocusableElements);
-      } else if (event.key === 'ArrowLeft') {
-        decrementIndex(filteredFocusableElements);
-      }
+      switch (event.key) {
+        case 'ArrowRight':
+          incrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
+
+        case 'ArrowLeft':
+          decrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
 
-      (_filteredFocusableEle4 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        case 'Escape':
+          handleEscape(event);
+          break;
+
+        default:
+      }
     };
 
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return () => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, editorView]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef
@@ -144,5 +166,5 @@ function getFocusableElements(rootNode) {
 
 function getFilteredFocusableElements(rootNode) {
   //The focusable elements from child components such as dropdown menus / popups are ignored
-  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]'));
+  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons'));
 }

package/dist/es2019/ui/ToolbarFeedback/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const buttonContent = css`
   display: flex;
@@ -14,9 +13,9 @@ export const wrapper = css`
   margin-right: 0;
 `;
 export const confirmationPopup = css`
-  background: ${token('elevation.surface.overlay', '#fff')};
+  background: ${"var(--ds-surface-overlay, #fff)"};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -29,7 +28,7 @@ export const confirmationText = css`
   font-size: ${relativeFontSizeToBase16(14)};
   word-spacing: 4px;
   line-height: 22px;
-  color: ${token('color.text.subtle', N400)};
+  color: ${`var(--ds-text-subtle, ${N400})`};
   margin-top: 30px;
   padding: 20px;
   & > div {
@@ -43,7 +42,7 @@ export const confirmationText = css`
   }
 `;
 export const confirmationHeader = css`
-  background-color: ${token('color.background.discovery.bold', P400)};
+  background-color: ${`var(--ds-background-discovery-bold, ${P400})`};
   height: 100px;
   width: 100%;
   display: inline-block;

package/dist/es2019/ui/WithFlash/index.js

@@ -4,21 +4,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const pulseBackground = keyframes`
   50% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
 `;
 const pulseBackgroundReverse = keyframes`
   0% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
   50% {
     background-color: auto;
   }
   100% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
 `;
 const flashWrapper = css`

package/dist/es2019/ui/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 export const buttonGroupStyle = css`
@@ -12,7 +11,7 @@ export const buttonGroupStyle = css`
   }
 `;
 export const separatorStyles = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 24px;
   display: inline-block;
@@ -58,8 +57,8 @@ export const buttonContentReducedSpacingStyle = css`
 `; // Taken from the style of inline dialog components
 
 export const dropShadow = css`
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px rgba(9, 30, 66, 0.31),
-    0 4px 8px -2px rgba(9, 30, 66, 0.25)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31),
+    0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
 `;
 export const clickSelectWrapperStyle = css`
   user-select: all;

package/dist/es2019/utils/commands.js

@@ -121,11 +121,26 @@ const applyMarkOnRange = (from, to, removeMark, mark, tr) => {
   return tr;
 };
 
+const entireSelectionContainsMark = (mark, doc, fromPos, toPos) => {
+  let onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, node => {
+    // Skip recursion once we've found text which doesn't include the mark
+    if (!onlyContainsMark) {
+      return false;
+    }
+
+    if (node.isText) {
+      onlyContainsMark &&= mark.isInSet(node.marks);
+    }
+  });
+  return onlyContainsMark;
+};
+
 const toggleMarkInRange = mark => (state, dispatch) => {
   const tr = state.tr;
 
   if (state.selection instanceof CellSelection) {
-    let markInRange = false;
+    let removeMark = true;
     const cells = [];
     state.selection.forEachCell((cell, cellPos) => {
       cells.push({
@@ -134,30 +149,27 @@ const toggleMarkInRange = mark => (state, dispatch) => {
       });
       const from = cellPos;
       const to = cellPos + cell.nodeSize;
-
-      if (!markInRange) {
-        markInRange = state.doc.rangeHasMark(from, to, mark);
-      }
+      removeMark &&= entireSelectionContainsMark(mark, state.doc, from, to);
     });
 
     for (let i = cells.length - 1; i >= 0; i--) {
       const cell = cells[i];
       const from = cell.pos;
       const to = from + cell.node.nodeSize;
-      applyMarkOnRange(from, to, markInRange, mark, tr);
+      applyMarkOnRange(from, to, removeMark, mark, tr);
     }
   } else {
     const {
       $from,
       $to
-    } = state.selection; // The type for `rangeHasMark` only accepts a `MarkType` as a third param,
-    // Yet the internals use a method that exists on both MarkType and Mark (one checks attributes the other doesnt)
-    // For example, with our subsup mark: We use the same mark with different attributes to convert
-    // different formatting but when using `MarkType.isInSet(marks)` it returns true for both.
-    // Calling `Mark.isInSet(marks)` compares attributes as well.
-
-    const markInRange = state.doc.rangeHasMark($from.pos, $to.pos, mark);
-    applyMarkOnRange($from.pos, $to.pos, markInRange, mark, tr);
+    } = state.selection; // We decide to remove the mark only if the entire selection contains the mark
+    // Examples with *bold* text
+    // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+    // Scenario 2: Selection contains only bold text -> un-bold entire selection
+    // Scenario 3: Selection contains no bold text -> bold entire selection
+
+    const removeMark = entireSelectionContainsMark(mark, state.doc, $from.pos, $to.pos);
+    applyMarkOnRange($from.pos, $to.pos, removeMark, mark, tr);
   }
 
   if (tr.docChanged) {

package/dist/es2019/utils/input-rules.js

@@ -1,9 +1,11 @@
-import { closeHistory } from 'prosemirror-history';
 import { TextSelection } from 'prosemirror-state';
 import { canJoin, findWrapping } from 'prosemirror-transform';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { createInputRulePlugin } from '@atlaskit/prosemirror-input-rules';
 import { addAnalytics } from '../plugins/analytics';
+import { closeHistory } from 'prosemirror-history';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { getFeatureFlags } from '../plugins/feature-flags-context';
 export const ruleWithAnalytics = getPayload => {
   return originalRule => {
     const onHandlerApply = (state, tr, matchResult) => {
@@ -122,6 +124,25 @@ export const createWrappingJoinRule = ({
     }
 
     tr.wrap(range, wrapping);
+    const featureFlags = getFeatureFlags(state);
+
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      const $end = tr.doc.resolve(tr.mapping.map(end));
+      const node = findParentNodeOfTypeClosestToPos($end, nodeType);
+
+      if (node) {
+        const nodeEnd = node.pos + node.node.nodeSize;
+        const after = tr.doc.resolve(nodeEnd).nodeAfter;
+
+        if (after && after.type === nodeType && canJoin(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+
     const before = tr.doc.resolve(fixedStart - 1).nodeBefore;
 
     if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before))) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "176.0.3";
+export const version = "177.0.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "176.0.3",
+	"version": "177.0.1",
 	"sideEffects": false
 }

package/dist/esm/create-editor/ReactEditorView.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { EditorState, Selection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { injectIntl } from 'react-intl-next';
+import { editorMessages } from './messages';
 import { browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
@@ -633,7 +634,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       className: getUAPrefix(),
       key: "ProseMirror",
       ref: _this.handleEditorViewRef,
-      "aria-label": "Main content area",
+      "aria-label": _this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
       role: "textbox"
     }));
 

package/dist/esm/create-editor/create-plugins-list.js

@@ -78,7 +78,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     },
     placeholder: {
       placeholder: props.placeholder,
-      placeholderHints: props.placeholderHints,
       placeholderBracketHint: props.placeholderBracketHint
     },
     textFormatting: _objectSpread(_objectSpread({}, props.textFormatting || {}), {}, {
@@ -155,7 +154,11 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   } // Needs to be after allowTextColor as order of buttons in toolbar depends on it
 
 
-  preset.add(listPlugin);
+  preset.add([listPlugin, {
+    restartNumberedLists: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedLists,
+    restartNumberedListsToolbar: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedListsToolbar,
+    listNumberContinuity: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.listNumberContinuity
+  }]);
 
   if (props.allowRule) {
     preset.add(rulePlugin);
@@ -242,10 +245,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   }
 
   if (props.allowHelpDialog) {
-    preset.add([helpDialogPlugin, props.legacyImageUploadProvider]);
+    preset.add([helpDialogPlugin, !!props.legacyImageUploadProvider]);
   }
 
-  if (props.saveOnEnter) {
+  if (props.saveOnEnter && props.onSave) {
     preset.add([saveOnEnterPlugin, props.onSave]);
   }
 
@@ -313,7 +316,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
 
 
   if (!props.annotationProviders && props.allowConfluenceInlineComment) {
-    preset.add(annotationPlugin);
+    preset.add([annotationPlugin, undefined]);
   }
 
   if (props.allowDate) {
@@ -428,7 +431,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   }
 
   if (featureFlags.enableViewUpdateSubscription) {
-    preset.add([viewUpdateSubscriptionPlugin]);
+    preset.add(viewUpdateSubscriptionPlugin);
   }
 
   preset.add([codeBidiWarningPlugin, {

package/dist/esm/create-editor/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var editorMessages = defineMessages({
+  editorAssistiveLabel: {
+    id: 'fabric.editor.editorAssistiveLabel',
+    defaultMessage: 'Main content area, start typing to enter text.',
+    description: 'Text that is read out by screen reader when the main editor is in focus'
+  }
+});

package/dist/esm/i18n/en.js

@@ -100,8 +100,8 @@ export default {
   'fabric.editor.error': 'Error',
   'fabric.editor.errorPanel': 'Error panel',
   'fabric.editor.errorPanel.description': 'Call out errors in a colored panel',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Removing this extension will break anything connected to it.',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Remove extension',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Delete',
   'fabric.editor.extensions.config-panel.save-indicator': 'All changes are always autosaved',
   'fabric.editor.find': 'Find',
   'fabric.editor.findNext': 'Find next',

package/dist/esm/i18n/en_GB.js

@@ -100,8 +100,8 @@ export default {
   'fabric.editor.error': 'Error',
   'fabric.editor.errorPanel': 'Error panel',
   'fabric.editor.errorPanel.description': 'Call out errors in a coloured panel',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Removing this extension will break anything connected to it.',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Remove extension',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': 'Delete',
   'fabric.editor.extensions.config-panel.save-indicator': 'All changes are always autosaved',
   'fabric.editor.find': 'Find',
   'fabric.editor.findNext': 'Find next',

package/dist/esm/i18n/en_ZZ.js

@@ -100,8 +100,8 @@ export default {
   'fabric.editor.error': '⁣⁢Error؜‌⁡‌؜⁡‌⁣⁤',
   'fabric.editor.errorPanel': '⁣⁢Error panel⁠‍؜⁠⁠؜‍⁠⁠⁡⁣⁤',
   'fabric.editor.errorPanel.description': '⁣⁢Call out errors in a colored panel⁡⁠؜⁡‍‌‍؜‍⁣⁤',
-  'fabric.editor.extension.confirmDeleteLinkedModalMessage': '⁣⁢Removing this extension will break anything connected to it.⁠؜⁡‌‌‍‌⁡⁠⁡⁡⁡⁡⁣⁤',
-  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': '⁣⁢Remove extension⁡‍‌‍⁠‌‍‍⁠⁠⁣⁤',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.⁠؜⁡‌‌‍‌⁡⁠⁡⁡⁡⁡⁣⁤',
+  'fabric.editor.extension.confirmDeleteLinkedModalOKButton': '⁣Delete⁡⁤',
   'fabric.editor.extensions.config-panel.save-indicator': '⁣⁢All changes are always autosaved⁠‍؜‌‌‍‍⁡‌‌‍‌‌⁣⁤',
   'fabric.editor.find': '⁣⁢Find⁠‌⁠‌⁠‍؜⁣⁤',
   'fabric.editor.findNext': '⁣⁢Find next؜‌؜‌؜⁠⁣⁤',

package/dist/esm/i18n/index.js

@@ -1,13 +1,15 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export { default as zh } from './zh';
 export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
 export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
@@ -29,7 +31,5 @@ export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
 export { default as is } from './is';
 export { default as ro } from './ro';

package/dist/esm/i18n/languages.js

@@ -1,14 +1,15 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export default {
   zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
   cs: 'Czech',
-  da: 'Danish',
   nl: 'Dutch',
+  da: 'Danish',
   en: 'English',
   en_GB: 'English (United Kingdom)',
   et: 'Estonian',
@@ -28,5 +29,9 @@ export default {
   ru: 'Russian',
   sk: 'Slovak',
   es: 'Spanish',
-  sv: 'Swedish'
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
 };