npm - @atlaskit/editor-core - Versions diffs - 207.2.1 → 207.4.0 - Mend

@atlaskit/editor-core 207.2.1 → 207.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

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

@@ -15,7 +15,7 @@ import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/cons
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-var akNestedDndGutterOffset = 8;
+var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
   return fg('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
@@ -71,5 +71,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var layoutStyles = function layoutStyles(viewMode) {
-  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* 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\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? akNestedDndGutterOffset : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px\n\t\t\t\t0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* 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\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
 };

package/dist/esm/ui/ContextPanel/index.js CHANGED Viewed

@@ -18,8 +18,9 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 var ANIM_SPEED_MS = 500;
@@ -169,11 +170,16 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-export function ContextPanel(props) {
-  var _contextPanelState$co;
-  var _useSharedPluginState = useSharedPluginState(props.editorAPI, ['contextPanel']),
+var useContextPanelSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['contextPanel']),
     contextPanelState = _useSharedPluginState.contextPanelState;
-  var firstContent = contextPanelState && (contextPanelState === null || contextPanelState === void 0 || (_contextPanelState$co = contextPanelState.contents) === null || _contextPanelState$co === void 0 ? void 0 : _contextPanelState$co.find(Boolean));
+  return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
+}, function (pluginInjectionApi) {
+  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
+});
+export function ContextPanel(props) {
+  var contextPanelContents = useContextPanelSharedState(props.editorAPI);
+  var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-co
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { CodeBlockSharedCssClassName, GRID_GUTTER, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { CodeBlockSharedCssClassName, GRID_GUTTER, SmartCardSharedCssClassName, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -33,14 +33,16 @@ import { codeBlockStyles } from '../ContentStyles/code-block';
 import { dateStyles, dateVanillaStyles } from '../ContentStyles/date';
 import { expandStyles } from '../ContentStyles/expand';
 import { extensionStyles } from '../ContentStyles/extension';
-import { mediaStyles } from '../ContentStyles/media';
 import { panelStyles } from '../ContentStyles/panel';
 import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
 import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from '../ContentStyles/tasks-and-decisions';
 import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
+import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
+import { embedCardStyles } from './styles/embedCardStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
+import { mediaStyles } from './styles/mediaStyles';
 import { ruleStyles } from './styles/rule';
 var vanillaMentionsStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -139,7 +141,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\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  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceSharedStyles, paragraphSharedStyles(), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles(), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\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  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceSharedStyles, paragraphSharedStyles(), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -153,7 +155,7 @@ var contentStyles = function contentStyles() {
     exposure: false
   }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, pragmaticResizerStyles(), fixBlockControlStylesSSR(), !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var CommentEditorMargin = 14;

package/dist/esm/ui/EditorContentContainer/styles/annotationStyles.js ADDED Viewed

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var annotationStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(AnnotationSharedClassNames.blur, ", .").concat(AnnotationSharedClassNames.focus, ", .").concat(AnnotationSharedClassNames.draft, ", .").concat(AnnotationSharedClassNames.hover), {
+    borderBottom: '2px solid transparent',
+    cursor: 'pointer',
+    padding: '1px 0 2px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.card), &:has([data-inline-card])': {
+      padding: '5px 0 3px 0'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.date-lozenger-container)': {
+      paddingTop: "var(--ds-space-025, 2px)"
+    }
+  }), ".".concat(AnnotationSharedClassNames.focus), {
+    background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
+  }), ".".concat(AnnotationSharedClassNames.draft), {
+    background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)",
+    cursor: 'initial'
+  }), ".".concat(AnnotationSharedClassNames.blur), {
+    background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
+  }), ".".concat(AnnotationSharedClassNames.hover), {
+    background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
+  })
+});

package/dist/esm/ui/EditorContentContainer/styles/embedCardStyles.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var embedCardStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout^='wrap-']": {
+      maxWidth: '100%',
+      position: 'relative',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      zIndex: 2
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
+    }
+  }
+});

package/dist/esm/ui/EditorContentContainer/styles/mediaStyles.js ADDED Viewed

@@ -0,0 +1,224 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _ProseMirror, _css;
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
+import { MediaSharedClassNames, richMediaClassName } from '@atlaskit/editor-common/styles';
+import { akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName, akEditorWrappedNodeZIndex } from '@atlaskit/editor-shared-styles';
+import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
+var wrappedMediaBreakoutPoint = 410;
+/**
+ * Reference Heights
+ *
+ * These heights enforce consistent sizes with media inline nodes due to
+ * inconsistencies with center aligned inline nodes and text.
+ *
+ * There is conversation about refactoring media inline nodes to conform to
+ * aligning correctly with the surrounding text.
+ *
+ * These constants originally came from `headingSizes` from the `theme` package
+ * and have been copied here to remove this package.
+ */
+var referenceHeights = {
+  p: 24 - 2,
+  h1: 32 + 4,
+  h2: 28 + 3,
+  h3: 24 + 1,
+  h4: 20 + 3,
+  h5: 16 + 4,
+  h6: 16 + 2
+};
+var inlineImageSelector = "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+export var mediaStyles = css((_css = {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (_ProseMirror = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, "li .".concat(richMediaClassName), {
+    margin: 0
+  }), '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+    content: "''",
+    display: 'block',
+    height: 0
+  }), '&.ua-firefox', {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.mediaSingleView-content-wrap': {
+      userSelect: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.captionView-content-wrap': {
+      userSelect: 'text'
+    }
+  }), ".mediaSingleView-content-wrap[layout^='wrap-']", {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    zIndex: akEditorWrappedNodeZIndex,
+    maxWidth: '100%',
+    /* overwrite default Prosemirror setting making it clear: both */
+    clear: 'inherit'
+  }), ".mediaSingleView-content-wrap[layout='center']", {
+    clear: 'both'
+  }), "table .".concat(richMediaClassName), {
+    marginTop: "var(--ds-space-150, 12px)",
+    marginBottom: "var(--ds-space-150, 12px)",
+    clear: 'both',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
+      clear: 'none',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:first-child': {
+        marginTop: "var(--ds-space-150, 12px)"
+      }
+    }
+  }), ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+    clear: 'both'
+  }), ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+    marginRight: 0,
+    marginLeft: 0
+  }), "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+      float: 'none',
+      overflow: 'auto',
+      margin: "var(--ds-space-150, 12px)".concat(" 0")
+    }
+  }), "& [layout='full-width'] .".concat(richMediaClassName, ", & [layout='wide'] .").concat(richMediaClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '50%',
+    transform: 'translateX(-50%)'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".media-extended-resize-experience[layout^='wrap-']", {
+    // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
+    // to prevent scroll bar
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    overflow: 'visible !important'
+  }), "& [layout^='wrap-'] + [layout^='wrap-']", _defineProperty({
+    clear: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& + p, & + div[class^='fabric-editor-align'], & + ul, & + ol, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6": {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles,@atlaskit/ui-styling-standard/no-unsafe-values
+      clear: 'both !important'
+    }
+  }, "& .".concat(richMediaClassName), {
+    marginLeft: 0,
+    marginRight: 0
+  })), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights['p'],
+    transform: 'translateY(-2px)'
+  }), "h1", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h1,
+    transform: "translateY(-3px)"
+  })), "h2", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h2,
+    transform: "translateY(-3px)"
+  })), "h3", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h3,
+    transform: "translateY(-2px)"
+  })), "h4", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h4,
+    transform: "translateY(-2px)"
+  })), "h5", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h5,
+    transform: "translateY(-2px)"
+  })), "h6", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h6,
+    transform: "translateY(-2px)"
+  })), ".mediaSingleView-content-wrap[layout='wrap-left']", {
+    float: 'left'
+  }), _defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".mediaSingleView-content-wrap[layout='wrap-right']", {
+    float: 'right'
+  }), ".mediaSingleView-content-wrap[layout='wrap-right'] + .mediaSingleView-content-wrap[layout='wrap-left']", {
+    clear: 'both'
+  }), '& > .mediaSingleView-content-wrap', {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.richMedia-resize-handle-right': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      marginRight: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.richMedia-resize-handle-left': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      marginLeft: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
+    }
+  }))
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT), {
+  padding: 0
+}), '.richMedia-resize-handle-right, .richMedia-resize-handle-left', {
+  display: 'flex',
+  flexDirection: 'column',
+  /* vertical align */
+  justifyContent: 'center'
+}), '.richMedia-resize-handle-right', {
+  alignItems: 'flex-end',
+  paddingRight: "var(--ds-space-150, 12px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  marginRight: "-".concat(akEditorMediaResizeHandlerPadding, "px")
+}), '.richMedia-resize-handle-left', {
+  alignItems: 'flex-start',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  marginLeft: "-".concat(akEditorMediaResizeHandlerPadding, "px")
+}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
+  content: "' '",
+  display: 'flex',
+  width: 3,
+  height: 64,
+  borderRadius: 6
+}), ".".concat(richMediaClassName, ":hover .richMedia-resize-handle-left::after, .").concat(richMediaClassName, ":hover .richMedia-resize-handle-right::after"), {
+  background: "var(--ds-border, #091E4224)"
+}), ".".concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-right::after, .").concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-left::after, .").concat(richMediaClassName, " .richMedia-resize-handle-right:hover::after, .").concat(richMediaClassName, " .richMedia-resize-handle-left:hover::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-right::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-left::after"), {
+  background: "var(--ds-border-focused, #388BFF)"
+}), '.__resizable_base__', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  left: 'unset !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'auto !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: 'auto !important'
+}), '.danger > div > div > .media-card-frame, .danger > span > a', {
+  backgroundColor: "var(--ds-background-danger, #FFECEB)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: "0px 0px 0px ".concat(akEditorSelectedBorderBoldSize, "px, ", "var(--ds-border-danger, #E2483D)"),
+  transition: 'background-color 0s, box-shadow 0s'
+}), '.danger', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
+}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
+}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
+}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
+}), '.resizer-handle-thumb', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
+}), 'div div .media-card-frame, .inlineCardView-content-wrap > span > a', {
+  backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
+  transition: "background-color 0s"
+}), 'div div .media-card-frame::after', {
+  boxShadow: 'none'
+})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, '.warning', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-warning, #E56910)")
+}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-warning, #E56910)")
+}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-warning, #E56910)", " !important")
+}), '.resizer-handle-thumb', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-warning, #E56910)".concat(" !important")
+})), '.media-filmstrip-list-item', {
+  cursor: 'pointer'
+}), ".mediaGroupView-content-wrap.".concat(akEditorSelectedNodeClassName, " #newFileExperienceWrapper"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: akEditorSelectedBoxShadow
+}), '.ak-editor-no-interaction #newFileExperienceWrapper', {
+  boxShadow: 'none'
+})));

package/dist/esm/version-wrapper.js CHANGED Viewed

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

package/dist/types/presets/default.d.ts CHANGED Viewed

@@ -1,12 +1,15 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { SelectionPluginOptions } from '@atlaskit/editor-common/selection';
-import type { EditorAppearance, FeatureFlags, HyperlinkPluginOptions, PerformanceTracking, QuickInsertPluginOptions, TextFormattingOptions } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, FeatureFlags, PerformanceTracking } from '@atlaskit/editor-common/types';
 import type { BasePluginOptions } from '@atlaskit/editor-plugins/base';
 import type { BlockTypePluginOptions } from '@atlaskit/editor-plugins/block-type';
-import type { CodeBlockOptions } from '@atlaskit/editor-plugins/code-block';
+import type { CodeBlockPluginOptions } from '@atlaskit/editor-plugins/code-block';
+import { type HyperlinkPluginOptions } from '@atlaskit/editor-plugins/hyperlink';
 import type { PastePluginOptions } from '@atlaskit/editor-plugins/paste';
 import type { PlaceholderPluginOptions } from '@atlaskit/editor-plugins/placeholder';
+import type { QuickInsertPluginOptions } from '@atlaskit/editor-plugins/quick-insert';
+import type { TextFormattingPluginOptions } from '@atlaskit/editor-plugins/text-formatting';
 import type { TypeAheadPluginOptions } from '@atlaskit/editor-plugins/type-ahead';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { DefaultPresetBuilder } from './default-preset-type';
@@ -15,10 +18,10 @@ export type DefaultPresetPluginOptions = {
     base?: BasePluginOptions;
     blockType?: BlockTypePluginOptions;
     placeholder?: PlaceholderPluginOptions;
-    textFormatting?: TextFormattingOptions;
+    textFormatting?: TextFormattingPluginOptions;
     submitEditor?: (editorView: EditorView) => void;
     quickInsert?: QuickInsertPluginOptions;
-    codeBlock?: CodeBlockOptions;
+    codeBlock?: CodeBlockPluginOptions;
     selection?: SelectionPluginOptions;
     hyperlinkOptions?: HyperlinkPluginOptions;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
@@ -44,6 +47,13 @@ export type DefaultPresetPluginOptions = {
 /**
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
+ * @param options
+ * @example
  */
 export declare function createDefaultPreset(options: DefaultPresetPluginOptions): DefaultPresetBuilder;
+/**
+ *
+ * @param props
+ * @example
+ */
 export declare function useDefaultPreset(props: DefaultPresetPluginOptions): DefaultPresetBuilder[];

package/dist/types/types/editor-props.d.ts CHANGED Viewed

@@ -6,21 +6,22 @@ import type { ErrorReportingHandler } from '@atlaskit/editor-common/error-report
 import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { AllEditorPresetPluginTypes, AllPluginNames, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { ContextIdentifierProvider, Providers, SearchProvider } from '@atlaskit/editor-common/provider-factory';
-import type { EditorAppearance, EmptyStateHandler, FeedbackInfo, LinkingOptions, PerformanceTracking, QuickInsertOptions, TextFormattingOptions, Transformer } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, EmptyStateHandler, FeedbackInfo, LinkingOptions, PerformanceTracking, QuickInsertOptions, Transformer } from '@atlaskit/editor-common/types';
 import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';
 import type { BlockTypePluginOptions } from '@atlaskit/editor-plugins/block-type';
-import type { CodeBlockOptions } from '@atlaskit/editor-plugins/code-block';
+import type { CodeBlockPluginOptions } from '@atlaskit/editor-plugins/code-block';
 import type { DatePluginOptions } from '@atlaskit/editor-plugins/date';
 import type { FindReplaceOptions } from '@atlaskit/editor-plugins/find-replace';
 import type { LayoutPluginOptions } from '@atlaskit/editor-plugins/layout';
-import type { MediaOptions, MediaState } from '@atlaskit/editor-plugins/media/types';
+import type { MediaPluginOptions, MediaState } from '@atlaskit/editor-plugins/media/types';
 import type { MentionPluginConfig } from '@atlaskit/editor-plugins/mentions';
 import type { PanelPluginConfig } from '@atlaskit/editor-plugins/panel';
-import type { PlaceholderTextOptions } from '@atlaskit/editor-plugins/placeholder-text';
+import type { PlaceholderTextPluginOptions } from '@atlaskit/editor-plugins/placeholder-text';
 import type { PluginConfig as TablesPluginConfig } from '@atlaskit/editor-plugins/table/types';
 import type { TextColorPluginConfig } from '@atlaskit/editor-plugins/text-color';
+import type { TextFormattingPluginOptions } from '@atlaskit/editor-plugins/text-formatting';
 import type { Node, Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MentionProvider } from '@atlaskit/mention/resource';
@@ -160,7 +161,7 @@ export interface EditorNextProps extends EditorBaseProps, EditorSharedPropsWithP
      * Example:
      * ```ts
      * // In preset creation you can pass the props passed to the editor like this:
-     * preset.add([mediaPlugin, mediaOptions])
+     * preset.add([mediaPlugin, MediaPluginOptions])
      * ```
      *
      * Note: Props you pass to the media plugin via the preset do not re-render like in React.
@@ -173,7 +174,7 @@ export interface EditorNextProps extends EditorBaseProps, EditorSharedPropsWithP
      * editorApi?.media.actions.setProvider(mediaProvider);
      * ```
      */
-    media?: MediaOptions;
+    media?: MediaPluginOptions;
     assistiveDescribedBy?: string;
     emojiProvider?: Providers['emojiProvider'];
     taskDecisionProvider?: Promise<TaskDecisionProvider>;
@@ -207,7 +208,7 @@ export interface EditorPluginFeatureProps {
     allowPanel?: boolean | PanelPluginConfig;
     allowExtension?: boolean | ExtensionConfig;
     allowConfluenceInlineComment?: boolean;
-    allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    allowTemplatePlaceholders?: boolean | PlaceholderTextPluginOptions;
     allowDate?: boolean | DatePluginOptions;
     allowLayouts?: boolean | LayoutPluginOptions;
     allowStatus?: boolean | {
@@ -259,14 +260,14 @@ export interface EditorPluginFeatureProps {
     /** @deprecated Use linking.smartLinks prop instead. */
     smartLinks?: CardOptions;
     allowAnalyticsGASV3?: boolean;
-    codeBlock?: CodeBlockOptions;
-    textFormatting?: TextFormattingOptions;
+    codeBlock?: CodeBlockPluginOptions;
+    textFormatting?: TextFormattingPluginOptions;
     placeholder?: string;
     placeholderBracketHint?: string;
     /**
      *  Configure and extend editor linking behaviour
      */
     linking?: LinkingOptions;
-    media?: MediaOptions;
+    media?: MediaPluginOptions;
 }
 export {};

package/dist/types/ui/Appearance/Chromeless.d.ts CHANGED Viewed

@@ -30,10 +30,6 @@ export default class Editor extends React.Component<AppearanceProps> {
     private appearance;
     private containerElement;
     private renderChrome;
-    /**
-     *
-     * @example
-     */
     render(): jsx.JSX.Element;
 }
 export {};

package/dist/types/ui/Appearance/FullPage/FullPage.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react';
 import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';
-import { type InteractionPlugin } from '@atlaskit/editor-plugins/interaction';
+import type { InteractionPlugin } from '@atlaskit/editor-plugins/interaction';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';
 import type { EditorAppearanceComponentProps } from '../../../types';

package/dist/types/ui/Appearance/FullPage/getEditorViewModeSync.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import type { ViewMode, EditorViewModePluginState } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { ComponentProps } from './FullPage';
-export declare const getEditorViewMode: (editorViewModeState: EditorViewModePluginState | undefined | null, preset: ComponentProps['preset']) => ViewMode;
+export declare const getEditorViewMode: (editorViewModeState: Pick<EditorViewModePluginState, 'mode'> | undefined | null, preset: ComponentProps['preset']) => ViewMode;

package/dist/types/ui/EditorContentContainer/styles/annotationStyles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const annotationStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/EditorContentContainer/styles/embedCardStyles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const embedCardStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/EditorContentContainer/styles/mediaStyles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const mediaStyles: import("@emotion/react").SerializedStyles;