@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -0,0 +1,190 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
+import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
+// Common Translations will live here
+import { PanelTextInput } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
+import { R400 } from '@atlaskit/theme/colors';
+import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
+const validationWrapper = css`
+  line-height: 0;
+  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"}
+    ${"var(--ds-space-150, 12px)"} 0;
+  margin: 0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-400, 32px)"};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+`;
+const buttonWrapper = css`
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}
+    ${"var(--ds-space-050, 4px)"} 0px;
+`;
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class LinkAddToolbar extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      validationErrors: []
+    });
+    _defineProperty(this, "handleSubmit", ({
+      url,
+      inputMethod
+    }) => {
+      this.props.onSubmit(url, {
+        inputMethod
+      });
+    });
+    _defineProperty(this, "handleOnBack", ({
+      url,
+      inputMethod
+    }) => {
+      const {
+        onBack
+      } = this.props;
+      if (onBack) {
+        onBack(url, {
+          inputMethod
+        });
+      }
+    });
+    _defineProperty(this, "handleCancel", () => {
+      const {
+        onCancel
+      } = this.props;
+      if (onCancel) {
+        onCancel();
+      }
+    });
+    _defineProperty(this, "handleUnlink", () => {
+      const {
+        onUnlink
+      } = this.props;
+      if (onUnlink) {
+        onUnlink();
+      }
+    });
+    _defineProperty(this, "handleOnBlur", options => {
+      this.props.onBlur(options.url);
+    });
+    _defineProperty(this, "renderContainer", ({
+      activityProvider,
+      inputProps: {
+        onChange,
+        onKeyDown,
+        onSubmit,
+        value
+      },
+      currentInputMethod,
+      renderRecentList
+    }) => {
+      const {
+        intl: {
+          formatMessage
+        },
+        displayUrl
+      } = this.props;
+      const getPlaceholder = hasActivityProvider => formatMessage(hasActivityProvider ? linkToolbarMessages.placeholder : linkToolbarMessages.linkPlaceholder);
+      const formatLinkAddressText = formatMessage(mediaLinkToolbarMessages.backLink);
+      const formatUnlinkText = formatMessage(linkToolbarMessages.unlink);
+      const errorsList = this.state.validationErrors.map(function (error, index) {
+        return jsx(ErrorMessage, {
+          key: index
+        }, error);
+      });
+      return jsx("div", {
+        className: "recent-list"
+      }, jsx("div", {
+        css: [container, !!activityProvider && containerWithProvider]
+      }, jsx("div", {
+        css: inputWrapper
+      }, jsx("span", {
+        css: buttonWrapper
+      }, jsx(Button, {
+        title: formatLinkAddressText,
+        icon: jsx(ChevronLeftLargeIcon, {
+          label: formatLinkAddressText
+        }),
+        onClick: () => this.handleOnBack({
+          url: value,
+          inputMethod: currentInputMethod
+        })
+      })), jsx(PanelTextInput, {
+        testId: "media-link-input",
+        placeholder: getPlaceholder(!!activityProvider),
+        autoFocus: true,
+        onCancel: this.handleCancel,
+        defaultValue: value,
+        onSubmit: inputValue => {
+          const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
+          this.setState({
+            validationErrors
+          });
+          if (!validationErrors.length) {
+            onSubmit();
+          }
+        },
+        onChange: value => {
+          this.setState({
+            validationErrors: []
+          });
+          onChange(value);
+        },
+        onKeyDown: onKeyDown
+      }), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+        title: formatUnlinkText,
+        icon: jsx(EditorUnlinkIcon, {
+          label: formatUnlinkText
+        }),
+        onClick: this.handleUnlink
+      }))), !!errorsList.length && jsx("section", {
+        css: validationWrapper
+      }, errorsList), renderRecentList()));
+    });
+  }
+  getValidationErrors(value, inputMethod) {
+    const {
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+
+    // dont show validation errors if input method is typeahed, which means user selects from search list
+    if (inputMethod === INPUT_METHOD.TYPEAHEAD) {
+      return [];
+    }
+    if (!value) {
+      return [formatMessage(linkToolbarMessages.emptyLink)];
+    }
+    // if url can be normalized - we consider it is a valid url
+    // also don't show validaition errors for empty values
+    if (normalizeUrl(value)) {
+      return [];
+    } else {
+      return [formatMessage(linkToolbarMessages.invalidLink)];
+    }
+  }
+  render() {
+    const {
+      providerFactory,
+      displayUrl
+    } = this.props;
+    return jsx(RecentSearch, {
+      defaultUrl: normalizeUrl(displayUrl),
+      providerFactory: providerFactory,
+      onSubmit: this.handleSubmit,
+      onBlur: this.handleOnBlur,
+      render: this.renderContainer
+    });
+  }
+}
+export default LinkAddToolbar;

package/dist/es2019/ui/MediaPicker/BrowserWrapper.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Browser } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
+export const BrowserWrapper = ({
+  mediaState,
+  isOpen,
+  onBrowseFn,
+  featureFlags
+}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+  mediaState: mediaState,
+  analyticsName: "browser"
+}, ({
+  mediaClientConfig,
+  config,
+  pickerFacadeInstance
+}) => {
+  const browserConfig = {
+    ...config,
+    multiple: true
+  };
+  return /*#__PURE__*/React.createElement(Browser, {
+    onBrowseFn: onBrowseFn,
+    isOpen: isOpen,
+    config: browserConfig,
+    mediaClientConfig: mediaClientConfig,
+    onEnd: pickerFacadeInstance.handleReady,
+    onError: pickerFacadeInstance.handleUploadError,
+    onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+    featureFlags: featureFlags
+  });
+});

package/dist/es2019/ui/MediaPicker/ClipboardWrapper.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Clipboard } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
+export const ClipboardWrapper = ({
+  mediaState,
+  featureFlags,
+  container
+}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+  mediaState: mediaState,
+  analyticsName: "clipboard"
+}, ({
+  mediaClientConfig,
+  config,
+  pickerFacadeInstance
+}) => {
+  const clipboardConfig = Object.assign({}, config);
+  if ((featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.securedClipboard) === true) {
+    clipboardConfig.container = container;
+    clipboardConfig.onPaste = event => {
+      event.stopPropagation();
+      return false;
+    };
+  }
+  return /*#__PURE__*/React.createElement(Clipboard, {
+    mediaClientConfig: mediaClientConfig,
+    config: clipboardConfig,
+    onError: pickerFacadeInstance.handleUploadError,
+    onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+    onEnd: pickerFacadeInstance.handleReady,
+    featureFlags: featureFlags
+  });
+});

package/dist/es2019/ui/MediaPicker/DropzoneWrapper.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { Dropzone } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
+export const DropzoneWrapper = ({
+  mediaState,
+  isActive,
+  featureFlags,
+  editorDomElement,
+  appearance
+}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+  mediaState: mediaState,
+  analyticsName: "dropzone"
+}, ({
+  mediaClientConfig,
+  config,
+  pickerFacadeInstance
+}) => {
+  const {
+    options: {
+      customDropzoneContainer
+    },
+    handleDrag
+  } = mediaState;
+  const editorHtmlElement = editorDomElement;
+  const scrollParent = appearance === 'full-page' && findOverflowScrollParent(editorHtmlElement);
+  const container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
+  const dropzoneConfig = {
+    ...config,
+    container
+  };
+  return isActive ? /*#__PURE__*/React.createElement(Dropzone, {
+    mediaClientConfig: mediaClientConfig,
+    config: dropzoneConfig,
+    onError: pickerFacadeInstance.handleUploadError,
+    onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+    onEnd: pickerFacadeInstance.handleReady,
+    onDragEnter: () => handleDrag('enter'),
+    onDragLeave: () => handleDrag('leave'),
+    featureFlags: featureFlags
+  }) : null;
+});

package/dist/es2019/ui/MediaPicker/PickerFacadeProvider.js

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { ErrorReporter } from '@atlaskit/editor-common/utils';
+import PickerFacade from '../../picker-facade';
+const dummyMediaPickerObject = {
+  on: () => {},
+  removeAllListeners: () => {},
+  emit: () => {},
+  destroy: () => {},
+  setUploadParams: () => {}
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export default class PickerFacadeProvider extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {});
+    _defineProperty(this, "handleMediaProvider", async (_name, provider) => {
+      const {
+        mediaState,
+        analyticsName
+      } = this.props;
+      const mediaProvider = await provider;
+      if (!mediaProvider || !mediaProvider.uploadParams) {
+        return;
+      }
+      const resolvedMediaClientConfig = (await mediaProvider.uploadMediaClientConfig) || (await mediaProvider.viewMediaClientConfig);
+      if (!resolvedMediaClientConfig) {
+        return;
+      }
+      const pickerFacadeConfig = {
+        mediaClientConfig: resolvedMediaClientConfig,
+        errorReporter: mediaState.options.errorReporter || new ErrorReporter(),
+        featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+      };
+
+      /**
+       * As the first MediaPicker component to be migrated to React, we want to scope the amount of changes logic changed/moved on Editor side.
+       * To achieve this we agreed on using `PickerFacade` 'customMediaPicker' type, since we only need this instance to reuse the logic when we subscribe
+       * for all the different events in MediaPicker (onPreviewUpdate, onError, onProcessing, etc).
+       * The `dummyMediaPickerObject` provided here serves as a workaround for the old picker api that `PickerFacade` will try to use.
+       * But we don't want this to do anything since it's all part of the new React component (`Clipboard` component in this case).
+       * Eventually PickerFacade will be removed and replaced with a new abstraction explained here https://product-fabric.atlassian.net/browse/MS-1937
+       */
+      const pickerFacadeInstance = await new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
+
+      /**
+       * Based on the `initPickers` method in `MediaPluginState` we need these 2 `onNewMedia` subscriptions.
+       * First one in order to trigger the entire process of uploading a file for when `onPreviewUpdate` is called
+       * Second one in order to track all analytics as before.
+       */
+      pickerFacadeInstance.onNewMedia(mediaState.insertFile);
+      pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
+      const config = {
+        uploadParams: mediaProvider.uploadParams
+      };
+      this.setState({
+        pickerFacadeInstance,
+        config,
+        mediaClientConfig: resolvedMediaClientConfig
+      });
+    });
+  }
+  componentDidMount() {
+    this.props.mediaState.options.providerFactory.subscribe('mediaProvider', this.handleMediaProvider);
+  }
+  componentWillUnmount() {
+    this.props.mediaState.options.providerFactory.unsubscribe('mediaProvider', this.handleMediaProvider);
+  }
+  render() {
+    const {
+      mediaClientConfig,
+      config,
+      pickerFacadeInstance
+    } = this.state;
+    if (!mediaClientConfig || !config || !pickerFacadeInstance) {
+      return null;
+    }
+    return this.props.children({
+      mediaClientConfig,
+      config,
+      pickerFacadeInstance
+    });
+  }
+}

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

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { BrowserWrapper } from './BrowserWrapper';
+import { ClipboardWrapper } from './ClipboardWrapper';
+import { DropzoneWrapper } from './DropzoneWrapper';
+const MediaPicker = ({
+  api,
+  isPopupOpened,
+  appearance,
+  mediaState,
+  onBrowseFn,
+  editorDomElement
+}) => {
+  const {
+    focusState
+  } = useSharedPluginState(api, ['focus']);
+  const featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
+  const container = editorDomElement;
+  const clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
+    mediaState: mediaState,
+    featureFlags: featureFlags,
+    container: container
+  }) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, clipboard, /*#__PURE__*/React.createElement(DropzoneWrapper, {
+    mediaState: mediaState,
+    isActive: !isPopupOpened,
+    featureFlags: featureFlags,
+    editorDomElement: editorDomElement,
+    appearance: appearance
+  }), /*#__PURE__*/React.createElement(BrowserWrapper, {
+    onBrowseFn: onBrowseFn,
+    mediaState: mediaState,
+    featureFlags: featureFlags
+  }));
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class MediaPickerComponents extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      isPopupOpened: false
+    });
+    _defineProperty(this, "onBrowseFn", nativeBrowseFn => {
+      const {
+        mediaState
+      } = this.props;
+      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+    });
+  }
+  componentDidMount() {
+    const {
+      mediaState
+    } = this.props;
+    mediaState.onPopupToggle(isPopupOpened => {
+      this.setState({
+        isPopupOpened
+      });
+    });
+  }
+  render() {
+    const {
+      api,
+      mediaState,
+      editorDomElement,
+      appearance
+    } = this.props;
+    const {
+      isPopupOpened
+    } = this.state;
+    return /*#__PURE__*/React.createElement(MediaPicker, {
+      mediaState: mediaState,
+      editorDomElement: editorDomElement,
+      appearance: appearance,
+      isPopupOpened: isPopupOpened,
+      onBrowseFn: this.onBrowseFn,
+      api: api
+    });
+  }
+}
+_defineProperty(MediaPickerComponents, "displayName", 'MediaPickerComponents');

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

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

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

@@ -0,0 +1,170 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button';
+import Form, { Field } from '@atlaskit/form';
+import Textfield from '@atlaskit/textfield';
+import Tooltip from '@atlaskit/tooltip';
+import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
+import { messages } from './messages';
+import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+export const PixelEntry = ({
+  width,
+  mediaWidth,
+  mediaHeight,
+  onSubmit,
+  minWidth,
+  maxWidth,
+  onChange,
+  intl: {
+    formatMessage
+  },
+  showMigration,
+  onMigrate
+}) => {
+  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 (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
+    if (onSubmit) {
+      let widthToBeSumitted = data.inputWidth;
+      let validation = 'valid';
+      if (data.inputWidth < minWidth) {
+        widthToBeSumitted = minWidth;
+        validation = 'less-than-min';
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSumitted = maxWidth;
+        validation = 'greater-than-max';
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (validation !== 'valid') {
+        setComputedWidth(widthToBeSumitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
+      }
+      onSubmit({
+        width: widthToBeSumitted,
+        validation
+      });
+    }
+  };
+
+  // Handle updating computed fields based on
+  const handleOnChange = useCallback(type => event => {
+    const value = parseInt(event.currentTarget.value);
+    const newInputValue = isNaN(value) ? '' : value;
+    let newWidth = '';
+    switch (type) {
+      case 'inputWidth':
+        {
+          newWidth = newInputValue;
+          setComputedWidth(newInputValue);
+          const newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+          setComputedHeight(newHeight);
+          break;
+        }
+      case 'inputHeight':
+        {
+          setComputedHeight(newInputValue);
+          newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+          setComputedWidth(newWidth);
+          break;
+        }
+    }
+    const isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+    onChange && onChange(isInvalidInputValid);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
+  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, {
+    onSubmit: handleOnSubmit
+  }, ({
+    formProps
+  }) => {
+    return jsx("form", formProps, jsx("div", {
+      css: pixelSizingWrapper
+    }, jsx(Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      defaultValue: computedWidth
+    }, ({
+      fieldProps
+    }) => jsx(Tooltip, {
+      hideTooltipOnMouseDown: true,
+      content: formatMessage(messages.inputWidthTooltip, {
+        maxWidth
+      }),
+      position: "top"
+    }, jsx(Textfield, _extends({}, fieldProps, {
+      css: [pixelSizingWidthInput, pixelSizingInput],
+      appearance: "none",
+      isCompact: true,
+      onChange: handleOnChange('inputWidth'),
+      pattern: "\\d*",
+      "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+        maxWidth
+      })
+    })))), 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))));
+  }));
+};
+export const FullWidthDisplay = ({
+  intl: {
+    formatMessage
+  }
+}) => {
+  return jsx("div", {
+    css: pixelSizingFullWidthLabelStyles
+  }, jsx("span", null, formatMessage(messages.fullWidthLabel)));
+};

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

@@ -0,0 +1,48 @@
+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: 'Max width {maxWidth}px',
+    description: 'The tooltip displayed ontop of the width input'
+  },
+  inputWidthAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
+    defaultMessage: 'Max width {maxWidth}px',
+    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'
+  },
+  fullWidthLabel: {
+    id: 'fabric.editor.image.fullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'The media has reached its maximum width'
+  },
+  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'
+  }
+});