@atlaskit/editor-plugin-hyperlink 18.1.12 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 19.0.0
+
+### Patch Changes
+
+- [`fb891566dfac2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb891566dfac2) -
+  Add anyMarksActiveFromTr and getHadMarkAttributes so mark-active checks can run from a
+  transaction. Color, highlight, toolbar/Cmd+K link apply, and paste events include had-mark
+  attributes behind kill switch platform_editor_add_text_color_tracking.
+- [`a075f90fa2e35`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a075f90fa2e35) -
+  Behind `platform_editor_middle_click_no_link_toolbar`: middle-clicking a link no longer opens the
+  link toolbar, and links in editable text now open in a new tab (browsers do not follow link clicks
+  inside `contenteditable`, so previously they did not open at all). Applies to plain hyperlinks and
+  to inline, block, embed and datasource smart links. Behaviour is unchanged when the gate is off.
+- Updated dependencies
+
 ## 18.1.12
 
 ### Patch Changes

package/dist/cjs/editor-commands/commands.js

@@ -173,7 +173,9 @@ var insertLinkWithAnalytics = exports.insertLinkWithAnalytics = function insertL
   if (cardsAvailable && !title && !displayText) {
     return insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions);
   }
-  return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, (0, _utils.getLinkCreationAnalyticsEvent)(inputMethod, href))(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
+  return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, function (state) {
+    return (0, _utils.getLinkCreationAnalyticsEvent)(inputMethod, href, from !== to ? state.tr : undefined);
+  })(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
 };
 function removeLink(pos, editorAnalyticsApi) {
   return (0, _card.commandWithMetadata)(setLinkHref('', pos, editorAnalyticsApi), {

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.stateKey = exports.plugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isSafeUrl = require("@atlaskit/adf-schema/is-safe-url");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _uuid = require("uuid");
 var _link3 = require("@atlaskit/editor-common/link");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -197,12 +199,45 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance,
     key: stateKey,
     props: {
       handleDOMEvents: {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        auxclick: function auxclick(_, event) {
+          if (event.button !== 1) {
+            return false;
+          }
+          var anchor = getLinkAnchor(event);
+          if (!anchor) {
+            return false;
+          }
+
+          // Browsers do not follow a link clicked inside contenteditable, so a link in
+          // editable text never opens on middle-click and has to be opened here. Cards
+          // render their anchor inside a contenteditable="false" node view, and a
+          // read-only editor is itself contenteditable="false" — in both cases the
+          // browser opens the tab, so doing it again here would open two.
+          if (anchor.closest('[contenteditable="false"]')) {
+            return false;
+          }
+          var href = anchor.getAttribute('href');
+          if (!href || !(0, _isSafeUrl.isSafeUrl)(href)) {
+            return false;
+          }
+          if (!(0, _fg.fg)('platform_editor_middle_click_no_link_toolbar')) {
+            return false;
+          }
+          window.open(href, '_blank', 'noopener,noreferrer');
+          return true;
+        },
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mouseup: function mouseup(_, event) {
           // this prevents redundant selection transaction when clicking on link
           // link state will be update on slection change which happens on mousedown
           if (isLinkDirectTarget(event)) {
+            // Leave middle-click alone so the browser can still open the link in a new tab.
+            if (event.button === 1 && (0, _fg.fg)('platform_editor_middle_click_no_link_toolbar')) {
+              return false;
+            }
             event.preventDefault();
             return true;
           }
@@ -211,6 +246,25 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance,
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mousedown: function mousedown(view, event) {
+          // Middle-click on a link: skip ProseMirror's own handling so it does not move
+          // the selection into the link or select the card node, which is what opens
+          // the toolbar.
+          var middleClickAnchor = event.button === 1 ? getLinkAnchor(event) : null;
+          if (middleClickAnchor && (0, _fg.fg)('platform_editor_middle_click_no_link_toolbar')) {
+            // Returning true only stops ProseMirror. The browser still places a caret
+            // at the click point inside contenteditable, and a caret inside the link is
+            // itself enough to open the toolbar, so the default has to be suppressed
+            // too. The auxclick handler above opens the tab for these links.
+            //
+            // Anchors inside a contenteditable="false" node view (cards, and read-only
+            // editors) are deliberately left alone: they get no caret, and it is the
+            // browser's default that opens their new tab.
+            if (!middleClickAnchor.closest('[contenteditable="false"]')) {
+              event.preventDefault();
+            }
+            return true;
+          }
+
           // since link clicks are disallowed by browsers inside contenteditable
           // so we need to handle shift+click selection ourselves in this case
           if (!event.shiftKey || !isLinkDirectTarget(event)) {
@@ -235,4 +289,26 @@ var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance,
 };
 function isLinkDirectTarget(event) {
   return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}
+
+/**
+ * Whether the event happened anywhere inside a link, rather than on the anchor itself.
+ *
+ * Matching on the anchor alone is not enough. Every smart link variant renders its anchor
+ * with nested content inside it — inline cards nest icon, title and lozenge spans, block
+ * and embed cards render anchors via the flexible card `base-link-element` and
+ * `ExpandedFrame` — so the direct target of a real click is almost never the anchor.
+ *
+ * Being DOM based rather than node based, this covers every variant that renders a real
+ * anchor: link marks, inline cards, block cards, embed card headers and datasource cell
+ * links. None of the card node views swallow `mousedown` (their `stopEvent` only returns
+ * true for `dragstart`, or for form elements in the datasource case), so the event does
+ * reach this handler in all of those cases. The exception is content inside an embed
+ * card's iframe, which is a separate document we cannot observe.
+ *
+ * `isLinkDirectTarget` is deliberately left alone: widening it would also change
+ * shift+click and mouseup handling for every nested element inside a link.
+ */
+function getLinkAnchor(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof Element ? event.target.closest('a[href]') : null;
 }

package/dist/es2019/editor-commands/commands.js

@@ -154,7 +154,7 @@ export const insertLinkWithAnalytics = (inputMethod, from, to, href, cardActions
   if (cardsAvailable && !title && !displayText) {
     return insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions);
   }
-  return withAnalytics(editorAnalyticsApi, getLinkCreationAnalyticsEvent(inputMethod, href))(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
+  return withAnalytics(editorAnalyticsApi, state => getLinkCreationAnalyticsEvent(inputMethod, href, from !== to ? state.tr : undefined))(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
 };
 export function removeLink(pos, editorAnalyticsApi) {
   return commandWithMetadata(setLinkHref('', pos, editorAnalyticsApi), {

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

@@ -1,3 +1,5 @@
+import { isSafeUrl } from '@atlaskit/adf-schema/is-safe-url';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { InsertStatus, LinkAction, getActiveLinkMark } from '@atlaskit/editor-common/link';
@@ -196,12 +198,45 @@ export const plugin = (dispatch, intl, editorAppearance, _pluginInjectionApi, _o
   key: stateKey,
   props: {
     handleDOMEvents: {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      auxclick: (_, event) => {
+        if (event.button !== 1) {
+          return false;
+        }
+        const anchor = getLinkAnchor(event);
+        if (!anchor) {
+          return false;
+        }
+
+        // Browsers do not follow a link clicked inside contenteditable, so a link in
+        // editable text never opens on middle-click and has to be opened here. Cards
+        // render their anchor inside a contenteditable="false" node view, and a
+        // read-only editor is itself contenteditable="false" — in both cases the
+        // browser opens the tab, so doing it again here would open two.
+        if (anchor.closest('[contenteditable="false"]')) {
+          return false;
+        }
+        const href = anchor.getAttribute('href');
+        if (!href || !isSafeUrl(href)) {
+          return false;
+        }
+        if (!fg('platform_editor_middle_click_no_link_toolbar')) {
+          return false;
+        }
+        window.open(href, '_blank', 'noopener,noreferrer');
+        return true;
+      },
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       mouseup: (_, event) => {
         // this prevents redundant selection transaction when clicking on link
         // link state will be update on slection change which happens on mousedown
         if (isLinkDirectTarget(event)) {
+          // Leave middle-click alone so the browser can still open the link in a new tab.
+          if (event.button === 1 && fg('platform_editor_middle_click_no_link_toolbar')) {
+            return false;
+          }
           event.preventDefault();
           return true;
         }
@@ -210,6 +245,25 @@ export const plugin = (dispatch, intl, editorAppearance, _pluginInjectionApi, _o
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       mousedown: (view, event) => {
+        // Middle-click on a link: skip ProseMirror's own handling so it does not move
+        // the selection into the link or select the card node, which is what opens
+        // the toolbar.
+        const middleClickAnchor = event.button === 1 ? getLinkAnchor(event) : null;
+        if (middleClickAnchor && fg('platform_editor_middle_click_no_link_toolbar')) {
+          // Returning true only stops ProseMirror. The browser still places a caret
+          // at the click point inside contenteditable, and a caret inside the link is
+          // itself enough to open the toolbar, so the default has to be suppressed
+          // too. The auxclick handler above opens the tab for these links.
+          //
+          // Anchors inside a contenteditable="false" node view (cards, and read-only
+          // editors) are deliberately left alone: they get no caret, and it is the
+          // browser's default that opens their new tab.
+          if (!middleClickAnchor.closest('[contenteditable="false"]')) {
+            event.preventDefault();
+          }
+          return true;
+        }
+
         // since link clicks are disallowed by browsers inside contenteditable
         // so we need to handle shift+click selection ourselves in this case
         if (!event.shiftKey || !isLinkDirectTarget(event)) {
@@ -239,4 +293,26 @@ export const plugin = (dispatch, intl, editorAppearance, _pluginInjectionApi, _o
 });
 function isLinkDirectTarget(event) {
   return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}
+
+/**
+ * Whether the event happened anywhere inside a link, rather than on the anchor itself.
+ *
+ * Matching on the anchor alone is not enough. Every smart link variant renders its anchor
+ * with nested content inside it — inline cards nest icon, title and lozenge spans, block
+ * and embed cards render anchors via the flexible card `base-link-element` and
+ * `ExpandedFrame` — so the direct target of a real click is almost never the anchor.
+ *
+ * Being DOM based rather than node based, this covers every variant that renders a real
+ * anchor: link marks, inline cards, block cards, embed card headers and datasource cell
+ * links. None of the card node views swallow `mousedown` (their `stopEvent` only returns
+ * true for `dragstart`, or for form elements in the datasource case), so the event does
+ * reach this handler in all of those cases. The exception is content inside an embed
+ * card's iframe, which is a separate document we cannot observe.
+ *
+ * `isLinkDirectTarget` is deliberately left alone: widening it would also change
+ * shift+click and mouseup handling for every nested element inside a link.
+ */
+function getLinkAnchor(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof Element ? event.target.closest('a[href]') : null;
 }

package/dist/esm/editor-commands/commands.js

@@ -156,7 +156,9 @@ export var insertLinkWithAnalytics = function insertLinkWithAnalytics(inputMetho
   if (cardsAvailable && !title && !displayText) {
     return insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions);
   }
-  return withAnalytics(editorAnalyticsApi, getLinkCreationAnalyticsEvent(inputMethod, href))(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
+  return withAnalytics(editorAnalyticsApi, function (state) {
+    return getLinkCreationAnalyticsEvent(inputMethod, href, from !== to ? state.tr : undefined);
+  })(insertLink(from, to, href, title, displayText, inputMethod, sourceEvent, appearance, cardActions));
 };
 export function removeLink(pos, editorAnalyticsApi) {
   return commandWithMetadata(setLinkHref('', pos, editorAnalyticsApi), {

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

@@ -1,6 +1,8 @@
 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 { isSafeUrl } from '@atlaskit/adf-schema/is-safe-url';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { InsertStatus, LinkAction, getActiveLinkMark } from '@atlaskit/editor-common/link';
@@ -191,12 +193,45 @@ export var plugin = function plugin(dispatch, intl, editorAppearance, _pluginInj
     key: stateKey,
     props: {
       handleDOMEvents: {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        auxclick: function auxclick(_, event) {
+          if (event.button !== 1) {
+            return false;
+          }
+          var anchor = getLinkAnchor(event);
+          if (!anchor) {
+            return false;
+          }
+
+          // Browsers do not follow a link clicked inside contenteditable, so a link in
+          // editable text never opens on middle-click and has to be opened here. Cards
+          // render their anchor inside a contenteditable="false" node view, and a
+          // read-only editor is itself contenteditable="false" — in both cases the
+          // browser opens the tab, so doing it again here would open two.
+          if (anchor.closest('[contenteditable="false"]')) {
+            return false;
+          }
+          var href = anchor.getAttribute('href');
+          if (!href || !isSafeUrl(href)) {
+            return false;
+          }
+          if (!fg('platform_editor_middle_click_no_link_toolbar')) {
+            return false;
+          }
+          window.open(href, '_blank', 'noopener,noreferrer');
+          return true;
+        },
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mouseup: function mouseup(_, event) {
           // this prevents redundant selection transaction when clicking on link
           // link state will be update on slection change which happens on mousedown
           if (isLinkDirectTarget(event)) {
+            // Leave middle-click alone so the browser can still open the link in a new tab.
+            if (event.button === 1 && fg('platform_editor_middle_click_no_link_toolbar')) {
+              return false;
+            }
             event.preventDefault();
             return true;
           }
@@ -205,6 +240,25 @@ export var plugin = function plugin(dispatch, intl, editorAppearance, _pluginInj
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mousedown: function mousedown(view, event) {
+          // Middle-click on a link: skip ProseMirror's own handling so it does not move
+          // the selection into the link or select the card node, which is what opens
+          // the toolbar.
+          var middleClickAnchor = event.button === 1 ? getLinkAnchor(event) : null;
+          if (middleClickAnchor && fg('platform_editor_middle_click_no_link_toolbar')) {
+            // Returning true only stops ProseMirror. The browser still places a caret
+            // at the click point inside contenteditable, and a caret inside the link is
+            // itself enough to open the toolbar, so the default has to be suppressed
+            // too. The auxclick handler above opens the tab for these links.
+            //
+            // Anchors inside a contenteditable="false" node view (cards, and read-only
+            // editors) are deliberately left alone: they get no caret, and it is the
+            // browser's default that opens their new tab.
+            if (!middleClickAnchor.closest('[contenteditable="false"]')) {
+              event.preventDefault();
+            }
+            return true;
+          }
+
           // since link clicks are disallowed by browsers inside contenteditable
           // so we need to handle shift+click selection ourselves in this case
           if (!event.shiftKey || !isLinkDirectTarget(event)) {
@@ -229,4 +283,26 @@ export var plugin = function plugin(dispatch, intl, editorAppearance, _pluginInj
 };
 function isLinkDirectTarget(event) {
   return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}
+
+/**
+ * Whether the event happened anywhere inside a link, rather than on the anchor itself.
+ *
+ * Matching on the anchor alone is not enough. Every smart link variant renders its anchor
+ * with nested content inside it — inline cards nest icon, title and lozenge spans, block
+ * and embed cards render anchors via the flexible card `base-link-element` and
+ * `ExpandedFrame` — so the direct target of a real click is almost never the anchor.
+ *
+ * Being DOM based rather than node based, this covers every variant that renders a real
+ * anchor: link marks, inline cards, block cards, embed card headers and datasource cell
+ * links. None of the card node views swallow `mousedown` (their `stopEvent` only returns
+ * true for `dragstart`, or for form elements in the datasource case), so the event does
+ * reach this handler in all of those cases. The exception is content inside an embed
+ * card's iframe, which is a separate document we cannot observe.
+ *
+ * `isLinkDirectTarget` is deliberately left alone: widening it would also change
+ * shift+click and mouseup handling for every nested element inside a link.
+ */
+function getLinkAnchor(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof Element ? event.target.closest('a[href]') : null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "18.1.12",
+	"version": "19.0.0",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,17 +21,17 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.3.0",
+		"@atlaskit/adf-schema": "^57.4.0",
 		"@atlaskit/analytics-next": "^12.5.0",
-		"@atlaskit/editor-plugin-analytics": "^16.1.0",
-		"@atlaskit/editor-plugin-card": "^22.1.0",
-		"@atlaskit/editor-plugin-connectivity": "^16.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^18.0.0",
-		"@atlaskit/editor-plugin-primary-toolbar": "^17.0.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^17.1.0",
-		"@atlaskit/editor-plugin-toolbar": "^13.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^14.0.0",
+		"@atlaskit/editor-plugin-analytics": "^17.0.0",
+		"@atlaskit/editor-plugin-card": "^23.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^17.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^19.0.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^18.0.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^18.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^14.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^11.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^15.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-toolbar": "^2.6.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
@@ -40,13 +40,13 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^178.0.0",
+		"@atlaskit/tmp-editor-statsig": "^179.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.16.0",
+		"@atlaskit/editor-common": "^121.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -60,6 +60,9 @@
 		"wait-for-expect": "^1.2.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_middle_click_no_link_toolbar": {
+			"type": "boolean"
+		},
 		"platform_editor_use_preferences_plugin": {
 			"type": "boolean"
 		}