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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.2.11
+
+### Patch Changes
+
+- [`a3bbfab896310`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3bbfab896310) -
+  Replace feature gate `confluence_frontend_native_tabs_extension` with experiment
+  `confluence_native_tabs_experiment` using `expValEquals` from
+  `@atlaskit/tmp-editor-statsig/exp-val-equals`. Usage:
+  `expValEquals('confluence_native_tabs_experiment', 'isEnabled', true)`.
+- Updated dependencies
+
+## 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/pm-plugins/utils/utils.js

@@ -11,7 +11,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * Defers a callback to the next microtask (when gated) or next macrotask via setTimeout(0).
  * Used to avoid re-entrant ProseMirror dispatch cycles.
@@ -33,7 +33,7 @@ var isBodiedSyncBlockNode = exports.isBodiedSyncBlockNode = function isBodiedSyn
   return node.type === bodiedSyncBlock;
 };
 var getUnsupportedNodeTypes = exports.getUnsupportedNodeTypes = (0, _memoizeOne.default)(function () {
-  return new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock'].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : [])));
+  return new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock'].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true) ? ['multiBodiedExtension'] : [])));
 });
 
 /**

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/pm-plugins/utils/utils.js

@@ -3,7 +3,7 @@ import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 /**
  * Defers a callback to the next microtask (when gated) or next macrotask via setTimeout(0).
@@ -25,7 +25,7 @@ export const findSyncBlockOrBodiedSyncBlock = (schema, selection) => {
   return findSyncBlock(schema, selection) || findBodiedSyncBlock(schema, selection);
 };
 export const isBodiedSyncBlockNode = (node, bodiedSyncBlock) => node.type === bodiedSyncBlock;
-export const getUnsupportedNodeTypes = memoizeOne(() => new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock', ...(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : [])]));
+export const getUnsupportedNodeTypes = memoizeOne(() => new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock', ...(expValEquals('confluence_native_tabs_experiment', 'isEnabled', true) ? ['multiBodiedExtension'] : [])]));
 
 /**
  * Checks whether the selection can be converted to sync block

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/pm-plugins/utils/utils.js

@@ -4,7 +4,7 @@ import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 /**
  * Defers a callback to the next microtask (when gated) or next macrotask via setTimeout(0).
@@ -27,7 +27,7 @@ export var isBodiedSyncBlockNode = function isBodiedSyncBlockNode(node, bodiedSy
   return node.type === bodiedSyncBlock;
 };
 export var getUnsupportedNodeTypes = memoizeOne(function () {
-  return new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock'].concat(_toConsumableArray(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : [])));
+  return new Set(['inlineExtension', 'extension', 'bodiedExtension', 'syncBlock', 'bodiedSyncBlock'].concat(_toConsumableArray(expValEquals('confluence_native_tabs_experiment', 'isEnabled', true) ? ['multiBodiedExtension'] : [])));
 });
 
 /**

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.11",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,8 +21,8 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.1.0",
-		"@atlaskit/button": "24.3.2",
-		"@atlaskit/dropdown-menu": "17.1.3",
+		"@atlaskit/button": "24.3.3",
+		"@atlaskit/dropdown-menu": "17.1.4",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-block-menu": "^11.1.0",
@@ -37,16 +37,16 @@
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-synced-block-provider": "^8.6.0",
 		"@atlaskit/editor-toolbar": "^2.2.0",
-		"@atlaskit/flag": "^18.1.0",
+		"@atlaskit/flag": "^18.2.0",
 		"@atlaskit/icon": "37.0.0",
 		"@atlaskit/icon-lab": "^7.3.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/primitives": "^20.6.0",
+		"@atlaskit/primitives": "^21.0.0",
 		"@atlaskit/spinner": "20.1.0",
-		"@atlaskit/tmp-editor-statsig": "^125.0.0",
+		"@atlaskit/tmp-editor-statsig": "^125.2.0",
 		"@atlaskit/tokens": "15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.1.0",
@@ -103,9 +103,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"confluence_frontend_native_tabs_extension": {
-			"type": "boolean"
-		},
 		"confluence_fronend_labels_categorization_migration": {
 			"type": "boolean"
 		},