@atlaskit/editor-core 219.9.1 → 219.9.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 219.9.2
+
+### Patch Changes
+
+- [`b4b10071d5c4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4b10071d5c4a) -
+  Delay browser-persisted markdown view-mode evaluation until after hydration when
+  `platform_editor_delay_markdown_view_mode_eval` is enabled.
+
+  Scope the markdown-mode ProseMirror hide style under an explicit data attribute when the same gate
+  is enabled.
+
+- Updated dependencies
+
 ## 219.9.1
 
 ### Patch Changes

package/dist/cjs/types/markdown-mode.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -67,6 +67,12 @@ var hideEditorContentAreaProsemirrorStyle = (0, _react2.css)({
     display: 'none'
   }
 });
+var hideEditorContentAreaProsemirrorWithAttributeStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&[data-markdown-mode-hide-prosemirror="true"] .ProseMirror': {
+    display: 'none'
+  }
+});
 var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -253,6 +259,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var _states$markdownModeS2;
     return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
   });
+  var shouldHideProseMirrorForMarkdownMode = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode;
   return (0, _react2.jsx)("div", {
     css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
@@ -278,10 +285,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, (0, _react2.jsx)("div", {
+    "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode && (0, _platformFeatureFlags.fg)('platform_editor_delay_markdown_view_mode_eval') ? 'true' : undefined,
     css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
     // EDITOR-6558: hide ProseMirror when the markdown-mode plugin
     // reports a non-WYSIWYG view.
-    (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode && hideEditorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
+    shouldHideProseMirrorForMarkdownMode && ((0, _platformFeatureFlags.fg)('platform_editor_delay_markdown_view_mode_eval') ? hideEditorContentAreaProsemirrorWithAttributeStyle : hideEditorContentAreaProsemirrorStyle), tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {

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 = "219.9.0";
+var version = exports.version = "0.0.0-development";

package/dist/es2019/types/markdown-mode.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -58,6 +58,12 @@ const hideEditorContentAreaProsemirrorStyle = css({
     display: 'none'
   }
 });
+const hideEditorContentAreaProsemirrorWithAttributeStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&[data-markdown-mode-hide-prosemirror="true"] .ProseMirror': {
+    display: 'none'
+  }
+});
 const fullWidthNonChromelessBreakoutBlockTableStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -245,6 +251,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     var _states$markdownModeS2;
     return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
   });
+  const shouldHideProseMirrorForMarkdownMode = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode;
   return jsx("div", {
     css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
@@ -270,10 +277,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, jsx("div", {
+    "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode && fg('platform_editor_delay_markdown_view_mode_eval') ? 'true' : undefined,
     css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
     // EDITOR-6558: hide ProseMirror when the markdown-mode plugin
     // reports a non-WYSIWYG view.
-    expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode && hideEditorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
+    shouldHideProseMirrorForMarkdownMode && (fg('platform_editor_delay_markdown_view_mode_eval') ? hideEditorContentAreaProsemirrorWithAttributeStyle : hideEditorContentAreaProsemirrorStyle), tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "219.9.0";
+export const version = "0.0.0-development";

package/dist/esm/types/markdown-mode.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -13,7 +13,7 @@ import { injectIntl } from 'react-intl';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -57,6 +57,12 @@ var hideEditorContentAreaProsemirrorStyle = css({
     display: 'none'
   }
 });
+var hideEditorContentAreaProsemirrorWithAttributeStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&[data-markdown-mode-hide-prosemirror="true"] .ProseMirror': {
+    display: 'none'
+  }
+});
 var fullWidthNonChromelessBreakoutBlockTableStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -243,6 +249,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _states$markdownModeS2;
     return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
   });
+  var shouldHideProseMirrorForMarkdownMode = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode;
   return jsx("div", {
     css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
@@ -268,10 +275,11 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, jsx("div", {
+    "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode && fg('platform_editor_delay_markdown_view_mode_eval') ? 'true' : undefined,
     css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
     // EDITOR-6558: hide ProseMirror when the markdown-mode plugin
     // reports a non-WYSIWYG view.
-    expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode && hideEditorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
+    shouldHideProseMirrorForMarkdownMode && (fg('platform_editor_delay_markdown_view_mode_eval') ? hideEditorContentAreaProsemirrorWithAttributeStyle : hideEditorContentAreaProsemirrorStyle), tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "219.9.0";
+export var version = "0.0.0-development";

package/dist/types/types/markdown-mode.d.ts

@@ -0,0 +1,11 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type MarkdownModeView = 'syntax' | 'wysiwyg' | 'preview';
+export type MarkdownModePlugin = NextEditorPlugin<'markdownMode', {
+    actions: {
+        setView: (view: MarkdownModeView) => void;
+    };
+    sharedState: {
+        isMarkdownMode: boolean;
+        view: MarkdownModeView;
+    };
+}>;

package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -14,9 +14,9 @@ import type { BlockMenuPlugin } from '@atlaskit/editor-plugins/block-menu';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
 import type { ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
 import type EditorActions from '../../../actions';
 import type { ContentComponents, ReactComponents } from '../../../types';
+import type { MarkdownModePlugin } from '../../../types/markdown-mode';
 import type { ScrollContainerRefs } from './types';
 type EditorAPI = PublicPluginAPI<[
     OptionalPlugin<ContextPanelPlugin>,

package/dist/types/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -7,8 +7,8 @@ import React from 'react';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
 import type { PrimaryToolbarComponents } from '../../../types';
+import type { MarkdownModePlugin } from '../../../types/markdown-mode';
 type FullPageToolbarNextProps = {
     beforeIcon?: React.ReactNode;
     customPrimaryToolbarComponents?: PrimaryToolbarComponents;

package/dist/types/ui/Toolbar/Toolbar.d.ts

@@ -5,7 +5,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarUIContextType } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent, RegisterToolbar } from '@atlaskit/editor-toolbar-model';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
+import type { MarkdownModePlugin } from '../../types/markdown-mode';
 import type { ToolbarProps } from './toolbar-types';
 /**
  * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.

package/dist/types-ts4.5/types/markdown-mode.d.ts

@@ -0,0 +1,11 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type MarkdownModeView = 'syntax' | 'wysiwyg' | 'preview';
+export type MarkdownModePlugin = NextEditorPlugin<'markdownMode', {
+    actions: {
+        setView: (view: MarkdownModeView) => void;
+    };
+    sharedState: {
+        isMarkdownMode: boolean;
+        view: MarkdownModeView;
+    };
+}>;

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -14,9 +14,9 @@ import type { BlockMenuPlugin } from '@atlaskit/editor-plugins/block-menu';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
 import type { ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
 import type EditorActions from '../../../actions';
 import type { ContentComponents, ReactComponents } from '../../../types';
+import type { MarkdownModePlugin } from '../../../types/markdown-mode';
 import type { ScrollContainerRefs } from './types';
 type EditorAPI = PublicPluginAPI<[
     OptionalPlugin<ContextPanelPlugin>,

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -7,8 +7,8 @@ import React from 'react';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
 import type { PrimaryToolbarComponents } from '../../../types';
+import type { MarkdownModePlugin } from '../../../types/markdown-mode';
 type FullPageToolbarNextProps = {
     beforeIcon?: React.ReactNode;
     customPrimaryToolbarComponents?: PrimaryToolbarComponents;

package/dist/types-ts4.5/ui/Toolbar/Toolbar.d.ts

@@ -5,7 +5,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugins/toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarUIContextType } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent, RegisterToolbar } from '@atlaskit/editor-toolbar-model';
-import type { MarkdownModePlugin } from '@atlassian/editor-plugin-markdown-mode';
+import type { MarkdownModePlugin } from '../../types/markdown-mode';
 import type { ToolbarProps } from './toolbar-types';
 /**
  * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "219.9.1",
+	"version": "219.9.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -74,7 +74,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
 		"@atlaskit/react-ufo": "^5.21.0",
 		"@atlaskit/task-decision": "^20.1.0",
-		"@atlaskit/tmp-editor-statsig": "^81.1.0",
+		"@atlaskit/tmp-editor-statsig": "^81.2.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/width-detector": "^5.1.0",
@@ -92,7 +92,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.35.0",
+		"@atlaskit/editor-common": "^114.36.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"@atlaskit/media-core": "^37.1.0",
 		"react": "^18.2.0",
@@ -103,7 +103,7 @@
 		"@af/editor-libra": "workspace:^",
 		"@af/suppress-react-warnings": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/adf-utils": "^19.29.0",
+		"@atlaskit/adf-utils": "^19.30.0",
 		"@atlaskit/analytics-listeners": "^10.1.0",
 		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/collab-provider": "^19.0.0",
@@ -335,6 +335,9 @@
 		},
 		"platform_editor_chromeless_akeditor_class": {
 			"type": "boolean"
+		},
+		"platform_editor_delay_markdown_view_mode_eval": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {