@atlaskit/editor-core 187.14.11 → 187.15.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 187.15.0
+
+### Minor Changes
+
+- [`1a15910366d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a15910366d) - [ux] New pixel entry component for image resizing floating bar
+
+## 187.14.12
+
+### Patch Changes
+
+- [`7b8e8b52110`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b8e8b52110) - [ED-16733] Editor Media Extraction: Moving Floating Toolbar Separator to editor-common
+- Updated dependencies
+
 ## 187.14.11
 
 ### Patch Changes

package/dist/cjs/plugins/floating-toolbar/ui/Separator.js

@@ -1,20 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
-/** @jsx jsx */
-var separator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
-var _default = function _default() {
-  return (0, _react.jsx)("div", {
-    css: separator,
-    className: "separator"
-  });
-};
+var _ui = require("@atlaskit/editor-common/ui");
+var _default = _ui.FloatingToolbarSeparator;
 exports.default = _default;

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

@@ -33,6 +33,9 @@ var _styles = require("../nodeviews/styles");
 var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
 var _currentMediaNode = require("../utils/current-media-node");
 var _imageBorder = require("./imageBorder");
+var _PixelEntry = require("../ui/PixelEntry");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var remove = function remove(state, dispatch) {
@@ -255,6 +258,58 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'separator'
       });
     }
+
+    // Pixel Entry Toolbar Support
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
+      toolbarButtons.push({
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          if (!editorView) {
+            return null;
+          }
+          var state = editorView.state,
+            dispatch = editorView.dispatch;
+          var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+          if (!selectedMediaSingleNode) {
+            return null;
+          }
+          var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
+          if (!selectedMediaNode) {
+            return null;
+          }
+          var singleMediaWidth = selectedMediaSingleNode.node.attrs.width;
+          var _selectedMediaNode$at = selectedMediaNode.attrs,
+            mediaWidth = _selectedMediaNode$at.width,
+            mediaHeight = _selectedMediaNode$at.height;
+          return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
+            intl: intl,
+            width: singleMediaWidth,
+            mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
+            mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
+            validate: function validate(value) {
+              if (value !== '' && !isNaN(value) && value >= _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
+                return true;
+              }
+              return false;
+            },
+            onSubmit: function onSubmit(_ref) {
+              var width = _ref.width;
+              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+                width: width,
+                widthType: 'pixel'
+              }));
+              dispatch(tr);
+            }
+          });
+        }
+      });
+      if (!pluginState.isResizing) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
+    }
     if (allowLinking && (0, _linking.shouldShowMediaLinkToolbar)(state)) {
       toolbarButtons.push({
         type: 'custom',
@@ -303,8 +358,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       type: 'separator'
     });
   }
-  var _ref = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
-    hoverDecoration = _ref.hoverDecoration;
+  var _ref2 = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
+    hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
     type: 'button',
@@ -348,8 +403,8 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
-    hoverDecoration = _ref2.hoverDecoration;
+  var _ref3 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
+    hoverDecoration = _ref3.hoverDecoration;
   if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }

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

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PixelEntry = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _styles = require("./styles");
+var _messages = require("./messages");
+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 */
+
+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;
+  var ratioWidth = (0, _react2.useMemo)(function () {
+    return mediaHeight / mediaWidth;
+  }, [mediaHeight, mediaWidth]);
+  var ratioHeight = (0, _react2.useMemo)(function () {
+    return mediaWidth / mediaHeight;
+  }, [mediaHeight, mediaWidth]);
+  var _useState = (0, _react2.useState)(width),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    computedWidth = _useState2[0],
+    setComputedWidth = _useState2[1];
+  var _useState3 = (0, _react2.useState)(Math.round(ratioWidth * width)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    computedHeight = _useState4[0],
+    setComputedHeight = _useState4[1];
+
+  // Handle update to width from outside component
+  (0, _react2.useEffect)(function () {
+    setComputedWidth(width);
+    setComputedHeight(Math.round(ratioWidth * width));
+  }, [width, ratioWidth]);
+
+  // Handle submit when user presses enter in form
+  var handleOnSubmit = function handleOnSubmit(data) {
+    if (onSubmit) {
+      if (data.inputWidth === '') {
+        return;
+      }
+      onSubmit({
+        width: data.inputWidth
+      });
+    }
+  };
+
+  // Syncronous validation returning undefined for valid and string for invalid
+  var handleValidateWidth = (0, _react2.useCallback)(function (value) {
+    if (!value || !validate) {
+      return;
+    }
+    if (validate) {
+      return validate(value) === true ? undefined : formatMessage(_messages.messages.validationFailedMessage);
+    }
+    return;
+  }, [validate, formatMessage]);
+
+  // Handle updating computed fields based on
+  var handleOnChange = (0, _react2.useCallback)(function (type) {
+    return function (event) {
+      var value = parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      switch (type) {
+        case 'inputWidth':
+          {
+            setComputedWidth(newInputValue);
+            if (!isNaN(value)) {
+              setComputedHeight(Math.round(ratioWidth * value));
+            }
+            break;
+          }
+        case 'inputHeight':
+          {
+            setComputedHeight(newInputValue);
+            if (!isNaN(value)) {
+              setComputedWidth(Math.round(ratioHeight * value));
+            }
+            break;
+          }
+      }
+    };
+  }, [ratioHeight, ratioWidth]);
+  return (0, _react.jsx)("div", {
+    css: _styles.pixelEntryForm
+  }, (0, _react.jsx)(_form.default, {
+    onSubmit: handleOnSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps;
+    return (0, _react.jsx)("form", formProps, (0, _react.jsx)("div", {
+      css: _styles.pixelSizingWrapper
+    }, (0, _react.jsx)(_form.Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      validate: handleValidateWidth,
+      defaultValue: computedWidth
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return (0, _react.jsx)(_tooltip.default, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(_messages.messages.inputWidthTooltip),
+        position: "top"
+      }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputWidth'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(_messages.messages.inputWidthAriaLabel)
+      })));
+    }), (0, _react.jsx)("span", {
+      css: _styles.pixelSizingLabel
+    }, "x"), (0, _react.jsx)(_form.Field, {
+      key: "inputHeight",
+      name: "inputHeight",
+      defaultValue: computedHeight
+    }, function (_ref4) {
+      var fieldProps = _ref4.fieldProps;
+      return (0, _react.jsx)(_tooltip.default, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(_messages.messages.inputHeightTooltip),
+        position: "top"
+      }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputHeight'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(_messages.messages.inputHeightAriaLabel)
+      })));
+    }), (0, _react.jsx)(_button.default, {
+      css: _styles.pixelEntryHiddenSubmit,
+      type: "submit"
+    }, formatMessage(_messages.messages.submitButtonText))));
+  }));
+};
+exports.PixelEntry = PixelEntry;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  validationFailedMessage: {
+    id: 'fabric.editor.media.pixelEntry.validationFailedMessage',
+    defaultMessage: 'Validation for width failed',
+    description: 'The passed in validator function returned false'
+  },
+  inputWidthTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
+    defaultMessage: 'Width',
+    description: 'The tooltip displayed ontop of the width input'
+  },
+  inputWidthAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
+    defaultMessage: 'width input',
+    description: 'The width input aria label'
+  },
+  inputHeightTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
+    defaultMessage: 'Height',
+    description: 'The tooltip displayed ontop of the height input'
+  },
+  inputHeightAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
+    defaultMessage: 'height input',
+    description: 'The width input aria label'
+  },
+  submitButtonText: {
+    id: 'fabric.editor.media.pixelEntry.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'The text give to the hidden submit button'
+  }
+});
+exports.messages = messages;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
+var pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+exports.pixelSizingWrapper = pixelSizingWrapper;
+var pixelEntryForm = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  form {\n    width: 100%;\n  }\n"])));
+exports.pixelEntryForm = pixelEntryForm;
+var pixelSizingInput = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: ", ";\n  & input {\n    text-align: center;\n  }\n"])), "var(--ds-space-300, 24px)");
+exports.pixelSizingInput = pixelSizingInput;
+var pixelSizingLabel = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
+exports.pixelSizingLabel = pixelSizingLabel;
+var pixelSizingWidthInput = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: widthinput;\n"])));
+exports.pixelSizingWidthInput = pixelSizingWidthInput;
+var pixelSizingHeightInput = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: heightinput;\n"])));
+exports.pixelSizingHeightInput = pixelSizingHeightInput;
+var pixelEntryHiddenSubmit = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
+exports.pixelEntryHiddenSubmit = pixelEntryHiddenSubmit;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

package/dist/cjs/version.json

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

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

@@ -1,14 +1,2 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
-const separator = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  align-self: center;
-`;
-export default (() => jsx("div", {
-  css: separator,
-  className: "separator"
-}));
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

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

@@ -24,6 +24,9 @@ import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/s
 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_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -256,6 +259,65 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'separator'
       });
     }
+
+    // Pixel Entry Toolbar Support
+    if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+      toolbarButtons.push({
+        type: 'custom',
+        fallback: [],
+        render: editorView => {
+          if (!editorView) {
+            return null;
+          }
+          const {
+            state,
+            dispatch
+          } = editorView;
+          const selectedMediaSingleNode = getSelectedMediaSingle(state);
+          if (!selectedMediaSingleNode) {
+            return null;
+          }
+          const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
+          if (!selectedMediaNode) {
+            return null;
+          }
+          const {
+            width: singleMediaWidth
+          } = selectedMediaSingleNode.node.attrs;
+          const {
+            width: mediaWidth,
+            height: mediaHeight
+          } = selectedMediaNode.attrs;
+          return /*#__PURE__*/React.createElement(PixelEntry, {
+            intl: intl,
+            width: singleMediaWidth,
+            mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
+            validate: value => {
+              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
+                return true;
+              }
+              return false;
+            },
+            onSubmit: ({
+              width
+            }) => {
+              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+                ...selectedMediaSingleNode.node.attrs,
+                width,
+                widthType: 'pixel'
+              });
+              dispatch(tr);
+            }
+          });
+        }
+      });
+      if (!pluginState.isResizing) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
+    }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
         type: 'custom',

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

@@ -0,0 +1,133 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Textfield from '@atlaskit/textfield';
+import Tooltip from '@atlaskit/tooltip';
+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';
+export const PixelEntry = ({
+  width,
+  mediaWidth,
+  mediaHeight,
+  onSubmit,
+  validate,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const ratioWidth = useMemo(() => {
+    return mediaHeight / mediaWidth;
+  }, [mediaHeight, mediaWidth]);
+  const ratioHeight = useMemo(() => {
+    return mediaWidth / mediaHeight;
+  }, [mediaHeight, mediaWidth]);
+  const [computedWidth, setComputedWidth] = useState(width);
+  const [computedHeight, setComputedHeight] = useState(Math.round(ratioWidth * width));
+
+  // Handle update to width from outside component
+  useEffect(() => {
+    setComputedWidth(width);
+    setComputedHeight(Math.round(ratioWidth * width));
+  }, [width, ratioWidth]);
+
+  // Handle submit when user presses enter in form
+  const handleOnSubmit = data => {
+    if (onSubmit) {
+      if (data.inputWidth === '') {
+        return;
+      }
+      onSubmit({
+        width: data.inputWidth
+      });
+    }
+  };
+
+  // Syncronous validation returning undefined for valid and string for invalid
+  const handleValidateWidth = useCallback(value => {
+    if (!value || !validate) {
+      return;
+    }
+    if (validate) {
+      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
+    }
+    return;
+  }, [validate, formatMessage]);
+
+  // Handle updating computed fields based on
+  const handleOnChange = useCallback(type => event => {
+    const value = parseInt(event.currentTarget.value);
+    const newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+    switch (type) {
+      case 'inputWidth':
+        {
+          setComputedWidth(newInputValue);
+          if (!isNaN(value)) {
+            setComputedHeight(Math.round(ratioWidth * value));
+          }
+          break;
+        }
+      case 'inputHeight':
+        {
+          setComputedHeight(newInputValue);
+          if (!isNaN(value)) {
+            setComputedWidth(Math.round(ratioHeight * value));
+          }
+          break;
+        }
+    }
+  }, [ratioHeight, ratioWidth]);
+  return jsx("div", {
+    css: pixelEntryForm
+  }, jsx(Form, {
+    onSubmit: handleOnSubmit
+  }, ({
+    formProps
+  }) => {
+    return jsx("form", formProps, jsx("div", {
+      css: pixelSizingWrapper
+    }, jsx(Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      validate: handleValidateWidth,
+      defaultValue: computedWidth
+    }, ({
+      fieldProps
+    }) => jsx(Tooltip, {
+      hideTooltipOnMouseDown: true,
+      content: formatMessage(messages.inputWidthTooltip),
+      position: "top"
+    }, jsx(Textfield, _extends({}, fieldProps, {
+      css: [pixelSizingWidthInput, pixelSizingInput],
+      appearance: "none",
+      isCompact: true,
+      onChange: handleOnChange('inputWidth'),
+      pattern: "\\d*",
+      "aria-label": formatMessage(messages.inputWidthAriaLabel)
+    })))), jsx("span", {
+      css: pixelSizingLabel
+    }, "x"), jsx(Field, {
+      key: "inputHeight",
+      name: "inputHeight",
+      defaultValue: computedHeight
+    }, ({
+      fieldProps
+    }) => jsx(Tooltip, {
+      hideTooltipOnMouseDown: true,
+      content: formatMessage(messages.inputHeightTooltip),
+      position: "top"
+    }, jsx(Textfield, _extends({}, fieldProps, {
+      css: [pixelSizingHeightInput, pixelSizingInput],
+      appearance: "none",
+      isCompact: true,
+      onChange: handleOnChange('inputHeight'),
+      pattern: "\\d*",
+      "aria-label": formatMessage(messages.inputHeightAriaLabel)
+    })))), jsx(Button, {
+      css: pixelEntryHiddenSubmit,
+      type: "submit"
+    }, formatMessage(messages.submitButtonText))));
+  }));
+};

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

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  validationFailedMessage: {
+    id: 'fabric.editor.media.pixelEntry.validationFailedMessage',
+    defaultMessage: 'Validation for width failed',
+    description: 'The passed in validator function returned false'
+  },
+  inputWidthTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
+    defaultMessage: 'Width',
+    description: 'The tooltip displayed ontop of the width input'
+  },
+  inputWidthAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
+    defaultMessage: 'width input',
+    description: 'The width input aria label'
+  },
+  inputHeightTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
+    defaultMessage: 'Height',
+    description: 'The tooltip displayed ontop of the height input'
+  },
+  inputHeightAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
+    defaultMessage: 'height input',
+    description: 'The width input aria label'
+  },
+  submitButtonText: {
+    id: 'fabric.editor.media.pixelEntry.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'The text give to the hidden submit button'
+  }
+});

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

@@ -0,0 +1,44 @@
+import { css } from '@emotion/react';
+const PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
+export const pixelSizingWrapper = css`
+  display: grid;
+  grid-template-columns: 1fr 1em 1fr 0;
+  grid-template-rows: auto;
+  grid-template-areas: 'widthinput label heightinput submit';
+  width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
+  text-align: center;
+  height: ${"var(--ds-space-300, 24px)"};
+
+  // Atlaskit fieldset does not allow style override
+  & > * {
+    margin-top: 0 !important;
+  }
+`;
+export const pixelEntryForm = css`
+  form {
+    width: 100%;
+  }
+`;
+export const pixelSizingInput = css`
+  width: 100%;
+  height: ${"var(--ds-space-300, 24px)"};
+  & input {
+    text-align: center;
+  }
+`;
+export const pixelSizingLabel = css`
+  grid-area: label;
+  line-height: ${"var(--ds-space-300, 24px)"};
+`;
+export const pixelSizingWidthInput = css`
+  grid-area: widthinput;
+`;
+export const pixelSizingHeightInput = css`
+  grid-area: heightinput;
+`;
+export const pixelEntryHiddenSubmit = css`
+  grid-area: submit;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+`;

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version-wrapper.js

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

package/dist/es2019/version.json

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

package/dist/esm/plugins/floating-toolbar/ui/Separator.js

@@ -1,12 +1,2 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"));
-export default (function () {
-  return jsx("div", {
-    css: separator,
-    className: "separator"
-  });
-});
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

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

@@ -28,6 +28,9 @@ import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/s
 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_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -248,6 +251,58 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'separator'
       });
     }
+
+    // Pixel Entry Toolbar Support
+    if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+      toolbarButtons.push({
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          if (!editorView) {
+            return null;
+          }
+          var state = editorView.state,
+            dispatch = editorView.dispatch;
+          var selectedMediaSingleNode = getSelectedMediaSingle(state);
+          if (!selectedMediaSingleNode) {
+            return null;
+          }
+          var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
+          if (!selectedMediaNode) {
+            return null;
+          }
+          var singleMediaWidth = selectedMediaSingleNode.node.attrs.width;
+          var _selectedMediaNode$at = selectedMediaNode.attrs,
+            mediaWidth = _selectedMediaNode$at.width,
+            mediaHeight = _selectedMediaNode$at.height;
+          return /*#__PURE__*/React.createElement(PixelEntry, {
+            intl: intl,
+            width: singleMediaWidth,
+            mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
+            validate: function validate(value) {
+              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
+                return true;
+              }
+              return false;
+            },
+            onSubmit: function onSubmit(_ref) {
+              var width = _ref.width;
+              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+                width: width,
+                widthType: 'pixel'
+              }));
+              dispatch(tr);
+            }
+          });
+        }
+      });
+      if (!pluginState.isResizing) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
+    }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
         type: 'custom',
@@ -296,8 +351,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       type: 'separator'
     });
   }
-  var _ref = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
-    hoverDecoration = _ref.hoverDecoration;
+  var _ref2 = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
+    hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
     type: 'button',
@@ -341,8 +396,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
-  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
-    hoverDecoration = _ref2.hoverDecoration;
+  var _ref3 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
+    hoverDecoration = _ref3.hoverDecoration;
   if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }

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

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Textfield from '@atlaskit/textfield';
+import Tooltip from '@atlaskit/tooltip';
+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';
+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;
+  var ratioWidth = useMemo(function () {
+    return mediaHeight / mediaWidth;
+  }, [mediaHeight, mediaWidth]);
+  var ratioHeight = useMemo(function () {
+    return mediaWidth / mediaHeight;
+  }, [mediaHeight, mediaWidth]);
+  var _useState = useState(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    computedWidth = _useState2[0],
+    setComputedWidth = _useState2[1];
+  var _useState3 = useState(Math.round(ratioWidth * width)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    computedHeight = _useState4[0],
+    setComputedHeight = _useState4[1];
+
+  // Handle update to width from outside component
+  useEffect(function () {
+    setComputedWidth(width);
+    setComputedHeight(Math.round(ratioWidth * width));
+  }, [width, ratioWidth]);
+
+  // Handle submit when user presses enter in form
+  var handleOnSubmit = function handleOnSubmit(data) {
+    if (onSubmit) {
+      if (data.inputWidth === '') {
+        return;
+      }
+      onSubmit({
+        width: data.inputWidth
+      });
+    }
+  };
+
+  // Syncronous validation returning undefined for valid and string for invalid
+  var handleValidateWidth = useCallback(function (value) {
+    if (!value || !validate) {
+      return;
+    }
+    if (validate) {
+      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
+    }
+    return;
+  }, [validate, formatMessage]);
+
+  // Handle updating computed fields based on
+  var handleOnChange = useCallback(function (type) {
+    return function (event) {
+      var value = parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      switch (type) {
+        case 'inputWidth':
+          {
+            setComputedWidth(newInputValue);
+            if (!isNaN(value)) {
+              setComputedHeight(Math.round(ratioWidth * value));
+            }
+            break;
+          }
+        case 'inputHeight':
+          {
+            setComputedHeight(newInputValue);
+            if (!isNaN(value)) {
+              setComputedWidth(Math.round(ratioHeight * value));
+            }
+            break;
+          }
+      }
+    };
+  }, [ratioHeight, ratioWidth]);
+  return jsx("div", {
+    css: pixelEntryForm
+  }, jsx(Form, {
+    onSubmit: handleOnSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps;
+    return jsx("form", formProps, jsx("div", {
+      css: pixelSizingWrapper
+    }, jsx(Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      validate: handleValidateWidth,
+      defaultValue: computedWidth
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return jsx(Tooltip, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(messages.inputWidthTooltip),
+        position: "top"
+      }, jsx(Textfield, _extends({}, fieldProps, {
+        css: [pixelSizingWidthInput, pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputWidth'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(messages.inputWidthAriaLabel)
+      })));
+    }), jsx("span", {
+      css: pixelSizingLabel
+    }, "x"), jsx(Field, {
+      key: "inputHeight",
+      name: "inputHeight",
+      defaultValue: computedHeight
+    }, function (_ref4) {
+      var fieldProps = _ref4.fieldProps;
+      return jsx(Tooltip, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(messages.inputHeightTooltip),
+        position: "top"
+      }, jsx(Textfield, _extends({}, fieldProps, {
+        css: [pixelSizingHeightInput, pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputHeight'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(messages.inputHeightAriaLabel)
+      })));
+    }), jsx(Button, {
+      css: pixelEntryHiddenSubmit,
+      type: "submit"
+    }, formatMessage(messages.submitButtonText))));
+  }));
+};

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

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  validationFailedMessage: {
+    id: 'fabric.editor.media.pixelEntry.validationFailedMessage',
+    defaultMessage: 'Validation for width failed',
+    description: 'The passed in validator function returned false'
+  },
+  inputWidthTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
+    defaultMessage: 'Width',
+    description: 'The tooltip displayed ontop of the width input'
+  },
+  inputWidthAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
+    defaultMessage: 'width input',
+    description: 'The width input aria label'
+  },
+  inputHeightTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
+    defaultMessage: 'Height',
+    description: 'The tooltip displayed ontop of the height input'
+  },
+  inputHeightAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
+    defaultMessage: 'height input',
+    description: 'The width input aria label'
+  },
+  submitButtonText: {
+    id: 'fabric.editor.media.pixelEntry.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'The text give to the hidden submit button'
+  }
+});

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

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { css } from '@emotion/react';
+var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
+export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+export var pixelEntryForm = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  form {\n    width: 100%;\n  }\n"])));
+export var pixelSizingInput = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  & input {\n    text-align: center;\n  }\n"])), "var(--ds-space-300, 24px)");
+export var pixelSizingLabel = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
+export var pixelSizingWidthInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  grid-area: widthinput;\n"])));
+export var pixelSizingHeightInput = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  grid-area: heightinput;\n"])));
+export var pixelEntryHiddenSubmit = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/version-wrapper.js

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

package/dist/esm/version.json

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

package/dist/types/plugins/floating-toolbar/ui/Separator.d.ts

@@ -1,4 +1,2 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-declare const _default: () => jsx.JSX.Element;
-export default _default;
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

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

@@ -0,0 +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;

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

@@ -0,0 +1,32 @@
+export declare const messages: {
+    validationFailedMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputWidthTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputWidthAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputHeightTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputHeightAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submitButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,7 @@
+export declare const pixelSizingWrapper: import("@emotion/react").SerializedStyles;
+export declare const pixelEntryForm: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingInput: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingLabel: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingWidthInput: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingHeightInput: import("@emotion/react").SerializedStyles;
+export declare const pixelEntryHiddenSubmit: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,35 @@
+import type { IntlShape } from 'react-intl-next';
+export type PixelEntryProps = {
+    /**
+     * IntlShape passed in for translations
+     */
+    intl: IntlShape;
+    /**
+     * The current pixel width
+     */
+    width: number;
+    /**
+     * The original media width used to calculate the height
+     */
+    mediaWidth: number;
+    /**
+     * The original media height used to calculate the width
+     */
+    mediaHeight: number;
+    /**
+     * The submit function that is called when the form is valid and the submit key is pressed
+     */
+    onSubmit?: (value: PixelEntryFormData) => void;
+    /**
+     * An optional validate function that is called before onSubmit is called.
+     * The value passed through the validator currently comes from the width input only.
+     */
+    validate?: (value: number | '') => boolean;
+};
+export type PixelEntryFormValues = {
+    inputWidth: number | '';
+    inputHeight: number | '';
+};
+export type PixelEntryFormData = {
+    width: number;
+};

package/dist/types-ts4.5/plugins/floating-toolbar/ui/Separator.d.ts

@@ -1,4 +1,2 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-declare const _default: () => jsx.JSX.Element;
-export default _default;
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

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

@@ -0,0 +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;

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

@@ -0,0 +1,32 @@
+export declare const messages: {
+    validationFailedMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputWidthTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputWidthAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputHeightTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputHeightAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submitButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,7 @@
+export declare const pixelSizingWrapper: import("@emotion/react").SerializedStyles;
+export declare const pixelEntryForm: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingInput: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingLabel: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingWidthInput: import("@emotion/react").SerializedStyles;
+export declare const pixelSizingHeightInput: import("@emotion/react").SerializedStyles;
+export declare const pixelEntryHiddenSubmit: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,35 @@
+import type { IntlShape } from 'react-intl-next';
+export type PixelEntryProps = {
+    /**
+     * IntlShape passed in for translations
+     */
+    intl: IntlShape;
+    /**
+     * The current pixel width
+     */
+    width: number;
+    /**
+     * The original media width used to calculate the height
+     */
+    mediaWidth: number;
+    /**
+     * The original media height used to calculate the width
+     */
+    mediaHeight: number;
+    /**
+     * The submit function that is called when the form is valid and the submit key is pressed
+     */
+    onSubmit?: (value: PixelEntryFormData) => void;
+    /**
+     * An optional validate function that is called before onSubmit is called.
+     * The value passed through the validator currently comes from the width input only.
+     */
+    validate?: (value: number | '') => boolean;
+};
+export type PixelEntryFormValues = {
+    inputWidth: number | '';
+    inputHeight: number | '';
+};
+export type PixelEntryFormData = {
+    width: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.14.11",
+  "version": "187.15.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.7.0",
-    "@atlaskit/editor-common": "^74.40.0",
+    "@atlaskit/editor-common": "^74.41.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",