@atlaskit/editor-core 209.6.2 → 209.6.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 209.6.4
+
+### Patch Changes
+
+- [#197821](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197821)
+  [`54760d8b5b3ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54760d8b5b3ea) -
+  Allow popupsBoundariesElement & popupsScrollableElement in ChromelessEditorProps
+- Updated dependencies
+
+## 209.6.3
+
+### Patch Changes
+
+- [`b601133ff4b93`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b601133ff4b93) -
+  [ux] Adds margin top for embeds on narrow screens.
+
 ## 209.6.2
 
 ### Patch Changes

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

@@ -121,6 +121,11 @@ function ReactEditorView(props) {
     getEditorView: getEditorView,
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
+  }, []);
   var createEditorState = (0, _react.useCallback)(function (options) {
     var _api$editorViewMode;
     var schema;
@@ -147,7 +152,9 @@ function ReactEditorView(props) {
     } else {
       config.current = (0, _createEditor.processPluginsList)((0, _createPluginsList.default)(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = (0, _createSchema.createSchema)(config.current);
-      setEditorAPI(pluginInjectionAPI.current.api());
+      if ((0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
     var plugins = (0, _createEditor.createPMPlugins)({

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

@@ -133,9 +133,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
-  var isEditorToolbarHidden =
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  (0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state') && !(0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state_revert') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isEditorToolbarHidden = (0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true

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

@@ -10,7 +10,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // Retrieve the initial config value from the editor view plugin preset
 var getViewModeSync = function getViewModeSync(preset) {
   var _editorViewModePlugin;
-  if (!(0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state') || (0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state_revert')) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state')) {
     return undefined;
   }
   // @ts-expect-error - data is a private property

package/dist/cjs/ui/EditorContentContainer/styles/smartCardStyles.js

@@ -230,7 +230,9 @@ _selectionStyles.boxShadowSelectionStyles]), '&.danger', {
 }));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = exports.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, ".ak-editor-selected-node .").concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"),
+var smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = exports.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), {
+  marginTop: "var(--ds-space-150, 0.75rem)"
+}), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, ".ak-editor-selected-node .").concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"),
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
 [
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -4,12 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPrimaryToolbarComponents = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
 // We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
 // the latest
 var getPrimaryToolbarComponents = exports.getPrimaryToolbarComponents = function getPrimaryToolbarComponents(editorAPI, components) {
-  var _editorAPI$primaryToo;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    };
+  }
   return {
-    components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    components: components
   };
 };

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 = "209.6.1";
+var version = exports.version = "209.6.3";

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

@@ -93,6 +93,11 @@ export function ReactEditorView(props) {
     getEditorView: getEditorView,
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
+  useLayoutEffect(() => {
+    if (!fg('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
+  }, []);
   const createEditorState = useCallback(options => {
     var _api$editorViewMode;
     let schema;
@@ -119,7 +124,9 @@ export function ReactEditorView(props) {
     } else {
       config.current = processPluginsList(createPluginsList(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = createSchema(config.current);
-      setEditorAPI(pluginInjectionAPI.current.api());
+      if (fg('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     const {
       contentTransformerProvider

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

@@ -118,9 +118,7 @@ export const FullPageEditor = props => {
   if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
-  let isEditorToolbarHidden =
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  fg('platform_editor_sync_editor_view_mode_state') && !fg('platform_editor_sync_editor_view_mode_state_revert') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  let isEditorToolbarHidden = fg('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   const {
     customPrimaryToolbarComponents
   } = props;

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

@@ -2,7 +2,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // Retrieve the initial config value from the editor view plugin preset
 const getViewModeSync = preset => {
   var _editorViewModePlugin;
-  if (!fg('platform_editor_sync_editor_view_mode_state') || fg('platform_editor_sync_editor_view_mode_state_revert')) {
+  if (!fg('platform_editor_sync_editor_view_mode_state')) {
     return undefined;
   }
   // @ts-expect-error - data is a private property

package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js

@@ -327,6 +327,10 @@ export const smartCardStylesWithSearchMatch = css({
 export const smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
   [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
+    [`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
+      marginTop: "var(--ds-space-150, 0.75rem)"
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
     [`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]:
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values

package/dist/es2019/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -1,9 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 // Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
 // We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
 // the latest
 export const getPrimaryToolbarComponents = (editorAPI, components) => {
-  var _editorAPI$primaryToo, _editorAPI$primaryToo2;
+  if (fg('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo, _editorAPI$primaryToo2;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 ? void 0 : (_editorAPI$primaryToo2 = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo2 === void 0 ? void 0 : _editorAPI$primaryToo2.components
+    };
+  }
   return {
-    components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 ? void 0 : (_editorAPI$primaryToo2 = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo2 === void 0 ? void 0 : _editorAPI$primaryToo2.components
+    components
   };
 };

package/dist/es2019/version-wrapper.js

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

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

@@ -111,6 +111,11 @@ export function ReactEditorView(props) {
     getEditorView: getEditorView,
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
+  useLayoutEffect(function () {
+    if (!fg('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
+  }, []);
   var createEditorState = useCallback(function (options) {
     var _api$editorViewMode;
     var schema;
@@ -137,7 +142,9 @@ export function ReactEditorView(props) {
     } else {
       config.current = processPluginsList(createPluginsList(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = createSchema(config.current);
-      setEditorAPI(pluginInjectionAPI.current.api());
+      if (fg('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
     var plugins = createPMPlugins({

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

@@ -123,9 +123,7 @@ export var FullPageEditor = function FullPageEditor(props) {
   if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
-  var isEditorToolbarHidden =
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  fg('platform_editor_sync_editor_view_mode_state') && !fg('platform_editor_sync_editor_view_mode_state_revert') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isEditorToolbarHidden = fg('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true

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

@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // Retrieve the initial config value from the editor view plugin preset
 var getViewModeSync = function getViewModeSync(preset) {
   var _editorViewModePlugin;
-  if (!fg('platform_editor_sync_editor_view_mode_state') || fg('platform_editor_sync_editor_view_mode_state_revert')) {
+  if (!fg('platform_editor_sync_editor_view_mode_state')) {
     return undefined;
   }
   // @ts-expect-error - data is a private property

package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js

@@ -222,7 +222,9 @@ boxShadowSelectionStyles]), '&.danger', {
 }));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export var smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), _defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, ".ak-editor-selected-node .").concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"),
+export var smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), _defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), {
+  marginTop: "var(--ds-space-150, 0.75rem)"
+}), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, ".ak-editor-selected-node .").concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"),
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
 [
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/esm/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -1,9 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 // Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
 // We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
 // the latest
 export var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(editorAPI, components) {
-  var _editorAPI$primaryToo;
+  if (fg('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    };
+  }
   return {
-    components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    components: components
   };
 };

package/dist/esm/version-wrapper.js

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

package/dist/types/editor-appearances/ChromelessEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type EditorNextProps } from '../types/editor-props';
-export type ChromelessEditorProps = Pick<EditorNextProps, 'preset' | 'defaultValue' | 'assistiveLabel' | 'disabled' | 'shouldFocus' | 'quickInsert' | 'performanceTracking' | 'secondaryToolbarComponents' | 'featureFlags' | 'onChange' | 'onDestroy' | 'onEditorReady' | 'onSave' | 'onCancel' | 'mentionProvider' | 'contextIdentifierProvider' | 'searchProvider' | 'extensionProviders' | 'popupsMountPoint'>;
+export type ChromelessEditorProps = Pick<EditorNextProps, 'preset' | 'defaultValue' | 'assistiveLabel' | 'disabled' | 'shouldFocus' | 'quickInsert' | 'performanceTracking' | 'secondaryToolbarComponents' | 'featureFlags' | 'onChange' | 'onDestroy' | 'onEditorReady' | 'onSave' | 'onCancel' | 'mentionProvider' | 'contextIdentifierProvider' | 'searchProvider' | 'extensionProviders' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'>;
 /**
  * Editor component based on `ComposableEditor` which sets the `appearance` to "chromeless".
  *

package/dist/types-ts4.5/editor-appearances/ChromelessEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type EditorNextProps } from '../types/editor-props';
-export type ChromelessEditorProps = Pick<EditorNextProps, 'preset' | 'defaultValue' | 'assistiveLabel' | 'disabled' | 'shouldFocus' | 'quickInsert' | 'performanceTracking' | 'secondaryToolbarComponents' | 'featureFlags' | 'onChange' | 'onDestroy' | 'onEditorReady' | 'onSave' | 'onCancel' | 'mentionProvider' | 'contextIdentifierProvider' | 'searchProvider' | 'extensionProviders' | 'popupsMountPoint'>;
+export type ChromelessEditorProps = Pick<EditorNextProps, 'preset' | 'defaultValue' | 'assistiveLabel' | 'disabled' | 'shouldFocus' | 'quickInsert' | 'performanceTracking' | 'secondaryToolbarComponents' | 'featureFlags' | 'onChange' | 'onDestroy' | 'onEditorReady' | 'onSave' | 'onCancel' | 'mentionProvider' | 'contextIdentifierProvider' | 'searchProvider' | 'extensionProviders' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'>;
 /**
  * Editor component based on `ComposableEditor` which sets the `appearance` to "chromeless".
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "209.6.2",
+	"version": "209.6.4",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -163,9 +163,6 @@
 		"platform_editor_sync_editor_view_mode_state": {
 			"type": "boolean"
 		},
-		"platform_editor_sync_editor_view_mode_state_revert": {
-			"type": "boolean"
-		},
 		"annotations_defensive_node_name_calculations": {
 			"type": "boolean",
 			"referenceOnly": "true"
@@ -267,6 +264,9 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform_editor_setup_editorapi_sync": {
+			"type": "boolean"
+		},
 		"platform_editor_disable_context_panel_animation": {
 			"type": "boolean",
 			"referenceOnly": true