@atlaskit/editor-core 187.40.1 → 187.41.0

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
+import debounce from 'lodash/debounce';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
@@ -11,6 +12,8 @@ import Textfield from '@atlaskit/textfield';
 import { countStyles, sectionWrapperStyles } from './styles';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
+import rafSchd from 'raf-schd';
+export const FIND_DEBOUNCE_MS = 100;
 const messages = defineMessages({
   find: {
     id: 'fabric.editor.find',
@@ -53,7 +56,7 @@ class Find extends React.Component {
     super(props);
     _defineProperty(this, "findTextfieldRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "isComposing", false);
-    _defineProperty(this, "syncFindText", () => {
+    _defineProperty(this, "syncFindText", onSynced => {
       var _this$state;
       // If the external prop findText changes and we aren't in a composition we should update to
       // use the external prop value.
@@ -61,15 +64,9 @@ class Find extends React.Component {
       // An example of where this may happen is when a find occurs through the user selecting some text
       // and pressing Mod-f.
       if (!this.isComposing && this.props.findText !== ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.localFindText)) {
-        this.updateFindValue(this.props.findText || '');
+        this.updateFindValue(this.props.findText || '', onSynced);
       }
     });
-    _defineProperty(this, "skipWhileComposing", fn => {
-      if (this.isComposing) {
-        return;
-      }
-      fn();
-    });
     _defineProperty(this, "focusFindTextfield", () => {
       const input = this.findTextfieldRef.current;
       if (this.props.shouldFocus && input) {
@@ -79,15 +76,24 @@ class Find extends React.Component {
     _defineProperty(this, "handleFindChange", event => {
       this.updateFindValue(event.target.value);
     });
-    _defineProperty(this, "updateFindValue", value => {
+    // debounce (vs throttle) to not block typing inside find input while onFind runs
+    _defineProperty(this, "debouncedFind", debounce(value => {
+      this.props.onFind(value);
+    }, FIND_DEBOUNCE_MS));
+    _defineProperty(this, "updateFindValue", (value, onSynced) => {
       this.setState({
         localFindText: value
-      });
-      this.skipWhileComposing(() => {
-        this.props.onFind(value);
+      }, () => {
+        if (this.isComposing) {
+          return;
+        }
+        onSynced && onSynced();
+        this.debouncedFind(value);
       });
     });
-    _defineProperty(this, "handleFindKeyDown", event => this.skipWhileComposing(() => {
+    // throtlle between animation frames gives better experience on Enter compared to arbitrary value
+    // it adjusts based on performance (and document size)
+    _defineProperty(this, "handleFindKeyDownThrottled", rafSchd(event => {
       if (event.key === 'Enter') {
         if (event.shiftKey) {
           this.props.onFindPrev({
@@ -103,16 +109,32 @@ class Find extends React.Component {
         this.props.onArrowDown();
       }
     }));
-    _defineProperty(this, "handleFindNextClick", ref => this.skipWhileComposing(() => {
+    _defineProperty(this, "handleFindKeyDown", event => {
+      if (this.isComposing) {
+        return;
+      }
+      event.persist();
+      this.handleFindKeyDownThrottled(event);
+    });
+    _defineProperty(this, "handleFindKeyUp", () => {
+      this.handleFindKeyDownThrottled.cancel();
+    });
+    _defineProperty(this, "handleFindNextClick", ref => {
+      if (this.isComposing) {
+        return;
+      }
       this.props.onFindNext({
         triggerMethod: TRIGGER_METHOD.BUTTON
       });
-    }));
-    _defineProperty(this, "handleFindPrevClick", ref => this.skipWhileComposing(() => {
+    });
+    _defineProperty(this, "handleFindPrevClick", ref => {
+      if (this.isComposing) {
+        return;
+      }
       this.props.onFindPrev({
         triggerMethod: TRIGGER_METHOD.BUTTON
       });
-    }));
+    });
     _defineProperty(this, "handleCompositionStart", () => {
       this.isComposing = true;
     });
@@ -165,12 +187,36 @@ class Find extends React.Component {
   }
   componentDidMount() {
     this.props.onFindTextfieldRefSet(this.findTextfieldRef);
-    this.focusFindTextfield();
-    this.syncFindText();
+
+    // focus initially on dialog mount if there is no find text provided
+    if (!this.props.findText) {
+      this.focusFindTextfield();
+    }
+    this.syncFindText(() => {
+      // focus after input is synced if find text provided
+      if (this.props.findText) {
+        this.focusFindTextfield();
+      }
+    });
+  }
+  componentDidUpdate(prevProps) {
+    var _this$state2;
+    // focus on update if find text did not change
+    if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
+      this.focusFindTextfield();
+    }
+    if (this.props.findText !== prevProps.findText) {
+      this.syncFindText(() => {
+        // focus after input is synced if find text provided
+        if (this.props.findText) {
+          this.focusFindTextfield();
+        }
+      });
+    }
   }
-  componentDidUpdate() {
-    this.focusFindTextfield();
-    this.syncFindText();
+  componentWillUnmount() {
+    this.debouncedFind.cancel();
+    this.handleFindKeyDownThrottled.cancel();
   }
   render() {
     const {
@@ -197,6 +243,7 @@ class Find extends React.Component {
       autoComplete: "off",
       onChange: this.handleFindChange,
       onKeyDown: this.handleFindKeyDown,
+      onKeyUp: this.handleFindKeyUp,
       onBlur: this.props.onFindBlur,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd

package/dist/es2019/plugins/quick-insert/index.js

@@ -48,7 +48,8 @@ const quickInsertPlugin = ({
     if (options !== null && options !== void 0 && options.enableElementBrowser) {
       return /*#__PURE__*/React.createElement(ModalElementBrowser, {
         editorView: editorView,
-        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl
+        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+        pluginInjectionAPI: api
       });
     }
     return null;
@@ -64,7 +65,8 @@ const quickInsertPlugin = ({
     return {
       lazyDefaultItems: quickInsertState.lazyDefaultItems,
       emptyStateHandler: quickInsertState.emptyStateHandler,
-      providedItems: quickInsertState.providedItems
+      providedItems: quickInsertState.providedItems,
+      isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
     };
   },
   actions: {

package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js

@@ -8,23 +8,23 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import Button from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
-import ElementBrowser from './components/ElementBrowserLoader';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { getCategories } from './categories';
-import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+export const MODAL_WRAPPER_PADDING = 16;
 const actions = css`
   display: inline-flex;
   margin: 0 -4px;
 `;
 const actionItem = css`
   flex: 1 0 auto;
-  margin: 0 4px;
+  margin: 0 ${"var(--ds-space-050, 4px)"};
 `;
 const wrapper = css`
   display: flex;
   flex: 1 1 auto;
   box-sizing: border-box;
-  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
+  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0 10px;
   overflow: hidden;
   background-color: ${themed({
   light: `var(--ds-surface-overlay, ${N0})`,
@@ -34,7 +34,7 @@ const wrapper = css`
 `;
 const modalFooter = css`
   display: flex;
-  padding: ${MODAL_WRAPPER_PADDING}px;
+  padding: ${"var(--ds-space-200, 16px)"};
 
   position: relative;
   align-items: center;

package/dist/es2019/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey } from '../../plugin-key';
-import ModalElementBrowser from '../../../../ui/ElementBrowser/ModalElementBrowser';
+import ModalElementBrowser from './ModalElementBrowser';
 import { closeElementBrowserModal, insertItem } from '../../commands';
 import { getQuickInsertSuggestions } from '../../search';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const Modal = ({
   quickInsertState,
   editorView,
@@ -38,19 +37,15 @@ const Modal = ({
 };
 export default (({
   editorView,
-  helpUrl
+  helpUrl,
+  pluginInjectionAPI
 }) => {
-  const render = useCallback(({
+  const {
     quickInsertState
-  }) => /*#__PURE__*/React.createElement(Modal, {
-    quickInsertState: quickInsertState,
+  } = useSharedPluginState(pluginInjectionAPI, ['quickInsert']);
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
     editorView: editorView,
     helpUrl: helpUrl
-  }), [editorView, helpUrl]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      quickInsertState: pluginKey
-    },
-    render: render
   });
 });

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -9,9 +9,8 @@ import { borderRadius } from '@atlaskit/theme';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import withOuterListeners from '../with-outer-listeners';
-import ElementBrowser from './components/ElementBrowserLoader';
-import { ELEMENT_ITEM_HEIGHT } from './constants';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { ElementBrowser, ELEMENT_ITEM_HEIGHT } from '@atlaskit/editor-common/element-browser';
 const InsertMenu = ({
   editorView,
   dropdownItems,

package/dist/es2019/ui/ElementBrowser/types.js

@@ -1,5 +1 @@
-export let Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
+export {};

package/dist/es2019/version-wrapper.js

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

package/dist/esm/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -22,8 +22,8 @@ export default function useEditorConstructor(performanceTracking, featureFlags,
     startMeasure(measurements.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      measureTTI(function (tti, ttiFromInvocation, canceled) {
-        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      measureTTI(function (tti, ttiFromInvocation, canceled, distortedDuration) {
+        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/esm/editor-next/utils/editorMeasureTTICallback.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience } from '@atlaskit/editor-common/ufo';
 import { getTTISeverity } from '@atlaskit/editor-common/utils';
-export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -12,7 +12,8 @@ export default function editorMeasureTTICallback(tti, ttiFromInvocation, cancele
         attributes: {
           tti: tti,
           ttiFromInvocation: ttiFromInvocation,
-          canceled: canceled
+          canceled: canceled,
+          distortedDuration: distortedDuration
         },
         eventType: EVENT_TYPE.OPERATIONAL
       }

package/dist/esm/element-browser.js

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

package/dist/esm/i18n/cs.js

@@ -109,6 +109,7 @@ export default {
   'fabric.editor.heading6Description': 'Použít pro nadpis nejnižší úrovně',
   'fabric.editor.headingLink.toolbarHelpTitle': 'Otevřít dialog nápovědy',
   'fabric.editor.helpDialogTips': 'Zmáčkněte {keyMap}, abyste mohli kdykoliv rychle otevřít tento dialog.',
+  'fabric.editor.image.fullWidthLabel': 'Celá šířka',
   'fabric.editor.imageBorderBold': 'Tučné',
   'fabric.editor.imageBorderColor': 'Barva',
   'fabric.editor.imageBorderMedium': 'Střední',
@@ -124,13 +125,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Pozvat týmového kolegu do produktu {productName}} trusted {Pozvat týmového kolegu do produktu {productName}} other {Přidat týmového kolegu do produktu {productName}}}',
   'fabric.editor.keyboardShortcuts': 'Klávesové zkratky',
   'fabric.editor.leftSidebar': 'Levý postranní panel',
-  'fabric.editor.lists': 'Seznamy',
   'fabric.editor.markdown': 'Snížení',
   'fabric.editor.matchCase': 'Rozlišovat malá a velká písmena',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': 'vstup výšky',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': 'Výška',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'vstup šířky',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Šířka',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Maximální šířka {maxWidth} px',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Maximální šířka {maxWidth} px',
+  'fabric.editor.media.pixelEntry.migrationButtonText': 'Převést na pixely',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': 'Přechod z procentuální velikosti na velikost v pixelech',
   'fabric.editor.media.pixelEntry.submitButtonText': 'Odeslat',
   'fabric.editor.media.pixelEntry.validationFailedMessage': 'Ověření šířky se nezdařilo',
   'fabric.editor.mediaGroupDeleteLabel': 'Odstranit',
@@ -143,8 +145,6 @@ export default {
   'fabric.editor.note': 'Poznámka',
   'fabric.editor.notePanel': 'Panel poznámek',
   'fabric.editor.notePanel.description': 'Přidat poznámku do barevného panelu',
-  'fabric.editor.orderedList': 'Číslovaný seznam',
-  'fabric.editor.orderedList.description': 'Vytvořit seřazený seznam',
   'fabric.editor.other': 'Jiné...',
   'fabric.editor.outdent': 'Zmenšit odsazení',
   'fabric.editor.panel.backgroundColor': 'Barva pozadí',
@@ -186,12 +186,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': 'Uživatelé, které můžete označit',
   'fabric.editor.typeahead.metionListItemLabel': 'Uživatel {name} @{shortName}',
   'fabric.editor.undo': 'Vrátit',
-  'fabric.editor.unorderedList': 'Seznam s odrážkami',
-  'fabric.editor.unorderedList.description': 'Vytvořit neseřazený seznam',
   'fabric.editor.warning': 'Varování',
   'fabric.editor.warningPanel': 'Panel upozornění',
   'fabric.editor.warningPanel.description': 'Přidat poznámku s varováním do barevného panelu',
   'fabric.editor.wrapLeft': 'Sbalit vpravo',
-  'fabric.editor.wrapRight': 'Sbalit vlevo',
-  'fabric.emoji.label': 'Smajlík'
+  'fabric.editor.wrapRight': 'Sbalit vlevo'
 };

package/dist/esm/i18n/da.js

@@ -108,6 +108,7 @@ export default {
   'fabric.editor.heading6Description': 'Brug denne til overskrift på lavt niveau',
   'fabric.editor.headingLink.toolbarHelpTitle': 'Åbn dialogboksen Hjælp',
   'fabric.editor.helpDialogTips': 'Tryk på {keyMap} for at få hurtig adgang til denne dialogboks',
+  'fabric.editor.image.fullWidthLabel': 'Fuld bredde',
   'fabric.editor.imageBorderBold': 'Fed',
   'fabric.editor.imageBorderColor': 'Farve',
   'fabric.editor.imageBorderMedium': 'Medium',
@@ -123,13 +124,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Inviter teammedlemmer til {productName}} trusted {Inviter teammedlemmer til {productName}} other {Tilføj teammedlem til {productName}}}',
   'fabric.editor.keyboardShortcuts': 'Tastaturgenveje',
   'fabric.editor.leftSidebar': 'Venstre sidebjælke',
-  'fabric.editor.lists': 'Liste',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Match store/små bogstaver',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': 'højdeinput',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': 'Højde',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'breddeinput',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Bredde',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Maks. bredde {maxWidth} px',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Maks. bredde {maxWidth} px',
+  'fabric.editor.media.pixelEntry.migrationButtonText': 'Konverter til pixels',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': 'Overfør fra procentdel til fast pixelstørrelse',
   'fabric.editor.media.pixelEntry.submitButtonText': 'Indsend',
   'fabric.editor.media.pixelEntry.validationFailedMessage': 'Validering af bredde mislykkedes',
   'fabric.editor.mediaGroupDeleteLabel': 'Slet',
@@ -142,8 +144,6 @@ export default {
   'fabric.editor.note': 'Note',
   'fabric.editor.notePanel': 'Bemærkningspanel',
   'fabric.editor.notePanel.description': 'Tilføj en note i et farvet panel',
-  'fabric.editor.orderedList': 'Nummereret liste',
-  'fabric.editor.orderedList.description': 'Opret en sorteret liste',
   'fabric.editor.other': 'Andre ...',
   'fabric.editor.outdent': 'Ryk ud',
   'fabric.editor.panel.backgroundColor': 'Baggrundsfarve',
@@ -185,12 +185,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': 'Brugere, du kan tagge',
   'fabric.editor.typeahead.metionListItemLabel': 'Brugeren {name} @{shortName}',
   'fabric.editor.undo': 'Fortryd',
-  'fabric.editor.unorderedList': 'Punktopstilling',
-  'fabric.editor.unorderedList.description': 'Opret en ikke-sorteret liste',
   'fabric.editor.warning': 'Advarsel',
   'fabric.editor.warningPanel': 'Advarselspanel',
   'fabric.editor.warningPanel.description': 'Tilføj en advarselsnote i et farvet panel',
   'fabric.editor.wrapLeft': 'Skub til venstre',
-  'fabric.editor.wrapRight': 'Skub til højre',
-  'fabric.emoji.label': 'Emoji'
+  'fabric.editor.wrapRight': 'Skub til højre'
 };

package/dist/esm/i18n/de.js

@@ -108,6 +108,7 @@ export default {
   'fabric.editor.heading6Description': 'Verwenden Sie dies für Überschriften niedrigerer Ebene.',
   'fabric.editor.headingLink.toolbarHelpTitle': 'Hilfe öffnen',
   'fabric.editor.helpDialogTips': 'Drücken Sie {keyMap}, um diesen Dialog jederzeit schnell zu öffnen',
+  'fabric.editor.image.fullWidthLabel': 'Volle Breite',
   'fabric.editor.imageBorderBold': 'Breit',
   'fabric.editor.imageBorderColor': 'Farbe',
   'fabric.editor.imageBorderMedium': 'Mittel',
@@ -123,13 +124,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Teammitglied zu {productName} einladen} trusted {Teammitglied zu {productName} einladen} other {Teammitglied zu {productName} hinzufügen}}',
   'fabric.editor.keyboardShortcuts': 'Tastenkombinationen',
   'fabric.editor.leftSidebar': 'Linke Seitenleiste',
-  'fabric.editor.lists': 'Listen',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Groß-/Kleinschreibung beachten',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': 'Eingabe der Höhe',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': 'Höhe',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Eingabe der Breite',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Breite',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Maximale Breite: {maxWidth} px',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Maximale Breite: {maxWidth} px',
+  'fabric.editor.media.pixelEntry.migrationButtonText': 'In Pixel umwandeln',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': 'Von prozentualer zu fester Pixelgröße migrieren',
   'fabric.editor.media.pixelEntry.submitButtonText': 'Senden',
   'fabric.editor.media.pixelEntry.validationFailedMessage': 'Überprüfung der Breite fehlgeschlagen',
   'fabric.editor.mediaGroupDeleteLabel': 'Löschen',
@@ -142,8 +144,6 @@ export default {
   'fabric.editor.note': 'Hinweis',
   'fabric.editor.notePanel': 'Hinweis-Panel',
   'fabric.editor.notePanel.description': 'Hinweis in einem farbigen Panel einfügen',
-  'fabric.editor.orderedList': 'Nummerierte Liste',
-  'fabric.editor.orderedList.description': 'Sortierte Liste erstellen',
   'fabric.editor.other': 'Sonstige …',
   'fabric.editor.outdent': 'Einzug verkleinern',
   'fabric.editor.panel.backgroundColor': 'Hintergrundfarbe',
@@ -185,12 +185,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': 'Benutzer, die Sie kennzeichnen können',
   'fabric.editor.typeahead.metionListItemLabel': 'Benutzer {name} @{shortName}',
   'fabric.editor.undo': 'Rückgängig',
-  'fabric.editor.unorderedList': 'Aufzählung',
-  'fabric.editor.unorderedList.description': 'Unsortierte Liste erstellen',
   'fabric.editor.warning': 'Warnung',
   'fabric.editor.warningPanel': 'Warn-Panel',
   'fabric.editor.warningPanel.description': 'Hinweis zur Vorsicht in einem farbigen Panel einfügen',
   'fabric.editor.wrapLeft': 'Links umwickeln',
-  'fabric.editor.wrapRight': 'Rechts umwickeln',
-  'fabric.emoji.label': 'Emoji'
+  'fabric.editor.wrapRight': 'Rechts umwickeln'
 };

package/dist/esm/i18n/en.js

@@ -111,6 +111,7 @@ export default {
   'fabric.editor.heading6Description': 'Use this for low level headings',
   'fabric.editor.headingLink.toolbarHelpTitle': 'Open help dialog',
   'fabric.editor.helpDialogTips': 'Press {keyMap} to quickly open this dialog at any time',
+  'fabric.editor.image.fullWidthLabel': 'Full-width',
   'fabric.editor.imageBorderBold': 'Bold',
   'fabric.editor.imageBorderColor': 'Color',
   'fabric.editor.imageBorderMedium': 'Medium',
@@ -126,13 +127,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Invite} trusted {Invite} other {Add}} teammate to {productName}',
   'fabric.editor.keyboardShortcuts': 'Keyboard shortcuts',
   'fabric.editor.leftSidebar': 'Left sidebar',
-  'fabric.editor.lists': 'Lists',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Match case',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': 'height input',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': 'Height',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'width input',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Width',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Max width {maxWidth}px',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Max width {maxWidth}px',
+  'fabric.editor.media.pixelEntry.migrationButtonText': 'Convert to pixels',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': 'Migrate from percentage to fixed pixel sizing',
   'fabric.editor.media.pixelEntry.submitButtonText': 'Submit',
   'fabric.editor.media.pixelEntry.validationFailedMessage': 'Validation for width failed',
   'fabric.editor.mediaGroupDeleteLabel': 'delete',
@@ -145,8 +147,6 @@ export default {
   'fabric.editor.note': 'Note',
   'fabric.editor.notePanel': 'Note panel',
   'fabric.editor.notePanel.description': 'Add a note in a colored panel',
-  'fabric.editor.orderedList': 'Numbered list',
-  'fabric.editor.orderedList.description': 'Create an ordered list',
   'fabric.editor.other': 'Others...',
   'fabric.editor.outdent': 'Outdent',
   'fabric.editor.panel.backgroundColor': 'Background color',
@@ -188,12 +188,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': 'Users you can tag',
   'fabric.editor.typeahead.metionListItemLabel': 'User {name} @{shortName}',
   'fabric.editor.undo': 'Undo',
-  'fabric.editor.unorderedList': 'Bullet list',
-  'fabric.editor.unorderedList.description': 'Create an unordered list',
   'fabric.editor.warning': 'Warning',
   'fabric.editor.warningPanel': 'Warning panel',
   'fabric.editor.warningPanel.description': 'Add a note of caution in a colored panel',
   'fabric.editor.wrapLeft': 'Wrap left',
-  'fabric.editor.wrapRight': 'Wrap right',
-  'fabric.emoji.label': 'Emoji'
+  'fabric.editor.wrapRight': 'Wrap right'
 };

package/dist/esm/i18n/en_GB.js

@@ -111,6 +111,7 @@ export default {
   'fabric.editor.heading6Description': 'Use this for low level headings',
   'fabric.editor.headingLink.toolbarHelpTitle': 'Open help dialog',
   'fabric.editor.helpDialogTips': 'Press {keyMap} to quickly open this dialog at any time',
+  'fabric.editor.image.fullWidthLabel': 'Full-width',
   'fabric.editor.imageBorderBold': 'Bold',
   'fabric.editor.imageBorderColor': 'Colour',
   'fabric.editor.imageBorderMedium': 'Medium',
@@ -126,13 +127,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Invite} trusted {Invite} other {Add}} teammate to {productName}',
   'fabric.editor.keyboardShortcuts': 'Keyboard shortcuts',
   'fabric.editor.leftSidebar': 'Left sidebar',
-  'fabric.editor.lists': 'Lists',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Match case',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': 'height input',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': 'Height',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'width input',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Width',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': 'Max width {maxWidth}px',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': 'Max width {maxWidth}px',
+  'fabric.editor.media.pixelEntry.migrationButtonText': 'Convert to pixels',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': 'Migrate from percentage to fixed pixel sizing',
   'fabric.editor.media.pixelEntry.submitButtonText': 'Submit',
   'fabric.editor.media.pixelEntry.validationFailedMessage': 'Validation for width failed',
   'fabric.editor.mediaGroupDeleteLabel': 'delete',
@@ -145,8 +147,6 @@ export default {
   'fabric.editor.note': 'Note',
   'fabric.editor.notePanel': 'Note panel',
   'fabric.editor.notePanel.description': 'Add a note in a coloured panel',
-  'fabric.editor.orderedList': 'Numbered list',
-  'fabric.editor.orderedList.description': 'Create an ordered list',
   'fabric.editor.other': 'Others...',
   'fabric.editor.outdent': 'Outdent',
   'fabric.editor.panel.backgroundColor': 'Background colour',
@@ -188,12 +188,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': 'Users you can tag',
   'fabric.editor.typeahead.metionListItemLabel': 'User {name} @{shortName}',
   'fabric.editor.undo': 'Undo',
-  'fabric.editor.unorderedList': 'Bullet list',
-  'fabric.editor.unorderedList.description': 'Create an unordered list',
   'fabric.editor.warning': 'Warning',
   'fabric.editor.warningPanel': 'Warning panel',
   'fabric.editor.warningPanel.description': 'Add a note of caution in a coloured panel',
   'fabric.editor.wrapLeft': 'Wrap left',
-  'fabric.editor.wrapRight': 'Wrap right',
-  'fabric.emoji.label': 'Emoji'
+  'fabric.editor.wrapRight': 'Wrap right'
 };

package/dist/esm/i18n/en_ZZ.js

@@ -111,6 +111,7 @@ export default {
   'fabric.editor.heading6Description': '⁣⁢Use this for low level headings⁠‍⁠⁡؜⁠؜⁠‌؜؜⁠‍‍⁣⁤',
   'fabric.editor.headingLink.toolbarHelpTitle': '⁣⁢Open help dialog‌⁡‌⁠‌⁠⁣⁤',
   'fabric.editor.helpDialogTips': '⁣⁢Press {keyMap} to quickly open this dialog at any time؜⁡‍‍؜‌⁡؜‌‍⁣⁤',
+  'fabric.editor.image.fullWidthLabel': '⁣⁢Full-width‌⁠⁡⁡⁠⁠⁡⁣⁤',
   'fabric.editor.imageBorderBold': '⁣⁢Bold‍‍‍‌⁠‍⁡‌؜‍⁡‍⁣⁤',
   'fabric.editor.imageBorderColor': '⁣⁢Color⁠⁠⁠؜؜⁠⁠‍⁡؜؜⁣⁤',
   'fabric.editor.imageBorderMedium': '⁣⁢Medium⁠‌⁠؜‍⁠؜⁠؜⁣⁤',
@@ -126,13 +127,14 @@ export default {
   'fabric.editor.inviteItem.title': '{userRole, select, admin {⁣⁢Invite teammate to {productName}‌⁠⁠؜⁠‍⁠‌⁡‌⁡⁡⁡⁠؜⁣⁤} trusted {⁣⁢Invite teammate to {productName}‌⁠⁠؜⁠‍⁠‌⁡‌⁡⁡⁡⁠؜⁣⁤} other {⁣⁢Add teammate to {productName}؜؜⁠⁠⁠‍⁡‌⁠⁡⁣⁤}}',
   'fabric.editor.keyboardShortcuts': '⁣⁢Keyboard shortcuts‍⁠‌⁡؜⁠⁡⁠؜⁣⁤',
   'fabric.editor.leftSidebar': '⁣⁢Left sidebar⁡‍‍‍‍⁣⁤',
-  'fabric.editor.lists': '⁣⁢Lists‍‍؜؜⁡⁡؜؜؜⁠⁣⁤',
   'fabric.editor.markdown': '⁣⁢Markdown⁠‌؜‍؜؜‍⁠‌⁣⁤',
   'fabric.editor.matchCase': '⁣⁢Match case‌‌⁠⁡‍؜‍‍‌؜⁡⁡⁠‍⁣⁤',
   'fabric.editor.media.pixelEntry.inputHeightAriaLabel': '⁣⁢height input‍⁠؜‌‍‌‍‌‍⁣⁤',
   'fabric.editor.media.pixelEntry.inputHeightTooltip': '⁣⁢Height⁡⁠‍‍؜؜‌؜‍⁠‌؜⁣⁤',
-  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': '⁣⁢width input‍‌⁠؜‌؜⁡⁠؜‍⁡‌‍⁣⁤',
-  'fabric.editor.media.pixelEntry.inputWidthTooltip': '⁣⁢Width⁡‌⁡‍⁡؜⁠⁡⁣⁤',
+  'fabric.editor.media.pixelEntry.inputWidthAriaLabel': '⁣⁢Max width {maxWidth}px‍‍⁠‌؜؜‍؜‌⁣⁤',
+  'fabric.editor.media.pixelEntry.inputWidthTooltip': '⁣⁢Max width {maxWidth}px‍⁠‌؜‌‌؜؜؜⁠‍⁠⁣⁤',
+  'fabric.editor.media.pixelEntry.migrationButtonText': '⁣⁢Convert to pixels⁡‌‍⁡⁡‍؜‍⁡⁣⁤',
+  'fabric.editor.media.pixelEntry.migrationButtonTooltip': '⁣⁢Migrate from percentage to fixed pixel sizing‌‌⁠؜؜⁠⁠⁠⁠⁣⁤',
   'fabric.editor.media.pixelEntry.submitButtonText': '⁣⁢Submit⁡؜⁠‍‌⁠‍⁣⁤',
   'fabric.editor.media.pixelEntry.validationFailedMessage': '⁣⁢Validation for width failed⁡؜؜⁡⁠‍⁡‌⁡؜‌⁠⁣⁤',
   'fabric.editor.mediaGroupDeleteLabel': '⁣⁢delete‌‌⁠⁡⁠‍⁠⁣⁤',
@@ -145,8 +147,6 @@ export default {
   'fabric.editor.note': '⁣⁢Note⁠⁠؜⁡‌؜‍‌‍‍‌⁡⁣⁤',
   'fabric.editor.notePanel': '⁣⁢Note panel؜‍⁡؜⁠؜‍⁠‍⁡⁡؜‍‍‌⁡⁣⁤',
   'fabric.editor.notePanel.description': '⁣⁢Add a note in a colored panel⁡⁠‍‌‌‌⁡⁠؜‌‍⁣⁤',
-  'fabric.editor.orderedList': '⁣⁢Numbered list؜⁡‌‍؜⁡‌⁡‍⁣⁤',
-  'fabric.editor.orderedList.description': '⁣⁢Create an ordered list⁠؜⁡‌؜‌‍‍⁡⁡‌‌؜؜‌⁠‍⁡⁣⁤',
   'fabric.editor.other': '⁣⁢Others...؜؜⁡؜⁠⁡⁠؜‍‍⁠⁣⁤',
   'fabric.editor.outdent': '⁣⁢Outdent‍‍؜؜‌‌‍‍⁡⁣⁤',
   'fabric.editor.panel.backgroundColor': '⁣⁢Background color⁡⁡‌‍‌⁡؜‌‍⁡‌⁡⁡⁣⁤',
@@ -188,12 +188,9 @@ export default {
   'fabric.editor.typeahead.mentionPopupLabel': '⁣⁢Users you can tag‌‍‌؜⁡⁡؜⁡⁣⁤',
   'fabric.editor.typeahead.metionListItemLabel': '⁣⁢User {name} @{shortName}‌‍؜⁠⁡‌‌⁡⁣⁤',
   'fabric.editor.undo': '⁣⁢Undo⁡⁡⁡‌⁠⁡‌⁡‌⁠⁡⁣⁤',
-  'fabric.editor.unorderedList': '⁣⁢Bullet list‌‍‍؜⁠؜⁠؜‌؜⁣⁤',
-  'fabric.editor.unorderedList.description': '⁣⁢Create an unordered list⁡‍؜‌‍‌‍⁠‍⁠⁡؜‌⁠⁠⁣⁤',
   'fabric.editor.warning': '⁣⁢Warning؜⁡⁠؜‌‍‌⁠⁡‌⁣⁤',
   'fabric.editor.warningPanel': '⁣⁢Warning panel⁡‍‌؜⁠‌⁡؜⁠؜⁡⁡⁠؜⁣⁤',
   'fabric.editor.warningPanel.description': '⁣⁢Add a note of caution in a colored panel‌⁠⁡‍⁠؜‍⁡⁡⁡⁣⁤',
   'fabric.editor.wrapLeft': '⁣⁢Wrap left؜‍⁡‌⁡⁠‌‌‌⁡⁣⁤',
-  'fabric.editor.wrapRight': '⁣⁢Wrap right‍؜؜⁡؜⁣⁤',
-  'fabric.emoji.label': '⁣⁢Emoji‌⁠؜‌⁠‍⁠؜⁠‌؜⁡⁣⁤'
+  'fabric.editor.wrapRight': '⁣⁢Wrap right‍؜؜⁡؜⁣⁤'
 };