@atlaskit/editor-core 187.29.3 → 187.29.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-core
 
+## 187.29.4
+
+### Patch Changes
+
+- [`8595f0ddc4b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8595f0ddc4b) - Always show resizer handles when mediaSingle node is selected
+- [`1af653a9630`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1af653a9630) - ED-19433 Initial scaffold for editor-plugin-type-ahead
+- [`2f7d7be2983`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f7d7be2983) - [ux] ED-19438 Added dark mode icons for headings 1 to 6
+- [`1b917526a9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b917526a9f) - [ux] add convert to pixels cta in pixel entry for legacy experience
+- Updated dependencies
+
 ## 187.29.3
 
 ### Patch Changes

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -24,7 +24,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
-var _mediaSingle = require("../utils/media-single");
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
@@ -40,7 +39,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -251,42 +250,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(getPos(), node)(view.state, view.dispatch);
     });
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
-        var $pos = view.state.doc.resolve(pos);
-        var domNode = view.nodeDOM($pos.pos);
-        if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
-          return domNode.parentElement.offsetWidth;
-        }
-        if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
-        }
-      }
-      return null;
-    });
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLengthNext", function (view, pos) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      var $pos = view.state.doc.resolve(pos);
-      if ($pos && $pos.parent.type.name !== 'doc') {
-        return (0, _mediaSingle.getParentWidthForNestedMediaSingleNode)($pos, view);
-      }
-      return null;
-    });
     return _this;
   }
   (0, _createClass2.default)(MediaSingleNode, [{
@@ -376,19 +339,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           stateWidth = _this$state.width,
           stateHeight = _this$state.height;
         if (width === null) {
-          width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         }
         if (height === null) {
-          height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
         }
       }
       if (!width || !height) {
-        width = _mediaSingle2.DEFAULT_IMAGE_WIDTH;
-        height = _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
+        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = (0, _mediaSingle.getMaxWidthForNestedNode)(view, getPos()) || lineLength;
+      var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -398,7 +361,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: (0, _mediaSingle2.calcMediaSinglePixelWidth)({
+        mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
           width: mediaSingleWidthAttribute,
           widthType: widthType,
           origWidth: width,
@@ -407,7 +370,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           // thus we use the legecy value (exclude table as container node)
           contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
-          gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
+          gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
         })
       };
       var resizableMediaSingleProps = _objectSpread({

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

@@ -288,18 +288,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var isLegacy = widthType !== 'pixel';
           var pixelWidth = (0, _mediaSingle.calcMediaSinglePixelWidth)({
             width: singleMediaWidth,
             widthType: widthType,
             origWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             layout: layout,
-            contentWidth: contentWidth,
+            contentWidth: (0, _mediaSingle.getMaxWidthForNestedNode)(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth: containerWidth,
             gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+            showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -314,6 +316,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 width: width,
                 widthType: 'pixel'
               }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+              dispatch(tr);
+            },
+            onMigrate: function onMigrate() {
+              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+                width: pixelWidth,
+                widthType: 'pixel'
+              }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
               dispatch(tr);
             }
           });

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = void 0;
+var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';
+exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = PIXELENTRY_MIGRATION_BUTTON_TESTID;

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

@@ -16,6 +16,7 @@ var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _styles = require("./styles");
 var _messages = require("./messages");
+var _constants = require("./constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -26,7 +27,9 @@ var PixelEntry = function PixelEntry(_ref) {
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
     validate = _ref.validate,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    showMigration = _ref.showMigration,
+    onMigrate = _ref.onMigrate;
   var ratioWidth = (0, _react2.useMemo)(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -96,6 +99,16 @@ var PixelEntry = function PixelEntry(_ref) {
       }
     };
   }, [ratioHeight, ratioWidth]);
+  if (showMigration) {
+    return (0, _react.jsx)(_tooltip.default, {
+      content: formatMessage(_messages.messages.migrationButtonTooltip)
+    }, (0, _react.jsx)(_button.default, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(_messages.messages.migrationButtonText)));
+  }
   return (0, _react.jsx)("div", {
     css: _styles.pixelEntryForm
   }, (0, _react.jsx)(_form.default, {

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

@@ -35,6 +35,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.media.pixelEntry.submitButtonText',
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
   }
 });
 exports.messages = messages;

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -185,8 +185,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      var pos = _this.pos;
-      pos && (0, _utils2.setNodeSelection)(_this.props.view, pos);
+      if (_this.pos === null) {
+        return;
+      }
+      (0, _utils2.setNodeSelection)(_this.props.view, _this.pos);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
       _this.setState({
@@ -537,7 +539,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
-        "data-testid": resizerNextTestId
+        "data-testid": resizerNextTestId,
+        isHandleVisible: selected
       }, children));
     }
   }]);

package/dist/cjs/plugins/type-ahead/index.js

@@ -118,6 +118,7 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     cancel: cancel
   });
 });
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

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.29.3";
+var version = "187.29.4";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -5,10 +5,9 @@ import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
-import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
-import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -24,7 +23,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -177,42 +176,6 @@ export default class MediaSingleNode extends Component {
       }
       insertAndSelectCaptionFromMediaSinglePos(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(getPos(), node)(view.state, view.dispatch);
     });
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
-        const $pos = view.state.doc.resolve(pos);
-        const domNode = view.nodeDOM($pos.pos);
-        if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
-          return domNode.parentElement.offsetWidth;
-        }
-        if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
-        }
-      }
-      return null;
-    });
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(this, "getLineLengthNext", (view, pos) => {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      const $pos = view.state.doc.resolve(pos);
-      if ($pos && $pos.parent.type.name !== 'doc') {
-        return getParentWidthForNestedMediaSingleNode($pos, view);
-      }
-      return null;
-    });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.mediaProvider !== this.props.mediaProvider) {
@@ -294,8 +257,8 @@ export default class MediaSingleNode extends Component {
       height = DEFAULT_IMAGE_HEIGHT;
     }
     const isSelected = selected();
-    const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-    const contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
+    const contentWidthForLegacyExperience = getMaxWidthForNestedNode(view, getPos()) || lineLength;
+    const contentWidth = getMaxWidthForNestedNodeNext(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,

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

@@ -25,7 +25,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -293,18 +293,20 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const isLegacy = widthType !== 'pixel';
           const pixelWidth = calcMediaSinglePixelWidth({
             width: singleMediaWidth,
             widthType,
             origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             layout,
-            contentWidth,
+            contentWidth: getMaxWidthForNestedNode(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth,
             gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+            showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: value => {
@@ -321,6 +323,18 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 width,
                 widthType: 'pixel'
               });
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+              dispatch(tr);
+            },
+            onMigrate: () => {
+              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+                ...selectedMediaSingleNode.node.attrs,
+                width: pixelWidth,
+                widthType: 'pixel'
+              });
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
               dispatch(tr);
             }
           });

package/dist/es2019/plugins/media/ui/PixelEntry/constants.js

@@ -0,0 +1 @@
+export const PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

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

@@ -8,6 +8,7 @@ import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
 import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit } from './styles';
 import { messages } from './messages';
+import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 export const PixelEntry = ({
   width,
   mediaWidth,
@@ -16,7 +17,9 @@ export const PixelEntry = ({
   validate,
   intl: {
     formatMessage
-  }
+  },
+  showMigration,
+  onMigrate
 }) => {
   const ratioWidth = useMemo(() => {
     return mediaHeight / mediaWidth;
@@ -79,6 +82,16 @@ export const PixelEntry = ({
         }
     }
   }, [ratioHeight, ratioWidth]);
+  if (showMigration) {
+    return jsx(Tooltip, {
+      content: formatMessage(messages.migrationButtonTooltip)
+    }, jsx(Button, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(messages.migrationButtonText)));
+  }
   return jsx("div", {
     css: pixelEntryForm
   }, jsx(Form, {

package/dist/es2019/plugins/media/ui/PixelEntry/messages.js

@@ -29,5 +29,15 @@ export const messages = defineMessages({
     id: 'fabric.editor.media.pixelEntry.submitButtonText',
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
   }
 });

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -165,8 +165,10 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "selectCurrentMediaNode", () => {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      const pos = this.pos;
-      pos && setNodeSelection(this.props.view, pos);
+      if (this.pos === null) {
+        return;
+      }
+      setNodeSelection(this.props.view, this.pos);
     });
     _defineProperty(this, "handleResizeStart", () => {
       this.setState({
@@ -457,7 +459,8 @@ class ResizableMediaSingleNext extends React.Component {
       handleResizeStop: this.handleResizeStop,
       snap: this.state.snaps,
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      "data-testid": resizerNextTestId
+      "data-testid": resizerNextTestId,
+      isHandleVisible: selected
     }, children));
   }
 }

package/dist/es2019/plugins/type-ahead/index.js

@@ -102,6 +102,7 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
     cancel: cancel
   });
 });
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -18,10 +18,9 @@ import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
-import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
-import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -37,7 +36,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
@@ -242,42 +241,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       insertAndSelectCaptionFromMediaSinglePos(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(getPos(), node)(view.state, view.dispatch);
     });
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
-        var $pos = view.state.doc.resolve(pos);
-        var domNode = view.nodeDOM($pos.pos);
-        if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
-          return domNode.parentElement.offsetWidth;
-        }
-        if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
-        }
-      }
-      return null;
-    });
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(_assertThisInitialized(_this), "getLineLengthNext", function (view, pos) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      var $pos = view.state.doc.resolve(pos);
-      if ($pos && $pos.parent.type.name !== 'doc') {
-        return getParentWidthForNestedMediaSingleNode($pos, view);
-      }
-      return null;
-    });
     return _this;
   }
   _createClass(MediaSingleNode, [{
@@ -378,8 +341,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = getMaxWidthForNestedNode(view, getPos()) || lineLength;
+      var contentWidth = getMaxWidthForNestedNodeNext(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,

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

@@ -29,7 +29,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -281,18 +281,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var isLegacy = widthType !== 'pixel';
           var pixelWidth = calcMediaSinglePixelWidth({
             width: singleMediaWidth,
             widthType: widthType,
             origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             layout: layout,
-            contentWidth: contentWidth,
+            contentWidth: getMaxWidthForNestedNode(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth: containerWidth,
             gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+            showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -307,6 +309,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 width: width,
                 widthType: 'pixel'
               }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+              dispatch(tr);
+            },
+            onMigrate: function onMigrate() {
+              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+                width: pixelWidth,
+                widthType: 'pixel'
+              }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
               dispatch(tr);
             }
           });

package/dist/esm/plugins/media/ui/PixelEntry/constants.js

@@ -0,0 +1 @@
+export var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

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

@@ -9,13 +9,16 @@ import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
 import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit } from './styles';
 import { messages } from './messages';
+import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 export var PixelEntry = function PixelEntry(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
     validate = _ref.validate,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    showMigration = _ref.showMigration,
+    onMigrate = _ref.onMigrate;
   var ratioWidth = useMemo(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -85,6 +88,16 @@ export var PixelEntry = function PixelEntry(_ref) {
       }
     };
   }, [ratioHeight, ratioWidth]);
+  if (showMigration) {
+    return jsx(Tooltip, {
+      content: formatMessage(messages.migrationButtonTooltip)
+    }, jsx(Button, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(messages.migrationButtonText)));
+  }
   return jsx("div", {
     css: pixelEntryForm
   }, jsx(Form, {

package/dist/esm/plugins/media/ui/PixelEntry/messages.js

@@ -29,5 +29,15 @@ export var messages = defineMessages({
     id: 'fabric.editor.media.pixelEntry.submitButtonText',
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
   }
 });

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -178,8 +178,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "selectCurrentMediaNode", function () {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      var pos = _this.pos;
-      pos && setNodeSelection(_this.props.view, pos);
+      if (_this.pos === null) {
+        return;
+      }
+      setNodeSelection(_this.props.view, _this.pos);
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStart", function () {
       _this.setState({
@@ -530,7 +532,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-        "data-testid": resizerNextTestId
+        "data-testid": resizerNextTestId,
+        isHandleVisible: selected
       }, children));
     }
   }]);

package/dist/esm/plugins/type-ahead/index.js

@@ -104,6 +104,7 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     cancel: cancel
   });
 });
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.29.3";
+export var version = "187.29.4";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/labs/next/presets/default.d.ts

@@ -221,18 +221,18 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
 }>, (config?: undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"unsupportedContent", {}> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"unsupportedContent", {}>, (config?: TypeAheadPluginOptions | undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"typeAhead", {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     commands: {
-        openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+        openTypeAheadAtCursor: (props: {
             triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-            inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+            inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
             query?: string | undefined;
         }) => import("@atlaskit/editor-common/types").EditorCommand;
     };
 }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"typeAhead", {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     commands: {
-        openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+        openTypeAheadAtCursor: (props: {
             triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-            inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+            inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
             query?: string | undefined;
         }) => import("@atlaskit/editor-common/types").EditorCommand;
     };
@@ -606,18 +606,18 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
 }>, (config?: undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"unsupportedContent", {}> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"unsupportedContent", {}>, (config?: TypeAheadPluginOptions | undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"typeAhead", {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     commands: {
-        openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+        openTypeAheadAtCursor: (props: {
             triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-            inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+            inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
             query?: string | undefined;
         }) => import("@atlaskit/editor-common/types").EditorCommand;
     };
 }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"typeAhead", {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     commands: {
-        openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+        openTypeAheadAtCursor: (props: {
             triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-            inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+            inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
             query?: string | undefined;
         }) => import("@atlaskit/editor-common/types").EditorCommand;
     };

package/dist/types/plugins/emoji/index.d.ts

@@ -7,7 +7,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { TypeAheadItem } from '../type-ahead/types';
 import type { EmojiPluginOptions, EmojiPluginState } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { TypeAheadPlugin } from '../type-ahead';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 export declare const emojiToTypeaheadItem: (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem;
 export declare function memoize<ResultFn extends (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem>(fn: ResultFn): {
     call: ResultFn;

package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts

@@ -41,18 +41,6 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     onMediaSingleClicked: (event: MouseEvent) => void;
     render(): jsx.JSX.Element;
     private clickPlaceholder;
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    private getLineLength;
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    private getLineLengthNext;
 }
 declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
     lastOffsetLeft: number;

package/dist/types/plugins/media/ui/PixelEntry/constants.d.ts

@@ -0,0 +1 @@
+export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";

package/dist/types/plugins/media/ui/PixelEntry/index.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;

package/dist/types/plugins/media/ui/PixelEntry/messages.d.ts

@@ -29,4 +29,14 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    migrationButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    migrationButtonTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/plugins/media/ui/PixelEntry/types.d.ts

@@ -16,6 +16,10 @@ export type PixelEntryProps = {
      * The original media height used to calculate the width
      */
     mediaHeight: number;
+    /**
+     * show migration button to convert to pixels for legacy image resize experience
+     */
+    showMigration?: boolean;
     /**
      * The submit function that is called when the form is valid and the submit key is pressed
      */
@@ -25,6 +29,10 @@ export type PixelEntryProps = {
      * The value passed through the validator currently comes from the width input only.
      */
     validate?: (value: number | '') => boolean;
+    /**
+     * Migration handler called when the CTA button is clicked
+     */
+    onMigrate?: () => void;
 };
 export type PixelEntryFormValues = {
     inputWidth: number | '';

package/dist/types/plugins/type-ahead/api.d.ts

@@ -2,7 +2,8 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { TypeAheadItem } from '@atlaskit/editor-common/provider-factory';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import type { TypeAheadHandler, TypeAheadInputMethod } from './types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+import type { TypeAheadHandler } from './types';
 import type { Command } from '../../types/command';
 type CloseOptions = {
     insertCurrentQueryAsRawText: boolean;

package/dist/types/plugins/type-ahead/index.d.ts

@@ -1,17 +1,6 @@
-import type { NextEditorPlugin } from '../../types/editor-plugin';
-import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
-export type TypeAheadPluginOptions = {
-    isMobile?: boolean;
-    createAnalyticsEvent?: CreateUIAnalyticsEvent;
-};
-export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
-    pluginConfiguration: TypeAheadPluginOptions | undefined;
-    commands: {
-        openTypeAheadAtCursor: typeof openTypeAheadAtCursor;
-    };
-}>;
+import type { TypeAheadPluginOptions, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type { TypeAheadPluginOptions, TypeAheadPlugin };
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

package/dist/types/plugins/type-ahead/types.d.ts

@@ -1,11 +1,11 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { EditorState, Transaction, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
-import type { INPUT_METHOD } from '../analytics/types/enums';
 import type { CloseSelectionOptions } from './constants';
 import type { UiComponentFactoryParams } from '../../types/ui-components';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler } from '@atlaskit/editor-common/types';
-export type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler, };
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+export type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler, TypeAheadInputMethod, };
 export type OnSelectItem = (props: {
     index: number;
     item: TypeAheadItem;
@@ -49,7 +49,6 @@ export type OnTextInsertProps = {
     text: string;
 };
 export type OnTextInsert = (props: OnTextInsertProps) => void;
-export type TypeAheadInputMethod = INPUT_METHOD.INSERT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR;
 export type InsertionTransactionMeta = (editorState: EditorState) => Transaction | false;
 type PopupMountPoints = Pick<UiComponentFactoryParams, 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'>;
 export type PopupMountPointReference = Record<'current', PopupMountPoints | null>;

package/dist/types-ts4.5/labs/next/presets/default.d.ts

@@ -269,18 +269,18 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
     (config?: TypeAheadPluginOptions | undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"typeAhead", {
         pluginConfiguration: TypeAheadPluginOptions | undefined;
         commands: {
-            openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+            openTypeAheadAtCursor: (props: {
                 triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-                inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+                inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
                 query?: string | undefined;
             }) => import("@atlaskit/editor-common/types").EditorCommand;
         };
     }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"typeAhead", {
         pluginConfiguration: TypeAheadPluginOptions | undefined;
         commands: {
-            openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+            openTypeAheadAtCursor: (props: {
                 triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-                inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+                inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
                 query?: string | undefined;
             }) => import("@atlaskit/editor-common/types").EditorCommand;
         };
@@ -734,18 +734,18 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
     (config?: TypeAheadPluginOptions | undefined, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"typeAhead", {
         pluginConfiguration: TypeAheadPluginOptions | undefined;
         commands: {
-            openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+            openTypeAheadAtCursor: (props: {
                 triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-                inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+                inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
                 query?: string | undefined;
             }) => import("@atlaskit/editor-common/types").EditorCommand;
         };
     }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"typeAhead", {
         pluginConfiguration: TypeAheadPluginOptions | undefined;
         commands: {
-            openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: {
+            openTypeAheadAtCursor: (props: {
                 triggerHandler: import("@atlaskit/editor-common/types").TypeAheadHandler;
-                inputMethod: import("../../../plugins/type-ahead/types").TypeAheadInputMethod;
+                inputMethod: import("@atlaskit/editor-plugin-type-ahead").TypeAheadInputMethod;
                 query?: string | undefined;
             }) => import("@atlaskit/editor-common/types").EditorCommand;
         };

package/dist/types-ts4.5/plugins/emoji/index.d.ts

@@ -7,7 +7,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { TypeAheadItem } from '../type-ahead/types';
 import type { EmojiPluginOptions, EmojiPluginState } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { TypeAheadPlugin } from '../type-ahead';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 export declare const emojiToTypeaheadItem: (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem;
 export declare function memoize<ResultFn extends (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem>(fn: ResultFn): {
     call: ResultFn;

package/dist/types-ts4.5/plugins/media/nodeviews/mediaSingle.d.ts

@@ -41,18 +41,6 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     onMediaSingleClicked: (event: MouseEvent) => void;
     render(): jsx.JSX.Element;
     private clickPlaceholder;
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    private getLineLength;
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    private getLineLengthNext;
 }
 declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
     lastOffsetLeft: number;

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/constants.d.ts

@@ -0,0 +1 @@
+export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/index.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/messages.d.ts

@@ -29,4 +29,14 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    migrationButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    migrationButtonTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/types.d.ts

@@ -16,6 +16,10 @@ export type PixelEntryProps = {
      * The original media height used to calculate the width
      */
     mediaHeight: number;
+    /**
+     * show migration button to convert to pixels for legacy image resize experience
+     */
+    showMigration?: boolean;
     /**
      * The submit function that is called when the form is valid and the submit key is pressed
      */
@@ -25,6 +29,10 @@ export type PixelEntryProps = {
      * The value passed through the validator currently comes from the width input only.
      */
     validate?: (value: number | '') => boolean;
+    /**
+     * Migration handler called when the CTA button is clicked
+     */
+    onMigrate?: () => void;
 };
 export type PixelEntryFormValues = {
     inputWidth: number | '';

package/dist/types-ts4.5/plugins/type-ahead/api.d.ts

@@ -2,7 +2,8 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { TypeAheadItem } from '@atlaskit/editor-common/provider-factory';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import type { TypeAheadHandler, TypeAheadInputMethod } from './types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+import type { TypeAheadHandler } from './types';
 import type { Command } from '../../types/command';
 type CloseOptions = {
     insertCurrentQueryAsRawText: boolean;

package/dist/types-ts4.5/plugins/type-ahead/index.d.ts

@@ -1,17 +1,6 @@
-import type { NextEditorPlugin } from '../../types/editor-plugin';
-import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
-export type TypeAheadPluginOptions = {
-    isMobile?: boolean;
-    createAnalyticsEvent?: CreateUIAnalyticsEvent;
-};
-export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
-    pluginConfiguration: TypeAheadPluginOptions | undefined;
-    commands: {
-        openTypeAheadAtCursor: typeof openTypeAheadAtCursor;
-    };
-}>;
+import type { TypeAheadPluginOptions, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type { TypeAheadPluginOptions, TypeAheadPlugin };
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

package/dist/types-ts4.5/plugins/type-ahead/types.d.ts

@@ -1,11 +1,11 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { EditorState, Transaction, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
-import type { INPUT_METHOD } from '../analytics/types/enums';
 import type { CloseSelectionOptions } from './constants';
 import type { UiComponentFactoryParams } from '../../types/ui-components';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler } from '@atlaskit/editor-common/types';
-export type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler, };
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+export type { TypeAheadStats, TypeAheadItemRenderProps, TypeAheadInsert, TypeAheadSelectItem, TypeAheadItem, TypeAheadForceSelect, TypeAheadHandler, TypeAheadInputMethod, };
 export type OnSelectItem = (props: {
     index: number;
     item: TypeAheadItem;
@@ -49,7 +49,6 @@ export type OnTextInsertProps = {
     text: string;
 };
 export type OnTextInsert = (props: OnTextInsertProps) => void;
-export type TypeAheadInputMethod = INPUT_METHOD.INSERT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR;
 export type InsertionTransactionMeta = (editorState: EditorState) => Transaction | false;
 type PopupMountPoints = Pick<UiComponentFactoryParams, 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'>;
 export type PopupMountPointReference = Record<'current', PopupMountPoints | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.29.3",
+  "version": "187.29.4",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -76,6 +76,7 @@
     "@atlaskit/editor-plugin-list": "^1.0.0",
     "@atlaskit/editor-plugin-table": "^2.10.0",
     "@atlaskit/editor-plugin-text-formatting": "^0.2.0",
+    "@atlaskit/editor-plugin-type-ahead": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",

package/report.api.md

@@ -42,7 +42,6 @@ import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider
 import type { ContextUpdateHandler } from '@atlaskit/editor-common/types';
 import { createTable } from '@atlaskit/editor-plugin-table/commands';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { CreateUIAnalyticsEvent as CreateUIAnalyticsEvent_2 } from '@atlaskit/analytics-next/types';
 import { darkModeStatusColorPalette } from '@atlaskit/editor-common/ui-color';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -156,8 +155,10 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { TransactionTracking } from '@atlaskit/editor-common/types';
 import type { Transformer as Transformer_2 } from '@atlaskit/editor-common/types';
 import type { TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
 import { TypeAheadItem } from '@atlaskit/editor-common/provider-factory';
 import type { TypeAheadItem as TypeAheadItem_2 } from '@atlaskit/editor-common/types';
+import type { TypeAheadPluginOptions } from '@atlaskit/editor-plugin-type-ahead';
 import type { TypeAheadStats } from '@atlaskit/editor-common/types';
 import { UIComponentFactory } from '@atlaskit/editor-common/types';
 import { UploadEndEventPayload } from '@atlaskit/media-picker/types';
@@ -2054,24 +2055,11 @@ class TransactionTracker {
   shouldTrackTransaction(options: TransactionTracking): boolean;
 }
 
-// @public (undocumented)
-type TypeAheadInputMethod =
-  | INPUT_METHOD.INSERT_MENU
-  | INPUT_METHOD.KEYBOARD
-  | INPUT_METHOD.QUICK_INSERT
-  | INPUT_METHOD.TOOLBAR;
-
 export { TypeAheadItem };
 
 // @public (undocumented)
 export const typeAheadPluginKey: PluginKey<TypeAheadPluginState>;
 
-// @public (undocumented)
-type TypeAheadPluginOptions = {
-  isMobile?: boolean;
-  createAnalyticsEvent?: CreateUIAnalyticsEvent_2;
-};
-
 // @public (undocumented)
 export type TypeAheadPluginState = {
   decorationSet: DecorationSet;

package/tmp/api-report-tmp.d.ts

@@ -31,7 +31,6 @@ import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider
 import type { ContextUpdateHandler } from '@atlaskit/editor-common/types';
 import { createTable } from '@atlaskit/editor-plugin-table/commands';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { CreateUIAnalyticsEvent as CreateUIAnalyticsEvent_2 } from '@atlaskit/analytics-next/types';
 import { darkModeStatusColorPalette } from '@atlaskit/editor-common/ui-color';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -145,8 +144,10 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { TransactionTracking } from '@atlaskit/editor-common/types';
 import type { Transformer as Transformer_2 } from '@atlaskit/editor-common/types';
 import type { TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
 import { TypeAheadItem } from '@atlaskit/editor-common/provider-factory';
 import type { TypeAheadItem as TypeAheadItem_2 } from '@atlaskit/editor-common/types';
+import type { TypeAheadPluginOptions } from '@atlaskit/editor-plugin-type-ahead';
 import type { TypeAheadStats } from '@atlaskit/editor-common/types';
 import { UIComponentFactory } from '@atlaskit/editor-common/types';
 import { UploadEndEventPayload } from '@atlaskit/media-picker/types';
@@ -1831,20 +1832,11 @@ class TransactionTracker {
     shouldTrackTransaction(options: TransactionTracking): boolean;
 }
 
-// @public (undocumented)
-type TypeAheadInputMethod = INPUT_METHOD.INSERT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR;
-
 export { TypeAheadItem }
 
 // @public (undocumented)
 export const typeAheadPluginKey: PluginKey<TypeAheadPluginState>;
 
-// @public (undocumented)
-type TypeAheadPluginOptions = {
-    isMobile?: boolean;
-    createAnalyticsEvent?: CreateUIAnalyticsEvent_2;
-};
-
 // @public (undocumented)
 export type TypeAheadPluginState = {
     decorationSet: DecorationSet;