@atlaskit/editor-plugin-extension 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-extension
 
+## 1.0.6
+
+### Patch Changes
+
+- [#75087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75087) [`ede66b0fc1d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ede66b0fc1d5) - [ux] ED-22045 Removing custom logic for MBE floating toolbar.
+
 ## 1.0.5
 
 ### Patch Changes

package/dist/cjs/toolbar.js

@@ -8,6 +8,7 @@ exports.getToolbarConfig = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/edit"));
@@ -142,29 +143,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
           var _editorView$state = editorView.state,
             schema = _editorView$state.schema,
             selection = _editorView$state.selection;
-          var mbeNode = (0, _utils3.getSelectedExtension)(state, true);
-          var mbeFrame = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
-          if (!mbeNode || !mbeFrame) {
+          var extensionNode = (0, _utils3.getSelectedExtension)(state, true);
+          var possibleMbeParent = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
+          // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+          var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+          if (!isBodiedExtensionInsideMBE) {
             return nextPos;
           }
-          var mbeDomElement = editorView.nodeDOM(mbeNode.pos);
-          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.
-           * 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;
-          // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
-          // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
-          var wrapperHeaderHeight = 40;
-          var toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
+          var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+          var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+          var wrapperBounds = scrollWrapper.getBoundingClientRect();
+          var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + _styles.BODIED_EXT_MBE_MARGIN_TOP;
           return {
             top: toolbarTopPos,
             left: nextPos.left

package/dist/es2019/toolbar.js

@@ -1,5 +1,6 @@
 import { messages } from '@atlaskit/editor-common/extensions';
 import commonMessages from '@atlaskit/editor-common/messages';
+import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
 import { getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -139,29 +140,18 @@ export const getToolbarConfig = ({
             selection
           }
         } = editorView;
-        const mbeNode = getSelectedExtension(state, true);
-        const mbeFrame = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
-        if (!mbeNode || !mbeFrame) {
+        const extensionNode = getSelectedExtension(state, true);
+        const possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
+        // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+        const isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+        if (!isBodiedExtensionInsideMBE) {
           return nextPos;
         }
-        const mbeDomElement = editorView.nodeDOM(mbeNode.pos);
-        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.
-         * 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;
-        // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
-        // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
-        const wrapperHeaderHeight = 40;
-        const toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
+        const nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+        const nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+        const wrapperBounds = scrollWrapper.getBoundingClientRect();
+        const toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
         return {
           top: toolbarTopPos,
           left: nextPos.left

package/dist/esm/toolbar.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { messages } from '@atlaskit/editor-common/extensions';
 import commonMessages from '@atlaskit/editor-common/messages';
+import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
 import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -135,29 +136,18 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
           var _editorView$state = editorView.state,
             schema = _editorView$state.schema,
             selection = _editorView$state.selection;
-          var mbeNode = getSelectedExtension(state, true);
-          var mbeFrame = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
-          if (!mbeNode || !mbeFrame) {
+          var extensionNode = getSelectedExtension(state, true);
+          var possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
+          // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
+          var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
+          if (!isBodiedExtensionInsideMBE) {
             return nextPos;
           }
-          var mbeDomElement = editorView.nodeDOM(mbeNode.pos);
-          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.
-           * 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;
-          // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
-          // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
-          var wrapperHeaderHeight = 40;
-          var toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
+          var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
+          var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
+          var wrapperBounds = scrollWrapper.getBoundingClientRect();
+          var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
           return {
             top: toolbarTopPos,
             left: nextPos.left

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-extension",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "editor-plugin-extension plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",