@atlaskit/editor-core 209.0.1 → 209.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 209.0.3
+
+### Patch Changes
+
+- [#181948](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181948)
+  [`e7e5b1bee5fb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e7e5b1bee5fb2) -
+  [ux] [EDF-2688] Fix extra space for last line in comment editor
+- Updated dependencies
+
+## 209.0.2
+
+### Patch Changes
+
+- [#181802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181802)
+  [`4f35336716da7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f35336716da7) -
+  EDITOR-921 Prevent calls to scrollTop calculation for editors nested in LCE
+- Updated dependencies
+
 ## 209.0.1
 
 ### Patch Changes

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

@@ -479,7 +479,18 @@ function ReactEditorView(props) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     editorView = _useState4[0],
     setEditorView = _useState4[1];
-  var originalScrollToRestore = _react.default.useRef((0, _isFullPage.isFullPage)(props.editorProps.appearance) && (0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
+
+  // Detects if the editor is nested inside an extension - ie. it is a Legacy Content Extension (LCE)
+  var isNestedEditor = (0, _react.useRef)(null);
+  var isNestedEditorCalculated = (0, _react.useRef)(false);
+  if ((0, _platformFeatureFlags.fg)('platform_editor_lce_scrolltop_mitigation')) {
+    if (editorRef.current !== null && !isNestedEditorCalculated.current) {
+      var _editorRef$current;
+      isNestedEditor.current = !!((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.closest('.extension-editable-area'));
+      isNestedEditorCalculated.current = true;
+    }
+  }
+  var originalScrollToRestore = _react.default.useRef(!isNestedEditor.current && (0, _isFullPage.isFullPage)(props.editorProps.appearance) && (0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
   var mitigateScrollJump =
   // The feature gate here is being used to avoid potential bugs with the scroll restoration code
   // moving it to the end of the expression negates the point of the feature gate

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

@@ -17,6 +17,7 @@ var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -95,6 +96,15 @@ var chromelessEditorStylesNew = (0, _react2.css)({
     }
   }
 });
+var extraSpaceLastLineFix = (0, _react2.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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& > p:last-of-type': {
+      marginBottom: "var(--ds-space-0, 0px)"
+    }
+  }
+});
 var ContentArea = exports.ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
@@ -223,7 +233,7 @@ function ChromelessEditorContainerNext(_ref3) {
     children = _ref3.children,
     containerRef = _ref3.containerRef;
   return (0, _react2.jsx)("div", {
-    css: [chromelessEditorStylesNew, scrollbarStylesNew],
+    css: [chromelessEditorStylesNew, scrollbarStylesNew, (0, _platformFeatureFlags.fg)('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     style: {
       maxHeight: maxHeight ? "".concat(maxHeight, "px") : undefined,
       minHeight: "".concat(minHeight, "px")
@@ -249,7 +259,7 @@ function ChromelessEditorContainerOld(_ref4) {
     (0, _react2.css)({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       minHeight: "".concat(minHeight, "px")
-    })],
+    }), (0, _platformFeatureFlags.fg)('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     "data-testid": "chromeless-editor",
     id: "chromeless-editor",
     ref: containerRef

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

@@ -240,6 +240,16 @@ var extensionStyles = exports.extensionStyles = (0, _react.css)({
     '&.danger > span > div > .extension-label > span': {
       display: 'inline'
     },
+    /** Targets legacy content header in LCM extension */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .legacy-content-header': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      backgroundColor: "var(--ds-background-danger, #FFECEB)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& .status-lozenge-span > span': {
+        backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
+      }
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
       display: 'inline'

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

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

@@ -446,7 +446,18 @@ export function ReactEditorView(props) {
     return view;
   }, [getDirectEditorProps, dispatchAnalyticsEvent]);
   const [editorView, setEditorView] = useState(undefined);
-  const originalScrollToRestore = React.useRef(isFullPage(props.editorProps.appearance) && fg('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
+
+  // Detects if the editor is nested inside an extension - ie. it is a Legacy Content Extension (LCE)
+  const isNestedEditor = useRef(null);
+  const isNestedEditorCalculated = useRef(false);
+  if (fg('platform_editor_lce_scrolltop_mitigation')) {
+    if (editorRef.current !== null && !isNestedEditorCalculated.current) {
+      var _editorRef$current;
+      isNestedEditor.current = !!((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.closest('.extension-editable-area'));
+      isNestedEditorCalculated.current = true;
+    }
+  }
+  const originalScrollToRestore = React.useRef(!isNestedEditor.current && isFullPage(props.editorProps.appearance) && fg('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
   const mitigateScrollJump =
   // The feature gate here is being used to avoid potential bugs with the scroll restoration code
   // moving it to the end of the expression negates the point of the feature gate

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

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -82,6 +83,15 @@ const chromelessEditorStylesNew = css({
     }
   }
 });
+const extraSpaceLastLineFix = 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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& > p:last-of-type': {
+      marginBottom: "var(--ds-space-0, 0px)"
+    }
+  }
+});
 export const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
@@ -202,7 +212,7 @@ function ChromelessEditorContainerNext({
   containerRef
 }) {
   return jsx("div", {
-    css: [chromelessEditorStylesNew, scrollbarStylesNew],
+    css: [chromelessEditorStylesNew, scrollbarStylesNew, fg('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     style: {
       maxHeight: maxHeight ? `${maxHeight}px` : undefined,
       minHeight: `${minHeight}px`
@@ -229,7 +239,7 @@ function ChromelessEditorContainerOld({
     css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       minHeight: `${minHeight}px`
-    })],
+    }), fg('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     "data-testid": "chromeless-editor",
     id: "chromeless-editor",
     ref: containerRef

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

@@ -234,6 +234,16 @@ export const extensionStyles = css({
     '&.danger > span > div > .extension-label > span': {
       display: 'inline'
     },
+    /** Targets legacy content header in LCM extension */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .legacy-content-header': {
+      boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
+      backgroundColor: `${"var(--ds-background-danger, #FFECEB)"}`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& .status-lozenge-span > span': {
+        backgroundColor: `${"var(--ds-background-accent-red-subtle-hovered, #FD9891)"}`
+      }
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
       display: 'inline'

package/dist/es2019/version-wrapper.js

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

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

@@ -469,7 +469,18 @@ export function ReactEditorView(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     editorView = _useState4[0],
     setEditorView = _useState4[1];
-  var originalScrollToRestore = React.useRef(isFullPage(props.editorProps.appearance) && fg('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
+
+  // Detects if the editor is nested inside an extension - ie. it is a Legacy Content Extension (LCE)
+  var isNestedEditor = useRef(null);
+  var isNestedEditorCalculated = useRef(false);
+  if (fg('platform_editor_lce_scrolltop_mitigation')) {
+    if (editorRef.current !== null && !isNestedEditorCalculated.current) {
+      var _editorRef$current;
+      isNestedEditor.current = !!((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.closest('.extension-editable-area'));
+      isNestedEditorCalculated.current = true;
+    }
+  }
+  var originalScrollToRestore = React.useRef(!isNestedEditor.current && isFullPage(props.editorProps.appearance) && fg('platform_editor_reduce_scroll_jump_on_editor_start') ? (_document$querySelect = document.querySelector('[data-editor-scroll-container]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop : undefined);
   var mitigateScrollJump =
   // The feature gate here is being used to avoid potential bugs with the scroll restoration code
   // moving it to the end of the expression negates the point of the feature gate

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

@@ -17,6 +17,7 @@ import { css, jsx } from '@emotion/react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -89,6 +90,15 @@ var chromelessEditorStylesNew = css({
     }
   }
 });
+var extraSpaceLastLineFix = 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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& > p:last-of-type': {
+      marginBottom: "var(--ds-space-0, 0px)"
+    }
+  }
+});
 export var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 var EditorContainer = componentWithCondition(function () {
@@ -218,7 +228,7 @@ function ChromelessEditorContainerNext(_ref3) {
     children = _ref3.children,
     containerRef = _ref3.containerRef;
   return jsx("div", {
-    css: [chromelessEditorStylesNew, scrollbarStylesNew],
+    css: [chromelessEditorStylesNew, scrollbarStylesNew, fg('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     style: {
       maxHeight: maxHeight ? "".concat(maxHeight, "px") : undefined,
       minHeight: "".concat(minHeight, "px")
@@ -244,7 +254,7 @@ function ChromelessEditorContainerOld(_ref4) {
     css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       minHeight: "".concat(minHeight, "px")
-    })],
+    }), fg('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
     "data-testid": "chromeless-editor",
     id: "chromeless-editor",
     ref: containerRef

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

@@ -234,6 +234,16 @@ export var extensionStyles = css({
     '&.danger > span > div > .extension-label > span': {
       display: 'inline'
     },
+    /** Targets legacy content header in LCM extension */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .legacy-content-header': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      backgroundColor: "var(--ds-background-danger, #FFECEB)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& .status-lozenge-span > span': {
+        backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FD9891)"
+      }
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
       display: 'inline'

package/dist/esm/version-wrapper.js

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

package/dist/types/composable-editor/editor-internal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { FireAnalyticsCallback } from '@atlaskit/editor-common/analytics';

package/dist/types/create-editor/ReactEditorView/useDispatchTransaction.d.ts

@@ -8,6 +8,6 @@ export declare const useDispatchTransaction: ({ onChange, dispatchAnalyticsEvent
     onChange: EditorOnChangeHandler | undefined;
     dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void;
     onEditorViewUpdated: (params: EditorViewStateUpdatedCallbackProps) => void;
-    isRemoteReplaceDocumentTransaction?: (tr: Transaction) => boolean;
+    isRemoteReplaceDocumentTransaction?: ((tr: Transaction) => boolean) | undefined;
 }) => DispatchTransaction;
 export {};