@atlaskit/editor-plugin-extension 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-extension
 
+## 3.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.3
+
+### Patch Changes
+
+- [#101406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101406)
+  [`4748404f1aa3d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4748404f1aa3d) -
+  ED-26111 Add condition that properly positions the floating toolbar for extensions inside the
+  legacy content macro
+- [#100525](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100525)
+  [`c37f69a90637b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c37f69a90637b) -
+  ED-26114: Remove logic for legacy content macro that handled selection changes when entering and
+  exiting the extension. Now handled in the extension code in conlfuence.
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -213,27 +213,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
     key: _pluginKey.pluginKey,
     props: {
       handleDOMEvents: {
-        blur: function blur(view, event) {
-          if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
-            var currentSelection = event.relatedTarget;
-            var previousSelection = event.target;
-            if (!(currentSelection instanceof HTMLElement) || !(previousSelection instanceof HTMLElement)) {
-              return;
-            }
-            var wasPreviousSelectionInsideExtensionEditableArea = !!previousSelection.closest('.extension-editable-area');
-            var isCurrentSelectionInsideExtensionEditableArea = !!currentSelection.closest('.extension-editable-area');
-            var maybeFromPopup = !!currentSelection.closest('[data-editor-popup="true"]');
-
-            // We want to reset the user's selection if they are entering or exiting the extension editable area.
-            // To do so, we check if there previous selection was inside or outside, and if they are now inside or outside.
-            // We want to ignore this if a blur event is originating from an editor popup.
-            if (!maybeFromPopup && wasPreviousSelectionInsideExtensionEditableArea !== isCurrentSelectionInsideExtensionEditableArea) {
-              var emptySelection = new _state.TextSelection(view.state.doc.resolve(0));
-              var tr = view.state.tr.setSelection(emptySelection);
-              view.dispatch(tr);
-            }
-          }
-        },
         /**
          * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
          * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
@@ -335,7 +314,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
         return null;
       },
       handleClickOn: (0, _selection2.createSelectionClickHandler)(['extension', 'bodiedExtension', 'multiBodiedExtension'], function (target) {
-        return (0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro') ? !target.closest('.extension-content') || !!target.closest('.extension-container') : !target.closest('.extension-content');
+        return (0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro') ? !target.closest('.extension-non-editable-area') && (!target.closest('.extension-content') || !!target.closest('.extension-container')) : !target.closest('.extension-content');
       },
       // It's to enable nested extensions selection
       {

package/dist/cjs/pm-plugins/toolbar.js

@@ -164,8 +164,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
           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;
+          if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
+            if (!extensionNode) {
+              return nextPos;
+            }
+            var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+            if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+              return nextPos;
+            }
+          } else {
+            if (!isBodiedExtensionInsideMBE) {
+              return nextPos;
+            }
           }
           var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
           // Ignored via go/ees005

package/dist/cjs/ui/ConfigPanel/Fields/SelectItem.js

@@ -24,6 +24,7 @@ var itemWrapperStyles = (0, _react.css)({
   }
 });
 var iconWrapperStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1
 });
 

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -52,6 +52,7 @@ var itemBodyStyles = (0, _react2.css)({
   flexDirection: 'row',
   flexWrap: 'nowrap',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   margin: "0 ".concat("var(--ds-space-200, 16px)"),
   flexGrow: 3,

package/dist/es2019/pm-plugins/main.js

@@ -156,27 +156,6 @@ export const createPlugin = (dispatch, providerFactory, extensionHandlers, porta
     key: pluginKey,
     props: {
       handleDOMEvents: {
-        blur: (view, event) => {
-          if (fg('platform_editor_legacy_content_macro')) {
-            const currentSelection = event.relatedTarget;
-            const previousSelection = event.target;
-            if (!(currentSelection instanceof HTMLElement) || !(previousSelection instanceof HTMLElement)) {
-              return;
-            }
-            const wasPreviousSelectionInsideExtensionEditableArea = !!previousSelection.closest('.extension-editable-area');
-            const isCurrentSelectionInsideExtensionEditableArea = !!currentSelection.closest('.extension-editable-area');
-            const maybeFromPopup = !!currentSelection.closest('[data-editor-popup="true"]');
-
-            // We want to reset the user's selection if they are entering or exiting the extension editable area.
-            // To do so, we check if there previous selection was inside or outside, and if they are now inside or outside.
-            // We want to ignore this if a blur event is originating from an editor popup.
-            if (!maybeFromPopup && wasPreviousSelectionInsideExtensionEditableArea !== isCurrentSelectionInsideExtensionEditableArea) {
-              const emptySelection = new TextSelection(view.state.doc.resolve(0));
-              const tr = view.state.tr.setSelection(emptySelection);
-              view.dispatch(tr);
-            }
-          }
-        },
         /**
          * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
          * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
@@ -289,7 +268,7 @@ export const createPlugin = (dispatch, providerFactory, extensionHandlers, porta
         }
         return null;
       },
-      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension', 'multiBodiedExtension'], target => fg('platform_editor_legacy_content_macro') ? !target.closest('.extension-content') || !!target.closest('.extension-container') : !target.closest('.extension-content'),
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension', 'multiBodiedExtension'], target => fg('platform_editor_legacy_content_macro') ? !target.closest('.extension-non-editable-area') && (!target.closest('.extension-content') || !!target.closest('.extension-container')) : !target.closest('.extension-content'),
       // It's to enable nested extensions selection
       {
         useLongPressSelection

package/dist/es2019/pm-plugins/toolbar.js

@@ -161,8 +161,18 @@ export const getToolbarConfig = ({
         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;
+        if (fg('platform_editor_legacy_content_macro')) {
+          if (!extensionNode) {
+            return nextPos;
+          }
+          const isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+          if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+            return nextPos;
+          }
+        } else {
+          if (!isBodiedExtensionInsideMBE) {
+            return nextPos;
+          }
         }
         const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
         // Ignored via go/ees005

package/dist/es2019/ui/ConfigPanel/Fields/SelectItem.js

@@ -16,6 +16,7 @@ const itemWrapperStyles = css({
   }
 });
 const iconWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1
 });
 

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -44,6 +44,7 @@ const itemBodyStyles = css({
   flexDirection: 'row',
   flexWrap: 'nowrap',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   margin: `0 ${"var(--ds-space-200, 16px)"}`,
   flexGrow: 3,

package/dist/esm/pm-plugins/main.js

@@ -206,27 +206,6 @@ export var createPlugin = function createPlugin(dispatch, providerFactory, exten
     key: pluginKey,
     props: {
       handleDOMEvents: {
-        blur: function blur(view, event) {
-          if (fg('platform_editor_legacy_content_macro')) {
-            var currentSelection = event.relatedTarget;
-            var previousSelection = event.target;
-            if (!(currentSelection instanceof HTMLElement) || !(previousSelection instanceof HTMLElement)) {
-              return;
-            }
-            var wasPreviousSelectionInsideExtensionEditableArea = !!previousSelection.closest('.extension-editable-area');
-            var isCurrentSelectionInsideExtensionEditableArea = !!currentSelection.closest('.extension-editable-area');
-            var maybeFromPopup = !!currentSelection.closest('[data-editor-popup="true"]');
-
-            // We want to reset the user's selection if they are entering or exiting the extension editable area.
-            // To do so, we check if there previous selection was inside or outside, and if they are now inside or outside.
-            // We want to ignore this if a blur event is originating from an editor popup.
-            if (!maybeFromPopup && wasPreviousSelectionInsideExtensionEditableArea !== isCurrentSelectionInsideExtensionEditableArea) {
-              var emptySelection = new TextSelection(view.state.doc.resolve(0));
-              var tr = view.state.tr.setSelection(emptySelection);
-              view.dispatch(tr);
-            }
-          }
-        },
         /**
          * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
          * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
@@ -328,7 +307,7 @@ export var createPlugin = function createPlugin(dispatch, providerFactory, exten
         return null;
       },
       handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension', 'multiBodiedExtension'], function (target) {
-        return fg('platform_editor_legacy_content_macro') ? !target.closest('.extension-content') || !!target.closest('.extension-container') : !target.closest('.extension-content');
+        return fg('platform_editor_legacy_content_macro') ? !target.closest('.extension-non-editable-area') && (!target.closest('.extension-content') || !!target.closest('.extension-container')) : !target.closest('.extension-content');
       },
       // It's to enable nested extensions selection
       {

package/dist/esm/pm-plugins/toolbar.js

@@ -157,8 +157,18 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
           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;
+          if (fg('platform_editor_legacy_content_macro')) {
+            if (!extensionNode) {
+              return nextPos;
+            }
+            var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
+            if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
+              return nextPos;
+            }
+          } else {
+            if (!isBodiedExtensionInsideMBE) {
+              return nextPos;
+            }
           }
           var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
           // Ignored via go/ees005

package/dist/esm/ui/ConfigPanel/Fields/SelectItem.js

@@ -16,6 +16,7 @@ var itemWrapperStyles = css({
   }
 });
 var iconWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1
 });
 

package/dist/esm/ui/ConfigPanel/Header.js

@@ -44,6 +44,7 @@ var itemBodyStyles = css({
   flexDirection: 'row',
   flexWrap: 'nowrap',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   margin: "0 ".concat("var(--ds-space-200, 16px)"),
   flexGrow: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "3.0.2",
+	"version": "3.0.4",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,13 +24,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/adf-utils": "^19.14.0",
+		"@atlaskit/adf-utils": "^19.16.0",
 		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/datetime-picker": "^15.10.0",
-		"@atlaskit/editor-common": "^98.0.0",
+		"@atlaskit/editor-common": "^99.0.0",
 		"@atlaskit/editor-json-transformer": "^8.21.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
@@ -43,8 +43,8 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/empty-state": "^8.1.0",
 		"@atlaskit/form": "^11.0.0",
-		"@atlaskit/heading": "4.0.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/heading": "4.0.1",
+		"@atlaskit/icon": "^23.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/radio": "^7.0.0",
@@ -56,9 +56,9 @@
 		"@atlaskit/textarea": "^5.7.0",
 		"@atlaskit/textfield": "^6.7.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.31.0",
+		"@atlaskit/tmp-editor-statsig": "^2.33.0",
 		"@atlaskit/toggle": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",