@atlaskit/editor-plugin-hyperlink 2.3.17 → 2.3.18

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 2.3.18
+
+### Patch Changes
+
+- [#119163](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119163)
+  [`45ae1b9a97c16`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45ae1b9a97c16) -
+  [ux] Added onDropdownChange prop to overlay in editor-common. Used this prop to keep link
+  configure overlay open when dropdown is open, and hide overlay when dropdown is hidden.
+- Updated dependencies
+
 ## 2.3.17
 
 ### Patch Changes

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

@@ -12,17 +12,25 @@ var _link = require("@atlaskit/editor-common/link");
 var ButtonWrapper = exports.ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
+    stateKey = _ref.stateKey,
     intl = _ref.intl;
   var wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
   var nonBreakingCharacter = "\u2060";
+  var onDropdownChange = function onDropdownChange(isOpen) {
+    editorView.dispatch(editorView.state.tr.setMeta(stateKey, {
+      type: _link.LinkAction.SET_CONFIGURE_DROPDOWN_OPEN,
+      isOpen: isOpen
+    }));
+  };
   (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats
   }, /*#__PURE__*/_react.default.createElement(_link.OverlayButton, {
     targetElementPos: pos,
-    editorView: editorView
+    editorView: editorView,
+    onDropdownChange: onDropdownChange
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -14,7 +14,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _decorations = require("./decorations");
+var _decorations2 = require("./decorations");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isSelectionInsideLink = function isSelectionInsideLink(state) {
@@ -193,35 +193,46 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance)
             timesViewed: state.timesViewed,
             searchSessionId: state.searchSessionId
           };
-          state = _objectSpread({
+          state = _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages') && state), {}, {
             activeText: state.activeText,
             canInsertLink: state.canInsertLink,
             inputMethod: inputMethod,
             activeLinkMark: toState(state.activeLinkMark, action, newState),
             editorAppearance: editorAppearance
           }, stateForAnalytics);
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
+          if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
+            if (action === _link3.LinkAction.SET_CONFIGURE_DROPDOWN_OPEN) {
+              var configureDropdownOpen = tr.getMeta(stateKey).isOpen;
+              // Hide overlay when the dropdown is closed (state is updated to false)
+              var decorations = configureDropdownOpen ? {} : {
+                decorations: _view.DecorationSet.empty
+              };
+              state = _objectSpread(_objectSpread(_objectSpread({}, state), decorations), {}, {
+                configureDropdownOpen: configureDropdownOpen
+              });
+            }
             if (action === _link3.LinkAction.SET_CONFIGURE_BUTTON_TARGET_POS) {
               var configureButtonTargetPos = tr.getMeta(stateKey).pos;
               var targetPosHasChanged = pluginState.configureButtonTargetPos !== configureButtonTargetPos;
-              var decorations = pluginState.decorations;
-              if (targetPosHasChanged) {
+              var _decorations = pluginState.decorations;
+              if (targetPosHasChanged && state.configureDropdownOpen !== true) {
                 if (configureButtonTargetPos === undefined) {
-                  decorations = _view.DecorationSet.empty;
+                  _decorations = _view.DecorationSet.empty;
                 } else {
                   var decoration = _view.Decoration.widget(configureButtonTargetPos, function (view) {
-                    return (0, _decorations.ButtonWrapper)({
+                    return (0, _decorations2.ButtonWrapper)({
                       editorView: view,
                       pos: configureButtonTargetPos,
+                      stateKey: stateKey,
                       intl: intl
                     });
                   });
-                  decorations = _view.DecorationSet.create(newState.doc, [decoration]);
+                  _decorations = _view.DecorationSet.create(newState.doc, [decoration]);
                 }
               }
               state = _objectSpread(_objectSpread({}, state), {}, {
                 configureButtonTargetPos: configureButtonTargetPos,
-                decorations: decorations
+                decorations: _decorations
               });
             }
           }
@@ -247,7 +258,7 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance)
     key: stateKey,
     props: _objectSpread({
       decorations: function decorations(state) {
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
+        if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
           var _stateKey$getState;
           var _ref = (_stateKey$getState = stateKey.getState(state)) !== null && _stateKey$getState !== void 0 ? _stateKey$getState : {},
             decorations = _ref.decorations;
@@ -286,7 +297,7 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance)
           return false;
         }
       }
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages') && {
+    }, (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages') && {
       markViews: {
         link: function link(mark, view, inline) {
           var toDOM = mark.type.spec.toDOM;

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

@@ -1,22 +1,30 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import { OverlayButton } from '@atlaskit/editor-common/link';
+import { LinkAction, OverlayButton } from '@atlaskit/editor-common/link';
 export const ButtonWrapper = ({
   editorView,
   pos,
+  stateKey,
   intl
 }) => {
   const wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
   const nonBreakingCharacter = '\u2060';
+  const onDropdownChange = isOpen => {
+    editorView.dispatch(editorView.state.tr.setMeta(stateKey, {
+      type: LinkAction.SET_CONFIGURE_DROPDOWN_OPEN,
+      isOpen
+    }));
+  };
   render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats
   }, /*#__PURE__*/React.createElement(OverlayButton, {
     targetElementPos: pos,
-    editorView: editorView
+    editorView: editorView,
+    onDropdownChange: onDropdownChange
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -5,7 +5,7 @@ import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/u
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ButtonWrapper } from './decorations';
 const isSelectionInsideLink = state => !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
 const isSelectionAroundLink = state => {
@@ -194,6 +194,7 @@ export const plugin = (dispatch, intl, editorAppearance) => new SafePlugin({
           searchSessionId: state.searchSessionId
         };
         state = {
+          ...(fg('platform.linking-platform.smart-links-in-live-pages') && state),
           activeText: state.activeText,
           canInsertLink: state.canInsertLink,
           inputMethod,
@@ -201,12 +202,24 @@ export const plugin = (dispatch, intl, editorAppearance) => new SafePlugin({
           editorAppearance,
           ...stateForAnalytics
         };
-        if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+          if (action === LinkAction.SET_CONFIGURE_DROPDOWN_OPEN) {
+            const configureDropdownOpen = tr.getMeta(stateKey).isOpen;
+            // Hide overlay when the dropdown is closed (state is updated to false)
+            const decorations = configureDropdownOpen ? {} : {
+              decorations: DecorationSet.empty
+            };
+            state = {
+              ...state,
+              ...decorations,
+              configureDropdownOpen
+            };
+          }
           if (action === LinkAction.SET_CONFIGURE_BUTTON_TARGET_POS) {
             const configureButtonTargetPos = tr.getMeta(stateKey).pos;
             const targetPosHasChanged = pluginState.configureButtonTargetPos !== configureButtonTargetPos;
             let decorations = pluginState.decorations;
-            if (targetPosHasChanged) {
+            if (targetPosHasChanged && state.configureDropdownOpen !== true) {
               if (configureButtonTargetPos === undefined) {
                 decorations = DecorationSet.empty;
               } else {
@@ -214,6 +227,7 @@ export const plugin = (dispatch, intl, editorAppearance) => new SafePlugin({
                   return ButtonWrapper({
                     editorView: view,
                     pos: configureButtonTargetPos,
+                    stateKey,
                     intl
                   });
                 });
@@ -249,7 +263,7 @@ export const plugin = (dispatch, intl, editorAppearance) => new SafePlugin({
   key: stateKey,
   props: {
     decorations: state => {
-      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+      if (fg('platform.linking-platform.smart-links-in-live-pages')) {
         var _stateKey$getState;
         const {
           decorations
@@ -295,7 +309,7 @@ export const plugin = (dispatch, intl, editorAppearance) => new SafePlugin({
         return false;
       }
     },
-    ...(getBooleanFF('platform.linking-platform.smart-links-in-live-pages') && {
+    ...(fg('platform.linking-platform.smart-links-in-live-pages') && {
       markViews: {
         link: (mark, view, inline) => {
           const toDOM = mark.type.spec.toDOM;

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

@@ -1,21 +1,29 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import { OverlayButton } from '@atlaskit/editor-common/link';
+import { LinkAction, OverlayButton } from '@atlaskit/editor-common/link';
 export var ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
+    stateKey = _ref.stateKey,
     intl = _ref.intl;
   var wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
   var nonBreakingCharacter = "\u2060";
+  var onDropdownChange = function onDropdownChange(isOpen) {
+    editorView.dispatch(editorView.state.tr.setMeta(stateKey, {
+      type: LinkAction.SET_CONFIGURE_DROPDOWN_OPEN,
+      isOpen: isOpen
+    }));
+  };
   render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats
   }, /*#__PURE__*/React.createElement(OverlayButton, {
     targetElementPos: pos,
-    editorView: editorView
+    editorView: editorView,
+    onDropdownChange: onDropdownChange
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -8,7 +8,7 @@ import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/u
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ButtonWrapper } from './decorations';
 var isSelectionInsideLink = function isSelectionInsideLink(state) {
   return !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
@@ -186,35 +186,46 @@ export var plugin = function plugin(dispatch, intl, editorAppearance) {
             timesViewed: state.timesViewed,
             searchSessionId: state.searchSessionId
           };
-          state = _objectSpread({
+          state = _objectSpread(_objectSpread({}, fg('platform.linking-platform.smart-links-in-live-pages') && state), {}, {
             activeText: state.activeText,
             canInsertLink: state.canInsertLink,
             inputMethod: inputMethod,
             activeLinkMark: toState(state.activeLinkMark, action, newState),
             editorAppearance: editorAppearance
           }, stateForAnalytics);
-          if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+          if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+            if (action === LinkAction.SET_CONFIGURE_DROPDOWN_OPEN) {
+              var configureDropdownOpen = tr.getMeta(stateKey).isOpen;
+              // Hide overlay when the dropdown is closed (state is updated to false)
+              var decorations = configureDropdownOpen ? {} : {
+                decorations: DecorationSet.empty
+              };
+              state = _objectSpread(_objectSpread(_objectSpread({}, state), decorations), {}, {
+                configureDropdownOpen: configureDropdownOpen
+              });
+            }
             if (action === LinkAction.SET_CONFIGURE_BUTTON_TARGET_POS) {
               var configureButtonTargetPos = tr.getMeta(stateKey).pos;
               var targetPosHasChanged = pluginState.configureButtonTargetPos !== configureButtonTargetPos;
-              var decorations = pluginState.decorations;
-              if (targetPosHasChanged) {
+              var _decorations = pluginState.decorations;
+              if (targetPosHasChanged && state.configureDropdownOpen !== true) {
                 if (configureButtonTargetPos === undefined) {
-                  decorations = DecorationSet.empty;
+                  _decorations = DecorationSet.empty;
                 } else {
                   var decoration = Decoration.widget(configureButtonTargetPos, function (view) {
                     return ButtonWrapper({
                       editorView: view,
                       pos: configureButtonTargetPos,
+                      stateKey: stateKey,
                       intl: intl
                     });
                   });
-                  decorations = DecorationSet.create(newState.doc, [decoration]);
+                  _decorations = DecorationSet.create(newState.doc, [decoration]);
                 }
               }
               state = _objectSpread(_objectSpread({}, state), {}, {
                 configureButtonTargetPos: configureButtonTargetPos,
-                decorations: decorations
+                decorations: _decorations
               });
             }
           }
@@ -240,7 +251,7 @@ export var plugin = function plugin(dispatch, intl, editorAppearance) {
     key: stateKey,
     props: _objectSpread({
       decorations: function decorations(state) {
-        if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        if (fg('platform.linking-platform.smart-links-in-live-pages')) {
           var _stateKey$getState;
           var _ref = (_stateKey$getState = stateKey.getState(state)) !== null && _stateKey$getState !== void 0 ? _stateKey$getState : {},
             decorations = _ref.decorations;
@@ -279,7 +290,7 @@ export var plugin = function plugin(dispatch, intl, editorAppearance) {
           return false;
         }
       }
-    }, getBooleanFF('platform.linking-platform.smart-links-in-live-pages') && {
+    }, fg('platform.linking-platform.smart-links-in-live-pages') && {
       markViews: {
         link: function link(mark, view, inline) {
           var toDOM = mark.type.spec.toDOM;

package/dist/types/pm-plugins/decorations.d.ts

@@ -1,7 +1,10 @@
 import { type IntlShape } from 'react-intl-next';
+import { type HyperlinkState } from '@atlaskit/editor-common/link';
+import { type PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const ButtonWrapper: ({ editorView, pos, intl, }: {
+export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, }: {
     editorView: EditorView;
     pos?: number | undefined;
+    stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
 }) => HTMLSpanElement;

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -1,7 +1,10 @@
 import { type IntlShape } from 'react-intl-next';
+import { type HyperlinkState } from '@atlaskit/editor-common/link';
+import { type PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const ButtonWrapper: ({ editorView, pos, intl, }: {
+export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, }: {
     editorView: EditorView;
     pos?: number | undefined;
+    stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
 }) => HTMLSpanElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "2.3.17",
+	"version": "2.3.18",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,9 +34,9 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/editor-common": "^84.4.0",
+		"@atlaskit/editor-common": "^84.5.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
-		"@atlaskit/editor-plugin-card": "2.5.0",
+		"@atlaskit/editor-plugin-card": "2.5.1",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",