@atlaskit/editor-core 166.0.2 → 167.0.0

package/dist/esm/plugins/extension/utils.js

@@ -1,32 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { findParentNodeOfType, findSelectedNodeOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { closestElement } from '../../utils/dom';
 import { findNodePosByLocalIds } from '../../utils/nodes-by-localIds';
-
-var getSelectedExtensionByTransaction = function getSelectedExtensionByTransaction(transaction) {
-  var searchParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return _getSelectedExtension(transaction.doc.type.schema, transaction.selection, searchParent);
-};
-
 export var getSelectedExtension = function getSelectedExtension(state) {
   var searchParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return _getSelectedExtension(state.schema, state.selection, searchParent);
-};
-
-var _getSelectedExtension = function _getSelectedExtension(schema, selection, searchParent) {
-  var _schema$nodes = schema.nodes,
-      inlineExtension = _schema$nodes.inlineExtension,
-      extension = _schema$nodes.extension,
-      bodiedExtension = _schema$nodes.bodiedExtension;
+  var _state$schema$nodes = state.schema.nodes,
+      inlineExtension = _state$schema$nodes.inlineExtension,
+      extension = _state$schema$nodes.extension,
+      bodiedExtension = _state$schema$nodes.bodiedExtension;
   var nodeTypes = [extension, bodiedExtension, inlineExtension];
-  return findSelectedNodeOfType(nodeTypes)(selection) || searchParent && findParentNodeOfType(nodeTypes)(selection) || undefined;
+  return findSelectedNodeOfType(nodeTypes)(state.selection) || searchParent && findParentNodeOfType(nodeTypes)(state.selection) || undefined;
 };
-
 export var findExtensionWithLocalId = function findExtensionWithLocalId(state, localId) {
   var selectedExtension = getSelectedExtension(state, true);
 
@@ -38,10 +21,10 @@ export var findExtensionWithLocalId = function findExtensionWithLocalId(state, l
     return selectedExtension;
   }
 
-  var _state$schema$nodes = state.schema.nodes,
-      inlineExtension = _state$schema$nodes.inlineExtension,
-      extension = _state$schema$nodes.extension,
-      bodiedExtension = _state$schema$nodes.bodiedExtension;
+  var _state$schema$nodes2 = state.schema.nodes,
+      inlineExtension = _state$schema$nodes2.inlineExtension,
+      extension = _state$schema$nodes2.extension,
+      bodiedExtension = _state$schema$nodes2.bodiedExtension;
   var nodeTypes = [extension, bodiedExtension, inlineExtension];
   var matched;
   state.doc.descendants(function (node, pos) {
@@ -81,29 +64,4 @@ export var getNodeTypesReferenced = function getNodeTypesReferenced(ids, state)
 export var findNodePosWithLocalId = function findNodePosWithLocalId(state, localId) {
   var nodes = findNodePosByLocalIds(state, [localId]);
   return nodes.length >= 1 ? nodes[0] : undefined;
-};
-export var onSelectionChanged = function onSelectionChanged(tr, state) {
-  var selectedExtension = getSelectedExtensionByTransaction(tr, true);
-  var hasUnselectedExtension = !!state.element && !selectedExtension;
-  /*
-   * We use this to indicate to our plugin that the selection has changed.
-   *
-   * - ignore if shouldRefreshEditButton already set
-   * - restrict to scenarios when an extension is
-   * - a) actually selected
-   * - b) or un-selected (not accounting for selection extensionA -> extensionB)
-   *
-   * The rest of the logic will be handled in Extension main plugin view update().
-   *
-   * Known issue: typing inside of a bodiedExtension will trigger state changes each keystroke
-   * as the toolbar always being open while it is focused.
-   */
-
-  if (!state.shouldRefreshEditButton && (selectedExtension || hasUnselectedExtension)) {
-    return _objectSpread(_objectSpread({}, state), {}, {
-      shouldRefreshEditButton: true
-    });
-  }
-
-  return state;
 };

package/dist/esm/plugins/fake-text-cursor/styles.js

@@ -4,4 +4,5 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
-export var fakeCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid rgba(0, 0, 0, 0.4);\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), B75);
+import { token } from '@atlaskit/tokens';
+export var fakeCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), token('color.border', 'rgba(0, 0, 0, 0.4)'), token('color.background.selected', B75));

package/dist/esm/plugins/feature-flags-context/feature-flags-from-props.js

@@ -19,7 +19,7 @@ var safeNumberFeatureFlag = function safeNumberFeatureFlag(value) {
 
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$allowTables, _props$featureFlags3, _props$featureFlags4, _props$allowTables2, _props$featureFlags5, _props$featureFlags6, _props$allowTables3, _props$featureFlags7, _props$featureFlags8, _props$allowTables4, _props$featureFlags9, _props$featureFlags10, _props$allowTables5, _props$allowExtension, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$collabEdit, _props$collabEdit2, _props$featureFlags34, _props$featureFlags35;
+  var _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$allowTables, _props$featureFlags3, _props$featureFlags4, _props$allowTables2, _props$featureFlags5, _props$featureFlags6, _props$allowTables3, _props$featureFlags7, _props$featureFlags8, _props$allowTables4, _props$featureFlags9, _props$featureFlags10, _props$allowTables5, _props$allowExtension, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$collabEdit, _props$collabEdit2, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37;
 
   var normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
@@ -56,6 +56,7 @@ export function createFeatureFlagsFromProps(props) {
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.maxUnsafeChromeSpellcheckingVersion),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags34 = props.featureFlags) === null || _props$featureFlags34 === void 0 ? void 0 : _props$featureFlags34.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined,
+    showHoverPreview: Boolean(typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.showHoverPreview) === 'boolean' ? !!((_props$featureFlags37 = props.featureFlags) !== null && _props$featureFlags37 !== void 0 && _props$featureFlags37.showHoverPreview) : false)
   });
 }

package/dist/esm/plugins/feedback-dialog/index.js

@@ -1,7 +1,7 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -74,7 +74,6 @@ export var openFeedbackDialog = /*#__PURE__*/function () {
                       case 13:
                         timeoutId = window.setTimeout(showJiraCollectorDialog, 0); // Return the timoutId for consumers to call clearTimeout if they need to.
 
-                        // Return the timoutId for consumers to call clearTimeout if they need to.
                         resolve(timeoutId);
 
                       case 15:

package/dist/esm/plugins/feedback-dialog/loadJiraCollectorDialogScript.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import getDeviceInfo from './getDeviceInfo';
 import getBrowserInfo from './getBrowserInfo';
 var JIRA_ISSUE_COLLECTOR_URL = 'https://product-fabric.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/-w0bwo4/b/14/e73395c53c3b10fde2303f4bf74ffbf6/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs.js?locale=en-US&collectorId=98644b9c';

package/dist/esm/plugins/find-replace/styles.js

@@ -2,10 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4290
 import { css } from '@emotion/react';
 import { B75, B200 } from '@atlaskit/theme/colors';
-export var searchMatchBgColour = B75;
-export var selectedSearchMatchBgColour = B200;
 export var searchMatchClass = 'search-match';
 export var selectedSearchMatchClass = 'selected-search-match';
-export var findReplaceStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, searchMatchBgColour, selectedSearchMatchClass, selectedSearchMatchBgColour);
+export var findReplaceStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, B75, selectedSearchMatchClass, B200);

package/dist/esm/plugins/find-replace/ui/styles.js

@@ -5,6 +5,7 @@ var _templateObject;
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export var replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -12,7 +13,7 @@ export var replaceSectionButtonStyles = css({
 export var ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: "".concat(N30A),
+  backgroundColor: "".concat(token('color.border', N30A)),
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -26,7 +27,7 @@ export var wrapperStyles = css({
 });
 export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 export var countStyles = css({
-  color: "".concat(N60),
+  color: "".concat(token('color.text.subtlest', N60)),
   fontSize: "".concat(relativeFontSizeToBase16(12)),
   flex: '0 0 auto',
   justifyContent: 'center',

package/dist/esm/plugins/find-replace/utils/batch-decorations.js

@@ -1,7 +1,7 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { createDecorations, findDecorationFromMatch } from './index';
 import { getPluginState } from '../plugin'; // max number of decorations to apply at once
 
@@ -248,7 +248,6 @@ var BatchDecorations = /*#__PURE__*/function () {
                   } // only get those decorations whose from >= startPos
 
 
-                  // only get those decorations whose from >= startPos
                   for (var i = 0; i < decorationsToRemove.length; i++) {
                     if (decorationsToRemove[i].from >= startPos) {
                       break;

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

@@ -23,6 +23,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
+import { token } from '@atlaskit/tokens';
 export var menuItemDimensions = {
   width: 175,
   height: 32
@@ -111,7 +112,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
 
       if (selected !== undefined) {
         return selected ? jsx(EditorDoneIcon, {
-          primaryColor: B400,
+          primaryColor: token('color.icon.selected', B400),
           size: "small",
           label: intl.formatMessage(messages.confirmModalOK)
         }) : jsx("span", {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export default function EditorEmojiAddIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
@@ -9,7 +10,7 @@ export default function EditorEmojiAddIcon() {
   }, /*#__PURE__*/React.createElement("rect", {
     width: 24,
     height: 24,
-    fill: "white",
+    fill: token('color.background.neutral.subtle', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';

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

@@ -5,7 +5,8 @@ var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), N30);
+import { token } from '@atlaskit/tokens';
+var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), token('color.border', N30));
 export default (function () {
   return jsx("div", {
     css: separator,

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

@@ -33,13 +33,14 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
+import { token } from '@atlaskit/tokens';
 var akGridSize = gridSize();
 
 var toolbarContainer = function toolbarContainer(theme) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div {\n    align-items: center;\n  }\n"])), themed({
-    light: 'white',
-    dark: DN70
-  })(theme), borderRadius(), akGridSize / 2, akGridSize);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div {\n    align-items: center;\n  }\n"])), themed({
+    light: token('elevation.surface.overlay', 'white'),
+    dark: token('elevation.surface.overlay', DN70)
+  })(theme), borderRadius(), token('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)"), akGridSize / 2, akGridSize);
 };
 
 var toolbarContainerLeftPadding = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n"])), akGridSize / 2);

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

@@ -1,5 +1,6 @@
 import * as colors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
+import { token } from '@atlaskit/tokens';
 var background = {
   danger: {
     default: {
@@ -7,28 +8,28 @@ var background = {
       dark: 'inherit'
     },
     hover: {
-      light: colors.N30A,
-      dark: colors.N30A
+      light: token('color.background.neutral.subtle.hovered', colors.N30A),
+      dark: token('color.background.neutral.subtle.hovered', colors.N30A)
     },
     active: {
-      light: hexToRgba(colors.B75, 0.6),
-      dark: hexToRgba(colors.B75, 0.6)
+      light: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6))),
+      dark: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6)))
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: colors.N400,
-      dark: colors.DN400
+      light: token('color.icon', colors.N400),
+      dark: token('color.icon', colors.DN400)
     },
     hover: {
-      light: colors.R400,
-      dark: colors.R400
+      light: token('color.icon.danger', colors.R400),
+      dark: token('color.icon.danger', colors.R400)
     },
     active: {
-      light: colors.R400,
-      dark: colors.R400
+      light: token('color.icon.danger', colors.R400),
+      dark: token('color.icon.danger', colors.R400)
     }
   }
 };

package/dist/esm/plugins/grid/styles.js

@@ -5,5 +5,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export var GRID_GUTTER = 12;
-export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, N30A, B200);
+export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, token('color.border', N30A), token('color.border.focused', B200));

package/dist/esm/plugins/help-dialog/ui/styles.js

@@ -6,15 +6,16 @@ import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
-export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
-export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
-export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
+import { token } from '@atlaskit/tokens';
+export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), token('color.text', colors.N400), token('color.background.neutral.subtle', colors.N0), borderRadius());
+export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), token('color.text.subtlest', colors.N300));
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), token('color.text.subtle', colors.N400), token('color.background.neutral.subtle', colors.N0));
+export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), token('color.background.neutral.subtle', '#fff'));
 export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
 export var columnLeft = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
 export var columnRight = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
 export var row = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
 export var title = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
-export var codeSm = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), colors.N20, borderRadius());
-export var codeMd = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), colors.N20, borderRadius());
-export var codeLg = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), colors.N20, borderRadius());
+export var codeSm = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeMd = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeLg = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());

package/dist/esm/plugins/hyperlink/HyperlinkToolbarAppearance.js

@@ -1,3 +1,4 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,7 +7,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/plugins/hyperlink/pm-plugins/input-rule.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { createRule, createPlugin } from '../../../utils/input-rules';
-import { LinkMatcher, normalizeUrl } from '../utils';
+import { findFilepaths, isLinkInMatches, LinkMatcher, normalizeUrl } from '../utils';
 import { INPUT_METHOD, addAnalytics } from '../../analytics';
 import { getLinkCreationAnalyticsEvent } from '../analytics';
 export function createLinkInputRule(regexp) {
@@ -18,7 +18,29 @@ export function createLinkInputRule(regexp) {
     var url = normalizeUrl(link.url);
     var markType = schema.mark('link', {
       href: url
-    });
+    }); // Need access to complete text to check if last URL is part of a filepath before linkifying
+
+    var nodeBefore = state.selection.$from.nodeBefore;
+
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
+      return null;
+    }
+
+    var filepaths = findFilepaths(nodeBefore.text, // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+    start - (nodeBefore.text.length - link.text.length) // (start of link match) - (whole node text length - link length) gets start of text node, which is used as offset
+    );
+
+    if (isLinkInMatches(start, filepaths)) {
+      var _tr = state.tr;
+
+      if (useUnpredictableInputRule) {
+        _tr.insertText(' ');
+      } // To keep consistent with original behaviour.
+
+
+      return _tr;
+    }
+
     var from = start;
     var to = Math.min(start + link.text.length, state.doc.content.size);
     var tr = state.tr.addMark(from, to, markType); // Keep old behavior that will delete the space after the link

package/dist/esm/plugins/hyperlink/pm-plugins/keymap.js

@@ -5,6 +5,7 @@ import { stateKey } from '../pm-plugins/main';
 import { showLinkToolbar, hideLinkToolbar } from '../commands';
 import { INPUT_METHOD, addAnalytics } from '../../analytics';
 import { getLinkCreationAnalyticsEvent } from '../analytics';
+import { findFilepaths, isLinkInMatches } from '../utils';
 export function createKeymapPlugin() {
   var skipAnalytics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var list = {};
@@ -33,7 +34,7 @@ var mayConvertLastWordToHyperlink = function mayConvertLastWordToHyperlink(skipA
   return function (state, dispatch) {
     var nodeBefore = state.selection.$from.nodeBefore;
 
-    if (!nodeBefore || !nodeBefore.isText) {
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
       return false;
     }
 
@@ -54,6 +55,13 @@ var mayConvertLastWordToHyperlink = function mayConvertLastWordToHyperlink(skipA
       var markType = state.schema.mark('link', {
         href: url
       });
+      var filepaths = findFilepaths(nodeBefore.text, start - (nodeBefore.text.length - hyperlinkedText.length) // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+      );
+
+      if (isLinkInMatches(start, filepaths)) {
+        return false;
+      }
+
       var tr = state.tr.addMark(start, end, markType);
 
       if (dispatch) {

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -12,8 +13,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -26,6 +25,7 @@ import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { N90, N80, N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
@@ -47,9 +47,9 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), N90);
-var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, N30, N30);
-var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), N80);
+var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), token('color.icon.subtle', N90));
+var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, token('color.border', N30), token('color.border', N30));
+var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), token('color.icon.subtle', N80));
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

package/dist/esm/plugins/hyperlink/utils.js

@@ -1,7 +1,9 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import { mapSlice } from '../../utils/slice';
-import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema';
+import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema'; // Regular expression for a windows filepath in the format <DRIVE LETTER>:\<folder name>\
+
+export var FILEPATH_REGEXP = /([a-zA-Z]:|\\)([^\/:*?<>"|]+\\)?([^\/:*?<>"| ]+(?=\s?))?/gim;
 /**
  * Instance of class LinkMatcher are used in autoformatting in place of Regex.
  * Hence it has been made similar to regex with an exec method.
@@ -95,7 +97,12 @@ export function linkifyContent(schema) {
         var text = node.text;
         var matches = findLinkMatches(text);
         var pos = 0;
+        var filepaths = findFilepaths(text);
         matches.forEach(function (match) {
+          if (isLinkInMatches(match.start, filepaths)) {
+            return;
+          }
+
           if (match.start > 0) {
             linkified.push(node.cut(pos, match.start));
           }
@@ -150,4 +157,39 @@ function findLinkMatches(text) {
   }
 
   return matches;
-}
+}
+
+export var findFilepaths = function findFilepaths(text) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Creation of a copy of the RegExp is necessary as lastIndex is stored on it when we run .exec()
+  var localRegExp = new RegExp(FILEPATH_REGEXP);
+  var match;
+  var matchesList = [];
+  var maxFilepathSize = 260;
+
+  while ((match = localRegExp.exec(text)) !== null) {
+    var start = match.index + offset;
+    var end = localRegExp.lastIndex + offset;
+
+    if (end - start > maxFilepathSize) {
+      end = start + maxFilepathSize;
+    } // We don't care about big strings of text that are pretending to be filepaths!!
+
+
+    matchesList.push({
+      startIndex: start,
+      endIndex: end
+    });
+  }
+
+  return matchesList;
+};
+export var isLinkInMatches = function isLinkInMatches(linkStart, matchesList) {
+  for (var i = 0; i < matchesList.length; i++) {
+    if (linkStart >= matchesList[i].startIndex && linkStart < matchesList[i].endIndex) {
+      return true;
+    }
+  }
+
+  return false;
+};

package/dist/esm/plugins/image-upload/pm-plugins/main.js

@@ -1,6 +1,6 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/dist/esm/plugins/jira-issue/nodeviews/jira-issue.js

@@ -8,8 +8,9 @@ import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
-var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
+import { token } from '@atlaskit/tokens';
+var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), token('color.background.neutral', N30), token('color.border', N50), borderRadius(), relativeFontSizeToBase16(13), token('color.background.selected', N50));
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), token('color.text.subtlest', '#707070'), token('color.text', 'black'));
 var svgChildNode = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 export default function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;

package/dist/esm/plugins/layout/styles.js

@@ -12,4 +12,4 @@ import { TableCssClassName } from '../table/types';
 import { tableMarginFullWidthMode } from '../table/ui/consts';
 export var LAYOUT_SECTION_MARGIN = gridSize();
 export var LAYOUT_COLUMN_PADDING = gridSize() * 1.5;
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, N50A, token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        // TODO: https://product-fabric.atlassian.net/browse/DSP-4353\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursord:first-of-type + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-of-type\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);