@atlaskit/editor-core 205.4.0 → 205.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-core
 
+## 205.5.0
+
+### Minor Changes
+
+- [#137929](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137929)
+  [`fafc821856dba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fafc821856dba) -
+  Introduced INP metrics collector behind feature flag
+
+### Patch Changes
+
+- [#140231](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140231)
+  [`c00bd6c36816f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c00bd6c36816f) -
+  Editor annotation plugin will now hook into the annotation manager and disable standard behaviour
+  when the FG platform_editor_comments_api_manager is enabled.
+- Updated dependencies
+
+## 205.4.1
+
+### Patch Changes
+
+- [#142098](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142098)
+  [`e84b542ba2d44`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e84b542ba2d44) -
+  [ED-27614] Put quick insert placeholder behind a separate
+  FGplatform_editor_quick_insert_placeholder
+- Updated dependencies
+
 ## 205.4.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -25,6 +25,7 @@ var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
 var _versionWrapper = require("../version-wrapper");
 var _corePerformanceMetrics = require("./core-performance-metrics");
+var _editorInpMetrics = require("./editor-inp-metrics");
 var _editorInternal = require("./editor-internal");
 var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeasureEditorMountTime"));
 var _useMemoEditorProps = _interopRequireDefault(require("./hooks/useMemoEditorProps"));
@@ -93,7 +94,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--ufo-bridge') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorUFOBridge, null) : null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--performance_metrics') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorPerformanceMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
+  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--ufo-bridge') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorUFOBridge, null) : null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--performance_metrics') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorPerformanceMetrics, null) : null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--inp-metrics') ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/cjs/composable-editor/editor-inp-metrics.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorINPMetrics = void 0;
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _useAnalyticsEvents = require("@atlaskit/analytics-next/useAnalyticsEvents");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _inp = require("@atlaskit/editor-performance-metrics/inp");
+var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
+var EditorINPMetrics = exports.EditorINPMetrics = function EditorINPMetrics() {
+  var analyticsEvents = (0, _useAnalyticsEvents.useAnalyticsEvents)();
+
+  // onMount lifecycle hook
+  (0, _react.useEffect)(function () {
+    var cleanupFn;
+    var cleanupIdleCallback = createIdleCallback(function () {
+      cleanupFn = (0, _inp.setupINPTracking)(function (_ref) {
+        var value = _ref.value;
+        var interaction = (0, _interactionMetrics.getActiveInteraction)();
+        var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+      });
+    });
+
+    // Cleanup function that will be called when the component unmounts
+    return function () {
+      var _cleanupFn;
+      cleanupIdleCallback();
+      (_cleanupFn = cleanupFn) === null || _cleanupFn === void 0 || _cleanupFn();
+    };
+    // Using hook as mount lifecycle hook.
+    // We do not need to set dependency on analyticsEvents since we are using the analyticsEvents object reference
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // This component doesn't render anything
+  return null;
+};
+var sendAnalytics = (0, _debounce.default)(function (createAnalyticsEvent, value, ufoName) {
+  (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
+    payload: {
+      // @ts-expect-error Temporary data
+      action: 'inp',
+      actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        inp: value,
+        ufoName: ufoName
+      }
+    }
+  });
+}, 1000, {
+  trailing: true
+});
+var createIdleCallback = function createIdleCallback(callback) {
+  if (typeof window.requestIdleCallback === 'function') {
+    var _id = window.requestIdleCallback(callback);
+    return function () {
+      return window.cancelIdleCallback(_id);
+    };
+  }
+  // Fallback to setTimeout with 0 delay if requestIdleCallback is not available
+  var id = window.setTimeout(callback, 0);
+  return function () {
+    return window.clearTimeout(id);
+  };
+};

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

@@ -142,9 +142,6 @@ var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject9 || (_templateObj
  * fix layout issue of first block node
  */
 var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
-  if (!(0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_block_controls')) {
-    return null;
-  }
   if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
     return firstBlockNodeStylesNew;
   }
@@ -156,7 +153,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\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\t", "\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     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false

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

package/dist/es2019/composable-editor/core-editor.js

@@ -22,6 +22,7 @@ import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import measurements from '../utils/performance/measure-enum';
 import { name, version } from '../version-wrapper';
 import { EditorUFOBridge, EditorPerformanceMetrics } from './core-performance-metrics';
+import { EditorINPMetrics } from './editor-inp-metrics';
 import { EditorInternal } from './editor-internal';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
 // Ignored via go/ees005
@@ -91,7 +92,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   const isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--ufo-bridge') ? jsx(EditorUFOBridge, null) : null, isFullPageApperance && fg('platform_editor_fe--performance_metrics') ? jsx(EditorPerformanceMetrics, null) : null, jsx(EditorInternal, {
+  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--ufo-bridge') ? jsx(EditorUFOBridge, null) : null, isFullPageApperance && fg('platform_editor_fe--performance_metrics') ? jsx(EditorPerformanceMetrics, null) : null, isFullPageApperance && fg('platform_editor_fe--inp-metrics') ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/es2019/composable-editor/editor-inp-metrics.js

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import debounce from 'lodash/debounce';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { setupINPTracking } from '@atlaskit/editor-performance-metrics/inp';
+import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
+export const EditorINPMetrics = () => {
+  const analyticsEvents = useAnalyticsEvents();
+
+  // onMount lifecycle hook
+  useEffect(() => {
+    let cleanupFn;
+    const cleanupIdleCallback = createIdleCallback(() => {
+      cleanupFn = setupINPTracking(({
+        value
+      }) => {
+        const interaction = getActiveInteraction();
+        const ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+      });
+    });
+
+    // Cleanup function that will be called when the component unmounts
+    return () => {
+      var _cleanupFn;
+      cleanupIdleCallback();
+      (_cleanupFn = cleanupFn) === null || _cleanupFn === void 0 ? void 0 : _cleanupFn();
+    };
+    // Using hook as mount lifecycle hook.
+    // We do not need to set dependency on analyticsEvents since we are using the analyticsEvents object reference
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // This component doesn't render anything
+  return null;
+};
+const sendAnalytics = debounce((createAnalyticsEvent, value, ufoName) => {
+  fireAnalyticsEvent(createAnalyticsEvent)({
+    payload: {
+      // @ts-expect-error Temporary data
+      action: 'inp',
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inp: value,
+        ufoName
+      }
+    }
+  });
+}, 1_000, {
+  trailing: true
+});
+const createIdleCallback = callback => {
+  if (typeof window.requestIdleCallback === 'function') {
+    const id = window.requestIdleCallback(callback);
+    return () => window.cancelIdleCallback(id);
+  }
+  // Fallback to setTimeout with 0 delay if requestIdleCallback is not available
+  const id = window.setTimeout(callback, 0);
+  return () => window.clearTimeout(id);
+};

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

@@ -291,9 +291,6 @@ const firstBlockNodeStylesNew = css`
  * fix layout issue of first block node
  */
 export const fixBlockControlStylesSSR = () => {
-  if (!fg('platform_editor_ssr_fix_block_controls')) {
-    return null;
-  }
   if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
     return firstBlockNodeStylesNew;
   }
@@ -407,7 +404,7 @@ const contentStyles = props => css`
 	${placeholderTextStyles}
 	${placeholderStyles}
 	${editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null}
-	${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3') ? placeholderWrapStyles : null}
+	${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null}
 
   ${codeBlockStyles()}
 

package/dist/es2019/version-wrapper.js

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

package/dist/esm/composable-editor/core-editor.js

@@ -25,6 +25,7 @@ import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import measurements from '../utils/performance/measure-enum';
 import { name, version } from '../version-wrapper';
 import { EditorUFOBridge, EditorPerformanceMetrics } from './core-performance-metrics';
+import { EditorINPMetrics } from './editor-inp-metrics';
 import { EditorInternal } from './editor-internal';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
 // Ignored via go/ees005
@@ -89,7 +90,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--ufo-bridge') ? jsx(EditorUFOBridge, null) : null, isFullPageApperance && fg('platform_editor_fe--performance_metrics') ? jsx(EditorPerformanceMetrics, null) : null, jsx(EditorInternal, {
+  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--ufo-bridge') ? jsx(EditorUFOBridge, null) : null, isFullPageApperance && fg('platform_editor_fe--performance_metrics') ? jsx(EditorPerformanceMetrics, null) : null, isFullPageApperance && fg('platform_editor_fe--inp-metrics') ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/esm/composable-editor/editor-inp-metrics.js

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import debounce from 'lodash/debounce';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { setupINPTracking } from '@atlaskit/editor-performance-metrics/inp';
+import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
+export var EditorINPMetrics = function EditorINPMetrics() {
+  var analyticsEvents = useAnalyticsEvents();
+
+  // onMount lifecycle hook
+  useEffect(function () {
+    var cleanupFn;
+    var cleanupIdleCallback = createIdleCallback(function () {
+      cleanupFn = setupINPTracking(function (_ref) {
+        var value = _ref.value;
+        var interaction = getActiveInteraction();
+        var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+      });
+    });
+
+    // Cleanup function that will be called when the component unmounts
+    return function () {
+      var _cleanupFn;
+      cleanupIdleCallback();
+      (_cleanupFn = cleanupFn) === null || _cleanupFn === void 0 || _cleanupFn();
+    };
+    // Using hook as mount lifecycle hook.
+    // We do not need to set dependency on analyticsEvents since we are using the analyticsEvents object reference
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // This component doesn't render anything
+  return null;
+};
+var sendAnalytics = debounce(function (createAnalyticsEvent, value, ufoName) {
+  fireAnalyticsEvent(createAnalyticsEvent)({
+    payload: {
+      // @ts-expect-error Temporary data
+      action: 'inp',
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inp: value,
+        ufoName: ufoName
+      }
+    }
+  });
+}, 1000, {
+  trailing: true
+});
+var createIdleCallback = function createIdleCallback(callback) {
+  if (typeof window.requestIdleCallback === 'function') {
+    var _id = window.requestIdleCallback(callback);
+    return function () {
+      return window.cancelIdleCallback(_id);
+    };
+  }
+  // Fallback to setTimeout with 0 delay if requestIdleCallback is not available
+  var id = window.setTimeout(callback, 0);
+  return function () {
+    return window.clearTimeout(id);
+  };
+};

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

@@ -134,9 +134,6 @@ var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _tagge
  * fix layout issue of first block node
  */
 export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
-  if (!fg('platform_editor_ssr_fix_block_controls')) {
-    return null;
-  }
   if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
     return firstBlockNodeStylesNew;
   }
@@ -148,7 +145,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
   return css(_templateObject10 || (_templateObject10 = _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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\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\t", "\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     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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_controls_patch_3') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false

package/dist/esm/version-wrapper.js

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

package/dist/types/composable-editor/editor-inp-metrics.d.ts

@@ -0,0 +1 @@
+export declare const EditorINPMetrics: () => null;