@atlaskit/editor-core 188.2.11 → 188.3.1

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -1,188 +0,0 @@
-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;
-`;
-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/plugins/media/ui/MediaPicker/BrowserWrapper.js

@@ -1,31 +0,0 @@
-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/plugins/media/ui/MediaPicker/ClipboardWrapper.js

@@ -1,32 +0,0 @@
-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/plugins/media/ui/MediaPicker/DropzoneWrapper.js

@@ -1,42 +0,0 @@
-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/plugins/media/ui/MediaPicker/PickerFacadeProvider.js

@@ -1,83 +0,0 @@
-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: () => {}
-};
-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/plugins/media/ui/MediaPicker/index.js

@@ -1,80 +0,0 @@
-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
-  }));
-};
-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/plugins/media/ui/PixelEntry/constants.js

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

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

@@ -1,170 +0,0 @@
-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/plugins/media/ui/PixelEntry/messages.js

@@ -1,48 +0,0 @@
-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'
-  }
-});