@atlaskit/editor-core 187.41.3 → 187.41.5

package/dist/cjs/plugins/media/toolbar/index.js

@@ -229,7 +229,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             var _pluginInjectionApi$a2;
             (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
-          showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
           intl: intl
         });
@@ -312,15 +311,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             onSubmit: function onSubmit(_ref2) {
-              var width = _ref2.width;
-              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
-                width: width,
-                widthType: 'pixel',
-                layout: (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled)
-              }));
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
+              var _pluginInjectionApi$a4;
+              var width = _ref2.width,
+                validation = _ref2.validation;
+              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled);
+              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -375,10 +370,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a4;
+                var _pluginInjectionApi$a5;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -404,8 +399,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a5;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
+    var _pluginInjectionApi$a6;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
       type: 'separator'
     });
   }
@@ -489,22 +484,22 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a6;
+    var _pluginInjectionApi$a7;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/plugins/media/ui/ImageBorder/index.js

@@ -24,7 +24,6 @@ var _messages = require("./messages");
 var ImageBorder = function ImageBorder(_ref) {
   var formatMessage = _ref.intl.formatMessage,
     toggleBorder = _ref.toggleBorder,
-    showSomewhatSemanticTooltips = _ref.showSomewhatSemanticTooltips,
     borderMark = _ref.borderMark,
     setBorder = _ref.setBorder;
   var popupTarget = (0, _react2.useRef)(null);
@@ -85,8 +84,7 @@ var ImageBorder = function ImageBorder(_ref) {
       paletteOptions: {
         palette: _uiColor.borderColorPalette,
         paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
-        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor,
-        showSomewhatSemanticTooltips: showSomewhatSemanticTooltips
+        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
       }
     })))
   }, {

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -60,25 +60,26 @@ var PixelEntry = function PixelEntry(_ref) {
     }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
-      var isInvalidInput = false;
+      var validation = 'valid';
       if (data.inputWidth < minWidth) {
         widthToBeSumitted = minWidth;
-        isInvalidInput = true;
+        validation = 'less-than-min';
       }
       if (data.inputWidth > maxWidth) {
         widthToBeSumitted = maxWidth;
-        isInvalidInput = true;
+        validation = 'greater-than-max';
       }
 
       // If user keeps submitting an invalid input, node width attribute will be updated with the same value
       // and won't upadte the state in useEffect (since width is the same)
       // Thus, we set the state here to always display the correct dimension
-      if (isInvalidInput) {
+      if (validation !== 'valid') {
         setComputedWidth(widthToBeSumitted);
         setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: widthToBeSumitted
+        width: widthToBeSumitted,
+        validation: validation
       });
     }
   };

package/dist/cjs/plugins/media/utils/analytics.js

@@ -42,7 +42,7 @@ var getMediaInputResizeAnalyticsEvent = function getMediaInputResizeAnalyticsEve
   return {
     action: _analytics.ACTION.EDITED,
     actionSubject: actionSubject,
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.INPUT_RESIZED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.RESIZED,
     attributes: {
       width: width,
       layout: layout,

package/dist/cjs/plugins/paste/handlers.js

@@ -645,7 +645,8 @@ function handleMarkdown(markdownSlice, queueCardsFromChangedTr, from, to) {
     } else {
       tr.replaceSelection(markdownSlice);
     }
-    tr.setSelection(_state.TextSelection.near(tr.doc.resolve(pastesFrom + markdownSlice.size), -1));
+    var textPosition = tr.doc.resolve(Math.min(pastesFrom + markdownSlice.size, tr.doc.content.size));
+    tr.setSelection(_state.TextSelection.near(textPosition, -1));
     queueCardsFromChangedTr === null || queueCardsFromChangedTr === void 0 ? void 0 : queueCardsFromChangedTr(state, tr, _analytics.INPUT_METHOD.CLIPBOARD);
     if (dispatch) {
       dispatch(tr.scrollIntoView());

package/dist/cjs/plugins/text-color/index.js

@@ -23,10 +23,7 @@ var pluginConfig = function pluginConfig(textColorConfig) {
   return textColorConfig;
 };
 var textColorPlugin = function textColorPlugin(_ref) {
-  var _api$featureFlags;
-  var textColorConfig = _ref.config,
-    api = _ref.api;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var textColorConfig = _ref.config;
   return {
     name: 'textColor',
     marks: function marks() {
@@ -66,8 +63,7 @@ var textColorPlugin = function textColorPlugin(_ref) {
             popupsBoundariesElement: popupsBoundariesElement,
             popupsScrollableElement: popupsScrollableElement,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            disabled: disabled,
-            featureFlags: featureFlags
+            disabled: disabled
           });
         }
       });

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -168,11 +168,9 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         isReducedSpacing = _this$props.isReducedSpacing,
         pluginState = _this$props.pluginState,
         formatMessage = _this$props.intl.formatMessage,
-        disabled = _this$props.disabled,
-        featureFlags = _this$props.featureFlags;
+        disabled = _this$props.disabled;
       var labelTextColor = formatMessage(messages.textColor);
       var palette = pluginState.palette;
-      var useSomewhatSemanticTextColorNames = featureFlags.useSomewhatSemanticTextColorNames;
       var fitWidth;
       if (document.body.clientWidth <= 740) {
         // This was originally hard-coded, but moved here to a const
@@ -239,8 +237,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         paletteOptions: {
           palette: palette,
           hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
-          paletteColorTooltipMessages: _ColorPalette.textPaletteTooltipMessages,
-          showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+          paletteColorTooltipMessages: _ColorPalette.textPaletteTooltipMessages
         }
       }))), (0, _react2.jsx)("span", {
         css: _styles2.separatorStyles

package/dist/cjs/ui/ColorPickerButton/index.js

@@ -27,16 +27,16 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 // helps adjusts position of popup
 var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px -4px;\n"])));
+var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
     light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-  })(theme), _colors.N60A, _colors.N60A);
+  })(theme), _colors.N60A, _colors.N60A, "var(--ds-space-100, 8px)");
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -160,7 +160,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
       paletteOptions: {
         palette: props.colorPalette,
         hexToPaletteColor: props.hexToPaletteColor,
-        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
         paletteColorTooltipMessages: props.paletteColorTooltipMessages
       }
     }))));

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -348,25 +348,15 @@ var ColorPicker = function ColorPicker(props) {
     onFieldChange(name, currentColor !== colorValue);
   };
   var _ref = featureFlags !== null && featureFlags !== void 0 ? featureFlags : {
-      useSomewhatSemanticTextColorNames: false,
       expandedChartColors: false
     },
-    useSomewhatSemanticTextColorNames = _ref.useSomewhatSemanticTextColorNames,
     expandedChartColors = _ref.expandedChartColors;
   return expandedChartColors ? (0, _react.jsx)(_ColorPickerButton.default, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: extendedColorPalette,
-    paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages
-    // We did not want to create new FF or update
-    //  useSomewhatSemanticTextColorNames name
-    //  because it is temporary and require extra work.
-    // So even though it says text color names,
-    //  we are going to use for all color pickers
-    //  such as text, background and table charts.
-    ,
-    showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
+    paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
     placement: "ConfigPanel",

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -27,7 +27,7 @@ exports.expandControl = expandControl;
 var chevronContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", ";\n    height: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var labelContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 var expandContentContainer = function expandContentContainer(isHidden) {
-  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: calc(-1 * ", ");\n"])), isHidden ? 'none' : 'block', "var(--ds-space-100, 8px)");
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: ", ";\n"])), isHidden ? 'none' : 'block', "var(--ds-space-negative-100, -8px)");
 };
 function Expand(_ref) {
   var field = _ref.field,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.41.3";
+var version = "187.41.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/create-editor/feature-flags-from-props.js

@@ -21,7 +21,7 @@ function getSpellCheck(featureFlags) {
  * which is used by both current and archv3 editors.
  */
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29;
+  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27;
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return {
     ...normalizedFeatureFlags,
@@ -53,8 +53,7 @@ export function createFeatureFlagsFromProps(props) {
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
     restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags25 = props.featureFlags) === null || _props$featureFlags25 === void 0 ? void 0 : _props$featureFlags25.restartNumberedLists) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29['prevent-popup-overflow']) : false)
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27['prevent-popup-overflow']) : false)
   };
 }

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -5,7 +5,7 @@ export const inviteTeamWrapper = css`
   background: ${`var(--ds-background-neutral, ${N20})`};
   border-radius: 50%;
   min-width: ${"var(--ds-space-400, 32px)"};
-  margin-left: calc(-1 * ${"var(--ds-space-050, 4px)"});
+  margin-left: ${"var(--ds-space-negative-050, -4px)"};
 `;
 export const avatarContainer = css`
   margin-right: ${"var(--ds-space-100, 8px)"};
@@ -23,7 +23,7 @@ export const avatarContainer = css`
     border-radius: 50%;
     height: 32px;
     width: 32px;
-    padding: 2px;
+    padding: ${"var(--ds-space-025, 2px)"};
   }
 `;
 export const badge = color => css`

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

@@ -21,7 +21,12 @@ export function DateNodeView(props) {
     getPos
   } = props;
   const intl = useIntl();
-  const pos = typeof getPos === 'function' ? getPos() : undefined;
+  let pos;
+  try {
+    pos = typeof getPos === 'function' ? getPos() : undefined;
+  } catch (e) {
+    pos = undefined;
+  }
 
   // We fall back to selection.$from even though it does not cover all use cases
   // eg. upon Editor init, selection is at the start, not at the Date node

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

@@ -1,4 +1,5 @@
 import { extension, bodiedExtension, inlineExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createPlugin } from './pm-plugins/main';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
@@ -9,8 +10,13 @@ const extensionPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  const editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes() {
@@ -48,18 +54,38 @@ const extensionPlugin = ({
       }, {
         name: 'extensionUniqueId',
         plugin: () => createUniqueIdPlugin()
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: () => {
+          return new SafePlugin({
+            view: editorView => {
+              editorViewRef.current = editorView;
+              return {
+                destroy: () => {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI
+      api: () => {
+        var _api$contextPanel2;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

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

@@ -3,7 +3,6 @@ import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
-import { createExtensionAPI } from '../../extension/extension-api';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 const noop = () => null;
@@ -21,8 +20,7 @@ const ExtensionButton = props => {
   const {
     item,
     node,
-    editorView,
-    applyChangeToContextPanel
+    extensionApi
   } = props;
   const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
     loader: async () => resolveExtensionIcon(item.icon),
@@ -33,11 +31,7 @@ const ExtensionButton = props => {
       throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);
     }
     const targetNodeAdf = nodeToJSON(node);
-    const api = createExtensionAPI({
-      editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
@@ -56,7 +50,8 @@ export const ExtensionsPlaceholder = props => {
     editorView,
     extensionProvider,
     separator,
-    applyChangeToContextPanel
+    applyChangeToContextPanel,
+    extensionApi
   } = props;
   const [extensions, setExtensions] = useState([]);
   useEffect(() => {
@@ -72,11 +67,8 @@ export const ExtensionsPlaceholder = props => {
   }, []);
   const nodeAdf = React.useMemo(() => nodeToJSON(node), [node]);
   const extensionItems = React.useMemo(() => {
-    return getContextualToolbarItemsFromModule(extensions, nodeAdf, createExtensionAPI({
-      editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -92,7 +84,8 @@ export const ExtensionsPlaceholder = props => {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));

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

@@ -43,13 +43,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   api
 }) => {
   const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  const {
-    useSomewhatSemanticTextColorNames
-  } = featureFlags || {
-    useSomewhatSemanticTextColorNames: false
-  };
   return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         const ButtonIcon = item.icon;
@@ -167,14 +162,6 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             ,
             hexToPaletteColor: hexToEditorBackgroundPaletteColor,
             paletteColorTooltipMessages: backgroundPaletteTooltipMessages
-            // We did not want to create new FF or update
-            //  useSomewhatSemanticTextColorNames name
-            //  because it is temporary and require extra work.
-            // So even though it says text color names,
-            //  we are going to use for all color pickers
-            //  such as text, background and table charts.
-            ,
-            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -206,7 +193,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return jsx(Separator, {

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

@@ -142,9 +142,8 @@ export const mediaStyles = css`
         ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
     }
     /* Media resize handlers */
-    .richMedia-resize-handle-right::after,
-    .richMedia-resize-handle-left::after {
-      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
+    .resizer-handle-thumb {
+      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
     }
 
     /* Smart cards */
@@ -173,8 +172,7 @@ export const mediaStyles = css`
       box-shadow: 0 0 0 1px ${`var(--ds-border-warning, ${Y500})`} !important;
     }
 
-    .resizer-handle-left::after,
-    .resizer-handle-right::after {
+    .resizer-handle-thumb {
       background: ${`var(--ds-icon-warning, ${Y500})`} !important;
     }
   }

package/dist/es2019/plugins/media/toolbar/commands.js

@@ -1,8 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { removeMediaGroupNode } from './utils';
+import { removeMediaGroupNode, getSelectedMediaSingle } from './utils';
 import { currentMediaNodeWithPos } from '../utils/current-media-node';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
 export const DEFAULT_BORDER_SIZE = 2;
@@ -179,4 +180,33 @@ export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) =>
     dispatch(tr);
   }
   return true;
+};
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, layout) => (state, dispatch) => {
+  const selectedMediaSingleNode = getSelectedMediaSingle(state);
+  if (!selectedMediaSingleNode) {
+    return false;
+  }
+  const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+    ...selectedMediaSingleNode.node.attrs,
+    width,
+    widthType: 'pixel',
+    layout
+  });
+  tr.setMeta('scrollIntoView', false);
+  tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+  const $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+  const parentNodeType = $pos ? $pos.parent.type.name : undefined;
+  const payload = getMediaInputResizeAnalyticsEvent('mediaSingle', {
+    width,
+    layout,
+    validation,
+    parentNode: parentNodeType
+  });
+  if (payload) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+  }
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
 };