@atlaskit/editor-plugin-extension 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/toolbar.js +18 -21
  3. package/dist/es2019/toolbar.js +18 -21
  4. package/dist/esm/toolbar.js +18 -21
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-extension
2
2
 
3
+ ## 1.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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.
8
+
9
+ ## 1.0.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [#75436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75436) [`bfcf32bb4fa3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfcf32bb4fa3) - [ux] ED-21941 Disable resize/layout options for table, media and extension when added to MBE. Table rendering fixed for Confluence editor
14
+
3
15
  ## 1.0.4
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/toolbar.js CHANGED
@@ -8,6 +8,7 @@ exports.getToolbarConfig = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _extensions = require("@atlaskit/editor-common/extensions");
10
10
  var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
11
+ var _styles = require("@atlaskit/editor-common/styles");
11
12
  var _utils = require("@atlaskit/editor-common/utils");
12
13
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
13
14
  var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/edit"));
@@ -15,6 +16,7 @@ var _mediaCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/m
15
16
  var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
16
17
  var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
17
18
  var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
20
  var _actions = require("./actions");
19
21
  var _commands = require("./commands");
20
22
  var _pluginKey = require("./pm-plugins/macro/plugin-key");
@@ -32,7 +34,13 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
32
34
  if (!selectedExtNode) {
33
35
  return false;
34
36
  }
35
- return !!(([bodiedExtension, multiBodiedExtension].includes(selectedExtNode.node.type) || selectedExtNode.node.type === extension && !(0, _utils2.hasParentNodeOfType)([bodiedExtension, table, expand].filter(Boolean))(selection)) && !(0, _utils2.hasParentNodeOfType)([layoutSection])(selection));
37
+ var isMultiBodiedExtension = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.multi-bodied-extension_0rygg') && selectedExtNode.node.type === multiBodiedExtension;
38
+ var isNonEmbeddedBodiedExtension = selectedExtNode.node.type === bodiedExtension && !(0, _utils2.hasParentNodeOfType)([multiBodiedExtension].filter(Boolean))(selection);
39
+ var isNonEmbeddedExtension = selectedExtNode.node.type === extension && !(0, _utils2.hasParentNodeOfType)([bodiedExtension, table, expand, multiBodiedExtension].filter(Boolean))(selection);
40
+
41
+ // if selection belongs to layout supported extension category
42
+ // and not inside a layoutSection
43
+ return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !(0, _utils2.hasParentNodeOfType)([layoutSection])(selection));
36
44
  };
37
45
  var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
38
46
  var nodeWithPos = (0, _utils3.getSelectedExtension)(state, true);
@@ -135,29 +143,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
135
143
  var _editorView$state = editorView.state,
136
144
  schema = _editorView$state.schema,
137
145
  selection = _editorView$state.selection;
138
- var mbeNode = (0, _utils3.getSelectedExtension)(state, true);
139
- var mbeFrame = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
140
- if (!mbeNode || !mbeFrame) {
146
+ var extensionNode = (0, _utils3.getSelectedExtension)(state, true);
147
+ var possibleMbeParent = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
148
+ // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
149
+ var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
150
+ if (!isBodiedExtensionInsideMBE) {
141
151
  return nextPos;
142
152
  }
143
- var mbeDomElement = editorView.nodeDOM(mbeNode.pos);
144
- var mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
145
- var mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
146
- var mbeFrameRect = mbeFrameElement.getBoundingClientRect();
147
153
  var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
148
-
149
- /**
150
- * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
151
- * excluding nav toolbar height from the floaing extention toolbar position calculated.
152
- * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
153
- * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
154
- *
155
- */
156
- var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
157
- // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
158
- // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
159
- var wrapperHeaderHeight = 40;
160
- var toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
154
+ var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
155
+ var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
156
+ var wrapperBounds = scrollWrapper.getBoundingClientRect();
157
+ var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + _styles.BODIED_EXT_MBE_MARGIN_TOP;
161
158
  return {
162
159
  top: toolbarTopPos,
163
160
  left: nextPos.left
package/dist/es2019/toolbar.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { messages } from '@atlaskit/editor-common/extensions';
2
2
  import commonMessages from '@atlaskit/editor-common/messages';
3
+ import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
3
4
  import { getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
4
5
  import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
5
6
  import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -7,6 +8,7 @@ import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
7
8
  import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
8
9
  import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
9
10
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
11
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
10
12
  import { editExtension } from './actions';
11
13
  import { removeDescendantNodes, removeExtension, updateExtensionLayout } from './commands';
12
14
  import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
@@ -29,7 +31,13 @@ const isLayoutSupported = (state, selectedExtNode) => {
29
31
  if (!selectedExtNode) {
30
32
  return false;
31
33
  }
32
- return !!(([bodiedExtension, multiBodiedExtension].includes(selectedExtNode.node.type) || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
34
+ const isMultiBodiedExtension = getBooleanFF('platform.editor.multi-bodied-extension_0rygg') && selectedExtNode.node.type === multiBodiedExtension;
35
+ const isNonEmbeddedBodiedExtension = selectedExtNode.node.type === bodiedExtension && !hasParentNodeOfType([multiBodiedExtension].filter(Boolean))(selection);
36
+ const isNonEmbeddedExtension = selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand, multiBodiedExtension].filter(Boolean))(selection);
37
+
38
+ // if selection belongs to layout supported extension category
39
+ // and not inside a layoutSection
40
+ return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
33
41
  };
34
42
  const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
35
43
  const nodeWithPos = getSelectedExtension(state, true);
@@ -132,29 +140,18 @@ export const getToolbarConfig = ({
132
140
  selection
133
141
  }
134
142
  } = editorView;
135
- const mbeNode = getSelectedExtension(state, true);
136
- const mbeFrame = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
137
- if (!mbeNode || !mbeFrame) {
143
+ const extensionNode = getSelectedExtension(state, true);
144
+ const possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
145
+ // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
146
+ const isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
147
+ if (!isBodiedExtensionInsideMBE) {
138
148
  return nextPos;
139
149
  }
140
- const mbeDomElement = editorView.nodeDOM(mbeNode.pos);
141
- const mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
142
- const mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
143
- const mbeFrameRect = mbeFrameElement.getBoundingClientRect();
144
150
  const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
145
-
146
- /**
147
- * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
148
- * excluding nav toolbar height from the floaing extention toolbar position calculated.
149
- * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
150
- * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
151
- *
152
- */
153
- const frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
154
- // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
155
- // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
156
- const wrapperHeaderHeight = 40;
157
- const toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
151
+ const nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
152
+ const nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
153
+ const wrapperBounds = scrollWrapper.getBoundingClientRect();
154
+ const toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
158
155
  return {
159
156
  top: toolbarTopPos,
160
157
  left: nextPos.left
package/dist/esm/toolbar.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import { messages } from '@atlaskit/editor-common/extensions';
3
3
  import commonMessages from '@atlaskit/editor-common/messages';
4
+ import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
4
5
  import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
5
6
  import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
6
7
  import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -8,6 +9,7 @@ import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
8
9
  import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
9
10
  import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
10
11
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
12
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
11
13
  import { editExtension } from './actions';
12
14
  import { removeDescendantNodes, removeExtension, updateExtensionLayout } from './commands';
13
15
  import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
@@ -25,7 +27,13 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
25
27
  if (!selectedExtNode) {
26
28
  return false;
27
29
  }
28
- return !!(([bodiedExtension, multiBodiedExtension].includes(selectedExtNode.node.type) || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
30
+ var isMultiBodiedExtension = getBooleanFF('platform.editor.multi-bodied-extension_0rygg') && selectedExtNode.node.type === multiBodiedExtension;
31
+ var isNonEmbeddedBodiedExtension = selectedExtNode.node.type === bodiedExtension && !hasParentNodeOfType([multiBodiedExtension].filter(Boolean))(selection);
32
+ var isNonEmbeddedExtension = selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand, multiBodiedExtension].filter(Boolean))(selection);
33
+
34
+ // if selection belongs to layout supported extension category
35
+ // and not inside a layoutSection
36
+ return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
29
37
  };
30
38
  var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
31
39
  var nodeWithPos = getSelectedExtension(state, true);
@@ -128,29 +136,18 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
128
136
  var _editorView$state = editorView.state,
129
137
  schema = _editorView$state.schema,
130
138
  selection = _editorView$state.selection;
131
- var mbeNode = getSelectedExtension(state, true);
132
- var mbeFrame = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
133
- if (!mbeNode || !mbeFrame) {
139
+ var extensionNode = getSelectedExtension(state, true);
140
+ var possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
141
+ // We only want to use calculated position in case of a bodiedExtension present inside an MBE node
142
+ var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
143
+ if (!isBodiedExtensionInsideMBE) {
134
144
  return nextPos;
135
145
  }
136
- var mbeDomElement = editorView.nodeDOM(mbeNode.pos);
137
- var mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
138
- var mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
139
- var mbeFrameRect = mbeFrameElement.getBoundingClientRect();
140
146
  var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
141
-
142
- /**
143
- * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
144
- * excluding nav toolbar height from the floaing extention toolbar position calculated.
145
- * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
146
- * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
147
- *
148
- */
149
- var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
150
- // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
151
- // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
152
- var wrapperHeaderHeight = 40;
153
- var toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
147
+ var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
148
+ var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
149
+ var wrapperBounds = scrollWrapper.getBoundingClientRect();
150
+ var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
154
151
  return {
155
152
  top: toolbarTopPos,
156
153
  left: nextPos.left
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-extension",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "editor-plugin-extension plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/button": "^17.6.0",
32
32
  "@atlaskit/checkbox": "^13.0.0",
33
33
  "@atlaskit/datetime-picker": "^13.0.3",
34
- "@atlaskit/editor-common": "^78.7.0",
34
+ "@atlaskit/editor-common": "^78.8.0",
35
35
  "@atlaskit/editor-json-transformer": "^8.10.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
37
37
  "@atlaskit/editor-plugin-context-identifier": "^1.0.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/form": "^9.0.3",
47
47
  "@atlaskit/icon": "^22.1.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.2.0",
49
- "@atlaskit/primitives": "^3.0.0",
49
+ "@atlaskit/primitives": "^3.1.0",
50
50
  "@atlaskit/radio": "^6.0.0",
51
51
  "@atlaskit/section-message": "^6.4.0",
52
52
  "@atlaskit/select": "^17.1.0",