@atlaskit/editor-common 81.2.1 → 82.0.0

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -146,13 +146,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     _defineProperty(this, "quickSearchQueryVersion", 0);
     _defineProperty(this, "analyticSource", 'createLinkInlineDialog');
     _defineProperty(this, "quickSearch", async (input, items, quickSearchLimit) => {
-      var _pluginState$searchSe;
       const {
         searchProvider,
         displayUrl
       } = this.state;
       const {
-        pluginState
+        searchSessionId
       } = this.props;
       if (!searchProvider) {
         return;
@@ -166,7 +165,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
           queryLength: input.length,
           queryVersion,
           queryHash: sha1(input),
-          searchSessionId: (_pluginState$searchSe = pluginState.searchSessionId) !== null && _pluginState$searchSe !== void 0 ? _pluginState$searchSe : '',
+          searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
           wordCount: wordCount(input),
           source: this.analyticSource
         },
@@ -177,7 +176,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       });
       const perfStart = performance.now();
       try {
-        var _pluginState$searchSe2;
         const searchProviderResultItems = await searchProvider.quickSearch(input, quickSearchLimit);
         const searchItems = limit(filterUniqueItems([...items, ...searchProviderResultItems.map(mapSearchProviderResultToLinkSearchItemData)], (firstItem, secondItem) => firstItem.objectId === secondItem.objectId));
         if (displayUrl === input && queryVersion === this.quickSearchQueryVersion) {
@@ -205,7 +203,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
           attributes: {
             source: this.analyticSource,
             postQueryRequestDurationMs: duration,
-            searchSessionId: (_pluginState$searchSe2 = pluginState.searchSessionId) !== null && _pluginState$searchSe2 !== void 0 ? _pluginState$searchSe2 : '',
+            searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
             resultCount: searchProviderResultItems.length,
             results: searchProviderResultItems.map(item => ({
               resultContentId: item.objectId,
@@ -349,7 +347,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     });
     _defineProperty(this, "handleInsert", (href, title, inputType, interaction) => {
       const {
-        pluginState,
+        searchSessionId,
         onSubmit
       } = this.props;
       const {
@@ -362,7 +360,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         onSubmit(href, title, displayText, inputType);
       }
       if (interaction === 'click' || this.isUrlPopulatedWithSelectedItem()) {
-        var _pluginState$searchSe3, _selectedItem$prefetc;
+        var _selectedItem$prefetc;
         /**
          * When it's a mouse click even or the selectedItem.url matches displayUrl, we think
          * it's selected from the result list and fire the
@@ -374,7 +372,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
           actionSubject: ACTION_SUBJECT.SEARCH_RESULT,
           attributes: {
             source: this.analyticSource,
-            searchSessionId: (_pluginState$searchSe3 = pluginState.searchSessionId) !== null && _pluginState$searchSe3 !== void 0 ? _pluginState$searchSe3 : '',
+            searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
             trigger: interaction,
             resultCount: items.length,
             selectedResultId: selectedItem.objectId,
@@ -447,9 +445,9 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         selectedIndex
       } = this.state;
       const {
-        pluginState,
         view,
-        onEscapeCallback
+        onEscapeCallback,
+        searchSessionId
       } = this.props;
       const {
         keyCode
@@ -481,7 +479,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         updatedIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
       }
       if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
-        var _pluginState$searchSe4;
         this.setState({
           selectedIndex: updatedIndex,
           displayUrl: items[updatedIndex].url
@@ -491,7 +488,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
           actionSubject: ACTION_SUBJECT.SEARCH_RESULT,
           attributes: {
             source: this.analyticSource,
-            searchSessionId: (_pluginState$searchSe4 = pluginState.searchSessionId) !== null && _pluginState$searchSe4 !== void 0 ? _pluginState$searchSe4 : '',
+            searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
             selectedResultId: items[updatedIndex].objectId,
             selectedRelativePosition: updatedIndex
           },
@@ -530,18 +527,19 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     this.fireCustomAnalytics = fireAnalyticsEvent(props.createAnalyticsEvent);
   }
   async componentDidMount() {
-    var _pluginState$searchSe5, _pluginState$inputMet;
     const {
-      pluginState
+      timesViewed,
+      inputMethod,
+      searchSessionId
     } = this.props;
     document.addEventListener('mousedown', this.handleClickOutside);
     this.fireAnalytics({
       action: ACTION.VIEWED,
       actionSubject: ACTION_SUBJECT.CREATE_LINK_INLINE_DIALOG,
       attributes: {
-        timesViewed: pluginState.timesViewed,
-        searchSessionId: (_pluginState$searchSe5 = pluginState.searchSessionId) !== null && _pluginState$searchSe5 !== void 0 ? _pluginState$searchSe5 : '',
-        trigger: (_pluginState$inputMet = pluginState.inputMethod) !== null && _pluginState$inputMet !== void 0 ? _pluginState$inputMet : ''
+        timesViewed: timesViewed !== null && timesViewed !== void 0 ? timesViewed : 0,
+        searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
+        trigger: inputMethod !== null && inputMethod !== void 0 ? inputMethod : ''
       },
       eventType: EVENT_TYPE.SCREEN
     });
@@ -556,17 +554,16 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
   }
   componentWillUnmount() {
     const {
-      pluginState
+      searchSessionId
     } = this.props;
     document.removeEventListener('mousedown', this.handleClickOutside);
     if (!this.submitted) {
-      var _pluginState$searchSe6;
       this.fireAnalytics({
         action: ACTION.DISMISSED,
         actionSubject: ACTION_SUBJECT.CREATE_LINK_INLINE_DIALOG,
         attributes: {
           source: this.analyticSource,
-          searchSessionId: (_pluginState$searchSe6 = pluginState.searchSessionId) !== null && _pluginState$searchSe6 !== void 0 ? _pluginState$searchSe6 : '',
+          searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
           trigger: 'blur'
         },
         eventType: EVENT_TYPE.UI
@@ -575,11 +572,10 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
   }
   async getRecentItems(activityProvider, query) {
     const {
-      pluginState
+      searchSessionId
     } = this.props;
     const perfStart = performance.now();
     try {
-      var _pluginState$searchSe7;
       const activityRecentItems = limit(query ? await activityProvider.searchRecent(query) : await activityProvider.getRecentItems());
       const items = activityRecentItems.map(mapActivityProviderResultToLinkSearchItemData);
       const perfStop = performance.now();
@@ -601,7 +597,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         attributes: {
           source: this.analyticSource,
           preQueryRequestDurationMs: duration,
-          searchSessionId: (_pluginState$searchSe7 = pluginState.searchSessionId) !== null && _pluginState$searchSe7 !== void 0 ? _pluginState$searchSe7 : '',
+          searchSessionId: searchSessionId !== null && searchSessionId !== void 0 ? searchSessionId : '',
           resultCount: items.length,
           results: activityRecentItems.map(item => {
             var _item$type;

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/index.js

@@ -29,7 +29,10 @@ export function HyperlinkAddToolbar({
   onClose,
   onEscapeCallback,
   onClickAwayCallback,
-  hyperlinkPluginState
+  editorAppearance,
+  inputMethod,
+  searchSessionId,
+  timesViewed
 }) {
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['activityProvider', 'searchProvider'],
@@ -43,8 +46,8 @@ export function HyperlinkAddToolbar({
           view: view,
           invokeMethod: // Provide `invokeMethod` prop as preferred value (card plugin passes as prop) otherwise assume this
           // is being used from inside the hyperlink plugin and use inputMethod from plugin state
-          invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod,
-          editorAppearance: hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.editorAppearance
+          invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : inputMethod,
+          editorAppearance: editorAppearance
         }, linkPickerOptions, {
           url: displayUrl,
           displayText: displayText,
@@ -61,10 +64,12 @@ export function HyperlinkAddToolbar({
         onSubmit: onSubmit,
         displayText: displayText,
         displayUrl: displayUrl,
-        pluginState: hyperlinkPluginState,
         view: view,
         onEscapeCallback: onEscapeCallback,
-        onClickAwayCallback: onClickAwayCallback
+        onClickAwayCallback: onClickAwayCallback,
+        inputMethod: inputMethod,
+        searchSessionId: searchSessionId,
+        timesViewed: timesViewed
       });
     }
   });

package/dist/es2019/media-single/utils.js

@@ -1,5 +1,5 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../utils/rich-media-utils';
 import { DEFAULT_IMAGE_WIDTH, DEFAULT_ROUNDING_INTERVAL, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
 
@@ -90,7 +90,7 @@ const calcLegacyWideWidth = (containerWidth, origWidth, contentWidth) => {
  * @param containerWidth width of editor container
  */
 export const calcMediaSingleMaxWidth = containerWidth => {
-  const fullWidthPadding = akEditorGutterPadding * 2;
+  const fullWidthPadding = akEditorGutterPaddingDynamic() * 2;
   return Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth);
 };
 

package/dist/es2019/messages/help-dialog.js

@@ -30,6 +30,16 @@ export const helpDialogMessages = defineMessages({
     defaultMessage: 'Toggle action item',
     description: 'For Check/Uncheck Action item use shortcut'
   },
+  InsertTableColumn: {
+    id: 'fabric.editor.insertTableColumn',
+    defaultMessage: 'Insert table column',
+    description: 'For insert table column'
+  },
+  InsertTableRow: {
+    id: 'fabric.editor.insertTableRow',
+    defaultMessage: 'Insert table row',
+    description: 'For insert table row'
+  },
   altText: {
     id: 'fabric.editor.altText',
     defaultMessage: 'Alt text',
@@ -50,24 +60,14 @@ export const helpDialogMessages = defineMessages({
     defaultMessage: 'Select column resize',
     description: 'Hint for selecting a column resize a shortcut'
   },
-  increaseColumnSize: {
-    id: 'fabric.editor.increaseColumnSize',
-    defaultMessage: 'Increase column size',
-    description: 'Hint for increasing a column size shortcut'
-  },
-  decreaseColumnSize: {
-    id: 'fabric.editor.decreaseColumnSize',
-    defaultMessage: 'Decrease column size',
-    description: 'Hint for decreasing a column size shortcut'
-  },
   increaseSize: {
     id: 'fabric.editor.increaseSize',
-    defaultMessage: 'Increase size',
+    defaultMessage: 'Increase table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to increase the width of the selected element. Optimal characters less than 21.'
   },
   decreaseSize: {
     id: 'fabric.editor.decreaseSize',
-    defaultMessage: 'Decrease size',
+    defaultMessage: 'Decrease table or media size',
     description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
   },
   focusTableResizeHandle: {

package/dist/es2019/messages/insert-block.js

@@ -209,5 +209,10 @@ export const toolbarInsertBlockMessages = defineMessages({
     id: 'fabric.editor.recordVideo.description',
     defaultMessage: 'Record and share your screen and thoughts',
     description: 'Record and share your screen and thoughts'
+  },
+  recordLoomShortTitle: {
+    id: 'fabric.editor.recordLoomShortTitle',
+    defaultMessage: 'Record',
+    description: 'Record'
   }
 });

package/dist/es2019/messages/table.js

@@ -240,11 +240,6 @@ export const messages = defineMessages({
     defaultMessage: 'Fixed column widths',
     description: 'Toggle button to enable fixed column widths'
   },
-  unlockColumnWidths: {
-    id: 'fabric.editor.unLockColumns',
-    defaultMessage: 'Variable column widths',
-    description: 'Toggle button to enable variable column widths'
-  },
   rowControl: {
     id: 'fabric.editor.rowControl',
     defaultMessage: 'Highlight row',

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "81.2.1";
+const packageVersion = "82.0.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "81.2.1";
+const packageVersion = "82.0.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/breakout.js

@@ -21,8 +21,8 @@ const breakoutConsts = {
   /**
    * This function can return percentage value or px value depending upon the inputs
    */
-  calcBreakoutWidth: (layout, containerWidth) => {
-    const effectiveFullWidth = containerWidth - breakoutConsts.padding;
+  calcBreakoutWidth: (layout, containerWidth, padding) => {
+    const effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
     switch (layout) {
       case 'full-width':
         return `${Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth)}px`;
@@ -30,7 +30,7 @@ const breakoutConsts = {
         if (effectiveFullWidth <= 0) {
           return '100%';
         }
-        let wideWidth = breakoutConsts.calcWideWidth(containerWidth);
+        let wideWidth = breakoutConsts.calcWideWidth(containerWidth, undefined, undefined, padding);
         if (wideWidth.endsWith('%')) {
           return `${Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth)}px`;
         }
@@ -40,8 +40,8 @@ const breakoutConsts = {
     }
   },
   calcLineLength: () => breakoutConsts.defaultLayoutWidth,
-  calcWideWidth: (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%') => {
-    const effectiveFullWidth = containerWidth - breakoutConsts.padding;
+  calcWideWidth: (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%', padding) => {
+    const effectiveFullWidth = containerWidth - (padding !== null && padding !== void 0 ? padding : breakoutConsts.padding);
     const layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
     const wideWidth = Math.min(Math.ceil(layoutMaxWidth * breakoutConsts.wideScaleRatio), effectiveFullWidth);
     return layoutMaxWidth > wideWidth ? fallback : `${Math.min(maxWidth, wideWidth)}px`;
@@ -110,8 +110,8 @@ export function calculateBreakoutStyles({
     marginLeft: `50%`
   };
 }
-export function calcBreakoutWidthPx(mode, widthStateWidth) {
-  return parsePx(calcBreakoutWidth(mode, widthStateWidth));
+export function calcBreakoutWidthPx(mode, widthStateWidth, padding) {
+  return parsePx(calcBreakoutWidth(mode, widthStateWidth, padding));
 }
 export const getNextBreakoutMode = currentMode => {
   if (currentMode === 'full-width') {

package/dist/esm/analytics/index.js

@@ -1,4 +1,4 @@
-export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TABLE_OVERFLOW_CHANGE_TRIGGER, TABLE_STATUS, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT, TABLE_DISPLAY_MODE, VIEW_METHOD } from './types';
+export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, CHANGE_ALIGNMENT_REASON, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TABLE_OVERFLOW_CHANGE_TRIGGER, TABLE_STATUS, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT, TABLE_DISPLAY_MODE, VIEW_METHOD } from './types';
 export { editorAnalyticsChannel, fireAnalyticsEvent } from './fire-analytics-event';
 export { getAnalyticsEventsFromTransaction } from './utils';
 export { buildEditLinkPayload, buildVisitedLinkPayload, buildOpenedSettingsPayload, unlinkPayload } from './linking-utils';

package/dist/esm/analytics/types/index.js

@@ -3,7 +3,7 @@ export { INDENT_DIRECTION, INDENT_TYPE } from './format-events';
 export { PUNC, SYMBOL } from './substitute-events';
 export { BROWSER_FREEZE_INTERACTION_TYPE, FULL_WIDTH_MODE, MODE, PLATFORMS } from './general-events';
 export { LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, USER_CONTEXT } from './insert-events';
-export { TABLE_ACTION, TABLE_BREAKOUT, TABLE_OVERFLOW_CHANGE_TRIGGER, TABLE_STATUS, TABLE_DISPLAY_MODE } from './table-events';
+export { CHANGE_ALIGNMENT_REASON, TABLE_ACTION, TABLE_BREAKOUT, TABLE_OVERFLOW_CHANGE_TRIGGER, TABLE_STATUS, TABLE_DISPLAY_MODE } from './table-events';
 export { PasteContents, PasteSources, PasteTypes } from './paste-events';
 export { DELETE_DIRECTION, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS } from './list-events';
 export { GAP_CURSOR_POSITION, TARGET_SELECTION_SOURCE } from './extension-events';

package/dist/esm/analytics/types/table-events.js

@@ -64,4 +64,11 @@ export var TABLE_DISPLAY_MODE = /*#__PURE__*/function (TABLE_DISPLAY_MODE) {
   return TABLE_DISPLAY_MODE;
 }({});
 
-// currently duplicated in editor-plugin-table/src/types.ts
+// currently duplicated in editor-plugin-table/src/types.ts
+
+export var CHANGE_ALIGNMENT_REASON = /*#__PURE__*/function (CHANGE_ALIGNMENT_REASON) {
+  CHANGE_ALIGNMENT_REASON["TABLE_RESIZING"] = "tableResizing";
+  CHANGE_ALIGNMENT_REASON["EDITOR_APPEARANCE_CHANGED"] = "editorAppearanceChanged";
+  CHANGE_ALIGNMENT_REASON["TOOLBAR_OPTION_CHANGED"] = "toolbarOptionChanged";
+  return CHANGE_ALIGNMENT_REASON;
+}({});

package/dist/esm/extensibility/Extension/InlineExtension/index.js

@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useSharedPluginState } from '../../../hooks';
 import { createWidthContext, WidthContext } from '../../../ui';
@@ -27,7 +27,7 @@ var InlineExtension = function InlineExtension(props) {
     'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
-  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
+  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
   var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
   var handleMouseEvent = function handleMouseEvent(didHover) {
     if (setIsNodeHovered) {

package/dist/esm/guideline/utils.js

@@ -1,5 +1,5 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
 export var isNumber = function isNumber(x) {
   return typeof x === 'number' && !isNaN(x) && isFinite(x);
@@ -53,7 +53,7 @@ export var getGuidelineTypeFromKey = function getGuidelineTypeFromKey(keys, guid
  * width and editor gutter padding.
  */
 export var getContainerWidthOrFullEditorWidth = function getContainerWidthOrFullEditorWidth(containerWidth) {
-  return Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
+  return Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth) / 2;
 };
 
 /**

package/dist/esm/i18n/cs.js

@@ -130,6 +130,10 @@ export default {
   'fabric.editor.edit.searchInput': 'Přidat odkaz',
   'fabric.editor.editAltText': 'Upravit alternativní text',
   'fabric.editor.editDateText': 'Upravit datum',
+  'fabric.editor.editDropdownEditDatasourceTitle': 'Upravit vyhledávací dotaz',
+  'fabric.editor.editDropdownEditLinkTitle': 'Upravit odkaz',
+  'fabric.editor.editDropdownExpandIconLabel': 'Rozbalit rozevírací nabídku',
+  'fabric.editor.editDropdownTriggerTitle': 'Upravit',
   'fabric.editor.editLink': 'Upravit odkaz',
   'fabric.editor.editMode.inviteToEditButton.title': 'Pozvat k úpravám',
   'fabric.editor.editStatusColor': 'Upravit barvu stavu',
@@ -245,6 +249,7 @@ export default {
   'fabric.editor.info': 'Informace',
   'fabric.editor.infoPanel': 'Informační panel',
   'fabric.editor.infoPanel.description': 'Zvýraznit informace v barevném panelu',
+  'fabric.editor.inlineConfigureLink': 'Konfigurovat odkaz',
   'fabric.editor.inlineDescription': 'Zobrazit odkaz jako vložený text',
   'fabric.editor.inlineOverlay': 'Konfigurovat',
   'fabric.editor.inlineTitle': 'Vložený',

package/dist/esm/i18n/da.js

@@ -215,7 +215,7 @@ export default {
   'fabric.editor.headingLink.hyperlinkIconBugLabel': 'Fejl',
   'fabric.editor.headingLink.hyperlinkIconIssueLabel': 'Sag',
   'fabric.editor.headingLink.hyperlinkIconPageLabel': 'Side',
-  'fabric.editor.headingLink.hyperlinkIconStoryLabel': 'Story',
+  'fabric.editor.headingLink.hyperlinkIconStoryLabel': 'Historie',
   'fabric.editor.headingLink.hyperlinkIconTaskLabel': 'Opgave',
   'fabric.editor.headingLink.invalidLabel': '⚠️ En tabel med flettede celler kan ikke sorteres',
   'fabric.editor.headingLink.noOrderLabel': 'Sortér kolonnen fra A til Å',
@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Info',
   'fabric.editor.infoPanel': 'Informationspanel',
   'fabric.editor.infoPanel.description': 'Fremhæv information i et farvet panel',
+  'fabric.editor.inlineConfigureLink': 'Konfigurer link',
   'fabric.editor.inlineDescription': 'Vis link som indbygget tekst',
   'fabric.editor.inlineOverlay': 'Konfigurer',
   'fabric.editor.inlineTitle': 'Indbyg',
@@ -366,7 +367,7 @@ export default {
   'fabric.editor.status': 'Status',
   'fabric.editor.status.description': 'Tilføj en brugerdefineret statusetiket',
   'fabric.editor.statusPlaceholder': 'Angiv en status',
-  'fabric.editor.story': 'Story',
+  'fabric.editor.story': 'Historie',
   'fabric.editor.strike': 'Gennemstreget',
   'fabric.editor.subTask': 'Underopgave',
   'fabric.editor.subscript': 'Sænket skrift',

package/dist/esm/i18n/de.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Info',
   'fabric.editor.infoPanel': 'Info-Panel',
   'fabric.editor.infoPanel.description': 'Informationen in einem farbigen Panel hervorheben',
+  'fabric.editor.inlineConfigureLink': 'Link konfigurieren',
   'fabric.editor.inlineDescription': 'Link als Inline-Text anzeigen',
   'fabric.editor.inlineOverlay': 'Konfigurieren',
   'fabric.editor.inlineTitle': 'Inline',

package/dist/esm/i18n/en.js

@@ -130,6 +130,10 @@ export default {
   'fabric.editor.edit.searchInput': 'Add a link',
   'fabric.editor.editAltText': 'Edit alt text',
   'fabric.editor.editDateText': 'Edit Date',
+  'fabric.editor.editDropdownEditDatasourceTitle': 'Edit search query',
+  'fabric.editor.editDropdownEditLinkTitle': 'Edit link',
+  'fabric.editor.editDropdownExpandIconLabel': 'Expand dropdown menu',
+  'fabric.editor.editDropdownTriggerTitle': 'Edit',
   'fabric.editor.editLink': 'Edit link',
   'fabric.editor.editMode.inviteToEditButton.title': 'Invite to edit',
   'fabric.editor.editStatusColor': 'Edit Status Color',

package/dist/esm/i18n/en_GB.js

@@ -130,6 +130,10 @@ export default {
   'fabric.editor.edit.searchInput': 'Add a link',
   'fabric.editor.editAltText': 'Edit alt text',
   'fabric.editor.editDateText': 'Edit Date',
+  'fabric.editor.editDropdownEditDatasourceTitle': 'Edit search query',
+  'fabric.editor.editDropdownEditLinkTitle': 'Edit link',
+  'fabric.editor.editDropdownExpandIconLabel': 'Expand dropdown menu',
+  'fabric.editor.editDropdownTriggerTitle': 'Edit',
   'fabric.editor.editLink': 'Edit link',
   'fabric.editor.editMode.inviteToEditButton.title': 'Invite to edit',
   'fabric.editor.editStatusColor': 'Edit Status Colour',

package/dist/esm/i18n/en_ZZ.js

@@ -130,6 +130,10 @@ export default {
   'fabric.editor.edit.searchInput': '⁣⁢Add a link⁠⁠⁠‍⁡‍⁣⁤',
   'fabric.editor.editAltText': '⁣⁢Edit alt text⁠‍؜؜⁡⁠‌⁡⁣⁤',
   'fabric.editor.editDateText': '⁣⁢Edit Date‍؜‍؜‌؜⁠‌⁠⁣⁤',
+  'fabric.editor.editDropdownEditDatasourceTitle': '⁣⁢Edit search query‌⁠⁡⁡⁡‍⁠؜⁣⁤',
+  'fabric.editor.editDropdownEditLinkTitle': '⁣⁢Edit link‌؜‌‌؜‌؜⁠⁠‍⁡؜‌‍‌‌⁠⁣⁤',
+  'fabric.editor.editDropdownExpandIconLabel': '⁣⁢Expand dropdown menu؜‍⁠‌‌؜‍⁠‌⁣⁤',
+  'fabric.editor.editDropdownTriggerTitle': '⁣⁢Edit‍‌‌‍⁡⁠؜⁡⁣⁤',
   'fabric.editor.editLink': '⁣⁢Edit link⁡‍؜‌‍‌‍؜‍⁡⁣⁤',
   'fabric.editor.editMode.inviteToEditButton.title': '⁣⁢Invite to edit‍⁡‍⁡⁡؜⁣⁤',
   'fabric.editor.editStatusColor': '⁣⁢Edit Status Color‍⁠‌‌‌‌‌⁠‍⁣⁤',

package/dist/esm/i18n/es.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Información',
   'fabric.editor.infoPanel': 'Panel de información',
   'fabric.editor.infoPanel.description': 'Destacar información en un panel de color',
+  'fabric.editor.inlineConfigureLink': 'Configurar enlace',
   'fabric.editor.inlineDescription': 'Mostrar enlace como texto insertado',
   'fabric.editor.inlineOverlay': 'Configurar',
   'fabric.editor.inlineTitle': 'Insertado',

package/dist/esm/i18n/fi.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Tietoja',
   'fabric.editor.infoPanel': 'Tietopaneeli',
   'fabric.editor.infoPanel.description': 'Korosta tietoja värillisessä paneelissa',
+  'fabric.editor.inlineConfigureLink': 'Määritä linkki',
   'fabric.editor.inlineDescription': 'Näytä linkki sitoutuvana tekstinä',
   'fabric.editor.inlineOverlay': 'Muokkaa',
   'fabric.editor.inlineTitle': 'Tekstiin sitoutuva',

package/dist/esm/i18n/fr.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Informations',
   'fabric.editor.infoPanel': "Volet d'informations",
   'fabric.editor.infoPanel.description': 'Mettre en valeur des informations dans un cadre coloré',
+  'fabric.editor.inlineConfigureLink': 'Configurer le lien',
   'fabric.editor.inlineDescription': 'Affichez le lien sous forme de texte sur la même ligne',
   'fabric.editor.inlineOverlay': 'Configurer',
   'fabric.editor.inlineTitle': 'Sur la même ligne',

package/dist/esm/i18n/hu.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Információ',
   'fabric.editor.infoPanel': 'Információs panel',
   'fabric.editor.infoPanel.description': 'Információ kiemelése színes panelen',
+  'fabric.editor.inlineConfigureLink': 'Link konfigurálása',
   'fabric.editor.inlineDescription': 'Link megjelenítése beágyazott szövegként',
   'fabric.editor.inlineOverlay': 'Konfigurálás',
   'fabric.editor.inlineTitle': 'Beágyazott',

package/dist/esm/i18n/it.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Info',
   'fabric.editor.infoPanel': 'Pannello informazioni',
   'fabric.editor.infoPanel.description': 'Metti in evidenza l’informazione in un pannello colorato',
+  'fabric.editor.inlineConfigureLink': 'Configura il link',
   'fabric.editor.inlineDescription': 'Visualizza il link come testo in linea',
   'fabric.editor.inlineOverlay': 'Configura',
   'fabric.editor.inlineTitle': 'In linea',

package/dist/esm/i18n/ja.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': '情報',
   'fabric.editor.infoPanel': '情報パネル',
   'fabric.editor.infoPanel.description': '色付きのパネルで情報を強調',
+  'fabric.editor.inlineConfigureLink': 'リンクを設定',
   'fabric.editor.inlineDescription': 'リンクをインライン テキストとして表示します。',
   'fabric.editor.inlineOverlay': '構成',
   'fabric.editor.inlineTitle': 'インライン',

package/dist/esm/i18n/ko.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': '정보',
   'fabric.editor.infoPanel': '정보 패널',
   'fabric.editor.infoPanel.description': '색상 있는 패널에서 정보 강조 표시',
+  'fabric.editor.inlineConfigureLink': '링크 구성',
   'fabric.editor.inlineDescription': '링크를 인라인 텍스트로 표시',
   'fabric.editor.inlineOverlay': '구성',
   'fabric.editor.inlineTitle': '인라인',

package/dist/esm/i18n/nb.js

@@ -130,6 +130,10 @@ export default {
   'fabric.editor.edit.searchInput': 'Legg til en kobling',
   'fabric.editor.editAltText': 'Rediger alternativ tekst',
   'fabric.editor.editDateText': 'Rediger dato',
+  'fabric.editor.editDropdownEditDatasourceTitle': 'Rediger søkespørring',
+  'fabric.editor.editDropdownEditLinkTitle': 'Rediger kobling',
+  'fabric.editor.editDropdownExpandIconLabel': 'Utvid rullegardinmenyen',
+  'fabric.editor.editDropdownTriggerTitle': 'Rediger',
   'fabric.editor.editLink': 'Rediger kobling',
   'fabric.editor.editMode.inviteToEditButton.title': 'Inviter til å redigere',
   'fabric.editor.editStatusColor': 'Rediger statusfarge',
@@ -245,6 +249,7 @@ export default {
   'fabric.editor.info': 'Informasjon',
   'fabric.editor.infoPanel': 'Informasjonspanel',
   'fabric.editor.infoPanel.description': 'Uthev informasjonen i et farget panel',
+  'fabric.editor.inlineConfigureLink': 'Konfigurer kobling',
   'fabric.editor.inlineDescription': 'Vis kobling som innebygd tekst',
   'fabric.editor.inlineOverlay': 'Konfigurer',
   'fabric.editor.inlineTitle': 'Innebygd',

package/dist/esm/i18n/nl.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Informatie',
   'fabric.editor.infoPanel': 'Infopaneel',
   'fabric.editor.infoPanel.description': 'Informatie markeren in een gekleurd paneel',
+  'fabric.editor.inlineConfigureLink': 'Link configureren',
   'fabric.editor.inlineDescription': 'Link als inline-tekst weergeven',
   'fabric.editor.inlineOverlay': 'Configureren',
   'fabric.editor.inlineTitle': 'Inline',

package/dist/esm/i18n/pl.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Informacje',
   'fabric.editor.infoPanel': 'Panel informacyjny',
   'fabric.editor.infoPanel.description': 'Wyróżnij informacje kolorem',
+  'fabric.editor.inlineConfigureLink': 'Konfiguruj łącze',
   'fabric.editor.inlineDescription': 'Wyświetla łącze bezpośrednio w tekście',
   'fabric.editor.inlineOverlay': 'Konfiguruj',
   'fabric.editor.inlineTitle': 'Bezpośrednio w tekście',

package/dist/esm/i18n/pt_BR.js

@@ -245,6 +245,7 @@ export default {
   'fabric.editor.info': 'Informações',
   'fabric.editor.infoPanel': 'Painel de informações',
   'fabric.editor.infoPanel.description': 'Destacar informações em um painel colorido',
+  'fabric.editor.inlineConfigureLink': 'Configurar link',
   'fabric.editor.inlineDescription': 'Mostrar link como texto em linha',
   'fabric.editor.inlineOverlay': 'Configurar',
   'fabric.editor.inlineTitle': 'Em linha',