@atlaskit/editor-core 193.19.0 → 193.19.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 193.19.10
+
+### Patch Changes
+
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
+## 193.19.6
+
+### Patch Changes
+
+-   [#98561](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98561)
+    [`ca9500b004d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca9500b004d4) -
+    [ux] [ED-22668] remove the border from layouts on rest and on hover whilst on a live view page
+-   Updated dependencies
+
 ## 193.19.0
 
 ### Minor Changes

package/dist/cjs/create-editor/create-plugins-list.js

@@ -52,7 +52,6 @@ function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent
   return _objectSpread(_objectSpread({}, props), {}, {
     createAnalyticsEvent: createAnalyticsEvent,
     typeAhead: {
-      createAnalyticsEvent: createAnalyticsEvent,
       isMobile: isMobile
     },
     featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props),

package/dist/cjs/create-editor/create-preset.js

@@ -31,6 +31,7 @@ function withDangerouslyAppendPlugins(preset) {
     var presetWithAppendedPlugins = nextEditorPluginsToAppend.reduce(function (acc, plugin) {
       // These are dangerously appended, we don't need their type information leaking into
       // universal preset
+      // @ts-expect-error
       return acc.add(plugin);
     }, preset);
     return presetWithAppendedPlugins;

package/dist/cjs/presets/default.js

@@ -53,9 +53,7 @@ function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(_betterTypeHistory.betterTypeHistoryPlugin).add([_paste.pastePlugin, _objectSpread({}, options === null || options === void 0 ? void 0 : options.paste)]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead || {
-    createAnalyticsEvent: options.createAnalyticsEvent
-  }]).maybeAdd(_history.historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(_undoRedo.undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([_blockType.blockTypePlugin, options.blockType]).add(_clearMarksOnEmptyDoc.clearMarksOnEmptyDocPlugin).maybeAdd([_selectionToolbar.selectionToolbarPlugin, {
+  }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead]).maybeAdd(_history.historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(_undoRedo.undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([_blockType.blockTypePlugin, options.blockType]).add(_clearMarksOnEmptyDoc.clearMarksOnEmptyDocPlugin).maybeAdd([_selectionToolbar.selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], function () {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/cjs/presets/universal.js

@@ -141,7 +141,11 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     useLongPressSelection: false
   }], Boolean(props.allowTasksAndDecisions || props.taskDecisionProvider)).maybeAdd([_feedbackDialog.feedbackDialogPlugin, _objectSpread({
     coreVersion: _versionWrapper.version
-  }, props.feedbackInfo)], Boolean(props.feedbackInfo)).maybeAdd([_helpDialog.helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([_saveOnEnter.saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(_imageUpload.imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd([_media.mediaPlugin, {
+  }, props.feedbackInfo)], Boolean(props.feedbackInfo)).maybeAdd([_helpDialog.helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([_saveOnEnter.saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(_imageUpload.imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd(
+  // duplicate plugin exists because first one if media is enabled
+  // second one when “media is disabled, and legacyMediaProvider is enabled
+  // @ts-expect-error
+  [_media.mediaPlugin, {
     allowMediaSingle: {
       disableLayout: true
     },
@@ -159,7 +163,13 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     extensionHandlers: props.extensionHandlers,
     useLongPressSelection: false,
     appearance: appearance
-  }], Boolean(props.allowExtension)).maybeAdd([_annotation.annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([_date.datePlugin, {
+  }], Boolean(props.allowExtension)).maybeAdd(
+  // we are ignoring a duplicate plugin error here
+  // this error exists because we have two annotation plugins being added
+  // one with annotationProviders and one with allowConfluenceInlineComment
+  // long term this and media should be consolidated into adding both only once
+  // @ts-expect-error
+  [_annotation.annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([_date.datePlugin, {
     weekStartDay: (0, _typeof2.default)(props.allowDate) === 'object' ? props.allowDate.weekStartDay : undefined
   }], Boolean(props.allowDate)).maybeAdd([_placeholderText.placeholderTextPlugin,
   // @ts-expect-error 2322: Type 'false | PlaceholderTextOptions | undefined'

package/dist/cjs/test-utils.js

@@ -90,7 +90,13 @@ var createPMSchemaAndPlugins = exports.createPMSchemaAndPlugins = function creat
   var inputPreset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _preset.EditorPresetBuilder();
   return function (pluginFactoryParams) {
     var editorPlugins = [];
-    var preset = inputPreset.has(_base.basePlugin) ? inputPreset : inputPreset.add(_base.basePlugin);
+
+    // we are ignoring the below because while this logic knows if
+    // basePlugin is in the inputPreset, the type system does not
+    // so it marks it as a duplicate plugin :) - this is fine
+    var preset = inputPreset.has(_base.basePlugin) ? inputPreset :
+    // @ts-expect-error
+    inputPreset.add(_base.basePlugin);
     editorPlugins = preset.build({
       pluginInjectionAPI: pluginFactoryParams.pluginInjectionAPI
     });

package/dist/cjs/ui/ContentStyles/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _collab = require("@atlaskit/editor-common/collab");
 var _emoji = require("@atlaskit/editor-common/emoji");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _mention = require("@atlaskit/editor-common/mention");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -24,6 +25,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
+var _context = require("../../presets/context");
 var _aiPanels = require("./ai-panels");
 var _codeBlock = require("./code-block");
 var _date = require("./date");
@@ -68,7 +70,7 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, _styles.backgroundColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, _layout.layoutStyles, _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, _styles.backgroundColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -78,13 +80,18 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
     var theme = (0, _react2.useTheme)();
     var _useThemeObserver = (0, _tokens.useThemeObserver)(),
       colorMode = _useThemeObserver.colorMode;
+    var editorAPI = (0, _context.usePresetContext)();
+    var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode']),
+      editorViewModeState = _useSharedPluginState.editorViewModeState;
+    var viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     var memoizedStyle = (0, _react.useMemo)(function () {
       return contentStyles({
         theme: theme,
         colorMode: colorMode,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        viewMode: viewMode
       });
-    }, [theme, colorMode, featureFlags]);
+    }, [theme, colorMode, featureFlags, viewMode]);
     return (0, _react2.jsx)("div", {
       className: className,
       ref: ref,

package/dist/cjs/ui/ContentStyles/layout.js

@@ -26,4 +26,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", " -", "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          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .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-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-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          > style:first-child\n            + .ProseMirror-gapcursor\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          .mediaGroupView-content-wrap {\n            clear: both;\n          }\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: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // 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: ", "px solid\n          ", ";\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"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", " -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: ", ";\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .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-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-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          > style:first-child\n            + .ProseMirror-gapcursor\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          .mediaGroupView-content-wrap {\n            clear: both;\n          }\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: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // 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: ", "px solid\n          ", ";\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"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+};

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "193.19.0";
+var version = exports.version = "193.19.10";

package/dist/es2019/create-editor/create-plugins-list.js

@@ -39,7 +39,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     ...props,
     createAnalyticsEvent,
     typeAhead: {
-      createAnalyticsEvent,
       isMobile
     },
     featureFlags: createFeatureFlagsFromProps(props),

package/dist/es2019/create-editor/create-preset.js

@@ -21,6 +21,7 @@ function withDangerouslyAppendPlugins(preset) {
     const presetWithAppendedPlugins = nextEditorPluginsToAppend.reduce((acc, plugin) => {
       // These are dangerously appended, we don't need their type information leaking into
       // universal preset
+      // @ts-expect-error
       return acc.add(plugin);
     }, preset);
     return presetWithAppendedPlugins;

package/dist/es2019/presets/default.js

@@ -47,9 +47,7 @@ export function createDefaultPreset(options) {
     ...(options === null || options === void 0 ? void 0 : options.paste)
   }]).add(clipboardPlugin).add(focusPlugin).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead || {
-    createAnalyticsEvent: options.createAnalyticsEvent
-  }]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
+  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], () => {
     if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/es2019/presets/universal.js

@@ -131,7 +131,11 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
   }], Boolean(props.allowTasksAndDecisions || props.taskDecisionProvider)).maybeAdd([feedbackDialogPlugin, {
     coreVersion,
     ...props.feedbackInfo
-  }], Boolean(props.feedbackInfo)).maybeAdd([helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd([mediaPlugin, {
+  }], Boolean(props.feedbackInfo)).maybeAdd([helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd(
+  // duplicate plugin exists because first one if media is enabled
+  // second one when “media is disabled, and legacyMediaProvider is enabled
+  // @ts-expect-error
+  [mediaPlugin, {
     allowMediaSingle: {
       disableLayout: true
     },
@@ -150,7 +154,13 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     extensionHandlers: props.extensionHandlers,
     useLongPressSelection: false,
     appearance
-  }], Boolean(props.allowExtension)).maybeAdd([annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([datePlugin, {
+  }], Boolean(props.allowExtension)).maybeAdd(
+  // we are ignoring a duplicate plugin error here
+  // this error exists because we have two annotation plugins being added
+  // one with annotationProviders and one with allowConfluenceInlineComment
+  // long term this and media should be consolidated into adding both only once
+  // @ts-expect-error
+  [annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([datePlugin, {
     weekStartDay: typeof props.allowDate === 'object' ? props.allowDate.weekStartDay : undefined
   }], Boolean(props.allowDate)).maybeAdd([placeholderTextPlugin,
   // @ts-expect-error 2322: Type 'false | PlaceholderTextOptions | undefined'

package/dist/es2019/test-utils.js

@@ -53,7 +53,13 @@ function lightProcessPluginsList(editorPlugins) {
 }
 export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()) => pluginFactoryParams => {
   let editorPlugins = [];
-  const preset = inputPreset.has(basePlugin) ? inputPreset : inputPreset.add(basePlugin);
+
+  // we are ignoring the below because while this logic knows if
+  // basePlugin is in the inputPreset, the type system does not
+  // so it marks it as a duplicate plugin :) - this is fine
+  const preset = inputPreset.has(basePlugin) ? inputPreset :
+  // @ts-expect-error
+  inputPreset.add(basePlugin);
   editorPlugins = preset.build({
     pluginInjectionAPI: pluginFactoryParams.pluginInjectionAPI
   });

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

@@ -6,6 +6,7 @@ import React, { useMemo } from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import { telepointerStyle } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, MediaSharedClassNames, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
@@ -19,6 +20,7 @@ import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSele
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+import { usePresetContext } from '../../presets/context';
 import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
 import { dateStyles } from './date';
@@ -186,7 +188,7 @@ const contentStyles = props => css`
   ${listsStyles}
   ${ruleStyles()}
   ${mediaStyles}
-  ${layoutStyles}
+  ${layoutStyles(props.viewMode)}
   ${telepointerStyle}
   ${gapCursorStyles};
   ${tableStyles(props)}
@@ -282,11 +284,17 @@ export const createEditorContentStyle = styles => {
     const {
       colorMode
     } = useThemeObserver();
+    const editorAPI = usePresetContext();
+    const {
+      editorViewModeState
+    } = useSharedPluginState(editorAPI, ['editorViewMode']);
+    const viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     const memoizedStyle = useMemo(() => contentStyles({
       theme,
       colorMode,
-      featureFlags
-    }), [theme, colorMode, featureFlags]);
+      featureFlags,
+      viewMode
+    }), [theme, colorMode, featureFlags, viewMode]);
     return jsx("div", {
       className: className,
       ref: ref,

package/dist/es2019/ui/ContentStyles/layout.js

@@ -7,20 +7,20 @@ import { N40A, N50A } from '@atlaskit/theme/colors';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-export const layoutStyles = css`
+export const layoutStyles = viewMode => css`
   .ProseMirror {
     ${columnLayoutSharedStyle} [data-layout-section] {
       // TODO: Migrate away from gridSize
       // Recommendation: Replace directly with 7px
       margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
       transition: border-color 0.3s ${akEditorSwoopCubicBezier};
-      cursor: pointer;
+      cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
 
       /* Inner cursor located 26px from left */
       [data-layout-column] {
         flex: 1;
         min-width: 0;
-        border: ${akEditorSelectedBorderSize}px solid
+        border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
           ${`var(--ds-border, ${N40A})`};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
@@ -111,7 +111,7 @@ export const layoutStyles = css`
       /* Shows the border when cursor is inside a layout */
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
-        border: ${akEditorSelectedBorderSize}px solid
+        border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
           ${`var(--ds-border, ${N50A})`};
       }
 

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "193.19.0";
+export const version = "193.19.10";

package/dist/esm/create-editor/create-plugins-list.js

@@ -43,7 +43,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
   return _objectSpread(_objectSpread({}, props), {}, {
     createAnalyticsEvent: createAnalyticsEvent,
     typeAhead: {
-      createAnalyticsEvent: createAnalyticsEvent,
       isMobile: isMobile
     },
     featureFlags: createFeatureFlagsFromProps(props),

package/dist/esm/create-editor/create-preset.js

@@ -25,6 +25,7 @@ function withDangerouslyAppendPlugins(preset) {
     var presetWithAppendedPlugins = nextEditorPluginsToAppend.reduce(function (acc, plugin) {
       // These are dangerously appended, we don't need their type information leaking into
       // universal preset
+      // @ts-expect-error
       return acc.add(plugin);
     }, preset);
     return presetWithAppendedPlugins;

package/dist/esm/presets/default.js

@@ -48,9 +48,7 @@ export function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(betterTypeHistoryPlugin).add([pastePlugin, _objectSpread({}, options === null || options === void 0 ? void 0 : options.paste)]).add(clipboardPlugin).add(focusPlugin).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead || {
-    createAnalyticsEvent: options.createAnalyticsEvent
-  }]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
+  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], function () {
     if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/esm/presets/universal.js

@@ -133,7 +133,11 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     useLongPressSelection: false
   }], Boolean(props.allowTasksAndDecisions || props.taskDecisionProvider)).maybeAdd([feedbackDialogPlugin, _objectSpread({
     coreVersion: coreVersion
-  }, props.feedbackInfo)], Boolean(props.feedbackInfo)).maybeAdd([helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd([mediaPlugin, {
+  }, props.feedbackInfo)], Boolean(props.feedbackInfo)).maybeAdd([helpDialogPlugin, !!props.legacyImageUploadProvider], Boolean(props.allowHelpDialog)).maybeAdd([saveOnEnterPlugin, props.onSave], Boolean(props.saveOnEnter && props.onSave)).maybeAdd(imageUploadPlugin, Boolean(props.legacyImageUploadProvider)).maybeAdd(
+  // duplicate plugin exists because first one if media is enabled
+  // second one when “media is disabled, and legacyMediaProvider is enabled
+  // @ts-expect-error
+  [mediaPlugin, {
     allowMediaSingle: {
       disableLayout: true
     },
@@ -151,7 +155,13 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     extensionHandlers: props.extensionHandlers,
     useLongPressSelection: false,
     appearance: appearance
-  }], Boolean(props.allowExtension)).maybeAdd([annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([datePlugin, {
+  }], Boolean(props.allowExtension)).maybeAdd(
+  // we are ignoring a duplicate plugin error here
+  // this error exists because we have two annotation plugins being added
+  // one with annotationProviders and one with allowConfluenceInlineComment
+  // long term this and media should be consolidated into adding both only once
+  // @ts-expect-error
+  [annotationPlugin, undefined], Boolean(!props.annotationProviders && props.allowConfluenceInlineComment)).maybeAdd([datePlugin, {
     weekStartDay: _typeof(props.allowDate) === 'object' ? props.allowDate.weekStartDay : undefined
   }], Boolean(props.allowDate)).maybeAdd([placeholderTextPlugin,
   // @ts-expect-error 2322: Type 'false | PlaceholderTextOptions | undefined'

package/dist/esm/test-utils.js

@@ -62,7 +62,13 @@ export var createPMSchemaAndPlugins = function createPMSchemaAndPlugins() {
   var inputPreset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new EditorPresetBuilder();
   return function (pluginFactoryParams) {
     var editorPlugins = [];
-    var preset = inputPreset.has(basePlugin) ? inputPreset : inputPreset.add(basePlugin);
+
+    // we are ignoring the below because while this logic knows if
+    // basePlugin is in the inputPreset, the type system does not
+    // so it marks it as a duplicate plugin :) - this is fine
+    var preset = inputPreset.has(basePlugin) ? inputPreset :
+    // @ts-expect-error
+    inputPreset.add(basePlugin);
     editorPlugins = preset.build({
       pluginInjectionAPI: pluginFactoryParams.pluginInjectionAPI
     });

package/dist/esm/ui/ContentStyles/index.js

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import { telepointerStyle } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, MediaSharedClassNames, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
@@ -21,6 +22,7 @@ import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSele
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+import { usePresetContext } from '../../presets/context';
 import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
 import { dateStyles } from './date';
@@ -59,7 +61,7 @@ export var placeholderStyles = css({
 var contentStyles = function contentStyles(props) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -69,13 +71,18 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
     var theme = useTheme();
     var _useThemeObserver = useThemeObserver(),
       colorMode = _useThemeObserver.colorMode;
+    var editorAPI = usePresetContext();
+    var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode']),
+      editorViewModeState = _useSharedPluginState.editorViewModeState;
+    var viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     var memoizedStyle = useMemo(function () {
       return contentStyles({
         theme: theme,
         colorMode: colorMode,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        viewMode: viewMode
       });
-    }, [theme, colorMode, featureFlags]);
+    }, [theme, colorMode, featureFlags, viewMode]);
     return jsx("div", {
       className: className,
       ref: ref,

package/dist/esm/ui/ContentStyles/layout.js

@@ -9,4 +9,6 @@ import { N40A, N50A } from '@atlaskit/theme/colors';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", " -", "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          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .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-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-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          > style:first-child\n            + .ProseMirror-gapcursor\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          .mediaGroupView-content-wrap {\n            clear: both;\n          }\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: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // 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: ", "px solid\n          ", ";\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, "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = function layoutStyles(viewMode) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", " -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: ", ";\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .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-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-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          > style:first-child\n            + .ProseMirror-gapcursor\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          .mediaGroupView-content-wrap {\n            clear: both;\n          }\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: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // 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: ", "px solid\n          ", ";\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, "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+};

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "193.19.0";
+export var version = "193.19.10";