@atlaskit/editor-plugin-synced-block 10.2.9 → 10.2.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.2.10
+
+### Patch Changes
+
+- [`abfc496602dcb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/abfc496602dcb) -
+  [ux] Fix the "when the page is published" link in the unpublished synced block reference error
+  card. Links rendered inside the reference sync block's contentEditable island did not navigate on
+  click (the browser placed the caret instead); anchor navigation is now re-triggered on click, and
+  interactive elements show the pointer cursor rather than the text cursor. Both behaviours are
+  gated behind the `platform_editor_sync_block_activation` experiment.
+- Updated dependencies
+
 ## 10.2.9
 
 ### Patch Changes

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncBlockRendererWrapper = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _SyncBlockLabel = require("./SyncBlockLabel");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
@@ -27,6 +29,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 || (_syncBlockFetchResult3 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult3 === void 0 ? void 0 : _syncBlockFetchResult3.type) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
   var isTextSelectionEnabled = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_14');
 
+  // Evaluated unconditionally so the experiment exposure is tracked correctly
+  // (recorded on every render, not lazily on first click).
+  var isSyncBlockActivationEnabled = (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true);
+
   // Prevent editing in the contentEditable renderer wrapper. We set
   // contentEditable="true" to enable text selection (creating an editable
   // island inside ProseMirror's contentEditable="false" nodeview wrapper),
@@ -34,7 +40,39 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var preventInput = (0, _react.useCallback)(function (e) {
     e.preventDefault();
   }, []);
+
+  // Browsers suppress link navigation on a plain click inside a
+  // contentEditable region (they place the caret instead), which breaks links
+  // rendered in the content — e.g. the "when the page is published" link in
+  // the unpublished error card. Re-trigger navigation for _blank anchors
+  // ourselves. A native listener (rather than an onClick on the div) is used
+  // so we delegate link clicks without making the container itself interactive.
+  var rendererRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var containerEl = rendererRef.current;
+    if (!containerEl || !isTextSelectionEnabled || !isSyncBlockActivationEnabled) {
+      return;
+    }
+    var unbind = (0, _bindEventListener.bind)(containerEl, {
+      type: 'click',
+      listener: function listener(e) {
+        // Let the browser handle modified/non-primary clicks (open-in-new-tab,
+        // etc.) natively so we don't open a second tab on top of it.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+        var target = e.target instanceof Element ? e.target : null;
+        var anchor = target === null || target === void 0 ? void 0 : target.closest('a[href]');
+        if (!(anchor instanceof HTMLAnchorElement) || e.defaultPrevented || anchor.target !== '_blank') {
+          return;
+        }
+        window.open(anchor.href, '_blank', 'noopener,noreferrer');
+      }
+    });
+    return unbind;
+  }, [isTextSelectionEnabled, isSyncBlockActivationEnabled]);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: rendererRef,
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -1,7 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SyncBlockLabel } from './SyncBlockLabel';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
@@ -20,6 +22,10 @@ const SyncBlockRendererWrapperComponent = ({
   const isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult5 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult5 === void 0 ? void 0 : (_syncBlockFetchResult6 = _syncBlockFetchResult5.error) === null || _syncBlockFetchResult6 === void 0 ? void 0 : _syncBlockFetchResult6.type) === SyncBlockError.NotFound;
   const isTextSelectionEnabled = fg('platform_synced_block_patch_14');
 
+  // Evaluated unconditionally so the experiment exposure is tracked correctly
+  // (recorded on every render, not lazily on first click).
+  const isSyncBlockActivationEnabled = expValEquals('platform_editor_sync_block_activation', 'isEnabled', true);
+
   // Prevent editing in the contentEditable renderer wrapper. We set
   // contentEditable="true" to enable text selection (creating an editable
   // island inside ProseMirror's contentEditable="false" nodeview wrapper),
@@ -27,7 +33,39 @@ const SyncBlockRendererWrapperComponent = ({
   const preventInput = useCallback(e => {
     e.preventDefault();
   }, []);
+
+  // Browsers suppress link navigation on a plain click inside a
+  // contentEditable region (they place the caret instead), which breaks links
+  // rendered in the content — e.g. the "when the page is published" link in
+  // the unpublished error card. Re-trigger navigation for _blank anchors
+  // ourselves. A native listener (rather than an onClick on the div) is used
+  // so we delegate link clicks without making the container itself interactive.
+  const rendererRef = useRef(null);
+  useEffect(() => {
+    const containerEl = rendererRef.current;
+    if (!containerEl || !isTextSelectionEnabled || !isSyncBlockActivationEnabled) {
+      return;
+    }
+    const unbind = bind(containerEl, {
+      type: 'click',
+      listener: e => {
+        // Let the browser handle modified/non-primary clicks (open-in-new-tab,
+        // etc.) natively so we don't open a second tab on top of it.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+        const target = e.target instanceof Element ? e.target : null;
+        const anchor = target === null || target === void 0 ? void 0 : target.closest('a[href]');
+        if (!(anchor instanceof HTMLAnchorElement) || e.defaultPrevented || anchor.target !== '_blank') {
+          return;
+        }
+        window.open(anchor.href, '_blank', 'noopener,noreferrer');
+      }
+    });
+    return unbind;
+  }, [isTextSelectionEnabled, isSyncBlockActivationEnabled]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    ref: rendererRef,
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -1,7 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
@@ -19,6 +21,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 || (_syncBlockFetchResult3 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult3 === void 0 ? void 0 : _syncBlockFetchResult3.type) === SyncBlockError.NotFound;
   var isTextSelectionEnabled = fg('platform_synced_block_patch_14');
 
+  // Evaluated unconditionally so the experiment exposure is tracked correctly
+  // (recorded on every render, not lazily on first click).
+  var isSyncBlockActivationEnabled = expValEquals('platform_editor_sync_block_activation', 'isEnabled', true);
+
   // Prevent editing in the contentEditable renderer wrapper. We set
   // contentEditable="true" to enable text selection (creating an editable
   // island inside ProseMirror's contentEditable="false" nodeview wrapper),
@@ -26,7 +32,39 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var preventInput = useCallback(function (e) {
     e.preventDefault();
   }, []);
+
+  // Browsers suppress link navigation on a plain click inside a
+  // contentEditable region (they place the caret instead), which breaks links
+  // rendered in the content — e.g. the "when the page is published" link in
+  // the unpublished error card. Re-trigger navigation for _blank anchors
+  // ourselves. A native listener (rather than an onClick on the div) is used
+  // so we delegate link clicks without making the container itself interactive.
+  var rendererRef = useRef(null);
+  useEffect(function () {
+    var containerEl = rendererRef.current;
+    if (!containerEl || !isTextSelectionEnabled || !isSyncBlockActivationEnabled) {
+      return;
+    }
+    var unbind = bind(containerEl, {
+      type: 'click',
+      listener: function listener(e) {
+        // Let the browser handle modified/non-primary clicks (open-in-new-tab,
+        // etc.) natively so we don't open a second tab on top of it.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          return;
+        }
+        var target = e.target instanceof Element ? e.target : null;
+        var anchor = target === null || target === void 0 ? void 0 : target.closest('a[href]');
+        if (!(anchor instanceof HTMLAnchorElement) || e.defaultPrevented || anchor.target !== '_blank') {
+          return;
+        }
+        window.open(anchor.href, '_blank', 'noopener,noreferrer');
+      }
+    });
+    return unbind;
+  }, [isTextSelectionEnabled, isSyncBlockActivationEnabled]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    ref: rendererRef,
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "10.2.9",
+	"version": "10.2.10",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/spinner": "20.1.0",
-		"@atlaskit/tmp-editor-statsig": "^125.0.0",
+		"@atlaskit/tmp-editor-statsig": "^125.1.0",
 		"@atlaskit/tokens": "15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.1.0",