@atlaskit/editor-core 191.0.0 → 191.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 191.0.1
+
+### Patch Changes
+
+- [#65604](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65604) [`c39131fa9ab3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c39131fa9ab3) - [ux] ED-21422 Fix MBE floating toolbar position issue on new tab and scroll.
+- [#65494](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65494) [`14c48a2fa93d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14c48a2fa93d) - Moved the example helpers from the test utlity library to editor-core
+
 ## 191.0.0
 
 ### Major Changes

package/dist/cjs/plugins/extension/toolbar.js

@@ -176,15 +176,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
           var mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
           var mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
           var mbeFrameRect = mbeFrameElement.getBoundingClientRect();
+          var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
 
           /**
            * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
            * excluding nav toolbar height from the floaing extention toolbar position calculated.
-           * adding 15px extra for the spacing between MBE node and floating toolbar.
+           * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
+           * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
            *
            */
+          var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
           return {
-            top: mbeNodeRect.top + mbeFrameRect.height + 15,
+            top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
             left: nextPos.left
           };
         },

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

package/dist/es2019/plugins/extension/toolbar.js

@@ -174,15 +174,18 @@ export const getToolbarConfig = ({
         const mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
         const mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
         const mbeFrameRect = mbeFrameElement.getBoundingClientRect();
+        const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
 
         /**
          * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
          * excluding nav toolbar height from the floaing extention toolbar position calculated.
-         * adding 15px extra for the spacing between MBE node and floating toolbar.
+         * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
+         * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
          *
          */
+        const frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
         return {
-          top: mbeNodeRect.top + mbeFrameRect.height + 15,
+          top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
           left: nextPos.left
         };
       },

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/extension/toolbar.js

@@ -170,15 +170,18 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
           var mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
           var mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
           var mbeFrameRect = mbeFrameElement.getBoundingClientRect();
+          var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
 
           /**
            * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
            * excluding nav toolbar height from the floaing extention toolbar position calculated.
-           * adding 15px extra for the spacing between MBE node and floating toolbar.
+           * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
+           * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
            *
            */
+          var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
           return {
-            top: mbeNodeRect.top + mbeFrameRect.height + 15,
+            top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
             left: nextPos.left
           };
         },

package/dist/esm/version-wrapper.js

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

package/docs/3-annotations.tsx

@@ -1,9 +1,9 @@
 import { token } from '@atlaskit/tokens';
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import React from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import React from 'react';
 
-import { md, code } from '@atlaskit/docs';
+import { code, md } from '@atlaskit/docs';
 import { N20, N30 } from '@atlaskit/theme/colors';
 
 import { Editor } from '../src';
@@ -280,18 +280,18 @@ An annotation mark only describes an \`id\` and a \`type\`, so your component wi
 
 ### Example
 
-The full page examples in the storybook use the \`ExampleInlineCommentComponent\` within the \`@atlaskit/editor-test-helpers\` package, like so:
+The full page examples in the storybook use the \`ExampleViewInlineCommentComponent\` within the \`@atlaskit/editor-core\` package, like so:
 
 ${code`
 import { Editor } from '@atlaskit/editor-core';
-import { ExampleInlineCommentComponent } from '@atlaskit/editor-test-helpers/example-inline-component';
+import { ExampleViewInlineCommentComponent } from '@atlaskit/editor-core/examples-helpers/example-inline-comment-component';
 
 class MyEditor extends React.Component {
   render() {
     return <Editor
             // ... other providers and props here
             annotationProvider={{
-              component: ExampleInlineCommentComponent,
+              component: ExampleViewInlineCommentComponent,
             }}
           />;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "191.0.0",
+  "version": "191.0.1",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -194,7 +194,6 @@
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
     "@atlaskit/util-data-test": "^17.8.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/adf-schema-json": "^1.0.7",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/editor-extension-link-create": "^1.1.0",