@atlaskit/editor-plugin-hyperlink 2.6.2 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 2.7.0
+
+### Minor Changes
+
+- [`aef5432662b58`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aef5432662b58) -
+  [ux] EDM-10363 Implement opening links via configure overlay dropdown open link button
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.2
 
 ### Patch Changes

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

@@ -13,7 +13,8 @@ var ButtonWrapper = exports.ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
     stateKey = _ref.stateKey,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    onOpenLinkClick = _ref.onOpenLinkClick;
   var wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
   var nonBreakingCharacter = "\u2060";
@@ -30,7 +31,8 @@ var ButtonWrapper = exports.ButtonWrapper = function ButtonWrapper(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_link.OverlayButton, {
     targetElementPos: pos,
     editorView: editorView,
-    onDropdownChange: onDropdownChange
+    onDropdownChange: onDropdownChange,
+    onOpenLinkClick: onOpenLinkClick
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.stateKey = exports.plugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _uuid = _interopRequireDefault(require("uuid"));
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _link3 = require("@atlaskit/editor-common/link");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -228,7 +227,29 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance,
                         editorView: view,
                         pos: configureButtonTargetPos,
                         stateKey: stateKey,
-                        intl: intl
+                        intl: intl,
+                        onOpenLinkClick: function onOpenLinkClick(event) {
+                          var _node$marks$find, _pluginInjectionApi$a;
+                          if (configureButtonTargetPos === undefined || typeof configureButtonTargetPos !== 'number') {
+                            return;
+                          }
+                          var node = view.state.tr.doc.nodeAt(configureButtonTargetPos);
+                          if (node === null) {
+                            return;
+                          }
+                          var url = (_node$marks$find = node.marks.find(function (mark) {
+                            return mark.type.name === 'link';
+                          })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs.href;
+                          if (!url) {
+                            return;
+                          }
+                          (0, _link3.handleNavigation)({
+                            fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent,
+                            onClickCallback: onClickCallback,
+                            url: url,
+                            event: event
+                          });
+                        }
                       });
                     });
                     _decorations = _view.DecorationSet.create(newState.doc, [decoration]);
@@ -343,34 +364,17 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance,
           };
           dom.onclick = function (event) {
             if (isDirectTarget(event, dom)) {
-              var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+              var _pluginInjectionApi$a2;
               var url = mark.attrs.href;
-              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a.fireAnalyticsEvent) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.call(_pluginInjectionApi$a, {
-                action: _analytics.ACTION.VISITED,
-                actionSubject: _analytics.ACTION_SUBJECT.LINK,
-                eventType: _analytics.EVENT_TYPE.TRACK,
-                attributes: {
-                  platform: _analytics.PLATFORMS.WEB,
-                  mode: _analytics.MODE.EDITOR
-                }
+              // event is globalThis.MouseEvent, while handleNavigation
+              // (and editor-common OnClickCallback) require React.MouseEvent
+              var reactMouseEvent = event;
+              (0, _link3.handleNavigation)({
+                fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.fireAnalyticsEvent,
+                onClickCallback: onClickCallback,
+                url: url,
+                event: reactMouseEvent
               });
-              if (url) {
-                try {
-                  onClickCallback === null || onClickCallback === void 0 || onClickCallback({
-                    event: event,
-                    url: url
-                  });
-                } catch (_unused) {}
-
-                /**
-                 * Links should navigate by default in live pages if:
-                 * - the link is the direct target of the click event
-                 * - default handling wasn't prevented with `event.preventDefault()`
-                 */
-                if (!event.defaultPrevented) {
-                  window.location.href = url;
-                }
-              }
             }
           };
           return {

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

@@ -6,7 +6,8 @@ export const ButtonWrapper = ({
   editorView,
   pos,
   stateKey,
-  intl
+  intl,
+  onOpenLinkClick
 }) => {
   const wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
@@ -24,7 +25,8 @@ export const ButtonWrapper = ({
   }, /*#__PURE__*/React.createElement(OverlayButton, {
     targetElementPos: pos,
     editorView: editorView,
-    onDropdownChange: onDropdownChange
+    onDropdownChange: onDropdownChange,
+    onOpenLinkClick: onOpenLinkClick
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -1,6 +1,5 @@
 import uuid from 'uuid';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
-import { InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
+import { handleNavigation, InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -232,7 +231,27 @@ export const plugin = (dispatch, intl, editorAppearance, pluginInjectionApi, onC
                       editorView: view,
                       pos: configureButtonTargetPos,
                       stateKey,
-                      intl
+                      intl,
+                      onOpenLinkClick: event => {
+                        var _node$marks$find, _pluginInjectionApi$a;
+                        if (configureButtonTargetPos === undefined || typeof configureButtonTargetPos !== 'number') {
+                          return;
+                        }
+                        const node = view.state.tr.doc.nodeAt(configureButtonTargetPos);
+                        if (node === null) {
+                          return;
+                        }
+                        const url = (_node$marks$find = node.marks.find(mark => mark.type.name === 'link')) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs.href;
+                        if (!url) {
+                          return;
+                        }
+                        handleNavigation({
+                          fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent,
+                          onClickCallback,
+                          url,
+                          event
+                        });
+                      }
                     });
                   });
                   decorations = DecorationSet.create(newState.doc, [decoration]);
@@ -357,34 +376,17 @@ export const plugin = (dispatch, intl, editorAppearance, pluginInjectionApi, onC
           };
           dom.onclick = event => {
             if (isDirectTarget(event, dom)) {
-              var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$a3;
+              var _pluginInjectionApi$a2;
               const url = mark.attrs.href;
-              pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : (_pluginInjectionApi$a3 = _pluginInjectionApi$a2.fireAnalyticsEvent) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.call(_pluginInjectionApi$a2, {
-                action: ACTION.VISITED,
-                actionSubject: ACTION_SUBJECT.LINK,
-                eventType: EVENT_TYPE.TRACK,
-                attributes: {
-                  platform: PLATFORMS.WEB,
-                  mode: MODE.EDITOR
-                }
+              // event is globalThis.MouseEvent, while handleNavigation
+              // (and editor-common OnClickCallback) require React.MouseEvent
+              const reactMouseEvent = event;
+              handleNavigation({
+                fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.fireAnalyticsEvent,
+                onClickCallback,
+                url,
+                event: reactMouseEvent
               });
-              if (url) {
-                try {
-                  onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback({
-                    event,
-                    url
-                  });
-                } catch {}
-
-                /**
-                 * Links should navigate by default in live pages if:
-                 * - the link is the direct target of the click event
-                 * - default handling wasn't prevented with `event.preventDefault()`
-                 */
-                if (!event.defaultPrevented) {
-                  window.location.href = url;
-                }
-              }
             }
           };
           return {

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

@@ -6,7 +6,8 @@ export var ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
     stateKey = _ref.stateKey,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    onOpenLinkClick = _ref.onOpenLinkClick;
   var wrapper = document.createElement('span');
   wrapper.style.position = 'relative';
   var nonBreakingCharacter = "\u2060";
@@ -23,7 +24,8 @@ export var ButtonWrapper = function ButtonWrapper(_ref) {
   }, /*#__PURE__*/React.createElement(OverlayButton, {
     targetElementPos: pos,
     editorView: editorView,
-    onDropdownChange: onDropdownChange
+    onDropdownChange: onDropdownChange,
+    onOpenLinkClick: onOpenLinkClick
   }), nonBreakingCharacter), wrapper);
   return wrapper;
 };

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

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import uuid from 'uuid';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
-import { InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
+import { handleNavigation, InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -221,7 +220,29 @@ export var plugin = function plugin(dispatch, intl, editorAppearance, pluginInje
                         editorView: view,
                         pos: configureButtonTargetPos,
                         stateKey: stateKey,
-                        intl: intl
+                        intl: intl,
+                        onOpenLinkClick: function onOpenLinkClick(event) {
+                          var _node$marks$find, _pluginInjectionApi$a;
+                          if (configureButtonTargetPos === undefined || typeof configureButtonTargetPos !== 'number') {
+                            return;
+                          }
+                          var node = view.state.tr.doc.nodeAt(configureButtonTargetPos);
+                          if (node === null) {
+                            return;
+                          }
+                          var url = (_node$marks$find = node.marks.find(function (mark) {
+                            return mark.type.name === 'link';
+                          })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs.href;
+                          if (!url) {
+                            return;
+                          }
+                          handleNavigation({
+                            fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent,
+                            onClickCallback: onClickCallback,
+                            url: url,
+                            event: event
+                          });
+                        }
                       });
                     });
                     _decorations = DecorationSet.create(newState.doc, [decoration]);
@@ -336,34 +357,17 @@ export var plugin = function plugin(dispatch, intl, editorAppearance, pluginInje
           };
           dom.onclick = function (event) {
             if (isDirectTarget(event, dom)) {
-              var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+              var _pluginInjectionApi$a2;
               var url = mark.attrs.href;
-              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a.fireAnalyticsEvent) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.call(_pluginInjectionApi$a, {
-                action: ACTION.VISITED,
-                actionSubject: ACTION_SUBJECT.LINK,
-                eventType: EVENT_TYPE.TRACK,
-                attributes: {
-                  platform: PLATFORMS.WEB,
-                  mode: MODE.EDITOR
-                }
+              // event is globalThis.MouseEvent, while handleNavigation
+              // (and editor-common OnClickCallback) require React.MouseEvent
+              var reactMouseEvent = event;
+              handleNavigation({
+                fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.fireAnalyticsEvent,
+                onClickCallback: onClickCallback,
+                url: url,
+                event: reactMouseEvent
               });
-              if (url) {
-                try {
-                  onClickCallback === null || onClickCallback === void 0 || onClickCallback({
-                    event: event,
-                    url: url
-                  });
-                } catch (_unused) {}
-
-                /**
-                 * Links should navigate by default in live pages if:
-                 * - the link is the direct target of the click event
-                 * - default handling wasn't prevented with `event.preventDefault()`
-                 */
-                if (!event.defaultPrevented) {
-                  window.location.href = url;
-                }
-              }
             }
           };
           return {

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

@@ -1,10 +1,13 @@
+import { type MouseEvent } from 'react';
 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, stateKey, intl, }: {
+export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, onOpenLinkClick, }: {
     editorView: EditorView;
     pos?: number | undefined;
     stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
+    /** Callback fired when the Open Link dropdown item is clicked */
+    onOpenLinkClick: (event: MouseEvent<HTMLAnchorElement>) => void;
 }) => HTMLSpanElement;

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

@@ -1,10 +1,13 @@
+import { type MouseEvent } from 'react';
 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, stateKey, intl, }: {
+export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, onOpenLinkClick, }: {
     editorView: EditorView;
     pos?: number | undefined;
     stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
+    /** Callback fired when the Open Link dropdown item is clicked */
+    onOpenLinkClick: (event: MouseEvent<HTMLAnchorElement>) => void;
 }) => HTMLSpanElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "2.6.2",
+	"version": "2.7.0",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,12 +34,12 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/editor-common": "^87.0.0",
+		"@atlaskit/editor-common": "^87.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
-		"@atlaskit/editor-plugin-card": "2.8.2",
+		"@atlaskit/editor-plugin-card": "2.9.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",